چگونه می توان طرح بندی نظرات وردپرس خود را سبک کرد

اخیراً ما به شما نشان دادیم نحوه سبک دادن به فرم نظرات وردپرس ، و ما فکر کردیم اگر در مورد طرح بندی طرح نظرات وردپرس چیزی ننویسیم ، ناقص است. در گذشته ، ما بحث کردیم که وجود دارد کلاسها و شناسه های CSS پیش فرض وردپرس تولید شده برای کمک به سبک سازی الگوهای خود برای طراحان قالب. در این مقاله ، ما از آن کلاسهای پیش فرض استفاده خواهیم کرد تا به شما نشان دهیم چگونه می توانید طرح نظرات وردپرس و برخی از کارهای جالب را که می توانید با آن انجام دهید ، سبک کنید.

به خاطر این مثال ، ما در این مقاله پیش فرض Twenty Twelve WordPress را اصلاح خواهیم کرد. توجه: این مقاله برای شروع طراحان تم و کاربران DIY است که درک درستی از HTML و CSS دارند.

کلاسهای پیش فرض نظرات وردپرس h4>

به طور پیش فرض وردپرس این کلاسها را برای عناصر موجود در الگوی نظر ایجاد می کند:

/ * خروجی نظر * /

.commentlist .استفاده کنید {}
.commentlist .تکراراً یک {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist. حتی {}
.commentlist .thread-alt {}
.commentlist. رشته-عجیب و غریب {}
.commentlist. Thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul. کودکان. حتی {}

.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. والدین {}
.commentlist .comment {}
.commentlist. کودکان {}
.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 {}

# لغو-نظر-پاسخ {}
# لغو-نظر-پاسخ a {}

چگونه می توان کلاس های CSS مورد نیاز برای ویرایش را پیدا کرد h4>

قبل از اینکه به سراغ طراحی یک ظاهر طرح نظرات وردپرس برویم ، یک نکته کوچک برای کاربران جدید ما است. مرورگرهای وب Google Chrome و Mozilla Firefox دارای ابزاری مفید هستند که می توانید از آن برای بهبود مهارت های توسعه قالب وردپرس استفاده کنید. این ابزار عنصر بازرسی نام دارد. به سادگی موس خود را به سمت یک عنصر در یک صفحه وب ببرید ، کلیک راست کرده و عنصر inspect را انتخاب کنید. پنجره مرورگر شما به دو ردیف تقسیم می شود و در پنجره پایین کد منبع آن عنصر را مشاهده خواهید کرد. همچنین در پنجره پایین می توانید عناصر CSS و نحوه استایل آنها را مشاهده کنید. حتی می توانید CSS را برای آزمایش در آنجا ویرایش کنید. مهم است که بخاطر بسپارید ، هر آنچه را با استفاده از Inspect Element تغییر دهید فقط برای شما قابل مشاهده است. لحظه ای که صفحه را تازه می کنید ، این تغییرات ناپدید می شوند. برای ایجاد تغییرات دائمی ، باید از پرونده style.css یا سایر پرونده های مناسب در تم های خود استفاده کنید.

Inspect element in Google Chrome to look at source code and quickly find matching CSS rules

افزودن رنگ پس زمینه فرد و زوج برای نظرات h4>

داشتن رنگ زمینه متفاوت برای نظرات فرد و زوج یک روند طراحی است که اکنون از چند سال پیش وجود دارد. اگر نظرات زیادی دارید به خوانایی آن کمک می کند. همچنین با برخی از تم های خاص بسیار خوب به نظر می رسد به همین دلیل بسیاری از طراحان می خواهند از این قابلیت استفاده کنند. برای کمک به طراحان در رسیدن به این هدف ، وردپرس به ترتیب به هر نظر یک کلاس فرد و زوج اضافه می کند.

با قرار دادن کد زیر می توانید به راحتی سبک یکنواخت و فرد را برای نظرات در style.css طرح زمینه خود اضافه کنید.

.commentlist .even .comment {
background-color: # ccddf2؛
}
.commentlist .odd .comment {
background-color: #CCCCCC؛
}

نتیجه چیزی شبیه به این خواهد بود:

Using CSS to add alternate colors for even and odd comments in WordPress

سبک نوشتن نظر نویسنده و اطلاعات متا h4>

وردپرس همچنین کلاسهایی را به عناصر نمایش داده شده در هر عنوان عنوان اضافه می کند. این اجازه می دهد تا طراحان تم نمایش اطلاعات نویسنده و سایر متا نظرات مانند تاریخ و زمان نظر را به صورت سفارشی تنظیم کنند. در اینجا یک کد نمونه برای جایگذاری در پرونده style.css طرح زمینه شما وجود دارد تا این عناصر را به سبک دیگری تغییر دهید. در این مثال ما رنگ زمینه را برای نظر دادن به متا همراه با کمی فاصله اضافه کرده ایم.

عنوان مقاله comments-area {
حاشیه: 0 0 48px؛
سرریز: پنهان
موقعیت: نسبی؛
background-color: # 55737D؛
رنگ: #FFFFFF؛
بالشتک: 10px؛
}

اینگونه به نظر می رسد:

Styling comment meta and author information in WordPress comments

سبک ارسال نظرات نویسنده متفاوت است h4>

اغلب اوقات می توانید ببینید که نظرات نویسنده پست یا با رنگ پس زمینه متفاوت یا برخی از نشان های دیگر برجسته می شوند. وردپرس یک کلاس پیش فرض bypostauthor به همه نظرات نویسنده پست اضافه می کند. طراحان قالب وردپرس می توانند از این کلاس برای استایل دادن نظرات نویسنده به شکل متفاوت استفاده کنند.

برخی از مضامین ، از عملکرد برگشت تماس خود برای نمایش نظرات استفاده می کنند. با استفاده از عملکرد برگشت تماس ، این مضامین ممکن است اطلاعات اضافی را به نظر نویسنده پست اضافه کنند. به عنوان مثال ، Twenty Twelve از خط زیر در تابع پاسخگویی نظر twentytwelve_comment () (واقع در پرونده توابع.php موضوع) استفاده می کند.

// اگر نویسنده پست فعلی نیز نویسنده نظر است ، آن را از نظر بصری اعلام کنید.

($ comment-> user_id === $ post-> post_autor)؟ "". __ ("ارسال نویسنده" ، "twentytwelve"). '': '')؛

