آموزش گام به گام تغییر رنگ پس زمینه سایت وردپرسی

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

چرا نیاز است رنگ پس زمینه وردپرسی را تغییر دهیم

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

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

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

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

تغییر رنگ پس زمینه با استفاده از WordPress Customizer
تغییر رنگ پس زمینه با استفاده از CSS سفارشی
تغییر رنگ پس زمینه بطور تصادفی
تغییر رنگ پس زمینه برای پست های فردی
استفاده از ویدیو در پس زمینه

تغییر رنگ زمینه با استفاده از WordPress Theme Customizer

بسته به قالبی که استفاده می کنید، ممکن است بتوانید رنگ پس زمینه را با استفاده از WordPress Theme Customizer تغییر دهید. این آپشن به شما امکان می دهد ظاهر سایت خود را به صورت واقعی و بدون نیاز به ویرایش کد ویرایش کنید.

بیشتر بخوانید:

قالب صفحه در وردپرس چیست | آموزش ساخت page template در 4 مرحله

برای دسترسی به WordPress Theme Customizer ، می توانید وارد وب سایت خود شوید و سپس به Appearance »Customize بروید. با این کار Customizer Theme باز می شود ، جایی که چندین گزینه برای تغییر طرح زمینه پیدا خواهید کرد. این گزینه ها شامل منوها ، رنگ ها ، صفحه اصلی ، ابزارک ها ، تصویر پس زمینه و موارد دیگر است.

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

بیشتر بخوانید:

آموزش تصویری نصب قالب فرزند (child them) در 5 مرحله

در مرحله بعدی ، باید روی گزینه “Background color” کلیک کنید و یک رنگ برای وب سایت خود انتخاب کنید. می توانید از ابزار انتخاب رنگ استفاده کنید یا کد رنگ Hex را برای پس زمینه خود وارد کنید.

پس از اتمام تغییرات ، فراموش نکنید که روی دکمه “انتشار” کلیک کنید. اکنون می توانید به وب سایت خود مراجعه کنید تا رنگ پس زمینه جدید را در عمل مشاهده کنید.

ممکن است در قالب شما این گزینه در Theme Customizer موجود نباشد. در این صورت می توانید یکی از روش های زیر را امتحان کنید.

با افزودن CSS سفارشی ، رنگ پس زمینه را تغییر دهید

روش دیگری که می توانید رنگ پس زمینه وب سایت وردپرس خود را تغییر دهید افزودن CSS سفارشی در WordPress Theme Customizer است. برای شروع ، به بخش Appearance »Customize بروید و سپس به برگه« CSS اضافی » یا additional Css بروید.

سپس کد زیر را وارد کنید

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

پس از پایان کار ، فراموش نکنید که روی دکمه “انتشار” کلیک کنید. اکنون می توانید برای مشاهده رنگ زمینه جدید به وب سایت خود مراجعه کنید.

به طور تصادفی رنگ پس زمینه را در وردپرس تغییر دهید

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

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

پس از آن ، باید کلاس CSS را که می خواهید هدف قرار دهید ، یادداشت کنید. به عنوان مثال ، در تصویر بالا ، ما می خواهیم منطقه ای را با یک کلاس CSS “page-header” هدف قرار دهیم.

در مرحله بعدی ، باید یک ویرایشگر متن ساده را مانند یک دفترچه یادداشت در رایانه خود باز کنید و یک پرونده جدید ایجاد کنید. شما باید فایل را به عنوان “wpb-background-tutorial.js” در دسک تاپ خود ذخیره کنید.

پس از انجام این کار ، می توانید کد زیر را به پرونده JS که ایجاد کرده اید اضافه کنید:

اگر کد را مطالعه کنید ، متوجه خواهید شد که ما از کلاس CSS “page-header” به عنوان منطقه ای که می خواهیم در وب سایت خود هدف قرار دهیم استفاده کردیم.

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

بیشتر بخوانید:

