กายวิภาคของธีม WordPress

นี่คือบทจาก “Up and Running: A Practical Guide to WordPress Development” ซึ่งเป็นคู่มือมัลติมีเดียสำหรับการพัฒนา WordPress ที่เปิดตัวในวันที่ 16 มิถุนายน แพ็คเกจที่สมบูรณ์ประกอบด้วย e-book ฉบับเต็ม วิดีโอแนะนำการพัฒนาธีมและปลั๊กอินมากกว่า 50 รายการ และบทสัมภาษณ์แนะนำโค้ดโดย 13 นักพัฒนา WordPress ที่ดีที่สุดในโลก สั่งซื้อล่วงหน้าตอนนี้ที่ upandrunningwp.com เพื่อรับส่วนลด 20%!

ประเด็นที่สำคัญ:

• ธีม WordPress ประกอบด้วยชุดชิ้นส่วนที่สอดคล้องกัน ส่วนสำคัญของธีมที่ไม่ใช่ธีมย่อย ได้แก่ style.css , functions.php และไฟล์เทมเพลต PHP หลายประเภท (เช่น header.php , footer.php และ index.php )
• ในฐานะที่เป็นแหล่งที่มาหลักของการจัดรูปแบบ CSS ของ style.css กำหนดลักษณะที่ปรากฏของธีม ส่วนความคิดเห็นที่ด้านบนสุดของ style.css เป็นที่ที่ลงทะเบียนชื่อธีม ผู้แต่ง ฯลฯ
• functions.php คือที่ที่คุณเพิ่มฟังก์ชันการนำเสนอให้กับธีมของคุณ ผ่าน functions.php คุณจะเพิ่ม CSS สไตล์ชีต, ไฟล์ JavaScript, เมนูนำทาง, พื้นที่วิดเจ็ต และฟังก์ชันอื่นๆ
• ไฟล์เทมเพลตสามารถแบ่งออกเป็นไฟล์เทมเพลตที่ "ใช้เสมอ" อย่างไม่เป็นทางการ ( header.php และ footer.php และ sidebar.php ถ้ามี); ไฟล์ในลำดับชั้นของเทมเพลต WordPress (เช่น index.php , single.php และ page.php ); และ “ส่วนเทมเพลต” (ตัวอย่างที่ไม่สมบูรณ์ดึงมาจากไฟล์เทมเพลตอื่นเพื่อลดการซ้ำซ้อน)
• ธีมอาจมีขนาดใหญ่และซับซ้อนได้ตามอำเภอใจ แต่สิ่งเหล่านี้เป็นส่วนที่สำคัญที่สุดและคาดเดาได้ที่นั่น

บทสั้นๆ นี้เกี่ยวกับแผนภาพขนาดใหญ่ รอทำไม? นี่คือ:

อย่าตื่นตกใจ! คุณจะเข้าใจสิ่งนี้ในไม่ช้า ในส่วนที่เหลือของบทนี้ เราจะอธิบายแต่ละส่วนของไดอะแกรมอย่างละเอียดยิ่งขึ้น

อยู่ในชื่ออะไร?

WordPress ตัดสินใจว่าจะจัดการกับไฟล์ธีมตามชื่อของพวกเขาอย่างไร

สิ่งแรกที่ควรสังเกตคือทุกไฟล์ในไดอะแกรมมีชื่อพิเศษ functions.php , style.css , index.php — ไม่มีไฟล์เหล่านี้ถูกตั้งชื่อโดยบังเอิญ และไม่มีชื่อใดที่ไม่ได้ตั้งใจ

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

style.css

style.css เป็นแหล่งที่มาหลักของรูปลักษณ์ของธีม

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

ตัวอย่างเช่น หากคุณป้อน CSS ต่อไปนี้ใน style.css ของธีมของคุณ:

p {
color: blue;
}

