بیش از یک روش برای افزودن کد CSS سفارشی به وبلاگ وردپرس وجود دارد.

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

اما قبل از آن ، اگر هرگز WordPress را نصب نکرده اید کشف کنید چگونه به نصب یک وبلاگ وردپرس مراحل 7 et چگونه برای پیدا کردن، نصب و فعال یک تم وردپرس در وبلاگ خود 

سپس به این دلیل که چرا ما اینجا هستیم

چگونه مواردی را که می خواهید سفارشی سازی کنید پیدا کنید

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

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

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

blogpascher بازرسی

با کلیک روی عنصر را بازرسی کنید در منوی کشویی که ظاهر می شود ، کد HTML صفحه را در یک پنجره جدید مشاهده می کنید که مورد بازرسی شده در پنجره سمت راست برجسته شده است (یا زیر). شما می توانید مثال زیر را ببینید.

blogpascher-آرم

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

دفعات بازدید: چگونگی اضافه کردن یک منوی کشویی با CSS در ویرایشگر بصری خود را

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

هنگامی که این اطلاعات را در ذهن داشته باشید ، تغییر سبک آسان می شود. به عنوان مثال ، اگر می خواهید قلم را از 13px به 14px تغییر دهید ، به سادگی به دنبال فایل شیوه نامه خود ، انتخاب کننده ای هستید که با یکی از آیتم هایلایت شده مطابقت دارد. به طور کلی به این شکل است: (« # پلاگین infos .block-content"). سپس می توانید مقادیر مختلف صفات را اصلاح کنید.

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

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

این یک واقعیت است که مضامین وردپرس متفاوت ایجاد می شوند. پس به خاطر داشته باشید که شما تم وردپرس ممکن است 100٪ با آنچه در بخش های زیر می خوانید مطابقت نداشته باشد.

گفته می شود ، بیش از حد احتمال دارد که CSS استفاده شده در وبلاگ وردپرس شما در پرونده ای به نام " را ببندید " این نام معمول برای یک شیوه نامه برای هر نوع وب سایت ، و نه فقط WordPress است.

همچنین مشاهده کنید: چگونه برای تغییر اندازه تصاویر از Gravatar در وردپرس

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

روش # 1: در حال ویرایش فایل سبک از موضوع وردپرس شما

برای دسترسی به پرونده style.css طرح زمینه خود دو روش وجود دارد.

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

منوی ویرایشگر در تصویر لبه

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

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

منوی وردپرس، سردبیر کد

راه دیگر برای یافتن شیوه نامه این است که از طریق سیستم عامل ارائه دهنده هاست خود مرور کنید و فایل را در تم وردپرس (با استفاده از سرویس گیرنده FTP). مکان دقیق بسته به ارائه دهنده هاست شما متفاوت خواهد بود. در مثال زیر، نام وب سایت (در مورد ما thecare) یک پوشه در پوشه public_html است.

از آنجا که وردپرس نصب شده است ، می توانید پوشه wp-content را در بخش "thecare" مشاهده کنید. زیر پوشه wp-content پوشه دیگری است به نام " WP-تم"، که در آن همه مضامین وردپرس نصب می شوند.

از این وب سایت از موضوعی به نام " عضویت در خبرنامه »، پرونده سبک« را ببندید در پوشه قرار دارد " عضویت در خبرنامه مرجع '.

عضویت در خبرنامه پدر و مادر-پوشه 800x401

روش شماره 2: استفاده از پلاگین برای اصلاح CSS

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

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

در اینجا چند پلاگین برتر وجود دارد که می توانید از آنها برای تغییر کد CSS خود نیز استفاده کنید تم وردپرس :

1. مداد زرد: ویرایشگر سبک ویژوال CSS

Yellow Pencil یک ویرایشگر سبک بصری است که می توانید با هر موضوعی برای شخصی سازی وب سایت خود در عرض چند دقیقه (قلم ها ، رنگ ها ، انیمیشن ها و موارد دیگر ...) استفاده کنید.افزونه وردپرس YellowPencil Visual CSS Style Editor

Ce پلاگین وردپرس Premium استایل های CSS را ایجاد می کند زمینه در حالی که شما با رنگ ها مانند یک بازی بازی می کنید. این برنامه هم برای کاربران مبتدی و هم با تجربه طراحی شده است.

ما را نیز کشف کنید افزونه های 5 وردپرس برای نمایش اعلان ها

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

دانلود | نسخه ی نمایشی | میزبانی وب

2. سفارشی JS و CSS برای گوتنبرگ

Le پلاگین وردپرس حق بیمه سفارشی JS و CSS برای گوتنبرگ به شما امکان می دهد تعداد نامحدودی از سبک های سفارشی را برای پست ها و صفحات وردپرس خود به ویرایشگر WYSIWYG اضافه کنید. کاملاً با نسخه گوتنبرگ وردپرس سازگار است.

Custom JS و CSS برای افزونه Gutenberg WordPress

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

دانلود | نسخه ی نمایشی | میزبانی وب

3. CSS SiteOrigin

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

SiteOrigin CSS - افزونه وردپرس

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

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

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

دانلود | نسخه ی نمایشی | میزبانی وب

4. ساده CSS سفارشی

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

ساده سفارشی CSS - افزونه وردپرس WordPress.org

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

بیش از 100 بار نصب شده است و دارای رتبه پنج ستاره است.

دانلود | نسخه ی نمایشی | میزبانی وب

5. WP اضافه کردن CSS سفارشی

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

فایل wp-افزودنی های سفارشی

این افزونه بیش از 10.000 هزار بار بارگیری شده است و در حال حاضر از امتیاز 4,3 ستاره برخوردار است.

دانلود | نسخه ی نمایشی | میزبانی وب

6. معتادی تم سفارشی CSS

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

تم-جستوجوی-CSS

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

دانلود | نسخه ی نمایشی | میزبانی وب

سایر منابع پیشنهادی

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

نتیجه

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

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اگر این مقاله را دوست دارید ، nدریغ نکنید در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید

...