البحث في الموقع

تعرّفنا في الدرس الأول -من سلسلة الدروس هذه المُكوّنة من درسين- على الأنواع الثّلاثة للمحتوى المُخصّص Custom Content التي نستطيع إنشاءها باستخدام ووردبريس وتحدّثنا عن فائدة كلّ واحدٍ منها. هذه الأنواع هي: المنشورات المُخصّصة Custom posts. أنواع التّصنيفات المُخصّصة Custom taxonomies. الحقول المُخصّصة Custom fields. نظرنا بالتفصيل في ذلك الدّرس إلى أنواع المنشورات المُخصّصة custom post types موضّحين كيفيّة إنشائها وعرضها على موقعنا. سننتقل في الدرس الثاني والأخير من هذه السلسلة إلى أنواع التّصنيفات المُخصّصة Custom taxonomies والحقول المُخصّصة Custom fields، لنتعلّم كيفية إنشائها سواءً باستخدام إضافة plugin أو عبر برمجتها بأنفسنا، وكيفيّة عرضها على واجهة موقعنا، فلنبدأ بأنواع التّصنيفات المُخصّصة. إنشاء Taxonomy مُخصّص كما وجدنا مع أنواع المنشورات المُخصّصة بإمكانك أن تستخدم إضافة لإنشاء Custom Taxonomy أو تقوم ببرمجتها بنفسك في قالبك Theme أو حتى بشكلٍ أفضل أن تجعلها على شكل إضافة، إنّ الإضافات التي تستطيع استخدامها لفعل هذا هي نفسها التي استخدمناها لأنواع المنشورات المُخصّصة: تزوّدك CustomPress بواجهة لإنشاء أنواع المنشورات المُخصّصة، التّصنيفات والحقول المُخصّصة وهي سهلة الاستخدام كثيرًا، إن كنت تريد إنشاء العديد من أنواع المحتوى المُخصّص ستوفر عليك هذه الإضافة عناء تثبيت أكثر من إضافة. إنّ إضافة Custom Post Type UI هي أكثر الإضافات المجانيّة انتشارًا لإضافة أنواع المنشورات المُخصّصة على مستودع الإضافات، فهي تسمح لك بإضافة أنواع المنشورات المُخصّصة وأنواع التّصنيفات ولكن لا تسمح بإنشاء الحقول المُخصّصة، واجهتها ليست سهلة الاستخدام تمامًا مثل واجهة CustomPress، مع المزيد من المصطلحات التقنيّة لكي تتمكّن من فهمها، ولكنّها تقوم بعملها. ولكن إن كنتَ واثقًا من نفسك بما فيه الكفاية لكي تُبرمج Custom taxonomies بنفسك ، فها هي طريقة فعل ذلك. 1. برمجة Custom taxonomy لا تختلف برمجة Custom taxonomy كثيرًا عن برمجة أنواع جديدة من المنشورات المُخصّصة، حيث تعطينا ووردبريس الدالّة ()register_taxonomy لعمل هذا والتي نقوم أيضًا بإرفاقها إلى خطّاف init . تستطيع إمّا إضافة الشّيفرة إلى ملف دالّات قالبك Theme’s Functions file أو إنشاء إضافة منفصلة، من الأفضل إنشاء إضافة لأنّك لو قمت بتغيير قالبك مستقبلًا فلن تخسر نوع تصنيفاتك Taxonomy، وهذا ما سنقوم به هنا. ابدأ بإنشاء ملف فارغ يُدعى taxonomies.php واحفظه إلى مجلّد plugins الموجود داخل مجلّد wp-content. افتح الآن ملفك باستخدام مُحرّر شيفرة Code Editor وأضف إليه ما يلي: <?php /*Plugin Name: Create Product Category Taxonomy Description: This plugin registers the 'product category' taxonomy and applies it to the 'product' post type. Version: 1.0 License: GPLv2 */ ?> تُخبر هذه الشّيفرة ووردبريس باسم إضافتك وتزوّده بوصف description والذي ستراه عندما تقوم بتفعيل إضافتك لاحقًا. الآن أضف ما يلي تحت السطر الذي يحتوي على */ وفوق السطر الذي يحتوي على ?> : function wpmudev_register_taxonomy() { } add_action( 'init', 'wpmudev_register_taxonomy' ); سيقوم هذا بإنشاء دالّة فارغة والتي ستحتوي على شيفرة من أجل نوع تصنيفاتك، ومن ثمّ تُضيفه إلى خطّاف init، إنّ إضافته إلى الخطّاف يجعلك متأكّدًا من أنّ ووردبريس يقوم بتشغيل دالّتك في الوقت المناسب، وبدونه لن يحدث شيء. أضف الآن ما يلي داخل الحاضنتين: // set up labels $labels = array( 'name' => 'Product Categories', 'singular_name' => 'Product Category', 'search_items' => 'Search Product Categories', 'all_items' => 'All Product Categories', 'edit_item' => 'Edit Product Category', 'update_item' => 'Update Product Category', 'add_new_item' => 'Add New Product Category', 'new_item_name' => 'New Product Category', 'menu_name' => 'Product Categories' ); // register taxonomy register_taxonomy( 'productcat', 'product', array( 'hierarchical' => true, 'labels' => $labels, 'query_var' => true, 'show_admin_column' => true ) ); فلنقم بالمرور بالتّفصيل على هذه الشيفرة لنفهم ما تعمله بشكلٍ أفضل. نقوم في البداية بإنشاء مجموعة من labels لـِ Taxonomy الخاصة بك والذي سيتمّ استخدامه في شاشات لوحة التّحكم، على الروابط، الأزرار وعناوين الصّفحات. نستخدم بعد ذلك الدّالّة ()register_taxonomy لتسجيل نوع تصنيفاتك عن طريق هذه المُعاملات parameters: اسم نوع التّصنيفات، productcat، تحتاجه لكي يعمل نوع تصنيفاتك. نوع المنشورات الذي ستُطبِّق عليه نوع تصنيفاتك، قمنا هنا بتحديده كمنتج product ولكن بإمكانك استخدام نوع تصنيفاتك مع أكثر من نوع منشورات (بما فيها أنواع المنشورات المُضَمّنة مثل المنشورات posts والصفحات pages والمرفقات attachments) بتضمينها كلّها في مصفوفة array. Hierarchical: قم بتعيينه إلى true لكي يسلك نوع تصنيفاتك سلوك تصنيفات categories ويكون بشكلٍ شجري hierarchical، إن لم ترغب أن يكون بشكل شجريًا مثل الوسوم tags فقم بتعيينه إلى false. Labels: تُخبر هنا ووردبريس أن يستخدم الـ Labels المُعرّفة مُسبقًا. query_var: يعطيك تعيينه إلى true مرونة أكثر إن كنت ترغب بكتابة استعلام مُخصّص custom query لإيجاد المنتجات التي توافق شرط taxonomy term معيّن. show_admin_column: يعني تعيينه إلى true أنّك تعرض قائمة من منتجاتك في لوحة تحكم ووردبريس، سيملك نوع التّصنيفات عمودًا من أجلك لكي تعرف أيّة شروط taxonomy تنطبق على أيّة منتجات، سنرى كيف يبدو هذا قريبًا. الآن احفظ ملفك ، ستبدو كامل الإضافة كما يلي: <?php /*Plugin Name: Create Product Category Taxonomy Description: This plugin registers the 'product category' taxonomy and applies it to the 'product' post type. Version: 1.0 License: GPLv2 */ // register two taxonomies to go with the post type function wpmudev_register_taxonomy() { // set up labels $labels = array( 'name' => 'Product Categories', 'singular_name' => 'Product Category', 'search_items' => 'Search Product Categories', 'all_items' => 'All Product Categories', 'edit_item' => 'Edit Product Category', 'update_item' => 'Update Product Category', 'add_new_item' => 'Add New Product Category', 'new_item_name' => 'New Product Category', 'menu_name' => 'Product Categories' ); // register taxonomy register_taxonomy( 'productcat', 'product', array( 'hierarchical' => true, 'labels' => $labels, 'query_var' => true, 'show_admin_column' => true ) ); } add_action( 'init', 'wpmudev_register_taxonomy' ); ?> الآن وقد اكتملت إضافتك تحتاج لتفعيلها، في لوحة تحكّم ووردبريس اذهب إلى: Plugins -> Installed Plugins لترى إضافتك معروضة: اضغط على رابط التّفعيل Activate لكي تقوم بتفعيل إضافتك، سترى الآن أنّه عندما تضغط على المنتجات Products في قائمة لوحة التّحكّم سيتمّ عرض النّوع الجّديد للتّصنيف: كلّ ما تحتاج إليه الآن أن تضيف بعضًا من تصنيفات المنتجات بنفس الطريقة التي تضيف بها التّصنيفات العاديّة، سيكون بعدها بإمكانك اختيار تصنيف أو أكثر منها في كلّ مرّة تُضيف بها منتجًا. ملاحظة: إنّ نوع تصنيفاتك الجّديد هو ليس تصنيفًا category، بل هو taxonomy كما التّصنيف هو تصنيف، لكي تستخدمه يجب عليك إضافة شروط terms، شروط نوع تصنيفاتك (على سبيل المثال تصنيفات المنتجات التي تضيفها) مشابهة للتصنيفات ذاتها والتي هي عبارة عن شروط في تصنيف taxonomy. عرض أرشيف شروط taxonomy على موقعك بعد أن أضفت بعض الشروط إلى نوع تصنيفاتك ستحتاج لعرض قائمة من المنتجات لكلّ شرط على موقعك. 1. تحديث الروابط الدائمة Permalinks لن يعرض ووردبريس أرشيف لشروط نوع تصنيفاتك حتى تقوم بتحديث إعدادات الروابط الدائمة. من لوحة تحكّم ووردبريس اذهب إلى: Settings > Permalinks. تأكد من أنّه تم اختيار post name. اضغط على زر حفظ التغييرات Save Changes. سيكون ووردبريس الآن قادرًا على توليد الروابط الصحيحة لشروط نوع تصنيفاتك. ملاحظة: تحتاج فقط لعمل هذا مرّة واحدة بعد إنشاء taxonomy وليس كل مرّة تضيف فيها شرطًا جديدًا. 2. إضافة أرشيف شرط taxonomy إلى قائمة التصفح Navigation Menu إنّ إضافة صفحات أرشيف نوع تصنيفاتك إلى قائمة التصفح أسهل من إضافة أرشيف نوع المنشورات (كما فعلنا في الدرس السابق من هذه السلسلة) ، اتبع هذه الخطوات: من لوحة تحكم ووردبريس اذهب إلى: Appearance > Menus. سترى على يسار الشاشة قائمة أنواع المحتوى التي تستطيع إضافتها إلى قائمتك، ومنها تصنيفات المنتجات Product Categories (إن لم تكن ظاهرة اضغط على نافذة خيارات الشّاشة Screen Options الموجودة بأعلى وأيمن الشاشة ثم ضع صح في خانة التأشير Checkbox عند Product Categories). اضغط على Product Categories لكي تكشف كل الشروط التي أضفتها. أضف كلّ واحد منها إلى القائمة واسحبها إلى المكان الذي تريده. اضغط على حفظ القائمة Save Menu لحفظ التّغييرات، لا تفوّت هذه الخطوة. في هذه الصّورة أضفنا تصنيف منتج وأدخلناه تحت رابط المنتجات Products التي قمنا بإنشائها في الدرس الأول من هذه السّلسلة: عندما تذهب الآن إلى واجهة موقعك وتضغط على روابط أرشيف شروط نوع تصنيفاتك سترى قائمة من المنتجات التي توافق ذلك الشرط : 3. استخدام ملفات قالب Template لأرشيف الشروط إن أردت عرض أرشيف لشروط نوع تصنيفاتك بشكلٍ مختلف عن الطّريقة التي يعرض بها موقعك الأرشيف تستطيع إنشاء ملف template خاص في قالبك Theme أو حتى مجموعة ملفات قالب template لكل واحد من الشروط. عندما يعرض ووردبريس صفحة الأرشيف لشرط نوع التّصنيفات، سيبحث خلال ملفات قالبك باستخدام القالب الشجري template hierarchy ويستخدم أول ملف يصادفه: ملف لعرض الأرشيف بالنسبة لشرط نوع تصنيفات مُحدّد: بالنسبة للشرط الذي يُوافق المنتجات المتميّزة featured يُدعى هذا الملف taxonomy-productcat-featured-products.php، لاحظ أنّنا نستخدم اسم نوع التّصنيف متبوعًا بلاحقة slug لشرط نوع التّصنيف لإنشاء اسم الملف. ملف لعرض أرشيف لشرط نوع التّصنيف لكل الشّروط في taxonomy، يُدعى taxonomy-productcat.php. ملف لعرض أرشيف لكل أنواع التّصنيفات المُخصّصة، يُدعى taxonomy.php. ملف لعرض كل أنواع الأرشيف يُدعى archive.php. ملف عام لكل المحتوى يُدعى index.php. يعمل ووردبريس من خلال هذه القائمة ويستخدم أول ملف يجده، يعمل موقعنا على قالب the twenty fifteen theme والذي يملك ملف يُدعى archive.php لذا يستخدم هذا الملف. إن أردت عرض أرشيف نوع تصنيفاتك بشكلٍ مُختلف عن الأرشيف العادي (على سبيل المثال إزالة المقتطفات excerpts وإضافة صور مميّزة featured images) تستطيع إنشاء نسخة من الملف archive.php في قالبك وتقوم بتسميته taxonomy.php ومن ثمّ تحريره لعرض أرشيفك بالطريقة التي ترغب بها، ولكن حتى لو لم تقم بذلك فالأمر الجيّد هنا أنّ ووردبريس سيجد دومًا ملف قالب template file مناسب لعرض أرشيف لشرطك. فلننتقل الآن إلى النوع الأخير من المحتوى المُخصّص وهو الحقول المُخصّصة. إنشاء حقول مُخصّصة تستطيع إنشاء حقول مُخصّصة بإحدى طريقتين، استخدام الواجهة الافتراضية التي يُزوّدنا بها ووردبريس أو باستخدام إضافة plugin، قد يكون استخدام إضافة أسهل استخدامًا ويُقّدم لك بعضًا من الخيارات القويّة الأخرى لتحرير وعرض حقولك المُخصّصة ولكنّ هذا ليس ضروريًا دومًا. نجد من بين أفضل الإضافات لإنشاء حقول مُخصّصة: CustomPress: بالإضافة إلى أنّها تُمكّنك من إنشاء أنواع منشورات مُخصّصة و taxonomies تستطيع استخدام هذه الإضافة أيضًا لإنشاء حقول مُخصّصة. Advanced Custom Fields: هذه هي الإضافة الأكثر استخدامًا لإنشاء حقول مُخصّصة، الإصدار الأساسي مجاني على مستودع إضافات ووردبريس، تُقدّم لك بعض الميّزات القويّة لتحرير وإنشاء حقول مُخصّصة. إن لم تكن ترغب باستخدام إضافة، تستطيع إنشاء حقول مُخصّصة باستخدام لوحة تحكّم ووردبريس، وهذه هي الطريقة: 1. إنشاء حقول مُخصّصة باستخدام شاشات لوحة التّحكّم الافتراضية إن توجّهت إلى شاشة تعديل المنشورات لواحد من منشوراتك (أو كنت تقوم بإنشاء منشور جديد) فقد ترى مربّع بيانات وصفيّة metabox للحقول المُخصّصة تحت جزء التحرير الرئيسي، تستطيع عرضها إن لم تكن ظاهرة بفتح نافذة إعدادات الشّاشة Screen Options الموجودة بأعلى ويمين الشاشة، اضغط على مربّع Custom Fields، أغلق النافذة وسترى مربّع البيانات الوصفيّة metabox قد ظهر أسفل محتواك: لإضافة حقل مُخصّص تستطيع إمّا اختيار مفتاح موجود مُسبقًا من قائمة منسدلة على الجهة اليسرى أو أضف واحدًا جديدًا بالضّغط على رابط Enter New وكتابته فيها، بعد ذلك تكتب القيمة لحقلك المُخصّص. قمنا هنا بإنشاء حقل مُخصّص لمنتج أضفناه، والذي مفتاحه هو السّعر Price وقيمته 15.00: بعد أن قمت بإضافة المفتاح والقيمة يجب أن تضغط على زر إضافة حقل مُخصّص Add Custom Field لحفظ حقلك المُخصّص، فلن يقوم ووردبريس بحفظه عندما تضغط زر نشر Publish لمنشورك. تستطيع إضافة العدد الذي تحتاجه من الحقول المُخصّصة لمنشوراتك لتخزين بياناتك، لا تنسَ أن تحفظ منشورك بعد أن قمت بحفظ حقولك المُخصّصة. إذاً هذه هي طريقة إضافة حقل مُخصّص باستخدام واجهة لوحة التّحكّم الافتراضية، دعنا الآن نلقي نظرة على كيفيّة عرض حقولك المُخصّصة على واجهة موقعك. عرض الحقول المُخصّصة على موقعك لن يعرض ووردبريس بشكل افتراضي القيم التي أدخلتها في حقولك المُخصّصة ما لم يكن قالبك مُعدًّا لفعل هذا، ربّما تجد أنّ قالبك يأتي مزودًا بدعم للحقول المُخصّصة ويقوم بعرض كل حقولك المُخصّصة على صفحة واحدة لكل منشور، ولكن غالبًا لن يقوم بذلك. لذا ستحتاج لإضافة وسم قالب template tag لفعل هذا. إنّ وسم القالب هو عبارة عن نوع دالّة والتي تُدخلها إلى ملف قالب theme file لتُخبر ووردبريس أن يعرض بعض البيانات. يعطينا ووردبريس خيارًا من وسوم القالب لعرض حقولنا المُخصّصة: ()the_meta يعرض كل أنواع الحقول المُخصّصة لمنشور ما، نستخدمه داخل حلقة loop وسيعرض كل مفاتيح وقيم الحقول المُخصّصة بدون أن يُعطينا قدرة على التّحكّم بذلك. ()get_post_meta يعطينا تحكّمًا أكثر، يملك مُعاملات parameters نستطيع استخدامها لتحديد أيّ الحقول المُخصّصة نريد أن نحصل عليها وإذا ما كنّا نرغب فقط باسترجاع قيمة واحدة إن كان منشورنا يملك عدّة حقول مُخصّصة بنفس المفتاح، لا يقوم فعليًا بعرض حقولنا المُخصّصة بل يقوم فقط بجلبها، ولكي نعرضها يجب أن نستخدم ()echo get_post_meta. ()get_post_custom_values يسمح لنا بجلب كل القيم للحقول المُخصّصة والتي تملك نفس المفتاح الذي نقوم بتحديده، وهي تحتاج أيضًا لاستخدام الأمر echo قبل أن تعرض أي شيء. تقوم بشكل طبيعي بإضافة واحدة منها إلى ملف القالب template file داخل قالبك والذي يقوم بعرض منشورات مفردة أو أرشيف داخل حلقة loop، وإن أردت بشكلٍ بديل أن تعرض حقول مُخصّصة لعدد من المنشورات في مكان آخر من الموقع تستطيع استخدام ()get_post_meta خارج الحلقة. لن نقلق الآن حيال هذا، بل سننظر بدلًا من ذلك إلى كيفيّة فعل هذا داخل الحلقة. إن لم تُصادف الحلقة loop من قبل، فهي كتلة من الشيفرة block of code في داخل template files لقالبك والتي تقوم بجلب العنوان والمحتوى لكل منشور من قاعدة البيانات وتقوم بعرضه. الخطوة الأولى هي أن تفتح ملف single.php في مُحرّر شيفرة code editor وتجد الحلقة، تبدأ الحلقة بسطر من الشيفرة مشابه لهذا: while ( have_posts() ) : the_post(); ستجد تحت هذا السطر وسوم القالب كـ ()the_title و ()the_content، تحتاج لإضافة حقولك المُخصّصة بينها، سنقوم بإضافة حقولنا المُخصّصة فورًا بعد العنوان. ملاحظة: إن كنت تعمل على قالب twenty fifteen ستجد أنّه لا يملك الحلقة في ملف single.php، بدلًا من ذلك يقوم بتضمين ملف يُدعى content.php، لتحرير وعرض نوع منشورات المنتج قم بإنشاء نسخة من ملف content.php وقم بتسميتها content-product.php وحرّرها. لعرض كلّ الحقول المُخصّصة للمنشور أدخل الشيفرة التالية: the_meta(); احفظ ملف قالبك. عندما نزور الآن واجهة موقعنا نستطيع رؤية الحقل المُخصّص الذي أضفناه لمنتجنا: يتم عرضه بشكل افتراضي بطريقة قائمة نقطية bulleted list، تستطيع تنسيق هذه القائمة كما تريد باستخدام CSS. ولكن ماذا لو أردنا أن نتحكّم أكثر بالطّريقة التي يتمّ بها عرض الحقل المُخصّص؟ نستطيع استخدام ()get_post_meta. افتح ملف single.php مرة أخرى وقم بإيجاد الشيفرة التي أضفتها ، قم باستبدالها بما يلي: $price = get_post_meta( get_the_ID(), 'Price', true ); if( ! empty( $price ) ) { echo '<p>Price: $' . $price . '</p>'; } دعنا نلقي نظرة على ما تفعله هذه الشّيفرة: في البداية تحصل على الحقل المُخصّص لهذا المنشور الذي يملك المفتاح Price وتقوم بتخزينه في متغير variable يُدعى price$. تتحقق أنّ الحقل المُخصّص ليس فارغًا. إن لم يكن كذلك تقوم بعرض السّعر price داخل وسم فقرة paragraph tag مع بعض النّص قبله. الآن احفظ الملف وألقِ نظرة على صفحتك ، تبدو الصّفحة لدينا هكذا: كما ترى فقد أعطانا هذا تحكّمًا أكثر، فلن نتمكّن فقط من تحديد أيّ حقل مُخصّص نريد عرضها فيه، بل نستطيع إضافة نص قبلها ووضعها داخل عنصر فقرة إن أردنا ولو كنّا نملك حقول مُخصّصة أكثر لعرضها نستطيع إعادة الشيفرة بأي ترتيب نريده. ملاحظة: لأننا استخدمنا قالب Twenty Fifteen في هذا المثال فلم نقم بتحرير الملف مباشرة داخل القالب بل قمنا بدلًا من ذلك بإنشاء قالب ابن Child Theme وقمنا بعمل ملفات جديدة، يعني هذا أنّه عندما نقوم بتحديث قالب Twenty Fifteen فلن نخسر الملفات الجديدة التي أضفناها، إن كنت ستقوم بنفس الشيء ننصحك باتباع هذا الدّليل الرائع لإنشاء قوالب أبناء child themes. الخلاصة إن تتبّعت كلا الدّرسين من هذه السّلسة ستعرف كم من الممكن أن يكون المحتوى المُخصّص مفيدًا وقويًا في ووردبريس، يملك كلّ واحد من أنواع المنشورات المُخصّصة، أنواع التّصنيفات والحقول المُخصّصة استخداماته وطرقه الخاصّة للحصول على أقصى ما تريد من نوع المحتوى. تعلّمنا في هذا الدرس كيفيّة تسجيل custom taxonomy وعرض صفحات أرشيفه على موقعنا، وكيفية إنشاء حقول مُخصّصة وعرضها على الموقع أيضًا. هل تستخدم custom taxonomies والحقول المُخصّصة في موقع ووردبريس الخاص بك؟ لأيّة أشياء تجدها مفيدة أكثر؟ قم بكتابك كلامك في التعليقات. ترجمة -وبتصرّف لـلمقال Creating Custom Content in WordPress: Taxonomies and Fields لصاحبه Rachel McCollin.

