نحوه اضافه کردن CSS به وردپرس (۵ راه آسان برای سفارشی کردن طرح سایت خود)

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

• CSS سفارشی همه شما برای شخصی سازی قلم ها ، رنگ ها و چیدمان ها ، وب سایت شما با هویت برند شما مطابقت دارد.
• ترفندهای کوچک CSS باعث افزایش خوانایی ، تنظیم چیدمان ها و بهینه سازی اندازه دکمه ها ، افزایش تجربه کاربر و تعامل می شود.
• یک وب سایت بهینه شده با CSS CSS ENNS سریع تر بارگذاری سریعتر ، عملکرد بهتر و دسترسی بهتر در دستگاه ها.
• دستگاه های تلفن همراه با استفاده از Statista ، بیش از ۶۲ ٪ از ترافیک جهانی اینترنت را تشکیل می دهند و باعث می شود طراحی وب سایت سازگار با تلفن همراه ضروری باشد.
• میزبان BlueHost WordPress عملکرد سریع ، امنیت قوی ، به روزرسانی های خودکار ، دامنه رایگان ، SSL و پشتیبانی متخصص ۲۴/۷ را ارائه می دهد.

مقدمه

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

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

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

چرا باید CSS را به وردپرس اضافه کنید؟ (مزایای کلیدی)

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

طراحی شخصی

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

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

همچنین بخوانید: نحوه ایجاد یک موضوع وردپرس | راهنمای گام به گام

محدودیت های موضوع را برطرف کنید

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

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

تجربه کاربر را بهبود بخشید

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

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

از سازندگان صفحه سنگین خودداری کنید

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

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

همچنین بخوانید: نحوه طراحی یک راهنمای گام به گام صفحه وب

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

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

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

۵ روش اثبات شده برای افزودن CS های سفارشی به وردپرس به راحتی

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

۱٫ برای اضافه کردن CSS سفارشی از سفارشی وردپرس استفاده کنید

ساده ترین راه برای تغییر وردپرس با استفاده از CSS از طریق WordPress Customizer است. در اینجا نحوه انجام این کار آورده شده است:

1. به داشبورد وردپرس خود بروید.
2. پیدا کردن ظاهر و سپس بر روی کلیک کنید سفارشی کردنبشر
3. روی کلیک کنید CSS اضافیبشر
4. کد پرونده سفارشی خود را در ویرایشگر تایپ کنید و ببینید که تغییرات بلافاصله اتفاق می افتد.
5. کلیک کردن منتشر کردن برای ذخیره تغییرات

۲٫ اضافه کردن CSS های سفارشی از طریق Theme's Style.css (موضوع کودک)

برای سفارشی سازی بیشتر ، می توانید CSS را مستقیماً به پرونده Style.css موضوع اضافه کنید. حتما از موضوع کودک استفاده کنید. این امر هنگام به روزرسانی موضوع ، تغییر خود را ایمن نگه می دارد.

مراحل اضافه کردن CSS از طریق Style.css: 

1. اگر یک نفر را انجام دهید ، یک موضوع کودک ایجاد کنید.
2. به داشبورد وردپرس خود بروید و روی آن کلیک کنید ظاهر > ویرایشگر تمبشر
3. پیدا کردن style.css پرونده در موضوع کودک خود.
4. کد کد سفارشی خود را از پرونده قرار دهید.
5. ضربه پرونده به روزرسانی برای نجات تغییر خود

همچنین بخوانید: نحوه ساخت مضامین کودک وردپرس و استفاده از آنها

۳٫ با استفاده از یک افزونه CSS سفارشی

اگر نمی خواهید پرونده های تم ویرایش کنید ، می توانید از افزونه CSS سفارشی استفاده کنید. برخی از گزینه ها ساده CSS CSS ، CSS Hero یا Siteorigin CSS.

نحوه استفاده از افزونه CSS: 

1. ابتدا یک افزونه CSS را از فهرست افزونه وردپرس نصب و فعال کنید.
2. در مرحله بعد ، به تنظیمات افزونه بروید و ویرایشگر COUST CSS را باز کنید.
3. اینها ، کد CSS خود را اضافه کرده و تغییر را ذخیره کنید.

۴٫ اضافه کردن CSS از طریق ویرایشگر موضوع

برای کاربران پیشرفته ، وردپرس یک ویرایشگر پرونده موضوعی دارد. می توانید سبک های تم را مستقیماً در این ویرایشگر تغییر دهید.

مراحل: 

1. در داشبورد خود ، به ظاهر > ویرایشگر پروندهبشر
2. انتخاب کردن style.css از لیست پرونده های تم.
3. CSS سفارشی خود را قرار دهید و کلیک کنید پرونده به روزرسانیبشر

۵٫ با استفاده از سازندگان صفحه

بسیاری از سازندگان صفحه ، مانند Elementor ، Divi و WPBakery به کاربران امکان می دهند CSS را به وردپرس با فایلهای تم تغییر می دهند:

نحوه اضافه کردن CSS در Elementor: 

1. یک صفحه را در Elementor باز کنید و به تنظیمات پیشرفتهبشر
2. روی کلیک کنید CSS سفارشی برای اضافه کردن سبک خود
3. کار خود را ذخیره کرده و تغییرات خود را بررسی کنید.

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

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

