المحتوى عن 'تخصيص'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 4 نتائج

  1. إن رحلة إتقانك لمهنة التسويق من خلال البريد الإلكتروني ليست رحلةً سهلةً أبدًا، فتطوير استراتيجية صحيحة لعلامتك التجارية هو أمرٌ دقيقٌ للغاية، بالإضافة إلى ذلك، عليك أن تتعلم كيفية استخدام التكنولوجيا التي يتم تحديثها بشكل مستمر وتفكر أيضًا في كيفية تحقيق أقصى استفادة منها. لقد قطعنا شوطًا طويلًا في الإنترنت للوصول إلى عبارة: "مبروك لقد حصلت على البريد" لذلك يعد التسويق عبر البريد الإلكتروني وسيلة تسويق مهمة أكثر من أي وقت مضى، فأنت بحاجة إلى التسويق من خلال البريد الإلكتروني لكي تتمكن من توطيد علاقات دائمة مع المشتركين ولكي تحافظ عليهم أيضًا. ومثل بقية المسوقين عبر البريد الإلكتروني، فنحن نعتبر أنفسنا المسؤولين عن إيصال علامتنا التجارية للأشخاص الذين اختاروا أن يقرؤوا رسائلنا البريدية، ونحن نريد أن نعزز تجارب المشتركين لدينا بشكل فعال لبناء علاقات قوية معهم وهذا ما يساعدنا في الحفاظ على علاماتنا التجارية ، والتي بدورها تساعد شركاتنا في الوصول لعدد أكبر من المبيعات. دعونا نذكر لكم خمسة دروس سوف تتعلمونها عندما تصبحون مسوقين من خلال البريد الإلكتروني: 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
  2. طيلة سنواتٍ، شهِد ووردبريس عدَّة تطويرات إلّا أنّ تصميم صفحة تسجيلِ الدُّخول بقي على حالهِا. صحيحٌ أنّها ذات تصميمٍ بسيطٍ ونظيف وتتوافق مع مقاسات شاشاتٍ مختلفةٍ ولكن عند إنشاء قالبٍ لعميلٍ ما خاصّةً إذا كان هذا العميل عبارةً عن شرِكة فسيكون من الأفضل أن تستطيع تغيير ألوان التصميم في صفحة الدُّخول إضافة إلى تغيير الشِّعارِ أيضًا ليتوافقَ مع قالبِ الموقِع، أليسَ كذلك؟ شيءٌ جيِّدٌ أنّ هذا الأمر يُمكن القيّام به بسهولةٍ. أفضل ما في ووردبريس هو إمكانيِّةُ تخصيص أيِّ شيءٍ به فقط باستخدام دوالِّ الـ 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
  3. سوف نتطرق في هذا الدرس إلى كيفية تنسيق وتخصيص عناصر <"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.
  4. تعرّفنا في الدرس الأول -من سلسلة الدروس هذه المُكوّنة من درسين- على الأنواع الثّلاثة للمحتوى المُخصّص 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.