برای اضافه کردن یک تصویر پس زمینه در وردپرس چه کار کنیم
برای اضافه کردن یک تصویر پس زمینه در وردپرس چه کار کنیم؟
با مهراکت همراه باشید تا به شما آموزش تغییر و اضافه کردن بک گراند را در وردپرس با دو روش ممکن تشریح کنیم.
افزودن تصویر پس زمینه در وردپرس
ا میخواهید به سایت وردپرس خود تصویر پس زمینه اضافه نمایید؟ تصاویر زمینه میتوانند به سایت شما جلوه ای زیبا و حرفه ای بیافزایند.
حال برخی مدیران سایت ها از تصویر , برخی پترن و بعضی افراد هم رنگ ثابت برای بک گراند سایت خود در نظر می گیرند.
با دیجی وردپرس همراه باشید تا نحوه انتخاب یک تصویر سفارشی به عنوان پس زمینه در وردپرس را خدمت شما بیان کنیم.
اهمیت تصویر پس زمینه در زیبایی سایت
ممکن است تا کنون هنگام وبگردی با سایت هایی مواجه شده باشید که ظاهر بسیار خیره کننده ای دارند، خب این را هم باید بدانید که تصویر پس زمینه نقش بسیار مهمی در زیبایی این سایت ها دارد. اگر میخواهید در سایت خود از تصویر پس زمینه استفاده نمایید بهتر است بدانید که در این مطلب با استفاده از 2 روش انجام این کار را به شما عزیزان آموزش خواهم داد.
اضافه کردن یک تصویر پس زمینه در وردپرس
در این مقاله، ما به شما نحوه اضافه کردن یک تصویر پس زمینه در وردپرس را نشان می دهیم.
روش 1. اضافه کردن یک تصویر پس زمینه با استفاده از تنظیمات وردپرس
اکثر تم های رایگان یا پرمیوم وردپرس از ویژگی سفارشی کردن پس زمینه را پشتیبانی می کنند.
این قابلیت اجازه می دهد که به راحتی تنظیمات پس زمینه سایت ورپرس خود را انجام دهید.
اگر تم شما از قابلیت سفارشی کردن تصویر پس زمینه پشتیبانی می کند، توصیه می کنم که از این متود برای اضافه کردن یک تصویر پس زمینه در وردپرس استفاده کنید.
ولی اگر تم شما از این قابلیت پشتیبانی نمی کند می توانید از روش های دیگر این مقاله استفاده کنید.
در ابتدا در صفحه مدیریت وردپرس به قسمت نمایش>> سفارشی سازی بروید.
با این کار Customizer قالب وردپرس راه اندازی میشود جایی که در آن می توانید تنظیمات تم های مختلف را تغییردهید و همچنین پیش نمایش وب سایت خود را ببینید.
اضافه کردن یک تصویر پس زمینه با استفاده از تنظیمات وردپرس
بر روی دکمه انتخاب تصویر کلیک نمایید تا مراحل ادامه یابد.اکنون پاپ آپ آپلود رسانه در وردپرس را مشاهده خواهید نمود.
اکنون میتوانید تصاویر از قبل آپلود شده را انتخاب نمایید و یا وارد تب آپلود فایل شده و سپس تصویر خود را آپلود نمایید.
اضافه کردن یک تصویر پس زمینه با استفاده از تنظیمات وردپرس
برای ادامه روی دکمه انتخاب تصویر کلیک کنید.
بیشتر بخوانید:
انتخاب تصویر
پنجره آپلود رسانه وردپرس برای اضافه کردن یک تصویر پس زمینه در “وردپرس” را باز می کند و شما می توانید یک تصویر از کامپیوتر خود را آپلود کنید.
همچنین می توانید یک تصویر آپلود شده از کتابخانه رسانه( media library) را انتخاب کنید.
انتخاب تصویر
در بخش های دیگر پنل سمت راست میتوانید گزینه های دیگر تصویر پس زمینه را مشاهده نمایید،
در این گزینه ها شما میتوانید نحوه نمایش تصویر پس زمینه را مشخص نمایید، میتوانید مشخص نمایید که تمام صفحه را تصویر پر کند،
میتوانید مشخص نمایید که در صفحه تصویر تکرار شود، و میتوانید یک محل مشخص را برای نمایش تصویر مشخص نمایید.
فراموش نکنید که در انتها بر روی دکمه ذخیره و انتشار کلیک نمایید تا تغییرات ذخیره و اعمال شوند.
اکنون میتوانید سایت خود را مشاهده نمایید.
انتخاب تصویر
کنونی
در زیر قسمت preset میتوانید انتخاب کنید که تصویر پس زمینه چگونه نمایش داده شود:
- fill screen پرکردن صفحه
- fit screen فیت درصفحه
- repeat تکرار
- custom به صورت سفارشی
همچنین میتوانید موقعیت تصویر پس زمینه را با کلیک بر روی فلش ها انتخاب کنید.
با کلیک بر روی مرکز، تصویر در مرکز صفحه قرار می گیرد .
فراموش نکنید که برای ذخیره تنظیمات برروی دکمه ذخیره و انتشار دربالای صفحه کلیک کنید .
و در آخر موفق میشوید که تصویر پس زمینه را به سایت وردپرسی اضافه کنید .
روش 2: افزودن تصویر پس زمینه در وردپرس با استفاده از CSS
به صورت پیشفرض وردپرس کلاس های CSS زیادی را در عناصر HTML استفاده میکند.
شما میتوانید به سادگی تصاویر پس زمینه خود را در صفحات پست ها، دسته بندی ها، نویسندگان و صفحات دیگر استفاده نمایید، فقط کافیست که از این کلاس ها استفاده نمایید تا تصویر را در مکان مورد نظر خود استفاده نمایید.
برای مثال اگر شما یک دسته بندی با نام TV در سایت خود داشته باشید، سپس وردپرس زمانی که صفحه دسته بندی TV را باز کند کلاس های آن را در تگ body فراخوانی خواهد کرد.
|
1
|
<body class="archive category category-tv category-4"> |
|
1
|
<img class=“aligncenter size-full wp-image-29803” src=“https://digiwp.com/wp-content/uploads/2017/05/inspectbodyclasses-digiwp-1.png” alt=“inspectbodyclasses” width=“550” height=“317” />
|
شما میتوانید با استفاده از ابزار inspect element در سایت خود کلاس های css استفاده شده را مشاهده نمایید.
در این مثال با توجه به تصویر بالا شما میتوانید با استفاده از کلاس های category-tv و category-4 صفحه دسته بندی مورد نظر خود را سفارشی سازی نمایید، و یا به آن تصویر پس زمینه اضافه نمایید.
|
1
2
3
4
5
6
7
|
body.category-tv { background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;} |
فراموش نکنید که آدرس تصویر را بجای آدرس موجود در خط دوم قرار دهید.
پس از افزودن این کد در فایل استایل وردپرس style.css میتوانید به سایت خود مراجعه نمایید تا تصویر را در سایت خود مشاهده نمایید.
منابع:
