วิธีที่จะให้รูปแบบที่ไม่ซ้ำกับรายการในแต่ละ WordPress

คุณเคยเจอเว็บไซต์ที่ตีพิมพ์บทความในบล็อกหรือไม่

บางเว็บไซต์มีบทความแนะนำที่เน้นด้วยพื้นหลังที่กำหนดเองในขณะที่เว็บไซต์อื่น ๆ อาจมีการโพสต์แต่ละหมวดหมู่ด้วยรูปลักษณ์ที่ไม่เหมือนใคร หากคุณต้องการเรียนรู้วิธีปรับแต่งโพสต์ 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 ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...