دليل مفيد حول كيفية أسلوب ترقيم الصفحات في Divi

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

يحتوي Divi على وحدات متعددة تتضمن ترقيم الصفحات (مثل وحدة المعرض) والتي يمكن تصميمها باستخدام الإعدادات المضمنة. ترث بعض هذه الوحدات (مثل المدونة والمحفظة) ترقيم الصفحات الافتراضي لموضوع Divi (أو WordPress) والذي يمكن تبسيطه بشكل مفرط لبعض المواقع. ولكن بمساعدة مكون إضافي ، يمكنك استبدال ترقيم الصفحات لموضوعك بالكامل بواحد أكثر تعقيدًا. ثم يمكنك تصميمه باستخدام CSS كيفما تشاء.

في هذا البرنامج التعليمي ، سأوضح لك كيفية ترقيم الصفحات في جميع أنحاء Divi. إليكم ما سننتقل إليه:

• أشياء يجب مراعاتها عند تصفيف ترقيم الصفحات في Divi
• تصميم وحدة معرض Divi وتقسيم صفحات وحدة الحافظة القابلة للتصفية
• أنماط ترقيم الصفحات المتقدمة لوحدة المعرض ووحدة الحافظة القابلة للتصفية
• تصميم وحدة المدونة ووحدة الحافظة ترقيم الصفحات
• إضافة ترقيم صفحات معقد إلى Divi باستخدام WP-PageNavi Plugin
• تصميم ترقيم الصفحات WP-PageNavi باستخدام CSS مخصص

هيا بنا نبدأ.

نظرة خاطفة

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

ابدء

اشترك في قناتنا على اليوتيوب

في هذا البرنامج التعليمي ، ستحتاج إلى ما يلي:

• موضوع Divi مثبت ونشط.
• لاختبار تصميمات ترقيم الصفحات للوحدات النمطية المختلفة ، ستحتاج إلى بعض المحتوى الوهمي. على سبيل المثال ، لتصميم الحافظة (أو الحافظة القابلة للتصفية) ترقيم الصفحات للوحدة النمطية ، ستحتاج إلى ما يقرب من 12 إلى 16 مشروعًا مضافًا إلى السمة الخاصة بك بحيث يكون لديك محتوى كافٍ للسماح بتطبيق ترقيم الصفحات. بالنسبة لوحدة المعرض ، ستحتاج أيضًا إلى حوالي 12-16 صورة لملء المعرض.
• إذا كنت تريد استخدام WP-PageNavi Plugin ، فستحتاج إلى تثبيت المكون الإضافي وتنشيطه. هذا مكون إضافي مجاني يمكن تنزيله من دليل WordPress من داخل لوحة تحكم WordPress في موقعك. ما عليك سوى الانتقال إلى Plugin> Add New والبحث عن WP-PageNavi.
  

بمجرد أن يكون لديك بعض المحتوى الوهمي ، فأنت على استعداد لإنشاء صفحة جديدة. من لوحة معلومات WordPress الخاصة بك ، انتقل إلى Pages> Add New. امنحك عنوانًا للصفحة وانشر Divi Builder. حدد خيار "البناء من الصفر". ثم انقر فوق إنشاء في الواجهة الأمامية.

أنت الآن جاهز لبدء اختبار بعض تصميمات ترقيم الصفحات.

أشياء يجب مراعاتها عند تصفيف ترقيم الصفحات في Divi

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

خط ترقيم الصفحات

يعد ترقيم الصفحات مكانًا رائعًا للابتعاد عن الخطوط الرئيسية التي تستخدمها لموقعك. تريد اختيار أفضل الخطوط الموجهة نحو واجهات المستخدم والتنقل. ونظرًا لأن ترقيم الصفحات يحتوي في الغالب على أرقام ، فأنت تريد التأكد من أن الخط يعرض جميع الأرقام بارتفاع وعرض متساويين (ما يسميه خبراء الطباعة البطانة والجداول). بعض من المفضلة المحافظة تشمل Oxygen و Nunito Sans و Source Sans Pro. وإذا كان لديك الكثير من الصفحات في ترقيم الصفحات ، فقد تحتاج إلى تحرير بعض المساحة من خلال استخدام خط مكثف مثل Fjalla One أو Roboto Condensed.

نمط خط ترقيم الصفحات

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

