آیا می خواهید ویرایش CSS وردپرس را امتحان کنید ، اما نمی دانید از کجا شروع کنید؟ با یک ظاهر طراحی شده CSS ، می توانید ظاهر سایت خود را به صورت جهانی یا در صفحات خاص ویرایش کنید. رنگ ها را اضافه کنید ، عناصر خاصی را از فضای خود خارج کنید ، یک طرح را طراحی کنید و اساساً دقیقاً هر چیزی را در قالب وردپرس خود تغییر دهید.
اگر می خواهید با محیط توسعه وردپرس بیشتر آشنا شوید یا فقط کنترل دقیق تری بر ظاهر وب سایت خود داشته باشید ، باید بدانید که چگونه CSS را در وردپرس اضافه کنید (به علاوه نحوه تغییر موارد موجود در وردپرس).
با ویرایش طرح زمینه خود و درج CSS اضافی از خود ، می توانید هر یک از عناصر بصری سایت خود را بهینه کنید. امروز ، ما نگاه دقیق تری به آن خواهیم داشت.
آماده شروع هستید؟ بیایید این کار را انجام دهیم!
ویرایش CSS چیست؟ h2>
CSS مخفف Cascading Style Sheets و محبوب ترین زبان وب علاوه بر HTML است. این دو نفر دست به دست هم می دهند ، زیرا از CSS برای سبک سازی عناصر HTML استفاده می شود . HTML شکل ظاهری یک وب سایت را ایجاد می کند و CSS برای سبک سازی بیشتر آن استفاده می شود.
نمونه کد CSS (منبع: w3schools.com)
CSS به شما این امکان را می دهد که یک وب سایت را پاسخگو کنید a > ، رنگ ها را اضافه کنید ، قلم ها را تغییر دهید ، طرح را اصلاح کنید و به طور کلی خوب است – تنظیم بصری یک وب سایت مانند HTML و JavaScript ، CSS یک زبان سمت مشتری است ، به این معنی که در انتهای کاربر اجرا می شود ، نه در سرور باطن.
هنگام غرق شدن در توسعه وردپرس ، HTML ، CSS ، JavaScript و PHP زبانهایی هستند که شما نیاز دارید می دانم این همان چیزی است که هسته اصلی CMS و همچنین بسیاری از تم ها و افزونه ها . p >
اما حتی اگر شما طراح وب یا توسعه دهنده ، خوب است کمی CSS را انتخاب کنید ، زیرا می توانید از آن برای جابجایی یا سبک دادن عناصر در وب سایت خود یا ایجاد تغییرات کوچک زیبایی استفاده کنید. به تم خود بروید تا مناسب شما باشد.
آماده هستید تا به سایت # وردپرس خود جلوه و احساس سفارشی دهید؟ ? بیاموزید که چگونه از سبک CSS برای ویرایش رنگ استفاده کنید ? ، طرح را تغییر دهید ✨ و موارد دیگر
وردپرس و CSS h2>
در وردپرس ، CSS کمی متفاوت است. این توسط مضامین کنترل می شود ، که از پرونده های الگو تشکیل شده است ، برچسب های قالب و البته صفحه سبک CSS. اگرچه توسط طرح زمینه شما ایجاد شده است ، اما همه اینها توسط شما قابل ویرایش هستند.
پرونده های الگو بخشهایی از وب سایت شما را تقسیم می کند در بخشهایی (مانند header.php یا archive.php) و برچسب های الگو برای فراخوانی آنها و سایر مطالب پایگاه داده شما استفاده می شود. این پرونده ها عمدتا از PHP و HTML تشکیل شده اند ، اگرچه در صورت نیاز می توانید CSS را اضافه کنید.
آنچه واقعاً بدنبال آن هستید شیوه نامه ، یا style.css. برای تغییر شکل ظاهری وب سایت خود ، باید نحوه افزودن و ویرایش کد را در این فایل بیاموزید.
چگونه می توان قالب وردپرس خود را با CSS سفارشی کرد h2>
اگر می خواهید موضوع خود را سفارشی کنید و ظاهر سایت خود را با CSS تغییر دهید ، شما باید کد اختصاصی خود را اضافه کنید یا آنچه را که در آنجا وجود دارد ویرایش کنید. روش هایی وجود دارد که می توانید CSS را اضافه کنید و نیازی به لمس هیچ پرونده تم ندارید ، اما برای تغییر کد موضوع موجود ، باید به صفحه سبک سایت خود دسترسی پیدا کنید.
هنگام انجام این تغییرات ، یک چیز باید بدانید: هنگام به روزرسانی موضوع خود a > ، هر ویرایشی که شما در style.css ، Functions.php یا سایر پرونده های قالب طرح زمینه انجام داده اید ، پاک می شود. به طور کلی ، شما نباید بدون استفاده از طرح زمینه مستقیماً در ویرایشگر وب سایت خود را تغییر دهید.
شیوه نامه مانند “لیستی از دستورالعمل ها” برای وب سایت شماست ، که دقیقاً نحوه استایل آن و نحوه مدیریت کد CSS را تنظیم می کند. در اینجا قسمت عمده ای از ویرایش را انجام می دهید ، اما ما همچنین به شما نحوه دستیابی به سایر پرونده های قالب قالب مانند header.php و footer.php .
برای دسترسی به صفحه سبک وب سایت وردپرس خود دو روش وجود دارد: از طریق داشبورد وردپرس یا از طریق مشتری FTP . ما هر دو را پوشش خواهیم داد.
انجام این کار خودتان راحت نیست؟ استخدام یک توسعه دهنده وردپرس را در نظر بگیرید تا این مرحله را برای شما مدیریت کند.
ویرایش CSS وردپرس در داشبورد h3>
ساده ترین و راحت ترین راه برای دسترسی به صفحه سبک CSS در داشبورد وردپرس است. نیازی به نصب برنامه های FTP یا ویرایشگر کد نیست. می توانید مستقیماً هر پرونده ای را با برجسته سازی نحو و مستندات عملکرد در آن ویرایش کنید.
قبل از انجام هرگونه ویرایش عمده در پرونده های اصلی ، باید همیشه از سایت وردپرس خود پشتیبان تهیه کنید . بسیار ساده است که اگر به تازگی وارد CSS شوید ، اشتباهی به اشتباه رخ دهد که می تواند ظاهر سایت شما را از بین ببرد بسیار آسان است و تشخیص اینکه چگونه می توانید تغییرات خود را برگردانید دشوار است.
پس از تهیه نسخه پشتیبان و طرح زمینه کودک ، به سیستم باطن خود وارد شوید. با رفتن به منو و کلیک روی ظاهر> ویرایشگر تم می توانید ویرایشگر را پیدا کنید.
باید یک پنجره بازشو مشاهده کنید که در مورد ویرایش مستقیم این پرونده ها به شما هشدار می دهد. نگران نباشید ، فقط روی “می فهمم” کلیک کنید. این فقط یک هشدار برای استفاده از طرح زمینه کودک و تهیه نسخه پشتیبان از وب سایت خود قبل از ایجاد تغییرات عمده است. این مراحل را دنبال کنید و ویرایش آن ایمن است.
ساخت ویرایشهای مستقیم روی پرونده های وردپرس
و حالا شما در حال حاضر هستید! شما به طور پیش فرض باید در صفحه سبک باشید اما به منوی سمت راست نگاه کنید تا در صورت نبود پرونده های تم خود را مشاهده کنید.
علاوه بر style.css ، به فایلهای الگوی مانند عملکردهای.php ، header.php و single.php نیز دسترسی خواهید داشت. همه اینها بر نحوه عملکرد صفحات خاصی در سایت شما تأثیر می گذارند.
اما باید قبل از رفتن به این پرونده های خاص ، خود را با PHP آشنا کنید .
ویرایش style.css شیوه نامه در قالب WordPress
فقط بخاطر داشته باشید: بیشترین تغییرات CSS که در اینجا ایجاد می کنید جهانی خواهد بود. به عنوان مثال ، اگر هدرهای H1 خود را به یک قلم خاص تغییر دهید ، برای هر صفحه در سایت شما اثر می گذارد. برای سفارشی کردن سبک خاص صفحات خاص باید از نحو ویژه استفاده کنید.
ویرایش مستقیم پرونده های تم h3>
اگر نمی توانید به ویرایشگر قالب دسترسی پیدا کنید یا ترجیح می دهید کار خود را بیش از FTP انجام دهید ، چه می کنید؟ استفاده از ویرایشگر باطن آسان تر است ، اما برخی از مضامین یا افزونه ها ممکن است آن را غیرفعال کنند. اگر چنین است ، باید از طریق FTP به وب سایت خود متصل شوید .
FTP یا پروتکل انتقال پرونده به شما امکان می دهد از راه دور به پرونده های یک وب سایت دسترسی پیدا کرده و آنها را اصلاح کنید. اولین کاری که باید انجام دهید این است که بارگیری FileZilla یا هر سرویس گیرنده FTP دیگر.
در مرحله بعدی ، باید با میزبان خود تماس بگیرید و از اعتبار FTP خود (در صورت وجود میزبان ، پورت و نام کاربری / رمز عبور) درخواست کنید. اگر میزبان شما داشبورد دارد ، ممکن است با ورود به سیستم بتوانید آنها را پیدا کنید.
اطلاعات FTP در MyKinsta
اطلاعات کاربری کاربران Kinsta در داشبورد MyKinsta در سایتها> SFTP / SSH قرار دارد. p >
پس از داشتن آنها ، سرویس گیرنده FTP خود را راه اندازی کرده و آن اطلاعات را وارد کنید. اگر کار نکرد ، “sftp: //” را قبل از URL در بخش میزبان قرار دهید.
استفاده از FileZilla
div >
پس از ورود ، می توانید با کلیک کردن روی پوشه wp-content ، پرونده style.css خود را پیدا کنید ، سپس روی پوشه موضوع خود (مانند T بیست بیست موضوع ) ، سپس پیمایش کنید تا وقتی style.css را ببینید.
برای باز شدن آن دوبار کلیک کنید (یا کلیک راست کرده و مشاهده / ویرایش را انتخاب کنید) و تغییرات خود را انجام دهید. به خاطر داشته باشید که باید آن را ذخیره و بارگیری کنید.
در صورت نیاز به ویرایش سایر پرونده های الگو مانند home.php ، single.php ، بایگانی .php ، می توانید آنها را در همان پوشه style.css پیدا کنید.
ویرایش پرونده های تم خود ، چه از طریق FTP یا داشبورد ، همیشه نیست لازم در واقع ، اگر فقط کد اضافی اضافه می کنید ، بهتر است از انجام آن خودداری کنید.
برای موارد کوچک ، بهترین روش برای افزودن CSS به سایت وردپرس خود است.
نحوه افزودن CSS سفارشی در وردپرس h2>
اگر به دنبال ویرایش کد CSS موجود نیستید و فقط می خواهید سبک خود را به آن اضافه کنید ، اکیداً پیشنهاد می شود از یکی از روش های زیر استفاده کنید: تنظیم کننده وردپرس یا استفاده از پلاگین اختصاصی.
برای اولین بار ، کد CSS که از طریق یکی از این روش ها اضافه شده دسترسی و استفاده از آن بسیار آسان تر است. اگر می خواهید بعداً تغییراتی ایجاد کنید ، نیازی به نگرانی در مورد قرار دادن CSS جدید خود در مکان اشتباه یا فراموش کردن جایی که آن را اضافه کرده اید نیست.
همچنین ، CSS اضافه شده از طریق یکی از این روشها با به روزرسانی طرح زمینه شما از بین نخواهد رفت (اگرچه اگر تغییر طرح زمینه ).
این بدان معناست که شما نیازی به استفاده از طرح زمینه کودک ندارید و اگر مشکلی خراب شد ، تنها کاری که باید انجام دهید حذف CSS است که به تازگی اضافه کرده اید.
توجه داشته باشید که همچنان باید از وب سایت خود نسخه پشتیبان تهیه کنید ، همانطور که برخی از افراد گزارش داده اند گاهی اوقات CSS خود را در هنگام بروزرسانی های مهم از دست می دهید. هنوز هم ، این روش بسیار قابل اطمینان تر از ویرایش مستقیم پرونده های تم است.
اگر نمی خواهید ایجاد کنید می توانید کد را فقط به style.css اضافه کنید و آن را یک روز فراخوانی کنید. یک تم کودکانه ، ویرایش های عمده ای در CSS موجود در طرح زمینه خود انجام دهید و به طور بالقوه در پایان با تمام کارهای خود پاک شوید ، بهتر است یا از گزینه CSS اضافی در تنظیم کننده وردپرس استفاده کنید یا یک پلاگین نصب کنید.
1 ویرایش CSS از طریق WordPress Customizer
به جای استفاده از ویرایشگر قالب ، این را امتحان کنید. وارد حساب کاربری وردپرس خود شوید و ظاهر> سفارشی را کلیک کنید تا سفارشی سازی موضوع باز شود صفحه نمایش شما یک پیش نمایش مستقیم از وب سایت خود خواهید دید ، با گزینه هایی در سمت چپ برای سفارشی کردن عناصری مانند رنگ ها ، منوها یا سایر ابزارهای ابزارک .
در پایین این فهرست ، باید CSS اضافی جعبه.
برای باز کردن کلیک کنید. با جعبه ورودی کد و چند دستورالعمل ، به صفحه جدیدی منتقل خواهید شد. صفحه CSS اضافی شامل برجسته سازی نحوی ، دقیقاً مانند ویرایشگر قالب ، همراه با اعتبار سنجی است که به شما امکان می دهد اشتباه کد خود را بشناسید.
اضافی CSS در وردپرس
هر کدی که بنویسید به طور خودکار در قسمت پیش نمایش در سمت راست ظاهر می شود ، مگر اینکه خطایی داشته باشد (اگر به هر حال می توانید انتخاب کنید).
وقتی کار شما تمام شد ، می توانید کد خود را منتشر کنید ، زمان اجرای آن را برنامه ریزی کنید یا آن را به عنوان پیش نویس ذخیره کنید تا بعداً کار کند. حتی می توانید پیوند پیش نمایش را برای به اشتراک گذاشتن با دیگران دریافت کنید.
همانطور که مشاهده می کنید ، صفحه CSS اضافی از بسیاری جهات نسبت به ویرایشگر Theme قدرتمندتر است و برای افزودن کد بسیار مناسب تر از مخلوط کردن با پرونده های اصلی است.
کد CSS که در اینجا می نویسید از الگوی پیش فرض موضوع شما رونویسی می کند و با به روزرسانی طرح زمینه از بین نمی رود. اگر نمی توانید آن را به صورت زنده در پیش نمایش خود مشاهده کنید ، دوباره بررسی کنید که از انتخابگرهای صحیح در کد CSS خود استفاده می کنید.
درست مانند ویرایشگر قالب ، CSS به طور پیش فرض جهانی است ، اما می توانید کدی را بنویسید که صفحات خاص را هدف قرار می دهد .
نکته منفی این است که ، در صورت تعویض تم ها ، هر آنچه را که نوشته اید پاک می شود. قبل از انتقال به یک موضوع جدید ، حتماً از CSS خود نسخه پشتیبان تهیه کنید ، در غیر این صورت ممکن است کار زیادی را از دست دهید.
اگر می خواهید از این گزینه استفاده کنید ، یا می خواهید یک راه حل مناسب برای موضوعات مختلف داشته باشد و بتواند صفحات خاصی را با سهولت بیشتری هدف قرار دهد ، باید به جای آن یک افزونه را امتحان کنید.
2. افزودن CSS سفارشی به وردپرس با استفاده از پلاگین h3>
به چند دلیل ممکن است بخواهید از یک افزونه برای افزودن CSS به وردپرس استفاده کنید. در حالی که عملکرد مشابه منوی CSS اضافی است ، حتی اگر مضامین را تغییر / به روز کنید ، سبک ها معمولاً باقی می مانند.
همچنین ممکن است از UI آنها بیشتر لذت ببرید یا ویژگیهای اضافی مانند تکمیل خودکار را دوست داشته باشید. حتی برخی از پلاگین ها به شما امکان می دهند CSS را از طریق منوهای کشویی بسازید ، نه اینکه خودتان آن را بنویسید.
CSS ساده سفارشی h4>
Simple CSS سفارشی محبوب ترین ویرایشگر CSS است پلاگین ، به دلیل سهولت استفاده ، کمترین رابط کاربری و سبک بودن باطن. به طور خلاصه ، این یک افزونه بسیار کوچک وردپرس است که یک مشت بزرگ را در خود جای داده است.
پلاگین ساده CSS وردپرس سفارشی
راه اندازی یک نسیم است و هیچ تأثیر منفی بر عملکرد مشاهده نمی کنید . روی هر موضوعی کار می کند و شامل برجسته سازی نحو و بررسی خطا است.
ساده سفارشی CSS و JS
پلاگین ساده سفارشی CSS و JS وردپرس
Simple Custom CSS and JS گزینه خوبی است . همچنین به شما امکان می دهد هدر ، پاورقی ، frontend یا حتی باطن مدیر را هدف قرار دهید.
SiteOrigin CSS h4>
افزونه وردپرس SiteOrigin CSS
افزونه وردپرس SiteOrigin CSS
SiteOrigin CSS گزینه دیگری است که شامل CSS سنتی نیز می باشد ویراستار می توانید هر زمان بخواهید بین آن و ویرایشگر تصویری جابجا شوید.
WP CSS سفارشی را اضافه کنید h4>
WP افزونه سفارشی وردپرس CSS را اضافه کنید
WP افزونه سفارشی وردپرس CSS را اضافه کنید
اگر در تلاش برای افزودن CSS به صفحات خاص هستید ، WP Add CSS سفارشی یک جعبه CSS سفارشی به صفحه ویرایش اضافه می کند و همچنین دارای یک سبک جهانی است.
قهرمان CSS h4>
همچنین ممکن است بخواهید یک ویرایشگر بصری CSS را امتحان کنید. اینها همه برنامه نویسی پیچیده را می گیرند و آن را به مجموعه ای از زمینه های ورودی آسان و منوهای کشویی تبدیل می کنند که همه برنامه نویسی ها را برای شما انجام می دهد.
قهرمان CSS
CSS Hero یک پلاگین ویرایش بصری برتر با برخی ویژگی های کاملاً قدرتمند است (انیمیشن ، ویرایشهای خاص دستگاه و ویرایشهای غیرمخرب برای نام بردن چند مورد).
CSS را از کجا بیاموزید h2>
برای خودتان آماده رفتن به CSS هستید؟ این آموزش های مقدماتی اصول اولیه را ایجاد می کند و نحوی را که باید برای نوشتن کد CSS کاربردی خود بدانید به شما آموزش می دهد.
CSS را بیاموزید
ممکن است دلهره آور باشد ، اما مگر اینکه بخواهید کاری پیشرفته انجام دهید ، CSS خیلی سخت نیست! موارد ساده مانند تغییر رنگ پس زمینه یا تنظیم سبک قلم نسبتاً آسان است و در آنجا مثالهای زیادی به صورت آنلاین وجود دارد.
(خواندن پیشنهادی: 50+ قلم مدرن برای استفاده در وب سایت وردپرس خود )
اکثر آموزش های برنامه نویسی ای که در اینترنت می یابید نیز کاملاً رایگان است. اطلاعات زیادی در آنجا وجود دارد بدون هیچ هزینه کم.
در اینجا چند نمونه از بهترین آموزشهای CSS برای مبتدیان آورده شده است.
- آموزش CSS W3Schools : تعداد مطلق اطلاعاتی که می توانید در اینجا پیدا کنید: آموزش های دقیق ، مثال ها و منابع برای کار با شما. دنبال کردن آموزشهای W3Schools تا حد ممکن ساده و آسان است ، بنابراین حتی اگر کاملاً مبتدی باشید ، این یک مکان عالی برای شروع است.
- Codeacademy CSS را بیاموزید : از طریق شش برنامه عملی رایگان دروس ، اصول CSS را یاد خواهید گرفت. این یک آموزش ساده ویدیویی نیست ، بلکه یک درس تعاملی است که شما را با کد واقعی کار می کند. با نسخه حرفه ای ، همچنین می توانید آزمونها و پروژه های freeform را برای کار در اختیار شما قرار دهید.
- CSS را در یک ساعت بیاموزید : افراد زیادی می خواهند یک زبان برنامه نویسی جدید یاد بگیرند ، اما فقط وقت اختصاص دادن ندارند. اما اگر فقط یک ساعت می توانید وقت بگذارید ، می توانید CSS را با این دوره رایگان 20 قسمتی یاد بگیرید. حتی اگر تا آخر استاد نیستید ، باید اصول را خوب درک کنید.
- مقدمه به HTML و CSS اصلی برای کاربران وردپرس : آیا به دنبال چیزی خاص برای وردپرس هستید؟ اگر همیشه با نوشتن HTML و CSS مشکل داشته اید ، این دوره برای شما مناسب است. این هزینه پرداخت می شود ، اما با 52 سخنرانی و پنج ساعت فیلم برای یادگیری همراه است.
خلاصه h2>
به عنوان یک کاربر وردپرس ، پرش به CSS ممکن است در ابتدا گیج کننده باشد. اما هنگامی که بدانید چگونه می توانید پرونده های تم خود را ویرایش کنید و مکان را برای اضافه کردن یک ظاهر طراحی کنید ، دیگر مشکلی نخواهید داشت.
پرونده های تم را می توان از طریق باطن شما یا از طریق FTP ویرایش کرد تا ظاهر سایت شما تغییر کند ، اما معمولاً باید از این موارد اجتناب شود مگر اینکه نیاز به ویرایش کد موجود باشید.
اگر فقط می خواهید CSS خود را اضافه کنید ، از صفحه CSS اضافی در ظاهر> سفارشی استفاده کنید ، یا اگر به قدرتمندتری نیاز دارید یک افزونه را امتحان کنید.
ویرایشها در صفحه سبک خود با به روزرسانی موضوع از بین خواهد رفت مگر اینکه از قالب کودک استفاده کنید. این برای CSS اضافی صدق نمی کند. کد شما از بروزرسانی در امان است اما فراموش نکنید: هنگام تغییر مضامین ، فقط یک افزونه CSS را حفظ می کند.
هر روشی را که انتخاب کنید ، باید همیشه از پشتیبان گیری منظم وب سایت خود ، از جمله صفحه سبک و سفارشی ، استفاده کنید. کدی که اضافه کرده اید اکنون زمان آن فرا رسیده است که با استفاده از منابعی که در اختیار شما قرار داده ایم ، اصول CSS خود را بررسی کنید.
یک ظاهر طراحی خوشحال!
اگر از این مقاله لذت بردید ، پس از آن دوست دارید Kinsta’s WordPress platform hosting. وب سایت خود را توربوشارژ کرده و از تیم پیشکسوت وردپرس ما پشتیبانی 24/7 ساعته دریافت کنید. زیرساختهای Google Cloud ما بر مقیاس گذاری خودکار ، عملکرد و امنیت تمرکز دارند. بگذارید تفاوت Kinsta را به شما نشان دهیم! برنامه های ما را بررسی کنید a >
منبع:
https://kinsta.com/blog/wordpress-css/.