تغییر استایل بخش نظرات وردپرس با CSS

برای تغییر استایل بخش نظرات وردپرس لازم نیست از همون اول سراغ فایل‌های پیچیده قالب برید. اول باید بفهمید سایتتون از قالب بلوکی استفاده می‌کنه یا کلاسیک، بعد بخش دیدگاه‌ها رو با ابزار مرورگر پیدا کنید و ظاهر دلخواهتون رو موقت آزمایش کنید. در قالب‌های بلوکی خیلی از تغییرها از ویرایشگر سایت انجام می‌شن و در قالب‌های کلاسیک معمولاً به CSS اختصاصی نیاز دارید.

در این راهنما همه مراحل رو از صفر جلو می‌بریم. یاد می‌گیرید رنگ و فاصله دیدگاه‌ها، تصویر کاربران، فرم ارسال دیدگاه، دکمه پاسخ و نمایش جواب‌های تودرتو رو تغییر بدید. یک نمونه CSS کامل هم دارید که می‌تونید بعد از هماهنگ کردن سلکتورها با قالب خودتون ازش استفاده کنید.

کدهای این مقاله به‌صورت نمونه نوشته شدن و ممکنه بخواید اون‌ها رو با ظاهر سایتتون هماهنگ کنید. اگه با کدنویسی آشنا هستید، می‌تونید مقدارهایی مثل رنگ، فاصله و اندازه رو خودتون تغییر بدید. همین‌طور می‌تونید با کمک هوش مصنوعی کدها رو برای سایتتون شخصی‌سازی کنید؛ ولی قبل از استفاده نهایی، حتماً نتیجه رو روی نسخه آزمایشی یا بعد از گرفتن نسخه پشتیبان بررسی کنید.

تغییر استایل بخش نظرات وردپرس چه فایده‌ای داره؟

بخش دیدگاه‌ها فقط جایی برای نوشتن چند پیام نیست. کاربر توی این بخش سؤال می‌پرسه، تجربه خودش رو می‌نویسه و جواب شما یا بقیه کاربران رو دنبال می‌کنه. اگه متن‌ها به هم چسبیده باشن، دکمه پاسخ دیده نشه یا رنگ نوشته با پس‌زمینه هماهنگ نباشه، دنبال کردن گفتگو سخت می‌شه.

با یک طراحی خوانا می‌تونید مرز هر دیدگاه رو مشخص کنید، پاسخ‌ها رو از دیدگاه اصلی جدا نشون بدید و جواب نویسنده نوشته رو برجسته کنید. این تغییرها مخصوصاً در نوشته‌هایی که گفتگوی طولانی دارن، پیدا کردن جواب‌ها رو خیلی راحت‌تر می‌کنن.

قبل از تغییر ظاهر دیدگاه‌ها چه چیزهایی رو آماده کنید؟

تشخیص قالب کلاسیک یا قالب بلوکی

اول نوع قالبتون رو مشخص کنید. اگه از مسیر «نمایش ← ویرایشگر» می‌تونید سربرگ، پابرگ و قالب نوشته رو ویرایش کنید، احتمالاً یک قالب بلوکی دارید. این قالب‌ها بخش دیدگاه‌ها رو با بلوک‌های وردپرس می‌سازن.

اگه زیر منوی نمایش گزینه‌هایی مثل سفارشی‌سازی، فهرست‌ها و ابزارک‌ها رو می‌بینید و ویرایشگر کامل سایت در دسترستون نیست، معمولاً قالبتون کلاسیکه. ساختار HTML و نام کلاس‌های CSS در این دو نوع قالب می‌تونه متفاوت باشه؛ پس کدی که روی یک قالب جواب می‌ده، لزوماً روی قالب دیگه همون نتیجه رو نمی‌ده.

گرفتن نسخه پشتیبان از سایت

تغییر ساده CSS معمولاً محتوای سایت رو خراب نمی‌کنه، ولی بهتره قبل از ویرایش فایل‌های قالب یا ساخت پوسته فرزند، یک نسخه پشتیبان داشته باشید. اگه امکانش رو دارید، تغییرهای بزرگ رو اول روی یک نسخه آزمایشی سایت انجام بدید.

