آیا می خواهید یک تصویر پس زمینه به سایت وردپرس خود اضافه کنید؟
از تصاویر پس زمینه می توان برای جذابیت و زیبایی بیشتر وب سایت شما استفاده کرد.
در این مقاله ، ما به شما نشان خواهیم داد که چگونه به راحتی یک تصویر پس زمینه به سایت وردپرس خود اضافه کنید.
آموزش فیلم h4>
اگر دستورالعمل های کتبی را ترجیح می دهید ، لطفاً به خواندن ادامه دهید.
روش 1. با استفاده از تنظیمات قالب وردپرس خود یک تصویر پس زمینه اضافه کنید h4>
محبوب ترین مضامین وردپرس a > با پس زمینه سفارشی پشتیبانی کنید. این ویژگی به شما امکان می دهد به راحتی یک تصویر پس زمینه را در سایت وردپرس خود تنظیم کنید.
اگر طرح زمینه شما از ویژگی پس زمینه سفارشی پشتیبانی می کند ، توصیه می کنیم از این روش برای افزودن تصویر پس زمینه به سایت وردپرس خود استفاده کنید.
با این حال ، اگر طرح زمینه شما از این ویژگی پشتیبانی نمی کند یا نحوه اجرای تصاویر پس زمینه را دوست ندارید ، می توانید سایر گزینه های ذکر شده در آموزش ما را امتحان کنید.
ابتدا باید از صفحه Appearance »Customize در مدیر وردپرس خود بازدید کنید. با این کار تنظیم کننده قالب وردپرس راه اندازی می شود که می توانید هنگام مشاهده پیش نمایش زنده وب سایت خود ، تنظیمات تم مختلف را تغییر دهید.
بعد ، باید روی گزینه “تصویر پس زمینه” کلیک کنید. این پانل به صورت اسلاید نمایش داده می شود و گزینه های بارگذاری یا انتخاب تصویر پس زمینه برای وب سایت شما را نشان می دهد.
برای ادامه بر روی دکمه انتخاب تصویر کلیک کنید.
با این کار پاپ آپ آپلود کننده رسانه وردپرس ظاهر می شود که در آن می توانید تصویری را از رایانه خود بارگذاری کنید. همچنین می توانید یک تصویر بارگذاری شده قبلی را از کتابخانه رسانه انتخاب کنید.
در مرحله بعد ، باید پس از بارگذاری یا انتخاب تصویری که می خواهید به عنوان پس زمینه استفاده کنید ، روی دکمه انتخاب تصویر کلیک کنید.
با این کار پنجره بازدارنده رسانه بسته می شود و پیش نمایش تصویر انتخابی خود را در تنظیم کننده طرح زمینه مشاهده خواهید کرد.
در زیر تصویر ، همچنین می توانید گزینه های تصویر پس زمینه را مشاهده کنید. در بخش «از پیش تعیین شده» ، می توانید نحوه نمایش تصویر پس زمینه را انتخاب کنید: صفحه پر ، صفحه مناسب ، تکرار یا سفارشی.
همچنین می توانید با کلیک روی فلش های زیر ، موقعیت تصویر پس زمینه را انتخاب کنید. با کلیک بر روی مرکز ، تصویر با مرکز صفحه هماهنگ می شود.
برای ذخیره تنظیمات ، فراموش نکنید که بر روی دکمه “ذخیره و انتشار” در بالا کلیک کنید. این همه ، شما با موفقیت یک تصویر پس زمینه را به سایت وردپرس خود اضافه کرده اید.
بروید و از وب سایت خود دیدن کنید تا آن را در عمل مشاهده کنید.
روش 2. با استفاده از یک پلاگین یک تصویر پس زمینه سفارشی در وردپرس اضافه کنید h4>
این روش بسیار انعطاف پذیرتر است. با هر قالب WordPress کار می کند و به شما امکان می دهد چندین تصویر پس زمینه را تنظیم کنید.
همچنین می توانید پس زمینه های مختلفی را برای هر پست ، صفحه ، دسته یا هر بخش دیگری از سایت وردپرس خود تنظیم کنید.
به طور خودکار تمام تصاویر پس زمینه شما را به صورت تمام صفحه و پاسخگوی تلفن همراه نشان می دهد. این به این معنی است که تصویر پس زمینه شما به طور خودکار اندازه خود را در دستگاه های کوچکتر تغییر می دهد.
ابتدا باید Full Screen Background Pro . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .
برای پیکربندی تنظیمات افزونه ، باید از Appearance »Full Screen BG Image بازدید کنید.
از شما خواسته می شود کلید مجوز خود را اضافه کنید. این اطلاعات را می توانید از طریق ایمیلی که پس از خرید افزونه دریافت کرده اید یا از حساب خود در وب سایت این افزونه دریافت کنید.
بعد ، برای ذخیره تغییرات خود ، باید روی دکمه “ذخیره تنظیمات” کلیک کنید. اکنون آماده اید که تصاویر پس زمینه را به سایت وردپرس خود اضافه کنید.
پیش بروید و بر روی دکمه “افزودن تصویر جدید” در صفحه تنظیمات افزونه کلیک کنید. با این کار به صفحه بارگذاری تصویر پس زمینه می روید.
برای بارگذاری یا انتخاب تصویر ، روی دکمه “انتخاب تصویر” کلیک کنید. به محض انتخاب تصویر ، می توانید پیش نمایش مستقیمی از تصویر را بر روی صفحه خود مشاهده کنید.
بعد ، شما باید نامی برای این تصویر ارائه دهید. این نام به صورت داخلی استفاده خواهد شد ، بنابراین می توانید از هر چیزی در اینجا استفاده کنید.
سرانجام ، باید مکانی را انتخاب کنید که می خواهید از این تصویر به عنوان صفحه پس زمینه استفاده شود.
Full Screen Background Pro به شما امکان می دهد تصاویر را به عنوان یک پس زمینه جهانی تنظیم کنید ، یا می توانید از بخشهای مختلف وب سایت خود مانند دسته ها ، بایگانی ها ، صفحه اول یا صفحه وبلاگ انتخاب کنید.
برای ذخیره تصویر پس زمینه خود ، فراموش نکنید که روی دکمه ذخیره تصویر کلیک کنید.
با مراجعه به صفحه Appearance »Full Screen BG Image می توانید هر تعداد تصویر که می خواهید اضافه کنید.
اگر بیش از یک تصویر را تنظیم کنید که در سطح جهانی استفاده شود ، این افزونه به طور خودکار نمایش تصاویر پس زمینه را به صورت نمایش اسلاید آغاز می کند.
می توانید مدت زمان کمرنگ شدن تصویر و مدت زمان کم رنگ شدن یک تصویر پس زمینه را تنظیم کنید.
زمان ورود به اینجا بر حسب میلی ثانیه است. اگر می خواهید پس زمینه پس از 20 ثانیه تصویر پس زمینه محو شود ، باید 20000 وارد کنید.
فراموش نکنید که برای ذخیره تغییرات روی دکمه تنظیمات ذخیره کلیک کنید.
تصاویر پس زمینه برای پست ها ، صفحات و دسته ها h4>
تمام صفحه Background Pro همچنین به شما امکان می دهد تصاویر پس زمینه را برای تک پست ها ، صفحات ، دسته ها ، برچسب ها و موارد دیگر تنظیم کنید.
فقط پست / صفحه ای را که می خواهید تصویر پس زمینه دیگری در آن نمایش داده شود ویرایش کنید. در صفحه ویرایش پست ، کادر جدید “تصویر پس زمینه تمام صفحه” را در زیر ویرایشگر پست مشاهده خواهید کرد.
برای استفاده از تصویر پس زمینه برای یک دسته خاص ، باید به صفحه Appearance »Full Screen BG Image بروید و سپس روی دکمه” افزودن تصویر جدید “کلیک کنید.
پس از بارگذاری تصویر خود ، می توانید “دسته” را به عنوان زمینه ای که می خواهید تصویر پس زمینه را در آن نمایش دهد ، انتخاب کنید.
اکنون شناسه دسته خاصی را وارد کنید یا حلزون جایی که می خواهید وارد شوید نمایش تصویر. به راهنمای ما در مورد چگونگی شناسه دسته را در وردپرس پیدا کنید .
برای ذخیره تنظیمات ، فراموش نکنید که تصویر خود را ذخیره کنید.
روش 3. تصاویر پس زمینه را با استفاده از CSS Hero اضافه کنید h4>
قهرمان CSS یک افزونه وردپرس که به شما امکان می دهد بدون لمس یک خط کد ، در موضوع خود تغییراتی ایجاد کنید.
در چند مرحله ساده می توانید تصاویر پس زمینه را به سرعت اضافه کنید. ابتدا باید قهرمان CSS . پس از انجام این کار ، وقت آن است که وب سایت خود را سفارشی کنید.
اکنون صفحه اصلی خود را در مرورگر خود باز کنید. پیوند “سفارشی کردن با CS SHero” را در نوار مدیر خود مشاهده خواهید کرد. .
بعد از کلیک روی آن پیوند ، باز شدن گزینه های CSS Hero را مشاهده خواهید کرد. موشواره را روی ناحیه مورد نظر جهت افزودن تصویر قرار دهید.
در تصویر زیر ، منطقه .header-filter-gradient-gradient را مشاهده خواهید کرد. وقتی روی این قسمت کلیک کردید ، می توانید پیوند پس زمینه را در نوار کناری سمت چپ انتخاب کنید.
پیوند پس زمینه باز می شود. از آنجا می توانید روی "تصویر" کلیک کنید. اکنون می توانید از Unsplash یا آپلودهای خود تصویری برای ایجاد پس زمینه خود انتخاب کنید.
هنگامی که بر روی تصویر مورد نظر خود کلیک می کنید ، دکمه "اعمال تصویر" را مشاهده خواهید کرد. سپس می توانید اندازه خود را برای اندازه تصویر خود انتخاب کنید. نسخه بزرگ را انتخاب کردیم تا در صفحه گسترده شود.
در پایین "ذخیره و انتشار" را بزنید و تصویر پس زمینه اکنون برای سایت شما ذخیره می شود.
روش 4. با استفاده از کد CSS در هرجای وردپرس تصاویر پس زمینه سفارشی را اضافه کنید h4>
به طور پیش فرض ، وردپرس چندین کلاس CSS را به عناصر مختلف HTML در سراسر سایت وردپرس شما اضافه می کند. با استفاده از این کلاسهای CSS ایجاد شده توسط وردپرس .
به عنوان مثال ، اگر در وب سایت خود دسته ای به نام TV دارید ، وردپرس با مشاهده شخصی از صفحه دسته تلویزیون ، این کلاس های CSS را به طور خودکار به برچسب بدن اضافه می کند.
شما می توانید از ابزار بازرسی برای دیدن دقیقاً کلاسهای CSS توسط WordPress به برچسب بدن اضافه می شود.
می توانید از کلاس CSS category-tv یا category-4 استفاده کنید تا فقط به این صفحه دسته بندی به صورت متفاوت بپردازید.
بیایید یک تصویر پس زمینه سفارشی به یک صفحه بایگانی دسته اضافه کنیم. شما باید این CSS سفارشی به موضوع خود.
body.category-tv {
background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg")؛
موقعیت-موقعیت: مرکز مرکز؛
اندازه پس زمینه: جلد؛
background-تکرار: بدون تکرار؛
پیوست پس زمینه: ثابت ؛
}
فراموش نکنید که URL تصویر پس زمینه و کلاس دسته را با دسته خود جایگزین کنید.
همچنین می توانید پس زمینه های سفارشی را به پست ها و صفحات جداگانه اضافه کنید. وردپرس کلاس CSS را با شناسه پست یا صفحه در برچسب بدن اضافه می کند. می توانید از همان کد CSS استفاده کنید. فقط کلاس .Category-tv را با کلاس CSS خاص پست جایگزین کنید.
امیدواریم این مقاله به شما کمک کرده باشد نحوه افزودن تصویر پس زمینه در وردپرس را بیاموزید. همچنین ممکن است بخواهید مقایسه ما را با بهترین کشیدن و رها کردن پلاگین سازنده صفحه برای وردپرس ، و آموزش ما در نحوه ایجاد قالب وردپرس سفارشی (بدون هیچ کد) ).
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/beginners-guide/how-to-add-a-background-image-in-wordpress/.