تحسين مظهر أرشفة موقعك بإستخدام خاصية Breadcrumb

ما هي خاصية Breadcrumb أو فتات الخبز ؟
هي خاصية تعطي مسار للمواضيع ولهذا سميت بفتات الخبز على غرار القصص التي اتبع رجل أبناءه عبر فتات الخبز المتساقط منهم او لمن يطارد حيوان فيتبع فتات طعامه فهذه هي الفكرة من تلك التسمية الغريبه
هذه الخاصة توفر مسار للمواضيع يتكون من الرئيسية يليه التصنيفات ثم رابط الموضوع
هل هذه الخاصية تسرع الأرشفة ؟
لا فليست وظيفتها تسريع الأرشفه فقط تحسين مظهر الأرشفة الظاهر في جوجل كما تراه في المثال الموجود في صورة الموضوع
هل أحتاج تركيبها في قالبي؟
على حسب فربما هي موجوده في قالبك بالفعل بالتالي لا داعي من تركيبها
كيف اعرف انها في قالبي؟
فقط ابحث عن كلمة Breadcrumb في قالبك ان كانت موجوده غالباً هي مركبة
وجدتها لكن الأرشفة لا تظهر لدي بهذا الشكل ما السبب ؟
ربما تكون نسخة قديمه توقفت او القالب نفسه به مشكلة تمنع عملها بشكل مضبوط فيمكنك حينها استبدال التي لديك بالموجوده في الموضوع
لكن قبل أى شئ احتفظ بنسخة احتياطية من قالبك

طريقة التركيب

ابحث عن هذا الكود

<div class='blog-posts hfeed'>

بعده أضف الكود التالي

<b:include data='posts' name='breadcrumb'/>

ثم ابحث عن هذا الكود

<b:includable id='comment-form' var='post'>

وقبله أضف الكود التالي

    <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>الرئيسية</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187; غير مصنف
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>الرئيسية</a> &#187; مؤرشف في <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>الرئيسية</a> &#187; كل المقالات
<b:else/>
<a expr:href='data:blog.homepageUrl'>الرئيسية</a> &#187; المقال مصنف في <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

قد تجد بعض الأكواد التي عليك البحث عنها مكرر في القالب احدها سيعمل معك فجرب حتى تحدد المضبوط منهم

طبعا يمكنك استبدال الكلمات العربية بكلمات بلغة اخرى ان كانت مدونتك بلغة مختلفة

المظهر

هذه الخاصة كما قلت تظهر مسار وهذا المسار يظهر في الموقع ان أعجبك وجوده يمكنك أن تنسقه كما تشاء لكن شخصيا أفضل اخفاءه وهذا كود مناسب للإخفاء أضفه فوق الوسم ]]></b:skin>

.breadcrumbs {display: block;height: 0;margin: 0;opacity: 0;overflow: hidden;padding: 0;visibility: hidden;width: 0;}

تم التحديث بتاريخ 20/2/2020

كن مدون : موقع متخصص في تطوير منصة بلوجر