วิธีสร้างธีมที่กำหนดเองของ WordPress

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

ธีมที่กำหนดเองคืออะไร?

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

แม้ว่าธีม WordPress ที่สร้างไว้แล้วจะดีมาก แต่หากคุณมีความสามารถและความต้องการ คุณอาจต้องการสร้างธีมแบบกำหนดเองสำหรับลูกค้า ตัวคุณเอง หรือเพื่อส่งไปยังตลาดกลางโดยมีเจตนาที่จะขาย เมื่อสร้างธีมเชิงพาณิชย์ คุณจะต้องปฏิบัติตามหลักเกณฑ์ของ Marketplace สำหรับมาตรฐานการเข้ารหัส โครงสร้างของไฟล์และโฟลเดอร์ ฯลฯ คุณสามารถดูรายละเอียดเพิ่มเติมเกี่ยวกับหลักเกณฑ์เหล่านี้ได้จาก เว็บไซต์ Marketplace

ในบล็อกนี้ เราจะใช้บทช่วยสอนเพื่อแสดงภาพรวมพื้นฐานเกี่ยวกับวิธีสร้างธีม WordPress ของคุณเองโดยครอบคลุมพื้นฐานและขั้นตอนทั้งหมดที่เกี่ยวข้องกับกระบวนการ

สร้างธีมที่กำหนดเองของ WordPress

ธีม WordPress สร้างขึ้นด้วยไฟล์เทมเพลต สคริปต์ สไตล์ รูปภาพ ฯลฯ ในการดำเนินการต่อ คุณควรมีความรู้เกี่ยวกับ PHP, HTML และ CSS ซึ่งจำเป็นสำหรับการสร้างธีมที่กำหนดเอง การทำความเข้าใจ JavaScript อาจเป็นข้อได้เปรียบเพิ่มเติม

ในการเริ่มต้น เราจะตั้งชื่อธีมเป็น 'Updraft' ก่อน สร้างโฟลเดอร์ชื่อ 'Updraft' ภายใน wp-content/ themes ภายในโฟลเดอร์ 'Updraft' นี้ คุณจะต้องเขียนโค้ดที่เกี่ยวข้องกับธีม จัดเก็บไฟล์ รูปภาพ ฟอนต์ ฯลฯ

ไฟล์หลักของธีม WordPress ที่กำหนดเองคือ:

• style.css
• index.php
• ฟังก์ชั่น.php

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

 [รหัส]
/*
ชื่อกระทู้: Updraft
URI ธีม: https://updraftplus.com
ผู้เขียน: UpdraftPlus
URI ผู้เขียน: https://updraftplus.com
คำอธิบาย: ธีมแบบกำหนดเองที่สร้างขึ้นสำหรับเว็บไซต์
เวอร์ชัน: 1.0
ใบอนุญาต: GNU General Public License v2 หรือใหม่กว่า
URI ใบอนุญาต: http://www.gnu.org/licenses/gpl-2.0.html
โดเมนข้อความ: updraft
*/
[/รหัส]

จากนั้นไปที่ Appearance >>Themes ซึ่งคุณจะเห็นธีมของคุณอยู่ในรายการ เปิดใช้งานมัน เมื่อคุณตรวจสอบส่วนหน้าของไซต์ของคุณ มันจะแสดงหน้าจอว่าง เนื่องจากเรายังไม่ได้เพิ่มอะไรในธีม..

อย่าลืมเก็บรูปภาพ สคริปต์ และสไตล์ไว้ในไดเร็กทอรีธีมของคุณ ไดเร็กทอรีธีมอ้างอิงถึงโฟลเดอร์ 'wp-content/themes/Updraft' อย่าลืมจัดระเบียบโดยใช้โครงสร้างโฟลเดอร์ที่ดี สร้างโฟลเดอร์เฉพาะสำหรับรูปภาพ สคริปต์ และสไตล์ คัดลอกไฟล์ลงในไดเร็กทอรีที่เกี่ยวข้อง

ไฟล์ฟังก์ชัน

functions.php เป็นไฟล์ ที่ คุณสามารถเพิ่มโค้ดเพื่อวัตถุประสงค์ต่างๆ ได้ ไฟล์นี้ถูกโหลดโดยอัตโนมัติระหว่างการเริ่มต้น WordPress โดยโค้ดที่เขียนในไฟล์จะทำงานโดยอัตโนมัติ

การดำเนินการต่อไปนี้ใน ไฟล์ functions.php มักจะดำเนินการตามลำดับนี้:

• จัดคิวสไตล์ชีตและสคริปต์ของธีม (เพิ่มไฟล์ JS และ CSS ลงในเว็บไซต์)
• เปิดใช้งานแถบด้านข้าง เมนูนำทาง โพสต์ภาพขนาดย่อ ฯลฯ
• กำหนดฟังก์ชันที่ใช้ตลอดทั้งแอปพลิเคชัน
• เป็นต้น

ผู้ใช้สามารถเพิ่มสไตล์และสคริปต์จาก ไฟล์ functions.php ได้ดังนี้ โปรดดูที่ลิงค์ต่อไปนี้สำหรับ เอกสาร เพิ่มเติม

 [รหัส]
