คุณต้องการสร้างหน้าเต็มความกว้างบน WordPress หรือไม่?

มากมายจาก ธีม WordPress มาพร้อมกับเทมเพลตเพจความกว้างเต็มในตัวที่คุณสามารถใช้ได้ อย่างไรก็ตามธีม WordPress บางรายการไม่มีคุณสมบัตินี้ ในเรื่องนี้ เกี่ยวกับการสอนเราจะแสดงวิธีสร้างหน้าเต็มความกว้างบน WordPress ได้อย่างง่ายดาย

แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ 

จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่

สร้างหน้าเต็มความกว้างใน WordPress

วิธีที่ 1: ใช้เทมเพลตความกว้างในตัวในธีม WordPress ของคุณ

ขอแนะนำให้ใช้วิธีนี้หากธีม WordPress ของคุณมีเทมเพลตหน้าเต็มอยู่แล้ว หากคุณไม่มีให้ตรวจสอบตัวเลือกต่อไปนี้และเลือกซื้อ

ก่อนอื่นคุณต้องแก้ไขเพจหรือสร้างใหม่โดยไปที่ " หน้า> เพิ่ม หน้าใหม่

ในหน้าต่างแก้ไขเพจให้เลือก ความกว้างเต็ม เป็นเทมเพลตภายใต้แอตทริบิวต์กล่องกาเครื่องหมายหน้า

การเลือกเทมเพลตเพจ

หลังจากเลือกรุ่นแล้ว ความกว้างเต็มคุณต้องลงทะเบียนหน้าของคุณ คุณสามารถปรับแต่งหน้าต่อไปเพื่อเพิ่มเนื้อหาเพิ่มเติมหรือคลิกปุ่มแสดงตัวอย่างเพื่อดูการทำงาน

หน้าที่มีความกว้างเต็ม

หากคุณไม่มีตัวเลือกเทมเพลตแบบ Full Width - Full Width - บนหน้าจอแก้ไขหน้าหมายความว่าธีม WordPress ของคุณไม่มี 

แต่ไม่ต้องกังวลเราจะแสดงวิธีสร้างหน้าเต็มความกว้างได้อย่างง่ายดายโดยไม่ต้องเปลี่ยนธีม WordPress

วิธี 2: วิธีสร้างเทมเพลทของเพจที่มีความกว้างเต็ม

วิธีนี้ต้องการให้คุณแก้ไขไฟล์ของธีม WordPress ที่คุณใช้และมีความเข้าใจพื้นฐานเกี่ยวกับ PHP, CSS และ HTML

โดยวิธีการที่เรายังเชิญให้คุณปรึกษา ปลั๊กอิน WordPress 8 ที่ดีที่สุดเพื่อสร้างเลย์เอาท์ของคุณได้อย่างง่ายดาย 

แต่ก่อนที่จะดำเนินการต่อไปคุณต้อง สร้างการสำรองข้อมูล WordPress หรืออย่างน้อยการสำรองข้อมูลของธีม WordPress ปัจจุบันของคุณ. วิธีนี้จะช่วยให้คุณกู้คืนเว็บไซต์ของคุณได้อย่างง่ายดายหากมีสิ่งไม่ดีเกิดขึ้น 

ขั้นแรกคุณต้องเปิดโปรแกรมแก้ไขข้อความเช่น Notepad และวางรหัสต่อไปนี้ลงในไฟล์เปล่า:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

ตอนนี้คุณต้องบันทึกไฟล์นี้เป็น " เต็มรูปแบบ width.php บนคอมพิวเตอร์ของคุณ

โค้ดนี้เพียงแค่ตั้งชื่อเทมเพลตไฟล์และบอกให้ WordPress แตกเทมเพลตส่วนหัว

ถัดไปคุณจะต้องมีส่วนเนื้อหาของโค้ด เชื่อมต่อกับเว็บไซต์ของคุณโดยใช้ไคลเอนต์ FTP (หรือจัดการไฟล์ใน cPanel) จากนั้นไปที่ " / wp-content / themes / ธีมของคุณโฟลเดอร์ / '

จากนั้นคุณต้องค้นหาไฟล์ที่ชื่อว่า " page.php ". นี่คือไฟล์เทมเพลตเพจเริ่มต้นของธีมของคุณ

คัดลอกทุกอย่างหลังจากฟังก์ชั่น« get_header () และวางลงในไฟล์ " เต็มรูปแบบ width.php สิ่งที่คุณสร้างบนคอมพิวเตอร์ของคุณ

ตอนนี้คุณต้องดูเนื้อหาของไฟล์ "full-width.php" และลบบรรทัดของรหัสนี้:

<?php get_sidebar(); ?>

บรรทัดนี้ใช้เพียงแถบด้านข้างและแสดงในธีม WordPress ของคุณ เมื่อนำสิ่งนี้ออกธีมของคุณจะไม่แสดงแถบด้านข้างเมื่อใช้เทมเพลต ความกว้างเต็ม.

