บทความ - diy งานไฟฟ้า ผู้เริ่มต้น ช่างจำเป็น

บันทึกส่วนตัว ลองปรับแต่ง css บล็อกอีดิทเตอร์ บนเวิร์ดเพลส ที่เขียนยาวๆให้น่าอ่าน (กำลังเริ่มเขียน)

ไปที่กำลังเขียน ลิงต์ เฉพาะคนเขียน

             เวิร์ดเพลส ปัจจุบันตั้งปี2021 (ver.5.8 ขึ้นไป)  ในการเขียนบทความ (เรื่อง , post) สามารถสร้างเรื่องแต่ละหน้าให้มีธีม ให้แต่ละช่วงมีรูปแบบและสีสันต่างๆกันได้ ด้วยการใช้ บล็อกอิดิทเตอร์ +ปลั๊กอินที่จัดการเรื่องcss โดยแทบไม่ต้องเขียนcss เป็น  และถ้ามีความรู้ในการเขียนcssเป็น และใช้ปลั๊กอินเพจบิวเดอร์ต่างๆในการสร้างหน้า(Page ,เพจ) ยิ่งสร้างได้ในรูปแบบที่กว้างไม่จำกัด  แต่อย่างไรก็ตาม บทความนี้เป็นบันทึกส่วนตัวของผม ซึ่งผมจะบันทึกเฉพาะสิ่งที่ผมอยากบันทึกในสิ่งที่ค้นคว้ามา เป็นเทคนิคต่างๆที่ลึกลงไปค่อนข้างมาก และเขียนบันทึกยาวมาก เพราะเวลาทำเวิร์ดเพลสจริงๆจะมีปัญหาทางเทคนิคที่ต้องแก้ไขมากมาย ก็เลยต้องการบันทึกเอาไว้ เป็นลักษณะบันทึกช่วยจำ เวลาผมจะสร้างหรือทำใหม่ก็ค้นคว้าได้สะดวกในหน้าเดียว เนื้อหาจึงมีส่วนของกึ่งโปรแกรมเมอร์และมีทั้งส่วนธรรมดาเหมาะกับคนทั่วไป ถ้าจะเลือกอ่านให้อ่านเฉพาะส่วนที่ใช่อันไหนไม่ใช้ให้ข้ามไปเลยครับ

  WordPress Tutorial for Beginners: Build Any Web Page You See by Jack Cao >>VDO link only , no permission here  

