คุณเคยเจอเว็บไซต์ที่ตีพิมพ์บทความในบล็อกหรือไม่
บางเว็บไซต์มีบทความแนะนำที่เน้นด้วยพื้นหลังที่กำหนดเองในขณะที่เว็บไซต์อื่น ๆ อาจมีการโพสต์แต่ละหมวดหมู่ด้วยรูปลักษณ์ที่ไม่เหมือนใคร หากคุณต้องการเรียนรู้วิธีปรับแต่งโพสต์ WordPress ทุกครั้งคุณมาถูกที่แล้ว
ในบทช่วยสอนนี้เราจะแสดงให้คุณเห็นว่าจะทำให้แต่ละบทความ WordPress แตกต่างกันอย่างไร
แต่ถ้าคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ
จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่
Remarque: บทช่วยสอนนี้ต้องการให้คุณเพิ่ม CSS ที่กำหนดเองบน WordPress คุณจะต้องใช้เครื่องมือตรวจสอบ จำเป็นต้องมีความรู้ CSS และ HTML บางอย่าง
ให้แต่ละสไตล์ในรายการ WordPress
WordPress เพิ่มคลาส CSS เริ่มต้นในองค์ประกอบต่าง ๆ ของเว็บไซต์ของคุณ ชุดรูปแบบ WordPress ที่เข้ากันได้มาตรฐานต้องมีรหัสที่ WordPress ต้องการเพื่อเพิ่มคลาส CSS สำหรับเนื้อหาบทความหน้าวิดเจ็ตเมนูและอื่น ๆ
ค้นพบคำแนะนำของเราบน Permalinks: วิธีการปรับแต่งการเชื่อมโยงบล็อกของคุณ
หน้าที่หลักของ WordPress เรียกว่า " post_class () ธีมใช้เพื่อบอก WordPress ว่าจะเพิ่มคลาส CSS เริ่มต้นเหล่านี้ในบทความได้อย่างไร
หากคุณเยี่ยมชมเว็บไซต์ของคุณและใช้เครื่องมือตรวจสอบบนเบราว์เซอร์ของคุณคุณจะสามารถเห็นคลาสเหล่านี้ที่เพิ่มเข้ามาสำหรับแต่ละโพสต์
นี่คือ CSS คลาสที่ถูกเพิ่มโดยค่าเริ่มต้นโดยยึดตามหน้าที่แสดงโดยผู้ใช้
- .post-ID
- .poster
- .attachement
- .gluant
- .hentry
- ID .category
- .category ชื่อ
- .tag ชื่อ
- .format- {ขนาด name}
- {.type- โพสต์ประเภท-name}
- .has โพสต์ภาพขนาดย่อ
- .post รหัสผ่านที่จำเป็น
- .protected โดย-a-รหัสผ่าน
ตัวอย่างของการแสดงผลจะมีลักษณะเช่นนี้:
คุณสามารถปรับแต่งแต่ละสิ่งพิมพ์ WordPress ที่แตกต่างกันโดยใช้คลาส CSS ที่เกี่ยวข้อง
อ่าน: วิธีการปรับปรุงของคุณ WordPress บล็อกสุดสัปดาห์นี้
ตัวอย่างเช่นหากคุณต้องการแก้ไขสิ่งพิมพ์แต่ละรายการคุณสามารถใช้คลาส post-id ใน CSS ที่กำหนดเองของคุณ
.post-412 {สีพื้นหลัง: #FF0303; สี: #FFFFFF; }
อย่าลืมเปลี่ยนรหัสโพสต์ให้ตรงกับรหัสโพสต์ของคุณ
ลองมาดูตัวอย่างอื่น
เวลานี้เราจะกล่าวถึงบทความทั้งหมดที่โพสต์ในหมวดหมู่เฉพาะที่เรียกว่า "ข่าว"
ค้นหาคำแนะนำของเรา วิธีเพิ่ม CSS ที่กำหนดเองในบล็อก WordPress ของคุณ
เราสามารถทำได้โดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้ให้กับธีมของเรา
.category ข่าว {font-size: 18px; ตัวอักษรสไตล์: italic; }
CSS นี้จะมีผลกับรายการทั้งหมดในหมวดหมู่ " ความทันสมัย '
ฟังก์ชั่น post_class ()
ผู้พัฒนาธีมใช้ฟังก์ชั่นนี้ post_class () เพื่อบอก WordPress ว่าจะเพิ่มโพสต์คลาสได้ที่ไหน โดยปกติจะอยู่ในแท็ก "บทความ"
ฟังก์ชั่น post_class () ไม่เพียง แต่โหลดคลาส CSS ที่สร้างโดย WordPress ตามค่าเริ่มต้น แต่ยังช่วยให้คุณสามารถเพิ่มคลาสของคุณเองได้
ค้นพบยัง วิธีการป้องกันขูดเนื้อหาบล็อกของคุณ
ขึ้นอยู่กับธีม WordPress ของคุณคุณจะพบฟังก์ชัน post_class () ในไฟล์ single.php ของคุณหรือในไฟล์เทมเพลต โดยปกติโค้ดจะมีลักษณะดังนี้:
" >
คุณสามารถเพิ่มคลาส CSS ของคุณเองด้วยคุณสมบัติเช่นนี้:
" >
คลาส post_class จะพิมพ์คลาส CSS เริ่มต้นตามลำดับด้วยคลาส CSS ที่กำหนดเองของคุณ
หากคุณต้องการเพิ่มคลาส CSS หลายคลาสคุณสามารถกำหนดให้เป็นอาร์เรย์และใช้ในฟังก์ชั่น post-class ()
" >
แสดงบทความที่มีสไตล์แตกต่างกันไปตามผู้แต่ง
คลาส CSS เริ่มต้นที่สร้างโดยฟังก์ชัน posts_class จะไม่รวมชื่อผู้แต่งเป็นคลาส CSS
หากคุณต้องการปรับแต่งสไตล์ของแต่ละโพสต์ตามผู้เขียนคุณต้องเพิ่มชื่อผู้เขียนเป็นคลาส CSS ก่อน
อ่าน: วิธีการเพิ่มภาพเคลื่อนไหว CSS WordPress
คุณสามารถทำได้โดยใช้ตัวอย่างต่อไปนี้:
" >
รหัสนี้จะเพิ่มชื่อผู้ใช้เป็นคลาส CSS ชื่อผู้ใช้คือชื่อที่เข้ากันได้กับ URL ที่ WordPress ใช้ ไม่มีช่องว่างและอักขระทั้งหมดเป็นตัวพิมพ์เล็กซึ่งทำให้เหมาะสำหรับใช้เป็นคลาส CSS
ดูคำแนะนำของเราบน วิธีเพิ่ม CSS ที่กำหนดเองในบล็อก WordPress ของคุณ
โค้ดด้านบนมีแนวโน้มที่จะแสดงเช่นนี้:
ตอนนี้คุณสามารถใช้ ".peter" ใน CSS ที่กำหนดเองของคุณเพื่อแก้ไขโพสต์ทั้งหมดโดยผู้เขียนคนนั้นให้ปรากฏแตกต่างกัน
.Peter {สีพื้นหลัง: #EEE; ชายแดน: ของแข็ง 1px # CCC; }
กำหนดโพสต์ของบทความตามความคิดเห็น
คุณอาจเคยเห็นเว็บไซต์ที่มีวิดเจ็ตพร้อมบทความยอดนิยมซึ่งบางครั้งก็จัดอันดับตามความคิดเห็น ในตัวอย่างนี้เราจะแสดงวิธีสร้างสไตล์ที่แตกต่างโดยใช้จำนวนความคิดเห็น
ค้นพบของเรา ปลั๊กอิน WordPress 10 พรีเมียมเพื่อจัดการความคิดเห็นของคุณ
ขั้นแรกเราต้องได้รับจำนวนความคิดเห็นและเชื่อมโยงชั้นเรียน
ในการรับจำนวนความคิดเห็นคุณต้องเพิ่มรหัสต่อไปนี้ในไฟล์ธีม WordPress ของคุณ โค้ดนี้จะเข้าสู่ลูป WordPress คุณสามารถเพิ่มได้ก่อนแท็ก .
อนุมัติ; ถ้า ($ my_comment_count <10) {$ my_comment_count = 'ใหม่'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'ยอดนิยม'; }?>
รหัสนี้จะตรวจสอบจำนวนความคิดเห็นสำหรับสิ่งพิมพ์ที่โพสต์และกำหนดมูลค่าตามบัญชี ตัวอย่างเช่นข้อความที่มีความคิดเห็นน้อยกว่า 10 จะได้รับคลาสที่เรียกว่า " ใหม่ เรียกว่าน้อยกว่า 20 กากกะรุน "และสิ่งที่เกี่ยวข้องมากกว่าความคิดเห็น 20 คือ" เป็นที่นิยม '
จากนั้นคุณต้องเพิ่มคลาส CSS ลงในฟังก์ชัน post_class
" >
สิ่งนี้จะเพิ่มคลาส CSS ใหม่ที่กำลังจะเกิดขึ้นและเป็นที่นิยมในบทความทั้งหมดตามจำนวนความคิดเห็นในแต่ละโพสต์
เราขอเชิญคุณให้อ่านบทความของเราใน ปลั๊กอิน 6 WordPress สำหรับลงนามเอกสารออนไลน์
คุณยังสามารถเพิ่ม CSS ที่กำหนดเองเพื่อเผยแพร่สไตล์ตามความนิยม:
.new {ชายแดน: ของแข็ง 1px #FFFF00;} {.emerging ชายแดน: ประ 1px #FF9933;} {.popular ชายแดน: ประ 1px #CC0000;}
เราเพิ่งเพิ่มเส้นขอบ แต่คุณสามารถเพิ่มกฎ CSS ที่คุณต้องการ
ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง
คุณสามารถใช้ปลั๊กอิน WordPress อื่น ๆ เพื่อสร้างรูปลักษณ์ที่ทันสมัยและเพิ่มประสิทธิภาพการเชื่อมต่อกับบล็อกหรือเว็บไซต์ของคุณ
เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้
1 Ultimate Membership Pro
Ultimate Membership Pro เป็นสุดยอดการสมัครสมาชิก WordPress และปลั๊กอินการ จำกัด เนื้อหา ช่วยให้ผู้ใช้สามารถจัดการได้ตามแผน (ฟรีหรือจ่ายเงิน) ด้วยการสร้างระดับการเข้าถึงพิเศษ
มันจะเป็นไปได้ที่จะ ปกป้องเนื้อหาทั้งหมดในเว็บไซต์ของคุณหรือเพียงบางส่วน จะเป็นตัวอย่างเช่นหลักสูตรบทเรียนหน้าผลิตภัณฑ์หมวดหมู่รูปภาพ ฯลฯ ...
อ่านบทความของเราเกี่ยวกับ ปลั๊กอิน WordPress 4 คุณภาพสูงเพื่อสร้างภาพขนาดย่อ
ฟังก์ชันหลัก ได้แก่ การป้องกันเนื้อหาระดับการเข้าถึงหลายระดับรองรับเกตเวย์การชำระเงินหลายรายการ - บัตรเครดิต/เดบิต หรือ PayPal, Authorize.net, ลาย, 2CheckOut, โอนเงินผ่านธนาคาร -, การป้องกันเนื้อหาบางส่วน, และอื่น ๆ อีกมากมาย ...
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2. วิธีเลื่อนสำหรับ Facebook
วิธีการเลื่อน Facebook เป็นปลั๊กอิน WordPress พรีเมี่ยมที่เปิดโอกาสให้ผู้เยี่ยมชมแสดงความคิดเห็นบนเว็บไซต์ของคุณ ด้วยกล่องแสดงความคิดเห็นที่ทันสมัยและไม่ล่วงล้ำปลั๊กอิน WordPress นี้มีฟังก์ชั่น Like Box และ Fan Page Wall ที่จะขยายการรวมเว็บไซต์ของคุณกับเครือข่ายสังคม Facebook
ปลั๊กอินยังมีฟังก์ชั่นต่าง ๆ เพื่อขยายขีดความสามารถของเว็บไซต์ของคุณ: ตัวอย่างเช่น ส่วน Like (“ Like Box”) หรือเพจสำหรับแฟน ๆ (“ Fan Page Wall)
ค้นพบด้วย วิธีการโหลด Facebook และ Disqus อย่างช้าๆ
คุณไม่จำเป็นต้องฝังปุ่ม "ไลค์" และ "แชร์" บนโพสต์หรือเพจเนื่องจาก Facebook Comment Slider มีอยู่แล้วและสามารถปรากฏในโพสต์หรือเพจใดก็ได้ ผู้เยี่ยมชมจะพบปุ่ม "ถูกใจ" ปุ่ม "แบ่งปัน" และกล่องความคิดเห็นตัวเลื่อน Facebook เห็นได้ชัดว่าพวกเขาจะใช้บัญชี Facebook ของพวกเขา
นอกจากนี้คุณสามารถเปิดปิดและตั้งเวลาของเอฟเฟกต์การสั่นได้
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 เข้าสู่ระบบนินจา
ปลั๊กอิน WordPress พรีเมียมนี้ช่วยให้คุณปรับแต่งหน้าเข้าสู่ระบบของคุณ เป็นมากกว่าการปรับแต่ง แบบฟอร์มเข้าสู่ระบบของคุณ. คุณสามารถปรับแต่งทั้งหน้าได้โดยเปลี่ยนสีของหน้าเพิ่มภาพพื้นหลังเพิ่มโลโก้และอื่น ๆ
คุณสมบัติอื่น ๆ : การป้องกันการเข้าสู่ระบบและแบบฟอร์มการลงทะเบียนด้วย captcha, การห้าม IP โดยอัตโนมัติและด้วยตนเองที่โจมตีคุณด้วยกำลังดุร้าย, บันทึกโดยละเอียดของกิจกรรมที่เกี่ยวข้องกับการเชื่อมต่อทั้งหมด, การเปลี่ยนเส้นทางของผู้ใช้ตามบทบาทและชื่อผู้ใช้, รับการแจ้งเตือนทางอีเมล สำหรับกิจกรรมการเชื่อมต่อทั้งหมดอินเทอร์เฟซแบบกราฟิกที่ใช้งานง่ายเอกสารรายละเอียดและอื่น ๆ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
ทรัพยากรที่แนะนำ
ค้นหาข้อมูลเกี่ยวกับแหล่งข้อมูลที่แนะนำอื่น ๆ เพื่อช่วยคุณสร้างและจัดการเว็บไซต์ของคุณ
- ปลั๊กอิน WordPress 9 เพื่อจัดการการชำระเงิน PayPal บนบล็อกของเขา
- 10 ปลั๊กอิน WordPress ที่จำเป็นสำหรับติดตั้งในบล็อกของคุณ
- ปลั๊กอิน WordPress 10 ตัวที่ใช้สำหรับจัดการโฆษณา
- ปลั๊กอิน 10 WordPress เพื่อสร้างแอตทริบิวต์สำหรับผลิตภัณฑ์ตัวแปรของคุณ
สรุป
Voila! สำหรับการกวดวิชานี้ฉันหวังว่ามันจะช่วยให้คุณสามารถปรับแต่งการแสดงผลของบทความในบล็อก WordPress ของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะในพื้นที่นี้เรามาหาตัวเรากัน ส่วนความเห็นเพื่อหารือ.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...