تغییر استایل و نمایش برچسب ها در وردپرس

دسته بندی ها و برچسب ها بخش های تاثیر گذاری در سایت شما هستند.به وسیله دسته بندی ها مطالب رو منظم می کنید و هر یک رو در یک دسته خاص قرار می دهید. برچسب ها هم بر اساس دسته بندی های شما اما به صورت دقیق تر نوشته می شوند .در نوشتن برچسب ها سعی می کنیم که از محتوای خود نوشته و همچنین کلمات کلیدی که کاربران ممکنه سرچ کنن استفاده کنیم.پس تگ ها در سئو سایت هم بسیار موثر هستند.

تغییر استایل برچسب ها در وردپرس

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

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]

بعد از اینکه شورت کد را قرار بدهید، ابرچسب ها در سایت شما نمایش داده خواهند شد، برای اینکه برچسب ها مورد نظر خود را اعمال کنید کد زیر را به استایل قالب خود اضافه کنید.

.tagbox

{ background-color:#eee;

border: ۱px solid #ccc;

margin:۰px ۱۰px ۱۰px ۰px;

line-height: ۲۰۰%;

padding:۲px ۰ ۲px ۲px;

}

.taglink {

padding:۲px;

} .tagbox a, .tagbox a:visited, .tagbox a:active {

text-decoration:none;

}

.tagcount {

background-color:green;

color:white;

position: relative;

padding:۲px;

}

در نهایت خواهید دید که بیشترین برچسب های استفاده شده در این ابزارک به صورت زیر نمایش داده خواهند شد.

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

.terms a, .terms a:visited, .terms a:active {

background:#eee;

border:۱px solid #ccc;

border-radius:۵px;

text-decoration:none;

padding:۳px;

margin:۳px;

text-transform:uppercase;

}

.terms a:hover {

background:#a۸۲۸۱a;

color:#FFF;