تباعد ترقيم الصفحات للرسالة

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

محاذاة نص ترقيم الصفحات

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

مساحة قابلة للنقر

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

حجم نص ترقيم الصفحات

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

ارتفاع خط ترقيم الصفحات

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

ظل نص ترقيم الصفحات

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

صفحة نشطة ترقيم الصفحات

هذا الجانب من ترقيم الصفحات مهم للسماح للمستخدمين بمعرفة الصفحة التي يتصفحونها حاليًا عند التنقل. يجب أن يكون هناك تباين واضح بين نمط ارتباط الصفحة النشط وروابط الصفحة غير النشطة. بشكل افتراضي ، ستستخدم Divi مجموعة ألوان التمييز الأساسية في Theme Customizer كلون رابط الصفحة النشط في Divi. ومع ذلك ، يمكنك تجاوز هذا باستخدام سطر CSS.

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

ولكن بالنسبة إلى ترقيم الصفحات على مستوى الموضوع ، يمكنك الحصول على حل معقد باستخدام المكون الإضافي WP-PageNavi مع CSS المخصص (المزيد حول هذا لاحقًا).

في الوقت الحالي ، لنبدأ بكيفية تصميم ترقيم الصفحات في وحدات Divi.

تصميم وحدة معرض Divi وتقسيم صفحات وحدة الحافظة القابلة للتصفية

مع تنشيط Divi Builder على صفحة جديدة ، قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف وحدة محفظة قابلة للتصفية إلى الصف. كما ذكرنا سابقًا ، تأكد من إنشاء 12-16 مشروعًا حتى تتمكن من رؤية ترقيم الصفحات.

في إعدادات الحافظة القابلة للتصفية ، قم بتحديث ما يلي:

عدد المشاركات: 4 (حتى تتمكن من رؤية المزيد من روابط الصفحات في ترقيم الصفحات)

عنوان العرض: NO
فئات العرض:

بشكل افتراضي ، سيعرض Divi ترقيم الصفحات ، لذا اترك هذا الخيار مضبوطًا على YES.

يجب أن ترى ترقيم الصفحات في أسفل يمين المحفظة.

لتحديد نمط ترقيم الصفحات ، انتقل إلى علامة تبويب التصميم وافتح مفتاح تبديل ترقيم الصفحات لرؤية جميع الخيارات المتاحة. قم بتحديث ما يلي:

التخطيط: الشبكة
خط ترقيم الصفحات: Source Sans Pro
نمط خط ترقيم الصفحات: TT
محاذاة نص ترقيم الصفحات: الوسط
لون نص ترقيم الصفحات: #cccccc
حجم نص ترقيم الصفحات: 4vw (سطح المكتب) ، 38 بكسل (الجهاز اللوحي والهاتف)
تباعد ترقيم الصفحات: 1vw
ارتفاع خط ترقيم الصفحات: 2em

ثم انقر فوق علامة التبويب خيارات متقدمة وأضف مقتطف CSS التالي ضمن Pagination Active Page :

color: #0096eb !important;

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

مقتطفات CSS سريعة أخرى

إليك بعض مقتطفات CSS السريعة والسهلة لتغيير تصميم ترقيم الصفحات.

لإخراج خط الحدود الافتراضي الموجود أعلى ترقيم الصفحات مباشرةً ، يمكنك إدخال CSS التالي ضمن Portfolio Pagination:

border: none;

لمنح ترقيم الصفحات حدًا كاملاً ، يمكنك إدخال CSS التالي ضمن Portfolio Pagination:

border: 2px solid #dddddd;

لمنحك ترقيم الصفحات لون خلفية ، يمكنك إدخال CSS التالي ضمن Portfolio Pagination:

background: #333333;

يعمل أيضًا مع وحدة المعرض

ستعمل إعدادات التصميم نفسها مع وحدة المعرض أيضًا. في الواقع ، يمكنك نسخ أنماط نص ترقيم الصفحات من وحدة الحافظة القابلة للتصفية ولصقها في وحدة المعرض! فقط تأكد من نقل أي مقتطفات CSS أيضًا.

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

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

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

التخطيط: الشبكة
حجم نص ترقيم الصفحات: 16 بكسل
ارتفاع خط ترقيم الصفحات: 2.5em

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية:

فئة CSS: pagi-space

