اضافة أداة المشاركات ذات الصلة في المقالات لقالب بلوجر

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

قد تتساءل عن كيفية إضافة مقالات ذات صلة تلقائيًا في منتصف المقال في بلوجر؟

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

من الأفضل تجربة هذه الأداة على مدونة تجريبية أولاً. لقد كنت أستخدم هذه الأداة مؤخرًا في قالب بلوجر الخاص بي. تذكر أنه إذا كانت مدونتك جديدة ولديها عدد قليل من المقالات، فقد لا تعمل أداة المشاركات ذات الصلة بشكل صحيح. لذلك، تأكد من أن المدونة تحتوي على عدد كافٍ من المقالات تحت كل فئة أو تسمية لتعمل الأداة بسلاسة.

تم اختبار هذا البرنامج النصي في قالب بلوجر الافتراضي Contempo وهو يعمل بشكل جيد، ولكن في حالة عدم عمل البرنامج النصي مع قالبك، فلا تقلق فقط قم بالتعليق بالمشكلة.

إذا كنت تريد معرفة كيفية دمج أداة المشاركات ذات الصلة في منتصف مقالك بناءً على فئات المقالات أو كيفية تضمين مشاركات ذات صلة داخل المقال في موقع بلوجر، فإن هذا البرنامج التعليمي مناسب لك. علاوة على ذلك، ستساعدك هذه الأداة على تقليل معدل الارتداد.

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

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

الميزات الرئيسية لأداة المشاركات ذات الصلة داخل المقال

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

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

على الرغم من وجود العديد من الأدوات المشابهة المتاحة اليوم، فإن أداة المشاركات ذات الصلة داخل المقال هي واحدة من أكثر الأدوات غنية بالميزات، حيث تدعم أنواع المقالات المخصصة وأنماط CSS. سيظهر هذا المحتوى ذو الصلة دون إجهاد موقعك.

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

فيما يلي قائمة بالمزايا التي ستحصل عليها:

• تلقائي: عند تمكين أداة المشاركات ذات الصلة داخل المقال أو السياقية، ستبدأ في عرض المشاركات ذات الصلة تلقائيًا على موقعك وفي منتصف المقال. لا حاجة لتعديل البرامج النصية.
• التثبيت اليدوي: هل تريد المزيد من التحكم في مكان وضع الأداة؟ يمكن وضع هذه الأداة بين فقرات المقال باستخدام العلامة <br> ومع ذلك، لا حاجة لأي إجراء يدوي لإضافة شيء.
• الأنماط: يتم تجميع المخرجات في فئات CSS، مما يسمح لك بتصميم القائمة بسهولة. يمكنك استخدام النمط المضمن أو إدخال أنماط CSS مخصصة من قسم تحرير HTML.
• بدون تمرير: ستظهر الأداة في منتصف المقال، لذا لا يحتاج القراء إلى التمرير لأسفل.
• التحكم في معدل الارتداد: ستقلل من معدل الارتداد، مما سيجعل درجة SEO الخاصة بك أفضل في محركات البحث.
• شبه متجاوب: إذا كنت تستخدم قالب بلوجر متجاوب، فستتكيف الأداة مع حجم عرض المقال. ولكن في القوالب غير المتجاوبة لن تتمكن من التكيف مع عرض الموقع.

كيفة إضافة مقالات ذات صلة داخل المقال في بلوجر؟

الخطوات التالية بسيطة وسهلة المتابعة عند إجراء تغييرات على قالب بلوجر الخاص بك.

إضافة CSS الأساسي وجافا سكريبت إلى الرأس

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

قبل المتابعة، نوصي بعمل نسخة احتياطية من قالب بلوجر الخاص بك. يمكنك تعلم كيفية إنشاء نسخة احتياطية من قالب بلوجر بشكل صحيح.

الخطوة 1: بعد إنشاء نسخة احتياطية من قالب بلوجر الخاص بك، انتقل إلى لوحة تحكم بلوجر. ثم انتقل إلى القالب → تحرير HTML لفتح محرر قالب بلوجر.

الخطوة 2: يجب تضمين جميع أكواد CSS المذكورة أدناه قبل العلامة ]]></b:skin> داخل القالب. يجب أن تكون الإضافة بنفس الترتيب كما هي موضحة أدناه.

