تأجيل تحميل صندوق التعليق أسفل مواضيع مدونة بلوجر

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

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

تأجيل تحميل صندوق التعليق الموجود أسفل مواضيع مدونة بلوجر

ماهو صندوق تعليقات بلوجر ؟

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

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

أضرار صندوق تعليقات بلوجر

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

أهمية خاصية تأجيل تحميل التعليقات ؟

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

الخاصية التي سنشرحها هي عبارة عن خاصية ستجعل صندوق التعليق لا يُحَمَّل حتى يصل إليه الزائر عبر التمرير.

لن يُحَمَّل صندوق التعليق ما دام لم يظهر على الشاشة، وبالتالي التحميل الأولي لصفحة FID سيكون أسرع لأن صندوق التعليق لا يظهر إلا بعد التمرير والوصول إليه أسفل الصفحة.

كيفية إضافة خاصية تأجيل تحميل صندوق التعليقات إلى قالب بلوجر

الطريقة الأولى

1. قم بالبحث عن <iframe في قالب بلوجر إذا وجدتها مكررة فالثانية هي المقصودة، قم بحذف الرمز src إذا وجدته، كما هو موضح في الصورة.

2. قم بحذف الكود المعلم بالأصفر وضع مكانه الكود التالي.

<div id='lazyCommentsScript'>
&lt;!--
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
          BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
        </script>
--&gt;
</div>

3. قم بإضافة الكود التالي فوق العنصر </body>.

  <script>
//<![CDATA[
$("#comments").each(function() {
    var t = $(this),
        o = $(window);
    o.on("scroll", function c() {
        if (o.scrollTop() + window.innerHeight > t.offset().top) {
            var e = $("#lazyCommentsScript");
            if (e.length) {
                var n = e.html(),
                    r = n.match(/https:\/\/.*?post_iframe\.js/g),
                    f = n.match(/(?<=BLOG_CMT_createIframe\(.).*?(?=.\))/g);
                $.getScript(r, function() {
                    BLOG_CMT_createIframe(f)
                })
            }
            o.off("scroll", c)
        }
    })
});
//]]>
</script>

الطريقة الثانية

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

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

الطريقة الثانية تعتمد كذلك على حذف src من iframe صندوق التعليق، وكذلك استبدال HTML المعلم بالأصفر بالكود الموجود فوق، لذلك طبق العملية رقم 1 و 2 من الطريقة الأولى.

قم الآن بإضافة سكريبت زر تشغيل صندوق التعليق أسفل body .

<script>
//<![CDATA[
function actvce() {
    var t = $("#lazyCommentsScript");
    if (t.length) {
        var c = t.html(),
            e = c.match(/https:\/\/.*?post_iframe\.js/g),
            a = c.match(/(?<=BLOG_CMT_createIframe\(.).*?(?=.\))/g);
        $.getScript(e, function() {
            BLOG_CMT_createIframe(a)
        })
    }
}
$("#comments").each(function() {
    var t = $(this).find(".comment-form");
    t.hide();
    var c = $("<a href='javascript:;' class='ShowEditComment'>إرسال تعليق</a>");
    c.click(function() {
        $(this).hide(), actvce(), t.show()
    }), c.insertBefore(t)
});
//]]>
</script>

الآن قم بإضافة CSS زر تشغيل صندوق التعليق أسفل b:skin.

.ShowEditComment{
display:flex;
flex-direction:row;
justify-content:center;
color:#000;
background-color:#f9f9f9;
padding:5px 0;
box-shadow: 0 0 2px #aaa;
border-radius:3px;
width:100%;
height:auto;
}

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

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