คุณต้องการสร้างหน้าเต็มความกว้างบน WordPress หรือไม่?
มากมายจาก ธีม WordPress มาพร้อมกับเทมเพลตเพจความกว้างเต็มในตัวที่คุณสามารถใช้ได้ อย่างไรก็ตามธีม WordPress บางรายการไม่มีคุณสมบัตินี้ ในเรื่องนี้ เกี่ยวกับการสอนเราจะแสดงวิธีสร้างหน้าเต็มความกว้างบน WordPress ได้อย่างง่ายดาย
แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ
จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่
วิธีที่ 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 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 อื่น ๆ ได้
Divi Builder ช่วยให้คุณสามารถแก้ไขเนื้อหาของคุณโดยใช้อินเทอร์เฟซภาพที่ส่วนหน้าเช่นเดียวกับอินเทอร์เฟซในส่วนหลังแม้ว่าผู้ใช้ส่วนใหญ่จะชอบอินเทอร์เฟซแรก
โดยทั่วไปแทนที่จะเป็นแถบด้านข้างทั้งหมดจะอยู่ในป๊อปอัปและปุ่มลอย ช่วยให้คุณเข้าถึงเทมเพลตที่ออกแบบไว้ล่วงหน้า 316 แบบซึ่งกระจายอยู่ในชุดงานนำเสนอที่แตกต่างกัน 40 ชุดรวมถึงความสามารถในการบันทึกการออกแบบของคุณเองเป็นเทมเพลต
เราเสนอให้คุณค้นพบ วิธีสร้างบล็อกมืออาชีพ
หนึ่งในคุณสมบัติของ Divi คือการควบคุมสไตล์ที่เขามอบให้คุณเสมอ ในแท็บสามแท็บที่แตกต่างกันคุณสามารถกำหนดการตั้งค่าต่างๆรวมถึงการควบคุมที่ตอบสนองระยะห่างที่ปรับแต่งได้และอื่น ๆ
คุณสามารถเพิ่ม CSS ที่กำหนดเองได้เนื่องจากตัวแก้ไข CSS มีการตรวจสอบความถูกต้องขั้นพื้นฐานและการเติมข้อความอัตโนมัติ หนึ่งในการวิพากษ์วิจารณ์ของ Divi Builder คือการพึ่งพาเสมอ รหัสย่อ. ซึ่งหมายความว่าหากคุณปิดการใช้งานวันหนึ่งมันจะทิ้งรหัสย่อไว้ในเนื้อหาของคุณ แม้ว่านี่จะค่อนข้างน่าหดหู่ แต่ก็มีปัญหาน้อยลงในขณะนี้ที่มีปลั๊กอินเช่น Shortcode Cleaner อยู่
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2 Themify Builder
Themify Builder เป็นข้อเสนอของทีม Themify อย่างไม่น่าแปลกใจ รวมเข้ากับธีม WordPress หลายแบบเพื่อให้ลูกค้ามีตัวเลือกการปรับแต่งที่เรียบง่าย แต่คุณสามารถซื้อเป็นปลั๊กอินแบบสแตนด์อโลนและใช้กับธีม WordPress ใดก็ได้
เช่นเดียวกับ Divi Builder และ WPBakery Page Builder Themify Builder ช่วยให้คุณสร้างเค้าโครงในส่วนหน้าหรือส่วนหลัง ข้อดีอีกอย่างคือปลั๊กอินนี้ให้คุณปรับแต่งเบรกพอยต์ที่ตอบสนองได้ (แต่เฉพาะที่ระดับเว็บไซต์ทั้งหมดเท่านั้น)
ค้นพบ วิธีการติดตั้งและกำหนดค่า WooCommerce สำหรับ สร้างร้านค้าออนไลน์ และขายสินค้าของคุณทางอินเทอร์เน็ตได้อย่างง่ายดาย
สิ่งที่ยอดเยี่ยมอย่างหนึ่งเกี่ยวกับ Themify Builder ก็คือมันยังคงให้คุณใช้ตัวแก้ไข WordPress มาตรฐานได้ ในขณะที่ตัวสร้างเพจอื่นๆ บังคับให้คุณใช้อินเทอร์เฟซ WordPress ตัวสร้างเพจ สำหรับทุกอย่าง.
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 Elementor
ปลั๊กอิน Elementor WordPress เปิดตัวครั้งแรกในปี 2016 เป็นหนึ่งในผู้สร้างเพจที่อายุน้อยที่สุดในรายการนี้ แม้จะเริ่มช้า แต่ Elementor ก็มีการติดตั้งที่ใช้งานอยู่มากกว่า 1 ครั้งบน WordPress.org ทำให้เป็นหนึ่งในผู้สร้างเพจ WordPress ที่ได้รับความนิยมมากที่สุด
สิ่งที่ทำให้ชื่อเสียงคืออินเทอร์เฟซภาพที่ลื่นไหลตัวเลือกสไตล์ที่แตกต่างและคุณสมบัติที่ทรงพลังอื่น ๆ เช่นการสร้างธีม WordPress ที่สมบูรณ์
อินเทอร์เฟซของมันถูกแบ่งออกเป็นสองส่วนหลักโดยมีโซนที่สามสำหรับพารามิเตอร์บางอย่าง Elementor เวอร์ชันฟรีให้บริการวิดเจ็ต 28 ฟรี รุ่น Pro นำมาซึ่ง 30 widgets อื่น ๆ รวมเป็น 58 widgets ในรุ่น Pro รุ่นฟรีรวมถึงเทมเพลตฟรี 40 เกี่ยวกับในขณะที่รุ่น Pro นำเทมเพลตเพิ่มเติมหลายร้อย
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
ค้นหาข้อมูลเกี่ยวกับแหล่งข้อมูลที่แนะนำอื่น ๆ เพื่อช่วยคุณสร้างและจัดการเว็บไซต์ของคุณ
- วิธีเปลี่ยนธีม WordPress ของคุณอย่างปลอดภัย
- วิธีการตั้งค่าการส่งมอบใน WooCommerce
- ปลั๊กอิน WordPress พรีเมี่ยม 10 จากการจองและการจอง
- เมื่อไหร่และวิธีการติดตั้ง WordPress ในไดเรกทอรีย่อย
- ปลั๊กอินเพื่อเพิ่มความเร็วของบล็อกของคุณ 10 WordPress
สรุป
ที่นี่คือ ! สำหรับบทช่วยสอนนี้ หากคุณมีธีม WordPress ที่ไม่มีหน้าแบบเต็มเป็นเทมเพลตเราหวังว่าบทช่วยสอนนี้จะช่วยคุณแก้ไขข้อบกพร่องดังกล่าวได้ อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress
หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.
...
สวัสดี; สวัสดี
ฉันมีธีม "thethetheen" และฉันทำตามวิธี 2x เพื่อสร้างบ้านที่ไม่มีแถบด้านข้าง ใช้งานได้ในแง่ที่ว่าทางด้านซ้ายจะออกจากแถบเมนูว่างเปล่า แต่สียังคงอยู่ คุณเห็นแถบด้านข้างว่างดังนั้นหน้า cmq จึงไม่สมมาตร