ฟังก์ชัน include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "บูตสแตรป" );
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('บูตสแตรป');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/รหัส]

ฟังก์ชัน get_stylesheet_directory_uri() ให้เส้นทางสัมพัทธ์ของไดเร็กทอรีธีมที่ใช้งานอยู่ ส่วนที่เหลือของรหัสสามารถเห็นได้ว่าเป็นเส้นทางของสินทรัพย์

ในทำนองเดียวกัน สำหรับการเพิ่มเมนูการนำทาง ให้โพสต์ภาพขนาดย่อ:

 [รหัส]
ฟังก์ชั่น updraft_theme_setup () {
add_theme_support( 'โพสต์ภาพขนาดย่อ' );
register_nav_menus(
อาร์เรย์ (
'primary' => __( 'เมนูหลัก' ),
'footer1=' => __( 'เมนูส่วนท้าย' ),
'shop' => __( 'เมนูหน้าร้านค้า' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/รหัส]

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

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

ไฟล์เทมเพลต

เมื่อสร้างธีม คุณสามารถใช้ไฟล์เทมเพลตเพื่อส่งผลต่อเลย์เอาต์และการออกแบบส่วนต่างๆ ของเว็บไซต์ของคุณ ตัวอย่างเช่น คุณจะใช้เทมเพลต header.php เพื่อสร้างส่วนหัว หรือใช้เทมเพลต comments.php เพื่อใส่ความคิดเห็นในเว็บไซต์ของคุณ ไฟล์เทมเพลตมี นามสกุล .php เนื่องจากเป็นไฟล์ PHP ทุกหน้าจึงแสดงผลเป็น HTML

เมื่อใช้เทมเพลต นักพัฒนาสามารถแจกจ่ายโค้ดระหว่างหลายไฟล์ได้ ด้านล่างนี้คือไฟล์บางไฟล์ที่เป็นปัญหา

• index.php : เทมเพลตหลัก ไฟล์นี้ควรรับผิดชอบในการโพสต์รายการ เมื่อคุณตั้งค่าหน้าโพสต์จาก การตั้งค่า >> การอ่าน เทมเพลตนี้จะถูกดำเนินการ
• page.php : เทมเพลตนี้มีหน้าที่ในการแสดงผลเพจของคุณ การตั้งค่านี้สามารถแทนที่ได้โดยการกำหนดเทมเพลตของเพจแบบกำหนดเองให้กับแต่ละเพจ
• single.php : ใช้เมื่อมีการสอบถามโพสต์เดียว
• header.php : เพิ่มส่วนหัวของคุณในเทมเพลตนี้
• footer.php : เพิ่มส่วนท้ายของคุณในเทมเพลตนี้
• sidebar.php : เพิ่มวิดเจ็ตในเทมเพลตนี้

รับรายการไฟล์เทมเพลตทั้งหมดที่มีให้ ที่ นี่

เทมเพลตหน้าแบบกำหนดเอง

ตามค่าเริ่มต้น หน้าทั้งหมดของคุณจะแสดงผลผ่าน เทมเพลต page.php แต่ในทางปฏิบัติ บางครั้งคุณต้องแสดงโฟลว์แยกกันในหน้าต่างๆ ในสถานการณ์สมมตินี้ ขอแนะนำให้คุณใช้พลังของเทมเพลตเพจแบบกำหนดเอง

ตัวอย่างเช่น หากคุณมีหน้า 'อาชีพ' และคุณต้องการเพิ่มรหัสของคุณในหน้านี้ เพื่อให้บรรลุสิ่งนี้ คุณจะต้องสร้าง ไฟล์ career.php ลงในไดเร็กทอรีธีมและใส่ความคิดเห็นด้านล่างที่ด้านบนของไฟล์

 [รหัส]
<?php
/*
ชื่อแม่แบบ: Career
*/
[/รหัส]

ถัดไป ไปที่ส่วนแก้ไขหน้าและกำหนดเทมเพลต 'อาชีพ' นี้จากใต้ กล่อง แอตทริบิวต์ของหน้า

ตอนนี้เมื่อคุณไปที่หน้าอาชีพ – รหัสจาก career.php จะถูกดำเนินการ

ไฟล์ส่วนหัว

เว็บไซต์ของคุณจะมีส่วนหัวทั่วไปในทุกหน้า คุณสามารถวางส่วนหัวทั่วไปนี้ลง ใน header.php รหัสส่วนหัวจะมีลักษณะดังนี้:

 [รหัส]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- เมนูของคุณ -->
[/รหัส]

ในโค้ดด้านบนนี้ คุณจะสังเกตเห็นว่าเราใช้ฟังก์ชันบางอย่างที่มีอยู่ใน WordPress

• wp_head() : วิธีนี้จะแทรกองค์ประกอบที่สำคัญลงในเอกสารของคุณ เช่น สคริปต์ สไตล์ และเมตาแท็ก
• body_class() : สิ่งนี้จะเพิ่มคลาสต่าง ๆ ให้กับองค์ประกอบร่างกาย
• wp_body_open() : ใช้เพื่อแทรกโค้ดทันทีหลังจากเปิดแท็ก body ตัวอย่างนี้จะเป็นสคริปต์ Google Analytics

สามารถเพิ่มเมนูแบบไดนามิกผ่าน ฟังก์ชัน wp_nav_menu() สมมติว่าคุณได้สร้างเมนูภายใต้ ลักษณะที่ปรากฏ >> เมนู และกำหนดตำแหน่ง 'หลัก' ให้กับเมนูนั้นแล้ว รหัสด้านล่างสร้างองค์ประกอบเมนูแบบไดนามิก

 [รหัส]
<?php
wp_nav_menu(
อาร์เรย์ (
'theme_location' => 'หลัก',
'container_class' => 'เมนู',
)
);
?>
[/รหัส]

เมื่อตั้งค่าไฟล์ส่วนหัวแล้ว ให้ใช้ ฟังก์ชัน get_header() เพื่อรวมไฟล์นี้ไว้ในเทมเพลตอื่นๆ

ไฟล์ส่วนท้าย

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

 [รหัส]
<!-- องค์ประกอบส่วนท้าย -->
<?php wp_footer(); ?>
</body>
</html>
[/รหัส]

ที่นี่ ใช้ wp_footer() ที่แทรกองค์ประกอบ โดยเฉพาะสคริปต์ ที่ตำแหน่งนี้ การใช้ get_footer() จะรวมเนื้อหาของไฟล์นี้ไว้ที่อื่น

ไฟล์แถบด้านข้าง

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

ในตัวอย่างนี้ เราจะสร้างแถบด้านข้างพื้นฐานโดยการเพิ่มโค้ดด้านล่างลงใน ไฟล์ functions.php

 [รหัส]
ฟังก์ชัน updraft_widgets_init () {
register_sidebar (
อาร์เรย์ (
'name' => esc_html__( แถบด้านข้างหน้าแรก' ),
'id' => 'แถบด้านข้าง-1',
'description' => esc_html__( 'เพิ่มวิดเจ็ตที่นี่เพื่อให้ปรากฏในแถบด้านข้างของคุณ' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/รหัส]

จากนั้นไปที่ Appearance >> Widgets ที่นี่คุณจะพบแถบด้านข้างด้านบน ในตัวอย่างนี้ เราจะเพิ่มวิดเจ็ตบางอย่างในแถบด้านข้างนี้ หากต้องการเพิ่มแถบด้านข้างนี้ในส่วนหน้า ให้เพิ่มโค้ดต่อไปนี้ใน sidebar.php

 [รหัส]
<div class="sidebar">
<?php
ถ้า ( is_active_sidebar ( 'sidebar-1' ) ) {
dynamic_sidebar( 'แถบด้านข้าง-1' );
}
?>
</div>
[/รหัส]

สุดท้าย อย่าลืมตั้งชื่อเมธอด ' get_sidebar()' เพื่อให้คุณสามารถรวมแถบด้านข้างไว้ที่ไหนก็ได้ในหน้าอื่น ๆ เมื่อจำเป็น

การแสดงผลหน้าและโพสต์

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

 [รหัส]
<?php
get_header();
?>
<div class="content-area">
<main class="site-main">
<?php
ในขณะที่ ( have_posts() ) :
the_post();
?>
<?php
ถ้า ( has_post_thumbnail() ):
the_post_thumbnail();
เอนดิฟ;
?>
<header class="entry-header">
<?php the_title(); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
ในที่สุด;
?>
</main>
</div>
<?php
get_footer();
[/รหัส]

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

• the_catgeory() : แสดงรายการหมวดหมู่สำหรับโพสต์
• the_permalink() : แสดงลิงก์ถาวรสำหรับโพสต์ปัจจุบัน
• the_excerpt() : แสดงข้อความที่ตัดตอนมาของโพสต์

I18n สำหรับธีมที่กำหนดเองของ WordPress

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

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

 [รหัส]
ฟังก์ชั่น i18n_setup () {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/รหัส]

ตอนนี้เมื่อใดก็ตามที่คุณใช้สตริงแบบคงที่ในไฟล์ธีมของคุณ ให้รวมไว้ใน ฟังก์ชัน __() หรือ _e()

 [รหัส]
<h2><?php _e('ชื่อ', 'อัพดราฟต์); ?></h2>
<?php echo __('User Email', 'updraft'); ?>
[/รหัส]

มีเครื่องมือพิเศษเช่น POEDIT ที่ช่วยในการสร้างไฟล์ภาษาที่แปล โปรดดูที่ บล็อกนี้ สำหรับข้อมูลเพิ่มเติม

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

• WordPress Loop
• แท็กเทมเพลต
• หน้าหมวดหมู่
• Function_Reference
• แท็กเงื่อนไข
• มาตรฐานการเข้ารหัส WordPress

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

โพสต์ วิธีสร้างธีมที่กำหนดเองของ WordPress ปรากฏเป็นอันดับแรกใน UpdraftPlus UpdraftPlus – ปลั๊กอินสำรอง กู้คืน และย้ายข้อมูลสำหรับ WordPress