ปรับแต่ง css html เปลี่ยนธีม responsive ทดสอบหน้าเขียน หน้าโค๊ด บน wordpress 2020 (กำลังเขียน)

ตัวแบ่งหน้า in wp tag

ทำการแบ่งหน้าของบทความนั้น ให้เป็นหลายๆหน้า ผู้เยี่ยมชมจะเห็นมีหลายหน้าในเรื่องเดียวกัน

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

ย่อหน้า in wp tag

สร้างบล็อก พารากราฟ

<!-- wp:paragraph -->
<p><strong>ย่อหน้า</strong></p>
<!-- /wp:paragraph -->

ในเครื่องมือเขียน ย่อหน้า บล็อก พารากราฟ นั้น นอกจากใส่สีหรือลูกเล่นรูปแบบตัวอักษร แต่ไม่สามารถใส่ตัวอักษรให้ใหญ่กว่าปรกติได้เลย เช่น

พารากราฟ <อย่างนี้ต้องทำในทูลดั้งเดิม

เราสามารถใส่รูปภาพในพารากราฟได้ มีปุ่มเพิ่มรูปเล็กๆเมื่อเราพิมพ์ เหมือนด้านบนนะครับ

<p><img class="wp-image-2886" style="width: 80px;"
src="http://www.pui108diy.com/wp/wp-content/uploads/2020/06
/paragarph_icon.jpg" alt=""><strong>ย่อหน้า</strong> in wp tag</p>

รูปภาพ in wp tag

รูปภาพ ใส่รูปภาพเข้าไปในบทความ

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="http://www.pui108diy.com/wp/wp-content/uploads/2015/03/pui_logo_babyhand3.png" alt=""/>
<figcaption>รูปภาพที่ลองใส่</figcaption>
</figure>
<!-- /wp:image -->

เข้าใจว่า tag figure หรือ figure element ออกมาในสมัย html5 มีลักษณะของการผูกชุดภาพกับคำอธิบายไว้ด้วยกัน ถ้าเอามันออก ก็ต้องใส่ ภาพกับอธิบายด้วยtagP แทน ซึ่งต้องกำหนดชุดพารากราฟให้มีลักษณะขอบชิดกับภาพโดยเฉพาะต่างหาก ส่วน figcaption มันมีลักษณะตัวอักษรใดๆ ความห่าง ขนาด สี หรืออื่นๆไม่โดนใจ ก็คงต้องไปแก้ใน cssเช่นกันจะง่ายกว่า แต่ถ้าใส่เป็นtagP ก็ต้องกำหนดคลาสเพิ่ม หรือใส่cssอินไลน์เข้าไป โดยสรุป เขามีฟังก์ชั่นให้ใช้สะดวกแนะนำให้ใช้ครับ

เนื้อหา html in wp tag

เมื่อกดปุ่ม จะมีช่องว่างเปล่าๆให้พิมพ์ เป็นภาษา html ซึ่ง มีข้อบังคับบางอย่างที่ทำไม่ได้เช่นกัน

เนื้อหา html in wp tag จะทำการสร้าง <– wp:html –> คร่อมเนื้อหาใน code editor โดย ทดลองคัดลอกข้างบน เฉพาะ <img/> และใส่ <br/>เพื่อเว้นบรรทัด รวม2ครั้ง และใส่<img/>3ครั้งโดยแต่ละครั้งเคาะenter เพื่อให้ขึ้นบรรทัดใหม่ (เมื่อโหลดข้อมูลใหม่ทุกครั้งจะทำการขึ้นบรรทัดใหม่ให้ทุกครั้ง-ในหน้าพิมพ์เสมือนจริง ซึ่งถ้าพิมพ์ในหน้าcode ทุกครั้งที่โหลดเข้าหน้าโค๊ดจะลบการขึ้นบรรทัดใหม่) ใส่ลงในช่อง เนื้อหา html

---

---

---

---

ภาพ ด้านบน 5ภาพติดกัน เขียนลงบนหน้า html หรือ code editor ถ้าสังเกตภาพดีๆใน desktop จะพบว่ามันเรียงตัวเป็นรูปตัวL เหมือนกัน แต่ช่องไฟต่างกัน น่าจะมีการเซทติ้ง css ที่ต่างกัน

