راهنمای اضافه کردن BreadCrumbs یا نان ریزه ها به وبسایت بدون افزونه

در ۱۹ مرداد ۱۳۹۸

خوب اول از همه اجازه بدهید ببینیم همه میدانید راجع به چه حرف میزنیم یا نه. احتمالا تا امروز بارها دیده اید که برخی از سایت ها در بخش بالایی خود یک نوار دارند که در هر لحظه به شما میگوید که شما در کجا قرار دارید و مثلا نوشته ای که در حال خواندن آن هستید، زیر مجموعه ی کدام دسته بندی است. ما به این نوار BreadCrumbs یا نان ریزه میگوییم.

اگر برایتان سوال پیش آمده که چرا چنین اسمی را برای این نوع ناوبری انتخاب کرده اند، پاسخ شما بسیار ساده و در عین حال بانمک است. هانسل و گرتل را که یادتان می آید. اگر یادتان باشد در آن داستان، هانسل برای اینکه بتواند راه خانه را مجددا پیدا کند و به خانه برگردد، در تمام راه، نان ریزه هایی روی زمین میریخت تا بعدا با کمک رد نان ریزه ها بتواند مسیر بازگشت را بیابد. قضیه ای این نان ریزه های ما هم در وردپرس دقیقا همین است. (البته با این تفاوت که پرنده ها آن ها را نمیخورند و ما وسط راه گم نمیشویم!) نان ریزه ها یا BreadCrumbs قرار است در هر لحظه مسیر شما را در یک سایت به شما اعلام کنند. اما کاربرد آنها به همینجا ختم نمیشود و کار مفید دیگر آنها این است که به بهتر شدن سئوی سایت شما هم کمک میکنند. بنابراین چه به کاربران و چه به موتورهای جستجو بیاندیشید، در هر دو حالت نان ریزه ها مفید هستند.

افزونه های بسیاری وجود دارند که به شما اجازه میدهند به سادگی به وبسایتتان نان ریزه اضافه کنید. مثلا یکی همین WordPress SEO by Yoast خودمان. ولی خوب نظرتان چیست که آستین هایمان را بالا بزنیم و خودمان چند خطی کد بنویسیم و به سادگی به نتیجه ی دلخواه خود دست پیدا کنیم؟ برای استفاده از نان ریزه ها در وبسایت خود کافی است کد زیر را در functions.php قالب خود قرار دهید :

function the_breadcrumb() {
                echo '<ul id="crumbs">';
        if (!is_home()) {
                echo '<li><a href="';
                echo get_option('home');
                echo '">';
                echo 'خانه';
                echo "</a></li>";
                if (is_category() || is_single()) {
                        echo '<li>';
                        the_category(' </li><li> ');
                        if (is_single()) {
                                echo "</li><li>";
                                the_title();
                                echo '</li>';
                        }
                } elseif (is_page()) {
                        echo '<li>';
                        echo the_title();
                        echo '</li>';
                }
        }
        elseif (is_tag()) {single_tag_title();}
        elseif (is_day()) {echo"<li>آرشیو "; the_time('F jS, Y'); echo'</li>';}
        elseif (is_month()) {echo"<liآرشیو "; the_time('F, Y'); echo'</li>';}
        elseif (is_year()) {echo"<li>آرشیو "; the_time('Y'); echo'</li>';}
        elseif (is_author()) {echo"<li>آرشیو نویسنده"; echo'</li>';}
        elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>آرشیو بلاگ"; echo'</li>';}
        elseif (is_search()) {echo"<li>نتایج جستجو"; echo'</li>';}
        echo '</ul>';
}

