نحوه استفاده از CSS سفارشی در وردپرس

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

در این مقاله ما به شما نشان می دهیم که چگونه و از کجا باید از CSS برای استایل دادن به تصاویر خود در سایت وردپرس استفاده کنید. همچنین 5 افزونه کاربردی و مفید که کار شما را برای اعمال CSS سفارشی در وردپرس راحت تر می کنند معرفی می کنیم. تا انتهای مطلب با ما همراه باشید…

تاثیر استفاده از CSS در وب سایت

Cascading Style Sheets یا CSS برای اولین بار در سال 1996 معرفی شد. قبل از آن، صفحات وب و وب سایت‌ها چیزی جز محتوا‌های ثابت نوشته شده در قالب خام HTML نبودند و از نظر بصری به خصوص با استاندارد‌های امروزی طراحی سایت، چندان جذاب به نظر نمی‌رسیدند.

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

به عنوان مثال، وب سایت LingApp که در زمینه آموزش زبان‌های مختلف دنیا به صورت تخصصی  فعالیت می‌کند، با اطمینان از مطابقت عناصر صفحه (مانند تصاویر) با موضوع وب سایت و اپلیکیشن اختصاصی خود، تعادل ثابتی بین زیبایی شناسی و عمل گرایی برقرار نموده است. این وب سایت همچنین توانسته با رعایت دقت و فاصله گذاری بین تصاویر با دیگر المان های صفحه، از ایجاد صفحات وب شلوغ  و به اصطلاح درهم و برهم جلوگیری کند. جالب است بدانید که بسیاری از این جنبه ها ( و اگر نه همه آنها! ) توسط CSS کنترل می‌شوند.

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

انواع CSS برای سایت های وردپرسی

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

• طراحی سایت : در طراحی سایت از کدهای CSS برای اعمال تغییرات بر روی قالب، رنگ ها و ظاهر وب سایت استفاده می شود. برای انجام این کار می توانید از ویرایشگر پوسته که در پیشخوان وردپرس قرار دارد استفاده کنید و یا اینکه تغییرات خود را مستقیما بر روی فایل Style.css ( دسترسی از طریق هاست) اعمال کنید تا امکان تغییر ظاهر سایت خود را داشته باشید. هیچکدام از این دو روش سخت نیست با اینحال استفاده از ویرایشگر پوسته (Customizer) تا حد زیادی روش ساده تری به نظر می رسد.

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

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

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

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

1) JetPack

Jetpack یکی از افزونه های محبوب وردپرس است که مملو از ویژگی های مختلف بوده و عمدتا برای افزایش سرعت و بهبود عملکرد وب سایت استفاده می شود. یکی از این ویژگی ها ویرایشگر CSS سفارشی است که با خرید پلن کامل می توانید به این ویژگی دسترسی داشته باشید.

قبل از استفاده از Jetpack، باید آن را از بخش تنظیمات این افزونه در داشبورد خود فعال کنید (Jetpack –> Settings -> Writing). سپس گزینه ای با عنوان “CSS اضافی” (Additional CSS) در منوی سفارشی سازی (Customize) در زیر منوی نمایش (Appearance) در پانل کناری داشبورد وردپرس اضافه می شود.

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

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

2) CSS Hero

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

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

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

3) Post/Page Specific Custom CSS

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

این افزونه دارای یک متا باکس است که مشاهده کدهای CSS ناحیه ای که کاربر بر روی آن قرار گرفته را امکان پذیر می سازد. همچنین برای ساخت سریع تر کدها از ویژگی تکمیل کننده خودکار (AutoComplete) بهره می برد. افزونه Post/Page Specific Custom CSS کاملا رایگان است و توسط یک توسعه دهنده شخصی به نام Łukasz Nowicki ایجاد و عرضه شده است.

4) Simple Custom CSS and JS

افزونه Simple Custom CSS and JS یکی دیگر از گزینه های رایگان عالی و پیشنهادی ما است. این افزونه به شما امکان می دهد تغییراتی را در سطح سایت یا محتوای خاص ایجاد کنید. البته همانطور که از نام آن پیداست، کد CSS تنها موردی نیست که به شما امکان تغییر آن را می دهد. با استفاده از این افزونه می توانید کدهای جاوا اسکریپت و HTML خود را هم ویرایش و اضافه کنید.

همچنین می توانید شیوه نامه ها (stylesheets) و اسکریپت ها (scripts) را به عنوان فایل های خارجی اضافه کنید یا آنها را به عنوان کد درون خطی (inline code) جاسازی کنید. ویرایشگر پیشرفته این افزونه می تواند خطاهای نگارشی متن ها یا کدهایی که وارد کرده اید را به صورت برجسته تر نمایش دهد تا امکان اشکال زدایی یا یافتن خطاها را برای شما آسان تر نماید.

داشبورد افزونه Simple Custom CSS and JS بدون شک بهترین بخش آن است چرا که این امکان را می دهد کد CSS سفارشی در وردپرس را از یک نمای یک تکه و باز مشاهده کنید و جزئیات بیشتری مثل این که این کد را چه کسی و در چه زمانی ایجاد کرده است را به شما نشان خواهد داد.

5) WP Add Custom CSS

WP Add Custom CSS یکی دیگر از افزونه‌های رایگان وردپرس است که توسط توسعه دهنده ای به نام Daniele De Santis طراحی و ایجاد شده است. این افزونه به شما امکان می دهد کدهای CSS را در هر بخشی از وب سایت خود اضافه کنید.

پس از نصب افزونه، یک گزینه میانبر به داشبورد اضافه می کند (Add Custom CSS). این افزونه همچنین گزینه ای را به پست ها و صفحات سایت شما اضافه می کند که در آن می توانید CSS سفارشی در وردپرس را به راحتی اضافه کنید. لازم به ذکر است تغییراتی که در WP Add Custom CSS ایجاد می کنید، تمام CSS های دیگر موجود در صفحات و پست های شما را لغو می کند.

استفاده از CSS سفارشی آنقدرها هم کار سختی نیست!

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

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

هر آنچه برای یک سایت وردپرسی نیاز دارید، بی کم و کاست!

بهترین های وردپرس را برایتان یک جا جمع کرده ایم! 100% رایگان

1 قالب محبوب وردپرس + 3 افزونه امنیت، سئو و بهینه سازی سایت به ارزش 10/000/000 ریال

هاست وردپرس مشهدهاست

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