วิธีจัดรูปแบบแท็กใน WordPress ได้อย่างง่ายดาย (พร้อมตัวอย่าง)

คุณต้องการจัดสไตล์แท็กใน WordPress เพื่อให้ดูโดดเด่นยิ่งขึ้นหรือไม่?

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

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

วิธีแสดงแท็กใน WordPress

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

ธีม WordPress ยอดนิยมจำนวนมากจะแสดงแท็กที่ด้านบนหรือด้านล่างของโพสต์ของคุณตามค่าเริ่มต้น

อย่างไรก็ตาม คุณยังสามารถแสดงแท็กในหน้าเก็บถาวร ส่วนท้าย แถบด้านข้าง และเกือบทุกที่ที่คุณต้องการ

หากต้องการแทรกแท็กคลาวด์ในโพสต์ เพจ และวิดเจ็ตแถบด้านข้าง คุณสามารถเพิ่มบล็อกแท็กคลาวด์ได้

แท็กคลาวด์ให้แต่ละแท็กมีขนาดแบบอักษรที่แตกต่างกันตามจำนวนโพสต์ คุณยังสามารถเลือกที่จะแสดงจำนวนโพสต์ถัดจากแต่ละแท็กได้

นี่เป็นเพียงตัวเลือกเริ่มต้นที่มีใน WordPress แต่ถ้าคุณต้องการปรับแต่งแท็กของคุณมากกว่านี้ล่ะ เราจะแสดงให้คุณเห็นว่าอย่างไร

มาดูวิธีจัดรูปแบบแท็กใน WordPress ได้อย่างง่ายดาย

กำหนดสไตล์แท็กคลาวด์เริ่มต้นใน WordPress

หลังจากที่คุณเพิ่มบล็อก Tag Cloud ลงในโพสต์หรือเพจแล้ว คุณสามารถปรับแต่งได้โดยเพิ่ม CSS ที่กำหนดเอง

บล็อกแท็กคลาวด์จะรวมคลาส CSS เริ่มต้นที่สร้างโดย WordPress โดยอัตโนมัติซึ่งสามารถใช้เพื่อจัดสไตล์ได้

หากต้องการเพิ่ม CSS ที่กำหนดเองลงในไซต์ WordPress ของคุณ เพียงไปที่หน้า ลักษณะที่ปรากฏ » ปรับแต่ง และสลับไปที่แท็บ CSS เพิ่มเติม

คุณสามารถเริ่มต้นด้วยการเพิ่มโค้ด CSS ที่กำหนดเองนี้เป็นจุดเริ่มต้น

.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 {  font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 {  font-size:30px!important; }
 
 
.tag-cloud-link {
    text-decoration:none;
    background-color:#fff;
}
.tag-link-count {
    background-color: #d6d6d6;
}

อย่างที่คุณเห็น คุณสามารถใช้คลาส .tag-link-position เพื่อปรับสไตล์ตามตำแหน่งของลิงก์ แท็กที่มีโพสต์มากกว่าจะอยู่ในตำแหน่งที่สูงกว่า และแท็กที่มีโพสต์น้อยกว่าจะอยู่ในตำแหน่งที่ต่ำกว่า

หากคุณต้องการให้แท็กทั้งหมดในบล็อกแท็กคลาวด์มีขนาดเท่ากัน คุณสามารถใช้ CSS ต่อไปนี้แทน:

.tag-cloud-link { 
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
    text-decoration:none;
    background-color:#fff;
}
.tag-link-count {
    background-color: #d6d6d6;
 
}

นี่คือลักษณะที่ปรากฏบนไซต์ทดสอบของเรา:

จัดแต่งทรงผมแท็กโพสต์ใน WordPress

นอกจากการกำหนดสไตล์แท็กคลาวด์แล้ว คุณยังอาจต้องการจัดสไตล์แท็กโพสต์ที่แสดงในโพสต์ในบล็อกแต่ละรายการของคุณด้วย โดยปกติแล้ว ธีม WordPress ของคุณจะแสดงไว้ที่ด้านบนหรือด้านล่างของชื่อโพสต์หรือเนื้อหาโพสต์

คุณสามารถเลื่อนเมาส์ไปเหนือแท็กแล้วคลิกขวาเพื่อใช้เครื่องมือตรวจสอบเพื่อดูคลาส CSS ที่ใช้โดยธีม WordPress ของคุณ

หลังจากนั้น คุณสามารถใช้คลาส CSS เหล่านี้ใน CSS ที่คุณกำหนดเองได้ ต่อไปนี้เป็นโค้ดตัวอย่างตามคลาส CSS ในธีมทดสอบของเรา:

.entry-tag { 
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a { 
color:#fff;
font-size:small;
font-weight:bold;
}

นี่คือลักษณะที่ปรากฏในเว็บไซต์ทดสอบของเรา

การสร้างแท็กคลาวด์แบบกำหนดเองใน WordPress

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

วิธีการนี้ช่วยให้คุณสามารถเพิ่มคลาส HTML และ CSS ของคุณเองรอบๆ แท็กคลาวด์ได้ จากนั้นคุณสามารถใช้เพื่อปรับแต่งรูปลักษณ์ของแท็กคลาวด์ให้ตรงตามความต้องการของคุณได้

สิ่งแรกที่คุณต้องทำคือคัดลอกและวางโค้ดนี้ลงในไฟล์ function.php ของธีมของคุณหรือปลั๊กอินตัวอย่างโค้ด เช่น WPCode (แนะนำ)

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

รหัสนี้จะเพิ่มรหัสย่อที่แสดงแท็กทั้งหมดของคุณโดยมีจำนวนโพสต์อยู่ข้างๆ

หากต้องการแสดงบนหน้าเก็บถาวรหรือในวิดเจ็ต คุณต้องใช้รหัสย่อนี้:

<รหัส>[wpbtags]

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

.tagbox { 
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
  
}
.taglink  { 
padding:2px;
}
  
.tagbox a, .tagbox a:visited, .tagbox a:active { 
text-decoration:none;
}
  
.tagcount { 
background-color:green;
color:white;
position: relative;
padding:2px;
}

คุณสามารถปรับเปลี่ยน CSS ตามความต้องการของคุณได้ นี่คือลักษณะที่ปรากฏบนไซต์สาธิตของเรา:

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีจัดรูปแบบแท็กใน WordPress ได้อย่างง่ายดาย คุณอาจต้องการดูคำแนะนำของเราเกี่ยวกับวิธีสร้างหน้า Landing Page แบบกำหนดเองใน WordPress หรือดูรายการเคล็ดลับ เคล็ดลับ และแฮ็ก WordPress ที่มีประโยชน์

หากคุณชอบบทความนี้ โปรดสมัครรับวิดีโอบทแนะนำช่อง YouTube สำหรับ WordPress ของเรา คุณยังพบกับเราได้บน Twitter และ Facebook