vdo youtube by Jack Cao แสดงให้เห็นว่า word press 5.8 สามารถสร้างหน้าเพจเกือบทุกชนิดได้ โดยเขาใช้ ธีม Kadence ซึ่ง เป็นธีมที่สามารถผูกใช้ woocommerce ได้ สามารถลบส่วนบนที่ไม่ต้องการและหัวข้อเรื่องทิ้งไปเลยก็ได้  และใช้ปลั๊กอิน Gutenberg Blocks by Kadence Blocks – Page Builder Features By Kadence WP ซึ่งสามารถสร้างหน้าเพจคล้ายเพจบิวเดอร์ แต่อิงการใข้งานบล็อกอิดิทเตอร์ Gutenberg block editor ซึ่งต่างกับ เพจบิวเดอร์ อีลีเมนท์เตอร์ที่จัดได้ว่าเป็นแบบเก่าไม่สามารถเปลี่ยนกลับมาใช้งานบล็อกอิดิทเตอร์ได้

     

         บทความที่ค่อนข้างยาวมาก การที่ทำให้ผู้อ่านรับรู้ช่วงคอนเท้นท์ที่กำลังอ่านว่าอยู่ในส่วนที่กำลังเกี่ยวข้องนั้นสำคัญมาก  ทำให้ผู้อ่านแยกแยะอ่านในส่วนที่จำเป็นไม่เสียเวลา การแยกแยะช่วงคอนเท้นท์ด้วยสีพื้นจะสะดวกในการอ่านค้นหามากกว่า โดยบทความส่วนใหญ่ประกอบด้วยรูปตัวอย่างหรือลิงค์วีดีโอจำนวนมากพอที่ทำให้ผู้อ่านเข้าใจ ทำให้โหลดค่อนข้างช้า  เวลาหาก็กดค้นหาให้ใช้ ctrl+f เพื่อค้นแต่คำที่ต้องการ จะง่ายที่สุด

     

     

            เกริ่น นอกเรื่อง  ทำความรู้จักกัน สักนิดนึงนะครับ ผมไม่ได้เขียนอะไรบนเวิร์ดเพลสได้หนึ่งปีแล้ว  ตั้งแต่เดือน7ปี2020 ซึ่งปีที่แล้วผมก็เพิ่งได้รู้จักกับblock editorของ wordpress สำหรับผมแล้วเวิร์เพลสไม่ใช่อะไรใหม่ ผมเขียนบทความด้วยเวิร์ดเพลสด้วย classic editor ในเว็บเก่าตั้งแต่ปี2013-2015 เว็บเก่าผมสมัยนั้นยังไม่ได้เป็น responsive ด้วยซ้ำ หลังจากปี2015ก็ไม่ได้เขียนอะไรอีกเลย พอปี2020ก็อัพเดทเวิร์ดเพลสเป็น5.7 ที่siteเก่าของผม  www.pui108diy.com/wp   ตอนนั้นอยู่ๆก็มีบล็อกอีดิเตอร์จึงมึนมาก ทำความรู้จักกับสัก1เดือน มันก็โอเคนะแต่ยังรู้สึกว่าดีไม่สุดและยังไม่รู้จะปรับยังไงให้ได้ตามใจ แล้วก็ล้างลาไปจากวงการเวิร์ดเพลส 1ปี

    

             ช่วง1ปีที่ผ่านมาติดใจทำเว็บฟันเนล จึงไปลองสร้างเว็บใหม่ pui108diych.com สร้างบทความที่แพลทฟอร์มฟันแนลแบงจ์ www.funnelbang.com  แล้วก็ย้ายบทความจากฟันแนล(ข้ามแพลทฟอร์ม)ทั้งหมดมาที่ เวิร์ดเพลส5.8เดือน7ปีนี้ คือ2021  เนื่องจากไปฝึกลองวิชามาแล้วจากฟันเนลและย้ายมาเป็นเวิร์ดเพลส เห็นข้อดีของแพลทฟอร์มเก่าคือคล้ายๆกับเพจบิวเดอร์ มีวิธเจ็ทต่างๆให้ใช้ พอกลับมาใช้เวิร์ดเพลสโจทย์ใหญ่ที่คิดไว้คืออยากได้เว็บไซต์หน้าตาเหมือนเดิม ยังไงก็ต้องปรับแต่งเวิร์ดเพลสให้ได้หน้าตาเดิม

     

            ก็ใช้เวลาเดือนนึงกว่าจะค้นคว้าหาวิธีให้มันพอเข้าที่เข้าทางทั้งการปรับ css การหาปลั๊กอินที่เหมาะสม และวิธีที่จะใช้บล็อกอิดิทเตอร์อย่างง่ายๆ ใช่ครับ ตัวที่ใช้มากที่สุดคือ block เขียน ที่ชื่อว่า classic editor ครับ มาถึงตรงนี้น่าจะถูกใจสายเขียนบทความเก่า ซึ่ง block paragraphทำไม่ได้ เช่น ตรงส่วนที่ย่อหน้าแบบไทยๆที่ต้องกดspacebarสัก5-6ที ก่อนย่อหน้าใหม่ ที่แต่ก่อนต้องใช้คำสั่ง text-indent และมีเทคนิคการขึ้นบรรทัดที่เหมือนเป็นช่องว่างที่ระบบการเขียนด้วยบล็อกอิดิทเตอร์ก็เข้าใจว่าเป็นช่องว่างระหว่างบรรทัดเป็นต้น และอันที่รองลงมาก็คือ  block พื้นสีสวย ที่มาจากปลั๊กอิน ที่ชื่อว่า multipurpose block ที่เลือกใช้มันเพราะ ถ้าปิดหรือไม่มีปลั๊กอินตัวนี้ ข้อมูลการแสดงพื้นสีขอบก็ยังปรกติ เพราะ multipurpose block จะสร้างอินไลน์css และใส่ลงในเบื้องหลังอินไลน์จริงๆ ทำให้มันยังทำงานได้ถูกต้อง หรืออาจจะใช้ Group Block (ไม่ต้องใช้ปลั๊กอิน) สร้างกรอบพื้นสีgradient backgroundสวยๆได้ปรับสีและมุมเกลี่ยได้ง่ายกว่า แต่ยังปรับช่องไฟpadding และ margin ไม่ได้

       

          เพจบิวเดอร์ ที่นิยมที่ผ่านๆมา มีปลั๊กอินที่ชื่ออีลีเมนท์เตอร์ในเวิร์ดเพลสสามารถทำเพจสำหรับเว็บไซต์ได้อย่างง่ายดาย ซึ่งดีครับ แต่ผมไม่ใช้เนื่องจากมันสร้างให้มีโค๊ดแยกจากกันกับบล็อกอิดิทเตอร์ซึ่งในตารางที่เก็บในดาต้าเบสจะซับซ้อนกว่าและไม่ได้อยู่ในตารางข้อมูลปรกติที่เก็บpost แต่เป็นโค๊ดที่แยกออกพวกมันน่าจะถูกใส่ด้วยjsในภายหลัง และเราไม่สามารถแก้ไขข้อมูลแบบบล็อกอิดิทเตอร์ได้ต้องผูกติดกับปลั๊กอินของเขาตลอดไป และบทความต่างๆในอนาคตผมอาจจะย้ายจาก wordpress.org ไปที่แพลทฟอร์ม wordpress.com มันง่ายกว่าครับถ้าไม่ได้ผูกติดกับปลั๊กอินที่แยกข้อมูลกับบล็อกอิดิทเตอร์  อีลีเมนเตอร์จะถูกจัดอยู่ในพวกplug in เพจบิวเดอร์แบบสมัยเก่า ซึ่งแบบสมัยใหม่จะใช้กับ Block editor แบบ Gutenberg block ซึ่งเป็นมาตรฐานของเวิร์ดเพลสปัจจุบัน

      

        ในอนาคต ไม่ต้องสงสัยเลย บล็อกอิดิทเตอร์ในเวิร์ดเพลส จะมี สิ่งอำนวยความสะดวกในการปรับตั้งcssแบบคลิ๊กใส่ง่ายๆ ใน more setting ซึ่งมันจะทำทุกอย่างได้เกือบเหมือนเพจบิวเดอร์ สิ่งที่ยังขาดคือ เวิร์ดเพลสที่ยังไม่ได้ติดตั้งปลั๊กอินจะไม่สามารถสร้างหน้าเพจบนธีมใดๆ ได้เหมือนเพจบิวเดอร์ คือไม่ติดกับรูปแบบที่มองเห็นเดิม แต่สามารถสร้างรูปแบบทุกอย่างได้ใหม่หมดในเพจ คือไม่ต้องมีหัวแบบเดิมตำแหน่งเดิม navแบบเดิม หัวข้อแบบเดิม footer แบบเดิม แต่ทุกอย่างสร้างใหม่ได้หมดด้วยบล็อกอิดิทเตอร์ที่ไม่ต้องใช้ปลั๊กอินเพิ่มเติม แต่ในอนาคตก็ไม่แน่นะครับ 

      

   

       

 โครงสร้างหลักๆของเรื่องและหน้าในเวิร์ดเพลส ในงานCSS

       

     

  หน้าตาเว็บที่คนดูเห็น ส่วนโครงสร้างภายนอก

     