…จากนั้นทุกสิ่งที่อยู่ในย่อหน้า ที่ใดก็ได้บนไซต์ของคุณ ในขณะที่ใช้ธีมของคุณจะกลายเป็นสีน้ำเงิน เจ๋งจริงเหรอ?

style.css เป็นที่ที่คุณจะทำงานส่วนใหญ่ของคุณเพื่อทำให้ธีมของคุณออกมาในแบบที่คุณต้องการ

การควบคุมด้วยภาพประเภทนี้หมายความว่ามีงานมากมายที่ต้องทำใน style.css ซึ่งเป็นที่ที่คุณจะทำงานจำนวนมากเพื่อทำให้ธีมของคุณมีลักษณะตามที่คุณต้องการ

style.css เป็นวิธีการลงทะเบียนธีมของคุณเช่นกัน

style.css ยังมีส่วนความคิดเห็นในส่วนหัว ซึ่งเป็นที่ที่ข้อมูลธีม เช่น ชื่อธีม ผู้แต่ง ธีมหลัก หากมี และอื่นๆ จะถูกลงทะเบียน มีลักษณะดังนี้:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress อ่านความคิดเห็นเหล่านี้เพื่อรับข้อมูลเกี่ยวกับธีมของคุณ ดังนั้นบล็อกความคิดเห็นเล็กๆ ด้านบน—และไม่มีอะไรที่แฟนซีหรือเชิงเทคนิค—คือสิ่งที่ทำให้ธีมของคุณปรากฏในรายการธีมของไซต์ของคุณใน ลักษณะ ที่ปรากฏ > ธีม ในพื้นที่ผู้ดูแลระบบ WordPress:

คุณสามารถดูตัวอย่างข้อมูลการลงทะเบียนจริงของธีมได้ในบรรทัดที่ 1 ถึง 6 ของ style.css ในกราฟิกขนาดใหญ่ นั่นคือ Anatomy of a WordPress Theme

ฟังก์ชั่น.php

functions.php คือที่ที่คุณเพิ่มฟังก์ชันการทำงานที่กำหนดเองให้กับธีมของคุณ นี่อาจเป็นเรื่องที่น่ากลัวมาก รวมไปถึง:

• การเพิ่มสไตล์ชีต CSS (รวมถึง style.css เอง) และไฟล์ JavaScript
• การลงทะเบียนพื้นที่เมนูนำทางและพื้นที่วิดเจ็ต
• การกำหนดขนาดรูปภาพที่กำหนดเองที่คุณต้องการให้พร้อมใช้งานบนไซต์ของคุณ
• การกรองเนื้อหาหน้าของคุณ

functions.php “พูดคุยกับ” ส่วนที่เหลือของ WordPress ส่วนใหญ่ผ่าน hooks ของ WordPress (เรียกอีกอย่างว่า action and filter hooks) ซึ่งช่วยให้เพิ่มฟังก์ชันการทำงานได้ในสถานที่ที่เหมาะสม เราเจาะลึกถึงการทำงานของ functions.php ในแนวคิดหลักของธีม WordPress: 3. การเพิ่มฟังก์ชันการทำงานด้วย functions.php และเราเข้าถึง hooks ใน WordPress Hooks (การดำเนินการและตัวกรอง): สิ่งที่พวกเขาทำและวิธีทำงานมากขึ้น

ไฟล์เทมเพลต PHP

ไฟล์เทมเพลตของไซต์ WordPress เป็นตัวกำหนดมาร์กอัปของไซต์ หากไม่มีพวกเขา ก็ไม่มีอะไรบนหน้าอย่างแท้จริง

ไฟล์ส่วนใหญ่ของธีมคือไฟล์เทมเพลต PHP ถ้า functions.php เป็นสมองของธีม และ style.css คือเสื้อผ้า และไฟล์เทมเพลตคือเนื้อหาที่แท้จริง

