جداول قائمة مدير WordPress: قم بتوسيع وظيفة التحرير السريع

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

هيا بنا نبدأ!

تمديد حقل التحرير السريع

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

الخطوة الأولى: أضف الحقل المخصص

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

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

الخطوة الثانية: أضف العمود المخصص

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

في النهاية ، يجب أن ينتهي بك الأمر ببعض التعليمات البرمجية في functions.php السمة النشطة الخاصة بك .php التي تبدو كالتالي:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

الآن يجب أن ترى العمود الجديد في جدول إدارة المشاركات.

أضف مربع التحرير السريع المخصص

دعنا ننتقل إلى جدول قائمة المنشورات ونضغط على رابط "تعديل سريع" أسفل إحدى منشوراتنا.

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

سنضيف هذا باستخدام quick_edit_custom_box الذي يوفره WordPress. يحلل هذا الإجراء جميع الإجراءات الافتراضية في وضع "التحرير السريع" عن طريق التنفيذ مرة واحدة لكل عمود بما في ذلك الأعمدة المخصصة.

وهي منظمة على النحو التالي: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . المعلمات هي اسم العمود $column_name وهو اسم العمود المراد تحريره ، و $post_type وهو سبيكة نوع المنشور $taxonomy لاسم التصنيف إذا لزم الأمر.

أضف الأسطر التالية في ملف functions.php :

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

يرجى أن تضع في اعتبارك أننا نحصل على قيمة الحقل "source" في كود PHP عن طريق تكرار $post->source; .

الآن ، إذا قمت بتحديث الصفحة والنقر فوق "تحرير سريع" مرة أخرى ، يجب أن ترى الآن حقل "المصدر" بقيمة صحيحة.

الخطوة الثالثة: حفظ التحرير المضمن

لحفظ إدخال البيانات في حقلنا المخصص ، سنستخدم إجراء save_post الذي يتم تشغيله عند تحديث المنشور.

في مثالنا حيث نعمل على تعديلات سريعة ، يتم تخزين بيانات المنشور في $_POST بعد تنفيذ save_post .

ان الكود المطلوب لتحقيق ذلك هو كالتالي ويجب ادخاله في ملف functions.php :

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

لم يتم إجراء ذلك ، فلنحاول تغيير قيمة إدخال الحقل إلى شيء آخر مثل "https: //random.url" واضغط على زر التحديث في أسفل اليمين.

لقد لاحظت أن القيمة في حقل المصدر الخاص بنا تم تحديثها كما هو متوقع. ومع ذلك ، إذا قمت بالنقر فوق الزر Quick Edit مرة أخرى وألقت نظرة أخرى على الحقل المخصص الخاص بك (في حالتنا "المصدر") ، فسترى أن القيمة لم تتغير في مربع التعديل.

كلما قمت بتغيير القيمة ، سترى دائمًا التغيير في خلية عمود جدول المسؤول ، ولكن لن ينعكس هذا الإدخال في حقل التحرير السريع.

إذن ، لماذا يحدث هذا؟

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

بدلاً من ذلك ، يتعين علينا جمع قيمنا باستخدام JavaScript. لذلك قبل المتابعة ، سنذهب إلى كود PHP السابق ونزيل القيمة المكررة عن طريق استبدال هذا السطر ...

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

…مع هذا الشخص:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

الخطوة الرابعة: استرجاع قيم الإدخال باستخدام JS

أولاً ، سيتعين علينا تضمين نص JS الخاص بنا عن طريق إضافة هذه الأسطر إلى ملف functions.php الخاص بك:

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

لذلك ، إذا قمت على سبيل المثال بإنشاء ملف extend-quick-edit.js ووضعته ضمن مجلد السمات النشط ، فيجب في الكود أعلاه استبدال "UNIQUE-SCRIPT-NAME" بشيء مثل "extension-quick-edit-script" "و" / PATH-TO-YOUR-JS-FILE "مع get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

في array('jquery','inline-edit-post' ) أضفنا jQuery لأن نصنا يستخدم jQuery ، وحددنا أنه سيتم تعديل وظيفة inline-edit-post الأصلية.

في ملف extend-quick-edit.js المحتوى كما يلي:

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

دعونا نحلل قليلاً ما فعلناه هنا.

في البداية ، نحصل على الكائن inlineEditPost.edit ، والذي يتم تقديمه في /wp-admin/js/inline-edit-post.js ملف WordPress الأساسي إذا كنت ترغب في مزيد من البحث فيه. لدينا الآن نسخة من الكائن في المتغير $inline_editor .

بعد ذلك نقوم بتعديل وظيفة inlineEditPost.edit من خلال تطبيق الوظيفة الموجودة في $inline_editor.apply( this, arguments); وإضافة الوظائف الإضافية التي نريدها مباشرة بعد ذلك.

لذلك ، في الأسطر التالية من كود JS الخاص بنا ، ما سنفعله في النهاية هو استبدال قيمة حقل الإدخال "المصدر" لمنطقة التحرير السريع بقيمة خلية العمود "المصدر".

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

شريطة أن يكون الحقل المخصص مسجلاً بالفعل مع عموده المخصص ، سيبدو سير العمل لدينا كما يلي:

استنتاج

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