[WP] ปรับแต่งฟ้อนต์ของ WordPress ให้สวยโดนใจด้วย AnyFont

Any_Font_for_wordpress_main.jpg

ฟ้อนต์เป็นอีกองค์ประกอบสำคัญที่ทำให้เว็บไซต์สมบูรณ์แบบมากยิ่งขึ้น เพราะไม่ว่าจะเป็นการใช้สีตัวหนังสือ ขนาด ความหนาบางของตัวอักษร ก็ทำให้เว็บไซต์แต่ละเว็บไซต์ดูแตกต่าง และมีสไตล์เป็นของตัวเอง แต่การที่เราจะใช้ฟ้อนต์สวยๆ นั้นก็มีปัญหาง่ายๆ อยู่ว่า ถ้าคนที่เปิดเว็บเราไม่ได้ลงฟ้อนต์นั้นไว้ เว็บไซต์ก็จะไม่สวยอย่างที่เราออกแบบไว้ ซึ่งคราวนี้ออฟก็หาปลั๊กอินที่มาตอบโจทย์ครั้งนี้ของเวิร์ดเพรส

  • แนะนำปลั๊กอิน AnyFont

AnyFont เป็นปลั๊กอินที่ให้เราอัพโหลดฟ้อนต์สวยๆ ที่เราอยากใช้ในบล็อคของเราขึ้นไป แล้วสร้างสไตล์ ว่าอยากจะใช้ฟ้อนต์นั้น ขนาดเท่าไหร่ สีอะไร จัดรูปแบบอย่างไร จากนั้นให้เราเลือกว่าต้องการใช้สไตล์นั้นที่ส่วนไหนของบล็อค โดยปลั๊กอินตัวนี้จะทำการแปลงคำเป็นรูปภาพ ซึ่งสิ่งที่สำัคัญที่หลายๆ คนกำลังห่วงก็คือการทำ SEO ของบล็อค ซึ่งปลั๊กอินตัวนี้ก็ให้คำมั่นว่า  “Image replacements are SEO compatible” อันนี้จะก็ต้องไปลองดูกันนะคะ

  • ขั้นตอนการติดตั้งปลั๊กอิน AnyFont

  1. ไปโหลด Plugin มาก่อนที่ http://wordpress.org/extend/plugins/anyfont/
  2. เข้าระบบ Admin แล้วเลือก Plugins (ที่อยู่ทางด้านบนขวาของจอ)
  3. แล้วเลือก Add New
  4. จากนั้นเลือกที่แถบ Upload
  5. กด Browse เพื่อเลือกไฟล์ที่โหลดมา แล้วกด Install Now
  6. ทำการ Active   ซะ
  7. เสร็จสิ้นขั้นตอนการติดตั้ง
  • ขั้นตอนการสร้างโฟลเดอร์สำหรับเก็บฟ้อนต์ AnyFont

  1. หลังจากที่เรา Active ปลั๊กอินนี้แล้วยังไม่ไปสร้างโฟลเดอร์ให้เป็นที่เก็บฟ้อนต์มันจะขึ้นคำเตือนมาAny_Font_for_wordpress_1.jpg
  2. ให้เราเข้าไปสร้างโฟลเดอร์ที่ public_html/wp-content/uploads/
  3. ตั้งค่าการเข้าใช้งานเป็น 777
  • ตัวหนังสือสุดฮิต ที่อยากจะแนะนำให้ใช้ : Supermarket

supermarket_pr.png

Download : http://www.f0nt.com/release/supermarket/

  • การตั้งค่าการใช้งาน AnyFonts

  1. เข้าส่วน Admin แล้วเลือกที่แถบ Any Fonts
  2. กดที่แถบ Install Fonts เพื่ออัพโหลดฟ้อนต์
    Any_Font_for_wordpress_4.jpg
  3. สร้างสไตล์ของ โดยกดที่แถบ Create Style
    Any_Font_for_wordpress_6.jpg
  4. กดที่แถบ Any Fonts Setting เพื่อตั้งค่าว่าต้องการแสดงฟ้อนต์ที่ส่วนใดบ้าง
    Any_Font_for_wordpress_3.jpg
  • ก่อนการใช้งาน AnyFonts
    Any_Font_for_wordpress_7.jpg

  • หลังการใช้งาน AnyFonts
    Any_Font_for_wordpress_9.jpg

หมายเหตุ

- ถ้ามีปัญหา > เกินออกมาไปดูทางแก้ได้ที่ http://wordpress.org/extend/plugins/anyfont/faq/
– ออฟทดสอบใช้ปลั๊กอินนี้แล้วถูกใจอยู่ แต่ว่าที่ไ่ม่ใช้ถาวรเพราะว่ามีหลายส่วนที่ใช้ขนาดฟ๊อนต์แตกต่างกัน อย่างเช่นส่วน Post Title ถ้าเราไปสร้างสไตล์แล้วใช้งาน ทั้งบล็อคจะมีขนาดเท่ากันหมด ซึ่งออฟคิดว่าอาจจะเหมาะกับบล็อกที่ไม่ได้มีการแสดงแต่ละส่วนในหลายๆ ที่

Leave a Reply

