คุณกำลังมองหาเอกสารสรุปธีม WordPress เพื่อแก้ไขธีมของคุณอย่างรวดเร็วหรือสร้างธีมที่กำหนดเองใหม่หรือไม่? WordPress มาพร้อมกับแท็กเทมเพลตในตัวมากมายที่คุณสามารถใช้เพื่อเริ่มต้นใช้งาน ในบทความนี้ เราจะแบ่งปันเอกสารสรุปธีม WordPress สำหรับผู้เริ่มต้น
WordPress มาพร้อมกับเครื่องมือสร้างเทมเพลตอันทรงพลังที่ช่วยให้นักพัฒนาธีมสามารถสร้างการออกแบบที่สวยงามสำหรับเว็บไซต์ที่ขับเคลื่อนด้วย WordPress มีทั้งธีม WordPress พรีเมียมและฟรีที่คุณสามารถติดตั้งบนเว็บไซต์ของคุณได้
ธีม WordPress แต่ละธีมมาพร้อมกับตัวเลือกการปรับแต่งมากมาย ตัวเลือกเหล่านี้ช่วยให้คุณสามารถเปลี่ยนสี เพิ่มรูปภาพส่วนหัว ตั้งค่าเมนูนำทาง และอื่นๆ อีกมากมาย
อย่างไรก็ตาม คุณยังคงถูกจำกัดว่าฟีเจอร์ใดบ้างที่ธีมของคุณรองรับ บางครั้งคุณอาจต้องการเปลี่ยนแปลงธีม WordPress ของคุณเล็กน้อยซึ่งต้องมีการเขียนโค้ด ในการทำเช่นนั้น คุณจะต้องรู้ PHP, HTML และ CSS พื้นฐานบางอย่าง
สิ่งแรกที่คุณต้องทำคือทำความคุ้นเคยกับวิธีการทำงานของ WordPress เบื้องหลังและเทมเพลตธีม WordPress
หลังจากนั้นมีแนวทางปฏิบัติที่ดีที่สุดบางประการที่คุณอาจต้องการปฏิบัติตาม ตัวอย่างเช่น การสร้างธีมลูกแทนการเปลี่ยนแปลงในไฟล์ธีมของคุณโดยตรง
คุณยังสามารถฝึกฝนเกี่ยวกับธีมของคุณได้ด้วยการติดตั้ง WordPress บนคอมพิวเตอร์ของคุณ
ดังที่ได้กล่าวไปแล้ว เรามาเจาะลึกเอกสารสรุปธีม WordPress สำหรับผู้เริ่มต้นกันดีกว่า
ธีม WordPress แต่ละธีมประกอบด้วยไฟล์ต่างๆ ที่เรียกว่าเทมเพลต ธีม WordPress ทั้งหมดจะต้องมีสไตล์ชีตและไฟล์ดัชนี แต่โดยปกติแล้วจะมาพร้อมกับไฟล์อื่นๆ มากมาย
ด้านล่างนี้เป็นรายการไฟล์พื้นฐานที่ทุกธีมมี:
สไตล์.css
header.php
ดัชนี.php
แถบด้านข้าง.php
footer.php
single.php
หน้า.php
ความคิดเห็น.php
404.php
ฟังก์ชั่น.php
ไฟล์เก็บถาวร.php
searchform.php
ค้นหา.php
หากคุณกำลังสร้างธีมของคุณเอง คุณสามารถเริ่มต้นด้วยหนึ่งในธีมเริ่มต้นของ WordPress ธีมเหล่านี้มาพร้อมกับไฟล์เทมเพลต WordPress ที่พร้อมใช้งานและ CSS ที่ให้กรอบงานแก่คุณในการต่อยอด
WordPress มาพร้อมกับฟังก์ชั่นที่มีประโยชน์มากมายที่สามารถใช้เพื่อส่งออกสิ่งต่าง ๆ ทั่วทั้งธีมของคุณ ฟังก์ชันเหล่านี้เรียกว่าแท็กเทมเพลต
ฟังก์ชันแรกและอาจเป็นฟังก์ชันที่สำคัญที่สุดที่จำเป็นสำหรับธีม WordPress ที่เป็นไปตามมาตรฐานทั้งหมดเรียกว่า wp_head และมีลักษณะดังนี้:
<?php wp_head(); ?>
โค้ดนี้ดึงข้อมูล HTML ที่สำคัญทั้งหมดที่ WordPress จำเป็นต้องเพิ่มไว้ในส่วน <head> ของทุกหน้าบนเว็บไซต์ของคุณ จำเป็นอย่างยิ่งที่ปลั๊กอิน WordPress จำนวนมากจะทำงานได้อย่างถูกต้องบนเว็บไซต์ของคุณ
ต่อไปนี้เป็นรายการแท็กเทมเพลตที่คุณมักจะพบและใช้ในไฟล์ header.php ของธีมของคุณ อย่างไรก็ตาม สามารถใช้ที่อื่นในธีมของคุณได้เมื่อคุณต้องการ
// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?>
// Title of a Specific Page
<?php wp_title(); ?>
// Exact URL for the site
<?php bloginfo('url'); ?>
// Site's Description
<?php bloginfo('description'); ?>
// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>
// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>
// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?>
// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>
// WordPress version number
<?php bloginfo('version'); ?>
ตอนนี้เรามาดูแท็กเทมเพลตอื่นๆ ที่ใช้กันทั่วไปและทำหน้าที่อะไรบ้าง
แท็กเทมเพลตต่อไปนี้ใช้เพื่อเรียกและรวมเทมเพลตอื่นๆ ตัวอย่างเช่น ไฟล์ index.php ของธีมของคุณจะใช้ไฟล์เหล่านี้เพื่อรวมส่วนหัว ส่วนท้าย เนื้อหา ความคิดเห็น และเทมเพลตแถบด้านข้าง
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
แท็กเทมเพลตต่อไปนี้ถูกใช้ภายในลูป WordPress เพื่อแสดงเนื้อหา ข้อความที่ตัดตอนมา และข้อมูลเมตาจากโพสต์ของคุณ
// Displays the Content of the Post
<?php the_content(); ?>
// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>
// Title of the Specific Post
<?php the_title(); ?>
// Link of the Specific Post
<?php the_permalink() ?>
// Category of a Specific Post
<?php the_category(', ') ?>
// Author of the Specific Post
<?php the_author(); ?>
//ID of a Specific Post
<?php the_ID(); ?>
// Edit link for a Post
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>
// URL of the next page
<?php next_post_link(' %link ') ?>
// URL of the previous page
<?php previous_post_link('%link') ?>
ธีม WordPress มาพร้อมกับพื้นที่พร้อมวิดเจ็ตที่เรียกว่าแถบด้านข้าง ตำแหน่งเหล่านี้คือตำแหน่งในไฟล์ธีมของคุณที่ผู้ใช้สามารถลากและวางวิดเจ็ต WordPress ได้ บ่อยครั้งที่ธีมมีหลายตำแหน่งที่ผู้ใช้สามารถเพิ่มวิดเจ็ตได้
อย่างไรก็ตาม โดยทั่วไปพื้นที่วิดเจ็ตเหล่านี้จะอยู่ที่แถบด้านข้างขวาหรือซ้ายของเค้าโครงธีม หากต้องการเรียนรู้เพิ่มเติม ดูคำแนะนำของเราเกี่ยวกับวิธีเพิ่มแถบด้านข้างพร้อมวิดเจ็ตแบบไดนามิกในธีม WordPress ของคุณ
นี่คือโค้ดที่ใช้แสดงแถบด้านข้างในธีมของคุณ
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
คุณจะต้องแทนที่แถบด้านข้าง-1 ด้วยชื่อที่กำหนดโดยธีมของคุณสำหรับพื้นที่ที่พร้อมวิดเจ็ตนั้นหรือแถบด้านข้าง
แท็กเทมเพลตเพื่อแสดงเมนูการนำทาง
WordPress มาพร้อมกับระบบการจัดการเมนูอันทรงพลังที่ช่วยให้ผู้ใช้สามารถสร้างเมนูนำทางสำหรับเว็บไซต์ของตนได้ ธีม WordPress สามารถมีตำแหน่งเมนูนำทางได้มากกว่าหนึ่งตำแหน่ง
ดูคำแนะนำของเราเกี่ยวกับวิธีสร้างเมนูการนำทางที่คุณกำหนดเองในธีม WordPress
ต่อไปนี้เป็นโค้ดที่จะใช้ในธีมของคุณเพื่อแสดงเมนูการนำทาง
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
ตำแหน่งธีมขึ้นอยู่กับชื่อธีมของคุณที่ใช้ในการลงทะเบียนเมนูนำทาง คลาสคอนเทนเนอร์ CSS สามารถเรียกอะไรก็ได้ที่คุณต้องการ มันจะล้อมรอบเมนูนำทางของคุณ เพื่อให้คุณสามารถจัดสไตล์ได้ตามนั้น
แท็กเทมเพลตเบ็ดเตล็ด
ต่อไปนี้เป็นแท็กบางส่วนที่คุณมักใช้ตลอดทั้งธีม WordPress ของคุณ
// Displays the date current post was written
<?php echo get_the_date(); ?>
// Displays the last time a post was modified
get_the_modified_time
// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>
// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>
// Displays monthly archives
<?php wp_get_archives( ); ?>
// Displays the list of categories
<?php wp_list_categories(); ?>
// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( '[email ', 32 ); ?>
// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
แท็กแบบมีเงื่อนไขคือฟังก์ชันที่ส่งคืนผลลัพธ์เป็น True หรือ False แท็กแบบมีเงื่อนไขเหล่านี้สามารถใช้ได้ทั่วทั้งธีมหรือปลั๊กอินของคุณเพื่อดูว่าตรงตามเงื่อนไขบางประการหรือไม่ จากนั้นจึงดำเนินการบางอย่างตามนั้น
เช่น โพสต์ปัจจุบันมีรูปภาพเด่นหรือไม่ หากไม่มีภาพเด่น คุณสามารถแสดงภาพเด่นเริ่มต้นแทนได้
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
ต่อไปนี้คือแท็กแบบมีเงื่อนไขเพิ่มเติมบางส่วนที่คุณสามารถใช้ได้
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
มีแท็กเงื่อนไขอีกมากมายที่คุณสามารถใช้ได้ รายการแท็กแบบมีเงื่อนไขทั้งหมดสามารถพบได้ในหน้า codex ของ WordPress เกี่ยวกับแท็กแบบมีเงื่อนไข
Loop หรือ WordPress loop คือโค้ดที่ใช้ในการดึงข้อมูลและแสดงโพสต์ใน WordPress แท็กเทมเพลต WordPress จำนวนมากอาจใช้งานได้เฉพาะในลูปเนื่องจากเชื่อมโยงกับวัตถุ post หรือ post_type
ต่อไปนี้เป็นตัวอย่างของการวนซ้ำ WordPress อย่างง่าย
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับลูป โปรดดูที่ Loop คืออะไรใน WordPress (อินโฟกราฟิก)
เราหวังว่าบทความนี้จะช่วยคุณในฐานะเอกสารสรุปธีม WordPress พื้นฐานสำหรับผู้เริ่มต้น คุณอาจต้องการดูรายการเคล็ดลับที่มีประโยชน์ที่สุดสำหรับไฟล์ฟังก์ชัน WordPress
หากคุณชอบบทความนี้ โปรดสมัครรับวิดีโอบทช่วยสอนช่อง YouTube สำหรับ WordPress ของเรา คุณสามารถหาเราได้ทาง Twitter และ Facebook