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

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

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

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

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


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

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

ทดสอบบรรทัดที่ 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 นั้นดังนี้

ก ก

ขั้นตอนเรียกปุ่มจัดระเบียบเขียน ดั้งเดิม ออกมา หลังจากพิมพ์ 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 wp มีไว้ทำไม

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

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

 232 total views,  4 views today

สอนคอมผู้สูงอายุ -พื้นฐานภาพรวมก่อนจะเล่นอินเตอร์เน็ท วิธีการใช้งานเว็บไซต์ และโปรแกรมอื่นๆ

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

เมื่อจะสอน ก่อนอื่นก็ต้องเปลี่ยนคอมป๊าใหม่ให้เร็วๆ ใช้ฮาร์ดดิส SSD ด้วยเลยเร็วโคตรๆ ซื้อไมค์มาจะอัดเสียงราคา180บาทก็รู้สึกว่าไมค์ก็ไม่ค่อยดีเท่าไหร่ จึงตัดสินใจซื้อ creative sound blaster Omni 5.1 (เกือบสามพัน)ซึ่งเป็นซาวด์การ์ดมีไมค์ชนิดอาเรย์คู่ และโปรแกรมที่แถมมาด้วยทำให้ไมค์อัดเสียงสามารถคุยกันได้สบายและยังตัดเสียงรบกวนได้ดี จากนั้นก็หาโปรแกรม Snagit มาใช้ซึ่งสามารถอัดวีดีโอได้ดี

ผมพยายามจะอัพเดทไปเรื่อยๆเนื่องจากอาจมีโปรแกรมที่จะสอนเยอะค่อยๆอัพไปในหน้านี้แหละครับ

1 พื้นฐานภาพรวมก่อนจะเล่นอินเตอร์เน็ท -สอนคอมผู้สูงอายุ

เนื้อหาจะกล่าวถึงก่อนที่จะเป็นคอม เช่นโทรเลข เทเล็กซ์ คอม การเชื่อมต่อระหว่างคอม ชื่อโปรแกรมที่ใช้บนคอม ชื่อโปรแกรมเล่นเน็ท address bar หรือ url bar และการบุ๊คมาร์ก(เซฟเว็บไซต์) ซึ่งเป็นการสอนสไตล์พ่อกับลูกคุยกัน และเป็นพื้นฐานทำความเข้าใจภาพรวมก่อนจะเล่นอินเตอร์เน็ท สำหรับผู้ที่เล่นอินเตอร์เน็ทเป็นครั้งแรก

 

2 วิธีการใช้งานเว็บไซต์ -สอนคอมผู้สูงอายุและผู้ที่สนใจ
สอนคอมผู้สูงอายุและผู้ที่สนใจ สไตล์พ่อกับลูก อาจมีคำหยาบเล็กน้อยเนื้อหาพื้นฐานสำหรับคนที่เพิ่งเริ่มใช้งานเว็บไซต์ ตลอดจนข้อควรระวังต่างๆเกี่ยวกับการหลอกลวงเอาข้อมูลด้วยเว็บไซด์หรือการฟิชชิ่งเป็นต้น
เนื้อหาจะกล่าวถึง ใช้งานเว็บไซต์อย่างไร เว็บไซต์คืออะไร คำจำกัดความ ชนิดของเว็บไซต์ นามสกุล เช่น .com .ac หน้าที่ของเว็บไซต์ ข้อมูลที่เว็บไซต์ให้บริการ การหลอกลวงเอาข้อมูลผ่านทางเว็บไซต์ปลอม (ฟิชชิ่ง Phishing) การล็อกอินเข้าใช้เว็บไซต์อื่นๆด้วยuserเฟสบุ๊ค gmail ตัวอย่างของเว็บไซต์ประเภทต่างๆ และเว็บไซต์ที่ทำความเข้าใจยากดูแย่หาข้อมูลยาก

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

 

 

 4,815 total views,  2 views today