نحوه اضافه کردن پس زمینه های سفارشی به وردپرس

وردپرس هم یک پلتفرم وبلاگ نویسی و هم سیستم مدیریت محتوا (CMS) است. این مطمئناً به این دلیل است که یادگیری، استفاده و سفارشی کردن این پلت فرم آسان است. منظورم این است که می توانید بدون تلاش زیاد وب سایت خود را به هر سمتی که می خواهید تغییر دهید. حتی می‌توانید پس‌زمینه‌های مختلفی را به پست‌ها و صفحات وردپرس خود اضافه کنید، که اتفاقاً موضوع این راهنما است.

اگر به دنبال اضافه کردن رنگ و سبک به پست ها و صفحات وردپرس خود هستید، این راهنما با استفاده از یک رویکرد دو جانبه به موضوع می پردازد. ابتدا، با استفاده از CSS و یک تابع ساده PHP، پس‌زمینه‌های مختلفی را به پست‌ها یا صفحات وردپرس اضافه می‌کنیم، اما اگر این فنجان چای شما نیست (بگذارید بگوییم شما مبتدی کامل هستید و کد نور روز را از شما می‌ترساند)، ما این کار را انجام خواهیم داد. چند افزونه پس‌زمینه وردپرس را برای کمک به این فرآیند ارائه دهید.

در هر صورت، باید زمان خوبی را سپری کنید زیرا این پروژه نسبتاً آسانی است. آماده؟ بیایید قدم برداریم و به پنج راه برای اضافه کردن پس‌زمینه سفارشی به پست‌ها و صفحات وردپرس خود نگاه کنیم.

پس زمینه های سفارشی با گوتنبرگ

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

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

با این کار یک نوار کناری با تعداد زیادی از گزینه های قالب بندی برای بلوک شما باز می شود. در بخش “Color” باید گزینه ای برای رنگ “Background” مشاهده کنید. کلیک کنید و سپس از انتخابگر رنگ برای انتخاب پس زمینه ای که می خواهید استفاده کنید استفاده کنید. یا از تنظیمات پیش‌تنظیمی استفاده کنید که با رنگ‌های طرح زمینه یا گرادیان‌های داخلی شما هماهنگ است.

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

بنابراین، به افزودن یک وبلاگ جدید بروید و “Cover” را جستجو کنید و این بلوک را انتخاب کنید.

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

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

پس زمینه های سفارشی را با گزینه های تم اضافه کنید

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

به عنوان مثال، تم Total WordPress دارای یک متا باکس داخلی تنظیمات تم در پست‌ها و صفحات با گزینه انتخاب پس‌زمینه خود است.

هنگام ایجاد یک پست یا صفحه، به سادگی به پایین صفحه بروید، جایی که «تنظیمات تم» را پیدا خواهید کرد و برگه «پس‌زمینه» را انتخاب کنید. اگر می خواهید یک رنگ ثابت یا یک گزینه تصویر پس زمینه (همراه با یک ظاهر طراحی برای پس زمینه تصویر، مانند کشش، پوشش، تکرار و غیره) انتخاب کنید، این گزینه ها شامل یک انتخابگر رنگ هستند که به شما امکان می دهد تصویری را از کتابخانه رسانه خود آپلود یا انتخاب کنید.< /p>

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

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

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

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

Elementor Backgrounds

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

با Elementor، هنگامی که یک ردیف را وارد می‌کنید، می‌توانید روی نماد شش نقطه کلیک کنید (به‌گونه‌ای شبیه یک پنجره است) سپس زبانه Style را انتخاب کنید تا یک پس‌زمینه سفارشی اضافه کنید. اولین تنظیم پس‌زمینه کلاسیک دارای گزینه‌هایی برای یک رنگ یا یک تصویر است. اما صبر کنید – موارد بیشتری وجود دارد!

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

پس زمینه WPBakery

