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

พื้นฐานของธีมใดๆ ก็ตามคือไฟล์ style.css และ index.php

ขั้นแรก สร้างโฟลเดอร์ใน /wp-content/themes ซึ่งจะเป็นธีมในอนาคตของคุณ เช่น ฉันสร้าง misha123 แต่ละธีมจะต้องมีไฟล์อย่างน้อย 2 ไฟล์ - index.php และ style.css - สร้างไฟล์เหล่านี้ภายในโฟลเดอร์นี้

หากคุณทำคะแนนใน style.css จากนั้นในแผงผู้ดูแลระบบ รูปร่าง> ธีมส์คาดหวังข้อผิดพลาดเช่นนี้:

หากคุณได้คะแนนใน index.php:

ที่นี่ WordPress ยังคงพูดถึงบางอย่างเกี่ยวกับธีมลูก อย่าไปสนใจคุณ .

จนกว่าเราจะได้ศึกษามัน index.php จะรับผิดชอบผลลัพธ์ของหน้าใด ๆ บนเว็บไซต์ และแน่นอนว่า style.css จะมีสไตล์ (แม้ว่าจะไม่จำเป็นก็ตาม) แต่สิ่งสำคัญคือใน ไฟล์ style.css คุณได้เพิ่มข้อมูลเมตาและคำอธิบายหัวข้อแล้ว

ชื่อธีม ชื่อของธีมใช่ไหม?

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

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

ที่จริงแล้ว ไม่จำเป็นต้องมีพารามิเตอร์เหล่านี้เลย! แล้วทุกอย่างก็จะดำเนินไป ตัวอย่างเช่นที่นี่:

ฉันไม่ได้ปฏิเสธว่าตัวเลือกนี้จะเหมาะกับใครบางคน แต่ไม่ใช่ฉัน ตอนนี้ฉันจะคัดลอกโค้ดก่อนหน้าไปที่จุดเริ่มต้นของ style.css ของธีม และนี่คือสิ่งที่ฉันจะได้รับ:

การตั้งค่ารูปภาพธีม

เห็นด้วย เมื่อเปรียบเทียบกับธีมอื่นๆ ธีมของเราดูค่อนข้างน่าเบื่อเนื่องจากไม่มีรูปภาพ! สี่เหลี่ยมยังสั่นไหวเมื่อเลื่อน 😭

เพื่อแก้ไขปัญหานี้ เราเพียงสร้างไฟล์ภาพหน้าจอ.png และส่งโดยตรงไปยังโฟลเดอร์ธีม (ความละเอียดที่แนะนำคือ 1200px x 900px)

สำหรับนามสกุลไฟล์ jpg, gif และ jpeg จะทำได้เช่นกัน แต่รหัส WP อย่างเป็นทางการแนะนำให้ใช้ภาพหน้าจอ.png

นี่เป็นอีกสิ่งหนึ่ง:

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

แม้ว่าจะไม่ได้บังคับ แต่จริงๆ แล้วไฟล์ธีมหลักคือ Functions.php

เป็นการยากที่จะจินตนาการถึงธีมสำหรับ WordPress ที่ไม่มีไฟล์ function.php มันถูกใช้เพื่อรวมฟังก์ชันของธีมใดๆ ตัวอย่างเช่น ในตัวมันเองอาจมีฟังก์ชันเพิ่มเติมบางอย่าง หรือไฟล์ที่รวมอยู่ในนั้นผ่านทาง include() / need ( ).

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

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

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

ฟังก์ชั่นก็จะมีลักษณะดังนี้:

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

header.php

เราพยายามรวมสิ่งที่ซ้ำกันในทุกหน้าของเว็บไซต์หรือเกือบทั้งหมดไว้ในส่วนหัว

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

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

ธีม WordPress ยังให้ประโยชน์บางประการอีกด้วย

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

แต่ทำไมคุณควรสร้างธีมของคุณเอง? นั่นคือคำถามหลัก

• นี่เป็นโอกาสในการเรียนรู้เพิ่มเติมเกี่ยวกับ CSS, HTML/XHTML และ PHP
• นี่เป็นโอกาสในการแสดงทักษะของคุณใน CSS, HTML/XHTML และ PHP
• นี่คือโอกาสในการสร้าง
• ก็สนุกดีนะ (เป็นส่วนใหญ่)
• หากคุณเปิดเผยธีมของคุณต่อสาธารณะ คุณจะได้รับความพึงพอใจในการแบ่งปันและมอบบางสิ่งกลับคืนสู่ชุมชน WordPress (อวดได้เลย!)