ส่วนหัว-Head part ประกอบด้วย

  • 1. อัตลักษณ์ของเว็บ web identity จะเป็นภาพหรือคำ หรือจะไม่มีก็ได้
  • 2. ลิงค์ไปหน้าอื่นๆ Nav – navigation นาวิเกชั่น หรือลิงค์ไปหน้าที่ต้องการ

     

ส่วนเนื้อหา-Content part ประกอบด้วย

  • หัวเรื่องของ post หรือ page  / และ เนื้อความ หรือเนื้อหา ที่สร้างด้วยblock editor

     

ส่วนเท้า- Foot part ประกอบด้วย

  • Foot Widget , Social ring (nav) , site info ซึ่งเหล่านี้จะมีหรือไม่ก็ได้ ถ้าเป็นวิธเจ็ทจะปรับเปลี่ยนได้ง่าย แต่บางส่วนต้องแก้ภายใน

     

p9020_wordpress_structure_visitor_look_header_content_footer
เวลาเราเปิดหน้าเว็บเวิร์ดเพลสจะมีรูปแบบที่มองเห็นคร่าวๆดังรูปบน สิ่งที่เห็นทั้งหมดถูกเขียนด้วยภาษาHTML และถูกบรรจุอยู่ใน tag <body>…</body> ในภาษาHTML การปรับรูปแบบcss ต้องระบุชื่อ class, id ของส่วนที่ส่วนใจในภาษาHTML จึงจะปรับรูปแบบรูปร่าง ขนาดหรือสีได้

    

