วิธีการสร้างหน้าการบริหารที่กำหนดเองในแผงควบคุมของ WordPress

บทความที่เขียนโดย:
  • บทความที่แนะนำ
  • อัปเดต: มิ.ย. 30, 2013

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

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

ขั้นตอนหลายขั้นตอนทั้งหมดเริ่มต้นด้วยการตั้งค่าตัวแปรสองสามแห่งและกำหนดสิ่งที่ควรกำหนดในหน้าการบริหารใหม่นี้

ขั้นตอนที่ 1: การสร้างและแก้ไขหน้าที่ Functions.php เฉพาะรูปแบบ

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

/ public_html / wp-content / ธีม / คุณ-theme-/ โฟลเดอร์

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

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

$ longname = "หัวข้อการพัฒนาแผงควบคุม";
$ shortcode = "apdt";

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

ขั้นตอนที่ 2: การกำหนดค่ากำหนดที่ปรับแต่งได้โดยใช้อาร์เรย์ PHP

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

การตั้งค่า = array (
array ("name" => $ longname "การตั้งค่ารูปลักษณ์"
"type" => "title"),

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

array ("type" => "เปิด"),

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

array (
"ชื่อ" => "กำหนดเองท้ายข้อความท้ายกระดาษ"
"desc" => "นี่คือข้อความที่แสดงอยู่ที่ส่วนท้ายสุดของทุกๆหน้าใน theme นี้"
"id" => $ shortcode "_ custom_footer",
"type" => "ข้อความ"
"std" => "ชุดรูปแบบทดลอง v1.0 พัฒนาโดย John Doe ธีมเพิ่มเติมที่นี่ "),

อาร์เรย์ด้านบนอนุญาตให้ผู้ใช้กำหนดข้อความท้ายกระดาษมาตรฐานของธีม แต่ต้องอธิบายแท็กอาร์เรย์เพื่ออธิบายวิธีการทำงานของกระบวนการและสิ่งที่แต่ละส่วนของอาเรย์กำหนดไว้ได้ดียิ่งขึ้น

Name (English): หมายถึงชื่อของกล่องข้อความจริงและจะไม่ปรากฏแก่ผู้ใช้เมื่อเข้าสู่หน้าตัวเลือกการจัดการสำหรับธีม

Desc: นี่เป็นคำอธิบายสั้น ๆ ที่มาพร้อมกับการตั้งค่าที่กำหนดเองและจะปรากฏต่อผู้ใช้

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

ชนิดภาพเขียน: กำหนดว่าองค์ประกอบแบบฟอร์มเป็นบรรทัดข้อความกล่องข้อความเมนูแบบเลื่อนลงปุ่มวิทยุหรือช่องทำเครื่องหมาย

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

ขั้นตอนที่ 3: บอกให้ WordPress เปิดการเข้าถึงหน้าตัวเลือกใหม่

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

ฟังก์ชัน experimental_theme_save_values ​​() {
globalname $ longname, $ shortcode, $ settings;
if ($ _GET ['page'] == basename (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ การตั้งค่าเป็น $ value) {
update_option ($ value ['id'], $ _REQUEST [$ value ['id']])) }
foreach ($ การตั้งค่าเป็น $ value) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']])) } else {delete_option ($ value ['id']); }}
ส่วนหัว (“ สถานที่ตั้ง: themes.php? page = function.php & บันทึก = จริง”);
ตาย
} อื่นถ้า ('รีเซ็ต' == $ _REQUEST ['action']) {
foreach ($ การตั้งค่าเป็น $ value) {
delete_option ($ value ['id']); }
ส่วนหัว (“ สถานที่ตั้ง: themes.php? page = function.php & reset = true”);
ตาย
}
}
add_menu_page ($ longname.” การตั้งค่าลักษณะที่ปรากฏ”,“”. $ longname.” การตั้งค่าลักษณะที่ปรากฏ”, 'edit_themes', basename (__ FILE__), 'experiment_theme_save_values');

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

ขั้นตอนที่ 4: การเพิ่มข้อความแสดงข้อผิดพลาดและการปิดไฟล์ PHP

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