มาตรฐานการสร้างธีม

เมื่อเขียนโค้ดธีม WordPress ให้ปฏิบัติตามมาตรฐานต่อไปนี้:

• ใช้โค้ด PHP ที่มีโครงสร้างถูกต้อง ปราศจากข้อผิดพลาด และโค้ด HTML ที่ถูกต้อง (ดู)
• ใช้โค้ด CSS ที่ถูกต้องและเรียบเรียงอย่างถูกต้อง (ดู)
• ทำตามคำแนะนำสำหรับ.

หัวข้อกายวิภาคศาสตร์

ธีม WordPress อยู่ในไดเร็กทอรีย่อย wp-content/themes/ ไดเร็กทอรีธีมประกอบด้วยสไตล์ชีต ไฟล์ฟังก์ชันเพิ่มเติม (functions.php) และรูปภาพ ตัวอย่างเช่น ธีมชื่อ "test" อาจจะอยู่ในไดเร็กทอรี wp-content/themes/test/

ตามค่าเริ่มต้น WordPress จะมาพร้อมกับธีมสามธีมที่สร้างโดยทีมพัฒนา Wordpress: "Twenty Fifteen", "Twenty Sixteen" และ "Twenty Seventeen" ธีมเหล่านี้แตกต่างกันและใช้คุณลักษณะและแท็กที่แตกต่างกันเพื่อสร้างรูปลักษณ์ของหน้าเว็บไซต์ ลองดูไฟล์คอมโพเนนต์ให้ละเอียดยิ่งขึ้นเพื่อทำความเข้าใจวิธีสร้างธีมของคุณเองให้ดียิ่งขึ้น

ธีม WordPress ประกอบด้วยไฟล์หลักสามประเภท นอกเหนือจากรูปภาพ อย่างแรกคือสไตล์ชีตที่เรียกว่า style.css ซึ่งควบคุมลักษณะที่ปรากฏของหน้าต่างๆ ของเว็บไซต์ ไฟล์ที่สองมีไฟล์ฟังก์ชันเพิ่มเติม (functions.php) ไฟล์ที่เหลือเป็นไฟล์เทมเพลตที่กำหนดวิธีการแสดงข้อมูลจากฐานข้อมูลบนหน้าเว็บ มาดูแต่ละประเภทแยกกัน

แผ่นสไตล์ธีม

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

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

