كيفية إضافة فتات الخبز إلى موقع الويب الخاص بك على WordPress

يشير مصطلح "مسارات التنقل" إلى أداة تنقل فعالة لموقع الويب (كما علمنا هانسيل وجريتل) تهدف إلى المساعدة في تتبع خطوات المرء إلى "الصفحة الرئيسية" لموقع الويب (أو الصفحة الرئيسية). إنها تسمح للمستخدمين بمعرفة كيف تتناسب الصفحة الحالية مع بنية الموقع بالكامل من خلال توفير مسار مضمّن للروابط (أو التسميات) يؤدي إلى العودة إلى الصفحة الرئيسية.

صفحة منتج Home Depot مع فتات الخبز

فتات الخبز هي في الواقع أكثر أهمية لموقع WordPress الخاص بك مما قد تعتقد. لا يقتصر الأمر على تحسين تجربة المستخدم فحسب ، بل يمكنهم أيضًا إعطاء موقعك ارتفاعاً في تصنيفات البحث. يحب Google هذا العنصر الهيكلي في موقع الويب ، وسيحصل الزوار على مساعدة ملاحية حاسمة عند التعثر في إحدى صفحاتك بشكل طبيعي (خفض معدل الارتداد).

قد تعتقد أن إضافة مثل هذا النظام المتكامل للتنشيط إلى موقع الويب الخاص بك سيكون أمرًا صعبًا ، ولكنه في الواقع بسيط جدًا باستخدام مكون إضافي. في الواقع ، إذا كنت تستخدم المكون الإضافي Yoast SEO ، فلديك السبق لأن وظائف فتات الخبز مدمجة بالفعل في Yoast! وإضافة فتات الخبز من خلال Yoast هي بالتأكيد إحدى الطرق المفضلة هناك. بصرف النظر عن Yoast SEO ، يعد المكون الإضافي Breadcrumb NavXT خيارًا رائعًا آخر قابل للتخصيص بدرجة كبيرة ويعمل أيضًا بشكل جيد مع Divi Theme الخاص بنا.

اشترك في قناتنا على اليوتيوب

كيفية إضافة فتات الخبز إلى موقع الويب الخاص بك على WordPress باستخدام Yoast

لإضافة فتات الخبز إلى موقع WordPress الخاص بك باستخدام Yoast SEO ، ستحتاج إلى معالجة ثلاث خطوات بسيطة:

• تثبيت وتفعيل البرنامج المساعد Yoast SEO
• إضافة مقتطف رمز فتات الخبز إلى سمة WordPress الخاصة بك
• تمكين / تكوين فتات الخبز Yoast Breadcrumbs في إعدادات البرنامج المساعد

قم بتثبيت وتفعيل البرنامج المساعد Yoast SEO

لتثبيت المكون الإضافي Yoast SEO ، انتقل إلى لوحة معلومات WordPress وانتقل إلى الإضافات> إضافة جديد. ثم ابحث عن مستودع WordPress عن "yoast". عندما ترى المكون الإضافي Yoast SEO ، انقر لتثبيت البرنامج المساعد وتنشيطه.

أضف Breadcrumbs Code Snippet إلى قالب WordPress الفرعي الخاص بك

بعد ذلك ، نحتاج إلى إضافة مقتطف قصير من التعليمات البرمجية إلى ملفات سمة WordPress الخاصة بك. لذا ، إذا لم تكن قد قمت بذلك بالفعل ، فمن الجيد إنشاء سمة فرعية. في هذا المثال ، سأوضح لك كيفية إضافة مقتطف رمز فتات التنقل إلى قالب TwentyNineteen WordPress الافتراضي. يمكنك إضافة الكود إلى أي ملف قالب / قالب ، ولكن بالنسبة للجزء الأكبر ، سترغب في إضافته إلى ملف single.php (لتظهر في جميع المنشورات) ، ملف page.php (لتظهر في جميع الصفحات ) ، أو إلى ملف header.php الخاص بك (لتظهر على مستوى الموقع).

في هذا المثال ، سأقوم بإضافة كود فتات التنقل إلى ملف header.php الخاص بموضوع طفلي. بمجرد نسخ ملف header.php من السمة الأصلية ، افتح الملف لتحرير الملف في محرر التعليمات البرمجية الذي تختاره.

ثم في الجزء السفلي من ملف header.php ، أضف مقتطف php التالي المقدم من Yoast لتنشيط وظيفة Breadcrumbs:

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

سيعرض هذا فتات الخبز مباشرة أسفل رأس جميع الصفحات ، وهو موضع شائع لفتات التنقل.

قم بتمكين وتهيئة Yoast Breadcrumbs في إعدادات البرنامج المساعد

بمجرد إضافة مقتطف الشفرة إلى قالب WordPress Child الخاص بك ، كل ما عليك فعله هو تنشيط Breadcrumbs في إعدادات البرنامج المساعد Yoast SEO. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى SEO> Search Appearance ثم انقر فوق علامة التبويب Breadcrumbs. ضمن إعدادات فتات الخبز ، تأكد من تمكين فتات الخبز من خلال تبديل الخيار إلى "ممكّن". ثم يمكنك تكوين إعدادات مسار التنقل وفقًا لاحتياجاتك. قد ترغب أيضًا في اختيار تصنيف لعرضه في فتات التنقل لمشاركتك. في هذا المثال ، سأقوم بتعيين مشاركاتي لإظهار الفئات في مسارات التنقل.

الآن دعنا نمضي قدمًا ونتحقق من شكل فتات الخبز في إحدى المنشورات التي أنشأتها في موضوع TwentyNineteen.

