تا به حال تصمیم گرفته اید که تغییری به ظاهر سایت تون بدید؟ آیا از رنگ پس زمینه سایت تون خسته شدید؟ آیا می خواهید یک تصویر پس زمینه به سایت وردپرس خود اضافه کنید؟ از تصاویر پس زمینه می تونید برای جذاب نشان دادن وب سایت تون استفاده کنید. هم چنین رنگ ها نقش مهمی در جذب کاربران وب سایت و نحوه تعامل آن ها دارند. در این مقاله، به شما نحوه تغییر پس زمینه وردپرس نشان می دهیم. ابتدا یاد می گیرید که چگونه به راحتی یک تصویر پس زمینه به سایت وردپرس خود اضافه کنید. در ادامه مشاهده می کنید چطور به طور تصادفی رنگ پس زمینه وردپرس رو تغییر بدید.
تغییر پس زمینه وردپرس
ظاهر یک سایت در جذب کاربران از اهمیت بالایی برخوردار است. انتخاب قالب مناسب و سرعت بارگذاری در کنار یک محتوای مفید و کاربردی کاربر را به سایت شما وفادار می کند. اما شاید بعد از مدتی استفاده از یک قالب کاربردی دل تان بخواهد تغییری ایجاد کنید. مثلا تصویری در پس زمینه پست ها بگذارید. رنگ آن را عوض کنید. و خلاصه یک خانه تکانی حسابی برای سایت تان انجام دهید. لازم نیست هزینه اضافی کنید و قالب سایت تان را عوض کنید. با مطالعه این مقاله با هر میزان سوادی که در طراحی سایت دارید می توانید به تغییر پس زمینه وردپرس بپردازید.
در این مقاله تصمیم گرفتیم به طور کامل و قد به قدم شما را همراهی کنیم تا به راحتی بتوانید تنوع و زیبایی را به سایت تان هدیه دهید. با ما همراه باشید.
گذاشتن تصویر پس زمینه در سایت وردپرس
به 3 روش زیر می توانید تصویر دلخواه تان را در پس زمینه سایت قرار دهید:
روش 1. با استفاده از تنظیمات قالب وردپرس خود
محبوب ترین قالب های وردپرس از پس زمینه سفارشی (custom background) پشتیبانی می کنند. به کمک این ویژگی به راحتی یک تصویر پس زمینه را در سایت وردپرس خود تنظیم کنید. اگر قالب سایت شما از ویژگی پس زمینه سفارشی پشتیبانی می کند، از این روش برای افزودن تصویر پس زمینه به سایت وردپرس خود استفاده کنید.
اما اگر قالب سایت شما از این ویژگی پشتیبانی نمی کند یا تصاویر پس زمینه را در سایت دوست ندارید، می توانید رنگ پس زمینه وردپرس تغییر دهید.
ابتدا در پیشخوان روی Appearance سپس Customize کلیک کنید. با این کار بخش سفارشی سازی قالب وردپرس راه اندازی می شود که می توانید هنگام مشاهده پیش نمایش زنده وب سایت خود، تنظیمات قالب را تغییر دهید.
در مرحله بعدی، روی گزینه Background image کلیک کنید. این پنل به صورت اسلاید نمایش داده می شود و گزینه های بارگذاری (upload) یا انتخاب تصویر پس زمینه (select a background image) برای وب سایت شما را نشان می دهد.
برای ادامه بر روی دکمه انتخاب تصویر (select image) کلیک کنید.
بعد از این که صفحه آپلود رسانه وردپرس ظاهر شد می توانید تصویری را از کامپیوتر خود بارگذاری کنید. هم چنین می توانید تصویر بارگذاری شده قبلی را از media library انتخاب کنید.
بعد از بارگذاری یا انتخاب تصویری که می خواهید به عنوان پس زمینه استفاده کنید، روی دکمه انتخاب تصویر (choose image) کلیک کنید.
با این کار پیش نمایش تصویر انتخابی خود را مشاهده خواهید کرد.
در زیر تصویر، گزینه هایی برای تنظیم تصویر پس زمینه وجود دارد. در بخش Preset، می توانید نحوه نمایش تصویر پس زمینه را انتخاب کنید:
- fill screen (نمایش کامل)
- fit screen (نمایش مناسب)
- repeat (تکرار تصویر)
- Custom (سفارشی)
هم چنین می توانید با کلیک روی فلش ها، موقعیت تصویر پس زمینه را انتخاب کنید. مثلا با کلیک بر روی مرکز، تصویر با مرکز صفحه هماهنگ می شود.
فراموش نکنید که برای ذخیره تنظیمات خود بر روی دکمه Save & Publish در بالا کلیک کنید.
شما با موفقیت یک تصویر پس زمینه را به سایت وردپرس خود اضافه کرده اید.
روش 2. افزودن تصویر پس زمینه در وردپرس با استفاده از افزونه
اگر قالب وردپرس شما از ویژگی پس زمینه سفارشی پشتیبانی نمی کند، باید از یک افزونه استفاده کنید. با استفاده از یک افزونه می توانید امکانات و انعطاف پذیری بیشتری داشته باشید.
مزیت استفاده از افزونه در تغییر پس زمینه وردپرس:
- این روش راحت تر، سازگار با هر قالب وردپرس است.
- امکان تنظیم چندین تصویر پس زمینه را دارد. به عنوان مثال، شما می توانید پس زمینه های مختلف را در مناطق مختلف سایت اضافه کنید: صفحات، پست ها، دسته ها و برچسب ها. یا می توانید یک ویدیو را به عنوان پس زمینه سایت خود اضافه کنید!
- به طور خودکار تمام تصاویر پس زمینه را تمام صفحه و با قابلیت ریسپانسیو منتشر می کند. تصویر پس زمینه شما به طور خودکار اندازه خود را در دستگاه های کوچکتر تغییر می دهد.
ابتدا باید افزونه Full Screen Background Pro را نصب و فعال کنید. پس از فعال سازی افزونه، برای پیکربندی تنظیمات، به Appearance و سپس به Full Screen BG Image بروید.
در این مرحله از شما خواسته می شود کلید لایسنس خود را وارد کنید. این اطلاعات را از ایمیلی که پس از خرید افزونه دریافت کرده اید یا در حساب خود در سایت افزونه دریافت کنید.
در مرحله بعدی، برای ذخیره تغییرات خود باید روی دکمه ذخیره تنظیمات (Save Settings) کلیک کنید. حالا باید تصاویر پس زمینه را به سایت وردپرس خود اضافه کنید. بر روی دکمه افزودن تصویر جدید (Add New Image) در صفحه تنظیمات افزونه کلیک کنید. با این کار به صفحه بارگذاری تصویر پس زمینه می روید.
برای بارگذاری یا انتخاب تصویر، روی دکمه انتخاب تصویر (Choose Image) کلیک کنید. به محض انتخاب تصویر، می توانید پیش نمایشی از تصویر را بر روی صفحه خود مشاهده کنید.
در مرحله بعد، شما باید نامی برای این تصویر انتخاب کنید. این نام نمایش داده نمی شود. بنابراین می توانید از هر نامی استفاده کنید. در آخر باید مکانی را انتخاب کنید که می خواهید از این تصویر به عنوان صفحه پس زمینه استفاده شود.
Full Screen Background Pro به شما این امکان را می دهد که تصاویر را به عنوان یک پس زمینه کلی سایت (global) تنظیم کنید یا در بخش های مختلف سایت خود مانند دسته ها، بایگانی ها، صفحه اول یا صفحه وبلاگ به کار ببرید.
فراموش نکنید که برای ذخیره تصویر پس زمینه خود، روی دکمه ذخیره تصویر (save image) کلیک کنید. با مراجعه به Appearance و سپس Full Screen BG Image هر تعداد تصویری که می خواهید اضافه کنید. اگر بیش از یک تصویر برای سطح global استفاده کنید، افزونه به طور خودکار تصاویر پس زمینه را به ترتیب نمایش می دهد. می توانید مدت زمان محو شدن (fade) تصویر را نیز در این بخش تنظیم کنید.
دقت کنید که باید زمان را بر حسب میلی ثانیه وارد کنید. مثلا اگر می خواهید تصویر پس زمینه بعد از 20 ثانیه محو شود، باید عدد 20000 را وارد کنید.
فراموش نکنید که برای ذخیره تغییرات خود، روی دکمه ذخیره تنظیمات (save settings) کلیک کنید.
تصاویر پس زمینه برای پست ها، صفحات و دسته ها
Full Screen Background Pro به شما این امکان را می دهد که تصاویر پس زمینه را برای پست ها، صفحات، دسته ها، برچسب ها و موارد دیگر نیز تنظیم کنید. فقط کافی است به صفحه ویرایش پست یا صفحه ای که می خواهید یک تصویر پس زمینه متفاوت نمایش دهد بروید. در صفحه ویرایش پست، کادر Full Screen Background Image را در زیر ویرایشگر پست مشاهده خواهید کرد.
برای تنظیم تصویر پس زمینه برای یک دسته خاص، باید به صفحه Appearance و سپس Full Screen BG Image بروید و روی دکمه افزودن تصویر جدید (Add New Image) کلیک کنید.
پس از بارگذاری تصویر خود، می توانید دسته (Category) موردنظر را انتخاب کنید.
اکنون باید شناسه دسته را وارد کنید. برای یافتن شناسه دسته به صورت زیر عمل کنید:
چگونه شناسه دسته وردپرس را پیدا کنیم؟
بعضی اوقات، در تنظیمات افزونه ای لازم است شناسه یک دسته، پست یا برچسب را پیدا کنید. یافتن شناسه دسته وردپرس بسیار راحت است. ابتدا باید به صفحه Posts بروید و سپس از پنل مدیریت وردپرس خود Categories را انتخاب کنید. حالا می توانید لیستی از دسته های خود را مشاهده کنید. موس را روی عنوان دسته ای که به دنبال شناسه آن هستید، ببرید. اکنون می توانید URL ویرایش دسته را در گوشه پایین سمت چپ صفحه خود مشاهده کنید.
همان طور که در تصویر زیر مشاهده می کنید شناسه دسته شما دقیقاً در URL وجود دارد. شناسه عددی است که بعد از “category & tag_ID =” و قبل از “&post_type” می آید. در تصویر زیر، شناسه دسته بندی وردپرس شما 2 است.
هم چنین می توانید شناسه دسته را در صفحه ویرایش پست مشاهده کنید. برای این کار کافی است یک دسته را باز کنید و شناسه دسته را در نوار آدرس مرورگر مشاهده خواهید کرد.
اکنون شناسه دسته را در جایی که می خواهید تصویر را نمایش دهید وارد کنید. فراموش نکنید که برای ذخیره تصویر خود روی ذخیره تصویر (save image) کلیک کنید.
روش 3. با استفاده از کد CSS
وردپرس به طور پیش فرض، چندین کلاس CSS را به عناصر مختلف HTML در سایت وردپرس شما اضافه می کند. با استفاده از این کلاس های CSS می توانید به راحتی تصاویر پس زمینه سفارشی را به پست ها، دسته ها، نویسنده و صفحات دیگر اضافه کنید.
در قطعه کد زیر کلاس های CSS را برای دسته TV در تگ body مشاهده می کنید.
<body class="archive category category-tv category-4">
برای مشاهده کلاس های CSS در سایت خود از ابزار inspect استفاده کنید. برای این منظور به دسته موردنظر در سایت بروید. وقتی تمام پست های دسته لیست شد روی صفحه سایت راست کلیک کنید. در منو گزینه inspect را بزنید. مانند تصویر زیر می توانید با استفاده از ابزار inspect دقیقاً ببینید کدام کلاس های CSS توسط وردپرس به تگ body اضافه شده اند.
شما می توانید به کلاس های category-tv یا category-4 استایل دلخواه خود را بدهید. به این ترتیب تصویر پس زمینه فقط به این دسته اضافه می شود.
خب! بیایید با هم یک تصویر پس زمینه سفارشی به یک دسته اضافه کنیم. 🙂 شما باید کد CSS سفارشی را به قالب خود اضافه کنید.
body.category-tv { background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}فراموش نکنید که در کد بالا URL تصویر پس زمینه و نام کلاس دسته خود را جایگزین کنید.
هم چنین می توانید پس زمینه های سفارشی خود را به پست ها و صفحات دیگر اضافه کنید. وردپرس کلاس CSS را با شناسه پست یا برگه در تگ body اضافه می کند. می توانید از همان کد CSS استفاده کنید. فقط نام کلاس .Category-tv را با کلاس CSS پست خود جایگزین کنید.
تغییر رنگ پس زمینه وردپرس به صورت رندوم
همان طور که در ابتدای مقاله گفتیم می توانید با تغییر رنگ پس زمینه وردپرس جان دوباره ای به سایت خود بدهید. به سه روش زیر پس زمینه های زیبا و رنگارنگ برای وب سایت خود ایجاد کنید:
روش 1: با استفاده از کد، رنگ پس زمینه تصادفی را در وردپرس اضافه کنید
در این روش شما باید کد زیر را به فایل های وردپرس خود اضافه کنید. ابتدا باید این کد را به فایل functions.php قالب خود اضافه کنید.
function 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> را که به صورت زیر خواهد بود پیدا کنید:
<body <?php body_class(); ?>>
کد زیر را در تگ body کپی کنید:
[<body <?php body_class(); ?> style="background-color:<?php wpb_bg();?>">>]
تغییرات خود را ذخیره کرده و سپس به وب سایت خود مراجعه کنید تا نتیجه کد را در عمل مشاهده کنید.
روش 2: با استفاده از افزونه، نوارهای رنگی تصادفی را اضافه کنید
این روش برای مبتدیانی که نمی خواهند فایل های قالب وردپرس خود را ویرایش کنند آسان تر است. ابتدا باید افزونه Fabulous Background Colors را نصب و فعال کنید. این افزونه به هیچ تنظیماتی برای پیکربندی نیاز ندارد. حالا به وب سایت خود مراجعه کنید و نوار های رنگارنگ را به عنوان رنگ پس زمینه در وب سایت خود مشاهده کنید. این نوارها هر 5 ثانیه تغییر رنگ می دهند.
روش 3: استفاده از کد CSS برای افزودن رنگ پس زمینه غیر تصادفی در وردپرس
همان طور که در بخش گذاشتن تصویر در پس زمینه وردپرس اشاره شد تمامی قالب های استاندارد وردپرس از تابع body_class() در تگ body استفاده می کنند. کلاس های CSS در این تگ قرار دارند. به همان روشی که در بالا توضیح داده شد، به کمک ابزار inspect کلاس مربوط به دسته، پست، برچسب و هر صفحه ای را می توانید به دست بیاورید. در این مثال از کلاس category-photography برای دسته photography استفاده شده است.
با افزودن کد CSS زیر به قالب وردپرس می توانید رنگ پس زمینه یک دسته خاص را تغییر دهید.
به همین ترتیب شناسه کلاس هر پست در تگ body را نیز پیدا خواهید کرد. می توانید از آن برای استایل دهی متفاوت به هر پست وردپرس استفاده کنید.
امیدواریم این مقاله به شما کمک کرده باشد که چگونه تصویر پس زمینه را به وردپرس اضافه کنید. هم چنین یاد گرفتید که چگونه به طور تصادفی رنگ پس زمینه وردپرس را تغییر دهید.
دانلود انواع پس زمینه برای وردپرس
به زودی تعداد بسیار زیادی پس زمینه برای سایت وردپرس در انتهای این مقاله قرار خواهد گرفت.
۸۵ دیدگاه دربارهٔ «4 روش تغییر پس زمینه وردپرس | افزودن تصویر پس زمینه;
مطالب سایتتون خیلی جامع و مفید هست تشکر
مطالب بسیار مفیدی دارید تشکر
سلام ، سپاس
با توجه به آموزش شما انجام دادم و بسیار سپاسگزارم