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

หลังจากเวิร์ดเพลสอัพเดทอะไรมากมาย และผมก็ไม่ได้เขียนอะไรมากว่า 5 ปี โดยเฉพาะ ระบบหน้าเว็บเพจเดี่ยว ที่อิงการใช้งานแบบ เรสปอนซีฟ (responsive) คือคนสามารถใช้มือถือ โน๊ตแพ็ด หรือเดสท็อป อ่านหน้าเว็บใดๆ เว็บนั้น ก็ต้องปรับรูปแบบที่เหมาะสมในการอ่านสำหรับอุปกรณ์นั้นๆ ซึ่งโดยส่วนตัวถือว่าดีมากๆ จึงต้องอัพเดท wordpress รุ่น 5ปีก่อน และอัพเดท theme จาก crafty-cart ซึ่งเหมาะสำหรับคอมตั้งโต๊ะ มาเป็น twentyfifteen (ทีมฟรี ที่มีเรสปอนซีผ ปี 2015)

ธีมเก่าที่ผมใช้ที่นี่คือ crafty-cart ซึ่งการแสดงผลเหมาะสำหรับคนใช้คอมตั้งโต๊ะ แต่ไม่รองรับคนใช้มือถืออ่าน

ซึ่งเมื่อ5ปีก่อนผมก็อยากจะเปลี่ยนเหมือนกัน แต่ยังงงๆมึนๆ กับระบบ css แบบresponsive แล้วก็ ไปทำอย่างอื่นๆอยู่5ปี แน่นอนครับ ยังเขียนให้ความรู้อยู่แต่ไปทำเขียนบนเว็บขายของส่วนตัว พออัพเดทเป็น wp 5.4.1 หน้าเขียนแบบเสมือนจริง กับหน้าเขียนแบบโค๊ดhtml ทำให้มึนตึบ เพราะธีมแต่เดิม ผมนิยมเขียนและตกแต่งด้วย หน้าโค๊ด html สอดไส้ style ลงในแท็กแต่ละแท็กได้ทันที คือมีลูกเล่นเก่าเยอะจัด และตรงไหนแก้บน css ของwp ได้เพื่อให้เขียน style สั้นลง ผมก็จะทำทันทีเช่นกัน จึงจำเป็นที่ต้องบันทึกเอาไว้สำหรับwp และธีม twentyfifteen เนื่องจากพอเปลี่ยนธีม ก็มึนเป็นอย่างมากตามคาด จึงค่อยๆแก้ไปบันทึกไป ทั้งในส่วนของการแสดงผลในธีม และงานเขียนเดิมที่ใส่ inline css ที่ทำให้การแสดงผลแปลกๆเมื่อเปลี่ยนธีม ส่วนใครไม่ทันใจ แนะนำไปอ่านที่ร้านก่อนนะครับ ไม่ต้องซื้ออะไรนะครับ http://www.pui108diystore.com/article/1/ (ปรับแต่งcsshtml-ให้รองรับ-responsive-บนเว็บทั่วไปและlnwshop-แก้ไข2017-2018) เดี๋ยวเขียนเสร็จผมจะลบลิ้งค์นี้ออกครับ

ส่วนเนื้อหา ผมจะค่อยเพิ่มเข้าไปและยาวมากๆ เพื่อทำบันทึกเอาไว้ช่วยใช้งานได้สะดวกในภายหลัง

wordpress 5.4.1 บันทึก วันที่ 10/6/2020

กำลังเขียน และแก้ไขธีมไปพร้อมๆกัน


ทดสอบ หน้าเขียน และหน้า code editor

หน้าเขียนเสมือนจริง virtual writing page ที่ดูเรียบๆ ใน wp 5.4.1 ที่ทำให้เขียนง่ายขึ้นมาก แต่ห้ามแตะ html tag ต่างๆโดยที่เราไม่รู้ว่าจะทำอะไร ทำให้เกิดการแสดงผลผิดพลาด จนถึงข้อความเก่าๆที่เขียนไว้หลายปีก่อนมา แก้ไขอาจทำให้บทความชำรุด ไม่แสดงผลตามที่ตั้งใจไว้แต่เดิม
หน้า html หรือ code edtor page ก็สามารถยังแก้ไขได้ในภาษาhtml แต่ถ้าไม่เข้าใจกฎการแก้ไข และระบบตรวจจับคอนเทนเนอร์ ซึ่งในwp5.4.1 ได้เพิ่มคอมเม้น tag wp เพื่อรองรับการแยกแยะชนิดแต่ละคอนเทนเนอเพื่อให้ผู้เขียนทำงานได้ง่ายขึ้นในหน้าเขียนเสมือนจริง การแก้ใขใดๆ ที่ถูก tag wp คร่อม ไม่สามารถสร้างหรือเพิ่มเติม attribute หรือคุณสมบัติเฉพาะของ tag P เช่น ID , style , class ที่ไม่เข้าพวกได้ จะเกิดเออเร่อฟ้องให้แก้ไขทันที การแก้ไขมั่วๆและการกดปุ่มบันทึกผิดที่ก็เช่นกัน (การแก้ไขใดๆในหน้า html ต้องสลับกลับเป็นหน้าเสมือนจริงก่อนเพื่อให้ระบบหลังบ้านของมันตรวจสอบความถูกต้อง จึงสามารถทำการบันทึกบทความได้)

