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

تعرّفنا في الدرس الأول -من سلسلة الدروس هذه المُكوّنة من درسين- على الأنواع الثّلاثة للمحتوى المُخصّص 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.

كنت أعمل البارحة على إنشاء الشرائح والعروض التجريبية المرافقة لحديثي القادم عن الشيفرة في موقع web directions الأسبوع المقبل. أحد العروض التجريبية التي أنشئها هو دليل أساسي لمفهوم المفتاح البسيط الذي يُستخدم لتبديل مظهر واجهة المستخدم من مضيء إلى مظلم وبالعكس، أحببته واستلهمته من مبدّل المظهر في تطبيق Medium المبين أدناه. مُخصِّص مظهر تطبيق Medium هو لوحة منبثقة بسيطة تتضمن مفتاح بسيط للتبديل من وضع مضيء إلى مظلم وبالعكس. الاختلاف الوحيد الذي أريده هو أن يشير مفتاحي إلى حالة المظهر الفعالة حاليًا بشكلٍ واضح. لذا بدلًا من تفعيل وتعطيل المظهر المظلم فقط مثل مفتاح Medium، أريد أن يبدّل المستخدم بين خيارَي مضيء ومظلم بوضوح. لا يوجد سبب محدد لذلك سوى أنّه تفضيل شخصي. هناك طرق أخرى للقيام بذلك أيضًا، يبقى أمر كيفية تصميمه تفضيلًا شخصيًا، طالما أنّه يعمل وقابلًا للفهم بسهولة من قِبل المستخدمين. بدأت أفكر كالعادة في كيفية تمييز هذا العنصر البسيط، مع التأكّد من سهولة الوصول إليه مباشرةً من البداية. لذا بدأت القيام بواجبي وقراءة وتعلّم كل ما بوسعي بشأن هذا الموضوع. كان من المهم بالنسبة إليّ التأكد أنّ هذا العرض التجريبي سهل الوصول حتى لو كان مجرد دليل سريع للمفهوم لحديث. أولًا وقبل كل شيء، بما أنّ شيفرة العرض التجريبي ستكون متاحة للعامة، كان لدي مسؤولية أكبر للتأكّد من أنّها سهلة الوصول، لأنني لا أريد نشر أي شيفرة لا يمكن الوصول إليها، خاصةً إذا كان هناك فرصة ليستخدمها الناس في مكان آخر. وأردت أن تكون الشيفرة جيدةً لسببٍ آخر هو أنّني ربما أرغب في إعادة استخدامها لمكونات أخرى في ورشة عمل قادمة لي حول تطوير الواجهة الأمامية. البدء بالشيفرة كما ذكرت أعلاه، بدأت أفكر في كيفية ترميز هذا العنصر لضمان سهولة وصوله إلى قارئات الشاشة. عندها أدركت (وأحسست بالغباء نوعًا ما) أنّ الوظيفة والترميز يعتمدان على الطريقة التي أريد أن يكون سلوك التبديل بها وكيف أريده أن يظهر. كان الأمر واضحًا جدًا بالنسبة لي: سيسمح المفتاح للمستخدم بالاختيار بين المظهر المضيء والمظهر المظلم، وسيكون المظهر المضيء هو الافتراضي. وفي هذه اللحظة تبادر إلى ذهني أزرار الانتقاء (radio buttons): خياران يمكن تفعيل أحدهما فقط في وقت واحد، هذا يمكن أن يصنع حالة استخدام ممتازة لأزرار الانتقاء القديمة الجيدة. كنت أعلم أنّه يجب عليّ اختيار شيء ما مختلف في حال أردت أن تبدو واجهة المستخدم وتتصرف بشكلٍ مختلف. مثلًا، إذا أردت لواجهة المستخدم أن تعرض "تفعيل/تعطيل النمط المظلم"، عندها لن أحتاج إلى استخدام أزرار الانتقاء لأنّ لدي خيارًا واحدًا فقط للتعامل معه وهو التشغيل أو إيقاف التشغيل، سيكون ذلك حالة استخدام رائعة لمربع تأشير (checkbox) أو عنصر زر <button> تبديل قديم جيد. تحليلات التصميم والوظيفة مترابطان، مما يساعد على التفكير في هذين الأمرين في وقت واحد عند التصميم لسهولة الوصول (وفي الحقيقة تصميم أي شيء بشكلٍ عام). ابدأ دائمًا وأبدًا بالتفكير حول الترميز وسهولة الوصول عند إنشاء المكونات بغض النظر عن مدى صغرها وبساطتها. دراسة كنت بحاجة -كما هو الحال دائمًا- إلى دعم نظريتي وتطبيقي العملي بالبحث الجيد، لذا بدأت بالقراءة، مراجعي الأولى التي ألجأ إليها هي المكونات الشاملة ومشروع A11y لـ Heydon Pickering. كما اتّضح، لدى Heydon مقالة رائعة حول أزرار التبديل تعلّمت منها الكثير، ولدى صديقي Scott O’Hara زر تبديل ARIA مضمّن في قسم الأنماط من مشروع A11y. لذلك، بطبيعة الحال، فحصتُ شيفرة الزر وقرأتُ مقالة Heydon للتأكّد فيما إذا كنت على الطريق الصحيح. تجدر الإشارة قبل المتابعة إلى أنّ هذه ليست مقالة حول كيفية إنشاء مفاتيح تبديل سهلة الوصول. مقالة Heydon تقوم بعمل رائع يغطي ذلك. النقاط الرئيسية التي استخلصتها شخصيّا من البحث أعلاه هي: هناك أنواع مختلفة من المفاتيح التي تبدو وكأنّها تقوم بأشياء مماثلة ولكنها تختلف اختلافًا جوهريًا عندما يتعلق الأمر بالترميز وسهولة الوصول. ليس بالضرورة أن تكون متشابهة، لمجرد أنّها مصممة لتظهر بنفس الشكل. أحتاج إلى التفكير بالسلوك الذي ستسلكه واجهة المستخدم، الشكل والصوت عند التبديل. أولًا التصميم وتجربة المستخدم، ثمّ الشيفرة. يمكن استخدام مفتاح التبديل للتبديل بين خيارين منفصلين، أو يمكن استخدامه لتشغيل خيار واحد أو إيقاف تشغيله (أو مثل تفعيل/تعطيل خيار). هنا تبدأ اختلافات التطبيق بالظهور. إذا كنت تبدّل بين خيارين منفصلين، فإنّ استخدام أزرار الانتقاء القياسية يبدو منطقيًا. يتم استخدام أزرار الانتقاء عندما تريد من المستخدمين اختيار خيار واحد فقط من خيارين أو أكثر، لذا فإنّ هذه حالة استخدام مثالية لهم. لديهم أيضّا إمكانية وصول أساسية وسيتم وضع إشارة إلى جانب الخيار الذي تم تفعيله. تأكّد فقط أنّك لا تحدّ من إمكانية الوصول لأيٍّ منهما في HTML أو باستخدام CSS. إذا كان الهدف من التبديل هو تفعيل/تعطيل ميزة (أو تشغيلها/إيقافها)، هناك طرق أخرى لذلك: استخدام صندوق تأشير لتأشير/إلغاء تأشير (تفعيل/تعطيل) هذا الخيار. استخدام زر <button> يكون له حالتان: مضغوط وغير مضغوط. تتطلب هذه الطريقة استخدام ARIA والذي بدوره سيتطلب جافاسكربت لتعمل التقنيات المساعدة بشكل صحيح (يتم تحديث قيم خاصية ARIA عند الضغط باستخدام جافاسكربت). اقرأ مقال Heydon للمزيد من التفاصيل عن هذه الطريقة. تعني هذه الطريقة أن لديك خيارًا واحدًا فقط، وهذا يعني بدوره أنّ زر التبديل له تسمية واحدة مرتبطة فقط، وربما لن يبدو زر "التبديل المزدوج" بعد الآن، إلا إذا: حالات زر التبديل المزدوج (التي تشير إلى تشغيل/إيقاف) سيكون لها نصّا واضحًا يصف الحالة الحالية الفعالة، لذا ستبدو مثل هذا المثال من العرض التجريبي لـScott في مشروع A11y: بالنسبة لاستخدامي لمحوّل المظهر، فهو خيارٌ واضحٌ: بما أنّ المستخدم لديه خيارات (مظلم ومضيء)، أردت استخدام أزرار الانتقاء. لم أكن أريد أن أقول "تشغيل/إيقاف تشغيل الوضع المظلم" إنّما أردت أن أقول "تفعيل الوضع المضيء أو تفعيل الوضع المظلم". سيكون الحل هو HTML وCSS فقط، ولا يتطلب جافاسكربت، وستتم إتاحة إمكانية الوصول بشكلٍ افتراضي. تحليل دَع لديك فكرة واضحة حول كيفية تصميم المكون وماذا يُفترض أن يفعل أو لا يفعل، واجعل الترميز والتصميم يعتمدان على هذه الفكرة. فحص الشيفرة الآن، وبعد قراءة وفحص المصادر السابقة، قررت أن أرى كيف يقوم الناس بالتبديل. بعد كل ذلك، كنت أعلم أنني سأجد الكثير من الأمثلة لمفاتيح التبديل التي تبدو وتتصرف مثل هذا المثال الحي على codepen، من الرائع دومًا أن أرى كيف يفعل الآخرون ذلك - ربما أفتقد بعض التقنيات الرائعة التي يمكن أن أتعلمها للتصميم، أو ربما أفتقد بعض المعلومات المهمة عندما يتعلق الأمر بالترميز وقابلية الوصول. نظرًا لأنني كنت أعمل في codepen على نسختي الخاصة من هذا المفتاح (شاركت العرض التجريبي أدناه)، أظنُّ أنني فحصت مفتاح التبديل الخاص بـcodepen: المفتاح الذي تستعمله لاختيار فيما إذا إذا كنت تريد لتصميمك أن يكون عامًا أو خاصًا. تحليل سريع من المفيد والممتع أن تتعلم من عمل الآخرين بفحص شيفرتهم (سواء ذلك عن طريق أدوات المطور [devtools] أو على codepen). مفتاح الخصوصية في Codepen يعرض مفتاح التبديل في codepen بعض السلوكيات الغريبة التي لاحظتها سابقًا ولكن لم أشعر أبدًا بالفضول لأقوم بال"تنقيح". يُظهر الفيديو التالي هذا السلوك: Your browser does not support the video tag. تجدر الإشارة أولًا إلى أنّني كنت محتارة بشأن هذا المفتاح. دائمًا ما يعطي اللون الأحمر مقابل الأخضر حلقة ردود فعل غريبة. إذا جعلت التصميم خاصًا، سيتحول اللون للأخضر، وجعله عامًا سيجعل اللون أحمر. بالنسبة لي فإنَّ الأخضر يعني أكثر من ذلك "التصميم قابل للوصول من قِبل الأشخاص، إنّه متاح" واللون الأحمر أكثر من ذلك "هذا التصميم مغلق، لا يُسمح للأشخاص بالوصول". ولكن بالنسبة لـcodepen فإن هذه الألوان ترمز إلى أشياء أخرى. وبشكل أكثر تحديدًا يرمز الأحمر إلى "المنطقة العامة = المنطقة الخطرة" أو "احذر هذا التصميم متاح للعامة وهذا غير جيّد". (آسفة لأنّي درامية جدًا، ولكن هذا هادفًا). ثمّ هناك سلوك الأخطاء المبيّن في الفيديو أعلاه (إذ أنّ النقر على نفس التسمية يغيّر قيمة المفتاح إلى قيمة التسمية الأخرى). كنت فضولية مجددًا لمعرفة سبب ذلك، شغّلتُ أدوات المطور وفحصت الشيفرة. وجدت أنَّ مفتاح codepen هو صندوق تأشير واحد يبدو أنّه يحتوي تسميتين. لذلك عند الضغط على "عام" و"خاص" معًا عدة مرات يؤدي إلى تشغيل وإيقاف تشغيل المفتاح عدة مرات. بكلماتٍ أخرى، هذا هو السبب في أنَّ رد الفعل/ السلوك المرئي للمفتاح لا يُطابق هدف المفتاح أو ما يبدو أنّه يعمل. كتبت تغريدةً حول هذا الخطأ، وسببه المحتمل واقترحتُ حلًا بديلًا يُصلح الأمر. بدأت في الحصول على ردود وآراء من مطورين آخرين، مما أدّى إلى نقاش جيد ومفيد للغاية استمتعت به تمامًا (أحد الجوانب الإيجابية القليلة في تويتر). بالطبع، كان الإجماع العام هو أنّ المفتاح يحتاج إلى إصلاح. لكن كيفية إصلاحه تعتمد بشكلٍ كبير على ما يريد فريق codepen القيام به: إذا كان من المفترض أن يكون مفتاح التبديل هو زر تفعيل/تعطيل للخيار "خاص" عندها: هذا يعني أنّ نمط التبديل تشغيل/إيقاف المذكور في القسم السابق أعلاه سيكون الحل المثالي. هذا يعني أنّه سيتم تجاهل التسمية "عام" والاحتفاظ بالتسمية "خاص" فقط، مع إشارة واضحة إلى أنّ المفتاح المجاور لها يعمل على إيقاف الخيار أو تشغيله، وهذا يقودني إلى نقطة أخرى: يجب إمّا أن يتغير التمثيل البصري للمفتاح بالكامل أو يتم تعديله: إذا كان يجب أن يبقى زر المفتاح كما هو بصريًا (أي الحفاظ على سلوك المفتاح المزدوج "نقل هذا التبديل يسارًا ويمينًا")، أقترح إضافة تسميات "تشغيل/إيقاف" له بشكلٍ شبيه لما فعله Scott في عرضه التجريبي مشروع A11y، لأنّه وفقًا لإرشادات الوصول لمحتوى الويب (WCAG)، يجب ألا تستخدم اللون فقط لنقل المعلومات. تحتاج الألوان أيضًا أن يكون لديها تباين كافٍ إذا كنت تستخدمها. ومرةً أخرى، كنت أعيد النظر في ألوان الأحمر والأخضر لأنّها قد تربك شخصًا ما مثلما أربكتني لفترةٍ من الوقت. (اقترح عليّ أحدهم الرمادي والأخضر، لأنّ "إضافة اللون يمكن أن تدلّ بشكلٍ كبيرٍ على الحالة الفعّالة (بدون لون مقابل لون يواجه لونين منفصلين)"). يمكن أن تكون البنية الأساسية والترميز لهذه الحالة (تسمية واحدة فقط): صندوق تأشير، يمكن أن يكون مفعّلًا أو غير مفعّل. أودّ اقتراح استخدام تصاميم صندوق تأشير بسيطة (ربما رائعة) لهذا السلوك والتخلّي عن أسلوب التبديل المزدوج بالكامل. زر <button> مع خاصية aria-pressed (و aria-checked إذا احتجت)، إذ تشير حالة الضغط إلى أنّ التصميم خاص، وحالة عدم الضغط إلى أنّ التصميم غير خاص، أي أنّه عام. سيتغير تصميم الزر في هذه الحالة أيضًا، وقد يتطلّب سلوكه استخدام جافاسكربت لتعديل قيمة خواص ARIA عند الضغط. إذا كان من المفترض أن يعرض مفتاح التبديل خيارين بشكلٍ واضح ويمكّنهما: عام وخاص برأيي، عندها سيكون استخدام زوج من أزرار الانتقاء له معنىً كبير. يعلن زري الانتقاء، كلّ منهما بتسمية خاصة به، عن تقنيات جذابة كخيارين منفصلين يجب على المستخدم اختيار أحدهما، وسهلة الوصول تمامًا عبر لوحة المفاتيح، ولا تتطلب ARIA أو جافاسكربت لتعمل، واستخدم قليلًا من الـCSS لها لتخلق تصميم زر "التبديل المزدوج" إذا أردت (حقيقةً لا أعرف ماذا أسميه بشكلٍ آخر) وستكون قمت بكل العمل. قد يختلف قليلًا الترميز والتصميم لمثل هذا الحل بين المطورين، ولكن جوهر الشيفرة سيكون نفسه. وهذا سيقودني إلى التجربة الحية… مثال حيّ هذا تنفيذي لمفتاح تبديل بين خيارين. لقد قمت بإنشاءه ليس كحلّ لمفتاح codepen، لكن ببساطة كمفتاح لتبديل المظهر مضيء/مظلم الذي أستخدمه في حديثي: سيكون مفتاح التبديل في سياق مجموعة أكبر من عناصر النموذج، لهذا السبب ليس لدي أيّ مجموعة حقول (fieldset) أو وسيلة إيضاح (legend) في العرض التجريبي. وأعلم جيّدًا أنّك قد تعدّل الشيفرة لعدم الحاجة إلى عناصر span إضافية في الترميز وتستخدم عناصر زائفة بدلًا منها، ولكنني على أيّة حال قد اخترت هذه الطريقة، فقط لأنني أريدها. جرّب أن تلعب بالشيفرة وتزيل تعليقات بعض التصاميم (حاول إزالة عناصر span بشكلٍ خاص لتشاهد كيف يبدو مفتاحي بدونها) لتحلل الشيفرة وتمتلك فكرة أفضل عن خياراتي وما الذي كنت أحاول تحقيقه. أضفت أيضًا تصميمًا للتأكّد من أنّ مستخدمي لوحة المفاتيح يمكنهم رؤية مكان التركيز، إذ أنني غطيت أزرار الانتقاء الافتراضية بعناصر span، ولم يتم تسليط الضوء على التسميات بشكلٍ افتراضي. استخدمت :focus-visible فقط في البداية (مع polyfill) لكنه لم يعمل كما هو متوقع في متصفحي فايرفوكس وسفاري، لذا انتهيت بإضافة :focus مجددًا واستخدمته بدلًا من :focus-visible. وأعلم أيضًا أنّ تصميم التركيز ليس جميلًا جدًا، لكن هذا العرض التجريبي هو مجرد دليل للمفهوم لذا لا يحتاج أن يكون جميلًا بشكلٍ ملفت للنظر. إذا كنت ترغب في مشاهدة عرض تجريبي آخر يستخدم أيضًا أزرار انتقاء لكن ينفذّها بطريقةٍ مختلفةٍ، بدون عناصر spanواستخدام عناصر زائفة، راجع هذا التصميم على codepen لصديقي Scott O’hara: كلمات أخيرة دعني أبدأ بالقول أنني قد أكون مخطئة. أعلم أنّ مستخدمي codepen قد يريدون شيئًا آخر مختلف تمامًا، أو يفكرون في شيء ما مختلف تمامًا. لذلك لا تهدف هذه المقالة إلى إعادة تصميم زر التبديل في codepen، إنّما تقدم توثيقًا لبحثي وتدريبي على التفكير أثناء العمل على إنشاء زر التبديل الخاص بي لحديثي. سأحتاج أن أقوم بالمزيد من الأبحاث عندما يحين الوقت لمتابعة عملي على ورشة العمل الجديدة الخاصة بي، وقد تتغير الأمور، وأعلم أنني سأتعلّم وأعرف المزيد عندما أنشئ مفتاحي التالي. لكن، حتى ذلك الحين، أعلم أنني حصلت على منشور المدونة هذا للإشارة إلى بعض الأفكار والآراء التي دارت في ذهني عندما اتخذت الخطوة الأولى لذلك. أتمنى أن تجد شيئًا مفيدًا بقراءتك لهذا المقال. إذا حصل ذلك بالفعل، فشكرًا لقراءتك. شكرًا. ترجمة -وبتصرف- للمقال On Designing and Building Toggle Switches لصاحبته Sara Soueidan