ووردبريس هو منصة رائعة لإدارة المحتوى. إذا كنت تملك أيّ محتوى يأتي في شكل وحدات شبيهة بالمقالات (أو ما شابهها مثل منتجات) فلا أجد سببا يدفعك لعدم استخدام ووردبريس. قد يكون التعاون باستخدام سكربت ميديا ويكي سهل أيضا، واستخدام دروبال مع أنظمة الشركات يعد أمرا سهلا وشائعا، لكن ووردبريس له مكانته أيضا في هذا المجال، وهو في رأيي، يوفر تجربة تحرير أفضل. أحد الطرق لجعل المحتوى في ووردبريس يعمل بشكل أفضل هو إضافة معلومات إضافية له (metadata). قد يكون الأمر على شكل تصنيفات خاصة (taxonomies) أو على شكل بيانات تستخدم لهدف واحد (custom fields). ماهو الحقل المخصص في ووردبريس؟إذا أردت أن تستخدم معلومات محددة متغيرة لكل مقال ما (أو شيء شبيه بمقال كمنتج)، هنا تستطيع استخدام الحقول المخصصة في ووردبريس. "الحقول المخصصة" لها تسميتان مختلفتان في ووردبريس، غالبا ما يطلق عليها خصائص المنشور أو المعلومات الجانبية (post metadata) أو post_meta وعادة ما يطلق عليها باسم الحقول المخصصة، وهذه الترجمة الرسمية التي يستخدمها فريق ترجمة ووردبريس العربي. نحن نضيف الحقول المخصصة عندما نريد أن نخزن خصائص إضافية لمنشور ما. منشورات ووردبريس تأتي بالعديد من الخصائص الإضافية بشكل مسبق: تاريخ النشر، كاتب الموضوع، آخر وقت تّم التعديل عليهم. لكنك قد تريد المزيد، مثلا تريد أن تضيف عنوانا ثانويا للمنشور، أو تريد أن تضيف ملخص المنشور تصميم منفرد. ووردبريس يقوم بتخزين هذه المعلومات في قاعدة البيانات، وباستخدام دوال معينة نقوم بتحديدها وتخزينها واسترجاعها. الحقول المخصصة تنفرد عن خيارات الموقع site_settings حيث أنّ لهم علاقة بالمنشور وليس بالموقع ولكن كلاهما يعملان بنظام عنوان وقيمة key/value pair يتم استخارجهم من قاعدة البيانات عبر دوال محددة، لذا إن كانت لك تجربة بنظام خيارات الموقع Settings API فلن تواجه مشكلة في فهم الحقول المخصصة. كيف أضيف الحقول المخصصة لمنشور؟هناك العديد من الطرق التي تستطيع استخدامها لإضافة الحقول المخصصة، الواجهة الافتراضية للتعامل مع الحقول الخاصة في ووردبريس قديمة ولم يتم تحديثها منذ مدة، ورغم أنها تخدم الهدف إلا أنها بعيدة عن المثالية. الجزء المضاف في الأسفل "ما بعد الأساسيات" سيدخل في التفاصيل حول خيارات أخرى تستطيع اللجوء لها من أجل التحكم في الحقول الخاصة، لكن سنقوم الآن بفهم الواجهة الأصلية فحسب، لأنها ستكون موجودة دوما في كل المواقع. في شاشة التعديل على منشور ستجد صندوق "خصائص إضافية"، وستقوم أنت بتعديل الحقول المخصصة فيه. لا داعي لنمر على كامل معلومات تكوين الصندوق، ستقوم ببساطة باختيار الاسم (أو تضيف واحدا جديدا في حال لم تقم بالأمر من قبل). من ثم تقوم بإضافة القيمة، إضغط على الزر ولقد قمت بإضافة الحقل إلى منشورك، محفوظا مع بقية عناصرك. إظهار الحقول المخصصة في منشوراتكلتستخدم الحقول الخاصة في منشوراتك أمامك عدة دوال، وتسمياتهم تختلف حسب طريقة تكلم الناس عنهم، الدوال الأساسية هي كالتالي: ()the_meta: مثل كل دوال ووردبريس التي تبدأ بـ _the فدالة ()the_meta الهدف منها طبع المعلومات (echo) حتى لا تقوم بالأمر يدويا. تستطيع استخدامها عندما لا تريد أن تغير أيّ شيء بالمعلومات التي تريد طباعتها. لكنها تبدو لي غبر مفيدة لأنها لا تتيح لك أيّ تحكم بهيكلة المعلومات التي تحصل عليها، كما أنها تقوم بطبع كل المعلومات للصفحة.()get_post_meta: هي الدالة التي أستخدمها أنا طوال الوقت، المتغير الأول (parameter) الذي تحتاجه هو معرف (ID) المنشور، المتغير الثاني هو اسم الحقل الذي تريد جلبه، والثالث هو Boolean في حال كنت تريد القيمة على شكل string أو array مصفوفة (true من أجل string وfalse ل array).()get_post_custom: عمل بشكل شبيه جدا لـ ()get_post_meta لكنها تختلف في التسمية، الفرق أنك تقوم بتمرير ID المنشور له فحسب (بشكل اختياري أيضا) وسيقوم بإرجال كل القيم المخصصة للمنشور على شكل array.ما بعد الأساسيات: كيفية تحسين واجهة الحقول المخصصةأحد نقاط ضعف ووردبريس من ناحية الحقول المخصصة هو الصندوق الذي تستخدمه للتعديل عليها، فكما أسلفنا الذكر، الصندوق ليس مفيدا لتلك الدرجة، لذا أنت تملك الفرصة لتحسين التجربة لمستخدميك وزبائنك. الدوال التي تحتاجها للتعامل مع الحقول الخاصةحتى الآن، فقد تعلمنا كيف نسترجع الحقول الخاصة فحسب، مهمة أخرى ستقوم بها عند التطوير هي تعديل أو حذف المعلومات. من أجل هذه المهمة يقدم ووردبريس 3 دوال بسيطة للقيام بالأمر وهي: ()add_post_meta : هي الطريقة التي تستخدمها لإنشاء الحقل لأول مرة، تقوم بتمرير ID المنشور لها واسم الحقل المخصص (meta_key) والقيمة التي تريدها، وبشكل اختياري تستطيع تحديد أن يجعل ووردبريس تلك القيمة فريدة من نوعها. addpostmeta($postid, $metakey, $meta_value, $unique = false) ()update_post_meta : يمكن أيضا استخدام هذه الدالة لإنشاء حقل مخصص جديد، لذا هي تملك القدرة لتحل مكان ()add_post_meta في حال لم تكن واثقا أن الحقل جديد أو لا فتستطيع استعمالها، أول ثلاث خيارات هم نفس خيارات ()add_post_meta والخيار الأخير هو القيمة السابقة، وهو أمر لم استخدمه من قبل حقا ولكن قد يكون مفيدا في حال كنت تملك الكثير من القيم لاسم واحد (key). updatepostmeta($postid, $metakey, $metavalue, $prevvalue='') ()delete_post_meta : هي كما تتوقع تماما، وخياراتها مثل البقية تماما، عدى أن الخيار الأخير (قيمة الحقل) هي قيمة اختيارية تستطيع أن لا تحددها. deletepostmeta( $postid, $metakey, $meta_value = '' ) شرح كيفية استخدام هذه الدوال داخل لوحة التحكم هو خارج نطاق المقال، لكنك تستطيع استعمالها عبر إنشاء صندوق جديد، واستخدام الدوال اللازمة وحفظ المعلومات أثناء حفظ المنشور. استخدام إضافات مصممة لتحسين تجربة الحقول الخاصةهناك العديد من الإضافات الرائعة التي تقوم بتحسين واجهة الحقول الخاصة، أشهرها في نظري هي Pods و Advanced Custom Fields. تقوم هذه الإضافات باستخدام custom post type لإنشاء حقول جديد تعمل بمثابة حقل مخصص. أداة أبسط وأقوىالطريقة التي استخدمها عادة والتي تختلف عن البقية هي إضافة CMB2 فهي تتيح لك تحكم عبر الشفرة البرمجية (عكس الإضافات الأخرى التي تتطلب منك إنشاء الحقول عبر واجهة). استخدام هذه الطريقة للبناء بدل الطريقة التقليدية الذي يوفرها ووردبريس هو أمر مختلف تماما وتجربة رائعة. لن تحتاج لكتابة دوال كبيرة لبناء صناديق لحقول مخصصة ثم محاولة حفظها فهي تقوم بكل شيء بشكل أوتوماتيكي. كل ما عليك القيام به هو وضع الملفات في قالبك أو إضافتك أو تنصيب الإضافة والعمل مع دوالها من قالبك، لشرح أكبر لها اقرأ التوثيق المرفق لها. يجدر الذكر أنّ الإضافة مترجمة للعربية بنسبة 93% (بتاريخ هذا اليوم) ويعتبر هذا دعما ممتازا للعربية لذا الشكر لكل من ساهم في ترجمتها (تستطيع الانضمام لهم عبر موقع Transifex). قوة الحقول المخصصة في ووردبريسكما أسلفنا الذكر، الحقول المخصصة تعتبر جزءا مهما في تطوير استخدامك لووردبريس. استخدام الأمور المبنية في ووردبريس لنشر المحتوى أمر جيد، ولكن الحقول المخصصة هي ما تسمح لإضافات مثل WooCommerce و Easy Digital Downloads بإضافات مميزات قوية لووردبريس. ترجمة -وبتصرف- للمقال: Everything You Should Know about WordPress Custom Fields لصاحبه: DAVID HAYES.

