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

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

نحوه استایل دهی به قسمت ابزارک ها در وردپرس

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

1- نحوه اضافه کردن استایل سفارشی به ابزارک وردپرس با استفاده از ویرایشگر گوتنبرگ

2- آموزش اضافه کردن استایل به ابزارک ها در وردپرس با ویرایشگر کلاسیک

3- نحوه اضافه کردن استایل به ابزارک ها در وردپرس با افزونه CSS Hero

در ادامه توضیحاتی در خصوص هریک از این روش ها در اختیار شما قرار می دهیم. امیدوارم تا انتهای این آموزش مارو همراهی کنید.

بیشتر بخوانید: صفحه فرود یا لندینگ پیج (Landing Page) چیست؟ 

1- نحوه اضافه کردن استایل سفارشی به ابزارک وردپرس با استفاده از ویرایشگر گوتنبرگ

اگر شما از ویرایشگر گوتنبرگ در سایت خود استفاده می کنید، می توانید به سادگی با استفاده از آن استایل ابزارک های سایتتان را ویرایش کنید. یکی از مزایای استفاده از ویرایشگر گوتنبرگ برای ویجت ها این است که می توانید به سادگی کلاس های CSS سفارشی را به هر بلوک اضافه کنید.

برای انجام اینکار، وارد پیشخوان وردپرس خود شوید و سپس از بخش “نمایش” روی گزینه “ابزارک ها” کلیک کنید. سپس روی ابزارکی که می خواهید سبک های سفارشی را در آن اضافه کنید، کلیک نمائید تا وارد تنظیمات ابزارک شوید.

در مرحله بعدی؛ باید وارد تب “پیشرفته” در زیر منوی ” Block ” شوید. حال در این قسمت می توانید کلاس CSS سفارشی خود را اضافه کنید. بعد از اضافه کردن کد، فراموش نکنید که روی دکمه “ذخیره” کلیک کنید تا تغییرات شما ذخیره شود.

اکنون، می توانید CSS سفارشی را به قالب وردپرس خود اضافه کنید که آن کلاس CSS خاص را هدف قرار می دهد.

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

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

بیشتر بخوانید: آموزش گوگل کیورد پلنر برای یافتن کلمات کلیدی در سئوی سایت 

2- آموزش اضافه کردن استایل به ابزارک ها در وردپرس با ویرایشگر کلاسیک

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

افزونه Widget Options به صورت رایگان در مخزن وردپرس به ثبت رسیده که باید ان را در سایت خود فعال کنید. اگر با طریقه نصب افزونه آشنایی ندارید، می توانید آموزش نصب افزونه وردپرس را مشاهده کنید.

پس از فعال شدن افزونه؛ از بخش “نمایش” روی گزینه “ابزارک ها” کلیک کنید. سپس روی ویجتی که می خواهید سبک سفارشی را در آن اضافه کنید، کلیک نمائید. در تنظیمات ابزارک، طیف گسترده ای از گزینه ها را مشاهده خواهید کرد. از این قسمت، باید روی آیکون Gear کلیک کنید تا بتوانید کد CSS سفارشی خود را اضافه نمائید.

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

بیشتر بخوانید: آموزش کار با افزونه مداد زرد Yellow Pencil

3- نحوه اضافه کردن استایل به ابزارک ها در وردپرس با افزونه CSS Hero

یکی دیگر از روش های طریقه اضافه کردن استایل به ابزارک های وردپرس ، استفاده از افزونه CSS Hero می باشد. در واقع اگر شما نمی خواهید از کدنویسی CSS برای سبک دادن به ابزارک های خود استفاده کنید، قطعاً این روش می تواند بهترین انتخاب برای شما باشد. این این یک افزونه سفارشی استایل وردپرس است که به شما این امکان را می دهد تا بدون نیاز به دانش کدنویسی و  نوشتن هیچ کدی CSS سفارشی، استایل ابزارک های خود را تغییر دهید.

ابتدا باید افزونه CSS Hero را در سایت خود نصب و فعال کنید. اگر با طریقه نصب افزونه آشنایی ندارید، می توانید آموزش نصب افزونه وردپرس را مشاهده کنید.

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

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

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

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

در نهایت پس از سفارشی سازی های دلخواه، روی گزینه ذخیره کلیک کنید. اکنون می توانید پیش نمایش وب سایت خود را مشاهده کنید تا تغییرات خود را در عمل مشاهده نمائید.

بیشتر بخوانید: گوگل ادسنس چیست و چطور می توان از آن استفاده کرد؟ 

سوالات متداول

بیشتر بخوانید: افزودنی Gravity Forms Styles Pro – افزودنی زیباسازی فرم های گراویتی فرمز

افزودن استایل سفارشی به ویرایشگر ویژوال | چگونه به ویژوال ادیتور کد سفارشی بیافزاییم؟

آموزش افزودن تصویر به سایدبار قالب در وردپرس

نحوه اضافه کردن CSS در وردپرس

جمع بندی: آموزش استفاده از استایل دلخواه در ابزارک های وردپرس

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

منبع: wpbeginner