اضافه کردن مسیر راهنما یا Breadcrumbs در وردپرس + 2 روش کاربردی

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

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

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

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

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

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

یکی از بهترین افزونه ها در این بین افزونه قدرتمند و محبوب Yoast SEO است، این افزونه نه تنها به افزایش رتبه سئو وبسایت شما کمک می کند بلکه یک مسیر راهنما یا همان Breadcrumbs را نیز به سایت وردپرسی شما نیز اضافه خواهد کرد.

یکی دیگر از افزونه های قدرتمند برای اضافه کردن مسیر راهنما یا Breadcrumbs در وردپرس نیز افزونه Breadcrumb NavXT است که از قابلیت ها و ویژگی های زیادی برخوردار است، این افزونه در بین کاربران وردپرس محبوبیت زیادی داشته و با امتیاز 4.5 از 5 بیش از 900 هزار نصب فعال در مخزن وردپرس را به خود اختصاص داده است.

برای اضافه کردن Breadcrumbs در وردپرس با استفاده از افزونه Yoast شما باید ابتدا افزونه Yoast را از مخزن وردپرس نصب و یا دریافت کنید. در صورتی که با نصب افزونه ها در وردپرس آشنایی ندارید می توانید مقاله زیر را مطالعه کنید.

• آموزش نصب افزونه در وردپرس ( از طریق مخزن وردپرس، هاست یا گیت هاب )

پس از نصب و فعال سازی افزونه شما نیاز است که یک قطعه کد را به مکانی دلخواه در سایت خود اضافه کنید و سپس در بخش تنظیمات افزونه ویژگی مسیر راهنما را فعال کنید پس با ادامه آموزش اضافه کردن Breadcrumbs در وردپرس با ما همراه باشید.

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

• Child Theme یا قالب فرزند چیست؟ چگونه یک قالب فرزند ایجاد کنیم؟

در اینجا قصد داریم به شما نشان دهیم که چگونه قطعه کد Breadcrumbs را به یک قالب پیش فرض وردپرس اضافه کنید و در این آموزش از قالب TwentyNineteen استفاده می کنیم. شما می توانید کد را به هر کدام از فایل های پوسته اضافه کنید، معمولا این کد به فایل single.php (برای نمایش در همه پست ها)، فایل page.php (برای نمایش در همه برگه ها) و یا به فایل header.php (برای نمایش در تمامی صفحات سایت) اضافه می شود.

برای این مثال ما قصد داریم کد Breadcrumbs را به فایل header.php در پوسته فرزند خود اضافه کنیم. پس از کپی کردن فایل header.php در قالب فرزند، فایل کپی شده را باز کنید و سپس در پایین فایل header.php ، قطعه php زیر را که توسط Yoast ارائه شده است برای فعال کردن قابلیت Breadcrumbs در وردپرس اضافه کنید:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

تصویر زیر را مشاهده کنید این کار، مسیر راهنما را مستقیماً زیر سربرگ تمام صفحات سایت نشان می دهد ، جایی که معمولاً تمامی سایت ها برای نمایش Breadcrumbs در وردپرس از آن استفاده می کنند.

پس از اینکه قطعه کد را به Child Theme یا پوسته اصلی اضافه کردید، تنها کاری که نیاز است انجام دهید فعال کردن Breadcrumbs در تنظیمات افزونه Yoast SEO است. برای این کار، به داشبورد وردپرس خود بروید و به SEO> Search Appearance بروید و سپس روی برگه Breadcrumbs کلیک کنید. در صفحه باز شده ابتدا Breadcrumbs را فعال کنید. سپس با استفاده از دیگر گزینه ها می توانید Breadcrumbs ایجاد شده را با توجه به نیاز خود پیکربندی کنید.

حال می توانید بررسی کنید که مسیر راهنما در سایت شما فعال شده است یا خیر، در صورتی که تمامی موارد ذکر شده را به درستی انجام داده باشید مسیر راهنما یا Breadcrumbs در وردپرس فعال خواهد شد.