پیدا کردن یک دیدگاه واقعی برای آزمایش

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

چطور کلاس‌ها و کدهای بخش نظرات رو پیدا کنید؟

سلکتور CSS یعنی نشانی بخشی از صفحه که می‌خواید ظاهرش رو عوض کنید. برای نمونه، سلکتور .comment-content می‌تونه محتوای یک دیدگاه رو هدف بگیره. چون هر قالب ساختار خودش رو داره، بهتره این نشانی‌ها رو از صفحه واقعی سایتتون بردارید.

یادتون باشه نام کلاس‌ها و ساختار بخش دیدگاه‌ها در همه قالب‌ها یکسان نیست. پس قبل از استفاده از کدهای نمونه، با ابزار Inspect کلاس‌های واقعی قالبتون رو پیدا کنید و سلکتورها رو با اون‌ها هماهنگ کنید.

باز کردن ابزار توسعه مرورگر

صفحه یکی از نوشته‌ها رو باز کنید. روی بخشی از دیدگاه راست‌کلیک کنید و گزینه Inspect یا Inspect Element رو بزنید. در Google Chrome پنل DevTools باز می‌شه و در Firefox همین ابزار با Page Inspector در دسترسه.

پیدا کردن بخش دیدگاه‌ها در پنل Elements

در پنل Elements، کدی که به بخش انتخاب‌شده مربوطه برجسته می‌شه. کمی به سمت عناصر والد برید و دنبال نام‌هایی مثل comments-area، comment-list، wp-block-comment-template یا comment-body بگردید. لازم نیست معنی همه کدها رو بدونید؛ فقط کلاس مربوط به کادر موردنظرتون رو پیدا کنید.

آزمایش موقت کد CSS در پنل Styles

در پنل Styles می‌تونید یک ویژگی مثل background-color یا padding رو اضافه یا مقدارش رو عوض کنید. نتیجه همون لحظه روی صفحه دیده می‌شه. این تغییر موقته و با تازه‌سازی صفحه از بین می‌ره، پس کد نهایی رو باید در محل مناسبی ذخیره کنید.

کد CSS بخش نظرات رو کجا اضافه کنید؟

اضافه کردن CSS در قالب بلوکی

در قالب بلوکی به مسیر «نمایش ← ویرایشگر» برید و بخش استایل‌ها رو باز کنید. بسته به نسخه وردپرس و امکانات قالب، گزینه CSS اضافی ممکنه در منوی استایل‌ها در دسترستون باشه. اگه این گزینه رو می‌بینید، کد رو همون‌جا وارد و تغییرها رو ذخیره کنید.

اضافه کردن CSS در قالب کلاسیک

در خیلی از قالب‌های کلاسیک می‌تونید از مسیر «نمایش ← سفارشی‌سازی ← CSS اضافی» کد رو وارد کنید. این روش برای تغییرهای ظاهری کوتاه و متوسط مناسبه و فایل اصلی قالب رو دست‌کاری نمی‌کنه.

استفاده از پوسته فرزند برای تغییرات پیشرفته

اگه قراره علاوه بر CSS، فایل‌های قالب یا ساختار خروجی دیدگاه‌ها رو تغییر بدید، بهتره از پوسته فرزند یا Child Theme استفاده کنید. پوسته فرزند تغییرهای شما رو از فایل‌های قالب اصلی جدا نگه می‌داره. برای تغییر ساختار HTML دیدگاه‌ها هم می‌تونید راهنمای تغییر قالب HTML بخش نظرات وردپرس رو ببینید.

چرا بهتره فایل قالب اصلی رو مستقیم ویرایش نکنید؟

فایل style.css قالب اصلی ممکنه موقع به‌روزرسانی با نسخه تازه جایگزین بشه. در این حالت کدی که مستقیم داخلش نوشته بودید از بین می‌ره. ویرایش اشتباه فایل‌های PHP هم می‌تونه صفحه رو از دسترس خارج کنه. CSS اضافی یا پوسته فرزند انتخاب امن‌تریه.

تغییر استایل بخش نظرات در قالب‌های بلوکی

باز کردن ویرایشگر سایت و بلوک دیدگاه‌ها