โครงสร้าง Html Tag , Class และ ID ของเวิร์ดเพลส สำหรับตกแต่ง CSS

    

       การสร้างเนื้อหาให้ผู้ชมเข้ามาดู เบื้องหลังจะถูกเขียนด้วยภาษาHTML จะประกอบด้วย tag <>ของอีลีเม้นท์จำนวนมาก แต่ละtag ทำหน้าที่ต่างๆกัน มีชื่อเฉพาะที่เอาไว้เรียกเวลาปรับแต่งให้มันมีขนาดตามต้องการด้วยcss(โค๊ดในการตกแต่งtagนั้นๆ) เราจะระบุชื่อเหล่านั้นผ่านชื่อในattribute(คุณสมบัติ)ที่เรียกว่า Class (ชื่อกลุ่มประเภทเดียวกัน) หรือ ID (ชื่อที่ไม่ซ้ำ) ซึ่งจะง่ายที่สุดในเรีบกชื่อเพื่อการปรับแต่ง

     

       ในที่นี้จะพูดถึงส่วนโครงสร้าง html ที่เกี่ยวข้อง ในส่วนของ contentหรือเนื้อหาในเวิร์ดเพลส  การปรับแต่ง css เชิงโครงสร้างของหัวข้อหรือหัวเรื่องและเนื้อหาหรือเนื้อความ เช่น รูปแบบ ขนาด สี ช่องไฟ ของ หัวข้อหรือเนื้อหาบทความ(post,เรื่อง) และ หน้า (page,เพจ) ควรทำความเข้าใจในโครงสร้างของเวิร์ดเพลสในธีมอะไรก็ตามเมื่อถูกโหลดออกมาให้ผู้อ่านดู ในส่วนcontentเนื้อหามีรูปแบบโครงสร้างHTML ของชื่อคลาสหรือชื่อไอดีเฉพาะของอีลีเม้นท์(ส่วนที่สามารถแก้ไขcss)ในเนื้อหาของเวิร์ดเพลส หลักๆของอยู่ 3รูปแบบ ที่แตกต่างกัน คือ โครงสร้าง POST , PAGE , และ HOME ซึ่งจะมีการระบุคลาส หรือ ID ต่างๆกัน ที่ทำให้ง่ายต่อการปรับ CSS ดังนี้  รูปที่เห็นบนมือถือทั้งหมดรวมถึงส่วนcontent post เป็นต้น พวกนี้ทั้งหมดอยู่ในส่วน <body>…</body> ในภาษาHTML

    

POST Html Class ID Structure – wordpress

 โครงสร้าง HTML เรื่อง-post ในเวิร์ดเพลส

  <html>

    <head>..ไม่แสดงผล.</head>

<body class=” post-template-default   single 

  single-post   postid-1     customize-support ” >

 <div id=”page” class=”site”>

1.<header id=”masthead” class=”site-header” role=”banner”>

1.1<div class=”custom-header”>

1.2<div class=”navigation-top site-navigation-fixed”>

2.<div class=”site-content-contain”

2.1<div id=”content” class=”site-content”>

<div class=”wrap”>

………………..  

..<div id=”primary” class=”content-area”>

<main id=”main” class=”site-main” role=”main”>

/<article id=” post-1 ” class=” post-1   post  type-post status-publish format-standard   hentry   category-uncategorized “>