سازنده WPBakery با بسیاری از مضامین ممتاز وردپرس همراه است و دلیل خوبی نیز دارد. چندین گزینه عالی و همچنین انتخاب استفاده از ویرایش بصری جلویی یا ویرایش سنتی پشتی در ویرایشگر کلاسیک وردپرس را ارائه می دهد.

برای افزودن پس‌زمینه به یک ردیف، ابتدا یک ماژول ردیف را وارد کنید سپس روی نماد مداد کلیک کنید تا تنظیمات ردیف باز شود. از اینجا به تب Design Options بروید. اینجاست که تنظیمات اصلی WPBakery را برای انتخاب پس‌زمینه ردیف یا تصویر ردیف پیدا خواهید کرد. در حالی که بیشتر می خواهید از پس زمینه در ردیف ها استفاده کنید، می توانید آن را در گزینه های طراحی برای بسیاری از عناصر WPBakery (مانند ستون ها، نمادها و غیره) پیدا کنید.

علاوه بر این، بسته به اینکه سازنده تم چگونه سازنده را گسترش داده است یا اگر افزونه های شخص ثالثی نصب کرده اید (مانند Ultimate Addons)، ممکن است تنظیمات دیگری برای شما در دسترس باشد. در اسکرین شات ما در بالا متوجه خواهید شد که گزینه‌های ردیفی برای استفاده از تصویر ویژه پست/صفحه به عنوان پس‌زمینه، و همچنین برگه‌های اضافی برای پس‌زمینه‌های Video، Parallax و Overlay که مختص Total هستند، وجود دارد.

نحوه اضافه کردن پس زمینه به وردپرس با کد

حرکت در مسیر – اگر تم فعلی و راه اندازی سایت بدون سازنده را دوست دارید، گزینه دیگر این است که به سادگی کمی کد به سایت خود اضافه کنید تا پس زمینه خود را تغییر دهید. در حالی که مطمئناً می توانید قطعه کدهای ارائه شده در اینجا را کپی و جایگذاری کنید، اگر راه خود را در مورد PHP، HTML و CSS بدانید، بسیار سودمند خواهد بود. با این مقدمه، اجازه دهید ویرایش را انجام دهیم.

پس زمینه های مختلف را با استفاده از CSS به پست ها و صفحات وردپرس اضافه کنید

بسیاری از استایلی که در پست‌ها و صفحات وردپرس (و کل سایت شما) می‌رود توسط فایلی به نام stylesheet کنترل می‌شود. فایل شیوه نامه در وردپرس معمولا دارای برچسب style.css است. با رفتن به Appearance > Theme File Editor در داشبورد مدیریت وردپرس خود می توانید به style.css دسترسی پیدا کنید:

ما در حال اضافه کردن پس‌زمینه (و سبک‌های دیگر) به پست‌ها/صفحات وردپرس شما در style.css هستیم، بنابراین مهم است که آن را در یک برگه جداگانه بارگذاری کنید.

وقتی به Appearance > Editor می‌روید، فهرستی از تمام قالب‌های تم را نیز در سمت راست صفحه مشاهده خواهید کرد. اگر از طرح زمینه کودک (که باید) استفاده می‌کنید، باید طرح زمینه والدین خود را بارگیری کنید. فایل های الگو.

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

به دنبال این قطعه کد بگردید:

>

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

اگر، برای مثال، کد منبع صفحه اصلی خود را مشاهده کرده باشید، تابع فوق چیزی شبیه به:

و این به این دلیل است که  بخشی از قطعه کد همه کلاس ها را فراهم می کند به عنوان مثال. .home، .blog، .loggin، و غیره، که می توانید در CSS خود برای استایل دادن به عناصر مختلف صفحه اصلی خود استفاده کنید.
به کنار: مشاهده کد منبع برای هر پست یا صفحه کار آسانی است. اگر از کروم استفاده می‌کنید، کافی است روی یک صفحه/پست راست کلیک کرده و «مشاهده منبع صفحه» را انتخاب کنید. در موزیلا، روی پست/صفحه کلیک راست کرده و "View Page Source" را انتخاب کنید. اگر از مایکروسافت اج (اینترنت اکسپلورر) استفاده می‌کنید، روی صفحه/پست خود راست کلیک کرده و «مشاهده منبع» را انتخاب کنید.
اگر کد منبع یک صفحه وردپرس را مشاهده کنید، همین تابع خروجی خواهد داشت:

