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

چرا نمایش برچسبهای پرکاربرد مهم است؟
چند دلیل ساده برای این کار وجود دارد:
- ماندگاری بیشتر کاربران: کاربران از طریق برچسبها به مطالب مشابه هدایت میشوند.
- تجربه کاربری بهتر: محتوا ساختار بهتری پیدا میکند و راحتتر دنبال میشود.
- سئوی داخلی قویتر: لینکدهی داخلی به صفحات برچسب، گوگل را در درک ارتباط موضوعی مطالب کمک میکند.
- نمایش هوشمند محتوا: کاربران به سرعت میبینند کدام موضوعها پرطرفدار هستند.
ساخت شورت کد برای نمایش هشتگ های داغ
حالا قدم به قدم یاد میگیریم چطور این قابلیت را اضافه کنیم.
مرحله ۱: افزودن کد در functions.php
وارد فایل functions.php قالب فعال شوید (یا بهتر است اگر چایلد تم دارید، در functions.php آن قرار دهید).
سپس کد زیر را در انتهای فایل اضافه کنید:
//نمایش هشتگ های پرطرفدار
add_shortcode('mt_top_hashtags', function() {
$tags = get_tags(array(
'orderby' => 'count',
'order' => 'DESC',
'number' => 5
));
$output = '';
foreach ($tags as $tag) {
$output .= '<a class="hashtag" href="' . get_tag_link($tag->term_id) . '">#' . $tag->name . '</a>';
}
return $output;
});مرحله ۲: عملکرد کد
این شورتکد [top_hashtags] پنج برچسب پرکاربرد سایت شما را نشان میدهد.
تابع get_tags() برچسبها را بر اساس تعداد استفاده مرتب میکند و برای هر برچسب، یک لینک HTML میسازد.
مثال خروجی:
<a class="hashtag" href="/tag/wordpress/">#وردپرس</a>
<a class="hashtag" href="/tag/elementor/">#المنتور</a>
<a class="hashtag" href="/tag/plugins/">#افزونهها</a>مرحله ۳: استفاده از شورت کد
برای نمایش هشتگ های داغ در صفحات خود ، کافی است در هر نوشته یا برگه بنویسید:
[mt_top_hashtags]
با بارگذاری صفحه، پنج برچسب پرکاربرد نمایش داده میشوند.
مرحله ۴: استایل دادن به هشتگها (اختیاری)
برای اینکه هشتگها زیباتر نمایش داده شوند، میتوانید CSS زیر را اضافه کنید:
.hashtag {
display: inline-block;
margin: 0 6px 6px 0;
padding: 6px 10px;
background-color: #f3f3f3;
color: #333;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
}
.hashtag:hover {
background-color: #0073aa;
color: #fff;
}این کد هشتگ ها را شبیه دکمه های کوچک و جذاب نمایش میدهد.
مرحله ۵: شخصیسازی تعداد و ترتیب هشتگ های داغ
اگر میخواهید تعداد برچسبها را تغییر دهید، مقدار number را ویرایش کنید:
'number' => 10
برای نمایش هشتگ های داغ از کم کاربردترین به پرکاربردترین، مقدار order را به ASC تغییر دهید.
نتیجه
با این روش ساده، سیستمی دارید که مثل بخش “ترندهای داغ” شبکههای اجتماعی، پربازدیدترین هشتگها را نمایش میدهد. سبک است، بدون نیاز به افزونه، و به سئو و تجربه کاربری سایت شما کمک میکند.
