สร้าง เกี่ยวกับฉัน Widget แถบด้านข้างด้วยตัวแก้ไขโพสต์ [WordPress tutorial]

บล็อกขนาดใหญ่ใช้ประโยชน์จากหน้า "เกี่ยวกับฉัน" ได้อย่างดีเยี่ยม เพื่อให้ผู้ใช้ได้รับ 99% ของเวลาที่พวกเขาใส่ "ย่อส่วนที่น่าสนใจ" ไว้ในแถบด้านข้างของบล็อก ในโพสต์นี้ฉันจะแสดงวิธีสร้างส่วนนั้น ง่ายเหมือนการเขียนโพสต์ใหม่ อันที่จริงแล้วเราจะใช้เครื่องมือแก้ไขบทความใหม่ใน WordPress เพื่อสร้างสิ่งนี้.

เครื่องมือแก้ไขโพสต์เป็นหนึ่งในเครื่องมืออเนกประสงค์ที่สุดใน WordPress และแทบจะไม่มีใครรู้ สิ่งที่ฉันกำลังจะแสดงให้คุณเห็นคือการแฮ็คการออกแบบเล็ก ๆ น้อย ๆ ที่ชาญฉลาดเคล็ดลับที่ถูกมองข้ามว่ามันไม่ได้ครอบคลุมอยู่ในรายชื่อ 40 อันดับของ WordPress ของ Hongkiat.com.

เคล็ดลับนี้ยังยอดเยี่ยมสำหรับการเรียนรู้ HTML และ CSS พื้นฐานหากคุณเพิ่งเริ่มต้นใช้งาน.

สร้างข้อความของคุณ

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

ทีนี้เราจะนำเรื่องทั้งหมดนี้ไปที่ WordPress โพสต์ใหม่แก้ไข. เปิดขึ้นแล้วอัปโหลดภาพของคุณ เราจะทำสิ่งนี้ให้มากจาก แท็บ HTML. เมื่อคุณอัพโหลดรูปภาพ WordPress จะสร้างโค้ด HTML ให้โดยอัตโนมัติ ไปที่แท็บ HTML และสร้างช่องว่าง (กด Enter) เหนือภาพของคุณ จากนั้นเขียนข้อความเล็ก ๆ ที่นี่เช่น "ใครอยู่เบื้องหลังไซต์นี้" หรือแม้แต่แค่ "เกี่ยวกับฉัน" มีความคิดสร้างสรรค์.

เพิ่มคำอธิบายประโยคสั้น ๆ 3-4 ประโยคเพื่อให้ผู้อ่านได้วางแผน ในตอนท้ายของบล็อกข้อความนี้เขียนประโยคเช่น "ค้นหาเพิ่มเติมที่นี่" และเชื่อมโยงไปยังหน้าเกี่ยวกับที่แท้จริงของคุณ.

สไตล์ข้อความของคุณ

ตอนนี้ไปที่ แท็บภาพ. จัดกึ่งกลางข้อความของคุณ เมื่อคุณกลับไปที่ HTML คุณจะสังเกตเห็นว่า WordPress เขียนโค้ดให้คุณในรูปแบบ "p style" นี่คือความงามของการสร้างวิดเจ็ตในเครื่องมือแก้ไขบทความใหม่ รหัส WordPress autowrite สำหรับคุณ! จากนั้นคุณเพียงเพิ่ม CSS พื้นฐาน!

สร้างสิ่งนี้:

 ข้อความของคุณ 

ตรวจสอบให้แน่ใจว่าได้ปิดสไตล์ p ด้วย

และเพิ่ม CSS อื่น ๆ ที่คุณสามารถนึกถึงหรือต้องการ ไม่รู้จัก CSS ใช่ไหม เพียงแค่ค้นหาโดย Google "รหัส CSS สำหรับ ____" และในช่องว่างให้ใส่สิ่งที่คุณพยายามทำ จากนั้นคัดลอกและวางสไตล์ p วางไว้รอบข้อความบล็อกข้อความของคุณด้านล่างภาพ จัดแต่งทรงผมตามที่คุณต้องการและปิดมัน หากคุณลืมปิดสไตล์ p มันไม่ใช่เรื่องใหญ่ รูปแบบจะนำไปใช้กับข้อความเพิ่มเติมที่คุณต้องการ แต่ทุกคนทำผิดพลาดอย่างน้อยหนึ่งครั้ง.

ใช้รหัส เพื่อทำให้เป็นตัวเอียงและ เพื่อทำให้ข้อความของคุณเป็นตัวหนาและอย่าลืมปิดสิ่งเหล่านั้นด้วย.