إنشاء موقع لمراجعة المنتج باستخدام إضافي - الجزء 4

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

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

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

فيما يلي نظرة خاطفة على ما سنبنيه

هيا بنا نبدأ.

إنشاء موقع لمراجعة المنتج باستخدام إضافي - الجزء 4

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

بناء صفحة الفئة الافتراضية

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

لتخصيص تخطيط الفئة الافتراضي الخاص بنا ، انتقل إلى لوحة معلومات Wordpress وانتقل إلى Extra> Category Builder. ثم مرر مؤشر الماوس فوق "الفئة الافتراضية" وانقر على رابط التعديل.

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

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

احفظ المخرج

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

الآن من أجل تصميم عنوان صفحة الفئة الخاصة بك h1 ، تحتاج إلى إضافة CSS المخصص التالي إلى CSS الإضافي في مُخصص القوالب. تأكد من وضعه داخل استعلام وسائط بحد أدنى للعرض يبلغ 980 بكسل.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

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

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

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

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

يمكننا الآن البدء في إضافة عناصر القائمة إلى قائمتنا. انقر فوق تبديل الفئات على يسار الصفحة. في الخيارات التي تظهر ، حدد "عرض الكل" للتأكد من أنه يمكنك رؤية جميع الفئات المتاحة. تحقق من جميع الفئات الخمس التي قمت بإنشائها (ليست غير مصنفة) وانقر فوق الزر "إضافة إلى القائمة" لإضافتها إلى قسم هيكل القائمة على يمين الصفحة. يمكنك الآن النقر فوق كل عنصر من عناصر القائمة وسحبه ليتم عرضه بالترتيب التالي:

• إلكتروني
• ملابس
• مطبخ
• الصحة واللياقة البدنية
• جميع الفئات

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

ارجع إلى قائمتك. بدءًا من عنصر قائمة فئة الإلكترونيات ، انقر للتبديل لفتح خيارات التكوين. في مربع CSS Classes ، أضف فئة باسم "green". وللحصول على خيار Extra Mega Menu ، حدد "Mega Menu 3 Featured".

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

بالنسبة لعنصر قائمة فئة الملابس ، أضف الفئة "أزرق" وحدد خيار "قائمة ميجا 3 المميزة" .

بالنسبة لعنصر قائمة فئة المطبخ ، أضف الفئة "pink" وحدد الخيار "Mega Menu 3 Featured" .

بالنسبة لعنصر قائمة فئة الصحة واللياقة البدنية ، أضف الفئة "أرجواني" وحدد خيار "قائمة ميجا 3 المميزة" .

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

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

بدّل خيارات التكوين لكل عنصر من عناصر قائمة الفئات هذه وأضف نفس فئات CSS إلى كل منها كما فعلت سابقًا. فيما يلي الفئات مع الفصل الذي تريد إضافته:

إلكترونيات - أخضر
ملابس - أزرق
المطبخ - وردي
الصحة واللياقة البدنية - بنفسجي

بعد ذلك ، سنضيف صورتنا المخصصة لتكون بمثابة صورة فئة مميزة لكل فئة في القائمة الضخمة.

استخدم محرر صور لتقليص كل صورة واقتصاصها بحيث يكون عرضها 500 بكسل وارتفاعها 300 بكسل.

قم بإضافتها / سحبها إلى مكتبة وسائط WordPress.

عد الآن إلى صفحة القوائم في WordPress Admin.

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

<img src="Insert Image Url" width="100%" />

للعثور على عنوان url للصورة ، انتقل إلى Media → Library. انقر فوق الصورة التي تريد إضافتها. في الشاشة المنبثقة تفاصيل المرفقات ، ابحث عن عنوان url في القسم الموجود على اليسار ، وقم بتمييزه ، ثم استخدم ctrl + c لنسخه إلى الحافظة الخاصة بك.

عد الآن إلى تكوين عنصر قائمة "إلكترونيات" في صفحة القائمة واستبدل النص "إدراج عنوان URL للصورة" عن طريق لصق عنوان url الخاص بصورتك باستخدام ctrl + v.

كرر نفس العملية لعناصر قائمة الفئات الثلاثة التالية.

بمجرد إضافة جميع علامات الصور الأربع إلى كل عنصر من عناصر قائمة الفئات ، حان الوقت لإضافة عناصر قائمة منشوراتك الفردية (روابط لمراجعات منتجك) ضمن كل فئة من فئاتها.

انقر للتبديل لفتح مربع المنشورات على اليسار وحدد علامة التبويب "عرض الكل". ثم حدد كل منتجاتك الـ 12 وانقر فوق "إضافة إلى القائمة". ثم اسحب كل عنصر من عناصر قائمة المشاركة بمستوى واحد تحت كل فئة من فئاتها.

حفظ القائمة

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

انتقل إلى Theme Customizer> CSS إضافي وأدخل CSS التالي:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

احفظ وانشر الإعدادات الخاصة بك.

الآن دعنا نتحقق من قائمتنا الجديدة. لاحظ ألوان عناصر القائمة وأنت تحوم فوقها. تتطابق الألوان مع لون الفئة المقابل لها.

بناء التذييل

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

نحتاج أولاً إلى الانتقال إلى Theme Customizer> Footer Settings. ثم انقر فوق تخطيط وحدد تخطيط عمودين.

ارجع وحدد الطباعة وقم بتحديث ما يلي:

حجم نص العنوان: 32
حجم النص الأساسي / الرابط: 16
لون نص الأداة: rgba (255،255،255،0.6)
لون ارتباط الأداة: #ffffff
القطعة عنوان اللون: #ffffff

حفظ ونشر

ارجع إلى القائمة الرئيسية لـ Theme Customizer وحدد Widgets. ثم حدد Footer Sidebar Left وانقر فوق الزر Add a Widget. حدد الأداة الإضافية - المراجعات الأخيرة

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

انتقل إلى قسم CSS الإضافي وأضف CSS المخصص التالي لتذييل الصفحة.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

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

هذا كل شيء. لقد أنهيت الجزء 4 بنجاح وأكملت سلسلة إنشاء موقع لمراجعة المنتج باستخدام Extra.

النهائي CSS

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

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
comment box background
*****************************/
#comment-wrap {
padding: 75px 40px;
background: #fff;
border-radius: 3px;
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

/***************************
Post Header Size
****************************/
h1.entry-title {
font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
text-align: center;
padding-bottom: 0px;
}
.fancy span {
display: inline-block;
position: relative;
line-height: 1.3em;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 4px solid #333;
border-top: 4px solid #333;
top: 40%;
width: 100%;
max-width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title {
display: block;
font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

تغليف

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

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

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