ไฟล์เทมเพลตคือไฟล์ ,code>.php ที่มีมาร์กอัป HTML และโค้ด PHP ผสมกัน (ตรวจสอบกราฟิกนั้นแล้วคุณจะเห็นว่าพวกเขามีลักษณะอย่างไร)

ไฟล์เทมเพลตสร้างมาร์กอัปได้สองวิธี

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

1. HTML

ขั้นแรก ไฟล์เทมเพลตจะพิมพ์ HTML ไปยังเบราว์เซอร์โดยตรง เช่นเดียวกับไฟล์ .html ปกติ สิ่งที่ไม่อยู่ภายใน <!--?php?--> ไม่ใช่ PHP: เป็นเพียง HTML ธรรมดาที่ส่งตรงไปยังหน้า ดังนั้นหาก header.php ของธีมมี HTML อยู่บ้าง เช่น

<body class="site-body">

นั่นคือสิ่งที่เบราว์เซอร์จะเห็นในหน้าเว็บ WordPress ทุกหน้าที่มี header.php ซึ่งควรเป็นทั้งหมด

2. PHP

ไฟล์เทมเพลตใช้งานได้จริงโดยใช้ PHP ซึ่ง รวบรวม หรือเปลี่ยนเป็น HTML ตัวอย่างเช่น header.php เดียวกันของเราอาจมีโค้ดต่อไปนี้แทน:

<body class="<?php echo 'site-body'; ?>">

PHP ที่เพิ่มเข้ามานั้นเพียงแค่สะท้อน (พิมพ์) สตริง site-body บนหน้าโดยตรง ดังนั้นเซิร์ฟเวอร์จึงทำการประมวลผล PHP เพิ่มเติมในตอนท้าย แต่เบราว์เซอร์ยังคงเห็น HTML แบบเก่าเหมือนเดิม

อย่างที่คุณจินตนาการได้ ไฟล์เทมเพลตของธีมมีความสำคัญอย่างยิ่ง: หากไม่มี ไฟล์เทมเพลตของธีมนั้นก็ไม่มีอะไรมาก

ไฟล์เทมเพลต “ใช้เสมอ”

มักจะใช้ header.php และ footer.php ทุกที่ในธีม เนื่องจากเว็บไซต์ส่วนใหญ่ต้องการส่วนหัวและส่วนท้ายที่สอดคล้องกันในหน้าต่างๆ

ไฟล์เทมเพลตบางไฟล์ถูกใช้บนทุกหน้าเว็บบนเว็บไซต์ ตัวอย่างที่สำคัญคือ header.php และ footer.php

ไฟล์เหล่านี้ถูกใช้บ่อยจน WordPress มีฟังก์ชันพิเศษสำหรับรวมไว้ในไฟล์เทมเพลตอื่นๆ: get_header() และ get_footer() เรียกด้วยวิธีนี้โดยไม่มีพารามิเตอร์ ฟังก์ชันเหล่านั้นเพียงแค่คว้า header.php และ footer.php แล้ววางลงในตำแหน่งที่เรียกใช้ฟังก์ชัน

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

โปรดทราบว่า sidebar.php ก็เป็นไฟล์ประเภทนี้เช่นกัน เนื่องจากมักเป็นกรณีที่เว็บเพจส่วนใหญ่บนเว็บไซต์จะแชร์แถบด้านข้างเพียงแถบเดียว อาจมีข้อยกเว้นสำหรับหน้าแบบเต็มความกว้างสำหรับแสดงประเภทหน้า โพสต์ sidebar.php มีฟังก์ชันของตัวเองเช่นกัน get_sidebar()

ไฟล์ในลำดับชั้นเทมเพลต WordPress

ความตื่นเต้นที่แท้จริงเกิดขึ้นในไฟล์อย่าง index.php , single.php และ page.php ไฟล์เหล่านี้จะกำหนดว่ามาร์กอัปใดที่จะปรากฏสำหรับ ข้อมูลโพสต์ประเภท ต่างๆ

