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

همه‌ی ما زمانیکه وارد یه سایت میشیم از خودمون میپرسیم” که الان کجا هستم؟! این صفحه اصلاً به کجا وصل میشه؟” 🤔 اینجا دقیقا همون جاییه که بردکرامب به دادمون می‌رسه! مثل یه نقشه کوچیک که توی سایت، مسیر حرکت کاربر رو مشخص می‌کنه. یعنی وقتی وارد صفحه‌ای می‌شی، می‌فهمی که “آها! من توی این صفحه‌ام، حالا از اینجا می‌تونم برگردم به صفحه اصلی یا دسته‌بندی‌های دیگه.” اینطور دیگه کاربر گیج نمیشه و خیلی راحت‌تر می‌تونه تو سایت بچرخه. 🧭

حالا یه چیزی که خیلی‌ها نمی‌دونن اینه که بردکرامب فقط برای راحتی کاربر نیست! گوگل و بقیه موتورهای جستجو هم این مسیرها رو می‌بینن و می‌فهمن سایت شما چطور مرتب شده، این یعنی یه قدم بزرگ برای سئو! 🚀

اگر بخوام ساده‌تر بگم، بردکرامب یعنی یه نوع “مسیر راه” که نه فقط کاربر رو کمک می‌کنه راحت‌تر پیدا کنه کجا هست، بلکه سایت رو برای موتورهای جستجو هم مرتب و شفاف می‌کنه. و خوشبختانه، توی این مقاله قراره بهت یاد بدم چطور مثل سایت‌های معروفی مثل میهن وردپرس این بردکرامب رو بسازی، بدون اینکه نیاز به افزونه‌ داشته باشی. آره، درست شنیدی! فقط با یه سری کد ساده می‌تونی این کارو بکنی. 😎

حالا اگه آماده‌ای، بیا بریم سراغ آموزش ! 👨‍💻 اما خوبه قبلش یه توضیحات بیشتری راجع به بردکرامب بهت بدم 🙂

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

بردکرامب چی هست؟ 🤔

خب، بردکرامب (به انگلیسی: Breadcrumb ) یه چیز خیلی ساده و کاربردیه که شاید زیاد بهش توجه نکردی، ولی توی خیلی از سایت‌ها ازش استفاده میشه. به زبان ساده، بردکرامب یعنی یه مسیر که به کاربر نشون میده الان کجا هست و چطور می‌تونه بره سراغ صفحات قبلی یا صفحه اصلی سایت. برای مثال، ممکنه چیزی مثل این رو توی بالای سایت ببینی:

این مسیر نشون میده که شما از صفحه اصلی (خانه) وارد دسته‌بندی خاصی شدی و حالا این صفحه‌ای که توش هستی، یه مقاله داخل همون دسته‌بندیه. اینطوری کاربر به راحتی می‌فهمه که کجا هست و چطور می‌تونه مسیرش رو تغییر بده. 😅

بردکرامب نه تنها به کاربر کمک می‌کنه که گیج نشه، بلکه گوگل و بقیه موتورهای جستجو هم از این بردکرامبه خوششون میاد! 😍 موتورهای جستجو با کمک بردکرامب می‌فهمن که ساختار سایتت چطور سازمان‌دهی شده و صفحات مختلف چطور به هم وصل شدن. این یعنی سئو بهتر، یعنی احتمال اینکه سایتت تو نتایج جستجو بالاتر بیاد، بیشتر میشه! 📈

به طور کلی، بردکرامب یه نقشه کوچک و ساده‌ست که از دو جهت مفید عمل می‌کنه:

1. برای کاربر – چون کمک می‌کنه سریع‌تر تو سایت بگرده و راحت‌تر به هدفش برسه.
2. برای گوگل – چون به موتورهای جستجو کمک می‌کنه تا ساختار سایتت رو بهتر درک کنن و سایتت رو راحت‌تر ایندکس کنن.

حالا فکر کن اگه این بردکرامب رو توی سایتت نداشتی، کاربر می‌خواست چطور بفهمه کجا هست یا چطور برگرده؟ به نظرت این مسئله تو سئو تاثیر نداره؟! 💭

پس، بردکرامب هم برای راحتی کاربر و هم برای بهبود سئو خیلی مهمه! 🏆

خب حالا که اطلاعات کافی در اینباره بهت دادم وقتشه بریم سراغ آموزش! 👨‍💻

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

در این آموزش اصلاً قرار نیست از افزونه استفاده کنیم. 😎 ما می‌خواهیم یه کد ساده بنویسیم تا بردکرامب مشابه سایت میهن وردپرس بسازیم. برای این کار، نیاز به یه سری کدهای PHP و CSS داریم. ولی اصلاً نگران نباش! 👌 همه چیز رو خیلی ساده و قدم به قدم توضیح میدم، طوری که حتی اگه هیچ چیزی از کدنویسی ندونی، باز هم بتونی راحت این کارو انجام بدی. 😉

