كيفية إنشاء صفحات إدارة مخصصة في لوحة القيادة وورد

المادة التي كتبها:
  • مقالات مميزة
  • تحديث: يونيو 30 و 2013

عندما كشف WordPress عن ما كان في الماضي ، هو موضوعه الأساسي ، Kubrick ، ​​قبل عدة سنوات ، أخذ أيضًا لفات ميزة جديدة ومثيرة. كانت هذه الميزة هي لوحة إدارة السمات المخصصة ، وتم تمكينها عن طريق تحديد الوظائف والتفضيلات في ملف "jobs.php" الخاص بالموضوع. في السنوات التي تلت ذلك ، تم الاستغناء عن استخدام صفحة خيارات السمات للأسف من قبل العديد من مصممي السمات ، ولكنها في الواقع طريقة رائعة لمنح المستخدمين التحكم في مظهر موقعهم دون إجبارهم على تثبيت سمة جديدة. يمكن تغيير كل الأشياء مثل صورة خلفية السمة وعدد الأعمدة وحتى ألوان الخطوط باستخدام لوحة الإدارة المخصصة هذه.

يتم تغيير لوحة الإدارة نفسها عن طريق ملء ملف وظائف السمة بسلسلة من صفائف PHP التي تحدد القيم المخصصة. ثم يتم تضمين هذه القيم في القالب ويتم تعريفها في لوحة الإدارة التي تتيح للمستخدمين تحديد تفضيلات مظهرهم بشكل مرئي. العملية برمتها بسيطة نسبياً بمجرد أن يتعلم مصمم السمة كيفية عمل PHP وكيف يمكنهم الاستفادة من تلك الشفرة للسماح بعرض تقديمي مخصص داخل ملفات القوالب الخاصة بهم.

تبدأ عملية الخطوات المتعددة من خلال تعيين عدد قليل من المتغيرات على مستوى الموقع وتحديد ما يجب تخصيصه في صفحة الإدارة الجديدة هذه.

Step 1: Creating and Editing the Theme-Specific Functions.php Page

إذا قمت بتطوير المظهر الخاص بك ، فستكون فرصك ضئيلة للغاية في إنشاء ملف jobs.php ليتم إقرانه بملفات القوالب الموجودة. هذه خيارات متقدمة نسبيًا ويتخطاها معظم المصممين تمامًا. في هذه الحالة ، من الضروري أن تفتح عميل FTP المفضل لديك وأن توجهه إلى عنوان URL للخادم التالي حيث توجد ملفات السمة:

/ بوبليك / الفسفور الابيض بين المحتوى / المواضيع / YOUR-THEME-FOLDER /

بمجرد الدخول إلى هذا المجلد ، تحقق مرة أخرى للتأكد من عدم وجود ملف "jobs.php" ، ثم استخدم برنامج تحرير النص لإنشاء ملف جديد باسم "jobs.php". ويمكن بعد ذلك حفظ هذا الملف وتحميله على الخادم عبر FTP. يمكن تحريره مباشرة على الخادم ، مما يلغي الحاجة إلى برنامج تحرير النص.

تتمثل الخطوة الأولى للوصول إلى لوحة خيارات سمة صالحة محددة في ملف "jobs.php" في تحديد متغيرين في أعلى المستند. سيتم استخدام هذه المتغيرات لعرض اسم السمة باستخدام Dashboard ، بالإضافة إلى تحديد عناصر النموذج والاختيار داخل صفحة الإدارة تلك. راقب الكود أدناه ، ضعه في الجزء العلوي من مستند "jobs.php" ، وقم بتخصيصه حسب احتياجات موقعك.

$ longname = "موضوع تطوير لوحة الإدارة" ؛
$ shortcode = "apdt" ؛

هذه المتغيرات تخدم أغراض مختلفة. سيتم استخدام المتغير $ longname لطباعة اسم السمة في لوحة خيارات الإدارة الفعلية. لهذا السبب ، يوصى بأن يقوم المطورون بتعيين الاسم الدقيق للموضوع لهذا المتغير من أجل القضاء على الالتباس بين مستخدمي السمات الخاصة بهم. يجب أن يكون متغير الرمز القصير $ جميع الأحرف الصغيرة دون أي علامات ترقيم ، حيث سيتم استخدام هذا لتحديد عناصر النموذج داخل الكود نفسه. في المثال ، تم استخدام اختصار بسيط بناءً على الاسم الكامل للموضوع ؛ هذا يمكن تخصيصها لذوق المستخدم.

