لقد أوضحنا لك مؤخرًا كيفية تصميم نموذج تعليق ووردبريس ، واعتقدنا أنه سيكون غير مكتمل إذا لم نكتب عن تصميم تخطيط تعليقات ووردبريس. في الماضي ، ناقشنا أن هناك فئات CSS ومعرفات افتراضية تم إنشاؤها في ووردبريس للمساعدة في تسهيل تصميم القوالب الخاصة بهم على مصممي السمات. في هذه المقالة ، سنستخدم هذه الفئات الافتراضية لنوضح لك كيفية تصميم تخطيط تعليقات ووردبريس الخاص بك وبعض الأشياء الرائعة التي يمكنك القيام بها باستخدامه.
من أجل هذا المثال ، سنقوم بتعديل قالب Twenty Twelve ووردبريس الافتراضي في هذه المقالة. ملاحظة: هذه المقالة مخصصة لبدء مصممي السمات ومستخدمي DIY الذين لديهم فهم جيد لـ HTML و CSS.
بشكل افتراضي ، ينشئ ووردبريس هذه الفئات للعناصر في قالب التعليقات:
/*Comment Output*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}قبل أن ننتقل إلى تصميم تخطيط تعليقات ووردبريس ، نصيحة صغيرة لمستخدمينا الجدد. تأتي متصفحات الويب Google Chrome و Mozilla Firefox مزودة بأداة يدوية يمكنك استخدامها لتحسين مهارات تطوير موضوع ووردبريس. الأداة تسمى Inspect Element. ما عليك سوى نقل الماوس إلى عنصر ما على صفحة الويب ، والنقر بزر الماوس الأيمن واختيار فحص العنصر. سيتم تقسيم نافذة المتصفح إلى صفين وفي النافذة السفلية سترى الكود المصدري لهذا العنصر. أيضًا في النافذة السفلية ، ستتمكن من رؤية عناصر CSS وكيفية تصميمها. يمكنك حتى تحرير CSS هناك لأغراض الاختبار. من المهم أن تتذكر أن أي شيء تقوم بتغييره باستخدام Inspect Element يكون مرئيًا لك فقط. بمجرد تحديث الصفحة ، ستختفي هذه التغييرات. لجعل التغييرات دائمة ، يجب عليك استخدام ملف style.css الخاص بك أو ملفات أخرى مناسبة في السمات الخاصة بك.
افحص العنصر في Google Chrome لإلقاء نظرة على شفرة المصدر والعثور بسرعة على قواعد CSS المطابقة
إن وجود لون خلفية مختلف للتعليقات الفردية والزوجية هو اتجاه تصميم كان موجودًا منذ عدة سنوات حتى الآن. إنه يساعد على القراءة بشكل خاص إذا كان لديك الكثير من التعليقات. يبدو أيضًا جيدًا حقًا مع ألوان سمات معينة وهذا هو سبب رغبة العديد من المصممين في استخدام هذه الوظيفة. لمساعدة المصممين على تحقيق هذا الهدف ، يضيف ووردبريس فئة فردية وزوجية لكل تعليق على التوالي.
يمكنك بسهولة إضافة النمط الفردي / الزوجي للتعليقات في style.css لموضوعك عن طريق لصق الكود التالي.
.commentlist .even .comment {
background-color:#ccddf2;
}
.commentlist .odd .comment {
background-color:#CCCCCC;
}ستبدو النتيجة كما يلي:
استخدام CSS لإضافة ألوان بديلة للتعليقات الفردية والزوجية في ووردبريس
يضيف ووردبريس أيضًا فئات إلى العناصر المعروضة في كل رأس تعليق. يتيح ذلك لمصممي السمات تخصيص عرض معلومات المؤلف وبيانات التعليقات الأخرى مثل تاريخ التعليق ووقته. إليك عينة من التعليمات البرمجية للصقها في ملف style.css الخاص بالقالب الخاص بك لتصميم هذه العناصر بشكل مختلف. في هذا المثال ، أضفنا لون الخلفية للتعليق الفوقية مع بعض المسافات.
.comments-area article header {
margin: 0 0 48px;
overflow: hidden;
position: relative;
background-color:#55737D;
color:#FFFFFF;
padding: 10px;
}هكذا يجب أن تبدو كما يلي:
تصميم وصف التعليقات ومعلومات المؤلف في تعليقات ووردبريس
في كثير من الأحيان قد ترى أن تعليقات كاتب المنشور يتم تمييزها إما بلون خلفية مختلف أو بشارة إضافية. يضيف ووردبريس فئة افتراضية bypostauthorإلى جميع التعليقات التي أدلى بها كاتب المنشور. يمكن لمصممي قوالب ووردبريس استخدام هذه الفئة لتصميم تعليقات المؤلف بطريقة مختلفة.
تستخدم بعض السمات وظيفة رد الاتصال الخاصة بها لعرض التعليقات. باستخدام وظيفة رد الاتصال ، قد تضيف هذه السمات معلومات إضافية إلى تعليق بواسطة مؤلف المنشور. على سبيل المثال ، يستخدم Twenty Twelve السطر التالي في وظيفة رد الاتصال للتعليق twentytwelve_comment()(الموجودة في functions.phpملف السمة).
// If current post author is also comment author, make it known visually.
( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );يضيف هذا الرمز <span>Post Author</span>إلى معلومات التعليق الوصفية. اعتمادًا على كيفية تعامل سمة ووردبريس الخاصة بك مع التعليقات بواسطة مؤلف المنشور ، يمكنك تعديل ذلك إلى أي شيء تريده.
إذا كنت تستخدم موضوعًا مختلفًا عن Twenty Twelve ، فأنت بحاجة إلى معرفة كيفية تعامل السمة الخاصة بك مع التعليقات. ببساطة افتح comments.phpملف المظهر الخاص بك . إذا كان قالبك يستخدم وظيفة رد الاتصال الخاصة به ، فسترى ذلك داخل wp_list_commentsالوظيفة ، مثل هذا:
<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>في المثال أعلاه ، يمكنك أن ترى أن السمة تستخدم twentytwelve_commentكوظيفة رد الاتصال. إذا تم تحديد وظيفة رد الاتصال ، فإن الموقع الأكثر احتمالا للعثور على هذه الوظيفة هو ملف jobs.php الخاص بالقالب.
في هذا المثال ، نقوم بتغيير هذه الوظيفة لعرض محرر بدلاً من كاتب المشاركة. للقيام بذلك ، قمنا بتعديل وظيفة رد الاتصال على النحو التالي:
// If current post author is also comment author, make it known visually.
( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');سنقوم أيضًا بتعديل الطريقة التي يبدو بها عن طريق إضافة ما يلي في ملف style.css الخاص بالسمات الخاصة بنا مثل هذا:
li.bypostauthor cite span {
color: #21759b;
background-color: #f8f0cb;
background-image: none;
border: 1px solid #f8f0cb;
border-radius: 3px;
box-shadow: none;
padding: 3px;
font-weight:bold;
}هكذا ستبدو:
تصميم تعليقات aurhor بشكل مختلف في تعليقات ووردبريس
تحتوي معظم سمات ووردبريس على رابط رد أسفل كل تعليق. يتم عرض هذه الوظيفة فقط إذا قمت بتمكين التعليقات المترابطة. لتمكين التعليقات المترابطة ، انتقل إلى مسؤول ووردبريس الخاص بك ( الإعدادات »مناقشة ). انظر إلى القسم الذي يشير إلى إعدادات التعليقات الأخرى ، وحدد المربع لتمكين التعليقات المترابطة (المتداخلة).
فئات CSS الافتراضية التي تم إنشاؤها بواسطة ووردبريس لرابط الرد هي replyو comment-reply-link. سنستخدم هذه الفئات لتعديل رابط الرد وتحويله إلى زر CSS.
.reply {
float:right;
margin:0 10px 10px 0;
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}
.comment article {
padding-bottom:2.79rem;
}
a.comment-reply-link,
a.comment-edit-link {
color: #FFFFFF;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
text-decoration:none;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
color: #f6e7d7;
}هكذا ستبدو:
تنسيق زر الرد على التعليقات في تعليقات ووردبريس باستخدام CSS
في معظم قوالب ووردبريس ، يمكن للمستخدمين الذين قاموا بتسجيل الدخول ولديهم القدرة على تحرير التعليقات رؤية رابط تحرير التعليق أسفل كل تعليق. إليك القليل من CSS الذي يستخدم الفئة الافتراضية comment-edit-linkلتعديل مظهر الرابط.
a.comment-edit-link {
float:left;
margin:0 0 10px 10px;
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
box-shadow: 1px 1px 2px 2px #4f4f4f;
}إليك كيف ستبدو:
استخدام CSS لتصميم رابط تحرير التعليق في تعليقات ووردبريس
في معظم سمات ووردبريس الجيدة ، يؤدي النقر فوق رابط “رد” إلى فتح نموذج التعليق أسفل التعليق الذي ترد عليه مباشرةً برابط لإلغاء الرد على التعليق. يتيح تعديل ارتباط إلغاء الرد على التعليق هذا باستخدام معرف CSS الافتراضي cancel-comment-reply.
#cancel-comment-reply-link {
text-align:center;
background-color: #55737D;
border:1px solid #55737D;
border-radius:3px;
padding:3px;
width:50px;
color:#FFFFFF;
box-shadow: 1px 1px 2px 2px #4f4f4f;
text-decoration:none;
}إليك كيف ستبدو:
تصميم رابط إلغاء التعليق الرد في نموذج الرد على تعليق ووردبريس
تشجع نماذج التعليقات القابلة للاستخدام والممتعة من الناحية الجمالية والأنيقة المستخدمين على ترك تعليق على مدونتك. لقد كتبنا سابقًا مقالًا تفصيليًا حول كيفية تصميم نموذج تعليق ووردبريس . نوصي بشدة بالذهاب للتحقق من ذلك لمعرفة كيف يمكنك نقل نموذج تعليق ووردبريس الخاص بك إلى المستوى التالي.
نأمل أن تساعدك هذه المقالة في تصميم تخطيط تعليقات ووردبريس الخاص بك. إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في إخبارنا من خلال ترك تعليق أدناه.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