این کد ارسال نویسنده را به اطلاعات متا نظر اضافه می کند. بسته به نحوه برخورد تم وردپرس با نظرات نویسنده پست ، می توانید آن را به هر چیزی که می خواهید تغییر دهید.

اگر از موضوعی متفاوت از Twenty Twelve استفاده می کنید ، باید بدانید که موضوع شما چگونه نظرات را کنترل می کند. به سادگی فایل comments.php طرح زمینه خود را باز کنید. اگر طرح زمینه شما از عملکرد برگشت تماس خود استفاده می کند ، آن را در داخل عملکرد wp_list_comments مشاهده می کنید ، مانند این:

 'twentytwelve_comment'، 'style' => 'ol'))؛ ؟>

در مثال بالا می بینید که موضوع از twentytwelve_comment به عنوان عملکرد برگشت تماس استفاده می کند. اگر یک عملکرد برگشت تماس مشخص شده باشد ، محتمل ترین مکان برای یافتن این عملکرد در پرونده functions.php طرح زمینه شماست.

در این مثال ما در حال تغییر این عملکرد برای نمایش ویرایشگر به جای Post Author هستیم. برای انجام این کار ، عملکرد پاسخگویی نظر را مانند این تغییر داده ایم:

// اگر نویسنده پست فعلی نیز نویسنده نظر است ، آن را از نظر بصری اعلام کنید.

($ comment-> user_id === $ post-> post_autor)؟ "". __ ('ویرایشگر' ، 'twentytwelve'). '': '')؛

ما همچنین می خواهیم با اضافه کردن موارد زیر در پرونده style.css قالب خود ، شکل آن را تغییر دهیم:

li.bypostauthor نقل قول دهانه {
رنگ: # 21759b؛
background-color: # f8f0cb؛
background-image: هیچ کدام؛
حاشیه: 1px solid # f8f0cb؛
شعاع مرز: 3px؛
جعبه سایه: هیچ؛
بالشتک: 3px؛
font-weight: پررنگ؛
}

اینگونه به نظر می رسد:

Styling aurhor comments differently in WordPress comments

یک ظاهر طراحی نظر پاسخ پیوند در نظرات وردپرس h4>