به «نمایش ← ویرایشگر» برید و بخش قالب‌ها رو باز کنید. قالب مربوط به نوشته تکی رو انتخاب کنید و بلوک دیدگاه‌ها رو پیدا کنید. بلوک دیدگاه‌ها چند بخش داخلی مثل عنوان دیدگاه‌ها، قالب هر دیدگاه، صفحه‌بندی و فرم ارسال دیدگاه داره.

قبل از حذف یا جابه‌جایی هر بلوک، نمای فهرست رو باز کنید تا ساختار داخلی رو واضح‌تر ببینید. این کار جلوی انتخاب اشتباه بلوک والد یا یکی از اجزای داخلی رو می‌گیره.

تغییر رنگ، فاصله و تایپوگرافی از بخش استایل‌ها

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

اضافه کردن CSS اختصاصی به بلوک دیدگاه‌ها

اگه تنظیم موردنظرتون در پنل بلوک نیست، اول یک کلاس CSS اختصاصی به بلوک بدید. در تنظیمات پیشرفته بلوک، داخل کادر «کلاس‌های CSS اضافی» نامی مثل custom-comments بنویسید. بعد کدتون رو با همین کلاس شروع کنید تا فقط همون بخش تغییر کنه.

.custom-comments {  margin-block-start: 48px;}.custom-comments .wp-block-comment-template {  padding: 0;  list-style: none;}

تغییر استایل بخش نظرات در قالب‌های کلاسیک

آشنایی ساده با ساختار دیدگاه‌ها و کلاس‌های پیش‌فرض

قالب‌های کلاسیک معمولاً دیدگاه‌ها رو داخل یک فهرست با کلاس‌هایی مثل comment-list یا commentlist نشون می‌دن. هر دیدگاه هم کلاس‌هایی مثل comment، comment-body و comment-content داره. نام دقیق رو با Inspect در قالبتون بررسی کنید.

کلاس‌های مربوط به دیدگاه‌های زوج و فرد

وردپرس می‌تونه کلاس‌های odd و even رو به دیدگاه‌ها اضافه کنه. با این دو کلاس می‌تونید پس‌زمینه دیدگاه‌های پشت سر هم رو کمی متفاوت کنید. کلاس alt هم ممکنه در بعضی خروجی‌ها دیده بشه.

کلاس دیدگاه نویسنده نوشته

دیدگاهی که با حساب نویسنده همون نوشته ثبت شده، معمولاً کلاس bypostauthor می‌گیره. این کلاس کمک می‌کنه جواب مدیر یا نویسنده رو با کادر و رنگ متفاوت نشون بدید. برای کار کردن این حالت، نویسنده باید دیدگاه رو با حساب کاربری مرتبط خودش ثبت کرده باشه.

کلاس‌های پاسخ، ویرایش و لغو پاسخ

لینک پاسخ معمولاً کلاس comment-reply-link و لینک ویرایش کلاس comment-edit-link داره. لینک لغو پاسخ هم اغلب با شناسه cancel-comment-reply-link ساخته می‌شه. لینک ویرایش فقط برای کاربری دیده می‌شه که اجازه ویرایش اون دیدگاه رو داشته باشه.

ساخت یک ظاهر کامل و خوانا برای دیدگاه‌ها با CSS

کد زیر یک نقطه شروع مناسبه، ولی قبل از ذخیره باید سلکتورها رو با ساختار قالبتون مقایسه کنید. برای کم شدن احتمال تداخل، همه کدها داخل محدوده .comments-area نوشته شدن.

بیشتر کدهای نمونه‌ای که از این بخش به بعد می‌بینید، برای ساختار رایج دیدگاه‌ها در قالب‌های کلاسیک نوشته شدن. اگه از قالب بلوکی استفاده می‌کنید، ممکنه این سلکتورها روی سایتتون کار نکنن. در این حالت، کلاس بلوک دیدگاه‌ها رو با Inspect پیدا کنید یا یک کلاس اختصاصی به بلوک بدید و کدها رو با همون کلاس شروع کنید.

تغییر پس‌زمینه و کادر هر دیدگاه