คุณอาจเห็นบรรทัดนี้ปรากฏมากกว่าหนึ่งครั้งในธีม WordPress ของคุณ หากธีม WordPress ของคุณมีหลายแบบ แถบด้านข้าง (พื้นที่วิดเจ็ตส่วนท้ายจะเรียกว่าไซด์บาร์)คุณจะเห็นแต่ละแถบข้างอ้างถึงครั้งเดียวในรหัส คุณต้องตัดสินใจเลือกไซด์บาร์ที่ต้องการเก็บไว้

ดูเหมือนว่าเว็บไซต์ของคุณจะโหลดช้าค้นพบ ทำไมคุณต้องเริ่มเพิ่มประสิทธิภาพบล็อก WordPress ด้วยภาพ

หากธีมของคุณไม่แสดงแถบด้านข้างในหน้าของคุณคุณอาจไม่พบรหัสนี้ในไฟล์ของคุณ

นี่คือวิธีที่โค้ด 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 -->
</div><!-- .content-area -->
<?php get_footer(); ?>

จากนั้นคุณต้องดาวน์โหลดไฟล์ เต็มรูปแบบ width.php »บนโฟลเดอร์ธีม WordPress ของคุณโดยใช้ไฟล์ FTP ไคลเอนต์.

คุณสร้างและอัปโหลดเทมเพลตเพจแบบเต็มความกว้างแบบกำหนดเองไปยังธีมของคุณสำเร็จแล้ว ขั้นตอนต่อไปคือการใช้เทมเพลตนี้เพื่อสร้างหน้าแบบเต็มความกว้าง

มุ่งหน้าไปยังแดชบอร์ดของคุณและแก้ไขหรือสร้างหน้าใหม่

ในหน้าจอแก้ไขหน้าให้ค้นหาช่องทำเครื่องหมายแอตทริบิวต์ของเพจแล้วคลิกเมนูแบบเลื่อนลงใต้ตัวเลือก "เทมเพลต"

การเลือกรุ่นในรุ่นของเพจ wordpress

คุณจะสามารถเห็นรูปแบบของคุณ ไปข้างหน้าเลือกและบันทึกหรืออัปเดตหน้า

ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณและคุณจะเห็นว่าแถบด้านข้างหายไปและหน้าของคุณจะปรากฏเป็นหน้าคอลัมน์เดียว อาจยังไม่เต็ม แต่ตอนนี้คุณพร้อมที่จะสตรีมอย่างอื่นแล้ว

ทำให้เว็บไซต์ของคุณเป็นที่นิยมโดยการค้นพบ ปลั๊กอิน WordPress 7 เพื่อเพิ่มประสิทธิภาพ SEO ของภาพของคุณ

คุณจะต้องใช้เครื่องมือตรวจสอบเพื่อค้นหาคลาส CSS ที่ธีมของคุณใช้กำหนดพื้นที่เนื้อหา

จากนั้นคุณสามารถปรับความกว้างเป็น 100% โดยใช้ CSS เราใช้โค้ด CSS ต่อไปนี้:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

ต่อไปนี้เป็นลักษณะที่ยี่สิบเจ็ด

การนำเสนอธีมเวิร์ดเพรสเดโม

นั่นคือทั้งหมดที่สำหรับบทช่วยสอนนี้ฉันหวังว่ามันจะช่วยให้คุณสร้างหน้าเต็มความกว้างได้

วิธีการข้างต้นนั้นฟรีสำหรับผู้ที่สามารถจ่ายได้และต้องการสร้างเลย์เอาต์แบบเต็มความกว้างหรือแบบเต็มความกว้างได้อย่างรวดเร็วอย่างง่ายดาย

ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง  

คุณสามารถใช้อื่นๆ ปลั๊กอิน WordPress เพื่อให้ดูทันสมัยและเพิ่มประสิทธิภาพการจัดการบล็อกหรือเว็บไซต์ของคุณ

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 Divi Builder

Divi Builder เป็นเครื่องมือสร้างเพจคุณภาพสูงที่ได้รับความนิยมอย่างมาก ธีมที่สง่างาม. แม้ว่าโดยทั่วไปจะใช้เป็นส่วนหนึ่งของธีม Divi WordPress แต่ Divi Builder ยังเป็นปลั๊กอินแบบสแตนด์อโลนที่คุณสามารถใช้กับธีม WordPress อื่น ๆ ได้

ดิวิ e1544278044306

Divi Builder ช่วยให้คุณสามารถแก้ไขเนื้อหาของคุณโดยใช้อินเทอร์เฟซภาพที่ส่วนหน้าเช่นเดียวกับอินเทอร์เฟซในส่วนหลังแม้ว่าผู้ใช้ส่วนใหญ่จะชอบอินเทอร์เฟซแรก

โดยทั่วไปแทนที่จะเป็นแถบด้านข้างทั้งหมดจะอยู่ในป๊อปอัปและปุ่มลอย ช่วยให้คุณเข้าถึงเทมเพลตที่ออกแบบไว้ล่วงหน้า 316 แบบซึ่งกระจายอยู่ในชุดงานนำเสนอที่แตกต่างกัน 40 ชุดรวมถึงความสามารถในการบันทึกการออกแบบของคุณเองเป็นเทมเพลต