6 Comments

  • June 8, 2010 | Permalink | Reply

    เคยลองเล่นและใช้ตัวนี้ทำให้ลูกค้า เจอปัญหาเรื่องฟอนต์ลอย แต่ภาพรวมแล้วดูโอเค แต่ถ้าใช้กับพวกฟอนต์ที่มี
    ลิขสิทธิ์มันจะสวยงาม หรูมาก เยี่ยมครับ ^^

  • November 13, 2010 | Permalink | Reply

    ข้อมูลละเีอียดยิบ…มีความพยายามสูงมากๆ ครับขอชมเชย :o)

  • February 28, 2011 | Permalink | Reply

    หามานานแล้วครับว่าทำยังไง อ่านกระทู้นี้ไปเข้าใจแจ่มเลย แต่เดี๊ยวขอลองดูหน่อยถ้าสระไม่ลอยน่าเกลียดจะเอาไปใช้บ้าง

  • February 8, 2012 | Permalink | Reply

    สุดยอด ละเอียดมาก ๆ

  • March 8, 2012 | Permalink | Reply

    โดนมากๆๆ ขอบคุณครับ

  • hayena
    September 26, 2012 | Permalink | Reply

    ผมใช้ font นี้แล้วสระเลื่อนไปทางด้านขวาครับ

    ผมต้องเข้าไปแก้ไขตรงไหนได้ครับผม

    (ลองกับงานอื่นก็โอเคน่ะ แต่อันนี้ไม่ทราบจริงๆว่าเกิดขึ้นได้ยังไง)

    ขอบคุณล่วงหน้าน่ะครับ

One Trackback

Leave a comment

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Your email is never shared. Required fields are marked *

Enjoy Eating

ร้านอาหารไทย »

รีวิวโดนใจ >> ครัวกรรณิการ์ อาหารทุกอย่างทำจากไก่ อร่อยกันได้ ที่ตัวเมืองหัวหิน

ร้านไอศกรีม »

รีวิวโดนใจ >> YooMoo (ยูมู่) ไอศกรีมโยเกิร์ตแบรนด์ดังจากอังกฤษแห่งแรกในไทยและแห่งเดียวในเอเชีย

บุฟเฟต์ปิ้งย่างและชาบู »

รีวิวโดนใจ >> Hou Yuu (โฮวยู) ร้านบุฟเฟ่ต์ปิ้งย่างและเทปันยากิ 690++ ที่ตึก GMM อโศก

ร้านเค้ก-ขนม-ของหวาน »

รีวิวโดนใจ >> ขนมเปี๊ยะบ้านคุณฉุย สูตร homemade อบวันต่อวัน ปั้นมือทุกลูก และไม่ใส่วัตถุกันเสีย

ร้านอาหารญี่ปุ่น »

โดนใจไปญี่ปุ่น >> Day 5 Hakone Area – แวะชิมไข่ดำในตำนาน – Odawara – นั่งชินคันเซ็นไป  Osaka

ร้านอาหารนานาชาติ »

รีวิวโดนใจ >> Centara Grand Mirage Beach Resort Pattaya (ตอนที่ 5) : มื้อเที่ยงที่Oceans

ร้านอาหารซีฟู๊ด »

รีวิวโดนใจ >> Centara Grand Mirage Beach Resort Pattaya (ตอนที่ 3) : บุฟเฟ่ต์พร้อมโชว์คาบาเร่

ร้านสเต็ก »

รีวิวโดนใจ >> Sizzler ออกเมนู “สเต็กไก่เทอริยากิ” มาเอาใจคนชอบทานสเต็กสไตล์ญี่ปุ่นแล้วค่า

ร้านอาหารอีสาน »

รีวิวโดนใจ >> ส้มตำคุณกัญจณ์ ร้านอาหารไทย-อีสานเจ้าประจำ อร่อยได้ในราคาเบาๆ ที่สุขุมวิท 101/1

ร้านอาหารเกาหลี »

รีวิวโดนใจ >> BonChon Chicken ไก่ทอดกรอบบอนชอนสไตล์เกาหลี สาขาสีลมคอมเพล็กซ์

ร้านอาหารอิตาเลียน »

รีวิวโดนใจ >> Centara Grand Mirage Beach Resort Pattaya (ตอนที่ 5) : มื้อเที่ยงที่Oceans

ร้านจีนและติ่มซำ »

รีวิวโดนใจ >>Yu He  (หยูเห้อ) กับบุฟเฟ่ต์ติ่มซำ 650++ อิ่มอร่อยเต็มที่โรงแรม Grand FourWing

ร้านราเมน-ก๋วยเตี๋ยว »

รีวิวโดนใจ >> Fujiyama Go Go: แชมป์ราเมน-สึเคะเมน อร่อยน่าลอง สาขาสุขุมวิท 39

ร้านซูชิ »

รีวิวโดนใจ >> Sushi Hiro อร่อยกับซูชิ อิ่มด้วยโปรโมชั่นแรงๆ ลดถึง50% ที่สาขาพระราม9

ห้องอาหารโรงแรม »

รีวิวโดนใจ >> Centara Grand Mirage Beach Resort Pattaya (ตอนที่ 5) : มื้อเที่ยงที่Oceans