نحوه استایل دهی به فرم نظرات وردپرس

1,678 بازدید
بدون نظر

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

قبل از شروع کار

تم های وردپرس ظاهر وب سایت شما را کنترل می کند. هر قالب وردپرس همراه با چندین فایل از جمله فایل های قالب، فایل های توابع، جاوا اسکریپت ها، و شیوه های مختلف است.

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

جهت افزودن Css باید به مسیر نمایش > سفارشی سازی بروید.

تغییر سبک فرم نظر در وردپرس

درون اکثر تم های وردپرس یک قالب با نام comment.php می باشد. این فایل جهت نمایش نظرات و فرم نظر در پستهای سایت شما بکار برده می شود. فرم نظر وردپرس با بکار بردن تابع: <?php comment_form(); ?>. ایجاد می شود.

به صورت پیشفرض این تابع فرم نظر شما را با سه فیلد متنی (نام، ایمیل، و وب سایت)، یک زمینه textarea برای متن نظر، یک کادر برای تطابق GDPR و دکمه ارسال تقسیم می کند.

به شما به سادگی امکان تغییر هر کدام از این زمینه ها را با ساده تر کردن کلاس های پیش فرض CSS میدهد. در زیر یک لیست از کلاس CSS پیش فرض است که وردپرس به هر فرم نظر می افزاید.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

#respond { }

#reply-title { }

#cancel-comment-reply-link { }

#commentform { }

#author { }

#email { }

#url { }

#comment

#submit

.comment–notes { }

.required { }

.comment–form–author { }

.comment–form–email { }

.comment–form–url { }

.comment–form–comment { }

.comment–form–cookies–consent { }

.form–allowed–tags { }

.form–submit

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

#respond {

background: #fbfbfb;

padding:0 10px 0 10px;

}



/* Highlight active form field */



#respond input[type=text], textarea {

  –webkit–transition: all 0.30s ease–in–out;

  –moz–transition: all 0.30s ease–in–out;

  –ms–transition: all 0.30s ease–in–out;

  –o–transition: all 0.30s ease–in–out;

  outline: none;

  padding: 3px 0px 3px 3px;

  margin: 5px 1px 3px 0px;

  border: 1px solid #DDDDDD;

}





#respond input[type=text]:focus,

input[type=email]:focus,

input[type=url]:focus,

textarea:focus {

box–shadow: 0 0 5px rgba(81, 203, 238, 1);

margin: 5px 1px 3px 0px;

border: 2px solid rgba(81, 203, 238, 1);

}

این همان شیوه ی ما در WordPress Twenty Sixteen Theme بعد از تغییرات بود:

با استفاده از این کلاس ها می توانید رفتار نحوه نمایش متن درون جعبه های ورودی(فونت) را تغییر دهید. ما در ادامه سبک متن نام و فیلد URL را تغییر میدهیم.

1

2

3

4

5

6

7

8

9

10

11

#author, #email {

font–family: “Open Sans”, “Droid Sans”, Arial;

font–style:italic;

color:#1d1d1d;

letter–spacing:.1em;

}

#url {

color: #1d1d1d;

font–family: “Luicida Console”, “Courier New”, “Courier”, monospace;

}

در تصویر پایین مشاهده می کنید فونت نام و ایمیل فیلد متفاوت از فونت URL وب سایت است.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

#submit {