..<header class=”entry-header”>

<div class=”entry-meta”>

<span class=”posted-on”> ..เวลาโพส

<span class=”byline”> ..โดย

<h1 class=”entry-title”>หัวข้อPost</h1>

..<div class=”entry-content”

/<div id=”comments” class=”comments-area”>

/<nav class=”navigation post-navigation”

role=”navigation”

aria-label=”Posts”> ***ปุ่มnext

2.2 <footer id=”colophon” class=”site-footer” role=”contentinfo”>

     …</body>

     </html>

p9020_wordpress_example_class_in_post_article_gif_animation

    

PAGE Html Class ID Structure – wordpress

 โครงสร้าง HTML หน้า-เพจ-page ในเวิร์ดเพลส

  <html>

    <head>..ไม่แสดงผล.</head>

<body class=” page-template-default   page 

  page-id-176    customize-support ” >

 <div id=”page” class=”site”>

1.<header id=”masthead” class=”site-header” role=”banner”>

1.1<div class=”custom-header”>

1.2<div class=”navigation-top site-navigation-fixed”>

2.<div class=”site-content-contain”

2.1<div id=”content” class=”site-content”>

<div class=”wrap”>

………………..  

..<div id=”primary” class=”content-area”>

<main id=”main” class=”site-main” role=”main”>

<article id=” post-176 ” class=” post-176   page  type-page status-publish   hentry  “>

..<header class=”entry-header”>

<h1 class=”entry-title”>หัวข้อPage</h1>

..<div class=”entry-content”

  

2.2 <footer id=”colophon” class=”site-footer” role=”contentinfo”>

     …</body>

     </html>

     Set Page เพจเป็น home หรือเป็นหน้าแรก

<body class=” home   page-template-default   page 

  page-id-176    customize-support ” >

 <div id=”page” class=”site”>

1.<header id=”masthead” class=”site-header” role=”banner”>

1.1<div class=”custom-header”>

1.2<div class=”navigation-top site-navigation-fixed”>

2.<div class=”site-content-contain”

2.1<div id=”content” class=”site-content”>

<div class=”wrap”> **ไม่มี

………………..  

..<div id=”primary” class=”content-area”>

<main id=”main” class=”site-main” role=”main”>

<article id=” post-176 ” class=”  twentyseventeen-panel   post-176   page  type-page status-publish   hentry  “>

<div class=” panel-content”

<div class=”wrap”>

..<header class=”entry-header”>

<h1 class=”entry-title”>หัวข้อPage</h1>

..<div class=”entry-content”

  

2.2 <footer id=”colophon” class=”site-footer” role=”contentinfo”>

      

     

    

HOME Blog Html Class ID Structure – wordpress

 โครงสร้าง HTML หน้าแรก โฮม บล็อก  ในเวิร์ดเพลส

  <html>

    <head>..ไม่แสดงผล.</head>

<body class=” home   blog   customize-support ” >

 <div id=”page” class=”site”>

1.<header id=”masthead” class=”site-header” role=”banner”>

1.1<div class=”custom-header”>  *มีเหมือนกับpost page

..<div class=”custom-header-media”> ส่วนภาพ

<div id=”wp-custom-header” class=”wp-custom-header”><img

..<div class=”site-branding” ตัวหนังสือ

1.2<div class=”navigation-top site-navigation-fixed”>

2.<div class=”site-content-contain”

2.1<div id=”content” class=”site-content”>

<div class=”wrap”>

………………..  

..<header class=”page-header”> *หัวของblog

…<h2 class=”page-title”>Posts หัวblog</h2>

..<div id=”primary” class=”content-area”>

<main id=”main” class=”site-main” role=”main”>

<article id=” post-1 ” class=” post-1   post  type-post status-publish format-standard sticky   hentry   category-uncategorized “>

..<header class=”entry-header”>

<div class=”entry-meta”>

ไม่มี<span class=”posted-on”> ..เวลาโพส

ไม่มี<span class=”byline”> ..โดย

<h3 class=”entry-title”>หัวข้อPost</h3>

..<div class=”entry-content”

<article id=” post-2” 

<article id=” post-3 ” 

