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

پس زمینه های سفارشی (Custom Backgrounds) وردپرس چیست؟

ما در این آموزش وردپرس می خواهیم به شما دوستان عزیز توضیحی درباره ی پس زمینه های سفارشی بدهیم و بگوییم که اصلا پس زمینه سفارشی چیست ؟ باید گفت که پس زمینه های سفارشی (Custom Backgrounds) یک ویژگی برای پوسته های وردپرس است که به توسعه دهندگان این اجازه را می دهد تا بتوانند پشتیبانی از سفارشی سازی رنگ و تصویر پس زمینه سایت را فعال کنند. شماباید در سایتتان قابلیت شخصی سازی پس زمینه ها در یک پوسته فعال کنید,

قرار دادن پس زمینه سفارشی وردپرس

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

حال در این قسمت شما وبمستران عزیز با وارد شدن به مسیر نمایش پس زمینه می توانید از قسمت گزینش تصویر, تصویر مورد نظرتان را برای قرار گرفتن در پس زمینه قالب انتخاب کنید. یا اینکه اگر تنها مایل به تغییر رنگ پس زمینه سایت را داشتید شما می توانید از بخش رنگ پس‌زمینه استفاده کنید. حال باید بگوییم که پس از اینکه تغییرات را ذخیره کردید در بالای صفحه تنظیمات پس زمینه می توانید پیش نمایشی از آنچه در پس زمینه سایت شما نشان داده خواهد شد را ببنید. این ویژگی جالب در خیلی از قالب های وردپرس فعال نیست. اما شما وبمستران عزیز برای فعال کردن این ویژگی ها می توانید با ویرایش فایل functions.php که در پایین نحوه انجام این کار را می گوییم می توانید این ویژگی را به قالب اضافه کنید.

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

خب در این قسمت از مقاله می خواهیم به شما وبمستران عزیز توضیحی درباره ی فعال کردن پشتیبانی از پس زمینه های دلخواه قالب وردپرس را بدهیم که باید بگوییم که برای فعال کردن پس زمینه دلخواه لازم است تا تابع add_theme_support() را در فایل functions.php قالب فعلی قرار دهید.همانطور که ما برای شما کدها را در زیر به نمایش گذاشته ایم :

$defaults = array(
‘default-color’ = ‘#EEEEEE’,
‘default-image’ = get_template_directory_uri() . ‘/images/default_background.jpg’,
‘wp-head-callback’ = ‘_custom_background_cb’,
‘admin-head-callback’ = ”,
‘admin-preview-callback’ = ”
);
add_theme_support( ‘custom-background’, $defaults );

شما دوستان عزیز بعداز اینکه این کدها در فایل functions.php قرار دادید باید مقادیر آرایه های default-color (رنگ پیشفرض) و default-image (تصویر پس زمینه پیشفرض) را مطابق با میل خود تغییر دهید.

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

شما می توانید “myprefix_background_image” آدرس تصویر پس زمینه را برای صفحه یا نوشته وارد کنید همانطور که در تصاویر پایین مشاهده می کنید .

<?php<br /><br /><br /><br /><br /><br /><br />
// Add inline style to set body background via “myprefix_background_image” custom field<br /><br /><br /><br /><br /><br /><br />
function myprefix_custom_field_background() {<br /><br /><br /><br /><br /><br /><br />
if ( $background = get_post_meta( get_the_ID(), ‘myprefix_background_image’, true ) ) { ?><br /><br /><br /><br /><br /><br /><br />
<style type=”text/css”><br /><br /><br /><br /><br /><br /><br />
body { background-image: url( “<?php echo esc_url( $background ); ?>” ); }<br /><br /><br /><br /><br /><br /><br />
</style><br /><br /><br /><br /><br /><br /><br />
<?php }<br /><br /><br /><br /><br /><br /><br />
add_action( ‘wp_head’, ‘myprefix_custom_field_background’ );

<?php
// Add inline style to set body background via “myprefix_background_image” custom field
function myprefix_custom_field_background() {
if ( $background = get_post_meta( get_the_ID(), ‘myprefix_background_image’, true ) ) { ?>
<style type=”text/css”>
body { background-image: url( “<?php echo esc_url( $background ); ?>” ); }
</style>
<?php }
add_action( ‘wp_head’, ‘myprefix_custom_field_background’ );

اگر شما کاربران گرامی به function hooks در اکشن wp_head دقت کنید این باعث میشه که هر وقت شما فیلد دلخواه رو استفاده کنید سی اس اس خطی به تگ header سایت شما اضافه میشه تا پس زمینه دلخواه شما بر طبق فیلد دلخواه شما جایگزین شود .

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

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

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

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

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

حال به سراغ روش دوم می رویم که باید گفت وردپرس چندین کلاس css به عناصر html اضافه می کند شما هم به راحتی با ساختن کلاس های css می توانید تصاویری را به پس زمینه خود اختصاص دهید.

شما وبمستران عزیز که به دو روش میتوانید تصویر یا رنگ پس زمینه خود را بصورت تصادفی تغییر دهید ۱-کد ۲-افزونه.
با کمک کد

حال میخواهیم به توضیح این روش بپردازیم که در اولین روش شما میتوانید با اضافه کردن کد رنگ پس زمینه سایت وردپرسی خود را به صورت تصادفی تغییر بدهید.برای اینکار ابتدا کد زیر را به فایل functions.php اضافه کنی(قبل از اعمال تغییرات از این فایل نسخه بک آپ تهیه کنید)
?

unction wpb_bg() {
$rand = array(‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’);
$color =’#’.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
echo $color;
}

حالا شما وبمستران عزیز باید وارد فایل header.php شوید و برچسب <body> را با کد زیر جابجا کنید:
?
1

<body <?php body_class(); ?> style=”background-color:<?php wpb_bg();?>”>>

تغییرات را ذخیره کنید و حالا سایت خود را مشاهده کنید.

با کمک افزونه

در این روش شما وبمستران عزیز به کمک افزونه وردپرس نیز میتوانید رنگ پس زمینه سایت خود را تغییر بدهید.اسم این افزونه Fabulous Background Colors میباشد که به راحتی از لینک زیر میتوانید این افزونه را دریافت و نصب کنید و سپس از طریق تنظیمات افزونه تغییرات دلخواه را اعمال کنید.
body{<br /><br /><br /><br /><br /><br /><br /><br />
background:url(آدرس عکس شما) no-repeat;<br /><br /><br /><br /><br /><br /><br /><br />
}
1
2
3

body{
background:url(آدرس عکس شما) no-repeat;
}

در قسمت آدرس عکس شما باید آدرس تصویرتون رو قرار بدید.