CSS را برای سرعت سریع سایت حداقل نگه دارید

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

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

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

با نگه داشتن حداقل و بهینه سازی CSS خود ، تجربه کاربر را ارتقا می بخشید ، رتبه بندی سئو را بهبود می بخشید و وب سایت ENS به راحتی در همه دستگاه ها اجرا می شود.

برای آزمایش زنده از ابزارهای توسعه دهنده قهوه ای استفاده کنید

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

به ابزارهای توسعه دهنده ، روی هر قسمت از سایت خود کلیک راست کرده و بازرسی را انتخاب کنید (این کار در مرورگرهایی مانند Chrome ، Edge و Filfox). می توانید CSS را درست در پنجره مرورگر ویرایش کرده و تغییر را مشاهده کنید. این یک روش عالی برای امتحان کردن سبک هایی مانند اندازه فونت ، رنگ ، حاشیه یا بالشتک قبل از استفاده از آنها در سایت وردپرس است.

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

پاسخگویی موبایل در ویرایش های CSS

با وجود دستگاه های تلفن همراه بیش از ۶۲ ٪ از ترافیک اینترنت در سراسر جهان ، بسیار مهم است که سایت وردپرس شما در تلفن ها به خوبی باشد (Statista). سایتی که پاسخگو و کاملاً پاسخگو نباشد می تواند برای کاربران مشکلاتی ایجاد کند. عناصری از قبیل متن ، دکمه ها و تصاویر ممکن است خیلی کوچک باشند یا درست نخورده باشند ، که می تواند مردم را ناامید کند.

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

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

• تست Google Mobile-Fryndly: این ابزار نحوه کار سایت در دستگاه های تلفن همراه را بررسی می کند و هرگونه مشکلی را نشان می دهد.
• تغییر اندازه پنجره مرورگر خود: با تغییر اندازه پنجره ، می توانید ببینید که سایت شما در صفحه های مختلف چگونه است.
• شبیه سازی دستگاه: مرورگرهایی مانند Chrome و Firefox ابزاری برای نشان دادن نحوه نشستن در دستگاه های مختلف دارند. این به شما کمک می کند تا یک تجربه موبایل ثابت ارائه دهید.

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

همچنین بخوانید: نحوه ساخت وب سایت دوستانه موبایل در وردپرس

میزبانی قابل اعتماد را برای عملکرد بهینه انتخاب کنید

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

با BlueHost ، سایت شما سریع و ایمن باقی می ماند ، حتی وقتی سبک ها و چیدمان ها را سفارشی می کنید. میزبانی وردپرس ما شامل ذخیره سازی داخلی ، بارگیری سریع صفحه و امنیت پیشرفته است. علاوه بر این ، ما یک CDN رایگان را با استفاده از CloudFlare با مسیریابی Argo ارائه می دهیم ، و سریعتر تحویل محتوای جهانی را به دست می آوریم. برنامه وب فایروال و حفاظت DDOS یک لایه امنیتی اضافی اضافه می کنند و سایت شما را از تهدیدهای آنلاین در امان نگه می دارند.

ما برای سال اول یک پیشنهاد شماره داریم ، یک آزمایش رایگان از طریق ایمیل و یک گواهی SSL رایگان برای دوم وب سایت شما. اگر از ارائه دهنده دیگری مهاجرت می کنید ، ابزار مهاجرت سایت رایگان ما این روند را یکپارچه می کند.

فراتر از عملکرد ، ما از فرآیند خلاقیت شما با ابزارهای ایجاد سایت AI پشتیبانی می کنیم و ساخت و سفارشی کردن وب سایت خود را به راحتی انجام می دهیم. به علاوه ، زیرساخت های ما شامل به روزرسانی های خودکار وردپرس و پشتیبانی مشتری ۲۴/۷ از طریق چت برای کمک به شما لازم است.

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

هر چند پایانی

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

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

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

آیا قرار است سایت وردپرس خود را بهبود بخشید؟ با تغییرات CSS سفارشی خود ، میزبانی BlueHost WordPress را برای عملکرد و سرعت عالی انتخاب کنید. امروز شروع کنید!

متداول

آیا برای اضافه کردن CSS به وردپرس به دانش کدگذاری نیاز دارم؟

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

آیا می توانم CSS سفارشی را بدون افزونه اضافه کنم؟

بله ، شما می توانید! وردپرس روش های مختلفی برای اضافه کردن CSS بدون افزونه دارد. می توانید از پرونده WordPress Customizer یا Style.css در یک موضوع کودک استفاده کنید. موضوع گزینه های خوبی برای اضافه کردن سبک های سفارشی شما بدون افزونه های اضافی است. این به سبک و سریع سایت شما کمک می کند.

چگونه می توانم بررسی کنم که آیا CSS سفارشی کار می کند؟

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

پرونده CSS سفارشی در وردپرس کجا قرار دارد؟

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

پست نحوه اضافه کردن CSS به وردپرس (۵ راه آسان برای سفارشی سازی طرح سایت شما) برای اولین بار در وبلاگ BlueHost ظاهر شد.

منبع: https://www.bluehost.com/blog/how-to-add-css-to-wordpress/