اگر کد منبع یک پست را مشاهده کردید، تابع body_class ما چیزی نزدیک به:

همانطور که می بینید، چند کلاس CSS دریافت می کنید که می توانید به راحتی آنها را هدف قرار دهید:

• .صفحه برای همه صفحات
• .page-id-2 که به شما امکان می دهد یک صفحه خاص یعنی صفحه با شماره شناسه را هدف قرار دهید. 2
• .single برای همه پست‌های منفرد، به این معنی که تمام سبک‌های CSS که در این کلاس اعمال می‌کنید برای همه پست‌ها اعمال می‌شوند
• .postid-1 برای پست با id=1، به این معنی که تمام سبک‌های CSS که اعمال می‌کنید فقط روی آن پست تأثیر می‌گذارند
• .single-format-standard – این به شما امکان می دهد سبک های CSS را برای همه پست ها با قالب استاندارد پست
• logged-in – سبک هایی که با استفاده از این کلاس CSS اعمال می کنید فقط برای کاربران وارد شده اعمال می شود

همه موارد موجود در class=”” به شما قلاب های CSS را ارائه می دهند که می توانید از آنها برای هدف قرار دادن هر پست یا صفحه ای استفاده کنید. اما چرا قبل از هر کلاس نقطه (.) را اضافه می کنیم؟ این سینتکس معمولی CSS است که نشان می‌دهد حکم می‌کند که باید همه کلاس‌ها را با استفاده از نقطه (.) و همه div‌ها را با استفاده از هش (#) فراخوانی کنید. داستان برای یک روز دیگر.

به عنوان مثال، برای اعمال پس‌زمینه سیاه برای همه پست‌ها، قطعه زیر را به style.css اضافه کنید:

.single { background-color: #000; }

افزودن پس زمینه به پست ها و صفحات وردپرس با استفاده از PHP (از طریق یک فیلد سفارشی)

اگر می خواهید یک روش دستی داخلی برای تغییر پس زمینه در سایت خود از طریق یک فیلد سفارشی اضافه کنید، انجام این کار نیز بسیار آسان است. به سادگی کد زیر را در فایل functions.php تم خود قرار دهید (اگر از یک تم شخص ثالث استفاده می کنید، بهتر است از طریق یک تم فرزند انجام شود). مطمئن شوید که «myprefix» را به شناسه منحصربه‌فرد خود تغییر دهید (این برای جلوگیری از تداخل با تم‌ها و افزونه‌ها است) و وقتی همه چیز آماده شد، اکنون می‌توانید از فیلد سفارشی «myprefix_background_image» برای وارد کردن URL به یک تصویر استفاده کنید. هر صفحه یا پستی که می خواهید پس زمینه را در آن تغییر دهید.

توجه کنید که چگونه این تابع به عمل “wp_head” متصل می شود؟ این بدان معناست که هر زمان که از فیلد سفارشی استفاده می‌کنید، CSS به تگ سرصفحه سایت شما اضافه می‌شود و کدی برای تغییر پس‌زمینه با توجه به مقدار فیلد سفارشی شما اضافه می‌شود.

افزودن پس زمینه به وردپرس با افزونه AWB

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

پس زمینه های پیشرفته وردپرس

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

---

چه از تنظیمات قالب استفاده کنید، چه کدها را بررسی کنید یا از افزونه‌ها استفاده کنید، افزودن پس‌زمینه‌های مختلف به پست‌ها یا صفحات وردپرس می‌تواند به آگاهی از برند و طراحی بصری سایت شما کمک زیادی کند. چگونه پس زمینه پست ها یا صفحات وردپرس خود را تغییر می دهید؟ سوالات، پیشنهادات و نظرات خود را از طریق بخش نظرات زیر با ما در میان بگذارید.