۱۴۰۴-۰۲-۱۴ 
۶ دقیقه 
۰ 
برای جذاب‌تر کردن ظاهر سایت وردپرسی‌تان، هم می‌توانید رنگ پس‌زمینه‌اش را تغییر دهید، هم تصویر بک‌گراند آن را عوض کنید. چطور؟
روش‌های مختلفی برای تغییر پس‌زمینه وردپرس وجود دارد که ما در این مقاله همه آنها را مرحله‌به‌مرحله و با جزئیات توضیح دادیم. بیایید اول چند نکته مهم درباره انتخاب رنگ و تصویر بک‌گراند سایت‌‌های وردپرسی را مرور کنیم، بعد هم برویم سر اصل مطلب.
شروع قیمت از
۱۹۸ هزار تومان
چند نکته برای انتخاب بک‌گراند برای سایت وردپرس
برای انتخاب رنگ یا تصویر مناسب برای پس‌زمینه سایت وردپرسی، باید رنگ و تصویری که انتخاب می‌کنید، هم از نظر بصری جذاب باشد، هم خللی در تجربه کاربری ایجاد نکند. در کل به نکات زیر توجه داشته باشید:
- برای پس‌زمینه رنگی را انتخاب کنید که خواندن متن سایت را سخت نکند (پس‌زمینه تیره با متن سفید، یا پس‌زمینه روشن با متن تیره، معمولاً بهترین ترکیب هستند)؛
- بهتر است که رنگ پس‌زمینه با هویت بصری برندتان هماهنگی داشته باشد؛
- رنگ‌های ساده و مینیمال (مثل سفید، خاکستری ملایم، بژ یا رنگ‌های پاستلی) بهتر است؛ چون تمرکز کاربر را از محتوای سایت نمی‌گیرد؛
- اگر سایت‌تان از حالت تیره/روشن پشتیبانی می‌کند، دقت کنید که حتماً رنگ پس‌زمینه در هر دو حالت خوب دیده شود.
اگر هم می‌خواهید برای پس‌زمینه سایت‌تان تصویری آپلود کنید دقت کنید که:
- تصویر واضح و باکیفیت باشد تا در مانیتورهای بزرگ دونه‌دونه پیکسل‌ها دیده نشود؛
- تصویر را فشرده و کم‌حجم کنید تا باعث کندی بارگذاری سایت نشود؛
- تصاویر شلوغ باعث می‌شود متن‌ها و اجزای سایت سخت‌تر دیده و خوانده شوند؛ پس ترجیحاً از عکس‌های مینیمال و ساده استفاده کنید.
اگر رنگ و تصویر مورد نظرتان را انتخاب کردید، بیایید آموزش تغییر بک‌گراند وردپرس را شروع کنیم.
| ⭐ محتوای مرتبط: چگونه افرونه کپچا وردپرس را فعال کنیم؟ |
نحوه تغییر رنگ پس‌زمینه در وردپرس
به چهار روش می‌توانید پس‌زمینه وردپرس را تغییر دهید؛ در این بخش تک‌تک آنها را بررسی می‌کنیم.
روش اول: تغییر رنگ پس‌زمینه با سفارشی ساز قالب وردپرس
بسیاری از قالب‌های وردپرس این امکان را می‌دهند که رنگ پس‌زمینه را بدون نیاز به کدنویسی تغییر دهید. برای این کار:
- وارد پیشخوان وردپرس شوید و از منوی «نمایش»، روی گزینه «سفارشی‌سازی» کلیک کنید.
- در صفحه‌ای که باز می‌شود، روی گزینه «رنگ‌ها»، بزنید و با کشیدن نوار کنار پالت رنگی، رنگ دلخواه خود را انتخاب کنید.
- پس از انتخاب رنگ، روی دکمه «انتشار» کلیک کنید تا تغییرات اعمال شوند.
روش دوم: تغییر رنگ پس‌زمینه با اضافه کردن CSS سفارشی
اگر قالب شما گزینه‌ای برای تغییر رنگ پس‌زمینه ندارد، می‌توانید با اضافه کردن CSS سفارشی بک‌گراند سایت‌تان را تغییر دهید. کافی‌ست:
دوباره به پیشخوان وردپرس، به مسیر «نمایش» و بعد «سفارشی‌سازی» بروید و این بار در بخش «CSS اضافی»، کد زیر را وارد کنید:
body {background-color: #FFFFFF;}
فقط باید به‌جای کد رنگ (#FFFFFF)، کد رنگ دلخواه خودتان را وارد کنید. بعد هم روی دکمه «انتشار» کلیک کنید تا تغییرات ذخیره شوند.
روش سوم: تغییر رنگ پس‌زمینه برای پست‌های تکی
اگر نمی‌خواهید کل سایت‌تان را با یک رنگ واحد دیزاین کنید، می‌توانید رنگ پس‌زمینه هر پست‌بلاگ را در وردپرس با استفاده از CSS سفارشی تغییر دهید. برای مثال، می‌توانید رنگ پس‌زمینه مقاله‌ای را که بیشترین کامنت را داشته است تغییر دهید یا لی‌اوت هر پست را بر اساس اسم نویسندگان تنظیم کنید.
برای تغییر رنگ پس‌زمینه یک پست خاص:
اول باید شناسه یا همان ID پست را پیدا کنید. برای این کار، مقاله‌ای را که می‌خواهید بک‌گراند آن را تغییر دهید باز کرده و سپس روی آن کلیک‌راست کنید. حالا با استفاده از ابزار Inspect مرورگر، کلاس مربوط به پست یا همان article class (مانند postid-1349) را بیابید.
نکته: در بخش بالایی ابزار Inspect دنبال یک تگ HTML با کلاس postid-XXXX بگردید. این کلاس معمولاً روی تگ <body> صفحه قرار دارد. برای نمونه، عدد ۲۴۶۲۵۸ شناسه (ID) یکی از پست‌های وبلاگ لیموهاست است:
بعد از اینکه شناسه پست خود را پیدا کردید، می‌توانید از CSS سفارشی زیر برای تغییر رنگ پس‌زمینه یک پست استفاده کنید. فقط باید در بخش «CSS اضافی»، کد زیر را وارد کنید:
.postid-1349 {background: #D7DEB5;}
کد رنگ و شناسه پست را با مقادیر مورد نظر خود جایگزین کنید و روی «انتشار» کلیک کنید تا تغییرات اعمال شوند.
| ⭐ محتوای مرتبط: آموزش ساخت فوتر در وردپرس در کمتر از ۵ دقیقه! |
روش چهارم: افزودن رنگ‌های تصادفی به پس‌زمینه سایت
برای اینکه رنگ پس‌زمینه سایت در فواصل زمانی مختلف تغییر کند، می‌توانید از کد جاوااسکریپت استفاده کنید. برای این کار:
- ابتدا با استفاده از ابزار Inspect کلاس CSS بخشی از سایت (مثل
#masthead) را پیدا کنید. - در یک ویرایشگر متنی مثل Notepad فایل جدیدی بسازید و با نام
background.jsذخیره کنید. - کد زیر را در آن وارد کنید:
jQuery(function($) {$('#masthead').each(function() {var $this = $(this),colors = ['#e5d1d2', '#d2d1e1', '#c0ebf1'];setInterval(function() {var color = colors.shift();colors.push(color);$this.animate({ backgroundColor: color }, 2000);}, ۴۰۰۰);});});
-
اگر قالب شما پوشه‌ای برای فایل‌های جاوااسکریپت ندارد، با استفاده از نرم‌افزار FTP (مثل FileZilla) وارد پوشه قالب شوید و یک پوشه به نام
jsبسازید. -
فایل
background.jsرا در این پوشه بارگذاری کنید. -
سپس وارد فایل
functions.phpقالب شوید و کد زیر را در آن قرار دهید:
function wpb_bg_color_scripts() {wp_enqueue_script( 'background', get_stylesheet_directory_uri() . '/js/background.js', array( 'jquery-color' ), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );
به همین راحتی، رنگ پس‌زمینه سایت‌تان به شکل تصادفی تغییر می‌کند.
تا اینجا نحوه تغییر رنگ پس‌زمینه سایت در وردپرس را یاد گرفتید؛ حالا اگر بخواهیم به‌جای رنگ، تصویری برای بک‌گراند آن آپلود کنیم چه؟
| ⭐ محتوای مرتبط: فارسی سازی قالب و افزونه وردپرس به ۳ روش سریع و کاربردی |
نحوه تغییر تصویر پس‌زمینه در وردپرس
برای تغییر تصویر پس‌زمینه در وردپرس ۳ روش پیش رویتان است:
- تغییر تصویر پس‌زمینه از طریق تنظیمات قالب وردپرس
- تغییر تصویر پس‌زمینه در وردپرس با افزونه
- تغییر تصویر پس‌زمینه در وردپرس با استفاده از کد CSS
در ادامه هر کدام را جداگانه آموزش می‌دهیم.
روش اول: تغییر تصویر پس‌زمینه از طریق تنظیمات قالب وردپرس
وارد پیشخوان وردپرس شوید و از منوی کناری، روی گزینه «نمایش» و سپس «سفارشی‌سازی» بزنید. این بار در صفحه‌ای که برایتان باز می‌شود، دنبال گزینه‌ای با عنوان «تصویر پس‌زمینه» بگردید و روی آن کلیک کنید.
برای بارگذاری تصویر بک‌گراند، روی دکمه «انتخاب تصویر» بزنید و تصویر مورد نظرتان را از کامپیوتر خودتان یا کتابخانه پرونده‌های چندرسانه‌‌ای انتخاب و آپلود کنید.
بعد از انتخاب تصویر می‌توانید یک‌سری تغییرات در آن ایجاد کنید؛ مثل اینکه تصویر به چه شکلی نمایش داده شود (پر کردن صفحه، تکراری، اندازه سفارشی و …)، موقعیت عکس چطور باشد (وسط، چپ، راست و …).
بعد از انجام تنظیمات، دکمه انتشار را بزنید تا تغییرات ذخیره و اعمال شوند.
روش دوم: تغییر تصویر پس‌زمینه در وردپرس با افزونه المنتور
المنتور یکی از بهترین افزونه‌های صفحه‌ساز است که برای زیباسازی صفحات وردپرس کلی قابلیت دارد؛ یکی از قابلیت‌های آن هم تغییر تصویر پس‌زمینه وردپرس است.
تغییر بک‌گرامد وردپرس با المنتور هم خیلی ساده‌ست؛ فقط باید:
- از منوی «افزونه‌ها» افزونه Elementor را نصب و فعال کنید.
- به برگه یا نوشته‌ای که می‌خواهید برای آن پس‌زمینه بگذارید بروید.
- روی Edit with Elementor (ویرایش با المنتور) کلیک کنید.
- روی آیکون تنظیمات (چرخ‌دنده پایین صفحه) کلیک کنید.
- در تب Style (استایل) بخش Background رو باز کنید.
- روی آیکون مداد کلیک کنید و Choose Image رو بزنید.
- تصویرتان را انتخاب و آپلود کنید.
- در نهایت، روی Publish (انتشار) بزنید تا تصویر پس‌زمینه در این برگه اعمال شود.
| ⭐ محتوای مرتبط: افزونه المنتور چیست؟ (قابلیت‌ها + نحوه نصب و استفاده از المنتور) |
روش سوم: تغییر تصویر پس‌زمینه در وردپرس با استفاده از کد CSS
اگر کمی با کدنویسی آشنا باشید، می‌توانید با کمی تغییر در کدهای CSS تصویر پس‌زمینه سایت‌تان را تغییر دهیم و کنترل بیشتری روی آن داشته باشید. مثل روش‌ها قبلی، وارد پیشخوان وردپرس شوید و از منو، گزینه «نمایش» و سپس «سفارشی‌سازی» را کلیک کنید. حالا روی «CSS اضافی» بزنید و کد زیر را در باکس جایگذاری کنید:
body {background: url('example-image.jpg');}
به‌جای ‘example-image.jpg’ آدرس واقعی تصویری را که می‌خواهید در پس‌زمینه نمایش داده شود جایگزین کنید و روی دکمه «انتشار» بزنید تا تصویر پس‌زمینه روی کل صفحات سایت‌تان اعمال شود.
این هم از روش آخر! امیدوارم که با این راهنما توانسته باشید پس‌زمینه سایت‌تان را به سلیقه و دلخواه خودتان تغییر دهید. اگر سوالی دارید یا در یکی از مراحل به بن‌بست خورید حتماً برایمان کامنت کنید تا بیشتر راهنمایی‌تان کنیم.
راستی؛ حالا که تا اینجا آمدید، بد نیست سری هم به مقاله «معرفی افزونه‌های زیباسازی سایت وردپرس (۸ پلاگین برتر)» بزنید.
منابع: rankmath
دیدگاه ها
اولین نفری باشید که دیدگاه خود را ثبت می کنید