همچنین در صورتی که شما بخواهید ظاهر مسیر راهنما را تغییر دهید می توانید از طریق ویرایش فایل CSS پوسته و یا استفاده از تنظیمات سفارشی سازی پوسته تغییرات مورد نیاز خود را اعمال کنید. برای تغییر ظاهر کافیست از کد زیر استفاده کنید:

#breadcrumbs {
    /*Add breadcrumb styling here*/
}

برای مثال اگر بخواهید فضای خالی بیرونی مسیر راهنما را تغییر دهید :

#breadcrumbs {
    margin: 0 calc(10% + 60px);
}

از طریق تنظیمات سفارشی سازی پوسته > CSS اضافی

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

در صورتی که شما نمی خواهید از افزونه Yoast برای ایجاد Breadcrumbs در وردپرس استفاده کنید می توانید از این افزونه استفاده کنید که به طور اختصاصی فقط برای ایجاد مسیر راهنما در وردپرس ایجاد شده است. ابتدا افزونه Breadcrumb NavXT را طبق روال معمول از طریق مخزن وردپرس نصب و فعال کنید.

در این افزونه برای نمایش مسیر راهنما در وب سایت شما می توانید از ابزارک داخلی Breadcrumb NavXT که در صفحه نمایش و سپس در قسمت ابزارک‌ها قرار دارد استفاده کنید.

این قابلیت به شما این امکان را می دهد که ویجت یا ابزارک مسیر راهنما را در مناطق مختلف و دلخواه خود در پوسته قرار دهید برای مثال می توانید Breadcrumbs را در ستون کناری نمایش دهید.

همچنین در صورت نیاز شما می توانید مسیر راهنما را از طریق کد به پوسته خود اضافه کنید. روند اضافه کردن مسیر راهنما به پوسته از طریق کد دقیقا همانند افزونه Yoast است و شما فقط کافیست کد زیر را در مکان مورد نظر خود قرار دهید.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

افزونه Breadcrumb NavXT گزینه های زیادی برای پیکربندی مسیر راهنمای سایت شما دارد. می توانید کل قالب مسیر راهنمای خود را برای طبقه بندی های مختلف و موارد دیگر سفارشی سازی کنید. برای دسترسی به تنظیمات این افزونه باید به بخش تنظیمات و زیر مجموعه Breadcrumb NavXT رجوع کنید.

همچنین در صورتی که قصد سفارشی سازی ظاهری مسیر راهنما را داشتید می توانید از طریق ویرایش فایل CSS پوسته و یا سفارشی سازی پوسته از طریق کد زیر تغییرات ظاهری خود را اعمال کنید.

.breadcrumbs {
	
	/*add css to style breadcrumbs here*/
	
}

Breadcrumbs برای استفاده کاربران و بهبود سئو سایت یکی از بخش های مهم هر وب سایت است. بنابراین اگر می خواهید مسیر راهنما را به سایت وردپرسی خود اضافه کنید، پیشنهاد می کنمی ابتدا با روش های ارائه شده توسط افزونه های ذکر شده در این مقاله (Yoast SEO و Breadcrumb NavXT) شروع کنید.

استفاده از مسیر راهنمای Yoast اگر از قبل از افزونه SEO را نصب کرده اید منطقی تر است. با این حالBreadcrumb NavXT نیز یک گزینه بسیار قدرتمند و قابل تنظیم است که مطمئناً امکان پیکربندی بیشتری را برای نمایش Breadcrumbs در وردپرس فراهم می کند.

همچنین در صورتی که شما از آن دسته از کاربران هستید که فکر می کنید استفاده از افزونه کار درستی نیست به شما پیشنهاد می کنیم مقاله “چه تعداد افزونه در وردپرس نصب کنیم؟ تعداد استاندارد افزونه ها در وردپرس” را مطالعه کنید تا درک بهتری راجع به استفاده از افزونه های وردپرس داشته باشید.