แนวทางในการพัฒนาธีมลูก WordPress

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

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

ในคู่มือนี้ฉันต้องการแนะนำแนวคิดพื้นฐานของการสร้างธีมลูก WordPress และทำไมมันถึงเป็นความคิดที่ดี.

เริ่มต้นใช้งาน

ธีมลูกไม่ได้ยากอย่างที่ปรากฏ ประโยชน์ของการทำงานกับธีมหลักหมายความว่าคุณไม่จำเป็นต้องเขียน HTML / CSS ทั้งหมดตั้งแต่ต้น ชุดรูปแบบลูกจะใช้ไฟล์เทมเพลตใด ๆ ที่คุณรวมไว้โดยอัตโนมัติเช่น sidebar.php หรือ footer.php. แต่ถ้าขาดหายไปธีมลูกของคุณจะดึงไฟล์เดียวกันจากพาเรนต์.

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

ไฟล์ที่คุณต้องการ

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

นักพัฒนามักจะรวมถึง function.php และ screenshot.png ในโฟลเดอร์เดียวกับไฟล์ CSS ใหม่ของคุณ ภาพหน้าจอจะแสดงในแผงผู้ดูแลระบบ WordPress ของคุณและไฟล์ธีมฟังก์ชั่นสามารถใช้สำหรับการเปลี่ยนแปลงแบ็กเอนด์มากมาย.

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

 / * ชื่อธีม: Twenty Eleven ธีมเด็ก URI: http: //example.com/ คำอธิบาย: ธีมเด็กสำหรับการออกแบบ Twenty Eleven ผู้แต่ง: Jake Rocheleau ผู้แต่ง URI: http: //www.hongkiat.com/blog/ แม่แบบ: ยี่สิบเอ็ด รุ่น: 0.1 * / 

ค่าสำหรับ แบบ ควรเป็นชื่อไดเรกทอรีสำหรับชุดรูปแบบหลักพร้อม นอกเหนือจากนั้นแท็กอื่น ๆ ทั้งหมดควรคุ้นเคยกับธีม WordPress มาตรฐาน.

แม้ว่าแม่แบบ PHP แม่ทั้งหมดจะถูกนำมาใช้ style.css ของผู้ปกครองเดิมจะ ไม่ นำเข้าโดยอัตโนมัติ หากคุณต้องการออกกำลังกายสไตล์ดั้งเดิมคุณจะต้องรวมไว้ที่ด้านบนของเอกสาร style.css ของลูก ด้านล่างเป็นตัวอย่างรวมถึงธีม WP Twenty Eleven.

 @ นำเข้า URL ("… /twentyeleven/style.css"); 

การตั้งค่ารูปแบบใหม่

การใช้กฎ CSS กับธีมของคุณนั้นง่ายเหมือนการแก้ไขดั้งเดิม หากคุณรู้ว่าองค์ประกอบใดที่คุณต้องกำหนดเป้าหมายให้ใช้ตัวเลือกเดียวกันในธีมลูกของคุณเอง.

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

 ร่างกาย padding: 0 1.4em;  #page margin: 1.667em อัตโนมัติ; ความกว้างสูงสุด: 900px  a color: # 5281df; การตกแต่งข้อความ: ไม่มี; font-family: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: active, a: hover text-decoration: ขีดเส้นใต้;  

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

สิ่งที่สำคัญ!

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

 a color: # 5281df! สำคัญ; การตกแต่งข้อความ: ไม่มี; font-family: Calibri, Tahoma, Arial, sans-serif;  

ด้านบนฉันได้คัดลอกการเปลี่ยนแปลงดั้งเดิมของฉันและแก้ไขสีของตัวยึดข้อความด้วยประโยคสำคัญ สิ่งนี้จะมีความสำคัญมากกว่ารูปแบบอื่น ๆ ของความลึกของตัวเลือกเดียวกัน องค์ประกอบที่กำหนดเพิ่มเติม (เช่น #access li: โฮเวอร์> a) มักจะถือสไตล์ของตัวเองเว้นแต่ สี ยังคงสืบทอดมาจากตัวเลือกเริ่มต้นของเรา ในกรณีนี้ชุดรูปแบบหลักของเราไม่ได้ตั้งค่าคุณสมบัติแบบอักษรตระกูลบนลิงก์จุดยึดดังนั้นเราจึงไม่พบปัญหาเกี่ยวกับการสืบทอด.

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

ฟังก์ชั่นการโคลน. php

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

ตัวอย่างเช่นฉันได้สร้างฟังก์ชั่นที่แยกวิเคราะห์ไฟล์ JavaScript บางไฟล์เมื่อแม่แบบเริ่มต้น การดำเนินการนี้จะลบสคริปต์ jQuery และ SWFObject เวอร์ชันเก่าออกพร้อมกับเพิ่มเวอร์ชันล่าสุดไปที่ wp_head พื้นที่.

 // ไฟล์คิว js สำหรับฟังก์ชั่นโหลด mytheme_js () ถ้า (is_admin ()) กลับมา; wp_deregister_script ( 'jQuery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jQuery'); wp_deregister_script ( 'SWFObject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'SWFObject');  add_action ('init', mytheme_js); 

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

การทำงานกับไฟล์ธีม

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

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

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

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

ขั้นแรกให้สร้างไฟล์ใหม่ชื่อ page-offer.php นี่จะเป็น “ข้อเสนอพิเศษ” หน้าส่งเสริมการขายซึ่งมีธีมแตกต่างจากหน้าอื่น ๆ ทั้งหมด ที่นี่คุณสามารถคัดลอกโค้ดเพจต้นฉบับของคุณหรือแม้แต่สร้างธีมทั้งหมดตั้งแต่เริ่มต้น รหัสเดียวที่เราต้องแจ้งให้ WordPress รู้เกี่ยวกับเทมเพลตใหม่นี้คือการตั้งค่าความคิดเห็นใน PHP.

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

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

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

เครื่องมือ WordPress ที่เป็นประโยชน์

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

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

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

แหล่งข้อมูลเพิ่มเติม

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

• 8 ธีมฟรีสำหรับเด็กยี่สิบเอ็ด
• WordPress Codex ออนไลน์»ธีมเด็ก
• วิธีสร้างธีมลูก WordPress โดยใช้ Hooks และตัวกรอง
• ธีมสำหรับเด็ก
• วิธีการสร้างปรับเปลี่ยนและใช้ธีมลูกใน WordPress

ข้อสรุป

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

.