หากต้องการใช้ถ้อยคำใหม่ WordPress รู้ว่า จะใช้หน้าใดสำหรับข้อมูลโพสต์ประเภทใด ตัวอย่างเช่น:

• หากหน้าเว็บที่ร้องขอเกี่ยวข้องกับโพสต์ประเภทหน้า (เช่น หน้าเกี่ยวกับ) WordPress มักจะใช้ page.php เพื่อสร้างหน้าเว็บนั้น
• หากหน้าเว็บที่ร้องขอเป็นโพสต์ประเภทโพสต์แต่ละรายการ (เช่น คุณกำลังดูโพสต์บล็อกใดโดยเฉพาะ) WordPress มักจะใช้ single.php เพื่อสร้าง
• หากคุณกำลังดูโพสต์ประเภทโพสต์ทั้งหมดที่คุณเขียนในปี 2014 WordPress มักจะใช้ archive.php เพื่อสร้างหน้าเว็บนั้น

นี่คือความมหัศจรรย์ของ ลำดับชั้นเทมเพลต WordPress ซึ่งเราครอบคลุมในเชิงลึกในแนวคิดหลักของธีม WordPress: 1. ลำดับชั้นของเทมเพลต

ไฟล์เทมเพลตเหล่านี้อิงจากลูป

ไฟล์เทมเพลต "ลำดับชั้นในเทมเพลต" เหล่านี้ล้วนแบ่งปันบางสิ่งที่สำคัญมาก: ไฟล์เหล่านี้สร้างขึ้นโดยใช้ The Loop ซึ่งเป็นหนึ่งในหลักการหลักในการพัฒนา WordPress

เราเจาะลึกเข้าไปใน The Loop ในแนวคิดหลักของธีม WordPress: 2. การประมวลผลโพสต์ด้วย The Loop The Loop นั้นเจ๋ง มาก ดังนั้นหากคุณเพิ่งเริ่มเล่น ให้จับถุงเท้าไว้เพื่อไม่ให้ The Loop หลุดมือ!

ส่วนเทมเพลต

สมมติว่ามีส่วนของทั้ง index.php และ page.php ที่เหมือนกันทุกประการ เราควรทำซ้ำรหัสนั้นในทั้งสองไฟล์หรือไม่

อันที่จริง DRY—”Don't Repeat Yourself!”—เป็นการสู้รบสำหรับโปรแกรมเมอร์ที่ดี การทำซ้ำทำให้เกิดปัญหาทุกประเภท จะทำอย่างไรถ้าคุณต้องการเปลี่ยนแปลงบางอย่างเกี่ยวกับส่วนที่ซ้ำกัน ตอนนี้คุณต้องเปลี่ยนมันในสองที่ จะเกิดอะไรขึ้นถ้าคุณลืมเปลี่ยนมันในที่เดียว หรือทำผิดพลาดในไฟล์หนึ่งแต่ไม่ใช่อีกไฟล์หนึ่ง ตอนนี้โค้ดของคุณไม่ซิงค์และไซต์ของคุณมีปัญหา (ตอนนี้: จะเป็นอย่างไรถ้าคุณทำซ้ำรหัสเดิม 20 ครั้ง คุณต้องทำซ้ำทุกการเปลี่ยนแปลงที่คุณทำครั้ง 20 และหวังว่าคุณจะ "จับได้ทั้งหมด")

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

ตอนนี้คุณรู้กายวิภาคของธีมแล้ว

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

เมื่อบทเรียนกายวิภาคศาสตร์จบลง สามบทถัดไปจะเจาะลึกถึงหลักการเขียนโปรแกรมที่สำคัญสี่ประการซึ่งอธิบายว่าธีมทำงานอย่างไร:

1. ลำดับชั้นเทมเพลต WordPress
2. The Loop
3. ฟังก์ชั่น.php
4. WordPress hooks

ต่อไปข้างหน้า!