breadcrumb چیست؟ نحوه ساخت breadcrumb در وردپرس

breadcrumb چیست؟ نحوه ساخت breadcrumb

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

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

نمایش موقعیت کنونی کاربر در وردپرس

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

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

نحوه ایجاد breadcrumb در وردپرس با استفاده از کد

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

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

کد زیر را در داخل فایل فانکشن خود قرار دهید.

function remon_breadcrumbs() {
$class = “tbclass”;
$showOnHome = ۱; // ۱ – show breadcrumbs on the homepage, 0 – don’t show
$delimiter = ‘»’; // delimiter between crumbs
$home = ‘صفحه اصلی’; // text for the ‘Home’ link
$showCurrent = ۱; // ۱ – show current post/page title in breadcrumbs, 0 – don’t show
$before = ‘<span class=”current”>’; // tag before the current crumb
$after = ‘</span>’; // tag after the current crumb
global $post;
$homeLink = get_bloginfo(‘url’);
if (is_home() || is_front_page()){
if ($showOnHome == ۱) echo ‘<div id=”breadcrumbs”>شما اینجا هستید : <a href=”‘ . $homeLink . ‘”>’ . $home . ‘</a></div>’;
}else{
echo ‘<div id=”breadcrumbs” class=”blue ‘ . $class . ‘”>شما اینجا هستید : <a href=”‘ . $homeLink . ‘”>’ . $home . ‘</a> ‘ . $delimiter . ‘ ‘;
if (is_category()){
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != ) echo get_category_parents($thisCat->parent, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
echo $before . ‘ “‘ . single_cat_title(”, false) . ‘”‘ . $after;
}else
if (is_search()){
echo $before . ‘نتایج جستجو برای “‘ . get_search_query() . ‘”‘ . $after;
}else
if (is_day()){
echo ‘<a href=”‘ . get_year_link(get_the_time(‘Y’)) . ‘”>’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘ ‘;
echo ‘<a href=”‘ . get_month_link(get_the_time(‘Y’),get_the_time(‘m’)) . ‘”>’ . get_the_time(‘F’) . ‘</a> ‘ . $delimiter . ‘ ‘;
echo $before . get_the_time(‘d’) . $after;
}else
if(is_month()){
echo ‘<a href=”‘ . get_year_link(get_the_time(‘Y’)) . ‘”>’ . get_the_time(‘Y’) . ‘</a> ‘ . $delimiter . ‘ ‘;
echo $before . get_the_time(‘F’) . $after;
}else
if(is_year()){
echo $before . get_the_time(‘Y’) . $after;
}else
if (is_single() && !is_attachment()){
if (get_post_type() != ‘post’){
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo ‘<a href=”‘ . $homeLink . ‘/’ . $slug[‘slug’] . ‘/”>’ . $post_type->labels->singular_name . ‘</a>’;
if ($showCurrent == ۱) echo ‘ ‘ . $delimiter . ‘ ‘ . $before . get_the_title() . $after;
}else{
$cat = get_the_category(); $cat = $cat[];
$cats = get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
if ($showCurrent == ) $cats = preg_replace(“#^(.+)\s$delimiter\s$#”, “$۱”, $cats);
echo $cats;
if ($showCurrent == ۱) echo $before . get_the_title() . $after;
}
}else
if(!is_single() && !is_page() && get_post_type() != ‘post’ && !is_404()){
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
}else
if (is_attachment()){
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[];
echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘);
echo ‘<a href=”‘ . get_permalink($parent) . ‘”>’ . $parent->post_title . ‘</a>’;
if ($showCurrent == ۱) echo ‘ ‘ . $delimiter . ‘ ‘ . $before . get_the_title() . $after;
}else
if (is_page() && !$post->post_parent){
if ($showCurrent == ۱) echo $before . get_the_title() . $after;
}else
if (is_page() && $post->post_parent){
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = ‘<a href=”‘ . get_permalink($page->ID) . ‘”>’ . get_the_title($page->ID) . ‘</a>’;
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = ; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)–۱) echo ‘ ‘ . $delimiter . ‘ ‘;
}
if ($showCurrent == ۱) echo ‘ ‘ . $delimiter . ‘ ‘ . $before . get_the_title() . $after;
}else
if (is_tag()){
echo $before . ‘برچسب “‘ . single_tag_title(”, false) . ‘”‘ . $after;
}else
if (is_author()){
global $author;
$userdata = get_userdata($author);
echo $before . ‘مطالب نوشته شده توسط ‘ . $userdata->display_name . $after;
}else
if (is_404()){
echo $before . ‘یافت نشد’ . $after;
}
if (get_query_var(‘paged’)){
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘;
echo __(‘صفحه’) . ‘ ‘ . get_query_var(‘paged’);
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’;
}
echo ‘</div>’;
}
}

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

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

فایل های page.php یا single.php یا archive.php

<?php if (function_exists('remon_breadcrumbs')) remon_breadcrumbs(); ?>

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

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

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

نحوه ساخت Breadcrumb در وردپرس با افزونه

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

بخش option

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

بخش Style

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

بخش shortcodes

در این قسمت از تنظیمات افزونه Breadcrumb شما قادر هستید شورت کد مربوط به نمایش برندکرومپ را ببینید.توجه داشته باشید که بعد از نصب این افزونه امکان Breadcrumb  به صورت خودکار نمایش داده نمی شود بلکه باید شورت کد قسمت های مختلف استفاده کنید. برای مثال در فایل  page.php یا single.php یا archive.php

نتیجه کارهای بالا با افزونه به شکل زیر خواهد بود:

از این که ما را تا پایان این آموزش همراخی کردید سپاس گذاریم.موفق باشید.

منبع:  وینزا