แผ่นโกงธีม WordPress สำหรับผู้เริ่มต้น


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

ก่อนที่จะเริ่มต้น

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

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

อย่างไรก็ตาม คุณยังคงถูกจำกัดว่าฟีเจอร์ใดบ้างที่ธีมของคุณรองรับ บางครั้งคุณอาจต้องการเปลี่ยนแปลงธีม WordPress ของคุณเล็กน้อยซึ่งต้องมีการเขียนโค้ด ในการทำเช่นนั้น คุณจะต้องรู้ PHP, HTML และ CSS พื้นฐานบางอย่าง

สิ่งแรกที่คุณต้องทำคือทำความคุ้นเคยกับวิธีการทำงานของ WordPress เบื้องหลังและเทมเพลตธีม 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 ); ?>

แท็กแบบมีเงื่อนไขในธีม WordPress

แท็กแบบมีเงื่อนไขคือฟังก์ชันที่ส่งคืนผลลัพธ์เป็น 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 เกี่ยวกับแท็กแบบมีเงื่อนไข

วง 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