function the_breadcrumb() {

echo '<ul id="crumbs">';

if (!is_home()) {

echo '<li><a href="';

echo get_option('home');

echo '">';

echo 'خانه';

echo "</a></li>";

if (is_category() || is_single()) {

echo '<li>';

the_category(' </li><li> ');

if (is_single()) {

echo "</li><li>";

the_title();

echo '</li>';

}

} elseif (is_page()) {

echo '<li>';

echo the_title();

echo '</li>';

}

elseif (is_tag()) {single_tag_title();}

elseif (is_day()) {echo"<li>آرشیو "; the_time('F jS, Y'); echo'</li>';}

elseif (is_month()) {echo"<liآرشیو "; the_time('F, Y'); echo'</li>';}

elseif (is_year()) {echo"<li>آرشیو "; the_time('Y'); echo'</li>';}

elseif (is_author()) {echo"<li>آرشیو نویسنده"; echo'</li>';}

elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>آرشیو بلاگ"; echo'</li>';}

elseif (is_search()) {echo"<li>نتایج جستجو"; echo'</li>';}

echo '</ul>';

}

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

<?php the_breadcrumb(); ?>

1	<?php the_breadcrumb(); ?>

در حال حاضر برای نمایش نان ریزه ها در کد بالا از یک ul با آی دی crumbs استفاده میشود. بنابراین شما میتوانید به سادگی CSS دلخواه خود را برای این ناحیه تعریف کرده و آن را با نیاز های خود تطبیق دهید.
طراحان قالب هم میتوانند به سادگی و با استفاده از کد بالا (و شاید کمی سفارشی سازی) به قالبهای خود امکان نمایش نان ریزه ها را اضافه نمایند.

راستی، شما کد بالا را چگونه تغییر میدهید و چه پیشنهادی درباره آن دارید؟ در بخش نظرات منتظر شما هستیم.

دسترسی آسان به این مطلب لینک کوتاه :

18 دیدگاه

tulip می گوید 10 سال پیش
سلام
breadcrump سایت من با توجه به کتگوری تنظیم شده که اصلا جالب نیست. می خواستم بدانم چگونه با توجه به پیج آن را تنظیم کنم.
منتظر پاسخ شما هستم.
با تشکر
tulip
پاسخ
مهاجر می گوید 10 سال پیش
افزونه yoast یک کد برای این مورد قرار داده که باید داخل قالب بگذاریم. این کد رو کجا باید قرار بدهم؟
پاسخ
1. MrCode می گوید 10 سال پیش
  هر محلی که مایلید breadcrumb نمایش داده بشه.
  پاسخ
سیامک می گوید 10 سال پیش
سلام
خیلی متشکرم ازت که این همه مطالب را به رایگان در اختیار میزاری خدا خیرت بده
من جوملا کار بودم اما تازگیها به وردپرس رو آوردم و هنوز خیلی آماتور هستم در این برنامه و دارم کم کم یاد میگیرم ،منهم از افزونه سئو وردپرس استفاده میکنم و کدی به من داده برای نان ریزه
اما منهم مثل دوست قبلی نمیدانم کجای قالب باید این کد را قرار بدهم مثلا من این گزینه را برای تمام صفحاتم میخواهم و نمیدونم چه کاری باید انجام بدهم
برای بهتر شد ن منظورم میتوانید سایت من را نگاه کنید و ببینید که این برای کار من که سایت مسافرتی هستش برای تمام صفحات لازم است
پاسخ
1. MrCode می گوید 10 سال پیش
  سلام
  خوشحالم که از آموزش ها رضایت داشتید.
  ببینید در مورد محل قرار دهی کد نان ریزه ها، محل قرار گیری در هر قالب بر اساس نوع کد نویسی قالب کاملا متفاوته و این خود شما هستید که باید با توجه به نوع قالبتون تصمیم بگیرید که نان ریزه ها رو در کدوم فایل و کجای کد قالب قرار بدید.
  پاسخ
حسین می گوید 9 سال پیش
درود، سوالی داشتم اینکه شما به تصویر دقت کنید چطور باید تنظیم کنم که کاربر در گوگل وقتی کلمه ای سرچ می کند مطلب با لینک مطلب نمایش داده بشه یعنی مثل سایت اولی طبق تصویر.
http://up.wikivb.ir/images/igfsk4zw8287ick3t8py.png
لطفا محل قرار گیری کد ها رو دقیق بگید برای آموزش به یک کاربر آماتور
تشکر
پاسخ
1. MrCode می گوید 9 سال پیش
  سلام
  خیلی عجیبه که حالت دوم به حالت اول برتری داره ولی جدیدا خیلیا دنبال حالت اول میگردن … به هر شکل، اگر breadcrumbs یا نان ریزه ها رو از سایتتون حذف کنید این حالت باید از بین بره و آدرس سایت نشون داده بشه. (البته تضمینی نیست ولی روشش به همین شکل هست) اما حذف نان ریزه ها از سایت توصیه نمیشه.
  پاسخ
مسعود می گوید 9 سال پیش
من همه جا رو دنبال این مطلب گشتم. و باز اینجا پیدا کردم.
واقعا سایتتون خیلی خوبه. خدا قوت.
دوتا سوال داشتم، ببخشید اگر یکم سوالم ابتداییه، اما هیچ جا جوابی براش پیدا نکردم.
سوال اول) الان من در سایتم به هرجا که میرم مینیویسه home/(اسم مقاله)
نمیتونم اون کلمه home رو تغییر بدم! هیچ جا جوابی نیست براش
الان شما توی سایت خودتون همینو دارید و عوض کردید به:
خانه/مقالات و ارشیو ها/وردپرس/…
سوال دوم) الان سایت شما آدرس دقیق رو نشون میده!
یعنی صفحه به صفحه : خانه/مقالات و ارشیو ها/وردپرس/…
اما وب سایت من تا به صفحه ی زیر صفحه میرم، به جای اینکه آدرس دقیق رو بده، فقط مینیویسه home/(ادرس آخرین صفحه مراجعه شده)
واقعا شرمنده شاید جاش نبود اینجا بپرسم اما خواهش میکنم کمک کنید بلد نیستم.
تم استفاده شده socialchef v1.23
صفحه اولم استاتیک پیج ه.
با تشکر.
پاسخ
1. MrCode می گوید 9 سال پیش
  هر دو سوالتون به قالب بر میگرده.
  باید دید در قالبتون این عبارت home از کجا خونده میشه. از نام صفحه ی اصلیتون؟ یا صرفا یه عبارت قابل ترجمست؟ یا اینکه داره یکراست از داخل یکی از فایل های قالب اکو میشه. حالت اول و دوم که راه حلش مشخصه. حالت سوم هم باید فایلی که عبارت توش هست رو پیدا کنید و تغییرش بدید.
  در مورد سوال دومتون، شما وقتی وارد یک زیر صفحه میشید منطقا قالبتون باید اسم اون صفحه رو هم بعد از home/ بندازه که به نظر میاد پیاده سازیش کامل نیست.
  breadcumb ای که ما آموزش دادیدم این نوع ایراد رو نداره و به شکل صحیح طبقه بندی رو نشون میده. میتونید اون چه در قالبتون پیاده سازی شده رو با چیزی که آموزش داده شده جایگزین کنید.
  اگربه درستی این کار رو انجام بدید مشکلتون حل میشه.
  پاسخ
  1. مسعود می گوید 9 سال پیش
    واقعا ممنون. همیشه راهنمایی میکنید و پاسخگو کاربرا هستید.
    آموزشتون فوق العاده بود. کار کرد برای من.
    اما من با این تابع به چند تا مشکل کوچک برخوردم که ممنون میشم کمکم کنید برطرف کنم.
    تابع رو در انتهای فایل function قالبم گذاشتم. و کد فراخوانی رو بعد از هدر نوشتم.
    "لطفا عکس رو ببینید"
    http://uupload.ir/files/pie_site.png
    اما طبق عکس میبینید.
    1) یک سری دایره های قهوه ای اول نوشته ها اومده که نمیدونم چطور باید حذفشون کرد؟
    2) لینک ها در دو خط افتادن! به این صورت نشده: خانه>>مقالات…
    به این صورت شده:
    .خانه
    .مقالات
    این رو چطور درست کنم؟ که به توی یک خط و پشت هم اینشک شه؟ خانه>>مقالات
    3)اگه بخوام خانه رو به رنگ مشکی در بیارم و اسم آخرین صفحه رو برجسته(بلد) کنم، چه کدی باید کجا بزنم؟
    4) اصلی ترین مشکلم هنوز پابرجاست، همونطور که میبینید در عکس
    باید به این صورت باشه: خانه>>آموزش تهیه غذا>>غذای اصلی>>غذای دریایی
    اما این شکله: خانه. غذای دریایی.
    این رو هم لطف کنید راهنمایی کنید چطور درست کنم؟
    با تشکر فراوان .
  2. MrCode می گوید 9 سال پیش
    همونطور که در انتهای مطلب هم بهش اشاره کردیم باید برای این بخش استایل css بنویسید. جواب سوال اول و دوم و سومتون دقیقا همین کار هست. تا وقتی که استایل مناسب برای این بخش قرار ندید، این بخش به شکل پیشفرض تگ li که نمایش زیر هم به همراه دایره در پشتش هست، نشون داده میشه.
    در مورد سوال چهارمتون، کدی که در سایت ارائه شده، دسته بندی رو به صورت ریکرسیو نشون نمیده و تنها آخرین دسته ای که در اون قرار دارید رو به نمایش میزاره.