الخطوة 2: تحديد تفضيلات قابلة للتخصيص باستخدام صفائف PHP

أولاً ، من المهم أن تخبر السمة ما هو اسم لوحة الإدارة. سيتم طباعة هذا قبل كل الإعدادات المحتملة ويساعد على تعزيز وضوح الهدف للمستخدمين المبتدئين. يتم ذلك عن طريق إضافة الصفيف التالي إلى علامة إعدادات $ ضمن ملف "jobs.php":

إعدادات $ = صفيف (
صفيف ("اسم" => $ longname. "إعدادات المظهر" ،
"type" => "title") ،

بعد ذلك ، يجب أن نشير إلى أن المصفوفة المليئة بالخيارات "مفتوحة" أو قابلة للتعديل بواسطة إدخال المستخدم. يتم ذلك باستخدام صفيف بسيط آخر يظهر أسفل تعريف عنوان الصفحة مباشرة. تبدو هكذا:

صفيف ("نوع" => "مفتوح") ،

نحن الآن أحرار في البدء في تحديد خيارات مظهر السمة ، حيث يتم إنشاء كل منها كصفيف جديد. في هذا المثال ، سنقوم بتحديد النص الذي يتم وضعه في تذييل النسق. افتراضيًا ، يحتوي السمة المثال على رابط إلى موقع مطور السمة بالإضافة إلى معلومات عن إصدارات teem. هذا غير مرغوب فيه من قبل عدد كبير من مستخدمي WordPress الذين يفضلون وضع معلوماتهم الخاصة في التذييل ، ومع ذلك ، فإن تمكين عنصر التحكم المخصص هذا يوفر لهم التحرير اليدوي لملف "footer.php". إليك كيف يتم ذلك.

مجموعة (
"name" => "Custom Theme Footer Text" ،
"desc" => "هذا هو النص المعروض في نهاية كل صفحة موجودة داخل هذا الموضوع."،
"id" => $ shortcode. "_ custom_footer" ،
"اكتب" => "نص" ،
"std" => "المظهر التجريبي v1.0. طور بواسطة جون دو. مزيد من الموضوعات هنا. ") ،

يتيح الصفيف أعلاه للمستخدم تحديد نص تذييل الصفحة القياسي للموضوع ، ولكن يجب شرح علامات الصفيف لوصف أفضل لكيفية عمل هذه العملية وما يحدده كل جزء من المصفوفة.

اسم: يشير هذا إلى اسم مربع النص الفعلي نفسه ، ولا يتم تقديمه للمستخدمين عندما يقومون بإدخال صفحة خيارات الإدارة للموضوع.

تفاصيل: هذا وصف موجز مصاحب للإعداد المخصص ، ويتم عرضه للمستخدمين.

ID: يستخدم هذا الرمز القصير جنبا إلى جنب مع تحديد مخصص من اسم النموذج من أجل وضع مربع النص.

النوع: يحدد هذا ما إذا كان عنصر النموذج هو سطر نص ، أو مربع نص ، أو قائمة منسدلة ، أو زر اختيار ، أو مربع اختيار.

الأمراض المنقولة جنسيا: هذا يحدد القيمة الافتراضية للعنصر المحدد. بالنسبة لمربع النص ، يحدد هذا النص الافتراضي الذي تم إدخاله فيه. بالنسبة إلى مربعات الاختيار وأزرار الاختيار والمربعات المنسدلة ، يحدد هذا الخيار المحدد افتراضيًا.

الخطوة 3: إخبار WordPress بتمكين الوصول إلى صفحة خيارات جديدة

على الرغم من أنه تم إعطاء صفحة الخيارات غرضًا باستخدام ملف "jobs.php" داخل المجلد الرئيسي للموضوع ، إلا أنه لم يتم التعرف عليه من قبل WordPress أو تضمينه في صفحة الإعدادات الأخرى العديدة ضمن لوحة معلومات WordPress. وذلك لأنه يجب تحديد صفحة خيار السمة في صفحة الوظائف وإخبارها بأين تذهب (إما كعنصر مستقل في الشريط الجانبي أو ضمن مجموعة "الإعدادات"). يتم ذلك باستخدام دالة بسيطة نسبياً تتم إضافتها إلى ملف "jobs.php" أسفل صفائف التخصيصات المحتملة:

function experimental_theme_save_values ​​() {
longname $ عالمي، $ shortcode، $ settings؛
if ($ _GET ['page'] == basename (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ settings as $ value) {
update_option ($ value ['id'] ، $ _REQUEST [$ value ['id']]) ؛ }
foreach ($ settings as $ value) {
if (isset ($ _REQUEST [$ value ['id']]) {update_option ($ value ['id']، $ _REQUEST [$ value ['id']])؛ } آخر {delete_option ($ value ['id']) ؛ }}
header ("الموقع: themes.php؟ page = jobs.php & save = true")؛
يموت.
} آخر إذا ('reset' == $ _REQUEST ['action']) {
foreach ($ settings as $ value) {
delete_option ($ value ['id']) ؛ }
header ("الموقع: themes.php؟ page = jobs.php & reset = true")؛
يموت.
}
}
add_menu_page ($ longname. "إعدادات المظهر" ، "". $ longname. "إعدادات المظهر" ، "edit_themes" ، الاسم الأساسي (__ FILE__) ، "experimental_theme_save_values") ؛

هذه القطعة من الكود تفعل شيئين. أولاً ، يسمح بحفظ إعدادات السمة عبر لوحة خيارات الإدارة. ثانياً ، يضع زرًا مستقلًا في الشريط الجانبي لـ WordPress Dashboard والذي يسمح للمستخدم بالنقر فوقه والانتقال مباشرةً إلى لوحة خيارات السمة. ويطلق عليه "إعدادات المظهر" تماما مثل الصفحة الفعلية نفسها. الاتساق هو مفتاح إزالة الارتباك وتوجيه المستخدمين إلى الصفحة دون إخبارهم بالتحديد بالوصول إلى لوحة الخيارات لتخصيص مظهر السمة.

الخطوة 4: إضافة رسائل خطأ وإغلاق ملف PHP

تتمثل الخطوة الأخيرة لملء جميع عناصر لوحة خيارات المظهر في تحديد رسائل الخطأ التي قد يواجهها المستخدم ثم التأكد من إمكانية تقديم عناصر النموذج في نمط WordPress الافتراضي داخل صفحة الخيارات. تتم إضافة رسائل الخطأ عن طريق لصق هذه الشفرة في ملف وظائف PHP:

function experimental_theme_save_values ​​() {
longname $ عالمي، $ shortcode، $ settings؛
إذا كان ($ _REQUEST ['حفظ']) صدى '
. $ THEMENAME ". تم حفظ تخصيصات المظهر بنجاح.

إذا كان ($ _REQUEST ['reset']) صدى '
. $ THEMENAME ". تم إعادة تعيين تخصيصات المظهر بنجاح.

تحت هذين السطحيين من الكود ، يمكن إغلاق قسم PHP الخاص بملف functions.php باستخدام علامة النهاية <>. أدناه ، سيتم وضع كود XHTML لتهيئة العناصر باستخدام ورقة أنماط وورد بريس.

الخطوة 5: إعطاء صفحة خيارات بعض الأنماط

حاليًا ، يمكن لمستخدمي WordPress Dashboard رؤية صفحة الخطأ الجديدة لكنهم لا يستطيعون فعل الكثير معها. ذلك لأن عناصر النموذج وورقة الأنماط لم يتم وضعها بعد في ملف jobs.php للاستخدام داخل واجهة الإدارة. كل شيء على وشك التغيير ، حيث نقوم بتضمين ورقة أنماط وعناصر النموذج الافتراضية للاستخدام من قبل اللوحة الجديدة:

<div class = ”wrap”>
<h2> <؟ php echo $ longname؛ ؟ > الإعدادات </ h2>

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

<؟ استراحة php ؛ حالة "النص":؟ >

<tr>
<td width = "20٪" rowspan = "2 ″ valign =" middle "> <strong> <؟ php echo $ value ['name']؛ ؟ > </ قوي> </ 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'])؛ } {{صدى $ value ['std'] ؛ }؟ > "/> </ td>
</ tr>

<tr>
<td> <small> <؟ php echo $ value ['desc']؛ ؟ > </ صغير> </ td>
</ tr> <tr> <td colspan = ”2 ″> </ td>
</ tr>

<؟ php break؛}؟ >

<نوع الإدخال = "إرسال" value = "<؟ php _e (" حفظ إعدادات السمة ")؟ > "/>

يتم لصق هذا الرمز أسفل علامة إغلاق ملف وظائف PHP ، ويمكن تخصيصه لكل نوع من النماذج التي قد تتضمنها لوحة خيارات السمة. يمكن تغيير متغير "الحالة" من "نص" إلى أشياء مثل مربع النص وخانة الاختيار والاختيار والعنوان. هذه النماذج تحتاج فقط إلى تضمينها وتعريفها وتصميمها ، إذا كان يتم استخدامها بواسطة السمة. خلاف ذلك ، فإن إدراجها ليس ضروريًا وسيؤدي الخروج من ملف وظائف السمة إلى تعزيز الكفاءة والرمز النظيف.

الخطوة 9: تمكين الخيار المخصص ليتم مشاهدته على المظهر الفعلي

هناك خطوتان للتنفيذ عند التأكد من أنه يمكن رؤية أي تغييرات على القوالب العامة للموضوع. الأول هو وضع متغير في تذييل النسق الذي سيعرض نص حقوق الطبع والنشر والإصدار المعرفة من قبل المستخدم والذي قمنا بتمكينه في الخطوات السابقة من هذا البرنامج التعليمي. يتم ذلك عن طريق وضع الكود التالي في منطقة حقوق التأليف والنشر للتذييل:

<؟ php echo $ apdt_custom_footer؛ ؟ >

يستدعي هذا النص المصفوفة المخصصة لنص التذييل الذي تم تحديده مسبقًا ، وطبقا لكلمة "Echo" ، يقوم بطباعة هذا النص في تذييل الصفحة. يمكن تضمين هذه العلامة في أي علامات XHTML يراها المستخدم مناسبة ، لكنها لن تظهر بدون إضافة رمز في رأس الموقع.

في العنوان ، يجب توجيه الموضوع للبحث عن الخيارات التي يحددها المستخدم والتي تم تعيينها في لوحة تحكم WordPress ، ويجب أن يعرف المتغيرات التي تم تعريفها في ملف "functions.php" المخصص حتى يتمكن من طباعة محتواها على الموقع. يتم ذلك عن طريق وضع متغير PHP التالي في رأس موقع الويب (عادة ما يكون ملف "header.php"):

<؟ php global $ settings؛
foreach ($ settings as $ value) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']؛ } آخر {$$ value ['id'] = get_settings ($ value ['id']) ؛ }
}
؟ >

هذا كل ما في الامر. الآن ، يمكن أن ينعكس كل خيار معرّف في ملف function.php المخصص في مظهر الصفحة ببساطة عن طريق تضمين متغير PHP معرف مخصصًا حيث من المفترض أن تسري التخصيصات والمحتويات المعينة.

الخطوة 10: اختبر الإعدادات الجديدة وصفحة الخيارات

لم تكتمل أي جهود تطوير ووردبريس بالكامل حتى يتم اختبارها بشكل كامل بحثًا عن الأخطاء والأخطاء والأخطاء العرضية في كود PHP الموضوعة في ملف "jobs.php". ومع ذلك ، فقد حان الوقت للحصول على الاختبار! قم بتسجيل الدخول إلى لوحة بيانات WordPress وإذا لم يكن الخيار الذي كنت تعمل عليه محددًا في الوقت الحالي ، فتأكد من الانتقال إلى فئة "المظهر" في الشريط الجانبي وتنشيط السمة ذات الصلة.

من هناك ، تحقق من بعض الأشياء:

  1. تأكد من ظهور رابط إعدادات السمة ككيان خاص به في الشريط الجانبي أسفل عنوان فئة الشريط الجانبي "الإعدادات".
  2. تأكد من إمكانية الوصول إلى خيار تخصيص نص التذييل في لوحة تحكم الخيارات المخصصة ؛ تعديل المحتوى الافتراضي للتذييل وحفظ التفضيل. تأكد من أنه يحفظ دون خطأ.
  3. قم بزيارة موقع الويب العام الفعلي الخاص بك وتأكد من عرض التغييرات التي تم إجراؤها في لوحة المعلومات فيما يتعلق بمحتوى التذييل.
  4. إذا كان كل شيء يعمل بشكل صحيح ، تنفس تنفس الصعداء واستمتع بصفحة لوحة تحكم خيارات موضوع WordPress الأولى.

عن جيري لو

مؤسس WebHostingSecretReveals.net (WHSR) - مراجعة استضافة موثوق بها ويستخدمها مستخدمو 100,000. خبرة تزيد عن 15 في مجال استضافة المواقع والتسويق التابع لها وكبار المسئولين الاقتصاديين. مساهم في ProBlogger.net ، Business.com ، SocialMediaToday.com ، وأكثر من ذلك.