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

آنچه در این مقاله خواهید خواند:

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

  2. قالب کامل صفحه گسترده را به صورت دستی ایجاد کنید

  3. ایجاد یک صفحه تمام عرض با استفاده از افزونه صفحه ساز

روش ۱: با استفاده از یک الگو کامل ساخته شده در قالب تم وردپرس خود

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

با مراجعه به برگه ها »افزودن برگه یا اگر وردپرستان انگلیسی است با رفتن به Pages » Add New برای اولین بار شما باید یک صفحه را ویرایش کرده یا یک صفحه جدید ایجاد کنید.

یک صفحه تمام عرض
ایجاد یک صفحه تمام عرض

 

در صفحه ویرایش صفحه، در زیر جعبه ویژگی های برگه، تمام عرض یا full screan را به عنوان قالب خود انتخاب کنید.

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

 

 

اگر گزینه گزینه تمام عرض یا full width template را در قسمت ویژگی های برگه ندارید این به این معنی است که تم شما یک قالب صفحه با عرض کامل را ندارد.

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

 

روش ۲: قالب کامل صفحه گسترده را به صورت دستی ایجاد کنید

این روش نیاز به ویرایش فایل های تم وردپرس و مقداری دانش اولیه درباره  PHP، CSS و HTML را دارد.

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

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

حالا شما باید این فایل را به عنوان full-width.php در رایانه خود ذخیره کنید.

این کد به سادگی نام یک فایل قالب را تعریف می کند و از وردپرس برای استخراج قالب هدر header درخواست می کند.

در ادامه ، شما بخشی از محتویات کد را نیاز خواهید داشت. اتصال به وب سایت خود را با استفاده از یک سرویس گیرنده FTP (یا مدیر فایل در cPanel) برقرار کنید و سپس به /wp-content/themes/your-theme-folder/ بروید.

حالا شما باید فایل را به نام page.php قرار دهید. این قالب پیش فرض قالب صفحه شما خواهد بود.

بعد از خط get_header () همه چیز را کپی کنید و آن را در فایل full-width.php بر روی رایانه خود قرار دهید.

حالا شما باید به فایل full-width.php نگاه کنید و این خط کد را حذف کنید:

 

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

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

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

حال در اینجا این مساله مطرح است که فایل کد  full-width.php ما پس از ایجاد تغییرات چگونه به نظر می رسد. کد شما ممکن است بسته به صفحه شما و گزینه هایی که در آن وجود دارد کمی با آنچه در زیر می بینید متفاوت باشد.

 

در آخر، شما باید فایل full-width.php را در پوشه تم خود با استفاده از سرویس گیرنده FTP آپلود کنید.

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

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

در برگه ویرایش صفحه، به سراغ جعبه ویژگی های برگه بروید و بر روی منوی کشویی زیر گزینه “الگو” template کلیک کنید.

برگه ویرایش صفحه

 

شما می توانید قالب تمام عرض خود را در آنجا مشاهده کنید. جلو بروید و آن را انتخاب کنید و صفحه را ذخیره / به روز کنید.

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

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

پس از آن شما می توانید آن را به عرض ۱۰۰٪ با استفاده از CSS برسانید. ما از کد زیر در CSS ما استفاده کردیم:

شما در نهایت باید صفحه ای اینچنین با عرض کامل داشته باشد.

عرض کامل

 

روش ۳: ایجاد یک صفحه تمام عرض با استفاده از افزونه صفحه ساز 

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

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

اولین چیزی که باید انجام دهید این است که Plugin Beaver Builder را نصب و فعال کنید. برای جزئیات بیشتر آموزش گام به گام راهنمای نحوه نصب افزونه در وردپرس را ببینید.

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

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

برگه ویرایش صفحه

 

اگر برگه شما یک قالب تمام عرض نداشته باشد، می توانید با دستورالعمل های ذکر شده در روش دوم، یکی را ایجاد کنید.

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

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

صفحه ساز

 

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

رابط کاربری افزونه صفحه ساز

 

شما می توانید با کلیک روی دکمه پیش فرض یا Templates در بالای صفحه شروع کنید. Beaver Builder همراه با چندین قالب آماده برای استفاده و حرفه ای طراحی شده است که شما می توانید به عنوان نقطه شروع استفاده کنید.

Beaver Builder

 

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

پوسته Beaver Builder با ردیف و ماژول ساخته شده است. هر ردیف می تواند چندین ستون داشته باشد و در داخل هر ردیف شما می توانید ماژول های محتوا و ویدجت ها را اضافه کنید.

برای ویرایش یک ردیف یا یک ماژول در طرح، شما فقط باید روی آن کلیک کنید.

پوسته Beaver Builder

 

 

Beaver Builder جزئیات آیتم را در یک پنجره باز می کند که می توانید تنظیمات آن را ویرایش کنید. شما می توانید رنگ ها، فونت ها، عکس پس زمینه، متن و غیره را تغییر دهید.

جزییات ایتم

 

شما می توانید ماژول ها و ویدجت ها را در هر زمان به طرح خود اضافه کنید. Beaver Builder همراه با بسیاری از ماژول های محتوای اولیه و پیشرفته است که شما فقط می توانید به درون صفحه خود بکشید و رها کنید.

ساخت ماژول

 

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

 

صفحه نهایی

 

اکنون می توانید صفحه تمام عرض خود را در عمل مشاهده کنید.

امیدوارم این مقاله برایتان مفید بود باشد. 🙂

منبع:wpbeginner.com

سوالی دارید؟ سوالتون رو در نظرات مطرح کنید 🙂 

مطالب مرتبط:

نمایش رویداد به صورت تایم لاین در وردپرس

نمایش لودینگ صفحه در وردپرس

نمایش تاریخ عضویت کاربر در وردپرس

قالب خبری وردپرس

منبع: تیک تم– ارائه دهنده مقالات: وردپرس– افزونه تجاری وردپرس– قالب وردپرس