مسعود می گوید 9 سال پیش
خب راهی هست که کد رو ریکرسیو کنم که همه دسته های قبل رو هم نشون بده؟ یعنی باید چه تکه کدی رو بهش اضافه کنم؟
1) میشه لطف کنید و اون تیکه کد رو هم بگید که اضافه کنم؟
2) آموزشی در وب سایتتون هست که بدونم که کجا و چطوری یک فایل استایل css رو باید بنویسم؟
با تشکر فراوان.
پاسخ
1. MrCode می گوید 9 سال پیش
  با عرض پوزش پاسخ هر دو سوالتون منفی هست.
  بنده توصیه میکنم برای سفارشی سازی سایتتون به جایی مثل پونیشا مراجعه کنید. در اونجا به سادگی میتونید افرادی رو پیدا کنید که کار مد نظرتون رو براتون پیاده سازی کنند.
  پاسخ
  1. مسعود می گوید 9 سال پیش
    باز متشکرم هم از راهنمایی و آموزش هم از توصیه شما. خیلی خوب و کاربردی بود.
    امیدوارم کارتون رو همینطور پرقدرت ادامه بدید.
  2. MrCode می گوید 9 سال پیش
    از لطف شما ممنونم
    انشالله موفق باشید
برنامه می گوید 8 سال پیش
سلام
من افزونه Breadcrumb NavXT رو نصب کردم اما وقتی کد زیر را که باید در هدر سایت قرار بگیره رو میزارم یا هدر به هم میریزه هدر یا جایی که باید به نمایش در نمیاد. ممنون میشم اگه راهنماییم کنید.
پاسخ
1. MrCode می گوید 8 سال پیش
  سلام
  این آموزش در مورد اضافه کردن نان ریزه ها به سایت بدون استفاده از افزونه هست. هر وقت در کار با افزونه خاصی به مشکل برخورد میکنید بهترین کار این هست که مشکلتون رو در بخش ساپورت خود افزونه در سایت وردپرس با طراح افزونه مطرح کنید.
  پاسخ
امیر می گوید 7 سال پیش
سلام،.
کسایی که از نرم افزار yoast seo استفاده میکنن نیازه که به صورت دستی این کدها رو وارد کنن؟
یه سوالم اینکه تو نوشتن یک نوشته جدید نرم افزار yoast seo یه قسمت داره به اسم عنوان نان ریزه، من متوجه شدم نان ریزه چی هست ولی واقعیتش دقیقا متوجه نشدم بسته به مطلب در این بخش (عنوان نان ریزه) چی باید بنویسم! میشه یه مثال بزنید که فرضا برای چه مطلبی عنوان نان ریزه چی نوشته بشه؟
با تشکر
پاسخ

صفحه 1 از 1

ارسال پاسخ