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

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

ซึ่งเมื่อ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

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

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


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

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

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

ก ก

การพิมพ์ ข้อความแบบนี้ เป็นการพิมพ์ในหน้า 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 เหล่านั้นได้อย่างถูกต้อง

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

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