/* ชื่อธีม: Rose ธีม URI: theme-homepage คำอธิบาย: คำอธิบายโดยย่อของธีม ผู้แต่ง: ชื่อของคุณ ผู้แต่ง URI: your-URI เทมเพลต: write-parent-theme-name-here-Optional-field เวอร์ชัน: version -number เป็นช่องที่ไม่บังคับ คำอธิบายโดยละเอียดของหัวข้อ/ใบอนุญาตหากจำเป็น - -

ธีมที่ง่ายที่สุดมีเพียงไฟล์ style.css และรูปภาพหากจำเป็น หากต้องการสร้างธีมดังกล่าว คุณต้องระบุชื่อของธีมหลักในแถบชื่อเทมเพลต: ตัวอย่างเช่น หากธีม "Rose" ของคุณมาจาก (สืบทอด) ธีม "test" ให้เขียนบรรทัดต่อไปนี้ในส่วนหัว style.css:

แม่แบบ: ทดสอบ

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

ตั้งแต่ WordPress 2.7 ธีมลูกสามารถมีไฟล์เทมเพลตที่มีชื่อเหมือนกับชื่อเทมเพลตในธีมพาเรนต์ ในแผงผู้ดูแลระบบคุณสามารถเลือกเทมเพลตเหล่านี้ที่จะใช้ได้ และไฟล์เหล่านั้นจะถูกใช้แทนไฟล์พาเรนต์

ความคิดเห็นในส่วนหัว style.css จำเป็นโดย WordPress เพื่อระบุธีมและแสดงในเมนูย่อย > เป็นธีมที่ติดตั้ง พร้อมกับธีมอื่นๆ ที่ติดตั้ง

บันทึก : เมื่อคุณกำหนดธีมหลัก ในบรรทัดข้อคิดเห็นเทมเพลต: คุณต้องใช้ชื่อไดเร็กทอรีของธีม ตัวอย่างเช่น หากต้องการใช้ "Default Wordpress Theme" อย่าเขียน

แม่แบบ: ค่าเริ่มต้นของ WordPress

และเขียน

แม่แบบ: ค่าเริ่มต้น

เนื่องจาก "default" เป็นชื่อของไดเร็กทอรีของธีมหลัก

ไฟล์ฟังก์ชันเพิ่มเติม

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

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

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

ไฟล์เทมเพลตธีม

การเลือกเทมเพลตตามคำค้นหา

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

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

คุณสามารถกำหนดเทมเพลตสำหรับหมวดหมู่เฉพาะได้ เช่น โดยการเพิ่มไฟล์เทมเพลต category-6.php ให้กับธีมของคุณ ไฟล์จะถูกใช้แทน index.php เมื่อ ID หมวดหมู่คือ 6 หากต้องการค้นหา ID หมวดหมู่ ให้ไปที่ > หากคุณมีสิทธิ์การเข้าถึงระดับผู้ดูแลระบบใน WordPress เวอร์ชัน 2.3 หรือต่ำกว่า

ตั้งแต่ WordPress 2.5 คอลัมน์ ID ได้ถูกลบออกจากแผงผู้ดูแลระบบ คุณสามารถกำหนด ID หมวดหมู่ได้โดยคลิก "แก้ไขหมวดหมู่" และดูที่ค่า cat_ID ใน URL ตัวอย่างเช่น ส่วนท้ายของ URL:

"...categories.php?action=edit&cat_ID=3"

โดยที่ "3" คือ ID ของหมวดหมู่ปัจจุบัน กระบวนการนี้จะกล่าวถึงรายละเอียดเพิ่มเติมใน

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

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

หรือการใช้ออบเจ็กต์คำขอ อัลกอริธึมเดียวกันสามารถนำไปใช้แตกต่างออกไปได้:

โพสต์; ถ้า ($โพสต์->in_category("9")) ( รวม(TEMPLATEPATH . "/single2.php"); ) อื่น ๆ ( รวม(TEMPLATEPATH . "/single1.php"); ) ?>

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

ไอคอนประเภทไฟล์

Wordpress ใช้ไอคอนประเภทไฟล์ () บนบล็อกของคุณและในอินเทอร์เฟซของแผงผู้ดูแลระบบ หากไอคอนเหล่านี้อยู่ในตำแหน่งที่ระบุ

Wordpress ค้นหาไฟล์เหล่านี้ในไดเร็กทอรีรูปภาพของธีมปัจจุบัน (และใน Wordpress 2.2 ธีมเริ่มต้นจะมีเพียงไอคอนเดียวคือ audio.jpg )

ตัวอย่างเช่น หากต้องการเรนเดอร์ไอคอนประเภท MIME เสียง/mpeg Wordpress จะค้นหาไฟล์ไอคอนในไดเร็กทอรีรูปภาพที่ระบุของธีมปัจจุบัน โดยจะเลือกไฟล์แรกที่ตรงกัน (ดูคำอธิบายฟังก์ชัน):

1. my_theme/images/audio.jpg
2. my_theme /images/audio.gif
3. my_theme/images/audio.png
4. my_theme/images/mpeg.jpg
5. my_theme /images/mpeg.gif
6. my_theme /images/mpeg.png
7. my_theme /images/audio_mpeg.jpg
8. my_theme /images/audio_mpeg.gif
9. my_theme /images/audio_mpeg.png

รายการไฟล์เทมเพลตธีมมาตรฐาน

ด้านล่างนี้คือรายการไฟล์เทมเพลตมาตรฐานที่ใช้โดย WordPress แน่นอนว่าธีมของคุณอาจมีสไตล์ รูปภาพ หรือไฟล์โปรแกรมอื่นๆ เพียงจำไว้ว่าชื่อไฟล์ด้านล่างมีความหมายพิเศษสำหรับ WordPress - ดูข้อมูลเพิ่มเติมในเทมเพลตลำดับชั้น

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

ไฟล์เหล่านี้มีความหมายพิเศษใน WordPress เนื่องจากไฟล์เหล่านี้ใช้เพื่อแทนที่ index.php เมื่ออยู่ในไดเร็กทอรีธีม ตามลำดับชั้นของเทมเพลต และเมื่อมีการร้องขอ หรือตามความจริงของแท็กเงื่อนไข เมื่อฟังก์ชันประเภท is_*(); ส่งคืน "จริง"

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

ลิงก์ไปยังไฟล์จากเทมเพลต

ธีม WordPress เริ่มต้นเป็นตัวอย่างที่ดีของเทคนิค (อธิบายครั้งแรกโดย Michael Heilemann ในรูปแบบ WordPress 1.2 ของ Kubrick) เกี่ยวกับวิธีการแสดงข้อความค้นหาในเทมเพลต

รหัสต่อไปนี้แทรก URL เทมเพลตลงในเอาต์พุตเทมเพลต คุณสามารถเพิ่มข้อมูลเพิ่มเติมเพื่อลิงก์ไปยังไฟล์จากธีมของคุณได้

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

ค่าคงที่ TEMPLATEPATH มีพาธสัมบูรณ์ไปยังไดเร็กทอรีเทมเพลตของธีมปัจจุบัน (โดยไม่มี "/" ต่อท้าย)

โปรดทราบว่า URI ที่ใช้ในสไตล์ชีตจะถูกผูกไว้กับไดเร็กทอรีที่มีไฟล์สไตล์ชีตอยู่ ไม่ใช่ไดเร็กทอรีที่มีเทมเพลตที่ใช้สไตล์เหล่านั้นอยู่ ซึ่งช่วยลดความจำเป็นในการเพิ่มโค้ด PHP ลงในไฟล์สไตล์ชีตเพื่อตั้งค่าไดเร็กทอรีปัจจุบัน ตัวอย่างเช่น หากคุณใช้รูปภาพจากไดเร็กทอรี images/ ของธีมในสไตล์ชีต คุณควรระบุเฉพาะเส้นทางสัมพัทธ์ใน CSS เช่นนี้:

H1 ( ภาพพื้นหลัง: URL(images/my_พื้นหลัง.jpg); )

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

การกำหนดประเภทเทมเพลตแบบกำหนดเอง

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

การเรียกเหตุการณ์ที่จำเป็นสำหรับความเข้ากันได้

เมื่อออกแบบธีม โปรดจำไว้ว่าธีมของคุณควรได้รับการกำหนดค่าในลักษณะที่สามารถทำงานได้ดีกับปลั๊กอิน WordPress ใดๆ ที่คุณหรือผู้ใช้ธีมของคุณต้องการติดตั้ง ปลั๊กอินขยายฟังก์ชันการทำงานของ WordPress ผ่านการใช้ hooks เหตุการณ์ ("Action Hooks" ดูข้อมูลเพิ่มเติม) กิจกรรมส่วนใหญ่เกิดขึ้นในแกนหลักของ WordPress ดังนั้นธีมของคุณไม่จำเป็นต้องเรียกเหตุการณ์ที่กำหนดเองเพื่อให้ทำงานได้ แต่เหตุการณ์ที่ดักจับบางอย่างยังคงต้องถูกเรียกเพื่อให้ปลั๊กอินที่ติดตั้งสามารถแสดงข้อมูลโดยตรงในส่วนหัว (ส่วนหัว) และส่วนท้าย (ส่วนท้าย) ในแถบด้านข้างหรือในเนื้อหาหลักของหน้าได้อย่างถูกต้อง นี่คือรายการแท็กเหตุการณ์พิเศษที่ต้องเรียกใช้ในธีมของคุณเพื่อให้ปลั๊กอินทำงานได้อย่างถูกต้อง:

Wp_head เกิดขึ้นเมื่อรหัสขององค์ประกอบจะปรากฏขึ้น ในเทมเพลต header.php ตัวอย่างการใช้งานในปลั๊กอิน: การเพิ่มโค้ดจาวาสคริปต์ การใช้งาน: -หรือ- การใช้งาน: wp_footer เกิดขึ้นเมื่อส่วนหัว "ส่วนท้าย" ของธีมแสดงในเทมเพลต footer.php ตัวอย่างการใช้งานในปลั๊กอิน: การแทรกโค้ด PHP ที่ควรดำเนินการหลังจากทุกอย่าง ซึ่งเป็นโค้ดสุดท้ายบนหน้า

comment_form เกิดขึ้นเมื่อสคริปต์เทมเพลต comment.php และ comment-popup.php ได้รับการประมวลผล ทันทีก่อนที่จะปิดแท็กแบบฟอร์มความคิดเห็น (

- ตัวอย่างการใช้งาน: แสดงตัวอย่างความคิดเห็นที่เพิ่มใหม่

การใช้งาน:

1. บัตรประจำตัว); -
2. สำหรับตัวอย่างในโลกแห่งความเป็นจริง คุณจะพบการเรียกเหตุการณ์เหล่านี้สำหรับปลั๊กอินได้ในเทมเพลตธีมเริ่มต้นที่เกี่ยวข้อง
3. หมายเหตุทั่วไปสำหรับผู้พัฒนาธีม
4. โปรดอธิบายให้ชัดเจนและอธิบายในเอกสารเกี่ยวกับธีมของคุณ (ไฟล์ README ที่มาพร้อมกับธีมของคุณจะช่วยให้ผู้ใช้จำนวนมากหลีกเลี่ยงอุปสรรคที่อาจเกิดขึ้นได้):
5. หากคุณมีข้อกำหนดพิเศษใดๆ ซึ่งอาจรวมถึงกฎการเขียนซ้ำหรือการแก้ไขที่กำหนดเอง หรือการใช้เทมเพลตพิเศษ รูปภาพ หรือไฟล์อื่นๆ เพิ่มเติม โปรดระบุขั้นตอนการดำเนินการของผู้ใช้อย่างชัดเจนที่ผู้ใช้ต้องทำเพื่อให้ธีมของคุณทำงานได้อย่างสมบูรณ์
6. ลองและทดสอบธีมของคุณในเบราว์เซอร์ต่างๆ เพื่อตรวจจับปัญหาบางอย่างที่ผู้ใช้อาจพบเป็นอย่างน้อย
7. ให้ข้อมูลติดต่อ (หน้าเว็บหรืออีเมล) หากเป็นไปได้ เพื่อสนับสนุนข้อมูลและคำถามของผู้ใช้

ลิงค์และแหล่งข้อมูล

รายการทรัพยากรทั้งหมดที่เกี่ยวข้องกับธีมและเทมเพลตมีอยู่ในบทความ

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

เกือบทุกธีม WordPress ได้รับการติดตั้งในไดเร็กทอรี wp-content/themes และประกอบด้วยไฟล์ 3 หมวดหมู่:

1. ไฟล์สไตล์ชีต;
2. ไฟล์ฟังก์ชันเพิ่มเติม
3. ไฟล์เทมเพลต

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

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

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

หากคุณไม่เคยสร้างการออกแบบมาก่อน คุณควรลองสร้างธีมที่เรียบง่ายก่อน เพื่อให้ทำงานได้อย่างถูกต้อง คุณจะต้องมีไฟล์ต่อไปนี้อย่างน้อย 2 ไฟล์: style.css และ index.php

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

เป็นที่น่าสังเกตว่าพารามิเตอร์เหล่านั้นที่ไม่ได้สร้างโดยไฟล์ index.php จะถูกสร้างขึ้นโดยไฟล์มาตรฐาน ตัวอย่างเช่น หากธีมของคุณประกอบด้วยไฟล์ด้านบนเพียง 2 ไฟล์ แต่ผู้ใช้จำเป็นต้องสร้างแบบฟอร์มสำหรับเพิ่มความคิดเห็น ดังนั้น comment.php มาตรฐานจะทำหน้าที่นี้ ดังนั้น หากคุณต้องการให้ธีมของคุณมีเอกลักษณ์เฉพาะตัวมากขึ้น ก็คุ้มค่าที่จะสร้างไฟล์เทมเพลตเพิ่มเติม ลองดูที่หลัก

1. หากต้องการเพิ่มความคิดเห็น ให้ใช้เทมเพลต comment.php ดังที่คุณอาจเดาได้
2. หากคุณต้องการสร้างหน้าต่างป๊อปอัปพร้อมความคิดเห็น คุณจะต้องมี comment-popup.php เพื่อจุดประสงค์ดังกล่าว
3. ในการสร้างโฮมเพจ จะใช้ home.php
4. ไฟล์ single.php มีหน้าที่ในการแสดงบทความของไซต์ หากคุณไม่มีไฟล์ดังกล่าว index.php จะทำหน้าที่ของมัน
5. ไฟล์ page.php สร้างแต่ละหน้าของเว็บไซต์
6. หากต้องการแสดงข้อมูลเกี่ยวกับผู้เขียน คุณจะต้องมี author.php
7. Category.php รับผิดชอบหมวดหมู่ต่างๆ
8. การแสดงไฟล์เก็บถาวร วันที่ และการค้นหาจะดำเนินการโดยไฟล์ archive.php, date.php และ search.php ตามลำดับ
9. เพื่อให้เว็บไซต์ของคุณแสดงหน้าข้อผิดพลาด 404 ที่ไม่ซ้ำกัน คุณจะต้องเพิ่ม 404.php ของคุณ
10. ส่วนบนและล่างของเว็บไซต์สร้างโดยไฟล์ header.php และ footer.php ตามลำดับ

การสร้างธีมเฉพาะด้วยตนเองตั้งแต่เริ่มต้น

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

หลังจากที่คุณเลือกแล้ว คุณสามารถเริ่มดาวน์โหลดไฟล์เก็บถาวรได้ ในตอนท้ายของกระบวนการ คุณจะต้องแตกไฟล์และอัปโหลดไฟล์ไปยังโฟลเดอร์บางโฟลเดอร์บนไซต์ (ไฟล์เก็บถาวรมักจะมีคำแนะนำเล็กน้อย) การดาวน์โหลดสามารถทำได้โดยใช้โปรแกรม FileZilla หรือโดยตรงจากโฮสติ้ง หากรองรับตัวเลือกดังกล่าว ตอนนี้สิ่งที่คุณต้องทำคือไปที่ส่วน "ธีม" เลือกอันที่คุณดาวน์โหลดแล้วคลิกที่ปุ่ม "เปิดใช้งาน"

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

เมื่อเปิดใช้งานธีมแล้ว คุณสามารถไปยังการทำให้ธีมไม่ซ้ำใครได้ สิ่งแรกที่คุณควรคำนึงถึงคือส่วนบนสุดของเว็บไซต์ (ส่วนหัว) นี่เป็นสิ่งแรกที่จะดึงดูดสายตาของผู้เยี่ยมชม ดังนั้นคุณควรทำอย่างมีความรับผิดชอบ โดยทั่วไปแล้ว ส่วนหัวจะประกอบด้วยชื่อไซต์ โลโก้ และข้อมูลโดยย่อเกี่ยวกับเนื้อหา สามารถสร้างส่วนหัวได้ในโปรแกรมแก้ไขกราฟิกใดก็ได้ แม้ในสีมาตรฐาน นักออกแบบขั้นสูงใช้ Adobe Photoshop

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

หลังจากที่คุณวาดส่วนหัวในโปรแกรมแก้ไขกราฟิกแล้ว คุณจะต้องอัปโหลดไปยังเว็บไซต์ของคุณ เมื่อการดาวน์โหลดเสร็จสิ้น URL จะปรากฏทางด้านขวาของรูปภาพ ซึ่งคุณจะต้องคัดลอก จากนั้นคุณจะต้องไปที่ส่วน "ตัวแก้ไข" และเลือกไฟล์ที่รับผิดชอบในการสร้างส่วนหัว (header.php) ในนั้นคุณจะต้องค้นหา URL ของรูปภาพปัจจุบันและแทนที่ด้วย URL ที่คุณได้รับเมื่ออัปโหลดรูปภาพส่วนหัว หลังจากนี้คุณจะต้องอัปเดตไฟล์ ตอนนี้คุณสามารถดำเนินการตรวจสอบการแสดงส่วนหัวต่อไปได้

หากส่วนหัวของคุณมีพารามิเตอร์ที่แตกต่างจากพารามิเตอร์มาตรฐาน คุณสามารถปรับเปลี่ยนได้ใน header.php ความกว้างถูกควบคุมโดยแอตทริบิวต์ width และความสูงถูกควบคุมโดยแอตทริบิวต์ height การตั้งค่าสามารถทำได้เป็นพิกเซลและเปอร์เซ็นต์ ดังนั้น หากคุณต้องการยืดหมวก ให้ตั้งค่าเป็น 100%

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

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

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

หากต้องการสร้างการนำทางที่มีคุณภาพตั้งแต่เริ่มต้น คุณจะต้องมีความรู้เล็กน้อยเกี่ยวกับแท็ก เช่น