مرحله اول: افزودن کد PHP بردکرامب به فایل function.php

اول از همه کد PHP زیر رو به فایل functions.php قالب خودت اضافه کن:

// Custom breadcrumb by RayaWp.ir
function RayaWp_breadcrumb_shortcode() {
    $separator = ''; 
    $home = 'خانه'; 
    $current_page = get_the_title();
    $category = ''; 

    if (is_single()) {
        $categories = get_the_category();
        if (!empty($categories)) {
            $category = $categories[0]->name;
            $category_link = get_category_link($categories[0]->term_id);
            $category = '<a href="' . $category_link . '">' . $category . '</a>';
        }
    }

    $breadcrumb = '<div class="RayaWp-breadcrumb">';
    $breadcrumb .= '<a href="' . home_url() . '" class="breadcrumb-home">' . $home . '</a>';

    if ($category) {
        $breadcrumb .= $category;
    }

    if (is_single() || is_page()) {
        $breadcrumb .= $separator . '<span class="last">' . $current_page . '</span>';
    }

    $breadcrumb .= '</div>';

    return $breadcrumb;
}

add_shortcode('RayaWp_breadcrumb', 'RayaWp_breadcrumb_shortcode');

این کد یه شورت‌کد به نام RayaWp_breadcrumb تعریف می‌کنه که می‌تونی تو هر کجای سایتت ازش استفاده کنی. با این کار، موقعیت کاربر تو صفحه با بردکرامب به نمایش درمیاد و به راحتی می‌تونه مسیرش رو دنبال کنه. 🧭

🚨 نکته اول! قبل از اینکه هر تغییری تو فایل‌های وردپرس بدی، پیشنهاد می‌کنم اول یه بکاپ از سایتت بگیری. اینطوری اگه مشکلی پیش اومد، راحت می‌تونی سریعاً بکاپ رو برگردونی و از دردسر جلوگیری کنی. 😉

💡 نکته دوم! بهتره این کد رو به فایل فانکشن‌ چایلد تم قالبت اضافه کنی. اینطوری وقتی قالب رو به روزرسانی می‌کنی، تغییراتت از بین نمی‌ره و هیچ چیزی از دست نمی‌ره! 🛠️

مرحله دوم: اضافه کردن کد CSS برای استایل دهی به بردکرامب

حالا که کد PHP رو داخل فانکشن قالبت قرار دادی، نوبت به استایل‌ها می‌رسه. 💻✨ یادت میاد که بالاتر شورت‌کد RayaWp_breadcrumb رو برای بردکرامب تعریف کردیم؟ حالا اگه از المنتور استفاده می‌کنی، کافیه توی تب پیشرفته کلاس Raya-Wp-breadcrumb رو به شورت‌کد اختصاص بدی، بعد به پایین اسکرول کنی و تو قسمت CSS سفارشی کدهای زیر رو قرار بدی: 👇

/* Breadcrumb style by RayaWp.ir */
.elementor-widget-shortcode .Raya-Wp-breadcrumb {
    background: #fff;
    width: 100%;
    margin-bottom: 20px;
    padding: 3px;
    box-shadow: 0 4px 20px #E4E6F3; 
    border-radius: 27px;
    border: 1px solid #e7ecf0;
    position: relative;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: clip;
    scrollbar-width: thin;
    scrollbar-color: #FFCF9C transparent;
}

.elementor-widget-shortcode .Raya-Wp-breadcrumb a {
    padding: 0 25px;
    line-height: 50px;
    font-size: 16px;
    position: relative;
}

.elementor-widget-shortcode .Raya-Wp-breadcrumb .last {
    padding: 0 25px;
    font-size: 16px;
    line-height: 50px;
}

.elementor-widget-shortcode .Raya-Wp-breadcrumb li:first-child a {
    padding-right: 1em;
    border-radius: 20px 0 0 20px;
}

.elementor-widget-shortcode .Raya-Wp-breadcrumb a:hover {
    color: #5222d0;
}

.elementor-widget-shortcode .Raya-Wp-breadcrumb a::after, .elementor-widget-shortcode .Raya-Wp-breadcrumb a::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -2em;
    border-top: 2em solid transparent;
    border-bottom: 2em solid transparent;
    border-right: 1.1em solid;
    left: -1em;
}

.elementor-widget-shortcode .Raya-Wp-breadcrumb a::after {
    z-index: 1;
    border-right-color: #fff;
}

.elementor-widget-shortcode .Raya-Wp-breadcrumb a::before {
    border-right-color: #e7ecf0;
    left: -1.1em;
    z-index: 1;
}

نتیجه نهایی کار میشه چیزی شبیه به تصویر زیر:)

مرسی که تا پایان این آموزش با نگاه قشنگت منو همراهی کردی، انتقادی، پیشنهادی یا سوالی داشتی حتما قسمت دیدگاه ها بیان کن 😊❤️