اکثر مضامین وردپرس پیوندی برای پاسخ دادن در زیر هر نظر دارند. این قابلیت فقط درصورت نمایش فعال بودن نظرات ، نمایش داده می شود. برای فعال کردن نظرات رشته ای ، به سرپرست وردپرس خود بروید ( تنظیمات »بحث و گفتگو ). به بخشی که در آن تنظیمات دیگر نظرات است نگاه کنید و کادر فعال کردن نظرات رشته ای (تو در تو) را علامت بزنید.

کلاسهای پیش فرض CSS که توسط وردپرس برای پیوند پاسخ ایجاد شده اند reply و comment-reply-link هستند. ما از این کلاسها برای اصلاح پیوند پاسخ و تبدیل آن به یک دکمه CSS استفاده خواهیم کرد.

.پاسخ {
شناور: درست؛
حاشیه: 0 10px 10px 0؛
text-align: مرکز؛
background-color: # 55737D؛
حاشیه: 1 پیکسل جامد # 55737D؛
شعاع مرز: 3px؛
بالشتک: 3px؛
عرض: 50 پیکسل
box-shadow: 1px 1px 2px 2px # 4f4f4f؛
}

مقاله کامنت
padding-bottom: 2.79rem؛
}

a-comment-reply-link ،
a.comment-edit-link {
رنگ: #FFFFFF؛
اندازه قلم: 13px؛
اندازه قلم: 0.928571429rem؛
طول خط: 1.846153846؛
دکوراسیون متن: هیچ؛
}

a-comment-reply-link: شناور ،
a.comment-edit-link: شناور {
رنگ: # f6e7d7؛
}

اینگونه به نظر می رسد:

Styling the comment reply button in WordPress comments using CSS

دکمه ویرایش نظرسنجی h4>

در اکثر مضامین وردپرس ، با ورود کاربران با قابلیت ویرایش نظرات می توانید لینک ویرایش نظر را در زیر هر نظر مشاهده کنید. در اینجا کمی CSS وجود دارد که از کلاس پیش فرض comment-edit-link برای تغییر شکل ظاهر پیوند استفاده می کند.

a.comment-edit-link {
شناور به سمت چپ؛
حاشیه: 0 0 10px 10px؛
text-align: مرکز؛
background-color: # 55737D؛
حاشیه: 1 پیکسل جامد # 55737D؛
شعاع مرز: 3px؛
بالشتک: 3px؛
عرض: 50 پیکسل
box-shadow: 1px 1px 2px 2px # 4f4f4f؛
}

شکل ظاهری اینگونه است:

Using CSS to style comment edit link in WordPress Comments

یک ظاهر طراحی لغو نظر پیوند پاسخ h4>

در اکثر مضامین خوب وردپرس ، با کلیک بر روی پیوند پاسخ ، فرم نظر درست زیر نظری که در حال پاسخ دادن هستید با پیوندی برای لغو پاسخ نظر باز می شود. بیایید این پیوند پاسخ لغو نظر را با استفاده از پیش فرض CSS ID cancel-comment-reply اصلاح کنیم.

# لغو-نظر-پاسخ-پیوند {
text-align: مرکز؛
background-color: # 55737D؛
حاشیه: 1 پیکسل جامد # 55737D؛
شعاع مرز: 3px؛
بالشتک: 3px؛
عرض: 50 پیکسل
رنگ: #FFFFFF؛
box-shadow: 1px 1px 2px 2px # 4f4f4f؛
دکوراسیون متن: هیچ؛
}

شکل ظاهری اینگونه است:

Styling the cancel comment reply link in WordPress comment reply form

فرم دهی فرم نظرات وردپرس h4>

فرم های قابل استفاده ، زیبا از نظر زیبایی و شیک نظر کاربران را ترغیب می کند در مورد وبلاگ شما نظر بگذارند. پیشتر ما مقاله مفصلی درباره نحوه سبک دادن به فرم نظرات وردپرس . ما به شما توصیه می کنیم که بررسی کنید تا ببینید چگونه می توانید فرم نظرات وردپرس خود را به سطح بعدی برسانید.

امیدواریم که این مقاله به شما کمک کند طرح بندی نظرات وردپرس را سبک کنید. اگر س anyال یا پیشنهادی دارید ، لطفاً با گذاشتن نظر در زیر با ما در میان بگذارید.

منبع:
https://www.wpbeginner.com/wp-themes/how-to-style-your-wordpress-comments-layout/.

دیدگاهتان را بنویسید