جدول محتوایی
آموزش افزودن بکگراند در وردپرس + 3 روش ساده
آیا می خواهید یک تصویر بکگراند به وردپرس خود اضافه کنید؟ تصاویر پس زمینه می توانند وب سایت شما را جذاب تر و پر جنب و جوش تر نشان دهند. در این مقاله به شما نشان خواهیم داد که چگونه به راحتی یک تصویر بکگراند وردپرس برای سایت خود بسازید.
پیش از ادامه ی مقاله ، در صورت نیاز به هاست وردپرس به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
چرا یک تصویر بکگراند به وردپرس اضافه کنیم؟
افزودن یک تصویر به وب سایت وردپرسی شما می تواند آن را برای بازدیدکنندگان جذاب تر کند. می توانید به سرعت توجه کاربران را جلب کرده و آنها را با محتوای خود درگیر کنید.
همچنین به شما این امکان را می دهد که طراحی وب سایت خود را با توجه به برند خود شخصی سازی کنید. برای مثال، می‌توانید عکس‌های ظریف محصولات یا طلسم برند خود را در پس‌زمینه آپلود کنید.
علاوه بر این، می‌توانید یک ویدیوی YouTube را به‌عنوان پس‌زمینه کامل یا یک نمایش اسلاید تصویر اضافه کنید که به محتوای شما جان بخشد.
با این حال، ما پیشنهاد می‌کنیم تصاویر پس‌زمینه‌ای را انتخاب کنید که توجه بیش از حد جلب نکند یا خواندن محتوای وبلاگ وردپرس شما را سخت نکند. پس‌زمینه باید تجربه کاربر را بهبود بخشد و به رساندن پیام شما به بازدیدکنندگان کمک کند.
همچنین مهم است که تصویر پس‌زمینه‌ای را انتخاب کنید که سازگار با موبایل باشد و بر سرعت وب‌سایت شما تأثیری نداشته باشد. در غیر این صورت به سئوی وردپرس شما آسیب می رساند.
با این اوصاف، بیایید راه‌های مختلفی را برای اضافه کردن یک تصویر پس‌زمینه وردپرس بررسی کنیم. ما چندین روش از جمله استفاده از سفارشی‌کننده تم وردپرس، ویرایشگر کامل سایت، افزونه، تم‌ساز و موارد دیگر را پوشش خواهیم داد.
روش 1. با استفاده از سفارشی ساز تم وردپرس، یک تصویر پس زمینه اضافه کنید
اکثر تم های محبوب وردپرس با پشتیبانی پس زمینه سفارشی ارائه می شوند. این ویژگی به شما این امکان را می دهد که به راحتی یک تصویر پس زمینه تنظیم کنید و اگر تم شما از آن پشتیبانی می کند، این روش را توصیه می کنیم.
با این حال، اگر گزینه منوی سفارشی‌ساز شما وجود نداشته باشد، ممکن است در قالب شما ویرایش کامل سایت فعال باشد. در بخش بعدی نحوه استفاده از ویرایشگر کامل سایت برای تغییر تصویر پس‌زمینه را توضیح خواهیم داد.
برای استفاده از Customizer، باید از صفحه Appearance » Customize در مدیر وردپرس خود بازدید کنید. با این کار سفارشی‌کننده تم وردپرس راه‌اندازی می‌شود که در آن می‌توانید تنظیمات تم مختلف را در حین مشاهده پیش‌نمایش زنده وب‌سایت خود تغییر دهید:
نکته مهمی که باید به خاطر داشته باشید این است که گزینه هایی که مشاهده می کنید بر اساس موضوع وردپرسی که استفاده می کنید متفاوت است. برای این آموزش از تم Astra استفاده می کنیم.
اگر از تم دیگری استفاده می‌کنید، ممکن است لازم باشد مستندات آن تم را جستجو کنید یا با توسعه‌دهنده تم تماس بگیرید تا درصورتی‌که نمی‌توانید آن را در سفارشی‌کننده پیدا کنید، چگونه می‌توانید یک تصویر پس‌زمینه اضافه کنید.
در گزینه‌های سفارشی‌کننده تم Astra، باید روی «Global» در پانل سمت چپ کلیک کنید:
پس از آن، گزینه های مختلف جهانی را برای سفارشی کردن تم Astra خود خواهید دید.
حالا میتواند روی بخش “colors” کلیک کنید:
در اینجا، می توانید رنگ های تم، از جمله رنگ پس زمینه را تغییر دهید. همچنین می‌توانید پیوندها، متن بدنه، عنوان‌ها، حاشیه‌ها و موارد دیگر را سفارشی کنید.
برای افزودن یک تصویر پس‌زمینه، به قسمت «Surface Color» بروید. سپس می‌توانید روی گزینه «Site Background» کلیک کرده و به تب «Image» بروید:
پس از آن، به سادگی روی دکمه “Select Background Image” کلیک کنید. با این کار کتابخانه رسانه وردپرس ظاهر می شود، جایی که می توانید تصویری را از رایانه خود آپلود کنید یا تصویری را که قبلا آپلود کرده اید انتخاب کنید:
پس از اینکه تصویر را برای پس زمینه خود انتخاب کردید، باید روی دکمه “Select” کلیک کنید. با این کار پنجره رسانه بسته می شود و پیش نمایش تصویر پس زمینه انتخابی خود را در سفارشی ساز تم را مشاهده می کنید:
فراموش نکنید که برای ذخیره تنظیمات خود، روی دکمه “publish” در بالا کلیک کنید. و تمام! شما با موفقیت یک تصویر بکگراند به سایت وردپرس خود اضافه کردید. در اخر، از وب سایت خود بازدید کنید تا نتیجه ی نهایی را مشاهده کنید.
روش 2. اضافه کردن تصاویر بکگراند وردپرس با استفاده از CSS Hero
CSS Hero یک افزونه وردپرس است که به شما این امکان را می دهد تا بدون دست زدن به یک خط کد، هر تغییری را در قالب خود ایجاد کنید.
می توانید تصاویر پس زمینه را به سرعت در چند مرحله ساده اضافه کنید. ابتدا باید CSS Hero را نصب و فعال کنید. برای جزئیات بیشتر، لطفاً راهنمای ما در مورد نحوه نصب افزونه وردپرس را ببینید.
هنگامی که این کار را انجام دادید، زمان آن است که سفارشی سازی وب سایت خود را شروع کنید. اکنون صفحه اصلی خود را در مرورگر خود باز کنید. پیوند “Customize with CSS Hero” را در نوار مدیریت خود خواهید دید:
پس از کلیک بر روی آن لینک، گزینه های CSS Hero را خواهید دید که باز می شوند. ماوس خود را روی ناحیه ای که می خواهید تصویری به آن اضافه کنید ببرید.
وقتی روی ناحیه انتخاب شده کلیک می کنید، می توانید گزینه “Backgound” را در نوار کناری سمت چپ مشاهده کنید:
سپس روی «background» کلیک کنید تا تنظیمات اضافه کردن یک تصویر را ببینید.
از آنجا، می‌توانید روی «Image» کلیک کنید. اکنون می‌توانید یک تصویر از Unsplash انتخاب کنید یا تصویر خود را برای ایجاد پس‌زمینه آپلود کنید:
وقتی روی تصویر مورد نظر کلیک می کنید، دکمه «اعمال تصویر» را مشاهده می کنید. سپس می توانید انتخاب کنید که تصویر شما چه اندازه ای باشد. شما می توانید نسخه بزرگ را انتخاب کنید تا در سراسر صفحه کشیده شود.
برای ذخیره تصویر پس زمینه برای سایت خود، روی «Save and Publish» در پایین صفحه کلیک کنید.
روش 3. اضافه کردن تصاویر پس زمینه سفارشی در هر نقطه در وردپرس با استفاده از کد CSS
به طور پیش فرض، وردپرس چندین کلاس CSS را به عناصر مختلف HTML در سراسر سایت وردپرس شما اضافه می کند. شما به راحتی می توانید تصاویر پس زمینه سفارشی را به پست ها، دسته ها، نویسندگان و صفحات دیگر با استفاده از این کلاس های CSS تولید شده وردپرس اضافه کنید.
به عنوان مثال، اگر در وب‌سایت خود دسته‌بندی به نام TV دارید، وردپرس به‌طور خودکار این کلاس‌های CSS را به تگ بدنه زمانی که شخصی صفحه دسته‌بندی تلویزیون را مشاهده می‌کند اضافه می‌کند:
<body class="archive category category-tv category-4">
می توانید از ابزار inspect استفاده کنید تا ببینید دقیقاً کدام کلاس های CSS توسط وردپرس به تگ بدنه اضافه شده است:
شما می‌توانید از کلاس‌های class-tv یا class-4 CSS برای استایل متفاوت به این صفحه دسته‌بندی استفاده کنید. بیایید یک تصویر پس زمینه سفارشی به صفحه آرشیو دسته اضافه کنیم. شما باید این 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 با شناسه پست یا صفحه در تگ بدنه اضافه می کند. می توانید از همان کد CSS استفاده کنید، فقط کافی است .category-tv را با کلاس CSS post-specific جایگزین کنید:
امیدواریم این مقاله به شما در یادگیری نحوه افزودن تصویر بکگراند وردپرس کمک کرده باشد.موفق باشید!
مثل همیشه عالی و جذاب
چندین سایت گشتم اما هیچکدوم مثل سایت شما مطالبش تکمیل نبود
ممنون خدا قوت