المنتور سایت
المنتور سایت

لذت طراحی بدون کدنویسی

۰۲۱-۹۱۰۹۱۹۲۴
|
جلسه ۹۱

تغییر استایل ویجت نظرات المنتور در وردپرس

مسعود قربان خانی

مدرس : مسعود قربان خانی

فایل های ضروری و مورد نیاز

افزونه المنتور پرو

دانلود قالب هلو المنتور

دانلود وردپرس

دوره جامع طراحی سایت
برگشت به لیست آموزش المنتور
مدت ویدیو : ۲ دقیقه
دانلود ویدیو این جلسه
تغییر استایل ویجت نظرات المنتور

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

سوال داری ؟ بپرس
بیشتر یاد بگیرید
تخفیف ویژه دانشجویان دوره رایگان المنتور

علاوه بر تخفیف همیشگی المنتور پرو 20% بیشتر تخفیف بگیرید

کد تخفیف : off-elementor
افزونه المنتور پرو

در این نوشته شما می خوانید

تغییر استایل ویجت نظرات المنتور با کد CSS

با کد css که در پایین گفته شد میتوانید ظاهر جذاب تری رو به نظرات المنتور خود دهید دقیقا همانند تصویر زیر

برای استفاده کد ها را کپی نمایید سپس در قسمت سفارشی سازی باکس مربوط به css و یا در فایل style.css قالب خود ترجیحاً قالب چایلد هلو المنتور خود قرار دهید .

				
					.comment-metadata {
    background: #ededed;
    padding: 8px;
    border-radius: 5px;
}
.comment-metadata a {
    color: #4b4b4b;
    font-size: 13px;
}
a.comment-reply-link {
    float: left;
    padding: 4px 6px;
    background: #d63362;
    color: white;
    font-size: 13px;
    border-radius: 5px;
}
a.comment-reply-link:hover {
    color: white;
}
body.rtl #comments .children {
    padding-left: 0;
    padding-right: 20px;
    margin-top: 12px;
}
body.rtl #comments ol.comment-list .children:before {
    content: "\21A9";
    right: 31px;
    font-size: 25px;
    top: 6px;
}
#comments .comment .comment-body, #comments .pingback .comment-body {
    border-bottom: none;
}
.form-submit input#submit {
    background: #65D49A;
    border: none;
    color: white;
}
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    width: 100%;
    border: 1px solid #66666654;
    border-radius: 22px;
    padding: .5rem 1rem;
    transition: all .3s;
    margin-top: 16px; 
}
.css-rank-el {
    color: white;
}
button.woocommerce-Button.button {
    margin-top: 12px;
}
blockquote {
    background: #f6f6f6;
    padding: 15px 15px 1px 15px;
    border-radius: 11px;
     color: #434343;
}
.tag-a-white a, .tag-a-white a:hover {
    color:white
}
#comments .children li:last-child {
    padding-bottom: 0;
    margin-bottom: 14px;   
}
body.rtl #comments .comment .comment-body, body.rtl #comments .pingback .comment-body {
    padding: 30px 20px; 
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    background: #c1c1c115; 
}
.commentlist .bypostauthor {
        background:#3399FF ;
        border-bottom:#FF3333 3px solid ;
}
.commentlist li ul.children li.bypostauthor {
        border-top:#e18728 10px solid ;
}
body.rtl #comments .comment .avatar, body.rtl #comments .pingback .avatar {
	right:16px ;
}
#comments .comment-author, #comments .comment-metadata {
	margin-right :46px ;
}
#comments .comment-meta {
	display :grid ;
}
.comment-author.vcard {
	margin-bottom :13px ;
}
textarea#comment { 
	border-radius :8px ;
	font-size :14px ;
}
.comment-form-comment label { 
	font-size :14px ;
	margin-bottom :13px ;
	margin-right :7px ;
}
#cancel-comment-reply-link { 
	margin-right :10px ;
}
#comments .comment, #comments .pingback { 
	margin-bottom :13px ;
}
ol.children .comment-body { 
	background:#e9f4ed !important; 
}

سوالات و مشکلات شما در این جلسه

اگر در این جلسه سوال و مشکلی داری می توانید در این قسمت بپرسید 

