การเริ่มต้นใช้ธีมเด็ก WordPress

บทความที่เขียนโดย:
  • WordPress
  • อัปเดต: ก.ค. 27, 2013

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

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

การแก้ไขรูปลักษณ์โดยไม่ต้องแก้ไขไฟล์ธีม

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

ไฟล์นี้จะมีไฟล์ 2 อย่างน้อยไฟล์ style.css และ functions.php ไฟล์อื่น ๆ ทั้งหมดจะถูกดึงมาจากธีมหลักดังนั้นหากคุณไม่สร้างไฟล์ใหม่ในไดเร็กทอรีธีมย่อยคุณจะใช้ไฟล์ระดับบน

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

ขอให้มือของเราสกปรก

ดังนั้นขั้นตอนแรกคือการสร้างไดเร็กทอรีธีมย่อยใหม่ภายใต้ / wp-content / themes / folder ของคุณ ลองเรียกว่า "Twenty-Child" แล้วลองสร้างไฟล์ styles.css พื้นฐานของเรา:

/ * ชื่อธีม: Twenty Theme เด็ก URI: http://www.webrevenue.co รายละเอียด: การเรียนรู้ธีมเด็กตอนนี้ผู้แต่ง: Rochester Oliveira ผู้แต่ง URI: http://www.webrevenue.co/author/rochester/ เทมเพลต: twentytwelve * / / * เรียกไฟล์ธีม CSS หลัก * / @import ("../ twentytwelve / style.css"); / * เพิ่มสิ่งที่คุณต้องการด้านล่าง * /

พารามิเตอร์คือ (ในพารามิเตอร์อื่น ๆ ไม่ใส่):

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

เมื่อคุณเพิ่มโค้ดนี้คุณจะเห็นธีมย่อยของ Child ภายใต้ WP admin> Appearance> Themes คุณสามารถเลือกได้ในขณะนี้และการเปลี่ยนแปลงทั้งหมดที่ทำจะปรากฏในไซต์ของคุณ

การแก้ไขธีมสำหรับเด็ก 101

นี้จะไร้ประโยชน์ถ้าคุณมีศูนย์ CSS ความรู้ใช่ไหม? ไม่ถูกต้อง! CSS เป็นจริงง่ายสวยและคุณสามารถหาตัวอย่างมากมายเพื่อช่วยให้คุณมี นี่เป็นเคล็ดลับง่ายๆที่จะช่วยคุณในการปรับแต่งเอง

#XUNUMX ติดตั้ง Firebug

หลายคนรัก Chrome และ Safari (เช่นฉัน!) แต่สำหรับฉัน FireFox จะดีมากสำหรับการพัฒนา ดังนั้นถ้าคุณต้องการใช้ฉันขอแนะนำให้คุณติดตั้ง firebug ซึ่งเป็นเครื่องมือที่น่ากลัวในการทำความเข้าใจตัวเลือกทั้งหมดที่ใช้งานอยู่ในองค์ประกอบปัจจุบัน

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

ในช่อง CSS คุณจะเห็นกฎ CSS ทั้งหมดนำมาใช้กับองค์ประกอบปัจจุบันและกฎ "เฉพาะ" ในด้านบนมากขึ้น แต่เรามาดูกันว่าคุณสามารถทำอะไรกับข้อมูลนี้ได้

#2 พิจารณาความจำเพาะของ CSS (หรือน้ำหนักตัวเลือก)

กฎ CSS แต่ละตัวมีตัวเลือกคุณสมบัติและค่า แต่เมื่อเบราว์เซอร์หา 2 หรือมากกว่ากฎที่จะมีผลต่อองค์ประกอบเดียวกันก็ต้องเลือกที่หนึ่งของพวกเขามีความเหมาะสมมากขึ้น เรามักจะมี "กฎ" นี้เพื่อทำความเข้าใจว่าจะพิจารณาอะไรบ้าง:

  • ! การประกาศสำคัญจะเขียนทับสิ่งอื่นใด
  • CSS แบบลินินจะเขียนทับอะไร แต่! กฎสำคัญ
  • รหัส (#header, #footer, # container ... ) มูลค่า 100 points
  • คลาส (.main, .nav, .box) มูลค่า 10 คะแนน
  • แท็ก (body, div, p, a) มูลค่าจุด 1
  • Universal selector และ pseudo classes (*,: hover, after) มูลค่า 0 แต่จะใช้ถ้ามี "tie"

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

.site-header {padding: 1.71429em 0; } บทความรายละเอียด figcaption รูปส่วนท้ายส่วนหัว hgroup nav ส่วน {display: block; }

ตัวเลือกแรกมีจุด 10 (เนื่องจากเป็นคลาส) และตัวที่สองมีจุด 1 (แต่ละเครื่องหมายจุลภาคจะแยกเฉพาะตัวเลือกอื่น) ด้วยเหตุนี้จึงปรากฏที่ด้านบน หากคุณมีบางอย่างเช่น #header div ที่นั่น selector แน่นอนจะเป็นคนแรกที่จะแสดงขึ้น

ทำไมถึงเป็นสิ่งสำคัญ

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

.site-header {padding: 1.71429em 0; }

คุณสามารถเพิ่มรูปแบบนี้ใน CSS ธีมย่อย แต่คุณไม่ควรทำดังนี้

.site-header {padding 15px 0! สำคัญ; }

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

ร่างกายส่วนหัวของไซต์ {padding: 15px 0; }

ตัวเลือกนี้มีจุด 11 ซึ่งใหญ่กว่า 10 เดิมและจะใช้รหัสนี้

#3 ใช้ประโยชน์จากฟังก์ชั่นได้ดี

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

if (! function_exists ('top_menu')) {function top_menu () (// โค้ดเย็นที่นี่} add_action ('wp_head', 'top_menu'); }

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

#4 เรียนรู้คุณสมบัติ CSS บางอย่าง

คุณรู้ไหมว่าคุณสามารถซ่อนและเพิ่มเนื้อหาโดยใช้ CSS ได้ คุณจะต้องติดตั้ง firebug เพื่อหาตัวเลือกที่ถูกต้อง แต่คุณสามารถซ่อนรายการโดยการเพิ่มโค้ดนี้:

ร่างกาย a {display: none}

เพื่อเพิ่มความซับซ้อนมากขึ้นเนื่องจากคุณสามารถเพิ่มข้อความขนาดเล็กได้หากต้องการให้มีข้อความ "ขาย" หลังจากป้ายราคาเช่นคุณสามารถใช้รหัสนี้ได้:

.price del: after (สี: แดง; เนื้อหา: "ขาย!"; }

คุณคิดอย่างไร?

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

เกี่ยวกับ Rochester Oliveira

ฉันเป็นนักออกแบบเว็บไซต์และผู้ประกอบการจากItajubá (MG), Brasil ฉันชอบเขียนเกี่ยวกับหัวข้อที่คลุมเครือและทำสิ่งดีๆ