ฟังก์ชัน experimental_theme_save_values ​​() {
globalname $ longname, $ shortcode, $ settings;
ถ้า ($ _REQUEST ['บันทึก']) echo '
'. $ THEMENAME. การปรับแต่งลักษณะที่ปรากฏได้รับการบันทึกเรียบร้อยแล้ว
';
ถ้า ($ _REQUEST ['รีเซ็ต']) echo '
'. $ THEMENAME. การปรับแต่งลักษณะที่ปรากฏได้รับการรีเซ็ตเรียบร้อยแล้ว
';

ภายใต้โค้ดสองบรรทัดนี้ส่วน PHP ของไฟล์ functions.php สามารถปิดได้โดยใช้แท็กสิ้นสุด? ด้านล่างนี้โค้ด XHTML จะถูกจัดวางให้ตรงกับองค์ประกอบที่ใช้สไตล์ชีตมาตรฐานของ WordPress Dashboard

ขั้นตอนที่ 5: การให้หน้าตัวเลือกบางรูปแบบ

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

<div class = "wrap">
<h2> <? php echo $ longname; ? > การตั้งค่า </ h2>

<form method = "post" action = "options.php">

<? php break; กรณี 'ข้อความ': >

<tr>
<td width =” 20%” rowspan =” 2″ valign =” middle”> <strong> <? php echo $ value ['name']; ? > </ strong> </ td>
<td width =” 80%”> <input style =” width: 100%;” name =” <? php echo $ value ['id']; ? >” id =” <? php echo $ value ['id']; ? >” type =” <? php echo $ value ['type']; ? >” value =” <? php if (get_settings ($ value ['id'])! =“”) {echo get_settings ($ value ['id']); } อื่น {echo $ value ['std']; }? >” /> </ td>
</ tr>

<tr>
<td> <small> <? php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = "2"> </ td>
</ tr>

<? php break;}? >

<input type =” submit” value =” <? php _e ('บันทึกการตั้งค่าธีม')? >” />

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

ขั้นตอนที่ 9: การเปิดใช้งานตัวเลือกแบบกำหนดเองที่จะปรากฏบนธีมจริง

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

<? php echo $ apdt_custom_footer; ? >

ข้อความนี้เรียกใช้อาร์เรย์แบบกำหนดเองสำหรับข้อความส่วนท้ายที่กำหนดไว้ก่อนหน้านี้และตามคำสั่ง“ Echo” พิมพ์ข้อความนั้นในส่วนท้าย แท็กนี้สามารถอยู่ในแท็ก XHTML ใด ๆ ที่ผู้ใช้เห็นว่าเหมาะสม แต่จะไม่ปรากฏขึ้นหากไม่ได้ใส่รหัสลงในส่วนหัวของเว็บไซต์

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

<? php global $ settings;
foreach ($ การตั้งค่าเป็น $ value) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings ($ value ['id']); }
}
? >

นั่นคือทั้งหมดที่มีให้มัน ตอนนี้ทุกตัวเลือกที่กำหนดไว้ในไฟล์ functions.php ที่กำหนดเองสามารถสะท้อนให้เห็นในลักษณะที่ปรากฏของหน้าเพียงแค่รวมตัวแปร PHP ที่กำหนดเองที่กำหนดที่กำหนดเองและเนื้อหาที่ควรจะมีผล

ขั้นตอนที่ 10: ทดสอบการตั้งค่าใหม่และหน้าตัวเลือก

ไม่มีความพยายามในการพัฒนา WordPress อย่างสมบูรณ์จนกว่าจะได้รับการทดสอบอย่างละเอียดเพื่อหาข้อผิดพลาดข้อผิดพลาดและข้อผิดพลาดโดยไม่ตั้งใจในรหัส PHP ที่อยู่ในไฟล์“ functions.php” ที่กล่าวว่าถึงเวลาที่จะได้รับการทดสอบ! เข้าสู่แผงควบคุม WordPress และหากไม่ได้เลือกชุดรูปแบบที่คุณกำลังทำอยู่ให้ตรวจสอบให้แน่ใจว่าได้ไปที่หมวดหมู่ "ลักษณะที่ปรากฏ" ในแถบด้านข้างและเปิดใช้งานชุดรูปแบบที่เกี่ยวข้อง

จากตรงนั้นตรวจสอบสิ่งต่อไปนี้:

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

เกี่ยวกับ Jerry Low

ผู้ก่อตั้ง WebHostingSecretRevealed.net (WHSR) - การตรวจสอบโฮสต์ที่เชื่อถือได้และใช้งานโดยผู้ใช้ของ 100,000 ประสบการณ์มากกว่า 15 ปีในเว็บโฮสติ้งการตลาดพันธมิตรและ SEO ผู้ร่วมให้ข้อมูลแก่ ProBlogger.net, Business.com, SocialMediaToday.com และอีกมากมาย