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

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

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

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

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

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

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

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

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

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

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

<?php
/* Template Name: Full Width Post * Template Post Type: post*/ /*The template for displaying full width single posts. */
get_header( );
?>

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

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

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

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

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

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

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

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

<div class="wrap">

<div id="primary" class="content-area">
        	<main id="main" class="site-main" role="main">
              	<?php /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
                          	'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
                    	) );
              	endwhile; // End of the loop.
              	?>

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

get_template_part( 'template-parts/post/content', get_post_format()
);

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

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

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

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

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

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

        	if ( 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="bookmark">', '</a></h3>

' );
        	} else {
              	the_title( '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>

' );
        	}

        	if ( 'post' === get_post_type() ) {

              	echo '

<div class="entry-meta">';
                    	if ( is_single() ) {
                    	  	twentyseventeen_posted_on();
                    	} else {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</header>

<!-- .entry-header -->

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

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

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

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

.post-template-full-width-post.has-sidebar:not(.error404) #primary{
float:none;
width:auto;
}

.post-template-full-width-post .entry-header{
text-align:center;
margin-bottom:1.3em;
}

.post-template-full-width-post .entry-meta{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:15px 0;
}

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

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

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

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

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

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

บทสรุป

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

ลองใช้และสร้างเทมเพลตโพสต์เดียวที่เป็นเอกลักษณ์ของคุณเอง

ภาพถ่ายทั้งหมดในบทความนี้ถ่ายภายในบริษัทที่ Flywheel

ยังต้องการโน้มน้าวลูกค้าของคุณหรือไม่?

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

คุณจะเรียนอะไรต่อไป ลองหนึ่งในบทช่วยสอนเหล่านี้!

• วิธีเลือกหน่วย CSS ที่ดีที่สุดเพื่อสร้างเลย์เอาต์เว็บไซต์ที่ดีขึ้น
• วิธีเพิ่ม Google Map ที่ตอบสนองใน WordPress
• วิธีย้ายไซต์ของคุณจาก Adobe Business Catalyst ไปยัง WordPress อย่างมีประสิทธิภาพ (+ ทรัพยากรมากกว่า 20 รายการ!)