ทดสอบบรรทัดที่ 1

<!-- wp:paragraph -->
<p>ทดสอบรรทัดที่    1</p>
<!-- /wp:paragraph -->

การพิมพ์ ในหน้าเสมือนจริง พบว่าหน้าhtml จะสร้าง tag เสมือน คร่อมบนล่าง และมี <p> คร่อมตัวอักษร ส่วน3บรรทัดข้างบนที่มีสีประกอบ เขียนด้วยหน้าเขียนแบบดั้งเดิมทีจะใส่สีปรับขนาดหรือใส่อะไรลงไปก็ได้ แต่ทั้งหมดอยู่ใน tagP และ tagCODE

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

การเรียกปุ่มtool หน้าดั้งเดิม ต้องทำอย่างไร

ให้เรียกหน้าที่เขียนแปลงเป็นหน้า html (ตัวแก้ไขโค๊ด) (ALT+CTRL+Shift+M) ก่อนแล้วพิมพ์ ไปที่บรรทัดที่ต้องการเรียกทูล พิมพ์ด้วยคำอะไรก็ได้ และคร่อมด้วย tag P นั้นดังนี้

ก ก

ขั้นตอนเรียกปุ่มจัดระเบียบเขียน ดั้งเดิม ออกมา (การเขียนแบบหน้าเสมือนจริงในสมัยก่อนเมื่อ8ปีที่แล้ว) หลังจากพิมพ์ tag P แล้ว ต้องกดปิดออกจากโค๊ดด้วยปุ่มตามรูปเท่านั้น กดที่อื่นหรือเรียกคีย์ลัดไม่เป็นผล wp 5.4.1 จะไม่เซฟที่เราพิมพ์ (หรือพิมพ์อะไรก็ได้ในหน้าเสมือนจริง แล้วเข้าไปลบ tag wpคร่อม ในหน้า html ก็คล้ายๆกัน )

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

1. จำไว้นะครับ พิมพ์ ในหน้า html code ใดๆใน wp5.4.1 ต้องปิดด้วยปุ่ม3 เพื่อเซฟและออกจากการแก้ไขโค๊ดhtml เท่านั้น จึงเป็นการเซฟข้อมูลhtmlได้ ห้ามใช้คีย์ลัดหรือปุ่ม1 หรือที่อื่นๆมันไม่เซฟครับ


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

เมื่อเราเพิ่มอักษร ภาพ หรืออื่นๆ ในระบบการเขียนแบบอัตโนมัติ ในหน้าเขียนแบบเสมือนจริง จะสร้างบล็อก block หรือ คอนเทนเนอร์ ที่มีรูปแบบเฉพาะขึ้นมาโดย wp จะสร้างแท็กเสมือนคร่อม ก่อนทำการเซฟข้อมูลลงดาต้าเบส เพื่อเป็นนิยามบรรทัดเหล่านั้นใน html ให้อยู่ในรูปบล็อก หรือคอนเทนเนอร์ ที่ wp รู้จัก และอิงชื่อ class และแสดงผล ที่อยู่ใน theme เหล่านั้นได้อย่างถูกต้อง

ในด้าต้าเบส ใช้ phpmyadmin เปิดดู พบว่ามีการบันทึก wp tag ลงในฐานข้อมูลจริง น่าจะอัพเดทตั้งแต่wp เวอร์ชั่นก่อนๆแล้วแต่ไม่รู้ว่าเมื่อไหร่ แต่ wp 5.4.1 มีแน่นอน

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

การใช้สี ในบล็อกย่อหน้า ควรใช้สีปรับแต่งเอง เพราะจะแสดงผลได้ทุกธีมและถูกต้อง ที่สำคัญคือมันแสดงสีในหน้าพิมพ์เสมือนจริงด้วย แต่ถ้าใช้สีขมพูออกแดงในแถวที่สองสีแรก จะถูกเขียนคร่อมตัวอักษรด้วย tag span ดังนี้ <span class=”has-inline-color has-medium-pink-color”> บลาๆๆ </span> แต่ในหน้าพิมพ์เสมือนจริงสีนิ่งสนิท ไม่แสดงผลใดๆ
สีในข้อความ เราควรใช้สีที่เซตติ้งเองเท่านั้น ถ้าใช้สีที่ wp ตั้งชื่อให้ จะไม่แสดงผลในหน้าeditor หรือถ้าเราเปลี่ยนธีมที่ไม่รองรับชื่อสี มันจะไม่แสดงผล

tag comment wp มีไว้ทำไม

มีกี่ชนิด ของ tag wp หรือ แท็กคร่อม <!–wp ………..–> <!–/wp……–> คือtag คอมเม้น ที่ ตัวโปรแกรมประมวลผลในเซิฟเวอร์เช่น php จะอ่านข้ามมันไป  โดยทำความเข้าใจว่าเป็นแค่คอมเม้นของคนเขียนโปรแกรม ฉะนั้นwordpress จึงนำมันมาใช้ประโยชน์ให้แก่ผู้เขียนโดยตรง

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

 28,681 total views,  29 views today

Comments

comments

เผยแพร่โดย

pui

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

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

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *