การโต้ตอบกับ WordPress Theme Customizer

  1. 1. รู้เบื้องต้นเกี่ยวกับตัวปรับแต่งธีมของ WordPress
  2. 2. กำลังอ่าน: การโต้ตอบกับ WordPress Theme Customizer
  3. 3. WordPress Theme Customizer Boilerplate
  4. 4. ขยาย Boilerplate ของ Theme Theme WordPress
  5. 5. Theme Customizer Boilerplate – ตัวเลือกตามเงื่อนไขธีมเด็กและปลั๊กอิน

ในส่วนที่ 1 ของชุด WordPress Theme Customizer ฉันพูดถึงว่าในการโต้ตอบกับ Theme Customizer คุณต้องโหลด $ wp_customize วัตถุซึ่งเป็นตัวอย่างของ WP_Customize_Manager ชั้น ในการทำเช่นนั้นคุณต้องใช้ customize_register การกระทำเบ็ด:


add_action ('Customize_register', 'my_theme_customize_register');
ฟังก์ชัน my_theme_customize_register ($ wp_customize) {

// การโต้ตอบกับวัตถุ $ wp_customize

}

คุณสามารถวางรหัสนี้ในฟังก์ชั่นของ theme.php หรือไฟล์ที่รวมไว้จากมัน.

การเพิ่มหรือลบองค์ประกอบ Theme Customizer (ส่วนการตั้งค่าและการควบคุม)

เมื่อคุณโหลดแล้ว $ wp_customize วัตถุที่คุณสามารถใช้วิธีการใดก็ได้เพื่อเพิ่มรับหรือลบการตั้งค่าการควบคุมและส่วนต่างๆในนั้น (add_setting, get_setting, remove_setting, add_control …คุณจะได้รับคะแนน).

ดังนั้นถ้าคุณต้องการ ได้รับ หรือ ลบ ส่วนการควบคุมหรือการตั้งค่าทั้งหมดที่คุณต้องมีคือ ID บรรทัดนี้จะลบส่วนสี (วางไว้ในฟังก์ชั่น my_theme_customize_register จากตัวอย่างโค้ดแรก):

$ wp_customize-> remove_section ('colors');

การเพิ่มส่วนการควบคุมหรือการตั้งค่าจะแตกต่างกันเล็กน้อยเนื่องจากต้องการพารามิเตอร์เพิ่มเติม ฉันจะไม่ผ่านพวกเขาทั้งหมดที่นี่ด้วยเหตุผลสองประการ:

  1. นั่นไม่ใช่จุดประสงค์ของซีรีย์นี้จริงๆเราจะสร้างชุดเครื่องมือ Theme Customizer ที่คุณสามารถวางลงในธีมแทน
  2. Alex Mansfield ได้กล่าวปิดมันไว้ในสัตว์ประหลาดคำ 6000 ตัวของเขาแล้ว บทช่วยสอนเกี่ยวกับ Customizer ของธีม ที่นักพัฒนาชุดรูปแบบ WordPress ทุกคนต้องอ่านแล้วทวีตเกี่ยวกับ (อย่างจริงจังถ้าคุณยังไม่ได้ไปอ่านเลยตอนนี้).

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

  • ส่วนใหม่ที่ชื่อว่า“ เค้าโครง”
  • การตั้งค่าใหม่ที่เก็บเค้าโครงของธีมของคุณ
  • ตัวควบคุมวิทยุแบบใหม่ที่มีสองตัวเลือก – แถบด้านข้างทางด้านซ้ายและด้านข้างทางด้านขวา

สิ่งแรกที่จะเพิ่มลงใน Theme Customizer คือส่วน “เลย์เอาต์”:

$ wp_customize-> add_section (
// ID
'layout_section',
// อาเรย์อาร์กิวเมนต์
array (
'title' => __ ('เค้าโครง', 'my_theme'),
'Ability' => 'edit_theme_options',
'description' => __ ('อนุญาตให้คุณแก้ไขโครงร่างของธีม', 'my_theme')
)
);

ยังไม่ลองดูใน Customizer ส่วนจะไม่ปรากฏจนกว่าจะมีการตั้งค่าและเพิ่มการควบคุมลงไป ดังนั้นให้เพิ่มทั้งสอง:

$ wp_customize-> add_setting (
// ID
'my_theme_settings [layout_setting],
// อาเรย์อาร์กิวเมนต์
array (
'default' => 'แถบด้านข้างขวา',
'type' => 'ตัวเลือก'
)
);
$ wp_customize-> add_control (
// ID
'layout_control',
// อาเรย์อาร์กิวเมนต์
array (
'type' => 'radio',
'label' => __ ('เค้าโครงธีม', 'my_theme'),
'section' => 'layout_section',
'options' => อาร์เรย์ (
'left-sidebar' => __ ('แถบข้างด้านซ้าย', 'my_theme'),
'right-sidebar' => __ ('แถบด้านข้างขวา', 'my_theme')
),
// อันสุดท้ายนี้ต้องตรงกับ ID การตั้งค่าจากด้านบน
'settings' => 'my_theme_settings [layout_setting]'
)
);

สมมติว่าคุณอ่านหน้ากวดวิชาและ / หรือ Codex ของ Alex มีเพียงหนึ่งพารามิเตอร์ในอาร์เรย์อาร์กิวเมนต์ add_setting – ‘ประเภท’ – ที่ฉันต้องการจะมุ่งเน้น คุณมีความเป็นไปได้สองอย่างที่นี่ “ตัวเลือก” และ “theme_mod” และคุณสามารถเรียกคืนได้โดยใช้ get_option และ get_theme_mod, ตามลำดับ ฉันมักจะใช้ “ตัวเลือก” เพียงเพราะช่วยให้คุณสามารถทำให้ค่าการตั้งค่าชุดรูปแบบของคุณเป็นแบบซีเรียลโดยให้รหัสเหมือนกัน my_theme_settings [setting_1], my_theme_settings [setting_2] เป็นต้นด้วยวิธีนี้ค่าทั้งหมดจะถูกจัดเก็บเป็นรายการฐานข้อมูลเดียวในตาราง wp_options ของคุณ.

และในที่สุดหลังจากคุณเพิ่มตัวอย่างโค้ดทั้งสองเพื่อให้คุณเชื่อมต่อ customize_register action hook (ตัวอย่างโค้ดแรกในโพสต์นี้) Theme Customizer ได้รับการปรับแต่ง:

เพิ่มส่วนใหม่ลงใน Theme Customizer

เพิ่มส่วนใหม่ลงใน Theme Customizer

การใช้ค่าติดตั้ง Theme Customizer ในธีมของคุณ

หลังจากที่คุณให้ผู้ใช้ของคุณมีความสามารถในการจัดเก็บการตั้งค่านี้คุณสามารถคว้าค่าของมันได้ body_class filter hook และเพิ่มลงในอาร์เรย์ของคลาส body ที่มีอยู่:

add_filter ('body_class', 'my_theme_body_classes');
ฟังก์ชัน my_theme_body_classes ($ คลาส) {

/ *
* เนื่องจากเราใช้ 'ตัวเลือก' ในอาร์เรย์อาร์กิวเมนต์ add_setting
* เราเรียกคืนค่าโดยใช้ฟังก์ชั่น get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

ส่งคืนคลาส $;

}

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

/ * แถบข้างด้านขวาเป็นเค้าโครงเริ่มต้น * /
#เนื้อหา {
ลอย: ซ้าย;
ความกว้าง: 60%;
}
#sidebar {
ลอย: ขวา;
ความกว้าง: 30%;
}

/ * การใช้คลาส. แถบด้านซ้ายเพื่อแทนที่เค้าโครงเริ่มต้น * /
.แถบด้านซ้าย #content {
ลอย: ขวา;
}
.แถบด้านซ้าย #sidebar {
ลอย: ซ้าย;
}

เหนือสิ่งอื่นใดขอบคุณ WordPress Theme Customizer ผู้ใช้สามารถดูตัวอย่างรูปแบบทั้งสองก่อนบันทึกอะไรก็ได้ รับหน้าการตั้งค่าชุดรูปแบบ!

สรุปและการอ่านเพิ่มเติม

TL; DR เวอร์ชันของโพสต์นี้จะเป็นอะไรเช่นนี้: คุณสามารถรับ $ wp_customize object จากนั้นเพิ่มบางอย่าง (ส่วนการตั้งค่าหรือการควบคุม) ไปที่หรือลบออกจากมัน. ทุกอย่างอื่นลงไปที่พารามิเตอร์การตั้งค่า.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map