در این آموزش، روش قراردادن تگ یا برچسب مطالب در وردپرس و ووکامرس و استایل دهی به آن بدون استفاده از افزونه توضیح داده شد است و درنهایت، بعد از انجام کارهای توصیه شده در این آموزش، تگ مطالب به‌صورت زیر نمایش داده خواهند شد.

 


آموزش نمایش تگ مطالب در قالب وردپرس و ووکامرس و استایل دهی به آن بدون استفاده از افزونه

اغلب کاربران هنگام مراجعه به وب‌سایت، زحمت جستجو را به خود نمی‌دهند، پس باید به‌راحتی بتوانند در آن گردش کنند و در کم‌ترین زمان ممکن، مطالب موردنظرشان را پیدا کنند.
تگ‌ها یا برچسب‌ها یکی از ابزارهای مهم طبقه‌بندی مطالب در وردپرس و ووکامرس هستند و وظیفه ایجاد ارتباط بین مطالب دسته‌بندی‌شده را به عهده دارند و باعث ساماندهی بهتر محتوا، افزایش کارایی و مدت زمان حضور کاربران می‌شود.
تحقیقات روان‌شناسی نشان می‌دهد، فارغ از بحث کیفیت محتوا، ظاهر زیبا و ترکیب رنگ وب‌سایت، تأثیر بسزایی در تصمیم‌گیری و ماندگاری کاربران دارد.
یکی از ویژگی‌های مثبت وردپرس، قابلیت سفارشی کردن ظاهر قالب، ابزارها و بخش‌های مختلف آن است.

سریع‌ترین و ساده‌ترین روش تغییر استایل نمایش تگ‌ها یا برچسب‌ها در پست‌های وردپرس و ووکامرس بدون استفاده از افزونه

برای این کار، کافی است در پوشه قالب وب‌سایت، فایل content-single.php یا single.php را ویرایش کرده و عبارت the_tags را پیدا کنید و به‌جای کد php آن، کد زیر را جایگزین کرده و اطلاعات را ذخیره کنید.

<?php if (get_the_tags()) :?> 
<p class="tagstyle"><strong>تگ/تگ‌ها‌: </strong><?php the_tags('', ' ', ''); ?> </p>
<?php endif;?>

در ووکامرس هم می‌توانید فایل نمایش اطلاعات محصول را پیدا کرده و کد زیر را بعد از متن توضیحات محصول قرار دهید.

<?php if (wc_get_product_tag_list( $product->get_id(), ', ' )) {?>
<p class="tagstyle"><strong>تگ/تگ‌ها‌: </strong><?php echo wc_get_product_tag_list( $product->get_id(), ' ' ); ?></p>
<?php endif;?>

حالا کافی است فایل استایل قالب سایت (style.css) را ویرایش کرده، کدهای زیر را در انتهای آن قرار دهید و اطلاعات را ذخیره نمایید.

/* Tag Style */
.tagstyle a:link, .tagstyle a:visited, .tagstyle a:focus, .tagstyle a:active  {
    background-color: #005db3;
    border-radius: 5px;
    color: #ffffff;
    padding: 0px 5px;
}
.tagstyle a:hover { 
    background-color: #8c0801;
    border-radius: 5px;
    color: #ffffff;
    padding: 0px 5px;
}

مقایسه دسته‌بندی و برچسب‌گذاری مطالب در وردپرس، نقش آن‌ها در بهبود سئو و افزایش زمان حضور کاربران در وب‌سایت