إضافات بلوجر, بلوجر, سكربت

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

25 نوفمبر 2019
تركيب إضافة ترقيم الصفحات

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

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

مميزات السكربت

يعمل في كل الحالات

السكربت القديم الذي يُستعمل في أغلبية مدونات بلوجر إن لم أقل كلها، لا يعمل في صفحات التصنيفات إذا لم يتم إضافة ?&max-results= إلى الرابط، وهذا مزعج جدا لأصحاب المدونات لأنهم مجبرون على إضافة هذا المُعلِّم إلى روابط صفحاتهم رغما عنهم، وهم يعلمون أنه ضار لظهور صفحاتهم على محركات البحث، قمت بمعالجة هذه المشكلة والسكربت الآن يعمل على صفحات التصنيفات بدون إضافة أية شيء مُعلِّم للرابط.

ترقيم ذكي

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

سهل التركيب والتخصيص

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

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

مفتوح المصدر

يعلم الكثير من متابعي المدونة أنني مهووس بتشفير أكواد الجافاسكربت، وهذا طبعا شئ لا أفخر به، لكن هذه المرة تركت السكربت مفتوح المصدر، حيث يمكن لأي شخص تطويره وتغيير ما يريد به، ستجدون الكود الأصلي في موقع جيت هاب (github)، وسأترك الرابط في أسفل التدوينة.

قابل للتطوير

مازالت لدي بعض الأفكار للإضافة وسأقوم بمشيئة الله بتطويره عندما يكون لدي وقت فراغ وحافز للقيام بذلك.

تركيب الإضافة

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

سيتم تقسيم تركيب الإضافة إلى قسمين، الأول تركيب سكربت الإضافة (javascript)، و الثاني تركيب شكل الإضافة (css).

تركيب السكربت

يمكنك وضع السكربت في أي مكان أسفل أداة أزرار التنقل، وكلما كان أقرب لها سيبدأ العمل أسرع، إذا لم تعرف أين ستضعه بالظبط يمكنك فقط وضعه أسفل القالب، فوق </body> ، قم بالبحث عن الوسم </body> (أسفل القالب) وضعه فوقه مباشرة.

ضع الكود فوق </body>

السكربت

<script>
//<![CDATA[
var paginationConfig = {
  text: {
    page: "الصفحة",
    of : "من"
  },
  perPage: 8
};
//]]>
</script>
<script src='https://cdn.jsdelivr.net/gh/codatey/cdt-paginaton@1.1.0/dist/cdt-pagination.min.js'/>

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

إذا لم تكن ستغير أي من الإعدادات الثلاثة (الصفحة، من ، 8)، يمكنك إزالة السكربت الأول وترك فقط السكربت الثاني لأنه يستعمل نفس الإعدادات، يمكنك إستعمال هذا فقط:
<script src='https://cdn.jsdelivr.net/gh/codatey/cdt-paginaton@1.1.0/dist/cdt-pagination.min.js'/>

تركيب شكل الإضافة

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

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

عند إختيار الشكل الذي تريده ضع الكود الخاص به فوق الوسم </head> ، يمكنك بإستعمال أداة البحث ctrl+f، بإيجاده بسرعة.

ضع الكود فوق </head>

الشكل الأول

شكل أداة ترقيم الصفحات الأول
<style>
#blog-pager{padding:13px 0}#blog-pager span{display:inline-block;margin-left:5px;line-height:40px;white-space:nowrap;transition:all .3s ease}#blog-pager .showPageOf{font-size:14px;color:#757575;margin-left:15px}#blog-pager .pageNum{background:#eee;width:40px;text-align:center;border-radius:50%}#blog-pager .pageNum a{display:block;color:#545454}#blog-pager .pageNum.current{background:#d33;color:#fefefe;cursor:default}#blog-pager .pageNum.delimiter{background:none;cursor:default;width:auto}#blog-pager .pageNum:not(.current):not(.delimiter):hover{background:#d6d6d6}
</style>

الشكل الثاني

شكل أداة ترقيم الصفحات الثاني
<style>
#blog-pager{border:1px solid #e8eaed;overflow:hidden;float:right;margin:13px 0}#blog-pager span{display:block;white-space:nowrap;float:right;transition:all .3s ease;line-height:40px;border-left:1px solid #e8eaed}#blog-pager span:last-child{border:0}#blog-pager .showPageOf{padding:0 13px;font-size:14px;color:#606060;cursor:default}#blog-pager .pageNum a,#blog-pager .pageNum.current,#blog-pager .pageNum.delimiter{padding:0 13px;display:block}#blog-pager .pageNum a{color:#2788ff}#blog-pager .pageNum.current{cursor:default;background:#007aff;color:#fefefe}#blog-pager .pageNum.delimiter{cursor:default}#blog-pager .pageNum:not(.current):not(.delimiter):hover{background:#fafafa}
</style>

الشكل الثالث

شكل أداة ترقيم الصفحات الثالث
<style>
#blog-pager{margin:13px 0;overflow:hidden}#blog-pager .showPageOf{display:none}#blog-pager .pageNum{float:right}#blog-pager .pageNum a,#blog-pager .pageNum.current{display:block}#blog-pager .pageNum a,#blog-pager .pageNum.current,#blog-pager .pageNum.delimiter{padding:.25em .7em;display:block;transition:all .3s ease;text-align:center;margin-left:5px;color:#888;border:1px solid #eee;border-radius:3px}#blog-pager .pageNum.current{cursor:default;background:#32c374;color:#fff}#blog-pager .pageNum.delimiter{cursor:default}#blog-pager .pageNum:not(.current):not(.delimiter):hover a{border-color:#999}
</style>

وفي الختام

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

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

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

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

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

      حذف