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

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

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

هک وردپرس:نحوه استایل دادن به برچسب ها در وردپرس

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

با کد زیرمی تونید همه ی تگ ها و تعداد پست هاتون رو نمایش بدید.

ابتدا فایل function.php رو باز کنید و کد زیر رو در اون پیست کنید.

توجه:بهتره که کد زیر رو در فایل افزونه اختصاصی وردپرستون درج کنید.

</pre>
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' );
<pre>

کد معرفی شده تمامی تگ هاتونو به همراه تعداد پست ها در کنار هر پست نشون میده.

استفاده از کد بالا تنها تگ هارو نمایش میده و شاید ظاهر جذابی نداشته باشه.با افزودن کدهای css میتونیم کمی زیباتر اونارو جلوه بدیم.

</pre>
.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;}
<pre>

با به کاربردن کد بالا استایل ویژه ای به تگ هاتون میدید.تصویر زیر برچسب هایی هست که شما نهایتا در دمو سایتتون میتونید مشاهده کنید:

1

توجه داشته باشید که در در بعضی از تم ها شما میبینید که تگ ها به همراه تاریخ انتشار و نام نویسنده و جزییاتی از این قبیل در کنارعنوان پست نمایش داده میشن.بعضی این تگ هارو استایل میدن و سپس به نمایش میذارن.در ادامه بر بررسی استایل دادن تگ ها در چنین تم هایی میپردازیم.

خب بدین منظور ابتدا باید بدونیم کلاس css مورد استفاده در قالب چیه.بدین منظور روی تگ های موجود در بالای پست راست کلیک کنید.سپس گزینه inspect element رو انتخاب کنید.

همون طور که میبینید صفحه شما ترکیبی از صفحه قبلی و تول باکس مرورگر میشه.در شکل زیر اسکرین شاتی از اون چه که شما باید مشاهده کنید تهیه شده:

2

در این بخش باید کلاس مورد استفاده قالب رو پیدا کنید.مثلا در اسکرین شات بالا  terms برای کلاس css به کاربرده شده.

سپس باید کلاس زیر رو اضافه کنید تا بتونید به تگ های استایل و آرایش ویزه ای بدید:

</pre>
.terms a, .terms a:visited, .terms a:active { background:#eee;border:1px solid #ccc;border-radius:5px;text-decoration:none;padding:3px;margin:3px;text-transform:uppercase;}.terms a:hover { background:#a8281a;color:#FFF;}
<pre>

با به کاربردن کلاس بالا،تگ های شما شکل متفاوتی نسبت به قبل خواهند داشت که شکل زیر ،نمایش نهایی تگ ها در دموی سایت شماست:

3

امیدوارم از این مطلب بهره کافی رو برده باشید.

منبع:بیگ تم

 

یک نظر

  1. فریبا

    واقعا خیلی خیلی ممنون آقای سجاد غضنفری، با این کامنت شما مشکل بنده حل شد… سپاسگذارم

  2. behnam

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

  3. سجاد غضنفری

    با سلام
    کدی که شما قرار دادید ، ایراد دارد.
    توی function باید به جای get_tags کد get_the_tags رو قرار بدید.
    چون اگر اینکار را نکتید لیست تمامی تگها در زیر هر پست نشون میده ، یعنی اینکه ربطی نداره که اون تگ مربوط به اون پست خاص باشه یا نباشه.
    بعد خدمت دوستان اینکه برای استفاده از shortcode در پوسته ها از کد زیر استفاده نمایید:

  4. هادی قربانی

    توجه داشته باشید قبل و بعد کدهایی که داخل توضیحات هست کد pre هم قرار گرفته شما نباید این کد رو استفاده کنید فقط کدی که بین تگ pre قرار گرفته رو کپی کنید
    با احترام

  5. روبرت

    کار نمیده! کد رو توی فانکشن کپی کردم از شورت کد [wpbtags] هم استفاده کردم اما چیزی نشون نمیده!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *