نحوه اضافه کردن یک تصویر پس زمینه در وردپرس (6 روش آسان)

آیا می خواهید یک تصویر پس زمینه به سایت وردپرس خود اضافه کنید؟

تصاویر پس‌زمینه می‌توانند وب‌سایت شما را جذاب‌تر و زنده‌تر نشان دهند. بعلاوه، تصاویر پس زمینه به خوبی انتخاب شده می توانند هویت برند شما را تقویت کرده و پیام شما را به طور موثرتری نشان دهند.

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

چرا یک تصویر پس زمینه وردپرس اضافه کنیم؟

افزودن یک تصویر به وب سایت وردپرس خود می تواند آن را ایجاد کند برای بازدیدکنندگان جذاب تر است. می توانید به سرعت توجه کاربران را جلب کنید و آنها را با محتوای خود درگیر کنید.

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

علاوه بر این، می‌توانید یک ویدیوی YouTube را به‌عنوان پس‌زمینه کامل اضافه کنید یا یک نمایش اسلاید تصویری که محتوای شما را زنده می‌کند.

با این حال، پیشنهاد می‌کنیم تصاویر پس‌زمینه‌ای را انتخاب کنید که حواس‌تان را پرت نمی‌کند یا خواندن محتوای عنوان وبلاگ وردپرس. پس‌زمینه باید تجربه کاربر را بهبود بخشد و به ارائه پیام شما به بازدیدکنندگان کمک کند.

علاوه بر این، مهم است که تصویر پس‌زمینه‌ای انتخاب کنید که سازگار با موبایل باشد و بر سرعت وب‌سایت شما تأثیری نداشته باشد. در غیر این صورت، به SEO وردپرس شما آسیب می رساند.< /p>

در این مقاله، روش‌های مختلفی را برای اضافه کردن تصویر پس‌زمینه وردپرس به اشتراک می‌گذاریم.

ما روش‌های متعددی از جمله استفاده از سفارشی‌کننده تم وردپرس، ویرایشگر کامل سایت، افزونه، تم‌ساز و موارد دیگر را پوشش خواهیم داد. به سادگی روی پیوند زیر کلیک کنید تا به بخش دلخواه خود بروید:

آماده اید؟ بیایید شروع کنیم.

روش 1. با استفاده از سفارشی ساز تم وردپرس خود یک تصویر پس زمینه اضافه کنید

بیشتر تم های محبوب وردپرس با پشتیبانی پس زمینه سفارشی ارائه می شوند. این ویژگی به شما امکان می‌دهد به راحتی یک تصویر پس‌زمینه تنظیم کنید، و اگر طرح زمینه شما از آن پشتیبانی می‌کند، این روش را توصیه می‌کنیم.

اما، اگر گزینه منوی Customizer وجود ندارد، پس ممکن است قالب شما ویرایش کامل سایت را فعال کرده باشد. در بخش بعدی، نحوه استفاده از ویرایشگر کامل سایت برای تغییر تصویر پس‌زمینه را توضیح خواهیم داد.

برای استفاده از «Customizer»، باید از صفحه ظاهر » سفارشی کردن در مدیر وردپرس خود بازدید کنید. با این کار سفارشی کننده طرح زمینه وردپرس که در آن می توانید تنظیمات تم مختلف را هنگام مشاهده پیش نمایش زنده وب سایت خود تغییر دهید.

توجه داشته باشید که گزینه هایی که مشاهده می کنید بر اساس موضوع وردپرسی که استفاده می کنید متفاوت است. برای این آموزش، ما از طرح زمینه Astra.

اگر از تم دیگری استفاده می‌کنید، ممکن است لازم باشد مستندات آن طرح زمینه را جستجو کنید. همچنین می‌توانید با توسعه‌دهنده تم تماس بگیرید تا درصورتی‌که نمی‌توانید آن را در سفارشی‌کننده پیدا کنید، چگونه می‌توانید یک تصویر پس‌زمینه اضافه کنید.

در گزینه‌های سفارشی‌کننده تم Astra، باید روی “Global” در پانل سمت چپ کلیک کنید.

وقتی این کار را انجام دادید، گزینه‌های مختلف «Global» را برای سفارشی کردن تم Astra خود خواهید دید.

بروید و روی بخش “رنگ‌ها” کلیک کنید.

در اینجا، می‌توانید رنگ‌های تم، از جمله رنگ پس‌زمینه را تغییر دهید. همچنین می‌توانید پیوندها، متن بدنه، عنوان‌ها، حاشیه‌ها و موارد دیگر را سفارشی کنید.

برای افزودن یک تصویر پس‌زمینه، باید به بخش «رنگ سطح» بروید. سپس، می‌توانید روی گزینه «پس‌زمینه سایت» کلیک کنید و به تب «تصویر» بروید.

پس از آن، به سادگی روی دکمه “انتخاب تصویر پس زمینه” کلیک کنید.

با این کار کتابخانه رسانه وردپرس ظاهر می شود، جایی که می توانید تصویری را از رایانه خود آپلود کنید یا تصویری را که قبلا آپلود کرده اید انتخاب کنید.

بعد از اینکه تصویر را برای پس زمینه خود انتخاب کردید، باید روی دکمه “انتخاب” کلیک کنید.

با این کار پنجره رسانه بسته می‌شود و پیش‌نمایش تصویر پس‌زمینه انتخابی خود را در سفارشی‌کننده تم خواهید دید.

وقتی از ظاهر آن راضی شدید، ادامه دهید و روی دکمه “انتشار” در بالا کلیک کنید تا تنظیمات خود را ذخیره کنید.

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

روش 2. افزودن یک تصویر پس زمینه سفارشی با استفاده از ویرایشگر کامل سایت

اگر از موضوع وردپرس مبتنی بر بلوک، سپس می توانید یک تصویر پس زمینه سفارشی با استفاده از ویرایشگر کامل سایت (FSE) اضافه کنید.

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

برای این آموزش، از تم پیش‌فرض «بیست بیست و دو» استفاده می‌کنیم. برای راه اندازی ویرایشگر کامل سایت، به سادگی از داشبورد وردپرس خود به ظاهر » ویرایشگر بروید.

هنگامی که در ویرایشگر کامل سایت قرار گرفتید، برای آپلود یک تصویر پس‌زمینه، باید یک بلوک «پوشش» به الگوی خود اضافه کنید.

به سادگی روی علامت “+” در بالا کلیک کنید و بلوک “پوشش” را اضافه کنید.

بروید و روی دکمه “آپلود” یا “کتابخانه رسانه” در بلوک “پوشش” کلیک کنید تا یک تصویر پس‌زمینه به بلوک اضافه کنید.

با این کار پنجره آپلود کننده رسانه وردپرس باز می شود.

مرحله بعدی انتخاب تصویری است که می‌خواهید به عنوان پس‌زمینه وب‌سایت استفاده کنید.

وقتی تصویر را انتخاب کردید، به سادگی روی دکمه “انتخاب” کلیک کنید.

هنگامی که تصویر به بلوک “پوشش” اضافه شد، باید آن را به عنوان پس‌زمینه صفحه تنظیم کنید.

برای انجام این کار، به سادگی روی نماد “نمایش فهرست” در بالا (نماد با 3 خط تیره) کلیک کنید. این یک نمای کلی از عناصر طرح زمینه، مانند سرصفحه و پاورقی سایت را باز می کند.

بعد از آن، به سادگی همه عناصر الگو را در زیر بلوک «پوشش» در نمای فهرست بکشید و رها کنید.

وقتی همه آنها در زیر قرار گرفتند، تصویر بلوک “پوشش” به عنوان پس‌زمینه سایت نشان داده می‌شود.

پس از آن، می‌توانید تصویر پس‌زمینه را با کلیک بر روی بلوک «پوشش» و انتخاب نماد چرخ‌دنده در گوشه سمت راست بالای صفحه تنظیم کنید. با این کار پانل تنظیمات “Block” باز می شود.

در اینجا، گزینه‌هایی برای تبدیل تصویر به یک پس‌زمینه ثابت، تنظیم پوشش آن، ویرایش رنگ و موارد دیگر پیدا خواهید کرد.

وقتی کارتان تمام شد، فراموش نکنید که روی دکمه «ذخیره» کلیک کنید.

و بس! با استفاده از ویرایشگر کامل سایت، با موفقیت یک تصویر پس زمینه اضافه کردید.

روش 3. افزودن تصویر پس زمینه با استفاده از تم ساز وردپرس

راه دیگری که می توانید تصاویر پس زمینه سفارشی را به وب سایت خود اضافه کنید، استفاده از یک تم ساز وردپرس مانند SeedProd.

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

برای این آموزش، از نسخه SeedProd Pro استفاده خواهیم کرد زیرا شامل سازنده تم است. همچنین یک SeedProd Lite نسخه ای که می توانید به صورت رایگان امتحان کنید.

ابتدا، باید افزونه SeedProd را نصب و فعال کنید. اگر به کمک نیاز دارید، لطفاً به راهنمای ما در نحوه نصب افزونه وردپرس.

پس از فعال‌سازی، صفحه خوش‌آمدگویی SeedProd را در داشبورد وردپرس خود خواهید دید.

در مرحله بعد، باید کلید مجوز خود را وارد کنید و روی دکمه “تأیید کلید” کلیک کنید تا نسخه حرفه ای افزونه فعال شود. می توانید کلید مجوز خود را در ناحیه حساب SeedProd خود پیدا کنید.

وقتی همه چیز تنظیم شد، باید به SeedProd » Theme Builder در پنل مدیریت وردپرس بروید.

بروید و روی دکمه «طرح‌های زمینه» در بالا کلیک کنید.

SeedProd اکنون چندین قالب تم را برای انتخاب ارائه می دهد.

می توانید نشانگر را روی هر قالبی که می خواهید استفاده کنید کلیک کنید. برای این آموزش، از قالب تم Starter استفاده خواهیم کرد.

از اینجا، SeedProd الگوهای مختلفی مانند صفحه اصلی، پست تک، صفحه واحد، نوار کناری، هدر، و موارد دیگر.

برای افزودن یک تصویر پس‌زمینه که در کل وب‌سایت و همه قالب‌های تم ظاهر می‌شود، ادامه دهید و روی گزینه «ویرایش طراحی» در زیر CSS جهانی کلیک کنید.

در صفحه بعدی، تنظیمات جهانی CSS را می‌بینید که می‌توانید تغییر دهید.

برای شروع سفارشی کردن، کافیست روی گزینه “پس زمینه” کلیک کنید.

پس از آن، گزینه های “تصویر پس زمینه” را مشاهده خواهید کرد.

بروید و روی “استفاده از تصویر خود” کلیک کنید تا عکس خود را آپلود کنید. همچنین، می‌توانید روی دکمه «استفاده از تصویر سهام» کلیک کنید تا یک تصویر سهام را جستجو کنید تا به‌عنوان پس‌زمینه وب‌سایت خود استفاده کنید.

هنگامی که یک تصویر پس‌زمینه اضافه کردید، سازنده SeedProd یک پیش‌نمایش زنده را نمایش می‌دهد.

در صورت نیاز می توانید موقعیت پس زمینه را تنظیم کنید. همچنین می‌توانید انتخاب کنید که از پوشش تمام‌صفحه استفاده کنید یا آن را در حالت تکرار قرار دهید.

به‌علاوه، می‌توانید سطح تاریکی تصویر پس‌زمینه خود را با حرکت دادن نوار لغزنده «پس‌زمینه کم‌رنگ» ویرایش کنید. هر چه امتیاز بالاتر باشد، تصویر تیره تر خواهد بود.

هنگامی که ویرایش تصویر پس‌زمینه را تمام کردید، به سادگی روی دکمه «ذخیره» در بالا کلیک کنید و تنظیمات جهانی CSS را ببندید.

اگر می‌خواهید یک تصویر پس‌زمینه سفارشی برای بخش‌های مختلف وب‌سایت خود اضافه کنید، می‌توانید آن قالب‌های تم جداگانه را در SeedProd ویرایش کنید. برای جزئیات بیشتر، می توانید راهنمای ما را در چگونه به راحتی یک پوسته وردپرس سفارشی ایجاد کنیم.

روش 4. اضافه کردن یک تصویر پس زمینه سفارشی در وردپرس با استفاده از یک افزونه

استفاده از افزونه وردپرس برای افزودن تصویر پس زمینه بسیار انعطاف پذیرتر از گزینه های داخلی وردپرس است.

برای شروع، باید Full Screen Background Pro. برای جزئیات بیشتر، می توانید راهنمای گام به گام ما را در نحوه نصب افزونه وردپرس.

این افزونه به شما امکان می دهد برای هر پست، صفحه یا دسته بندی یک پس زمینه متفاوت تنظیم کنید. تصویر پس‌زمینه به‌طور خودکار روی تمام‌صفحه تنظیم می‌شود، اما می‌تواند خودش را برای تناسب با صفحه‌نمایش دستگاه همراه تنظیم کند.

پس از فعال‌سازی، برای پیکربندی تنظیمات افزونه، باید به Appearance » تصویر BG تمام صفحه مراجعه کنید.

< /شکل>

سپس، از شما خواسته می شود که کلید مجوز خود را اضافه کنید، که می توانید آن را از ایمیلی که پس از خرید افزونه دریافت کرده اید دریافت کنید. همچنین می‌توانید از حساب خود در وب‌سایت افزونه به کلید دسترسی پیدا کنید.

سپس، باید روی دکمه «ذخیره گزینه‌ها» کلیک کنید تا کلیدتان فعال شود.

اکنون، باید آماده باشید تا تصاویر پس زمینه را به سایت وردپرس خود اضافه کنید. اولین کاری که باید انجام دهید این است که روی دکمه «افزودن تصویر جدید» در صفحه تنظیمات افزونه کلیک کنید.

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

بروید و روی دکمه “انتخاب تصویر” کلیک کنید تا یک تصویر را آپلود یا انتخاب کنید. به محض انتخاب تصویر، می‌توانید پیش‌نمایش زنده تصویر را روی صفحه‌نمایش ببینید.

بعد، باید نامی برای این تصویر ارائه دهید. این نام فقط برای شما است، بنابراین می توانید هر چیزی را در اینجا تایپ کنید.

در نهایت، باید جایی را که می‌خواهید از آن به عنوان صفحه پس‌زمینه استفاده کنید، انتخاب کنید.

وقتی انتخاب کردید که آیا این پس‌زمینه برای کل سایت، برای پست‌ها، دسته‌ها، بایگانی‌ها یا جاهای دیگر باشد، فراموش نکنید که تغییرات خود را ذخیره کنید.

شما می توانید هر تعداد عکس که می خواهید به قسمت های مختلف سایت خود اضافه کنید. برای انجام این کار، کافی است به صفحه Appearance » Fullscreen BG Image بروید و این روند را تکرار کنید.

اگر بیش از یک تصویر را برای استفاده در سطح جهانی یا برای پست‌ها، صفحه‌ها و دسته‌ها تنظیم کنید، افزونه به‌طور خودکار تصاویر پس‌زمینه را به‌صورت نمایش اسلاید نمایش می‌دهد.

در مرحله بعد، ممکن است بخواهید زمان محو شدن یک تصویر و زمانی که پس از آن یک تصویر پس‌زمینه جدید شروع به محو شدن می‌کند، تنظیم کنید. می‌توانید این کار را در بخش «تنظیمات» افزونه انجام دهید.

زمانی که در اینجا وارد می‌کنید بر حسب میلی‌ثانیه است و 1 ثانیه 1000 میلی‌ثانیه است. اگر می خواهید تصویر پس زمینه بعد از 20 ثانیه محو شود، باید 20000 را وارد کنید.

فراموش نکنید که روی دکمه “ذخیره گزینه ها” کلیک کنید تا تغییرات خود را ذخیره کنید.

تصاویر پس‌زمینه برای پست‌ها، صفحات و دسته‌ها

کامل Screen Background Pro همچنین به شما امکان می دهد تصاویر پس زمینه را برای پست ها، صفحات، دسته ها، برچسب ها و موارد دیگر تنظیم کنید.

فقط پست یا صفحه‌ای را ویرایش کنید که می‌خواهید تصویر پس‌زمینه دیگری نمایش داده شود. در صفحه ویرایش پست، کادر جدید “تصویر پس زمینه تمام صفحه” را در زیر ویرایشگر پست مشاهده خواهید کرد.

برای استفاده از یک تصویر پس زمینه برای دسته ها ، پست ها و صفحات ، باید به صفحه ظاهر شود »تصویر تمام صفحه BG . سپس بر روی دکمه “افزودن تصویر جدید” کلیک کنید.

پس از بارگذاری تصویر خود ، می توانید یک دسته ، پست ها ، صفحات ، بایگانی ها و گزینه های دیگر را از “زمینه ای را انتخاب کنید که برای نمایش منوی کشویی این تصویر انتخاب کنید.

بیایید بگوییم که می خواهید یک تصویر پس زمینه را برای صفحات دسته بندی نشان دهید. برای این کار ، به سادگی “دسته” را از منوی کشویی انتخاب کنید.

<شکل کلاس = "wp-block-image size-full"> > >

این افزونه همچنین گزینه ای را برای محدود کردن تصویر پس زمینه در دسته ها ، پست ها یا صفحات خاص ارائه می دهد.

به عنوان مثال ، اگر می خواهید یک تصویر پس زمینه سفارشی را برای دسته های خاص اضافه کنید ، به سادگی نامهای دسته بندی را در زیر “دسته بندی ها را انتخاب کنید تا تصاویر را در قسمت” محدود کنید. را وارد کنید.

پس از تنظیم همه ، وقت آن است که تصویر خود را در کنار تنظیمات خود ذخیره کنید.

اکنون با موفقیت یک تصویر پس زمینه را برای پست ها ، صفحات و دسته بندی های خاص اضافه کرده اید.

روش 5. تصاویر پس زمینه را با استفاده از قهرمان CSS اضافه کنید

CSS Hero است یک افزونه وردپرس که به شما امکان می دهد بدون برنامه نویسی تغییراتی در موضوع خود ایجاد کنید.

می توانید تصاویر پس زمینه را به سرعت در چند مرحله ساده اضافه کنید. اما ابتدا باید CSS Hero را نصب و فعال کنید. برای جزئیات بیشتر، لطفاً راهنمای ما را در نحوه نصب افزونه WordPress.

پس از انجام این کار ، می توانید سفارشی کردن وب سایت خود را شروع کنید.

اولین کاری که شما باید انجام دهید این است که صفحه اصلی خود را در مرورگر خود باز کنید. در آنجا ، پیوند “سفارشی با CSS Hero” را در نوار مدیر /.

<شکل کلاس = "wp-block-image size-full">

به سادگی روی پیوند کلیک کنید ، و گزینه های CSS Hero را باز خواهید کرد.

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

<شکل کلاس = "wp-block-image size-full">
برای دیدن تنظیمات برای افزودن یک تصویر ، به جلو بروید و روی “پس زمینه” کلیک کنید.

از آنجا ، به سادگی روی “تصویر” کلیک کنید.

سپس می توانید تصویری را از Unsplash انتخاب کنید یا خود را بارگذاری کنید تا زمینه خود را ایجاد کنید.

<شکل کلاس = "wp-block-image size-full">

وقتی روی تصویری که می خواهید کلیک کنید ، دکمه “اعمال تصویر” را مشاهده خواهید کرد.

پس ، ممکن است بخواهید انتخاب کنید که چه اندازه ای را می خواهید تصویر شما باشد. ما توصیه می کنیم نسخه بزرگ را انتخاب کنید تا در صفحه کشیده شود.

سرانجام ، می توانید “ذخیره و انتشار” را در پایین ضربه بزنید تا تصویر پس زمینه برای سایت خود ذخیره کنید.

روش 6. تصاویر پس زمینه سفارشی را در هر نقطه در وردپرس با استفاده از کد CSS اضافه کنید

به طور پیش فرض ، وردپرس چندین کلاس CSS را به عناصر مختلف HTML در سراسر سایت وردپرس خود اضافه می کند. بنابراین ، می توانید به راحتی تصاویر پس زمینه سفارشی را به پست های فردی ، دسته ها ، نویسندگان و سایر صفحات با استفاده از این کلاسهای CSS تولید وردپرس .

به عنوان مثال ، اگر در وب سایت خود به نام تلویزیون دسته ای دارید ، وردپرس به طور خودکار این کلاس های CSS را به برچسب بدنه اضافه می کند وقتی شخصی صفحه دسته تلویزیون را مشاهده می کند.

<بدنه کلاس = "دسته بایگانی دسته بندی-TV طبقه 4">

شما می توانید از بازرسی ابزار برای دیدن دقیقاً کدام کلاس های CSS توسط وردپرس به برچسب بدنه اضافه می شود.

<شکل کلاس = "wp-block-image size-full">

شما می توانید از کلاس رده TV یا رده 4 کلاس CSS استفاده کنید تا فقط این صفحه دسته بندی را متفاوت کنید.

بیایید یک تصویر پس زمینه سفارشی را به یک صفحه بایگانی دسته اضافه کنیم. برای این کار ، باید CSS های سفارشی زیر را به موضوع خود اضافه کنید:

body.categor-tv {
پس زمینه-تصویر: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg") ؛
پس زمینه موقعیت: مرکز مرکز.
پس زمینه اندازه: پوشش;
background-repeat: no-repeat;
پس زمینه-پیوست: ثابت.
}

فراموش نکنید که URL تصویر پس زمینه و کلاس دسته را با مواردی که از سایت خود دارید جایگزین کنید.

علاوه بر این ، می توانید زمینه های سفارشی را به پست ها و صفحات فردی اضافه کنید. وردپرس دارای کلاس CSS با شناسه پست یا صفحه در برچسب بدن است. شما می توانید از همان کد CSS استفاده کنید و فقط را جایگزین کنید. طبقه بندی-TV با کلاس CSS پس از خاص.
<شکل کلاس = "wp-block-image size-full">

برای اطلاعات بیشتر ، به آموزش ما در نحوه اضافه کردن CS های سفارشی در وردپرس .

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

اگر این مقاله را دوست داشتید، لطفاً در کانال یوتیوب برای آموزش های ویدیویی وردپرس. همچنین می‌توانید ما را در تویتر و فیس بوک.