ตัวแบ่ง in wp tag

---

---

สร้างเส้นแบ่ง tag hr  แบบดั้งเดิม เส้นยาว , และแบบ มี tag wp เส้นสั้นตามclass

<hr />
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

ดั้งเดิม บล็อกทูลสำหรับเขียนแบบดั้งเดิม คือสามารถเรียกtool ดั้งเดิมออกมาใช้ได้ทันที เป็นช่องว่างดังรูปข้างล่าง ฉะนั้น ไม่ต้องใช้วิธีแปลกๆอ้อมๆแบบด้านบน ในหน้าทูลแบบดั้งเดิมนี้ เป็นหน้าพิมพ์เสมือนจริง สามารถตัดแปะข้อมูลจากเว็บต่างๆ โดยที่มีสภาพสี ขนาดและรูปแบบมาด้วย ซึ่งส่วนใหญ่ไม่เป็นที่ต้องการสำหรับนักเขียน มันทำงานยาก มีปุ่มต่างๆมากมายให้ใช้ และปุ่ม <> สามารถกดสลับไปดูหรือพิมพ์โค๊ด html เฉพาะที่พิมพ์ด้วยทูลดั้งเดิมได้ทันที แน่นอนเหมาะสำหรับผู้เขียนที่มีความชำนาญในการตกแต่งต่างๆ และแก้ไข css style แบบ html ได้ทันที การทำงานจะไม่มี wp tag คร่อม จึงไม่มีการตรวจสอบหลักๆจากwp จึงไม่ฟ้องเออเร่อใดๆ อาจมีแอบปรับรูปแบบให้อัตโนมัติบางอย่างที่อนุญาตให้ทำ แต่จะมีการตรวจสอบย่อยๆ เช่นอยู่ๆเราเอาtag ที่มีลักษณะเป็น html code แปะลงไป มันจะตรวจสอบว่าหน้านี้เป็นหน้าเสมือนจริงจึงใส่เป็นcode ให้เราแทน ซึ่งดีมาก คือเบื้องหลังใน html page มันจะใส่ tag <code></code> คร่อมข้อความที่มีลักษณะhtmlให้ทันที สะดวกมากๆ แต่ก็บ่อยครั้งที่ทูลดั้งเดิมมันก็ไม่ออกมาอย่างที่ใจคิด ต้องไปสำรวจ html code ก่อนว่าผิดพลาดตรงไหน

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

ผมจะใช้ เทคนิคการขั้นระหว่าง2บล็อกทูลดั้งเดิมให้แยกออกจากกันทุกครั้งเสมอ โดยให้ขั้นด้วย html บล็อก ด้วยการพิมพ์ช่องว่าง1ช่องลงไปทำให้เกิด wp html tag คร่อมช่องว่างนั้น แล้วจึงเปิดใช้ทูลบล็อกดั้งเดิมอีกครั้งเมื่อเขียนเสร็จ ต้องการจะเพิ่มดั้งเดิมก็ให้ใช้html block พิมพ์1 space bar ขั้นด้วยทุกครั้ง (เป็นเพราะช่องว่าง1ช่องในภาษาhtml จะไม่แสดงผลอะไรเลยถ้าไม่มีtag หรือตัวหนังสืออื่นประกอบ)

---

หัวข้อ (บล็อก)

สร้างหัวข้อ <h2>  ให้ทันที โดยมี wp tag คร่อม รูปแบบตามธีมต่างๆ ที่กำหนดไว้ในcss มีปุ่มปรับเปลี่ยนขนาดหัวข้อ เป็น h3 h4 h5 ให้หัวข้อเล็กลงอีกด้วย

<!-- wp:heading -->
<h2>หัวข้อ (บล็อก)</h2>
<!-- /wp:heading -->

---

คำกล่าวอ้าง blockqoute