เราเสนอให้คุณค้นพบ วิธีสร้างบล็อกมืออาชีพ

หนึ่งในคุณสมบัติของ Divi คือการควบคุมสไตล์ที่เขามอบให้คุณเสมอ ในแท็บสามแท็บที่แตกต่างกันคุณสามารถกำหนดการตั้งค่าต่างๆรวมถึงการควบคุมที่ตอบสนองระยะห่างที่ปรับแต่งได้และอื่น ๆ

คุณสามารถเพิ่ม CSS ที่กำหนดเองได้เนื่องจากตัวแก้ไข CSS มีการตรวจสอบความถูกต้องขั้นพื้นฐานและการเติมข้อความอัตโนมัติ หนึ่งในการวิพากษ์วิจารณ์ของ Divi Builder คือการพึ่งพาเสมอ รหัสย่อ. ซึ่งหมายความว่าหากคุณปิดการใช้งานวันหนึ่งมันจะทิ้งรหัสย่อไว้ในเนื้อหาของคุณ แม้ว่านี่จะค่อนข้างน่าหดหู่ แต่ก็มีปัญหาน้อยลงในขณะนี้ที่มีปลั๊กอินเช่น Shortcode Cleaner อยู่

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 Themify Builder

Themify Builder เป็นข้อเสนอของทีม Themify อย่างไม่น่าแปลกใจ รวมเข้ากับธีม WordPress หลายแบบเพื่อให้ลูกค้ามีตัวเลือกการปรับแต่งที่เรียบง่าย แต่คุณสามารถซื้อเป็นปลั๊กอินแบบสแตนด์อโลนและใช้กับธีม WordPress ใดก็ได้

หน้าจอแอนิเมชั่นตัวสร้างธีม e1544277050530

เช่นเดียวกับ Divi Builder และ WPBakery Page Builder Themify Builder ช่วยให้คุณสร้างเค้าโครงในส่วนหน้าหรือส่วนหลัง ข้อดีอีกอย่างคือปลั๊กอินนี้ให้คุณปรับแต่งเบรกพอยต์ที่ตอบสนองได้ (แต่เฉพาะที่ระดับเว็บไซต์ทั้งหมดเท่านั้น)

ค้นพบ วิธีการติดตั้งและกำหนดค่า WooCommerce สำหรับ สร้างร้านค้าออนไลน์ และขายสินค้าของคุณทางอินเทอร์เน็ตได้อย่างง่ายดาย 

สิ่งที่ยอดเยี่ยมอย่างหนึ่งเกี่ยวกับ Themify Builder ก็คือมันยังคงให้คุณใช้ตัวแก้ไข WordPress มาตรฐานได้ ในขณะที่ตัวสร้างเพจอื่นๆ บังคับให้คุณใช้อินเทอร์เฟซ WordPress ตัวสร้างเพจ สำหรับทุกอย่าง.

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 Elementor

ปลั๊กอิน Elementor WordPress เปิดตัวครั้งแรกในปี 2016 เป็นหนึ่งในผู้สร้างเพจที่อายุน้อยที่สุดในรายการนี้ แม้จะเริ่มช้า แต่ Elementor ก็มีการติดตั้งที่ใช้งานอยู่มากกว่า 1 ครั้งบน WordPress.org ทำให้เป็นหนึ่งในผู้สร้างเพจ WordPress ที่ได้รับความนิยมมากที่สุด

Elementor Pro e1544277036401

สิ่งที่ทำให้ชื่อเสียงคืออินเทอร์เฟซภาพที่ลื่นไหลตัวเลือกสไตล์ที่แตกต่างและคุณสมบัติที่ทรงพลังอื่น ๆ เช่นการสร้างธีม WordPress ที่สมบูรณ์

อินเทอร์เฟซของมันถูกแบ่งออกเป็นสองส่วนหลักโดยมีโซนที่สามสำหรับพารามิเตอร์บางอย่าง Elementor เวอร์ชันฟรีให้บริการวิดเจ็ต 28 ฟรี รุ่น Pro นำมาซึ่ง 30 widgets อื่น ๆ รวมเป็น 58 widgets ในรุ่น Pro รุ่นฟรีรวมถึงเทมเพลตฟรี 40 เกี่ยวกับในขณะที่รุ่น Pro นำเทมเพลตเพิ่มเติมหลายร้อย

 ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

ค้นหาข้อมูลเกี่ยวกับแหล่งข้อมูลที่แนะนำอื่น ๆ เพื่อช่วยคุณสร้างและจัดการเว็บไซต์ของคุณ

สรุป

ที่นี่คือ ! สำหรับบทช่วยสอนนี้ หากคุณมีธีม WordPress ที่ไม่มีหน้าแบบเต็มเป็นเทมเพลตเราหวังว่าบทช่วยสอนนี้จะช่วยคุณแก้ไขข้อบกพร่องดังกล่าวได้ อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ

อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress

หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.

...