آموزش افزونه SiteOrigin CSS برای اضافه کردن CSS سفارشی در وردپرس
ممکن است برای شما پیش آمده باشد که بخواهید قسمت هایی از ظاهر وب سایت خود را تغییر دهید اما ندانید چگونه این کار را انجام دهید یا با ویرایش CSS در وردپرس که لازمه اصلاح ظاهر سایت وردپرس شما است، آشنایی نداشته باشید. افزونه SiteOrigin CSS این مشکل را برطرف کرده است.
SiteOrigin CSS یک افزونه رایگان و پیشرفته ویرایشگر زنده CSS وردپرس است که با تمام قالب های وردپرس سازگار بوده و مجموعه ای از ابزارها را برای تأمین نیازهای همه کاربران، حتی آنهایی که با CSS آشنایی ندارند، فراهم می کند.
یک افزونه ویرایشگر زنده CSS وردپرس به شما امکان می دهد قالب خود را سفارشی سازی کنید و از این نظر جزء افزونه های ویرایش قالب وردپرس است. اما برخلاف ویرایش مستقیم فایل های CSS یا استفاده از یک افزونه استاندارد CSS، یک افزونه ویرایشگر زنده CSS وردپرس به شما امکان می دهد در فرانت اند سایت خود کار کنید. این بدان معنی است که می توانید تغییرات خود را به محض ایجاد، به صورت زنده و در زمان واقعی، مشاهده کنید.
افزونه SiteOrigin CSS علاوه بر اینکه یک افزونه ویرایشگر زنده CSS وردپرس است، برای مبتدی ها یک ویرایشگر بصری فراهم می کند که دارای مجموعه ای از کنترل ها است که به شما اجازه می دهد استایل ها، رنگ ها و دیگر تنظیمات را تنها با چند کلیک و بدون نیاز به مهارت کدنویسی CSS در وب سایت وردپرس خود ویرایش کنید.
همچنین این افزونه برای کسانی که از قبل تجربه کار با CSS را داشته و نیاز به آموزش بیشتری دارند، یک ابزار پویا ارائه می دهد که کمک می کند از انتخابگر صحیح برای هدف قرار دادن المان مورد نظر خود استفاده کنند.
پیشنهاد ویژه: آموزش صفر تا صد طراحی سایت بدون نیاز به کدنویسی
آموزش افزونه SiteOrigin CSS و نحوه اضافه کردن CSS سفارشی در وردپرس
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس به مسیر نمایش » Custom CSS بروید. صفحه ای مشابه شکل زیر مشاهده می کنید.
یک صفحه خالی با ویرایشگر اصلی CSS و لیستی از بازبینی ها در سمت راست صفحه را مشاهده می کنید.
ویرایشگر اصلی CSS، دو دکمه در نوار ابزار دارد. این دکمه ها برای حالت (mode) ویرایشگر بصری و حالت ویرایشگر گسترده هستند.
در این آموزش حالت ویرایشگر بصری را بررسی می کنیم. این حالت تعاملی تر بوده و برای اکثر کاربران بخصوص مبتدی ها که می خواهند تازه کار را شروع کنند و کسانی که با CSS آشنایی کمی دارند، بسیار مناسب است.
با کلیک بر روی دکمه ویرایشگر بصری که آیکون چشم روی آن درج شده است، وارد ویرایشگر بصری افزونه SiteOrigin می شوید. در ادامه آموزش به بررسی این ویرایشگر می پردازیم.
آموزش ویرایشگر بصری افزونه
با کلیک بر روی دکمه ویرایشگر بصری صفحه ای مشابه شکل زیر مشاهده می کنید.
صفحه ویرایشگر بصری از دو قسمت تشکیل شده است. یکی قسمت سمت چپ که کنترلگرهای بصری در آن قرار دارند و دیگری قسمت سمت راست که خود از دو بخش تشکیل شده است. بخش بالایی که در آن پیش نمایشی از سایت خود را مشاهده می کنید و بخش پایین آن که ابزار inspector است.
قبل از اینکه نحوه استفاده از ویرایشگر بصری افزونه SiteOrigin CSS را آموزش دهیم، توضیح مختصری درباره برخی تعاریف CSS که دانستن آنها به فهم بهتر مطلب کمک می کند، ارائه می کنیم.
یک قانون CSS از یک انتخابگر (Selector) و یک یا چند اعلان (declaration) تشکیل شده است. هر اعلان خود از یک Property و یک value تشکیل شده است. به عنوان مثال کد زیر یک قانون CSS است.
h1 {font-weight: bold;}در کد بالا، انتخابگر تگ h1 و اعلان ;font-weight: bold است که property آن font-weight و value آن bold می باشد.
حال با دانستن معانی فوق به بررسی ابزار inspector در افزونه SiteOrigin CSS می پردازیم.
همانطور که گفته شد، قسمت سمت راست صفحه از دو بخش تشکیل شده است که در بالای صفحه پیش نمایش سایت و در پایین صفحه ابزار inspector قرار دارد.
وقتی موس خود را روی هریک از المان های موجود در پیش نمایش صفحه سایت قرار می دهید، inspector آن را هایلایت کرده و نشانه ای از اینکه این المان چیست به شما می دهد.
کلیک کردن بر روی المان، باعث انتخاب آن در inspector می شود. inspector در پایین صفحه واقع شده و از سه بخش به صورت زیر تشکیل شده است:
1- در قسمت بالای ابزار inspector می توانید سلسله مراتبی از المان هایی که حاوی المان انتخاب شده هستند را مشاهده کنید. قرار دادن موس بر روی سلسله مراتب ، المان یا المان های والد را هایلایت می کند. کلیک بر روی هر المان باعث انتخاب آن می شود.
در زیر سلسله مراتب، دو ستون را مشاهده می کنید.
2- ستون سمت چپ مجموعه ای از انتخابگرها را نشان می دهد که قالب شما از آنها برای هدف قرار دادن المان انتخاب شده استفاده می کند. انتخابگرها براساس اختصاصی بودن آنها لیست می شوند. اختصاصی ترین انتخابگر در بالا و عمومی ترین آنها در پایین نشان داده می شوند. با قرار دادن موس بر روی هر یک از انتخابگرها، همه المان های مورد هدف آن انتخابگر هایلایت می شوند.
3- در ستون سمت راست ، اعلان های CSS مربوط به المان انتخاب شده را مشاهده خواهید کرد.
حال که در مورد ابزار inspector اطلاعات لازم را کسب کردید، به بررسی کنترلگر های بصری در سمت چپ صفحه می پردازیم.
کنترلگر های بصری به سه بخش کنترلگر های Text و Decoration و Layout تقسیم می شوند. 
تنظیمات موجود در هر بخش برای ویرایش المانی است که در پیش نمایش صفحه سایت خود انتخاب کرده اید. به عنوان مثال ، اگر می خواهید اندازه فونت عنوان نوشته ها را تغییر دهید، باید از تنظیمات اندازه فونت (Font size) استفاده کنید و مقدار اندازه را به پیکسل (px) وارد کنید.
هر تغییری که ایجاد می کنید، در زمان واقعی منعکس شده و می توانید آنها را در پیش نمایش صفحه مشاهده کنید. شما می توانید تغییرات را تا رسیدن به ظاهر ایده آل خود اعمال نمایید و نیازی به رفرش کردن صفحه نداشته باشید.
SiteOrigin CSS یک قسمت Font Family را نیز ارائه می کند. از این قسمت می توانید برای وارد کردن دستی font-family مورد نظر خود استفاده کنید. اگر یک لیست کشویی از Google Web Fonts را برای انتخاب ترجیح می دهید، می توانید SiteOrigin Premium را خریداری کنید که شامل یک افزودنی انتخابگر فونت وب برای SiteOrigin CSS است.
پس از اینکه تغییرات مورد نظر خود را اعمال کردید، روی دکمه با آیکون تیک در بالای صفحه کلیک کنید.
پس از کلیک بر روی این دکمه، به مسیر نمایش » Custom CSS برمی گردید و در آن صفحه کدی که در اثر تغییرات شما توسط ویرایشگر بصری ایجاد شده است را مشاهده می کنید.
در صورت عدم نیاز به تغییر بیشتر ، روی دکمه آبی رنگ Save CSS کلیک کنید.
اگر از قبل با CSS آشنا هستید ، می توانید از حالت گسترده استفاده کنید. این حالت، پیش نمایش کاملی از سایت در سمت راست و ویرایشگر CSS در سمت چپ را به شما ارائه می دهد.
این ویرایشگر به طور هوشمندانه سایت شما را اسکن می کند تا گزینه های مهم را پیدا کرده و آنها را از طریق ویژگی تکمیل خودکار ویرایشگران در دسترس قرار دهد. یا می توانید از ابزار inspector برای انتخاب المان ها و اضافه کردن ویژگی های جدید به کد خود استفاده کنید.
پس از اتمام کار ، روی Save CSS کلیک کنید و تغییرات فوراً در سایت شما منعکس می شوند.
پس از ذخیره سازی، CSS سفارشی در پایگاه داده وردپرس ذخیره می شود. این بدان معنی است که هیچ نگرانی برای از دست رفتن داده ها هنگام به روزرسانی قالب وجود ندارد. برای استفاده ایمن از SiteOrigin CSS به قالب فرزند نیازی نیست. کدهای CSSشما به یک استایل شیت خارجی در قسمت head قالب منتقل می شود و دارای یک شناسه so-css-“theme-name”.css است. استایل شیت خارجی در مکان /wp-content/uploads/so-css/ ذخیره می شود.
توجه داشته باشید که SiteOrigin CSS مخصوص قالب فعال است. اگر قالب را تغییر دادید و مشاهده کردید SiteOrigin CSS خالی است، نگران نباشید. اگر به قالب قبلی خود برگردید، قوانین شما دوباره در دسترس خواهند بود. SiteOrigin CSS فرصتی را برای ایجاد مجموعه ای از قوانین CSS برای هر قالب فراهم می کند.
امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.
این را هم بخوانید:
دیدگاهتان را بنویسید