/*  بداية أداة المشاركات ذات الصلة بواسطة اوعي وشك  */
.bspostRelatedIn {
    text-align: left;
    padding: 15px;
    margin: 30px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 15px;
    position: relative;
}
#bspostRelatedIn_title {
    font-size: 16px;
    margin: 0;
    display: inline-block;
    padding: 0 10px;
    position: absolute;
    top: -14px;
    left: 10px;
    background-color: #fefefe;
    color: #7d7d7d;
}
.bspostRelatedIn ul {
    list-style: none;
    padding: 3px 22px 0;
}
.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: disc;
}
.bspostRelatedIn li:hover {
    text-decoration: underline;
}
/* نهاية أداة المشاركات ذات الصلة بواسطة اوعي وشك */
    

كما ذكرنا سابقًا، يمكن تعديل قواعد CSS هذه بسهولة وتمديدها لتغيير تصميم وتخطيط إدخالات المشاركات ذات الصلة. إذا لم تكن معتادًا على CSS، احتفظ بالقواعد الأصلية كما هي.

لتعديل نمط القائمة، استبدل كود CSS التالي:

 .bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: disc;
}

يمكنك التغيير بأي كود من الخيارات التالية:

النمط 1:

 .bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: circle;
}

النمط 2:

 .bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: decimal;
}

النمط 3:

 .bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: decimal-leading-zero;
}

الخطوة 3: وفوق قواعد CSS هذه، أضف كود JavaScript التالي قبل العلامة </head>. إنه البرنامج النصي الأساسي لجعل قسم المشاركات ذات الصلة يعمل.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// أداة المشاركات ذات الصلة داخل المقال بواسطة اوعي وشك
var bspostRelatedIn = new Array();
var bspostRelatedInNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
        var entry = json.feed.entry[i];
        bspostRelatedIn[bspostRelatedInNum] = entry.title.$t;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                relatedUrls[bspostRelatedInNum] = entry.link[k].href;
                bspostRelatedInNum++;
                break;
            }
        }
    }
}
function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
        if(!contains(tmp, relatedUrls[i])) {
            tmp.length += 1;
            tmp[tmp.length - 1] = relatedUrls[i];
            tmp2.length += 1;
            tmp2[tmp2.length - 1] = bspostRelatedIn[i];
        }
    }
    bspostRelatedIn = tmp2;
    relatedUrls = tmp;
}
function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
}
function printRelatedLabels() {
    var r = Math.floor((bspostRelatedIn.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < bspostRelatedIn.length && i < 3) {
        document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>');
        if (r < bspostRelatedIn.length - 1) {
            r++;
        } else {
            r = 0;
        }
        i++;
    }
    document.write('</ul>');
    let element = document.createElement('a');
    element.href = 'https://www.bloggerspice.com/';
    element.pathname = 'embed' + element.pathname;
    console.log(element.toString());
}
//]]>
</script>
</b:if>
    

الخطوة 4: حان الوقت لإنهاء الخطوة الأخيرة والأكثر أهمية، وهي دمج CSS الأساسي وجافا سكريبت لقسم المشاركات ذات الصلة.

ابحث الآن عن <data:post.body/> واستبدلها بالبرنامج النصي التالي:

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='bspostRelatedIn'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<div id='bspostRelatedIn_title'>اقرأ أيضًا</div>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {
    obj0.innerHTML=s.substr(0,r);
    obj1.innerHTML=s.substr(r+4);
}
</script>
    

الخطوة 5: هذا كل شيء! بعد الخطوات المذكورة أعلاه، انقر على أيقونة الحفظ في الزاوية اليمنى العليا من قالب بلوجر الخاص بك.

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

يرجى تغيير القيمة:

1. من كود JavaScript الأول:  bspostRelatedIn.length && i < 3 
2. من كود JavaScript الثاني:  max-results=3 

الخلاصــة

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

في قالب بلوجر المتجاوب، ستتكيف أداة المشاركات ذات الصلة تلقائيًا. يمكن للمستخدمين المتقدمين تخصيص تصميم هذه الأداة بالكامل. إذا كنت تواجه مشكلة في دمجها، يرجى الاتصال بي وسأبذل قصارى جهدي لمساعدتك.