طيلة سنواتٍ، شهِد ووردبريس عدَّة تطويرات إلّا أنّ تصميم صفحة تسجيلِ الدُّخول بقي على حالهِا. صحيحٌ أنّها ذات تصميمٍ بسيطٍ ونظيف وتتوافق مع مقاسات شاشاتٍ مختلفةٍ ولكن عند إنشاء قالبٍ لعميلٍ ما خاصّةً إذا كان هذا العميل عبارةً عن شرِكة فسيكون من الأفضل أن تستطيع تغيير ألوان التصميم في صفحة الدُّخول إضافة إلى تغيير الشِّعارِ أيضًا ليتوافقَ مع قالبِ الموقِع، أليسَ كذلك؟ شيءٌ جيِّدٌ أنّ هذا الأمر يُمكن القيّام به بسهولةٍ. أفضل ما في ووردبريس هو إمكانيِّةُ تخصيص أيِّ شيءٍ به فقط باستخدام دوالِّ الـ PHP. في درسِنا اليوم، سأقوم بتعليمك كيفِيّة تخصيصِ صفحة تسجيل الدّخول في ووردبريس على حسب ذوقك واحتياجاتك. في البداية سنقوم بتغيير الشِّعار ثُمّ بعد ذلك نغيِّر ألوانَ التصميم إضافةً إلى بعضِ العناصر الأخرى. فلنبدأ. الأشياء التي ستحتاجها خلال هذا الدّرسِ تنصيب ووردبريس مع القالب الافتراضي twenty-fourteen. الوقت والصبر. صفحة تسجيل الدُّخول الافتراضية لووردبريس: ما سنقوم بإنشائه: تغيير الشِّعار: يَستخدم ووردبريس CSS لعرض صورةٍ في الخلفيّة. في العادة يتِّم تضمينها بين وسمِ h1 وَوسمِ a. لكنّنا في هذا الدّرسِ سنستخدِم ملفَّ functions.php الموجود داخل قالب ووردبريس twenty-fourteen الافتراضي. أوّلًا، قُم بوضع شعارك الذي تريد إضافتهُ (يجب أن يكون بصيغة png ) بداخلِ مجلّد images الخاصِّ بقالب twenty-fourteen (في هذا الدَّرسِ سأستخدِمُ شعار custom-login-logo.png). يرجى الانتباه إلى أنَّ أبعاد الشِّعار يجب أن تكون 80*80 بِكسل. غير ذلك سيتوجّب عليك تعديل الأبعاد داخل ملفِّ CSS خاص. بعد ذلِك، افتح ملف functions.php الخاصِّ بقالب twenty-fourteen سنستخدِمُ مُعلِّق login_enqueue_scripts لتضمينِ CSS في رأس صفحة تسجيل الدُّخول لتحميل شعارنا الذي نريد إضافتهُ. انسخ الكود التّالي تحت آخر سطرٍ في ملفِّ functions.php ثمَّ بعد ذلك ضع اسم ملفِّ شعارِك داخل المسار. <?php function login_logo() { ?> <style type="text/css"> body.login div#login h1 a { background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/custom-login-logo.png); } </style> <?php } add_action( 'login_enqueue_scripts', 'login_logo' ); تغيير رابطِ الشِّعار: في الوضع الافتراضي، الشِّعار يقود إلى موقع ووردبريس . يُمكنك تغيير هذا الرّابط لِجعله يقود إلى موقِعك. للقيامِ بهذا استخدم المُعلِّقَ التَّالي، فقط قم بنسخهِ ولصقهِ في ملفِّ functions.php مباشرةً تحت مُعلِّقِ شعار الدُّخول. <?php function login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'login_logo_url' ); تغيير تصميم صفحة تسجيل الدُّخول: لتخصيص تنسيق صفحة تسجيل الدُّخول الافتراضيّة لووردبريس سنكون بحاجةٍ لإضافةِ تنسيقات لهذه الصّفحة. للقيام بهذا سنحتاج لاستخدام مُعَلِّقٍ لملفّات CSS خاصّتنا. بهذا سنطلُب من ووردبريس تَجاهلِ ملفِّ تنسيق صفحة تسجيل الدُّخولِ الافتراضي واستخدامِ مَلفِّنا. بدايةً، سنحتاجُ لإنشاء ملفِّ تنسيقات داخل مجلّد CSS الخاصِّ بقالب twenty-fourteen (في هذا الدّرس، قمت بِتسميّة ملّفي custom-login-styles.css) ثمَّ بعد ذلك أضِف المُعلِّق التالي في ملفِّ .functions.php <?php function login_custom_stylesheet() { ?&gt; &lt;link rel="stylesheet" id="custom_wp_admin_css" href="&lt;?php echo get_bloginfo( 'stylesheet_directory' ) . '/css/custom-login-styles.css'; ?&gt;" type="text/css" media="all" /&gt; &lt;?php } add_action( 'login_enqueue_scripts', 'login_custom_stylesheet' ); بعد ذلك قم بفتح ملفِّ التنسيقات الذي قمنا بإنشائه تحت اسم custom-login-styles.css. أوّلًا سنقوم بتغيير لون الخلفيّة ونوع الخطِّ المستخدمِ في صفحة تسجيل الدُّخول. قُم بنسخ الكود التّالي: body.login { background-color: #3d3d3d; font-family: Helvetica; } الآن وبعد تغييرنا لِلون الخلفيِّة ونوعِ الخطّ، دعنا نعطي لونًا رماديًّا جميلًا لِنموذج استمارة تسجيلِ الدُّخول. .login form { background: #f3f3f3; } بعد ذلك فلنخصِّص حُقول المُدخلات لِنموذج الاستمارة في كلِّ الحالاتِ المُمكِنة (normal, hover, focus). .login form .input,.login input[type=text],.login form input[type=checkbox] { background: #fff; border: 1px solid #b7b7b7; padding: 5px; } .login form .input:hover,.login form .input:focus,.login input[type=text]:hover,.login input[type=text]:focus,.login form input[type=checkbox]:hover,.login form input[type=checkbox]:focus { background: #fff; outline: none; } الآن، سأقوم بتغيير لون خلفيِّة زرِّ تسجيل الدُّخول مع إعطائه بعض التبطين على كلٍّ من الجِهتين اليُمنى واليُسرى. سأقوم أيضًا بجعل حجم الخطِّ 13 بكسل، لِجعله يبدو زرًّا مسطَّحًا. body.login div#login form#loginform p.submit input#wp-submit { border-radius: 0; background: #ffab00; outline: none; border: none; padding: 0 25px; text-align: center; font-size: 13px; } آخرًا، دعنا نقم بتغيير نصِّ رابطي (“نسيت كلمة السِّر” و “العودة للتسجيل”) لكلٍّ من حالتي normal و hover ثمّ بعد ذلِك سنقوم بجعلِهما في وسط الصّفحة. body.login div#login p#nav { margin: 20px auto; text-align: center; } body.login div#login p#backtoblog { margin: 0 auto; text-align: center; } .login #nav a:hover,.login #backtoblog a:hover { color: #ffab00; } في الخِتام: هذا كلُّ شيء! أتمنّى أن تكون قد تعلَّمت من هذا الدَّرسِ طريقة تغيير التصميم العاديِّ لصفحةِ تسجيل الدُّخول الخاصّةِ بووردبريس إلى أيِّ تصميمٍ تريده. في حالةِ لم تكن مرتاحًا حيَال استخدامِ PHP يمكنك دائمًا استخدام إضافات ووردبريس مثل Branded Login Screen و Login Screen Manager . هل تَعلمُ أيّة طُرقٍ أخرى للقيّامِ بنفسِ الشيء؟ سنكون سعداء بسماعها من عندك. نتمنّى أن تكون قادرًا الآن على ملاحظة المُميِّزات الضخمة التي يُتيحها لك ووردبريس. طبعا نحنُ نعلم أنَّ ووردبريس قد لا يكون مناسبًا لجميع أنواعِ المشاريعِ ولكنّه سيكون مناسبًا لأغلبها. شاركنا رأيك. ترجمة -وبتصرّف- للمقال How to Easily Customize the WordPress Login Page

إن رحلة إتقانك لمهنة التسويق من خلال البريد الإلكتروني ليست رحلةً سهلةً أبدًا، فتطوير استراتيجية صحيحة لعلامتك التجارية هو أمرٌ دقيقٌ للغاية، بالإضافة إلى ذلك، عليك أن تتعلم كيفية استخدام التكنولوجيا التي يتم تحديثها بشكل مستمر وتفكر أيضًا في كيفية تحقيق أقصى استفادة منها. لقد قطعنا شوطًا طويلًا في الإنترنت للوصول إلى عبارة: "مبروك لقد حصلت على البريد" لذلك يعد التسويق عبر البريد الإلكتروني وسيلة تسويق مهمة أكثر من أي وقت مضى، فأنت بحاجة إلى التسويق من خلال البريد الإلكتروني لكي تتمكن من توطيد علاقات دائمة مع المشتركين ولكي تحافظ عليهم أيضًا. ومثل بقية المسوقين عبر البريد الإلكتروني، فنحن نعتبر أنفسنا المسؤولين عن إيصال علامتنا التجارية للأشخاص الذين اختاروا أن يقرؤوا رسائلنا البريدية، ونحن نريد أن نعزز تجارب المشتركين لدينا بشكل فعال لبناء علاقات قوية معهم وهذا ما يساعدنا في الحفاظ على علاماتنا التجارية ، والتي بدورها تساعد شركاتنا في الوصول لعدد أكبر من المبيعات. دعونا نذكر لكم خمسة دروس سوف تتعلمونها عندما تصبحون مسوقين من خلال البريد الإلكتروني: 1. كيفية اختيار ESP المناسب: لكي تتمكن من تسخير جميع ميزات التسويق من خلال البريد الإلكتروني التي تتغير باستمرار فأنت بحاجة إلى مزود خدمة البريد الإلكتروني (ESP) والذي توفر لك كل ما تحتاجه لتحسين استراتيجية العمل في البريد الإلكتروني الخاص بك. قد يؤدي استخدام ESP بشكل خاطئ إلى حدوث صعوبة في تشغيل حملات تسويقية عالية الأداء، وسوف تكون خالية تمامًا من أي ميزات متقدمة مثل الرسائل الإلكترونية والمحتوى الديناميكي، بالإضافة إلى ذلك سوف تواجه صعوبة في الوصول إلى المشتركين والعملاء. في ما يلي أمثلة على أهم الميزات ذات المستوى العالي والتي يمكنك استخدامها لتنمية عائد الاستثمار التسويقي لديك عبر البريد الإلكتروني: الاستعانة بمنشئي البريد الإلكتروني الأتمتة السلوكية إرسال البريد في أوقات مناسبة الإحصاءات والتحليلات استخدام القوائم المخصصة القيام بإشراف شخصي على البريد الاعتماد على المحتوى النوعي المخصص 2. كيفية القيام بطلب الإذن هناك أمر مهم فيما يخص التسويق الإلكتروني الفعال وعلاقته بالرسائل غير المرغوب فيها، فإنك إذا اتجهت إلى مجلد الرسائل غير المرغوب، فسوف تجد العشرات من رسائل البريد الإلكتروني التي لا ترغب في تلقيها. يقدم التسويق عبر البريد الإلكتروني للمسوقين عائدًا استثماريًا مرتفعًا جدًا ويصل إلى 44 دولارًا لكل دولار يتم إنفاقه، ولكن يمكنه أن يتحول بسهولة إلى محتوى غير مرغوب فيه في حال لم يرغب المشتركون في تلقي ما ترسله لهم، هذا هو السبب الذي يجعل من طلب الإذن لوصول البريد أمرًا مهمًا وحاسمًا في عملية التسويق من خلال البريد الإلكتروني. تأكد من إمكانية المشتركين في قائمتك البريدية لأن يتلقوا رسائل البريد الإلكتروني الخاصة بك، وتأكد أيضًا من سهولة العثور على خيار إلغاء الاشتراك في رسائل البريد الإلكتروني الخاصة بك فذلك يساعد في الحفاظ على هذه الرسائل في مجلد الرسائل غير المرغوب فيها عند العملاء. إن عملية تحسين أداء البريد تعتبر وسيلة فعالة لمعرفة ما يريد العملاء تلقيه بالضبط. هناك أربعة عناصر يجب أن تتوفر في نموذج التمكين ليكون جيداً وهي: العنوان: ويجب أن يكون ملفتاً ومميزًا عرض المزايا: يمكنك بناء الثقة مع العملاء من خلال توضيح سبب أهمية الاشتراك في المحتوى التابع لك دعوة إلى إجراء: عبارة تحث المستخدم على اتخاذ قرار بشأن ما تريد أن يفعله الشخص نموذج إدخال البريد الإلكتروني وهو يساعدك في جمع المعلومات التي تحتاج إليها في عمليتك التسويقية 3. كيف تحافظ على سلامة عملك من المؤكد أن الأشخاص المشتركين في رسائل البريد الإلكتروني الخاصة بك يتوقعون أن يحصلوا على الميزات التي وعدتهم بها عندما قاموا بالاشتراك، فمن غير المعقول أن ترسل قائمة البريد الإلكتروني الخاص بك كل يومين بينما كان وعدك لهم أن ترسلها مرة في الأسبوع، وهو أيضًا أمر غير أخلاقي ومن المرجح أن يؤدي ذلك إلى إلغائهم للاشتراك بنشرتك البريدية أو حتى تقارير البريد المزعج. إن دعم السلامة في عملية التسويق عبر البريد الإلكتروني لا يشمل إعطاء القراء ما قاموا بالاشتراك به فقط ولكنه يشمل أيضًا توفير خيار إلغاء الاشتراك ويجب أن يكون ظاهرًا واضحًا، إن عدم القيام بذلك يرفع من فرص انتقال رسائلك إلى صناديق البريد المزعج عندهم. قم بتخصيص تذكير السماح الخاص بك قد ينسى بعض قراء البريد الإلكتروني لماذا يتلقون رسائل البريد الإلكتروني منك وهناك طريقة رائعة لتذكيرهم وذلك من خلال إخبارهم في تذييلات البريد الإلكتروني. قم بتذكير القراء لماذا يتلقون هذا البريد الإلكتروني، لا تخف أبدًا من إظهار اهتمامك في هذه النقطة من رسائل البريد الإلكتروني التي ترسلها لعملائك، إن مجرد تذكيرك لهم سوف يجعل منك عنصرًا نشطًا في ذهنهم. قم باستخدام مركز التفضيلات إذا كنت تعطي عملاءك كل ما تعدهم به ولا تزال تعاني من حالات إلغاء الاشتراك، فيوجد هناك طريقة رائعة لكي تحافظ على علاقة متينة مع جمهورك من خلال إرسال مادة مرئية إلى مركز تفضيلاتهم. يقدم مركز التفضيلات للقراء خيار تخصيص / تغيير الرسائل التي يرغبون في تلقيها بدلًا من إلغاء الاشتراك بشكل كامل، ويعد جمع بيانات تفضيلات العملاء أمرًا رائعًا للحفاظ على نجاح التسويق عبر البريد الإلكتروني وربط القراء بالرسائل التي يريدون تلقيها. باستخدام مركز تفضيلات، يمكن للقراء معرفة ما قاموا بالاشتراك به، ويمكن أيضًا تخصيص أشياء أخرى مثل: المواضيع التي يطلبونها المواقع التي يرغبون بها تغيير عنوان البريد الإلكتروني الخاص بهم عدد المرات التي سوف يتلقون فيها البريد الإلكتروني 4. كيفية تخصيص رسائل البريد الإلكتروني لقد مضى زمن الإيام التي ترسل فيها البريد الإلكتروني نفسه إلى قائمة العملاء واحدًا واحدًا. باستخدام التكنولوجيا التي تقدمها ESP اليوم، يمكننا أن نجعل رسائلنا أكثر أهمية للعملاء من أي وقت مضى، ويمكن ذلك من خلال تخصيص وتصنيف القوائم البريدية، حيث يمكنك تعزيز استراتيجية التسويق عبر البريد الإلكتروني. الحصول على الخصوصية إنه أمر مهم لمسوقي البريد الإلكتروني، ونحن الآن قادرون على جعل رسائلنا خاصة لأشخاص معينين لشخص، تعمل رسائل البريد الإلكتروني المخصصة على تحسين نسب الظهور عند العملاء بمعدل 14٪ والتحويلات بنسبة 10٪. التخصيص هو أمر حاسم في موضوع التسويق الإلكتروني وهو يساعدك في التركيز في رحلتك للوصول للاحتراف في تسويق البريد الإلكتروني. هناك العديد من مستويات الخصوصية بدءًا من إدراج الأسماء في مواضيع البريد الإلكتروني ووصولًا إلى تغيير محتوى البريد الإلكتروني استنادًا إلى بيانات المشترك، وهناك طرق عديدة لإنشاء بريد إلكتروني محدد إلى المتلقين. وتشمل الطرق المختلفة للتخصيص كل مما يلي: استخدام الموقع المشترك وإعطاء نصائح / اقتراحات إضافة اسم المشترك إلى الصورة استناد محتوى البريد الإلكتروني على سلوك المشترك نفسه تحسين وقت إرسال الرسائل إلى البريد استنادًا إلى مكان اشتراك المشترك تقسيم القوائم البريدية يمكن أن يساعدك تصنيف شرائح المشتركين أو تقسيمهم إلى مجموعات محددة على إرسال رسائل هادفة ومحددة. فقد وجد المسوقون زيادة بنسبة 760٪ في عائدات البريد الإلكتروني من الحملات المقسمة إلى عدة شرائح، فأرسل إلى المشتركين رسائل قريبة منهم، وقريبة من اهتماماتهم. باستخدام ESP مثل "مراقبة الحملة"، يمكنك تقسيم قائمتك بسهولة إلى مجموعات استنادًا إلى فئات معينة مثل: الجغرافيا (البلد، المدينة، اللغة) الخصائص الديمغرافية (الجنس، المهنة، العمر) علم النفس (المصالح والأنشطة والقيم) السلوك (تاريخ الشراء أو المشاركة أو فك الارتباط مع رسائل البريد الإلكتروني السابقة) 5. قم بإضافة التوابل إلى موضوعك الخاص حيث تفشل الكلمات، تتحدث الرموز التعبيرية يمكننا استخدام الرموز التعبيرية لتحريك عواطف العملاء وإبراز البريد الإلكتروني بشكل أكثر وضوحًا، وعلى سبيل المثال فإن إضافة بعض الرموز التعبيرية يمكن أن يحرض المشتركين لقراءة ما أرسلته وسوف يولد عندهم انطباعًا إيجابيًا لا ينسى. إن ما يقارب من 56٪ من العلامات التجارية التي تستخدم رموز تعبيرية ضمن مواضيع رسائل البريد الخاصة بهم تتمتع بمعدل ربح عالي، إن الرموز التعبيرية هي إضافة جذابة للموضوع الخاص بك والذي يضم الآلاف من المعاني في عبارة واحدة. إذا لم تكن متأكدًا مما إذا كان استخدام الرموز التعبيرية يناسب لهجة الجمهور أو رسالته فإن اختبار A / B سوف يوضح لك كيف يتفاعل القراء مع رسائل البريد. إليك بعض الاعتبارات التي يجب اتخاذها عند استخدام الرموز التعبيرية في مواضيع البريد الإلكتروني الخاصة بك: هل تتلاءم الرموز التعبيرية مع رسالتي؟ هل يستجيب جمهوري بشكل إيجابي للرموز التعبيرية؟ هل تظهر هذه الرموز التعبيرية عند عملاء بريد إلكتروني مختلفين؟ هل موضوع البريد الإلكتروني الخاص بي يكون أفضل مع أو بدون الرموز التعبيرية (في حالة عدم تقديم الرموز التعبيرية)؟ الخلاصة الطريق إلى أن تصبح مسوق عبر البريد الإلكتروني قد يختلف من شخص لآخر، وذلك يتطلب فهم رغبات المشتركين في قناتك، ومدى رغبتهم بالوصول لعلامتك التجارية، ولذلك يتوجب عليك السعي للإستفادة من جميع التقنيات المتاحة لإنشاء حملات بريد إلكتروني ذات أداء عالٍ، إن الدروس الواردة أعلاه هي أمثلة للأشياء التي يتعلمها كل مسوق عبر البريد الإلكتروني عندما يبدأ في إنشاء إستراتيجيته المتميزة. ترجمة -وبتصرّف- للمقال 5 Lessons You Learn When Becoming an Email Marketer لصاحبته ANDREA ROBBINS

سوف نتطرق في هذا الدرس إلى كيفية تنسيق وتخصيص عناصر <"input type="file> بالطريقة الصحيحة والسليمة وباستعمال العنصر <label> وبعض الجافاسكربت. معاينة النتيجة النهائية. يمكنك تحميل الشيفرة المصدرية للأمثلة من هنا. هناك العديد من الطرق لتخصيص العنصر <"input type="file> وقد جربت العديد منها ولكنها لم تعجبني ولم تُلبّي متطلباتي. لذلك حاولت البحث في Google ولكني لم أجد مبتغاي. وبعد أن فقدت الأمل وظننت أنني لن أجد ما أبحث عنه وقعت عيني بالصدفة على أحد التعليقات الموجودة في موقع StackOverflow، وكان ذلك التعليق يحتوي على كلمة "<label>" وكان ذلك بداية الخيط وأعتقد أنّه ما كنت أبحث عنه. وكما تعلمون فالنقر على عنصر label يؤدي إلى تفعيل أحد عناصر <input> مرتبطة به، ومما يثير الاهتمام أنّه إذا كان ذلك العنصر عبارة عن <"input type="file> فإنّ النقر على الـlabel المرتبطة به يؤدي إلى فتح متصفح الملفات وهذا هو الحل المثالي الذي كنت أبحث عنه. <input type="file" name="file" id="file" class="inputfile" /> <label for="file">Choose a file</label>أي أنّ النقر على أي واحد من هذين العنصرين (<label> أو <"input type="file>) سوف يعطي نفس النتيجة وهي فتح متصفح الملفات، وهذا يعني أنّ أصعب جزء قد تم حلُّه. لن نحتاج إلى جافاسكربت أو حلول معقدة، كل ما نحتاجه هو السطرين البرمجيين الموجودين في الأعلى. أنظر إلى الصورة في الأسفل. دعونا الآن نقوم بتنسيق العناصر حتى تبدو وكأنّنا نملك زرا عاديا. إخفاء عنصر <input>في البداية يجب علينا إخفاء العنصر <input>، وسوف تتكفل الخاصيتين display: none أو visibility: hidden بذلك. لماذا نريد إخفاءه؟ لأنّ قيمة المُدخل (input) لن يتم ارسالها إلى الخادوم عندما نقوم بعمل تسليم (submit) للنموذج. والسبب الثاني هو أننا لا نريد أن يتم تحديد ذلك العنصر عندما يقوم الزائر بتصفح الموقع باستعمال الزر tab الموجود على لوحة المفاتيح (لأننا نريد لموقعنا أن يكون قابل للوصول accessible). وبناءً على ذلك قمت باستعمال تنسيقات CSS التي تراها في الأسفل التي سوف تعمل على إخفاء العنصر عن أنظارنا ولكنه سيبقى مرئي بالنسبة للمتصفح نفسه: .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }قد تتسائل لماذا وضعنا القيمة 0.1px لكل من العرض والارتفاع وليس 0px. يعود السبب في ذلك إلى أنّه إذا أعطينا عنصر ما عرض وارتفاع بقيمة 0px فإنّنا لن نتمكن من استخدام زر tab على تلك العناصر في بعض المتصفحات. وأمّا بالنسبة للخاصية position: absolute فقد استخدمناها حتى نمنع أن يتداخل العنصر مع العناصر الأخرى. تنسيق العنصر <label>بما أنّ العنصر <label> هو الزر افتراضيًا فإننا نستطيع تنسيق هذا العنصر كما نريد. سنقوم بشيء بسيط هنا ولن نجعل التنسيقات معقدة: .inputfile + label { font-size: 1.25em; font-weight: 700; color: white; background-color: black; display: inline-block; } .inputfile:focus + label, .inputfile + label:hover { background-color: red; }الوصولية (accessibility)كيف يمكنك أن تعرف بأنّ أحد عناصر الصفحة قابل للنقر عليه؟ هناك شيئان يدلان على ذلك، الأول هو أنّ العنصر يجب أن يظهر عليه ذلك، بحيث يعطيك شعورًا بأنّه يمكنك النقر عليه أو استعمال زر tab، والثاني هو أنّه يجب أن يتغير مؤشر الفأرة إلى شيء مناسب عندما تقوم بوضع مؤشر الفأرة عليه. وبما أننا قمنا بفعل الشيء الأول سابقًا (من خلال التنسيقات الموجودة في الأعلى) فسوف نهتم بالشيء الثاني (تغير مؤشر الفأرة عند وضعه عليه) باستعمال بعض الأكواد البسيطة: .inputfile + label { cursor: pointer; /* "hand" cursor */ }أنظر إلى الصورتين التاليتين ولاحظ أنّ في الصورة الأولى لا يتغير مؤشر الفأرة على عكس الصورة الثانية التي يتغير فيها مؤشر الفأرة عند وضعه على العنصر ليعطي انطباعًا بأنّ هذا العنصر قابل للنقر. التصفح/التنقل باستخدام لوحة المفاتيحإن كان زوار موقعك لا يستطيعون تصفح موقعك باستخدام لوحة مفاتيح فقط فتأكد حينها أنّك تقوم بشيء خاطئ ويجب عليك اصلاحه. وقد كان إخفاء عنصر <input> بطريقة صحيحة هو أحد الأشياء الجيدة لتحسين تجربة المستخدم، وأمّا الشيء الآخر هو أن تُعطي للمستخدم انطباعًا ما بأنّ العنصر قد أصبح في حالة focus (يُصبح العنصر في حالة focus عند التصفح باستخدام زر tab في لوحة المفاتيح، وبالتالي نستطيع استخدام الفئة الزائفة focus: على ذلك العنصر): .inputfile:focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }تُستخدم القيمة webkit-focus-ring-color auto 5px من أجل الحصول على المظهر الإفتراضي للخط الخارجي (outline) في متصفحات Chrome، Opera وSafari. وبالنسبة للقيمة 1px dotted #00 فهي موجودة فقط للمتصفحات التي لا تفهم -webkit-. مشاكل متعلقة باللمس (touch)إذا كنت تستخدم FastClick (وهي مكتبة للتخلص من الإيقاف المؤقت للنقر والذي مُدته 300ms في الأجهزة التي تعمل باللمس) وكنت تنوي إضافة عناصر إضافية داخل العنصر <label>، فإنّ الزر لن يعمل كما يجب إلا إذا استخدمت الخاصية pointer-events: none: <label for="file"><strong>Choose a file</strong></label>.inputfile + label * { pointer-events: none; } تحسين بعض الأمور باستخدام الجافاسكربتبقي علينا شيء واحد يجب فعله وهو إظهار إذا ما كان هناك ملفات تم اختيارها أم لا. ومع أنّ العنصر <"input type="file> يُظهر ذلك عادةً إلا أننا قمنا بإخفائه إن كنت تذكر، ولكن لحسن حظنا فهناك طريقة لفعل ذلك باستخدام الجافاسكربت بحيث نجعل نص الـlabel هو اسم الملف المُختار، وإذا كان هناك عدة ملفات فإنّ نص الـlabel يصبح عدد تلك الملفات: <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />var inputs = document.querySelectorAll( '.inputfile' ); Array.prototype.forEach.call( inputs, function( input ) { var label = input.nextElementSibling; labelVal = label.innerHTML; input.addEventListener( 'change', function( e ) { var fileName = ''; if( this.files && this.files.length > 1 ) fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); else fileName = e.target.value.split( '\\' ).pop(); if( fileName ) label.querySelector( 'span' ).innerHTML = fileName; else label.innerHTML = labelVal; }); });قمت أيضًا بكتابة أكواد jQuery تقوم بنفس العمل، لذلك تأكد من أن تتصفح الملف المصدري إن كنت تفضل استخدام jQuery. توضيح بسيط للأكواد الموجودة في الأعلى:وجود الصفة multiple في عنصر <input> يسمح للمستخدم بأن يختار أكثر من ملف مرة واحدة. أمّا الصفة data-multiple-caption فهي تستخدم للتعبير عن الرسالة التي تريد أن تظهر للمستخدم عندما يقوم باختيار عدة ملفات. وبالنسبة للعبارة { count } فهي اختيارية وسوف يتم استبدالها برقم يُعبّر عن عدد الملفات المُختارة.الصفة multiple غير مدعومة في متصفح Internet Explorer 9 أو أقل ولا حتى الخاصية files الخاصة بالجافاسكربت، ولذلك سوف نعتمد على value. وبما أنّها عادةً تحتوي على قيمة بالصيغة C:\fakepath\filename.jpg فإنّ ()split( '\\' ).pop تقوم باستخراج اسم الملف.من المثير للاهتمام أنّه يمكنك إلغاء قيمة من المدخلات عن طريق الضغط على زر ESC عندما تكون نافذة تصفح الملفات مفتوحة، وهذا متاح فقط في متصفحي Chrome وOpera. ولهاذ استخدمنا المتغير labelVal لتخزين القيمة الافتراضية للـlabel وإرجاعها عند الحاجة لذلك.سوف تكون النتيجة النهائية كما في الصورة: ولكن ماذا لو كانت الجافاسكربت غير مفعلة؟بما أنّه لا يوجد طريقة أخرى غير الجافاسكربت لمعرفة إذا ما قام المستخدم باختيار ملف أم لا، فإنّه من الأفضل الاعتماد على المظهر الافتراضي لمُدخِل الملفات من أجل سهولة الاستخدام. لذلك كل ما علينا فعله هو إضافة class باسم "no-js" للعنصر <html> ومن ثم نستخدم الجافاسكربت لاستبداله بالاسم "js" وبهذه الطريقة نعرف إذا كان الجافاسكربت مفعلًا أم لا. <html class="no-js"> <head> <!-- remove this if you use Modernizr --> <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script> </head> </html>وهذه تنسيقات CSS: .js .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .no-js .inputfile + label { display: none; } خطأ في متصفح Firefoxإنّه لمن المفاجئ معرفة أنّ متصفح Firefox يتجاهل input[type="file"]:focus بينما تعمل :hover و:active بشكل جيد. ولكن لحسن الحظ فإنّ هذا المتصفح يسمح لنا بالتعرف على حالة focus باستخدام الجافاسكربت، لذلك فإنّ الحل هو إضافة class للعنصر <input> ليسمح لنا بالتحكم بحالة الـfocus: input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); }); input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });.inputfile:focus + label, .inputfile.has-focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } خاتمةإلى هنا نكون قد وصلنا إلى نهاية هذا الدرس. لذلك تأكد بأن تطلع على الشفرة المصدرية وعلى المعاينات وأن تقوم بالتعديل عليها لتتناسب مع احتياجاتك وذوقك. كما أنّ لديك الحرية الكاملة في استخدام الشفرات الموجودة في هذا الدرس في مشاريعك القادمة. ترجمة -وبتصرّف- للمقال Styling & Customizing File Inputs the Smart Way لصاحبته Osvaldas Valutis.