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

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

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

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

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

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

ترقيم ذكي

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

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

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

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

مفتوح المصدر

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

قابل للتطوير

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

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

أولا وقبل كل شيء، قم بأخذ نسخة إحتياطية من القالب للإحتياط.

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

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

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

يمكنك وضع السكربت في أي مكان أسفل أداة أزرار التنقل، وكلما كان أقرب لها سيبدأ العمل أسرع، إذا لم تعرف أين ستضعه بالظبط يمكنك فقط وضعه أسفل القالب، فوق </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، بإيجاده بسرعة.

الشكل الأول

<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>

وفي الختام

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

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