blockqoute ใน wp tag สามารถใส่ตัวหนังสือเป็น tag p ได้ ใส่ภาพเล็กๆได้ในบรรทัด แต่ไม่สามารถใส่อย่างอื่นได้(โดยไปแอบทำในhtml) เช่น ใส่วีดีโอ ใส่ภาพใหญ่ๆ อยู่ข้างใต้ tag P แต่ยังอยู่ใน blockqouteไม่ได้ พอกลับเข้ามาหน้าเสมือนจริง มันจะฟ้องเออเร่อทันที

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>คำกล่าวอ้าง blockqoute</p></blockquote>
<!-- /wp:quote -->

ต่อไปนี้เป็นการทดสอบ blockqoute ที่สร้างขึ้นเองและไม่ได้อยู่ภายใน <!–wp :qoute> คือจะใส่อะไรก็ได้ไม่ฟ้องเออเร่อในหน้าเสมือนจริง

คำกล่าวอ้าง blockqoute ระบุclass

คำกล่าวอ้าง blockqoute ระบุclass

คำกล่าวอ้าง blockqoute ไม่ระบุคลาส

คำกล่าวอ้าง blockqoute ไม่ระบุคลาส

คำกล่าวอ้าง blockqoute ไม่ระบุคลาสแต่ ระบุ style เอง

style=" padding: 0% 2% 1% 4%; border-radius: 10px; background-image: none; border-left: 2px solid #707070; background-color: #f2f3cb;"

---

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

ในการเขียนเรื่องต่อๆไปผมจึงปรับมาใช้ tag div แทน blockqoute และทำการกำหนด style ทุกครั้งที่พิมพ์ในtag div หรือกำหนด class เฉพาะให้ div ดังกล่าวมาต่อกันยาวลงไปเรื่อยๆทีละบล็อก โดยขั้นด้วยช่องว่างที่ถูกคร่อมด้วยhtml wp tag โดยแต่ละdivมีการกำหนดสีให้ตามต้องการ เมื่อมันมีการต่อกันของสีdiv คนอ่านก็จะรู้สึกว่าเป็นเนื้อเรื่องสีในหัวข้อเดียวกัน ส่วนคนเขียนจะทำงานได้ง่ายมากในการแก้ไขย่อยๆทีละบล็อก

มาลองทำกันดูเลย ผมจะเขียน 3 block,( head , p , img ) ให้อยู่ในสีใน div เดียวกันและต่อกันเหมือนเป็นเรื่องเดียวกันดังนี้ เมื่อเขียนด้วยบล็อกมาตรฐาน3อันของwpครบแล้ว ให้ทำการคัดลอกข้อมูล html block โดยการแปลงเป็นข้อมูล html ดังนี้

---

---

เขียน header, P, img ให้อยู่ในdiv สีเดียวกัน

เริ่มต้นให้เขียน header , พารากราฟ และอิมเมจ ด้วยบล็อกที่ wp จัดให้

---

---

สรุป ข้อความด้านบนสีเหลือง ที่อยู่ใน div สีเดียวกัน เขียนด้วยทูลบล็อกดังเดิม 3 อันแยกออกจากกัน โดยขั้นกลางด้วย htmlบล็อก ทำให้ผู้เขียนสามารถทำงานเป็นและเซฟข้อมูลเป็นบล็อกๆด้วยทูลดั้งเดิมที่คนรุ่นเก่าๆอาจจะถนัด ซึ่งจะสร้างลูกเล่นได้อีกมากมายเช่นใส่รูป4รูปเรียงกันจากซ้ายไปขวาเท่ากับ1บล็อก

โดยส่วนตัวแล้วเทคนิคเหล่านี้ไม่แนะนำสำหรับผู้เขียนใหม่ ผู้เขียนใหม่ควรทดลองใช้บล็อกพื้นฐานง่ายๆที่ไม่เกี่ยวข้องกับภาษาhtml,cssที่ wp จัดให้แบบง่ายๆไปก่อนก็เพียงพอใช้งานแล้ว สิ่งเหล่านี้เป็นแค่ลูกเล่น ของจริงคือคอนเทนต้องน่าสนใจเท่านั้นเองครับ

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

 28,682 total views,  30 views today

Comments

comments