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

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

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

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

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

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

ترقيم ذكي

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

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

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

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

أكواد نظيفة

الكود نظيف ولا يحتوي على أي أكواد ضارة بموقعك ولا أكواد حماية.

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

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

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

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

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

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

السكربت

<script src='https://cdn.jsdelivr.net/gh/codatey/cdt-pagination@1.2.2/dist/cdt-pagination.min.js'/>

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

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

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

الشكل الأول

<style>
/*<![CDATA[*/
#blog-pager.active{overflow:hidden;font-size:14px}
#blog-pager.active span{float:right;line-height:35px;transition:all .3s ease}
#blog-pager span.showPageOf{font-size:12px;color:#757575;margin-left:10px}
#blog-pager span.pageNum{width:35px;background:#eee;text-align:center;border-radius:50%;margin-left:3px}
#blog-pager span.pageNum:not(.current):not(.delimiter):hover{background:#d6d6d6}
#blog-pager span.pageNum a{display:block;color:#545454}
#blog-pager span.pageNum.current{background:#d33;color:#fff}
/*]]>*/
</style>

الشكل الثاني

يتم إستعمال أيقونات "font-awesome" في هذا الشكل، لذلك تم تضمينها في الكود المستعمل.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<style>
/*<![CDATA[*/
#blog-pager.active{font-size:0}
#blog-pager.active span{display:inline-block;white-space:nowrap;font-size:1rem;line-height:35px;margin-left:5px}
#blog-pager span.showPageOf{margin-left:15px;font-size:14px;color:#666}
#blog-pager span.pageNum{background:#fff;border-radius:3px;text-align:center;box-shadow:0 0 0 1px #f0f0f0}
#blog-pager span.pageNum.current{background:#2196F3;color:#fefefe;cursor:default;padding:0 10px}
#blog-pager span.pageNum a{color:#757575;display:block;padding:0 10px}
#blog-pager span.pageNum a:hover{color:#545454;background:#f0f0f0}
#blog-pager span.inStyle{cursor:default;padding:0 5px}
/*]]>*/
</style>
<script>
/*<![CDATA[*/
var paginationConfig = {
  showFirstPage: true,
  showLastPage: true,
  showNav: true,
  text_prev: "<i class='fa fa-angle-right'></i>",
  text_next: "<i class='fa fa-angle-left'></i>",
  text_lastPage: "<i class='fa fa-angle-double-left'></i>",
  text_firstPage: "<i class='fa fa-angle-double-right'></i>"
}
/*]]>*/
</script>

الشكل الثالث

<style>
/*<![CDATA[*/
#blog-pager.active{display:table;border:1px solid #e4e4e4;border-radius:3px;background:#fff}
#blog-pager.active span{display:table-cell;vertical-align:middle;line-height:35px;border-left:1px solid #eee}
#blog-pager span.showPageOf,#blog-pager span.straight,#blog-pager span.navButton{font-size:14px}
#blog-pager span.showPageOf{padding:0 10px}
#blog-pager span.inStyle{padding:0 10px}
#blog-pager span.delimiter{padding:0 8px}
#blog-pager span.current{background:#34c374;color:#fff}
#blog-pager span.pageNum{border-left:1px solid #eee}
#blog-pager span.pageNum:last-child{border-left:0}
#blog-pager span.pageNum a{display:block;padding:0 10px;color:#696d72}
#blog-pager span.pageNum a:hover{background:#fafafa;color:#000}
/*]]>*/
</style>
<script>
/*<![CDATA[*/
var paginationConfig = {
  showPageOf: false,
  showLastPage: true,
  showNav: true
}
/*]]>*/
</script>

شرح تخصيص الإضافة

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

var paginationConfig = {
  perPage: 10,
  showNav: true,
  text_next: "الصفحة الموالية",
};

في هذا المثال قمنا بتحديد 3 إعدادات هي perPage و showNav و text_next، كل إعداد والوظيفة التي يقوم بها. ستجد كل الإعدادات وشرحها في الأسفل.

الإعدادات

يصعب التعامل مع الجداول في بلوجر، لذلك ستجدون الإعدادات على جيت هاب

وفي الختام

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

يمكنكم زيارة صفحة السكربت على جيت هاب

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