67 پاسخ

  2. سلام وقت بخیر.
    من برای تغییر جایگاه کامنت گذاری این کد رو در function.php انداختم ولی هیچ تغییری اعمال نشد در صورتی که کد تغییر اسم اعمال شد ولی تغییر جایگاه نه. قالب هم هلو المنتور هست. کد رو هم بررسی کردم و بدون ‘ گذاشتم ولی نشد. ممنون میشم راهنماییم کنید.

    پاسخ

      1. سلام وقت بخیر
        در قالب هلو المنتور چون ساختار دیدگاه‌ها به‌صورت کامل با هوک‌های وردپرس پیاده‌سازی نشده کدهای تغییر جایگاه فرم دیدگاه معمولاً تأثیری ندارند برای حل مشکل باید فایل comments.php یا بخش دیدگاه در تم‌بیلدر المنتور را ویرایش کنید و به‌صورت دستی تابع comment_form() را در محل دلخواه قرار دهید چون این قالب به‌صورت پیش‌فرض از موقعیت ثابت برای فرم استفاده می‌کند

        پاسخ

  4. سلام وقت بخیر دیدگاه ها در المنتور تگش H2 هست یعنی هم قسمتی که شمارشگر نظرات هست و هم قسمتی که نوشته دیدگاهتان را بنویسید. این دو تا تگ برای سئو مهم هست و باید روی تیترهای مهم بخوره. چطور میتونم تگ این موارد رو عوض کنم؟

    پاسخ

    1. سلام وقت بخیر
      برای تغییر تگ H2 بخش دیدگاه‌ها در المنتور باید از کدنویسی استفاده کنید یا فایل comments.php قالب (بهتره در قالب فرزند) رو ویرایش کنید و H2 رو به تگ دلخواه مثل H3 تغییر بدید، یا با فیلترهای وردپرس مثل comment_form_defaults و comments_number در functions.php این تگ‌ها رو بازنویسی کنید. راهکار سریع‌تر تغییر در comments.php هست.

      پاسخ

  7. سلام وقت بخیر. چجوری میتونم به جای ایمیل، شماره تلفن بگیرم و تو تیتر هم بنویسم شماره تلفن منتشر نمیشه؟

    پاسخ

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

      پاسخ

        1. سلام درود بر شما
          با افزونه‌هایی مثل WP Comment Fields یا با کمی کدنویسی فیلد ایمیل رو به شماره تلفن تغییر بدید و در کنار فیلد هم بنویسید “شماره شما منتشر نمی‌شود”.

          پاسخ

          2. سلام خدمت شما
            این کد رو کامل در انتهای فایل functions.php قالب (ترجیحاً قالب فرزند) قرار بدید

  8. سلام و عرض ادب
    ممنون از آموزشهای کاربردی و خوب شما
    من این کدها را کپی ودر style.css پیست و ذخیره کردم. ولی هیچ تغییری در ظاهر ویجت نظرات اعمال نشد. قالب هلو المنتور استفاده میکنم.

    پاسخ

  9. با سلام و عرض ادب قالب وبسایت من آسترا هست و وقتی کد رو وارد می کنم تنها رنگ دکمه ی ارسال تغییر می کند لطفاّ راهنمایی کنید.

    پاسخ

    1. سلام درود بر شما
      دلیل این موضوع معمولاً اینه که ویجت دیدگاه در المنتور در واقع از قالب وردپرس (مثل Astra) بارگذاری میشه، نه از خود المنتور، و بنابراین برای اینکه CSS شما روی اجزای مختلف فرم کامنت اعمال بشه، باید مطمئن بشید که سلکتورها دقیق، خاص و مطابق با HTML نهایی هستن. برای حل کامل این مشکل، پیشنهاد می‌کنم با استفاده از ابزار Inspect در مرورگر، کلاس‌ها و ساختار دقیق فرم کامنت رو بررسی کنید و جایگزین نمایید .
      موفق باشید

      پاسخ

    1. سلام درود بر شما
      برای شمسی کردن می‌توانید از کتابخانه JDF استفاده کنید و با اضافه کردن یک تابع در فایل functions.php، تاریخ میلادی را به شمسی تبدیل کنید اما اگر ترجیح می‌دهید از افزونه استفاده کنید، افزونه‌هایی مثل WP Persian یا Persian Date این کار را به‌صورت خودکار انجام می‌دهند

      پاسخ

  12. سلام وقت بخیر
    من از این ویجت استفاده کردم اما پیغام ” نظرات بسته شده است” را نمایش میدهد باید چیکار کنم؟

    پاسخ

    1. سلام درود بر شما
      این مشکل معمولاً به دلیل غیرفعال بودن نظرات در تنظیمات وردپرس یا تنظیمات نوشته‌هاست. ابتدا از مسیر تنظیمات > گفت‌وگوها بررسی کن که گزینه “اجازه دادن به دیگران برای ارسال دیدگاه” فعال باشد. سپس در بخش ویرایش نوشته، از قسمت “تنظیمات گفتگو”، گزینه “اجازه‌ی ارسال دیدگاه” را فعال کنید

      پاسخ

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

        پاسخ

  13. سلام و درود من توی سلامت سایتم 4 تا مشکل دارم یکی بحرانی و سه تا بهبود پیشنهادی اگه راهنمایی کنید ممنون میشم.

    1. بحرانی: من سایتم رو بارگذاری کردم روی هاست افزونه لایت اسپید (رایگان) رو استفاده میکنم و گزینه کلید دامنه رو هم زدم یه کلید واژه فعال شد خودش.
    اروری که دریافت میکنم اینه:
    کش برگه شناسایی نشد و زمان پاسخ سرور کند است
    کش برگه سرعت و عملکرد سایتتان را با ذخیره و ارائهٔ برگه‌های ثابت به جای فراخوانی برای یک برگه در هر بار بازدید کاربر افزایش می‌دهد.

    حافظهٔ پنهان برگه با جستجوی یک افزونه فعال کش برگه و همچنین فرستادن سه درخواست به صفحهٔ اصلی و جستجوی یک یا چند مورد از سربرگ‌های پاسخ ذخیرهٔ کاربر HTTP زیر شناسایی می‌شود:

    cache-control, expires, age, last-modified, etag, x-cache-enabled, x-cache-disabled, x-srcache-store-status, x-srcache-fetch-status.
    میانگین زمان پاسخ سرور 907 میلی‌ثانیه بود. این مورد باید کمتر از آستانهٔ پیشنهاد شدهٔ 600 میلی‌ثانیه باشد.
    هیچ سربرگ پاسخی در حافظه پنهان کاربر شناسایی نشد.
    یک افزونهٔ کش برگه شناسایی نشد.

    2. یک پوسته پیش‌فرض دردسترس داشته باشید. (وقتی پوسته دوم رو نصب میکنم میگه حذف کنید) قالب المنتور هستش الان
    3. یک یا چند ماژول پیشنهادی وجود ندارند.
    4. شما باید از آبجکت‌کش دائمی استفاده نمایید.

    ممنون میشم راهنمایی کنید و پاسخ کاملی بدید

    پاسخ

    1. سلام ممنون از شما
      هر کدام را سعی میکنم در یک خط توضیح بدم تا بتونید موارد را به راحتی رفع کنید
      کش برگه شناسایی نشد: در تنظیمات لایت‌اسپید، گزینه Cache را فعال کن و مطمئن شو در Toolbox → Debug Settings گزینه Disable All Features غیرفعال باشد. همچنین، در Page Optimization بررسی کن که Cache Mobile و Cache Logged-in Users فعال باشند.
      پوسته پیش‌فرض: وردپرس نیاز دارد حداقل یک قالب پیش‌فرض روی سایت نصب باشد. اگر المنتور اجازه نمی‌دهد، می‌توانی قالب پیش‌فرض را نصب کنی و فقط آن را فعال نگه نداری.
      ماژول‌های پیشنهادی: در سلامت سایت > اطلاعات ببین کدام ماژول‌ها کم هستند، معمولاً Imagick یا ZipArchive را پیشنهاد می‌دهد که باید در PHP Extensions هاست فعال شوند.
      آبجکت کش دائمی: اگر هاست از Redis یا Memcached پشتیبانی می‌کند، افزونه Redis Object Cache را نصب کن و آن را از تنظیمات فعال کن. برای لایت‌اسپید، در Cache → Object Cache گزینه Enable را بزن و سرور کش را بررسی کن.

      پاسخ

  14. سلام وقت بخیر
    ببخشید این فایل style.css کجای وردپرس هست؟
    چجوری باید بهش دسترسی پیدا کنیم که کد رو توش وارد کنیم؟

    پاسخ

    1. سلام خدمت شما
      فایل style.css در وردپرس معمولاً در پوشه قالب فعال سایت قرار دارد. برای دسترسی به آن، به مسیر پیشخوان وردپرس > نمایش > ویرایشگر فایل قالب بروید و فایل style.css را پیدا کنید. همچنین می‌توانید از طریق مدیر فایل هاست به پوشه /wp-content/themes/نام-قالب/ بروید و فایل style.css را باز کنید

      پاسخ

  17. درود فراوان
    اینکه تک تک سوالات رو جواب میدید یکی از جاذبه های سایت تون هست و من بعد از آشنایی با سایت شما کلا قید بقیه سایتهارو زدم.و قصد دارم توی دوره جامع شما بزودی ثبت نام کنم امیدوارم پشتیبانی تون خوب باشه…..سپاس از زحماتتون امیدوارم روز به روز شاهد موفقیتهای بیشترتون باشیم🙏🙏🙏

    پاسخ

    1. سلام درود بر شما
      خیلی خوشحالیم که مورد قبولتون بوده دوره جامع پشتیبانی جلسه به جلسه دارد
      موفق باشید.

      پاسخ

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

    پاسخ

    1. سلام خدمت شما
      بله، این تنظیمات رو می‌شه با کمی CSS سفارشی در المنتور اعمال کرد تا کادر وب‌سایت مخفی بشه و کادرهای نام و ایمیل در یک سطر کنار هم قرار بگیرند.
      .comment-form-url {
      display: none;
      }
      .comment-form-email,
      .comment-form-author {
      display: inline-block;
      width: 48%;
      margin-right: 2%;
      }
      .comment-form-author {
      margin-right: 0;
      }

      comment-form-url { display: none; } این قسمت کادر وب‌سایت رو مخفی می‌کنه

      پاسخ

    1. سلام خدمت شما
      میتوانید با CSS به کلاس مورد نظر font-size: 16px; دهید و یا برای تغییر فونت از font-family: YourFontName; استفاده کنید
      که عدد 16 سایز فونت است و YourFontName نام فونت دلخواه شما.

      پاسخ

    1. سلام وقت بخیر
      هم از طریق کدنویسی میتوانید و هم از طریق افزونه هایی نظیر Comments Extra Fields For Post,Pages and CPT

      پاسخ

  21. سلام خسته نباشید چطور میتونم رنگ هارو تغییر بدم چون تغییر میدم اعمال نمیشه ممنونم از راهنمایی تون

    پاسخ

  22. سلام من این کد تغییر رو در بخش css سفارشی قرار دادم ولی تغییری ایجاد نشد!! چیکار باید کنم؟ ممکنه سلکتور ها متفاوت باشه؟

    پاسخ

  23. سلام. هم در جواب و هم در سوال زیرش می نویسه پاسخ چطور می شه این دو تا متن رو تغییر داد که رو دو تاش پاسخ نزنه؟

    پاسخ

    1. سلام وقت بخیر
      برای تغییر متن “پاسخ” در نظرات وردپرس و المنتور از افزونه Loco Translate استفاده کنید.

      پاسخ

    1. سلام خدمت شما
      برای این منظور از کد های php در functions.php استفاده کنید
      برای تغییر جایگاه :
      function move_comment_form_above_comments($fields) {
      $fields['comment_field'] = $fields['comment_field'] . $fields['comment'];
      unset($fields['comment']);
      return $fields;
      }
      add_filter('comment_form_fields', 'move_comment_form_above_comments');

      برای تغییر متن هم از کد زیر :
      function custom_comment_form_defaults($defaults) {
      $defaults['title_reply'] = 'نظر خود را بنویسید';
      return $defaults;
      }
      add_filter('comment_form_defaults', 'custom_comment_form_defaults');

      پاسخ

      1. با سلام و عرض ادب این تابع را در functions.php کپی کردم ولی با خطا مواجه می شود. قالب من آسترا هست لطفاّ راهنمایی کنید

        پاسخ

        1. سلام وقت بخیر
          برای قالبتون از این کد استفاده کنید
          function
          move_comment_field_to_top( $fields ) {
          $comment_field = $fields[‘comment’];
          unset( $fields[‘comment’] );
          $new_fields = array( ‘comment’ =>
          $comment_field );
          return $new_fields + $fields;
          }
          add_filter( ‘comment_form_fields’,
          ‘move_comment_field_to_top’ );

          function custom_comment_form_defaults($defaults) {
          $defaults[‘title_reply’] = ‘نظر خود را بنویسید’;
          return $defaults;
          }
          add_filter(‘comment_form_defaults’,
          ‘custom_comment_form_defaults’);

          پاسخ

          1. با سلام مجدد این کد را در function.php قرار دادم و این خطا را می دهد Exception thrown without a stack frame

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آپدیت های جدید محصولات

جدیدترین محصولات آپدیت شده