2.2 <footer id=”colophon” class=”site-footer” role=”contentinfo”>

     …</body>

     </html>

    

classic

classic

classic

กำลังเขียน 2/8/64

    

       

ปรับตั้ง เทคนิคใช้งาน WordPress , Adjust & Tip

  WordPress CSS , font , usage, all

       

เนื้อหาการใช้งานเบื้องต้น

    

หัวข้อทั่วไป

วีดีโอสอน WordPress youtube playlist

    

            วีดีโอของ พลากร สอนสร้างเว็บ ได้แนะนำ ติดตั้งใช้งาน เทคนิค อัพเดท woocommerce และอื่นๆอีกมากมาย เหมาะสำหรับมือใหม่ อยากใช้เวิร์ดเดพลส เขามีเว็บไซต์สอนเป็นคอสเรียนด้วยนะ https://palamike.com/   เผื่อใครสนใจ ไปศึกษากันก่อน

    

**ส่วนเทคนิคที่เว็บนี้มีไม่ครบนะและบางทีก็ลงลึกด้วย ใส่แค่เท่าที่ผมใช้งานเท่านั้น**

ตำแหน่งไฟล์ CSS ใน  Theme ธีม

  • ธีม 2017 TwentySeventeen หรือธีมที่ต้องการ

 yoursite.com/wp-content/themes/twentyseventeen/

  • style.css                    ตกแต่งหน้าเว็บให้คนดูเห็น

 /wp-content/themes/twentyseventeen/style.css

  • editor-style.css        ตกแต่งหน้าตา classic editor เช่น ช่องว่าง ช่องไฟ ใน TinyMCE editor  เพื่อปรับปรุงให้เวลาเราพิมพ์ จะได้คล้ายของจริงในเว็บผู้ชมที่ตกแต่งเสร็จแล้ว

/wp-content/themes/twentyseventeen/assets/css/editor-style.css

  • editor-blocks.css      ตกแต่งหน้าตาอิดิทเตอร์ ช่องว่าง ช่องไฟ ความกว้างคอนเท้นท์ ให้คล้ายกับของจริงในเว็บผู้ชม ทำให้เราไม่สับสน 

/wp-content/themes/twentyseventeen/assets/css/editor-blockss.css

  • blocks.css          ตกแต่งหน้าตา ของblock ทั้งในeditor และ ที่ให้แสดงให้คนดู เช่น รูปแบบ ช่องไฟ สี ขนาดตัวอักษรของ figcaption เป็นต้น

/wp-content/themes/twentyseventeen/assets/css/blocks.css

ใช้ Web Developer tool ช่วยตกแต่งเวิร์ดเพลส ด้วย CSS

  • ต้องพอเข้าใจ CSS+ภาษาHTMLและควรใช้เป็น คือ web developer tool ของ browser อะไรก็ได้  เช่น ตัวเล่นเว็บของ Chrome ,Firefox Opera Safari โดยชี้ไปทีอะไรก็ได้บนหน้าเว็บคลิ๊กขวาส่วนที่ต้องการ แล้วเลือก ตรวจสอบ(องค์ประกอบ) , Inspect Element

แนะนำช่องยูทูป Patiphan Phengpao  ไปติดตามหาความรู้กันต่อได้เลย ทั้งCSS ภาษาHTML JS และอื่นๆ ใครอยากพัฒนาเว็บไซต์ อยากเขียนโค๊ดเป็น แนะนำเลยช่องดีๆ 

  สิ่งที่เราสามารถทำได้ใน Chrome Developer Tools ที่คุณต้องรู้ by Patiphan Phengpao >>VDO link only , no permission here  

ศึกษาโครงสร้างของแต่ละธีมเวิร์ดเพลส ก่อนแก้ไข CSS

เวิร์ดเพลสเขียนด้วยภาษาPHP-ภาษาทางเซิฟเวอร์ จึงมีส่วนหลักๆ คอนเท้นท์คือ หัวข้อและเนื้อเรื่อง ที่่ทุกธีมจะต้องดึงออกมาใช้เหมือนกัน ต่างกันว่าอยู่ที่ส่วนใดของหน้าเท่านั้นเอง ส่วนอื่นเช่นส่วนหัว ส่วนหาง แต่ละธีมไม่มีอันไหนเหมือนกัน แต่มีรูปแบบที่คล้ายๆกัน การศึกษาโครงสร้าง ผมก็ใช้ web dev tool ค่อยๆแกะออกมา

