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

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

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

create full width page 550x340 1 - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

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

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

ابتدا باید با رفتن به Pages »Add New در داشبورد وردپرس خود صفحه ای را ویرایش کرده یا صفحه جدیدی ایجاد کنید.

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

page attributes in wordpress - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

اگر برای طرح زمینه خود الگوی تمام عرض داشته باشید ، در اینجا لیست می شود. باید چیزی مانند “الگوی عرض کامل” نامیده شود:
select page template full width - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

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

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

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

ابتدا باید افزونه Fullwidth Templates را نصب و فعال کنید. اگر مطمئن نیستید که چگونه این کار را انجام دهید ، به راهنمای مبتدی ما برای نصب یک افزونه وردپرس مراجعه کنید .

پلاگین Fullwidth Templates سه گزینه جدید به الگوهای صفحه شما اضافه خواهد کرد:
full width plugin page options - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

این گزینه ها عبارتند از:

  • FW No Sidebar: نوار کناری را از صفحه شما حذف می کند ، اما همه موارد دیگر را دست نخورده باقی می گذارد
  • FW Fullwidth: نوار کناری ، عنوان و نظرات را از بین می برد و طرح را به عرض کامل می کشد
  • FW Fullwidth No Header Footer: تمام کارهایی را که FW Fullwidth انجام می دهد حذف می کند ، به علاوه سرصفحه و صفحه

اگر می خواهید به سادگی از ویرایشگر داخلی WordPress استفاده کنید ، “FW No Sidebar” بهترین انتخاب است.

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

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

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

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

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

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

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

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

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

بعد ، روی دکمه “راه اندازی Beaver Builder ” در مرکز صفحه خود کلیک کنید.
use beaver builder plugin page - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

beaver builder interface - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

beaver builder templates - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

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

برای ویرایش یک ردیف یا یک ماژول در طرح ، فقط باید روی آن کلیک کنید. در این حالت ، ما در حال ویرایش ماژول Heading هستیم:
editing heading beaver builder - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

beaver builder editing - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

beaver builder add module - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

 

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

روش ۴. ایجاد صفحات فرود کاملاً سفارشی با عرض کامل با SeedProd

گرچه Beaver Builder یک راه حل شسته و رفته است ، اما این امکان را دارد که وب سایت شما را کند کند.

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

این بهترین افزونه صفحه فرود برای وردپرس است و با استفاده از رابط کاربری کشیدن و رها کردن صفحه ساز بسیار آسان است.
seedprod builder - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

ابتدا باید افزونه SeedProd را نصب و فعال کنید.

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

بهترین قسمت در مورد SeedProd این است که بسیار سریع است و دارای ویژگی های داخلی برای مدیریت مشترک ، یکپارچه سازی خدمات بازاریابی از طریق ایمیل و موارد دیگر است.

روش ۵: به طور دستی قالب صفحه وردپرس با عرض کامل ایجاد کنید

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

اگر قبلاً این کار را انجام نداده اید ، نگاهی به راهنمای ما در مورد نحوه کپی / چسباندن کد در وردپرس بیندازید .

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

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

۱
۲
۳
۴
۵
۶
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

این فایل را مانند full-width.phpرایانه خود ذخیره کنید. برای جلوگیری از ذخیره شدن آن به عنوان پرونده .txt ، ممکن است لازم باشد “ذخیره به عنوان نوع” را به “همه پرونده ها” تغییر دهید:
save full width template file - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

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

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

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

در full-width.phpپرونده ، این خط کد را پیدا و حذف کنید:

۱
<?php get_sidebar(); ?>

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

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

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

در اینجا نحوه مشاهده کل کد full-width.php ما پس از ایجاد تغییرات نشان داده شده است. بسته به موضوع شما ممکن است کد شما کمی متفاوت باشد.

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>
    <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) :
            the_post();
            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
            // End of the loop.
        endwhile;
        ?>
    </main><!-- .site-main -->
    <?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_footer(); ?>

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

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

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

در پنجره “Document” در سمت راست ، به دنبال “Page Attributes” بگردید و روی پیکان رو به پایین کلیک کنید تا در صورت لزوم آن بخش را گسترش دهید. باید منوی کشویی “الگو” را مشاهده کنید که در آن می توانید الگوی “عرض کامل” جدید خود را انتخاب کنید:
select full width template - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

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

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

برای تعیین کلاسهای CSS مورد استفاده در تم خود برای تعیین محدوده محتوا ، باید از ابزار Inspect استفاده کنید.

پس از آن می توانید عرض آن را با استفاده از CSS به 100٪ تنظیم کنید. می توانید با مراجعه به Appearance »Customize» و کلیک روی «CSS اضافی» در پایین صفحه ، کد CSS را اضافه کنید .
appearance customize additional css - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

ما از کد CSS زیر در سایت آزمون خود استفاده کردیم:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
.page-template-full-width .content-area {
    width: ۱۰۰%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}
.page-template-full-width .site {
margin:0px;
}

در اینجا نحوه مشاهده آن در سایت نمایشی ما با استفاده از موضوع Twenty Sixteen وجود دارد.
fullwidthpreview - نحوه ایجاد یک صفحه عرض کامل در وردپرس (راهنمای مبتدیان)

 

اگر می خواهید از روش دستی استفاده کنید و می خواهید سفارشی سازی بیشتری کنید ، می توانید از پلاگین CSS Hero نیز استفاده کنید که به شما امکان می دهد سبک های CSS را با یک ویرایشگر اشاره و کلیک تغییر دهید.

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

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

منابع:

How to Create a Full Width Page in WordPress (Beginner’s Guide)

 

همچنین بخوانید:
6 بهترین CRM WooCommerce برای رشد فروشگاه شما در سال 2021 (مقایسه شده)