يبدو أن الأسئلة المتعلقة بالمحاذاة تظهر بانتظام. ولكن لسوء الحظ، فحتى مع وجود أبحاث معتبرة تقدم رؤية واضحة فيما يتعلق بالمشكلة، فإن معظم نتائج النقاشات التي تدور حولها تكون مبنية على تفضيلات وتكهنات شخصية. في هذا المقال، سنقدم لكم ملخص الأبحاث لإعطائكم توصيات محددة وسهلة الاستعمال لهذا الجانب المهم من تصميم النماذج. مختلف أنواع المحاذاة (alignment)بالنسبة للمحاذاة، هناك العديد من الأبعاد المختلفة التي تؤخذ بعين الإعتبار، منها: كيفية محاذاة الأسئلة بالنسبة لبعضها البعض.كيفية محاذاة نص السؤال (أعلى أم يسار حقل الإجابة؟).في الأسئلة المغلقة مع فئات استجابة متعددة، كيف يتم محاذاة هذه الفئات.كم عدد الحواف (edges) الموجودة في النموذج لمختلف أنواع المحاذاة.قبل أن نتكلم عن هذه الأبعاد كل على حدة (مع استخدام بعض الرسومات لجعل الصورة أوضح)، ضع في الحسبان أن التوصيات المقدمة في هذا المقال: ستكون خاصة بالنماذج التي لها سياق اللغة الإنجليزية أو ما يشابهها من ناحية نمط القراءة (أي اللغات التي تقرأ من اليسار إلى اليمين). وبالتالي، فإنك قد تحتاج إلى تعديل هذه التوصيات لتتناسب مع الثقافات التي تقرأ من اليمين إلى اليسار (كاللغة العربية). تقدم نهجا افتراضيا لتصميم النماذج. وبما أنه يوجد دائما بعض الاستثناءات لأي قاعدة، فإنه من المهم جدا أن تضبط الأمور لتتناسب مع السياق الخاص بك.1. كيف تقوم بمحاذاة الأسئلة بالنسبة لبعضها البعضعلى افتراض أن البشر يقرؤون من الأعلى إلى الأسفل، فإنه يفضل وضع الأسئلة فوق بعضها (بشكل عمودي) بدلا من وضعها بجانب بعضها البعض (بشكل أفقي). يخلق هذا إيقاعا عموديا متناسقا ويساهم في إيجاد "مسار واضح للإستكمال" كما أسماه Luke Wroblewski. الشكل 1: محاذاة الأسئلة عموديا كما يوضحه السهم الأزرق. قد يكون من المغري رص سؤالين إلى بعضهما لتقليل المساحة العمودية اللازمة. قد يؤدي ذلك إلى حصول بعض الأجزاء في النموذج على سطر كامل لسؤال واحد فقط وترك بقية الأجزاء تحتوي على عدة أسئلة في سطر واحد. وقد يؤدي عدم التناسق هذا إلى: إعاقة من يريد تعبئة النموذج عن معرفة الطريقة التي سيتحرك بها خلال عملية التعبئة، وبالتالي إبطاء عمله.زيادة احتمالية عدم قدرة الشخص على رؤية وإجابة واحد أو أكثر من الأسئلة (وهو ما لا نريده بكل تأكيد).يبين الشكل 2 نموذجا يحتوي على أسئلة مرتبة/متراصة بشكل أفقي حيثما كان ذلك ممكنا. من المحتمل في مثل هذه الحالة أن يتم إهمال الحقول الموجودة في الجزء الأيمن من الصفحة خصوصا إذا لم يقم المستخدم بملئ الحقل السابق إلى نهايته (لأقصى يمين الحقل). الشكل 2: محاذاة الأسئلة أفقيا. يمكن استغلال المساحة في النموذج بشكل أفضل وذلك بفصله إلى عمودين (كما في الشكل 3). فإذا ما فصلت الصفحة إلى عمودين، فسوف تتم محاذاة الأسئلة في كلا العمودين، وهذا يعني أن الأسئلة ستبدأ من الأعلى إلى الأسفل للعمود الأول، ومن الأعلى إلى الأسفل للعمود الثاني وبعدها إلى الصفحة التالية. ولعدد من الأسباب سنذكرها في مقال آخر، فإنه من غير المحبذ استخدام أعمدة متعددة في نموذج إلكتروني (electronic form) خصوصا في النماذج الموجودة على شبكة الإنترنت. الشكل 3: صفحة تحتوي على نموذج مزدوج الأعمدة. 2. كيفية محاذاة نص السؤالافتراضيا، إن أفضل موقع لنص السؤال يكون في أعلى حقل السؤال، كما هو موضح في الشكل 4. الشكل 4: نص السؤال يظهر أعلى حقل السؤال. يوصي مصمم النماذج الاسترالي الشهير Robert Barnett بهذه الطريقة، وقد أثبتت فعالتيها -من حيث عدد مرات إنهاء النموذج- مقارنة بوضع النص إلى يسار حقل الإجابة (أنظر "موضعة التسمية (label) في النماذج" لكاتبه Matteo Penzo). هناك فائدتان أخريان من وضع نص السؤال فوق الحقل: الفائدة الأولى، هي أنها تسهل عملية ترجمة نص السؤال إلى لغات أخرى، لأنه بهذه الحالة لن يهمنا طول أو قصر النص المترجم.الفائدة الثانية، أنها تمكن من يعانون عسر القراءة أو ممن لديهم إعاقة إدراكية أو حتى مستخدمي قارئات الشاشة (screen readers) من تفادي المشاكل التي قد يواجهونها مع النص الموضوع إلى يسار الحقل (سوف نتكلم عن هذا بعد قليل).إن من أحد المساوئ الرئيسية لوضع نص السؤال أعلى حقل الإجابة هو الزيادة الملحوظة في حجم المساحة العمودية التي يحتاجها النموذج. هذا يعني زيادة عدد الصحفات في النماذج الورقية وتمرير(scrolling) أكثر في النماذج الإلكترونية. لذلك، وعلى فرض أنه تم استخدام المحاذاة المناسبة، فقد يكون من الأفضل في بعض الحالات وضع نص السؤال إلى يسار الحقل. محاذاة النصهناك أربع خيارات لمحاذاة النص وهي دفع لليسار (flush left)، دفع لليمين (flush right)، ضبط من الطرفين (justify) وتوسيط (أنظر الشكل 5). قد تجد أيضا من يستخدم كلمتي "ranged" و "ragged" بدلا من كلمة "flush". الشكل 5: أربع طرق رئيسية لمحاذاة النص. إذا وضع نص السؤال فوق حقل الإجابة، فإنه يجب دفعه إلى اليسار للأسباب التالية: تعتبر المحاذاة لليسار من أفضل الممارسات (best practice) ومناسبة لأغلب المواد المقروءة.تعتبر-بشكل عام- أسهل للقراءة مقارنة بالنصوص المدفوعة لليمين (flush right) أو المتوسطة.قابل للقراءة كالنص المضبوط من الطرفين (justified text) ولكنه وعلى عكس النص المضبوط من الطرفين (justified text) فإنه لا يتطلب تدخلا يدويا لإصلاح مشاكل تباعد الكلمات.يعزز المسار العمودي للإنهاء.عند وضع نص السؤال إلى يسار حقل الإجابة، يفضل -على عكس ما قد يتوقعه البعض- أن يكون ذلك النص مدفوعا لليمين. وقد أشار Matteo Penzo في البحث الذي ذكرناه مسبقا بأن الدفع لليمين يعمل بشكل أفضل من الدفع لليسار. (لسوء الحظ، قد لا يكون هذا صحيحا بالنسبة لمن يعانون عسر القراءة. ولهذا السبب فإن الطريقة الأفضل والتي ينصح بها هي وضع التسمية (label) فوق الحقل). الشكل 6: محاذاة نص السؤال إلى يسار حقل الإجابة ودفعه لليمين. يقول البعض بأنه يجب دفع النص إلى اليسار بدلا من اليمين لأن ذلك يسهل عملية تصفح النموذج للأسفل. قد يكون هذا صحيحا، ولكن ما نريده حقا من التصميم هو تعبئة النموذج وليس قراءة الأسئلة بشكل سريع بحثا عن كلمة أو عبارة معينة. كما أن ما نريده هو اختيار أسلوب التصميم الذي يدعم الهدف الرئيسي (أي تعبئة النموذج)، وهو ما يوفره الدفع لليمين. شيء مهم أيضا، وهو أن جعل النص مدفوعا لليسار، يجعل عملية ربطه مع حقل الإجابة الخاص به أمرا صعبا خصوصا لمن يستخدم مكبرات الشاشة (screen magnifiers) أو لمن يعاني من صعوبات في الإدراك. يعود ذلك إلى أن اختلاف أطوال نص السؤال قد يعني في بعض الحالات وجود فجوة/مساحة كبيرة بين نهاية نص السؤال وبداية حقل الإجابة. قد يكون ذلك أحد الأسباب التي دفعت المنظمة العالمية للمعايير (ISO) والمعايير الوطنيّة الأمريكية HFES200 (هندسة العومل البشريّة لواجهات استخدام البرامج) أن توصي بأن يكون نص السؤال مدفوعا لليمين إلا إذا تساوت أطوال جميع الأسطر. 3. كيفية محاذاة فئات الإستجابةإذا كان مصطلح فئات الإستجابة غير مألوف بالنسبة لك، فقد ترغب في الإطلاع على هذا المقال. لنفس الأسباب التي ذكرناها بالنسبة للأسئلة، فإنه يجب محاذاة فئات الإستجابة عموديا (أي وضع الفئة "ب" أسفل الفئة "أ"). الشكل 7: محاذاة فئات الإستجابة عموديا. كما ذكرنا سابقا، فإنه من المغري وضع الأسئلة بجانب بعضها (بشكل أفقي). ينطبق نفس الأمر على فئات الإستجابة، خصوصا إذا كانت التسميات (labels) قصيرة. غالبا ما تكون الأسئلة المتعلقة بالمسميات title (مثل "Mr" أو "Mrs") أحد العناصر الرئيسية للجوء البعض إلى استخدام المحاذاة الأفقية، لأن ذلك قد يؤدي إلى حفظ الكثير من المساحة العمودية. عندما تحدثنا عن الأسئلة، رأينا بأن وضع العناصر إلى جانب بعضها قد يؤدي إلى إبطاء من سيقوم بتعبئة النموذج وإلى ارتفاع معدل الأخطاء. وعند استخدام هذه الطريقة في فئات الإستجابة فإن مشكلة إضافية ستظهر وهي ضعف الرابطة بين مسمى فئة الإستجابة والحقل الخاص به. وكما هو موضح في الشكل 8، فإن المسافة بين المسمى والحقل هي نفسها في كلتا الحالتين. مع ذلك، ففي حالة محاذاة الفئات عموديا يكون من الواضح جدا معرفة أي مسمى يرتبط بأي حقل، على عكس المحاذاة بشكل أفقي. الشكل 8: إذا استخدمنا المحاذاة العمودية (يمين الصورة) بدلا من المحاذاة الأفقية (يسار الصورة)، فسيكون من السهل على من سيقوم بتعبئة النموذج أن يربط مسميات فئات الإستخدام بما يقابلها من حقول. في بعض الحالات، يمكن تعديل المسافة الأفقية للتخفيف من هذه المشكلة. كما يمكن أيضا تلافي هذه المشكلة نهائيا وبأقل جهد، وذلك بمحاذاة فئات الإستجابة عموديا بدل محاذاتها أفقيا. محاذاة النّص لفئات الإستجابةكما هو الحال بالنسبة لنص السؤال، يجب علينا أن نقرر فيما إذا كانت المسميات الخاصة بفئات الإستجابة المختلفة (يطلق عليها أيضا اسم "عناوين فرعية" أو "تعقيبات") مدفوعة لليمين، مدفوعة لليسار، مضبوطة من الطرفين (justified) أو متوسطة. يعتبر هذا أحد أكثر الجوانب جدالا في تصميم النماذج، ويرجع ذلك بشكل جزئي إلى اختلاف الممارسات الشائعة في نماذج شبكة الإنترنت عنها في تلك الموجودة في مجال الطباعة. عندما يتعلق الأمر بالنماذج الورقية (بما في ذلك النماذج الإلكترونية التي يمكن طباعتها وتعبئتها وملفات الـ pdf لأحد النماذج الورقية) فإنه من الواضح بأن أفضل طريقة هي وضع مسميات الفئات إلى يسار الحقول الخاصة بها ودفعها إلى اليمين. الشكل 9: وجود مسميات فئات الإستجابة إلى يسار الحقول ومدفوعة لليمين. قبل 25 سنة، أثبتت Patricia Wright بأن هذه الطريقة هي الأفضل، وقد كانت الأبحاث التي قام بها Robert Barnett على مدى عقود مضت متوافقة مع ما جاءت به Patricia Wright. عندما يتعلق الأمر بالتصميم في العالم الواقعي، فلن يكون الجواب بتلك البساطة. فبالنسبة لمسألة المحاذاة لمسميات وحقول فئات الإستجابة، فسيظهر بعض التعقيد بسبب وجود الإنترنت (the web). تاريخيا، كانت النماذج على شبكة الإنترنت تضع المسميات على يمين الحقل (كما هو الحال في الشكل 7 الموجود في الأعلى)، ويعود ذلك إلى بعض الأسباب البرمجية. على شبكة الإنترنت، يكون من الصعب محاذاة حقول الإستجابة عبر اسئلة متعددة بشكل عمودي. وعلى الرغم من صعوبة تحديد هذه الأمور، فإنه من المعقول قول بأن هذه الطريقة في وضع المسميات أصبح متعارفا عليها بشكل افتراضي (تحديدا كما أصبح نهج شركة مايكروسوفت (Microsoft) في تصميم برامج سطح المكتب أمرا متعارفا عليه افتراضيا). لهذه الأسباب، سوف تستمر مسميات فئات الإستجابة في نماذج الويب بالظهور إلى اليمين من الحقول الخاصة بها. توقع أيضا بعض الأوقات عندما تتصادم الهيمنة التاريخية للنماذج الورقية مع الشعبية المتزايدة النماذج الإلكترونية. 4. عدد الحواف (edges) في النموذجمن آخر جوانب المحاذاة التي سنتحدث عنها في هذا المقال هو عدد الحواف لمختلف طرق المحاذاة الموجودة في النموذج. إن بداية أو نهاية أي كتلة نصية (block of text) أو مساحة بيضاء/فارغة (white space) يخلق ما يسمى "الحافة". قد تكون هذه الحافة هي نهاية حقل الإجابة أو حدود أحد الأعمدة أو المسافات البادئة (indentations) لجميع نصوص الأسئلة. بمقارنة الشكلين 10 و11 في الأسفل، يظهر الشكل 10 نموذجا يحتوي على الكثير من الحواف، أما الشكل11 فيظهر نموذجا بعدد قليل من الحواف، فأيهما تفضل؟ الشكل 10: نموذج بعدد كبير من الحواف. الشكل11: نموذج بعدد قليل من الحواف. عند مقارنة التصاميم ذات الحواف الكثيرة مع التصاميم ذات الحواف القليلة، سنلاحظ بأن الأخيرة تعتبر أكثر جمالا وأسهل في الإستعمال. كما ينصح بأن يتم محاذاة العناصر المتوافقة بشكل عمودي ومتناسق. بعبارة أخرى، يجب على نص مربعات الأسئلة ذات الأطوال المتشابهة أن تبدأ وتنتهي بنفس النقطة العمودية، ويجب أيضا أن تبدأ جميع الأسئلة من نفس النقطة العمودية وهكذا دواليك. ملخص التوصياتكخلاصة لكل ما ذكرناه في هذا المقال، فإن الطرق الواجب اتباعها والتي ننصح بها هي: محاذاة الأسئلة عموديا.وضع نص السؤال فوق حقل الإجابة ودفعه لليسار.محاذاة فئات الإستجابة عموديا.للنماذج الورقية: وضع مسميات فئات الإستجابة إلى يسار الحقول الخاصة بها ودفعها لليمين.لنماذج الإنترنت: وضع مسميات فئات الإستجابة إلى يمين الحقول الخاصة بها ودفعها لليسار.تقليل عدد الحواف العمودية في النموذج على قدر المستطاع.ترجمة -وبتصرّف- للمقال Alignment.