ภาษา หน้าควบคุม dashboard เป็นภาษาอังกฤษ 

 ไปที่หน้าควบคุม    ผู้ใช้ > ข้อมูลส่วนตัว> ภาษา -English   

 ไปที่ dashboard    user > profile > language -ไทย/english   

ถ้าเป็น อังกฤษ เวลาติดปัญหาจะกูเกิ้ลง่าย

Plug-in ที่ข่วยตกแต่ง CSS , เพิ่มฟอนท์ 

  • Options for Twenty Seventeen  By Webd Ltd 

ปลั๊กอินตกแต่งสำหรับเฉพาะ ธีม Twenty Seventeen ช่วยประหยัดเวลา ตกแต่งโครงสร้างของธีมแบบเลื่อนๆคลิ๊กๆใส่ๆ ต้องลองหาดู แต่ละธีมจะมีปลั๊กอินช่วย และบางธีมก็มีให้มาแล้วไม่ต้องติดตั้งเพิ่ม ส่วนใหญ่เวลาใช้งานให้เข้าหน้า customizer ของแต่ละธีม ปลั๊กอินตัวช่วยนี้จะประสานเข้ากับ ตัวคัสตอมของธีม และสามารถใส่ โค๊ด css ลงไปเพิ่มเองด้วยก็ได้

เข้าDashbord เลือก Appearance > customize

    

  • Simple Google Font Adder  By Paul FERMEY for Rouen Webmaster

เพิ่มฟอนท์จากกูเกิ้ลฟอนท์ เพื่อใช้กับ Block editor ,  Advanced TinyMCE Editor หรือ classic editor ในwordpress

wordpress_simple_google_font_adder_plugin_correct_in_editor
ปลั๊กอิน ในการเพิ่มฟ้อนท์ ในเวิร์ดเพลส ทำงานได้ถูกต้องบน editor

Simple Google Font Adder  By Paul FERMEY for Rouen Webmaster

เพิ่มฟอนท์ของกูเกิ้ล เพื่อใช้กับ editor Gutenberg , Advanced TinyMCE Editor ในอีดิทเตอร์จะแสดงผลได้ถูกต้องมีฟ้อนท์ให้เลือกในTinyMceครบ แต่ในหน้าคนดูอาจไม่แสดงทั้งหมดต้องเพิ่มด้วยวิธีใส่ในstyle.css ใส่โค๊ดลงไปเองแน่นอนกว่า วิธีการเพิ่มฟ้อนท์ให้ดูข้างล่าง หรือถ้าลงปลั๊กอินแล้ว ในหน้าเซ็ทติ้งของเขาจะมีลิงค์ใบ้ให้ว่าต้องทำอย่างไรที่ไหน

    

**ต้องใส่โค๊ด เพิ่ม ฟอนท์ เอาเอง ใน CSS อีกหลายอย่างจึงแสดงผลหน้าคนดูได้ถูกต้อง ดูหัวข้อ font css ด้านล่าง 

         

** ต้องปิด bootstrap css ในปลั๊กอิน ที่เขาผนวกมาด้วยซึ่งไม่ได้ใช้แต่อาจทำให้อย่างอื่นรวน   วิธีการปิด ให้แก้ไขไฟล์ปลั๊กอิน โดยไปที่

Dashbord > Plugins >  Plugin Editor เลือกปลั๊กอินกด select แล้วเลือกไฟล์

simple-google-font-adder / add_gfont.php

  **–line29 ใส่ // ด้านหน้าบรรทัด ที่มีคำ 

//sgfa_prefix_enqueue();      /*ปิด css bootstrap*/

เพิ่มฟอนต์ Font จากกูเกิ้ลให้แสดงผลให้ถูกต้อง ในหน้าคนดู style.css

ฟอนต์จะแสดงผลถูกต้อง มี2ส่วน

1   การประกาศฟอนต์ใน style.css ถูกต้อง มีหลักการคือ 

