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

บล็อกเขียน ที่ใช้บ่อย ในหน้าพิมพ์เสมือนจริง

บล็อกอำนวยการเขียนที่ wp จัดเตรียมให้ใช้ ในหน้า virtual editor ที่ใช้บ่อยๆ

ตัวแบ่งหน้า 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




สิ่งที่ใส่ใน html block ในหน้าเสมือนจริง virtural editor

in pink area show code from hrml block in code editor , ส่วนเน้นสีชมพูเป็นข้อความของบล็อกhtml ที่แสดงใน code editor , ส่วนสีม่วง ทดลองเขียนสดๆ ต้องมี tag div ถึงจะเขียน tag img ได้ตรงตามที่ต้องกาน แต่ถ้าไม่ใส่tag div มันจะใส่ คอนเทนเนอร์ tag P แกมบังคับเมื่อเซฟหน้า code editor แทน การแสดงผลสีม่วงเป็นดังข้างล่าง




ภาพ ด้านบน 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 block พิมพ์ 1 ช่องวาง

ผมจะใช้ เทคนิคการขั้นระหว่าง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 จัดให้

ไฟดูด
ภาพ CC by pui108diy


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

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

ให้เพิ่มบล็อกทูลดั้งเดิม แล้วสร้างtag div ที่กำหนดสไตล์เอาเอง และใส่ข้อมูลของแต่ละบล็อกที่ทำไปแล้วโดยแปลงเป็น html ก่อน (เช่นชี้ไปที่บล็อกheader เลือกจุดสามจุดแนวดิ่งที่อยู่บนสุด เลือก แก้ไขแบบhtml คัดลอกข้อมูลมา) จากนั้นก็อปปี้ลงใน ระหว่างtag div

<div style="margin: 0px 0px; padding: 1px 12px 1px 25px; border-left: 2px solid #707070;border-radius: 10px 10px 0 0; background-color: #f2f3cb;">
<h2>เขียน header, P, img ให้อยู่ในdiv สีเดียวกัน</h2>
</div>

เมื่อข้อความหรือรูปเป็นที่พอใจ ก็ขึ้นบล็อก html 1spacebar อีกครั้ง เพื่อเป็นการขั้นระหว่าง บล็อกทูลดั้งเดิมอันถัดๆมา

ไฟดูด
ภาพ CC by pui108diy

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

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

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

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

 952 total views,  7 views today

Comments

comments

เผยแพร่โดย

pui

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

ใส่ความเห็น

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