حملات اسکیوال اینجکشن در وردپرس

اکنون که فایل JS شما آماده است ، باید آن را با استفاده از سرویس پروتکل انتقال فایل (FTP) در پوشه JS قالب وردپرس خود بارگذاری کنید.

در این آموزش، ما از FileZilla استفاده می کنیم. فایلزیلا یک سرویس گیرنده FTP رایگان برای ویندوز ، مک و لینوکس است و استفاده از آن بسیار آسان است.

برای شروع ، باید وارد سرور FTP وب سایت خود شوید. اطلاعات ورود به سیستم را می توانید از طریق ایمیل ارائه دهنده میزبان یا داشبورد cPanel حساب میزبانی خود پیدا کنید.

پس از ورود به سیستم ، لیست پوشه ها و پرونده های وب سایت خود را در زیر ستون “Remote site” مشاهده خواهید کرد. پیش بروید و به پوشه JS در قالب سایت خود بروید.

اگر قالب شما پوشه js ندارد ، می توانید یک پوشه ایجاد کنید. بر روی پوشه قالب خود در کلاینت FTP کلیک راست کرده و گزینه “create directory” را انتخاب کنید.

در مرحله بعدی ، باید محل فایل JS خود را در زیر ستون “سایت محلی” باز کنید. سپس روی پرونده کلیک راست کرده و گزینه Upload را کلیک کنید تا پرونده به قالب شما اضافه شود.

در مرحله بعدی ، باید کد زیر را در پرونده funtions.php قالب خود وارد کنید. این کد به درستی فایل JavaScript و اسکریپت وابسته jQuery را که برای کار با این کد نیاز دارید بارگیری می کند.

توصیه می کنیم از افزونه Code Snippets استفاده کنید تا با خیال راحت کد را به سایت خود اضافه کنید.

بیشتر بخوانید:

آموزش ساخت پلاگین وردپرس در 5 مرحله

تغییر رنگ پس زمینه برای پست های فردی

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

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

اولین کاری که باید انجام دهید این است که کلاس Post ID را در CSS موضوع خود پیدا کنید. می توانید این کار را با مشاهده هر پست وبلاگ انجام دهید و سپس کلیک راست کنید تا از ابزار Inspect در مرورگر خود استفاده کنید.

در اینجا مثالی از نمونه کدی که خواهید دید گذاشته شده است.

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

برای افزودن CSS سفارشی ، می توانید از WordPress Theme Customizer استفاده کنید. ابتدا مطمئن شوید که به وب سایت وردپرس خود وارد شده اید. سپس ، از پست وبلاگ خود بازدید کنید و روی گزینه “سفارشی سازی” در بالا کلیک کنید.

پس از آن ، از فهرست سمت چپ خود به تب Additional CSS بروید.

سپس کد Css خود را وارد کنید و گزینه انتشار را انتخاب کنید.

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

از یک ویدیو در پس زمینه استفاده کنید

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

ساده ترین راه برای افزودن ویدیو در پس زمینه ، استفاده از افزونه وردپرس است. برای این آموزش ، ما از mb.YTPlayer برای فیلم های پس زمینه استفاده خواهیم کرد. این یک افزونه رایگان است که به شما امکان می دهد فیلم های YouTube را در پس زمینه وب سایت وردپرس خود پخش کنید. ابتدا باید افزونه را در وب سایت خود نصب و فعال کنید.

پس از فعال سازی ، می توانید از قسمت مدیر وردپرس خود به mb.ideas »YTPlayer بروید. در صفحه بعدی ، باید URL ویدیوی YouTube خود را وارد کرده و فیلم پس زمینه را فعال کنید.

بیشتر بخوانید:

افزونه افزایش سرعت وردپرس | بهترین افزونه‌ ها برای افزایش سرعت در وردپرس

سخن آخر

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

https://www.wpbeginner.com/wp-tutorials/how-to-change-background-color-in-wordpress-beginners-guide/

وبلاگ