جهش به محتوا
ورود کاربران
وبلاگوردپرسویرایش CSS در وردپرس چگونه انجام می شود!؟
هر زمان نیاز به کمک داشتید، در کنار شما هستیم . با ما تماس بگیرید ( 031-3626 0000 ) یا درخواست خود را به صورت آنلاین ثبت نمایید.

ویرایش CSS در وردپرس چگونه انجام می شود!؟

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

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

 

CSS چگونه کار می کند

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

در خصوص اینکه زبان CSS از کجا سر و کله اش پیدا شد و چطور پا به عرضه وب گذاشت باید گفت که CSS یا همان Cascading Style Sheets نوعی اسکریپت برای تشریح نوع نمایش محتوای سایت در زبان HTML می باشد. این زبان برنامه نویسی برای اولین بار در سال ۱۹۹۶ ارائه شد و تا به امروز ۴ ورژن از آن ارائه شده است که هر کدام از آنها نسبت به موارد قبلی ارتقا پیدا کرده اند و باید گفت که ناسازگاری ای بین این ورژن ها ندارند.

CSS چگونه کار می کند

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

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

 

کاربرد و کارکرد CSS در وردپرس

بنا بر گفته سایت رسمی وردپرس یعنی WordPress.org این سیستم مدیریت محتوا وابستگی بالا و سنگینی با CSS دارد و چیزی که در طراحی این سیستم لحاظ شده است این است که تا حد ممکن با استفاده از ویژگی هایی که CSS در اختیار ما می گذارد سیستمی طراحی شود که لایه های نمایشی آن از محتوای اصلی جدا بوده و امکان ادیت کردن استایل ها به منظور سریعتر شدن نمایش صفحات و همینطور کیفیت نمایش آنها به راحتی روی این سیستم پیاده سازی شود.

در مورد اینکه روش استفاده وردپرس از CSS چیست باید گفت که وردپرس از فایل های استایل CSS در کنار دو نوع فایل دیگر که فایل های قالب(Template Files) و تگ های قالب(Template Tags) برای نمایش یک صفحه از سایت استفاده می کند. در واقع عملکرد این سیستم به این صورت است که Template File ها بلاک هایی که سایت با استفاده از ترکیب آنها نمایش می دهند را ایجاد کرده و Template Tag ها به ما کمک می کنند که اطلاعاتی که با استفاده از ریکوئست ها از پایگاه داده استخراج می شود به نوعی ویرایش شده به دست ما برسد. Stylesheet نیز بخشی است که مرجع دستورات CSS در این زمینه می باشد و حالت کلی نمایش را انتخاب می کند.

کاربرد و کارکرد CSS در وردپرس

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

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

 

روش های ویرایش CSS در وردپرس

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

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

روش های ویرایش CSS در وردپرس

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

 

ویرایش CSS در وردپرس از ویرایشگر پوسته

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

وقتی که شما ویرایشگر پوسته را باز کنید با پیغامی به این صورت مواجه خواهید شد:

ویرایش CSS در وردپرس از ویرایشگر پوسته

 

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

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

 

ویرایش CSS در وردپرس از طریق هاست

تقریبا می توانیم بگوییم سنتی ترین و قدیمی ترین روشی که برای ویرایش CSS در وردپرس استفاده می شود این است که مستقیما به سراغ فایل های قالب رفته و آنها را ادیت کنیم. در صورتی که از طریق کنترل پنل خود به سراغ فایل ها سایت رفته و مسیر Public_html/wp-content/themes را دنبال کنید می توانید به پوشه ای برسید که قالب های شما در این بخش قرار دارد.

بسته به اینکه شما روی وردپرس خود چند قالب را نصب کرده باشید تعداد پوشه های فعال در این بخش می تواند متفاوت باشد. عموما شما می توانید دو قالب مربوط به قالب های پیشفرض وردپرس، یک پوشه مربوط به قالب فعال روی سایت و یک پوشه Child theme قالب خود که از نوشته شدن یک واژه child قبل از نام قالب تشکیل شده است را در این پوشه مشاهده کنید.

