วิธีสร้างเทมเพลตโพสต์เดียวที่กำหนดเองใน WordPress

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

สนใจเรียนรู้วิธีสร้างเทมเพลตโพสต์เดี่ยวที่กำหนดเองหรือไม่? ในโพสต์นี้ ฉันจะแสดงให้คุณเห็นว่าคุณสามารถสร้างของคุณเองได้อย่างไร!

ประโยชน์ของเทมเพลตที่กำหนดเอง

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

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

พร้อมพัฒนาตัวเองหรือยัง? การสร้างและการใช้เทมเพลตโพสต์ที่กำหนดเองนั้นคล้ายกับเทมเพลตของเพจที่กำหนดเอง

วิธีสร้างเทมเพลตโพสต์แบบกำหนดเอง

ฉันจะใช้ธีม Twenty Seventeen สำหรับตัวอย่างของฉัน แต่กระบวนการจะเหมือนกันสำหรับทุกธีม

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

สำหรับเทมเพลตที่กำหนดเอง คุณต้องกำหนดชื่อเทมเพลต (ชื่อของเทมเพลต) และประเภทโพสต์ของเทมเพลต (ที่จะใช้เทมเพลตนี้) ดูเหมือนว่า:

 [php]
<?php
/* ชื่อเทมเพลต: โพสต์แบบเต็มความกว้าง * ประเภทโพสต์เทมเพลต: โพสต์*/ /*เทมเพลตสำหรับแสดงโพสต์เดียวแบบเต็มความกว้าง */
get_header( );
?>
[/php]

เมื่อคุณบันทึกไฟล์ ให้ตั้งชื่อไฟล์ที่เกี่ยวข้องกับชื่อเทมเพลต เช่น full-width-post.php หากคุณดูโพสต์จากแผงการดูแลระบบ เทมเพลตดังกล่าวจะแสดงเทมเพลตใหม่ในดรอปดาวน์ของส่วนแอตทริบิวต์โพสต์

เทมเพลตที่กำหนดเองของเราพร้อมแล้ว แต่ยังไม่มีประโยชน์ มาทำประโยชน์กันดีกว่า!

หมายเหตุ: เรากำลังทำงานกับไฟล์หลายไฟล์ ดังนั้นโปรดติดตามชื่อไฟล์และโฟลเดอร์

นี่คือเลย์เอาต์ปัจจุบันของหน้าบล็อกโพสต์ในธีม Twenty Seventeen ฉันมีความสุขกับสิ่งนั้น ดังนั้นเราจะปล่อยให้มันเป็นไป

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

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

เมื่อคุณพบไฟล์ที่แสดงหน้ารายละเอียดโพสต์แล้ว คุณควรดูว่ามีการใช้ฟังก์ชันเพื่อเรียกไฟล์อื่นหรือสร้างเทมเพลตโดยตรงหรือไม่ ในตัวอย่างนี้ที่มีธีม Twenty Seventeen ฟังก์ชัน get_template_part

เส้นทาง get_template_part เป็นส่วนที่สำคัญที่สุดในการติดตามที่นี่

 [php]

<div class="ห่อ">

<div id="หลัก" class="พื้นที่เนื้อหา">
        	<main id="หลัก" class="site-main" บทบาท="หลัก">
              	<?php /* เริ่มวนรอบ */ while ( have_posts() ) : the_post(); get_template_part( 'เทมเพลตส่วน/โพสต์/เนื้อหา', get_post_format() ); // หากความคิดเห็นเปิดอยู่หรือเรามีอย่างน้อยหนึ่งความคิดเห็น ให้โหลดเทมเพลตความคิดเห็น ถ้า ( comments_open() || get_comments_number() ) : comments_template(); เอนดิฟ; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'โพสต์ก่อนหน้า', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( ' ก่อนหน้า', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twoseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</ span>%title</span>',
                          	'next_text' => '<span class="ตัวอ่านหน้าจอข้อความ">' . __( 'โพสต์ถัดไป', 'ยี่สิบเจ็ดสิบ' ) . '</span'><span aria-hidden="จริง" class="nav-subtitle">' . __( 'ถัดไป', 'ยี่สิบเจ็ดสิบ' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twoseventeen_get_svg( array( 'icon' => 'ลูกศรขวา' ) ) '</span</span>',
                    	) );
              	ในที่สุด; //จบลูป.
              	?>
[/php]

อย่างที่คุณเห็น มันหมายถึงเส้นทาง:

 [php]
get_template_part( 'ชิ้นส่วนแม่แบบ/โพสต์/เนื้อหา', get_post_format()
);
[/php] 

ดังนั้นไฟล์ content.php จึงถูกเรียกภายใน single.ph เพื่อส่งออกหน้ารายละเอียดโพสต์

ตอนนี้คุณรู้แล้วว่าไฟล์ single.php ทำงานอย่างไร มาคัดลอกโค้ดจากไฟล์แล้ววางลงในไฟล์ full-width-post.php ที่สร้างไว้ก่อนหน้านี้ในธีมย่อย เนื่องจากจะเป็นเทมเพลตแบบเต็มความกว้าง เราจะลบแถบด้านข้างออก

ตอนนี้คัดลอกไฟล์ content.php จากเส้นทางที่กล่าวถึงข้างต้น คุณสามารถวางลงในไดเร็กทอรีเดียวกับที่มีไฟล์เทมเพลตของคุณอยู่ แต่ฉันขอแนะนำให้ทำตามโครงสร้างโฟลเดอร์เดียวกันกับธีมหลัก

คุณสามารถคงชื่อไฟล์ไว้ตามเดิม แต่ถ้าคุณต้องการเปลี่ยนแปลงบางอย่างในเทมเพลตเริ่มต้น จะทำให้เกิดความขัดแย้ง เพื่อหลีกเลี่ยงปัญหาใดๆ เราขอแนะนำให้เปลี่ยนชื่อไฟล์และคงชื่อที่เกี่ยวข้องกับเทมเพลต เช่น content-full-width.php

มีไฟล์อยู่แล้ว ดังนั้นตอนนี้มาแก้ไขโค้ดเพื่อสลับชื่อโพสต์และข้อมูลเมตาของโพสต์

 [php]

<header class="entry-header">
        	<?php

        	ถ้า ( is_single() ) {
              	the_title( '

<h1 class="entry-title">', '</h1>

' );
        	} elseif ( is_front_page() && is_home() ) {
              	the_title( '

<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . ' " rel="บุ๊กมาร์ก">', '</a></h3>

' );
        	} อื่น {
              	the_title( '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . ' " rel="บุ๊กมาร์ก">', '</a></h2>

' );
        	}

        	ถ้า ( 'โพสต์' === get_post_type() ) {

              	เสียงสะท้อน '

<div class="entry-meta">';
                    	ถ้า ( is_single() ) {
                    	  	ยี่สิบเจ็ดสิบ_posted_on();
                    	} อื่น {
                          	ก้องยี่สิบเจ็ดสิบเจ็ด_time_link();
                          	ยี่สิบเจ็ดสิบเอ็ด_edit_link();
                    	};
              	เสียงสะท้อน '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</ส่วนหัว>

<-- .entry-header -->
[/php]

หากต้องการใช้เทมเพลตนี้ ให้แก้ไขโพสต์ที่ต้องการจากผู้ดูแลระบบ WordPress และกำหนดเทมเพลตจากเมนูแบบเลื่อนลง

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

เราต้องเพิ่ม CSS เพื่อให้เต็มความกว้าง WordPress อัตโนมัติสร้างคลาสตามชื่อเทมเพลตในส่วนเนื้อหา

ใช้คลาสนั้นเพื่อกำหนดเป้าหมายเทมเพลตนี้โดยเฉพาะ คุณสามารถเพิ่ม CSS ลงในไฟล์ style.css ของธีมลูกได้

 [css]
.post- template-full-width-post.has-sidebar:not(.error404) #primary{
ลอย:ไม่มี;
ความกว้าง:อัตโนมัติ;
}

.post- template-full-width-post .entry-header{
จัดข้อความ: กึ่งกลาง;
ขอบล่าง:1.3em;
}

.post- template-full-width-post .entry-meta{
border-top:1px solid #ccc;
ขอบล่าง: 1px solid #ccc;
ช่องว่างภายใน:15px 0;
}
[/css]

ตอนนี้เราได้เค้าโครงตามที่เราต้องการแล้ว โพสต์ใด ๆ ที่ใช้เทมเพลตนี้จะมีสไตล์เดียวกันนี้

คุณสามารถสร้างเทมเพลตที่กำหนดเองได้มากเท่าที่คุณต้องการเพื่อให้ตรงกับความต้องการของคุณ คุณสามารถสร้างเทมเพลตตามหมวดหมู่ของโพสต์ได้

ฉันสามารถใช้ปลั๊กอินนี้ได้หรือไม่

หากคุณไม่คุ้นเคยกับโค้ด PHP คุณสามารถใช้ปลั๊กอินบางตัวได้ แต่ฉันต้องยอมรับว่ามีปลั๊กอินน้อยมากสำหรับสร้างเทมเพลตโพสต์แบบกำหนดเอง และส่วนใหญ่ไม่มีประโยชน์มากนัก เพราะคุณต้องสร้างเทมเพลตด้วยตนเองอยู่ดี

ฉันพบว่าปลั๊กอิน Post Custom Templates Lite มีประโยชน์มาก เป็นปลั๊กอินฟรีที่ช่วยให้คุณสร้างเทมเพลตโพสต์โดยไม่ต้องเขียนโค้ดใดๆ ในอินเทอร์เฟซแบบลากและวางที่สวยงาม มีตัวเลือกการปรับแต่งมากมาย ดังนั้นหากคุณต้องการปรับแต่งเทมเพลตโพสต์ โดยทั่วไปแล้วปลั๊กอินนี้สามารถช่วยคุณได้

หมายเหตุ: เวอร์ชันฟรีอนุญาตให้คุณปรับแต่งเทมเพลตโพสต์ปกติเท่านั้น คุณต้องใช้รุ่นโปรเพื่อสร้างเทมเพลตโพสต์ที่กำหนดเองและรับคุณสมบัติเพิ่มเติมบางอย่าง

บทสรุป

ไม่ว่าคุณจะทำงานด้วยตนเองหรือใช้ปลั๊กอินเพื่อสร้างเทมเพลตโพสต์เดียวที่กำหนดเอง จะช่วยให้โพสต์ที่สำคัญที่สุดของคุณโดดเด่นกว่าที่อื่น สำหรับแรงบันดาลใจ โปรดดูเว็บไซต์ของ Brian Dean; เขาใช้เทมเพลตเฉพาะสำหรับโพสต์แนะนำที่ชัดเจนเพื่อให้ดูไม่ซ้ำใครจากโพสต์อื่นๆ ของเขา

ลองทำดูและสร้างเทมเพลตโพสต์เดียวที่ไม่เหมือนใครของคุณเอง! เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดสำหรับทุกไซต์ที่คุณสร้าง เลือกแพลตฟอร์มโฮสติ้งที่มีการจัดการของ WP Engine เป็นแหล่งเดียวสำหรับการโฮสต์ WordPress!