اضافه کردن تصویر پس زمینه در وردپرس ممکن است برای افراد مبتدی کمی دشوار باشد اما برای انجام این کار روش های مختلفی وجود دارد که با استفاده از ان ها شما می توانید برای سایت خود تصویر زمینه ای را ایجاد کنید. در مقاله گذاشتن عکس در پس زمینه وردپرس، ما به شما نشان خواهیم داد که چگونه به راحتی با استفاده از 4 روش مختلف یک تصویر پس زمینه به سایت وردپرسی خود اضافه کنید.
انواع روش های تغییر عکس صفحه اصلی در وردپرس
محبوب ترین قالب های وردپرس پشتیبانی پس زمینه که قابل سفارشی شدن هستند را ارائه می دهند. این قابلیت به شما این امکان را می دهد که به راحتی یک تصویر پس زمینه را در سایت وردپرس خود تنظیم کنید. اگر قالب شما از قابلیت سفارشی کردن تصویر پس زمینه برخوردار است، ما توصیه می کنیم که از این روش برای افزودن تصویر پس زمینه به سایت وردپرسی خود استفاده کنید.
روش 1. گذاشتن عکس در صفحه اول سایت با استفاده از تنظیمات قالب وردپرس
برای قرار دادن عکس در پس زمینه سایت باید مراحل زیر را دنبال کنید:
ابتدا از قسمت “نمایش” در داشبورد وردپرس خود گزینه سفارشی سازی را انتخاب کنید. با این کار تنظیم کننده قالب وردپرس راه اندازی می شود و می توانید هنگام مشاهده پیش نمایش زنده وب سایت خود ، تنظیمات مختلف قالب خود را تغییر دهید.
2. باید روی گزینه “پس زمینه” کلیک کنید. این پنل به صورت اسلایدی نمایش داده می شود. از این قسمت همچنین می توانید گزینه های بارگذاری و یا انتخاب تصویر پس زمینه برای وب سایت را انتخاب کنید و وارد آخرین مرحله گذاشتن عکس در صفحه اول سایت شوید.
3. با زدن گزینه ” انتخاب تصویر ” پاپ آپ آپلود کننده رسانه وردپرس ظاهر می شود که در آن می توانید تصویر پس زمینه موردنظرتان را از رایانه خود بارگذاری کنید. همچنین می توانید یک تصویری را که قبلاً بارگذاری کرده بودید را از کتابخانه رسانه انتخاب کنید.
4. پس از بارگذاری و یا انتخاب تصویر پس زمینه موردنظرتان، باید روی دکمه انتخاب تصویر کلیک کنید. با این کار پاپ آپ آپلود کننده رسانه بسته می شود و پیش نمایش تصویر انتخابی خود را در تنظیم کننده قالب مشاهده خواهید کرد.
در قسمت پایین تصویر، گزینه های تصویر پس زمینه را نیز خواهید دید. در بخش “از پیش تعیین شده”، می توانید نحوه نمایش تصویر پس زمینه را انتخاب کنید: صفحه کامل، تکرار یا سفارشی.
همچنین می توانید با کلیک بر روی فلش ها، موقعیت تصویر پس زمینه را انتخاب کنید. فراموش نکنید که برای ذخیره تنظیمات خود باید بر روی دکمه “ذخیره و انتشار” در قسمت بالا کلیک کنید. پس از انجام این مراحل شما با موفقیت یک تصویر پس زمینه را به سایت وردپرس خود اضافه خواهید کرد.
روش 2. گذاشتن عکس پس زمینه در وردپرس با استفاده از یک افزونه
این روش نسبت به روشهای قبلی انعطافپذیرتر است، زیرا با تمام قالبهای وردپرس سازگار بوده و امکان استفاده از چندین تصویر پسزمینه برای بخشهای مختلف سایت را فراهم میکند. تصاویر پسزمینه در این افزونه بهصورت تمامصفحه و کاملاً ریسپانسیو نمایش داده میشوند و در دستگاههای مختلف بهطور خودکار اندازه مناسب میگیرند.
نحوه تنظیم و استفاده از افزونه
پس از نصب و فعالسازی افزونه Full Screen Background Pro، به مسیر Appearance » Full Screen BG Image بروید و کد لایسنس ارسالشده به ایمیلتان را وارد کنید. سپس گزینه ذخیره تنظیمات را بزنید. برای افزودن تصویر جدید، روی افزودن تصویر جدید کلیک کنید و با انتخاب گزینه انتخاب تصویر، فایل موردنظر را بارگذاری یا از کتابخانه انتخاب کنید. پیشنمایش تصویر بلافاصله نمایش داده میشود.
در ادامه، یک نام برای تصویر وارد کنید (برای کاربران قابل مشاهده نیست) و سپس تعیین کنید تصویر در کدام بخش سایت نمایش داده شود. این افزونه قابلیت تنظیم تصویر بهصورت Global یا برای بخشهایی مثل دستهها، آرشیوها، صفحه اصلی و صفحه وبلاگ را دارد. در پایان، گزینه ذخیره تصویر را بزنید. از بخش Image » Full Screen BG میتوانید تصاویر بیشتری اضافه کنید. اگر بیش از یک تصویر بهصورت Global فعال باشد، افزونه آنها را به شکل اسلایدشو نمایش میدهد.
همچنین میتوانید برای هر پست، صفحه، دسته یا برچسب، تصویر پسزمینه اختصاصی تنظیم کنید. کافی است وارد صفحه ویرایش پست شوید و از جعبه Full Screen Background Image تصویر دلخواهتان را انتخاب کنید. برای دستهها نیز پس از بارگذاری تصویر جدید، گزینه Category را انتخاب کرده و شناسه دسته را وارد کنید.
روش 3. تصاویر پس زمینه را با استفاده از CSS Hero به وردپرس اضافه کنید
CSS Hero یک افزونه وردپرس است که به شما این امکان را می دهد که بدون نوشتن حتی یک خط کد، در قالب خود تغییراتی ایجاد کنید و در چند مرحله ساده می توانید تصاویر پس زمینه را به سرعت به وردپرس اضافه کنید. ابتدا باید CSS Hero را نصب و فعال کنید. پس از انجام این کار می توانید شخصی سازی وب سایت خود را شروع کنید. اکنون صفحه اصلی خود را در مرورگر باز کنید. پیوند “سفارشی کردن با CS SHero” را در نوار مدیر خود مشاهده خواهید کرد.
بعد از کلیک روی آن پیوند، گزینه های CSS Hero را مشاهده خواهید کرد و سپس ان گزینه موردنظر خود را انتخاب کنید.
header-filter-gradient را مشاهده خواهید کرد. وقتی روی این قسمت کلیک می کنید، می توانید پیوند پس زمینه را در نوار کناری سمت چپ انتخاب کنید و از آن قسمت می توانید روی “تصویر” کلیک کنید. اکنون می توانید تصویری از Unsplash و یا فایل موردنظر خود را برای پس زمینه انتخاب کنید.
هنگامی که بر روی تصویر مورد نظر خود کلیک می کنید، دکمه “اعمال تصویر” را مشاهده خواهید کرد. سپس می توانید اندازه خود را برای اندازه تصویر خود انتخاب کنید. ما نسخه بزرگ آن را انتخاب کردیم تا در صفحه گسترده شود. در قسمت پایین “ذخیره و انتشار” را بزنید و تصویر پس زمینه اکنون برای سایت شما ایجاد می شود.
روش 4. اضافه کردن تصاویر پس زمینه سفارشی با استفاده از کد CSS
به طور پیش فرض، وردپرس چندین کلاس CSS را به عناصر مختلف HTML در سراسر سایت وردپرس شما اضافه می کند. با استفاده از این کلاس های CSS تولید شده توسط وردپرس می توانید به راحتی تصاویر پس زمینه سفارشی را به پست ها ، دسته ها ، نویسنده و صفحات دیگر اضافه کنید . به عنوان مثال، اگر در وب سایت خود دسته ای به نام TV دارید ، وردپرس وقتی کسی این دسته را مشاهده می کند، به طور خودکار این کلاس های CSS را به برچسب های سایت اضافه می کند.
[code language=”php”]
<body class=”archive category category-tv category-4″>
[/code]
می توانید با استفاده از ابزار inspect دقیقاً ببینید که کدام کلاس های CSS توسط وردپرس به برچسب body اضافه می شوند. بنابراین برای دیدن کلاس های اضافه شده توسط وردپرس از ابزار inspect استفاده کنید.
در ادامه آموزش گذاشتن عکس پس زمینه در وردپرس قصد داریم به شما آموزش دهیم که چگونه می توانید یک تصویر پس زمینه سفارشی شده را به یک صفحه بایگانی اضافه کنیم. شما باید این CSS سفارشی را در سایت خود اضافه کنید.
[code language=”php”]
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;
}
[/code]
همچنین می توانید پس زمینه های سفارشی را به پست ها و صفحات منفرد اضافه کنید. وردپرس کلاس CSS را با شناسه پست یا صفحه در برچسب های سایت اضافه می کند. می توانید از همان کد CSS استفاده کنید و تنها کافی است .category-tv را با کلاس CSS خاص پست جایگزین کنید.
با انجام دادن هر یک از روش های ذکر شده در مقاله آموزش تغییر عکس صفحه اصلی در وردپرس می توانید برای سایت خود پس زمینه موردعلاقه تان را انتخاب کنید و ما امیدواریم که این مقاله در این زمینه به شما کمک کرده باشد.
چرا باید تصویر پسزمینه وردپرس اضافه کنیم؟
افزودن تصویر پسزمینه در وردپرس میتواند ظاهر سایت شما را حرفهایتر و جذابتر کند و تجربه کاربری بهتری ایجاد کند. این کار به شما کمک میکند هویت بصری برندتان را تقویت کنید، توجه کاربران را جلب کنید و در عین حال محتوای سایت را زندهتر و هماهنگتر نشان دهید. البته باید از تصاویر بهینه، سبک و مناسب موبایل استفاده کنید تا سرعت سایت و سئو آسیب نبیند. مزایای اضافه کردن تصویر پسزمینه در وردپرس:
- تقویت هویت بصری و برندینگ سایت
- جلب توجه کاربران و افزایش تعامل
- امکان افزودن ویدیو یا اسلایدشو جهت جذابیت بصری
- ایجاد تمایز در طراحی صفحات مختلف سایت
- بهبود تجربه کاربری در صورت استفاده از تصاویر مناسب و غیرحواسپرتکن
جدول خلاصه گذاشتن عکس پس زمینه در وردپرس
| روش | توضیح | مناسب برای | مزایا |
|---|---|---|---|
| استفاده از تنظیمات قالب وردپرس | تغییر پسزمینه از بخش سفارشیسازی قالب | قالبهایی که از پسزمینه پشتیبانی میکنند | ساده، بدون نیاز به افزونه، پیشنمایش زنده |
| استفاده از افزونه Full Screen Background Pro | افزودن پسزمینه تمامصفحه با امکان چند تصویر | همه قالبها و کاربران حرفهای | پشتیبانی از چندپسزمینه، ریسپانسیو، اسلایدشو، قابل تنظیم برای بخشهای مختلف |
| استفاده از افزونه CSS Hero | افزودن یا تغییر پسزمینه بهصورت بصری و بدون کدنویسی | مبتدی تا متوسط | کاملاً بصری، تنظیمات متنوع، بدون نیاز به کدنویسی |
| استفاده از CSS سفارشی | تنظیم پسزمینه برای بخشهای خاص با کدنویسی CSS | کاربران حرفهای و توسعهدهندگان | کاملاً سفارشیسازیشده، مناسب برای صفحات یا دستههای خاص |
فعلی
تغییر عکس صفحه اصلی در وردپرس✅
سوالات متداول
چرا تصویر پسزمینه در موبایل بهدرستی نمایش داده نمیشود؟
بهترین فرمت تصویر برای پسزمینه تمامصفحه چیست؟
چطور برای هر صفحه یا دسته یک پسزمینه متفاوت تنظیم کنیم؟
تحریریه ژاکت
مشاهده تیم تحریریه
مطالب مشابه