سيسمح هذا بتطبيق CSS الخاص بنا على هذه الوحدة فقط.

الآن احفظ إعداداتك وافتح إعدادات الصفحة المنبثقة. ضمن علامة التبويب خيارات متقدمة ، أضف كود CSS التالي داخل مربع CSS المخصص.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

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

سيعمل هذا الرمز على نمط ترقيم الصفحات لكل من وحدة الحافظة القابلة للتصفية ووحدة المعرض. فقط تأكد من إضافة فئة CSS "pagi-space" إلى الوحدة لتصبح سارية المفعول.

هذه هي النتيجة في وحدة الحافظة القابلة للتصفية.

تصميم وحدة المدونة ووحدة الحافظة ترقيم الصفحات

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

إليك ما يبدو عليه ترقيم الصفحات الافتراضي في صفحة أرشيف المدونة في سمة Divi:

يتم استخدام نفس ترقيم الصفحات بواسطة وحدة المدونة ووحدة المحفظة.

إذا كنت تستخدم وحدة المدونة (أو وحدة الحافظة) ، فيمكنك تصميم نص ترقيم الصفحات باستخدام الإعدادات المضمنة.

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

إضافة ترقيم صفحات معقد إلى Divi باستخدام WP-PageNavi Plugin

إذا كنت تريد ترقيم صفحات أكثر تقدمًا لموضوع Divi بالكامل ، بما في ذلك وحدة المدونة ووحدة المحفظة ، فيمكنك استبدال ترقيم الصفحات الافتراضي في WordPress بواحد مختلف باستخدام المكون الإضافي الشائع المسمى WP-PageNavi. هذا البرنامج المساعد يعمل بشكل جيد مع Divi. التصميم أساسي ولكن يمكن تخصيصه بسهولة باستخدام CSS.

إضافة البرنامج المساعد إلى Divi

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

سيؤثر أيضًا على وحدة المدونة ووحدة الحافظة أيضًا.

إعدادات البرنامج المساعد

يمكنك تحديد موقع إعدادات البرنامج المساعد من لوحة معلومات WordPress الخاصة بك بالانتقال إلى الإعدادات> WP-PageNavi.

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

تصميم ترقيم الصفحات WP-PageNavi باستخدام CSS مخصص

نظرًا لأنك سترغب على الأرجح في تصميم ترقيم الصفحات للموضوع بأكمله ، فمن المنطقي إضافة CSS إلى مُخصص القوالب أو ملف style.css الخاص بالقالب الفرعي. انطلق وقم بوضع CSS التالي في مربع Theme Customizer الإضافي CSS:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

هنا هو النتيجة النهائية.

تصميم WP-PageNavi في وحدة المدونة ووحدة المحفظة

كما ذكرنا سابقًا ، ترث وحدة المدونة ووحدة الحافظة التنقل الافتراضي لصفحة WordPress. نظرًا لأنه تم استبدال هذا مع ترقيم الصفحات المعقد الجديد لـ WP-PageNavi ، ستعرض الوحدات ترقيم الصفحات الجديد أيضًا.

يمكنك استخدام خيارات تصميم نص ترقيم الصفحات المضمنة لإضافة المزيد من التصميم إلى ترقيم الصفحات.

فقط ضع في اعتبارك أن بعض الخيارات قد لا تعمل كما هو متوقع مع وجود CSS مخصص خارجي في مكانه.

افكار اخيرة

لا يجب أن يستمر ترقيم الصفحات في أن يكون فكرة لاحقة عند إنشاء موقع ويب في Divi. هناك بعض الخيارات المضمنة المفيدة للمساعدة في تلك الوحدات التي تستخدم ترقيم الصفحات. وباستخدام بعض CSS المخصص ، يمكنك إنشاء أي نمط تريده. يعد المكون الإضافي WP-PageNavi حلاً أنيقًا لإضافة ترقيم صفحات معقد في جميع أنحاء Divi Theme. فهو لا يعمل بسلاسة مع Divi فحسب ، بل يمنحك خيارات إضافية يمكنك تخصيصها بسهولة. يتطلب تصميم ترقيم الصفحات WP-PageNavi بعض CSS ، ولكن نأمل أن يضعك القالب المستخدم في هذه المقالة على المسار الصحيح.

تم تصميم الأمثلة في هذا المنشور ببساطة عن قصد.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!