دسته بندی ها و برچسب ها بخش های تاثیر گذاری در سایت شما هستن.به وسیله دسته بندی ها مطالب رو منظم می کنید و هر یک رو در یک دسته خاص قرار میدید.برچسب ها هم بر اساس دسته بندی های شما اما به صورت دقیق تر نوشته میشن.در نوشتن برچسب ها سعی می کنیم که از محتوای خود نوشته و همچنین کلمات کلیدی که کاربران ممکنه سرچ کنن استفاده کنیم.پس تگ ها در سئو سایت هم بسیار موثرن.در این مقاله ترفندی برای نمایش زیبا تر و استایل دادن به تگ ها معرفی می کنیم.
هک وردپرس:نحوه استایل دادن به برچسب ها در وردپرس
قطعا مشاهده کردید که خیلی از سایت ها پربازدید تگ ها یا برچسب های متداولشون رو در ناحیه ای از فوتر قالب یا برگه ی آرشیوشون قرار میدن.
با کد زیرمی تونید همه ی تگ ها و تعداد پست هاتون رو نمایش بدید.
ابتدا فایل 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> |
با به کاربردن کد بالا استایل ویژه ای به تگ هاتون میدید.تصویر زیر برچسب هایی هست که شما نهایتا در دمو سایتتون میتونید مشاهده کنید:
توجه داشته باشید که در در بعضی از تم ها شما میبینید که تگ ها به همراه تاریخ انتشار و نام نویسنده و جزییاتی از این قبیل در کنارعنوان پست نمایش داده میشن.بعضی این تگ هارو استایل میدن و سپس به نمایش میذارن.در ادامه بر بررسی استایل دادن تگ ها در چنین تم هایی میپردازیم.
خب بدین منظور ابتدا باید بدونیم کلاس css مورد استفاده در قالب چیه.بدین منظور روی تگ های موجود در بالای پست راست کلیک کنید.سپس گزینه inspect element رو انتخاب کنید.
همون طور که میبینید صفحه شما ترکیبی از صفحه قبلی و تول باکس مرورگر میشه.در شکل زیر اسکرین شاتی از اون چه که شما باید مشاهده کنید تهیه شده:
در این بخش باید کلاس مورد استفاده قالب رو پیدا کنید.مثلا در اسکرین شات بالا 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> |
با به کاربردن کلاس بالا،تگ های شما شکل متفاوتی نسبت به قبل خواهند داشت که شکل زیر ،نمایش نهایی تگ ها در دموی سایت شماست:
امیدوارم از این مطلب بهره کافی رو برده باشید.