هذا ما يبدو عليه المنشور قبل تمكين فتات الخبز.

هذا ما يبدو عليه المنشور بعد تمكين فتات الخبز. يحتوي هذا المثال المنشور المحدد على فئة ("WordPress") وفئة رئيسية ("تصميم الويب") لتظهر لك تصنيف فئات فتات التنقل التي اخترتها في إعدادات مسارات التنقل.

قد تحتاج إلى ضبط نمط فتات التنقل الخاصة بك باستخدام بعض CSS الخارجية. للقيام بذلك ، يمكنك استخدام "فتات الخبز" معرّف CSS الذي تم تضمينه في كود php. افتح ملف style.css لموضوع الطفل الخاص بك (أو يمكنك إضافته في Theme Customizer ضمن CSS إضافي) وأضف ما يلي:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

بالنسبة لموضوع TwentyNineteen ، قد أرغب في مطابقة هامش نص الرأس الخاص بي عن طريق إضافة CSS المخصص التالي:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

إذا كنت تريد مزيدًا من التحكم في الموقع المحدد لمفاتيح التنقل الخاصة بك ، فيمكنك استخدام الرمز القصير التالي للمنشورات أو الصفحات الفردية أيضًا.

[wpseo_breadcrumb]

إضافة فتات الخبز إلى موقع الويب الخاص بك على WordPress باستخدام Breadcrumb NavXT

إذا كنت لا ترغب في تثبيت Yoast SEO لسبب ما أو إذا كنت تبحث عن خيار بسيط آخر ، فإن المكون الإضافي Breadcrumb NavXT يعد خيارًا ممتازًا.

لتثبيت المكون الإضافي ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى الإضافات> إضافة جديد. ثم ابحث في مستودع WordPress عن "breadcrumb navxt". بمجرد رؤية المكون الإضافي ، انقر لتثبيته وتنشيطه.

لاستدعاء فتات التنقل بحيث يتم عرضها على موقع الويب الخاص بك ، يمكنك استخدام عنصر واجهة مستخدم Breadcrumb NavXT المدمج والمتوفر في صفحة الأدوات. سيسمح لك هذا بسحب عنصر واجهة المستخدم إلى مناطق عناصر واجهة المستخدم المختلفة التي يوفرها المظهر الخاص بك. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى Appearance> Widgets. ثم اسحب الأداة إلى منطقة عنصر واجهة المستخدم أو إلى اختيارك وقم بتحديث إعدادات الأداة.

في هذا المثال ، أستخدم سمة Divi لعرض فتات الخبز في الجزء العلوي من الشريط الجانبي. هذا ما يبدو عليه في المنشور.

على غرار مثال Yoast Breadcrumb ، يمكنك أيضًا استدعاء مسار التنقل إلى موقعك عن طريق إضافة الكود اللازم إلى سمة طفلك. إليك الشفرة التي يقدمونها والمتوافقة مع قائمة مسارات التنقل لـ schema.org:

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

نظرًا لأنني أستخدم سمة Divi في هذا المثال ، فسوف أقوم بإضافة الكود إلى ملف Single.php الخاص بموضوع Divi Child الخاص بي أعلى علامة المقالة مباشرةً. سيعرض هذا فتات الخبز أعلى جميع مشاركاتي.

هذا ما يبدو عليه المنشور بعد إضافة الرمز.

تكوين فتات الخبز باستخدام إعدادات البرنامج المساعد

يحتوي المكون الإضافي Breadcrumb NavXT على بعض الخيارات القوية لتكوين فتات التنقل الخاصة بك. يمكنك تخصيص قالب فتات التنقل بالكامل لتصنيفات مختلفة وغير ذلك الكثير. يمكنك الوصول إلى هذه الإعدادات من لوحة معلومات WordPress الخاصة بك بالانتقال إلى الإعدادات> Breadcrumb NavXT.

تصفيف فتات الخبز

إذا كنت تريد تصميم فتات الخبز ، فيمكنك استهداف الفئة التي تسمى "فتات الخبز" المضمنة في الكود.

ما عليك سوى إضافة CSS التالي إلى ملف style.css الخاص بالمظهر الخاص بك أو إلى CSS الإضافي لمخصص السمة:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

إذا كنت ترغب في استخدام أداة مسار التنقل مع سمة Divi ، فيمكنك أيضًا استخدام وحدة الشريط الجانبي لـ Divi لإضافة تصميم إلى مسار التنقل داخل Divi Builder.

افكار اخيرة

تعد فتات الخبز جزءًا مهمًا من موقع الويب لكل من سهولة الاستخدام وتحسين محركات البحث. لذلك إذا كنت تفكر في إضافة فتات الخبز إلى موقع WordPress الخاص بك ، أقترح عليك أن تبدأ بالطرق التي توفرها المكونات الإضافية المذكورة في هذه المقالة (Yoast SEO و Breadcrumb NavXT). من المنطقي استخدام فتات الخبز Yoast إذا كنت تستفيد بالفعل من المكون الإضافي لتحسين محركات البحث (SEO) لأنه تحت تصرفك بالفعل. ومع ذلك ، فإن Breadcrumb NavXT هو خيار قابل للتخصيص بدرجة كبيرة أيضًا. بالتأكيد ، قد تضطر إلى الوصول إلى ملفات السمات الخاصة بك ، ولكن بشكل عام ، العملية بسيطة. إذا كان هناك أي شيء ، آمل أن يساعد هذا في تخفيف ألم الحصول على فتات الخبز على موقع WordPress الخاص بك.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!