فایل اصلی CSS قالب خود را می توانید با نام Style.css در بین فایل های مربوط به این پوشه مشاهده کنید:

ویرایش CSS در وردپرس از طریق هاست

 

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

ادیتور تغییر CSS از هاست

 

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

برای نجات از این وضعیت شما باید به سراغ چایلد تم خود بروید. چایلد تم ها در وردپرس قالب هایی هستند که با ارث بری از قالب اصلی ساخته شده و شما باید تمامی تغییراتی که به منظور سفارشی سازی هر بخشی از سایت خود در نظر دارید، روی این تم ها اعمال کرده تا در صورتی که قالب های اصلی دچار مشکل شدند این قالب ها برای شما کار کنند. در صورتی که شما از یک قالب PRO و ترجمه شده به فارسی برای خود استفاده کرده باشید، به احتمال زیاد یک چایلد تم برای شما در نظر گرفته شده است. اما اگر اینطور نبود با کمک افزونه هایی مانند Child Theme Configurator یک چایلد تم برای سایت خود ایجاد کنید.

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

 

استفاده از افزونه ها

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

در صورتی که بخواهیم بهترین افزونه برای ویرایش CSS در وردپرس کمترین دردسر را برای ما دارد را معرفی کنیم، باید به سراغ افزونه Simple Custom CSS and JS برویم. این افزونه با بیش از ۴۰۰ هزار نصب فعال و چهار ستاره یکی از افزونه هایی است که می تواند به صورت حرفه ای امکانات خوبی را برای ویرایش کردن کدهای CSS به ما بدهد.

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

نصب Simple Custom CSS and JS

 

بعد از اینکه کار نصب و فعالسازی این افزونه را انجام دادید، کاری که باید انجام دهید این است که به سراغ گزینه Custom CSS & JS که در پیشخوان وردپرس قرار دارد بروید:

تنظیمات Simple Custom CSS and JS

 

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

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

ادیتور افزونه Simple Custom CSS and JS

 

در اینجا شما می توانید یک نام برای پروژه CSS جدید خود انتخاب کنید و کد هایی که می خواهید را در این بخش وارد کنید، بعد از اینکه کار ادیت شما تمام شد و کد های مورد نظر خود را در این بخش وارد کردید، با کلیک روی دکمه انتشار، کد های CSS مورد نظر شما روی سایت منتشر شده و تغییراتی که آنها اعمال می کنند برای سایت شما اعمال خواهد شد.

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

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

 

ویرایش CSS در وردپرس از سفارشی سازی

یکی از ویژگی های خوبی که از وردپرس ۴.۷ در دسترس قرار گرفت این است که شما با استفاده از بخش سفارشی سازی می توانید کار ویرایش CSS در وردپرس را روی سایت خود انجام داده و با عنوان بخشی به نام CSS اضافی کدهای مورد نظر خود را روی سایت پیاده سازی کنید. استفاده از این روش می تواند مزایای و معایب خود را داشته باشد و باید توجه داشته باشید که وقتی شما با استفاده از این بخش کار ویرایش CSS در وردپرس را انجام می دهید، در واقع کل کار را به هسته وردپرس می سپرید این موضوع می تواند باعث شود که سایت شما کمی سنگین شده و در کل باید گفت که استفاده از این روش نمی تواند به چابکی تغییر مستقیم فایل ها باشد.

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

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

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

ویرایش CSS در وردپرس از سفارشی سازی

 

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

وارد کردن کد در سفارشی سازی

 

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

 

نتیجه گیری

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

توجه داشته باشید که این تغییرات CSS صرفا برای موارد جزئی است و در صورتی که می خواستید یک بخش مانند یک بلاک را تغییر دهید، می توانید از صفحه ساز هایی مانند المنتور و یا ویژوال کامپوزر که در مقاله های المنتور چیست و ویژوال کامپوزر چیست به صورت کامل آنها را معرفی کردیم برای تغییرات شدید تر و کلی استفاده کنید.

این مقاله برای شما مفید بود؟
بلهخیر

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

Solve : *
30 − 17 =