background:–moz–linear–gradient(top, #44c767 5%, #5cbf2a 100%);

background:–webkit–linear–gradient(top, #44c767 5%, #5cbf2a 100%);

background:–o–linear–gradient(top, #44c767 5%, #5cbf2a 100%);

background:–ms–linear–gradient(top, #44c767 5%, #5cbf2a 100%);

background:linear–gradient(to bottom, #44c767 5%, #5cbf2a 100%);

background–color:#44c767;

–moz–border–radius:28px;

–webkit–border–radius:28px;

border–radius:28px;

border:1px solid #18ab29;

display:inline–block;

cursor:pointer;

color:#ffffff;

font–family:Arial;

font–size:17px;

padding:16px 31px;

text–decoration:none;

text–shadow:0px 1px 0px #2f6627;

}

#submit:hover {

background:–webkit–gradient(linear, left top, left bottom, color–stop(0.05, #5cbf2a), color-stop(1, #44c767));

background:–moz–linear–gradient(top, #5cbf2a 5%, #44c767 100%);

background:–webkit–linear–gradient(top, #5cbf2a 5%, #44c767 100%);

background:–o–linear–gradient(top, #5cbf2a 5%, #44c767 100%);

background:–ms–linear–gradient(top, #5cbf2a 5%, #44c767 100%);

background:linear–gradient(to bottom, #5cbf2a 5%, #44c767 100%);

background–color:#5cbf2a;

}

#submit:active {

position:relative;

top:1px;

}

شما می توانید گزینه های دیگری را به فرم خود بیافزایید:

ورود به سیستم اجتماعی را به نظرات وردپرس بیافزایید.

با افزودن لینک های اجتماعی به نظرات وردپرس شروع کنیم.

نخستین کاری که باید انجام دهید این است که افزونه WordPress Social Login را دانلود و فعال کنید. بعد از فعال سازی، جهت پیکربندی تنظیمات افزونه شما باید به قسمت تنظیمات » WP Social Login مراجعه کنید.

این افزونه جهت اتصال به سیستم عاملهای اجتماعی نیازمند کلید API می باشد. پیوندهای مربوط به نحوه دریافت این اطلاعات برای هر پلتفرم را مشاهده کنید.

بعد از وارد کردن کلیدهای API خود، بر روی ذخیره تغییرات خود کلیک نمایید.

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

افزودن نظر خط مشی قبل یا بعد از فرم نظر

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

بعد از آن، می توانید کد زیر را در فایل functions.php یا پلاگین خاص سایت خود بیافزایید.

1

2

3

4

5

6

function wpbeginner_comment_text_before($arg) {

    $arg[‘comment_notes_before’] = “<p class=’comment-policy’>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href=’http://www.example.com/comment-policy-page/’>comment policy</a>.</p>”;

    return $arg;

}



add_filter(‘comment_form_defaults’, ‘wpbeginner_comment_text_before’);

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

1

2

3

4

5

6

7

8

9

p.comment–policy {

    border: 1px solid #ffd499;

    background–color: #fff4e5;

    border–radius: 5px;

    padding: 10px;

    margin: 10px 0px 10px 0px;

    font–size: small;

    font–style: italic;

}

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

در صورتی که می خواهید لینک را بعد از متن نظر نمایش دهید، کد زیر را بکار ببرید.

1

2

3

4

5

6

function wpbeginner_comment_text_after($arg) {

    $arg[‘comment_notes_after’] = “<p class=’comment-policy’>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href=’http://www.example.com/comment-policy-page/’>comment policy</a>.</p>”;

    return $arg;

}



add_filter(‘comment_form_defaults’, ‘wpbeginner_comment_text_after’);

به یاد داشته باشید که URL را بر اساس صفحه قوانین سایت خود تغییر دهید.

حذف فیلد آدرس وب سایت در فرم نظرات

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

جهت حذف فیلد وب سایت از فرم نظر، به آسانی کد زیر را به فایل functions.php یا پلاگین خاص سایت بیافزایید.

1

2

3

4

5

function wpbeginner_remove_comment_url($arg) {

$arg[‘url’] = ”;

return $arg;

}

add_filter(‘comment_form_default_fields’, ‘wpbeginner_remove_comment_url’);

امیدوارم این مطلب برایتان مفید بوده باشد.

درباره نویسنده : پیش‌فرض سایت

To live a creative life, we must lose our fear of being wrong

مطالب بیشتر از همین نویسنده