.comments-area .comment-body {  margin-block-end: 20px;  padding: 24px;  color: #1f2937;  background: #ffffff;  border: 1px solid #e5e7eb;}

ویژگی background رنگ پس‌زمینه و border کادر دور دیدگاه رو مشخص می‌کنه. اگه هیچ تغییری نمی‌بینید، ممکنه قالب به‌جای comment-body از کلاس دیگه‌ای استفاده کرده باشه.

گرد کردن گوشه‌ها و تنظیم فاصله‌ها

.comments-area .comment-body {  border-radius: 14px;}.comments-area .comment-content p:last-child {  margin-block-end: 0;}

border-radius گوشه‌ها رو گرد می‌کنه و padding بین محتوا و لبه کادر فاصله می‌سازه. بهتره فاصله‌ها رو خیلی بزرگ نگیرید تا دیدگاه‌های طولانی صفحه رو شلوغ نکنن.

تغییر اندازه و ظاهر تصویر کاربر

تصویر کنار نام کاربر معمولاً آواتار یا گراواتار نامیده می‌شه. آواتار همون تصویر نمایه کاربره. کد زیر اندازه اون رو ثابت و کاملاً گرد می‌کنه.

.comments-area .avatar {  width: 52px;  height: 52px;  border: 3px solid #ffffff;  border-radius: 50%;  box-shadow: 0 0 0 1px #d1d5db;  object-fit: cover;}

اگه می‌خواید جزئیات بیشتری رو تغییر بدید، آموزش افزودن CSS به عکس نویسنده و نظرات وردپرس هم به کارتون میاد.

استایل دادن به نام نویسنده، تاریخ و اطلاعات دیدگاه

.comments-area .comment-author .fn {  color: #111827;  font-size: 16px;  font-style: normal;  font-weight: 700;}.comments-area .comment-metadata,.comments-area .comment-meta {  margin-block: 6px 14px;  color: #6b7280;  font-size: 13px;}.comments-area .comment-metadata a,.comments-area .comment-meta a {  color: inherit;  text-decoration: none;}

متمایز کردن دیدگاه‌های زوج و فرد

.comments-area .comment.odd > .comment-body {  background: #ffffff;}.comments-area .comment.even > .comment-body {  background: #f8fafc;}

علامت > یعنی فقط بدنه‌ای انتخاب بشه که فرزند مستقیم همون دیدگاهه. این کار کمک می‌کنه رنگ دیدگاه والد ناخواسته به پاسخ‌های داخلش اعمال نشه.

مشخص کردن دیدگاه نویسنده نوشته

.comments-area .bypostauthor > .comment-body {  background: #eff6ff;  border-color: #60a5fa;  box-shadow: inset 4px 0 0 #2563eb;}

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

تغییر ظاهر فرم ارسال دیدگاه

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

فرم دیدگاه معمولاً یک کادر بزرگ برای متن و چند فیلد برای نام، ایمیل و نشانی سایت داره. کد زیر همه فیلدهای رایج رو یکدست می‌کنه.

.comment-respond input[type="text"],.comment-respond input[type="email"],.comment-respond input[type="url"],.comment-respond textarea {  width: 100%;  padding: 12px 14px;  color: #111827;  background: #ffffff;  border: 1px solid #cbd5e1;  border-radius: 8px;  font: inherit;  box-sizing: border-box;}.comment-respond textarea {  min-height: 160px;  resize: vertical;}

تغییر ظاهر دکمه ارسال دیدگاه

.comment-respond .submit {  padding: 11px 22px;  color: #ffffff;  background: #2563eb;  border: 0;  border-radius: 8px;  font: inherit;  font-weight: 700;  cursor: pointer;}.comment-respond .submit:hover {  background: #1d4ed8;}

تنظیم حالت فوکوس و پیام‌های فرم

فوکوس حالتیه که کاربر با کلیک یا کلید Tab یک فیلد رو انتخاب می‌کنه. بهتره این حالت واضح باشه تا کاربری که با صفحه‌کلید حرکت می‌کنه بدونه الان کدوم فیلد فعاله.

.comment-respond input:focus,.comment-respond textarea:focus {  border-color: #2563eb;  outline: 3px solid rgba(37, 99, 235, 0.2);  outline-offset: 1px;}.comment-respond .comment-notes,.comment-respond .logged-in-as {  color: #64748b;  font-size: 14px;  line-height: 1.8;}

تغییر ظاهر دکمه‌های پاسخ و ویرایش دیدگاه

تبدیل لینک پاسخ به دکمه

.comments-area .comment-reply-link {  display: inline-block;  padding: 6px 12px;  color: #1d4ed8;  background: #dbeafe;  border-radius: 6px;  font-size: 14px;  font-weight: 700;  text-decoration: none;}.comments-area .comment-reply-link:hover {  color: #ffffff;  background: #2563eb;}

استایل دادن به لینک ویرایش دیدگاه

.comments-area .comment-edit-link {  display: inline-block;  margin-inline-start: 8px;  padding: 5px 10px;  color: #475569;  background: #f1f5f9;  border-radius: 6px;  font-size: 13px;  text-decoration: none;}

تغییر ظاهر لینک لغو پاسخ

#cancel-comment-reply-link {  display: inline-block;  margin-inline-start: 8px;  padding: 5px 10px;  color: #b91c1c;  background: #fee2e2;  border-radius: 6px;  font-size: 14px;  text-decoration: none;}

فعال کردن دیدگاه‌های تودرتو و استایل دادن به پاسخ‌ها

فعال کردن دیدگاه‌های تودرتو از تنظیمات گفت‌وگو

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

ایجاد تورفتگی و مرزبندی بین پاسخ‌ها

.comments-area .children {  margin-block-start: 16px;  margin-inline-start: 32px;  padding-inline-start: 18px;  border-inline-start: 2px solid #e2e8f0;  list-style: none;}

ویژگی‌های margin-inline-start و border-inline-start با جهت راست‌به‌چپ و چپ‌به‌راست سازگارترن. به همین دلیل برای سایت فارسی انتخاب بهتری از تعیین ثابت سمت چپ یا راست هستن.

جلوگیری از به‌هم‌ریختگی پاسخ‌ها در موبایل

تورفتگی هر سطح در صفحه کوچک جمع می‌شه و فضای متن رو کم می‌کنه. با یک Media Query یا قانون مخصوص اندازه صفحه می‌تونید تورفتگی رو در موبایل کمتر کنید. Media Query یعنی کدی که فقط در اندازه مشخصی از صفحه اجرا می‌شه.

@media (max-width: 600px) {  .comments-area .children {    margin-inline-start: 8px;    padding-inline-start: 10px;  }}

سازگار کردن بخش نظرات با موبایل و حالت تیره

تنظیم فاصله و اندازه نوشته‌ها در صفحه‌های کوچک

@media (max-width: 600px) {  .comments-area .comment-body {    padding: 16px;    border-radius: 10px;  }  .comments-area .avatar {    width: 42px;    height: 42px;  }  .comments-area .comment-content {    font-size: 15px;    line-height: 1.9;    overflow-wrap: anywhere;  }}

مدیریت پاسخ‌های چندسطحی در موبایل

اگه گفتگو چند سطح پاسخ داره، فقط کم کردن اندازه نوشته کافی نیست. تورفتگی رو کاهش بدید، عرض فیلدهای فرم رو روی ۱۰۰ درصد بذارید و مطمئن بشید لینک‌های طولانی از کادر بیرون نمی‌زنن. صفحه رو با یک دیدگاه طولانی و چند پاسخ واقعی آزمایش کنید.

انتخاب رنگ‌های خوانا برای حالت تیره

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

اگه برای دیدگاه‌های زوج، فرد یا دیدگاه نویسنده پس‌زمینه جداگانه تعریف کردید، همون حالت‌ها رو داخل کد حالت تیره هم بررسی کنید. ممکنه قانون پس‌زمینه روشن اولویت بیشتری بگیره و باعث بشه متن روشن روی کادر روشن نمایش داده بشه. رنگ هرکدوم از این حالت‌ها رو جداگانه آزمایش کنید.

@media (prefers-color-scheme: dark) {  .comments-area .comment-body {    color: #e5e7eb;    background: #111827;    border-color: #374151;  }  .comments-area .comment-author .fn {    color: #f9fafb;  }  .comments-area .comment-metadata,  .comments-area .comment-meta {    color: #cbd5e1;  }  .comment-respond input[type="text"],  .comment-respond input[type="email"],  .comment-respond input[type="url"],  .comment-respond textarea {    color: #f9fafb;    background: #0f172a;    border-color: #475569;  }}

چطور مطمئن بشید تغییرات درست اجرا شدن؟

• کش سایت و مرورگر رو پاک کنید: صفحه ذخیره‌شده قبلی ممکنه اجازه نده تغییر تازه رو ببینید.
• موبایل و دسکتاپ رو بررسی کنید: فقط کوچک کردن پنجره مرورگر کافی نیست و بهتره صفحه رو روی یک گوشی واقعی هم ببینید.
• دیدگاه نویسنده و پاسخ‌های تودرتو رو آزمایش کنید: مطمئن بشید رنگ دیدگاه نویسنده و مرز پاسخ‌ها درست اجرا می‌شن.
• خوانایی رنگ‌ها و دکمه‌ها رو بسنجید: متن نباید با پس‌زمینه همرنگ باشه و حالت فوکوس هم باید واضح دیده بشه.
• فرم رو با حالت مهمان و کاربر واردشده ببینید: فیلدهای فرم در این دو حالت می‌تونن متفاوت باشن.

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

مشکلات رایج تغییر استایل بخش نظرات وردپرس

کد CSS روی دیدگاه‌ها اثر نمی‌ذاره

اول مطمئن بشید کد در صفحه بارگذاری می‌شه. بعد با Inspect ببینید سلکتور واقعاً عنصر موردنظر رو پیدا می‌کنه یا نه. اگه کنار ویژگی CSS خط خورده، قانون دیگه‌ای اولویت بیشتری داره. در این حالت بهتره سلکتور رو کمی دقیق‌تر کنید؛ استفاده زیاد از !important نگهداری کد رو سخت می‌کنه.

تغییرات بعد از به‌روزرسانی قالب ناپدید می‌شن

این مشکل معمولاً وقتی پیش میاد که فایل قالب اصلی رو مستقیم ویرایش کرده باشید. کد رو به CSS اضافی یا پوسته فرزند منتقل کنید و از اون به بعد فایل اصلی رو تغییر ندید.

سلکتورهای نمونه با قالب سایت هماهنگ نیستن

نام‌هایی مثل .commentlist، .comment-list و .wp-block-comment-template به ساختار قالب بستگی دارن. کد نمونه رو کورکورانه کپی نکنید. کلاس عنصر واقعی رو با ابزار مرورگر پیدا و سلکتور رو بر همون اساس اصلاح کنید.

ظاهر دیدگاه‌ها در موبایل به‌هم می‌ریزه

عرض ثابت، تورفتگی زیاد و تصویر بزرگ از دلیل‌های رایج این مشکله. برای فیلدها width: 100% و box-sizing: border-box بذارید. تورفتگی پاسخ‌ها و فاصله داخلی کادرها رو هم در اندازه‌های کوچک کاهش بدید.

کش سایت اجازه نمایش تغییرات رو نمی‌ده

کش مرورگر، افزونه کش، سرور یا شبکه توزیع محتوا می‌تونه نسخه قبلی CSS رو نگه داره. همه لایه‌های کشی که روی سایتتون فعاله پاک کنید و صفحه رو در یک پنجره ناشناس دوباره باز کنید. اگه سایت هم‌زمان خطای بارگذاری فایل CSS نشون می‌ده، راهنمای رفع خطای Failed to Load Resource در وردپرس می‌تونه کمکتون کنه.

جمع‌بندی

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

تغییرها رو مرحله‌به‌مرحله انجام بدید. اول کادر و فاصله دیدگاه‌ها، بعد فرم، دکمه‌ها، پاسخ‌های تودرتو و در آخر موبایل و حالت تیره رو بررسی کنید. یادتون نره سلکتورهای نمونه باید با خروجی واقعی قالبتون هماهنگ بشن.

سؤال‌های رایج

تیم تولید محتوا

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