1.1  ต้องอยู่บนสุดในไฟล์ style.css ก่อนที่ฟอนต์จะถูกอ้างอิงเรียกใช้งานcssในบรรทัดใดๆในstyle.css  ถ้าประกาศเช่นด้วย @font-face หรือ @import แต่ตามหลังการอ้างอิงเรียกใช้ในไฟล์cssนั้น มันจะไม่แสดงฟอนต์นั้นๆ 

1.2  เว็บเบ๊าเซอร์หรือตัวเล่นเน็ท อาจต้องการ ทั้งไฟล์ .woff2 หรือ.ttf หรือนามสกุลอื่นๆ ถ้ามีให้มันตามที่มันต้องการ ก็แสดงผลถูกต้อง บางทีไม่มี .ttf ไม่แสดงเอาดื้อๆก็มี

   

2   แก้ CSS ให้อีลีเมนท์ เช่น body เรียกใช้งานฟอนต์ อ้างอิงฟอนต์ หรือส่วนอื่นที่ต้องการแสดงได้ถูกต้อง  ส่วนใหญ่ผมใช้ dev tool ค้นดู อันไหนมาก่อนอยู่บนๆก็แก้อันนั้น ผมเดาๆเอานะไม่ได้ชำนาญ แต่คนที่ชำนาญจะรู้ว่าควรแก้ที่ไหนแล้วไม่เกิดปัญหาระยะยาว เป็นต้น 

p9020_wordpress_how_to_manual_add_google_font_in_style.css วิธีเพิ่มฟอนต์แบบแมนน่วล ใส่ลงไปในไฟล์ style.css ใน WordPress ให้แสดงผลในหน้าคนดูอย่างถูกต้อง
วิธีเพิ่มฟอนต์แบบแมนน่วล ใส่ลงไปในไฟล์ style.css ใน WordPress ให้แสดงผลในหน้าคนดูอย่างถูกต้อง

ปลายทางกระโดดที่กำลังเขียน

      เพิ่มกูเกิ้ลฟอนต์  style.css

  • ก๊อปปี้โค๊ดของฟ้อนท์สำหรับCSS  โดยไปที่ ไปกูเกิ้ลฟ้อนท์  เลือกฟ้อนท์ที่ต้องการ สมมติต้องการใช้ฟ้อนท์หลักให้แสดงผลในทุกหน้าเป็น Sarabun ส่วนที่เหลือเป็นฟ้อน Prompt , Itim , Mitr , Space Mono เป็นต้น ตย.Promt regular400 (น้ำหนักตัวอักษรปานกลางคือ400) เราก็คัดลอกโค๊ด .woff2 Gif_ตย.การคัดลอกโค๊ดฟอนท์  ได้โค๊ดมาดังข้างล่าง ก
  • เลือกใช้ กูเกิ้ลฟอนท์ที่เลือกใช้ link outside   (เนื่อ)

link outside   (ddd)

ฟ้อนในกูเกิ้ลฟอนท์ที่เลือกใช้ เมื่อเพิ่ม

ฟ้อนท์ใน ส่วนบล็อกอิดิทเตอร์ไปแล้ว ดนื่อ

เนื่อ

การเพิ่มฟ้อนท์ใน css , style.css จะทำได้ ด้วยการประกาศ @font-face หรือ @import

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

การใช้งาน @font-face  https://css-tricks.com/snippets/css/using-font-face/

@import และปัญหา  https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file

@import กับ @font-face ต่างกันอย่างไร  https://stackoverflow.com/questions/56141957/difference-between-font-face-and-import-url

ปัญหาการใช้ @import https://stackoverflow.com/questions/12316501/including-google-web-fonts-link-or-import/12380004#12380004

วิธี เอาฟ้อนท์ มาเก็บไว้ที่เซิฟเวอร์เรา  https://www.hostinger.com/tutorials/how-to-add-custom-fonts-to-wordpress

dd

หัวข้อ

link outside   (ddd)

เนื่อ

เนื่อ

classic

classic

classic

classic

classic

classic

classic

   

 1,413 total views,  7 views today

Leave a Reply

Your email address will not be published. Required fields are marked *

4 + 6 =