ترقيم صفحات بلوجر بطريقة احترافيه 2020

الاثنين، 9 مارس 2020

ترقيم صفحات بلوجر بطريقة احترافيه 2020

mohamedelafndey مارس 09, 2020 0 تعليق

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

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

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

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

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

ترقيم ذكي

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

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

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

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

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

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

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

سيتم تقسيم تركيب الإضافة إلى قسمين، الأول تركيب سكربت الإضافة (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>

وفي الختام

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

تفاصيل التدوينة

كاتب الموضوع : mohamedelafndey

mohamedelafndey

محمد محمود الافندي , مدون عربي اعشق التدوين وعالم البرمجيات بشكل عام وتبسيط المعلومه وثوف اشارك معكم كل ماهو جديد فقط انتظرونا..

إظهار التعليقات

44

الاثنين، 9 مارس 2020