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

إذا كنت تستخدم ووردبريس لفترة، أو حتى إذا كُنت مستخدمًا جديدًا، فغالبًا ما ستحتاج في وقت ما أن تجري بعض التعديلات في النص البرمجي لموقعك. قد يكون أي شيء، مثل إضافة خاصية أساسية إلى موقعك لا تتطلب إضافة كاملة plugin، أوإنشاء قالب فرعي child theme، وهذا فقط غيض من فيض. لكن توقف ها هنا! هناك بعض القواعد الأساسية التي يجب معرفتها فيما يتعلق بتعديل النص البرمجي في ووردبريس، بالإضافة إلى بعض المناطق التي يجب تفاديها تمامًا. وهذا ما سنتناوله في مقالنا. قاعدة عامة: إياك أن تعدّل في البنية الأساسية لووردبريس (WordPress Core) ربما قد تكون سمعت تلك العبارة الخالدة مرارًا من متمرسي ووردبريس: “لا تعدّل في البنية الأساسية" “Don’t hack core". ما يعنيه هذا هو أنك يجب ألا تلمس الملفات الأساسية، وهي الملفات المسؤولة عن عمل ووردبريس. لم هذا؟ حسنًا، هناك العديد من الأسباب، لكن دعنا نكتف باثنين من أهمها هنا: عدم ضمان استمرارية موقعك مستقبلًا. إذا أجريت تعديلات في بنية ووردبريس، فإنك تخسر القدرة على التحديث مع المحافظة على تعديلاتك. أي ببساطة، عندما يصدر تحديث جديد وتضغط على زر التحديث لينطبق على موقعك (لأنك شخص منظم يحافظ على تحديث موقعه بانتظام)، فإن تعديلاتك سيتم الكتابة فوقها بالتحديث. مما يضطرك لإعادة كتابتها، وهذا مضيعة للوقت في رأيي. توجد بالفعل إضافة متاحة لهذا. عندما تعدل في بنية ووردبريس، فإنك تفعل بالضبط ما تفعله الإضافات: تغيير، أو إضافة إلى الطريقة التي يعمل بها ووردبريس. بالتالي الإضافات هي طريقة أفضل بكثير في تحقيق ما تريد فعله بدلًا من تعديل البنية الأساسية. إذًا الآن تعرف لم لا يجب تعديل البنية الأساسية، دعنا نر ما المتاح تعديله بأمان. بنية ملفات ووردبريس هذه لقطة توضح بنية ملفات موقع ووردبريس نموذجي. سترى أن هناك ثلاث مراحل عليا من المجلدات ومجموعة من الملفات. المجلدات المسماة wp-admin وwp-include محظورة، يجب ألا تلمس شيئًا هناك. أما مجلد wp-content فإنه يحوي القوالب، الإضافات، وأي صورة أو مستند نصي رفعتها على الموقع. ويمكنك أن تجري تعديلات على قالبك الخاص عن طريق ملف functions.php. وبالنسبة لملفات المستوى الأعلى، فالملف الوحيد المسموح بالتعديل فيه هو ملف wp-config.php. سنغوص في بعض الأمثلة لكيفية تعديل كلا الملفين لاحقًا، لكن دعنا نتحدث عن بعض من أفضل الممارسات قبل أن نفعل. أفضل الممارسات لتعديل ملفات ووردبرس يأتي ووردبريس مع محرر قوالب وإضافات كجزء من الخواص الأساسية. يمكنك أن تجده في موقعك من الشريط الجانبي: المظهر > المحرر أو Appearance > Editor ألقِ نظرة عليه إذا أحببت، ثم بعدها انس أمره تمامًا، لأنك لن تستخدم محرر ووردبرس لأي شيء. في الحقيقة، أود أن تحذف هذه الخاصية تمامًا من ووردبرس لسببين: هذا المحرر ليس محررًا نصّيّا برمجيًا كامل الوظائف، ويمكن بسهولة ارتكاب أخطاء تنتج عنها "شاشة الموت البيضاء". حين تضغط على زر الحفظ، ليس هناك زر للرجوع. ليس هناك إمكانية لإعادة المحاولة. معظم محررات النصوص البرمجية الجيدة تُتيح لك إمكانية التّراجع عن التغييرات التي أجريتها في حال لم تعمل كما يجب. إذًا، ما هو البديل؟ حسنًا، إذا أردت استخدام محرر نص برمجي، فستحتاج دراية بـ FTP . FTP هو اختصار لـ File Transfer Protocol بروتوكول نقل الملفات. ولنشرح ذلك بأنه عبارة عن نقل الملفات من جهازك إلى خادم الويب الذي يوجد عليه موقعك. ستحتاج للاتصال بموقعك عن طريق عميل FTP، ثم تحمّل نسخة من الملف الذي تريد تغييره، أجرِ التغييرات ثم ارفعه إلى الخادم، وسيحل محل النسخة القديمة في الخادم. بعض محررات النصوص البرمجية – Coda على سبيل المثال– يسمح لك بتعديل الملفات مباشرة على الخادوم. والبعض الآخر يسمح باستعراض تعديلاتك (عادة لملفات HTML وCSS فقط). إذا كان محرر النص البرمجي الخاص بك يفعل هذا، فمن المستحسن أن تحفظ نسخة من الملف الأصلي باسم جديد (وليكن filename_old.php مثلًا). بهذه الطريقة، إذا ارتكبت أي خطأً لا تستطيع الرجوع فيه، فيمكنك ببساطة حذف الملف المعدّل، وإعادة تسمية النسخة الاحتياطية التي أنشأتها إلى اسمها الأصلي وكل شيء سيكون على ما يرام. حان الوقت لتعديل بعض ملفات ووردبريس سنجري بعض التعديلات البسيطة على ملفين wp-config.php وfunctions.php وهي ملفات غير تابعة للقالب، غالبًا ما ستحتاج إلى تعديلها. تعديل ملف wp-config.php ملف wp-config.php هو واحد من أهم الملفات في موقع ووردبريس الخاص بك. ولا يأتي مع النسخة الأساسية لووردبريس؛ إذ أنك تنصب ملفًا يُدعى wp-config-sample.php. ويُنشأ ملف wp-config.php أثناء عملية التنصيب (تحديدًا عند إدخال معلومات قاعدة البيانات الخاصة بموقعك)، أو يمكنك ببساطة إعادة تسمية ملف wp-config-sample إلى wp-config وإضافة معلومات قاعدة البيانات إلى الملف. ستجد كلّا الملفين في الجذر الأساسي لمسار الويب. إذا أتممت عملية التنصيب (لقطة لها بالأسفل)، بما في ذلك إعدادات قاعدة البيانات الخاصة بالموقع، فإنك بالفعل قد أنشأت ملف wp-config.php. الآن، دعنا نفتحه في محرر النص البرمجي المفضل لديك لنجري بعض التغييرات. مثال نص برمجي مفيد: تعطيل التحديثات التلقائية كانت التحديثات التلقائية جزءًا من ووردبريس منذ الإصدارة رقم 3.7. ولا يفضل الجميع هذه الخاصية، إذ يودون لو أنهم يغلقونها. كل ما تحتاجه لفعل هذا هو إضافة ذلك السطر إلى ملف wp-config.php الخاص بموقعك. /* تعطيل تحديثات ووردبرس الة */ define( 'WP_AUTO_UPDATE_CORE', false ); عندما أضيف نصًا برمجيًا إلى ملف wp-config، فإنني أتأكد دومًا من وضعه في مكان يسهل الرجوع إليه عند الحاجة. انظر إلى السطر 85 في ملف wp-config.php (من السهل الوصول إليه باستخدام محرر النص البرمجي)، ستجد هذه الجملة: /* That's all, stop editing! Happy blogging. */ بمعنى: /* هذا هو المطلوب! توقف عن التعديل. نتمنى لك التوفيق في موقعك! */ إنني أضع جميع تعديلاتي قبل ذلك السطر مباشرة. وبهذا أستطيع العثور على جميع التعديلات التي أجريتها في مكان ثابت مع كل موقع أعمل عليه. فقط تأكد من حفظ نسخة احتياطية من الملف قبل أية تعديلات. تعديل ملف functions.php ملف functions.php يسمح لك بتعديل وظائف ووردبريس. إذ يعمل هذا الملف كإضافة، فينشء خصائص ومزايا جديدة في موقع ووردبريس الخاص بك. وعادة ما تجد الملف موجودًا في مجلد القالب الخاص بك في المسار /wp-content/themes/yourthemename/ (حيث yourthemename هو اسم القالب). إذا لم تمتلك واحدًا، يمكنك بسهولة إنشاءه؛ فقط تأكد من أنك تضعه في القالب المٌفعّل. إذا بدأت بملف جديد، فستحتاج لبداية نص PHP مستخدمًا php?>. وعلى عكس ملف php التقليدي، فإنك لن تحتاج لإغلاق النص البرمجي (في الواقع، تقل احتمالية الأخطاء إذا تركته مفتوحًا). وستجد بالأسفل مثالين للخصائص التي يمكنك إضافتها إلى ملف functions.php خاصتك ملحقة بالنص البرمجي، لا تنس أنه من المستحب إضافة التعديلات الكبيرة عن طريق قالب فرعي. مثال نص برمجي مفيد: إضافة دعم المُصغّرات thumbnails إذا كان قالبك لا يدعم المُصغّرات، فيمكنك إضافة النص البرمجي التالي إلى ملف functions.php الخاص بك: add_theme_support( 'post-thumbnails'); لاستخدامه في قالبك، فقط أضف هذا السطر من الكود إلى الحلقة loop حيث تريد للمُصغرات أن تظهر: <?php the_post_thumbnail(); ?> مثال نص برمجي مفيد: تخصيص طول الاقتباسات الطول الافتراضي للاقتباسات في ووردبريس هو 55 كلمة، ولكن يمكنك تعيين طول الاقتباس حسبما تريد عن طريق إضافة ذلك النص البرمجي إلى ملف functions.php الخاص بك: //وظيفة تخصيص طول المقتبس custom_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'custom_excerpt_length'); فقط كل ما تحتاجه تغيير رقم "20” إلى عدد الكلمات التي تريدها. الخاتمة والآن قد أصبحت تعرف القواعد الأساسية بخصوص تعديل ملفات البنية الأساسية لووردبريس. أتمنى أن تكون قد استمتعت بالمقال. وبالطبع نود معرفة آرائكم ونسر بالإجابة على ما يلتبس عليكم في التعليقات. مُترجم بتصرف من مقالة How to Edit Your WordPress Website Without Hacking Core Files لصاحبها Tom Ewer.

قالب Twenty Seventeen هو أكثر قالب افتراضي تعددًا في الاستخدامات شهدته ووردبريس. لكن الخيارات التي يُتيحها هذا القالب ليس شاملة، وهنالك بعض الأمور التي قد نرغب بفعلها والتي لا يسمح القالب بها. سأريك في هذا الدرس خمسة تعديلات على قالب Twenty Seventeen لإضفاء طابعك الشخصي عليه، وسنبدأ بالتخصيصات الأساسية والبسيطة ثم سننتقل إلى الأصعب والأكثر تعقيدًا. لكن قبل أن نبدأ بشرح الشيفرات البرمجية، فلننظر أولًا إلى قائمة التخصيصات التي سنغطيها في هذا الدرس. وإذا أرعى أحدها انتباهك فانتقل واقرأ القسم الموافق له: التعديل الأول: «كيفية إنشاء قائمة تحتوي روابط للمواقع الاجتماعية». التعديل الثاني: «كيفية تغيير عبارة “Proudly powered by WordPress” (أو مثيلتها بالعربية: “مدعوم بواسطة WordPress”)». التعديل الثالث: «إنشاء قائمة تنقّل بين أقسام الصفحة الرئيسية». التعديل الرابع: «إضافة شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية». التعديل الخامس: «كيفية إضافة صورة بارزة كبيرة جدًا لكل صفحة أو منشور». بعد انتهائنا من إجراء التعديلات السابقة، فسنحوِّل قالب Twenty Seventeen إلى موقعٍ جميلٍ وعصريٍ مناسب تمامًا للشركات أو للمدونات. ألا تصدقني؟ ألقِ نظرةً إلى الصورة الآتية، فهذه هي النتيجة المرجوة إذا اتبعت التعديلات التي سنوردها جميعها (صورة متحركة): التعديل الأول: إنشاء قائمة تحتوي روابط للمواقع الاجتماعية حسنًا، هذا ليس تعديلًا وإنما ملاحظة أو تنويه إلى هذه الميزة؛ لكنه يؤدي إلى تخصيص قالب Twenty Seventeen ليلائم موقعك، لذا سنشرحه هنا. يتضمن قالب Twenty Seventeen قائمةً تحتوي روابط لمواقع التواصل الاجتماعي ذات مظهرٍ جذاب في تذييل الصفحة. المشكلة هي أنَّ العديد من المستخدمين قد اشتكوا من عدم قدرتهم على اكتشاف طريقة إضافة روابط الشبكات الاجتماعية إلى هذه القائمة، لكن لا تقلق فالأمر بسيطٌ جدًا بعد أن تتعلم طريقة فعله. كل ما عليك فعله هو إضافة قائمة فيها روابط إلى شبكات التواصل الاجتماعي وإسنادها إلى موضع «Social Links Menu» (أو «قائمة الروابط الاجتماعية» باللغة العربية). هذه هي الخطوات بالتفصيل: ابدأ بفتح المخصِّص من «Appearance > Customize» (مظهر > تخصيص) اضغط على خيار «Menus» (قوائم) ثم اضغط على زر «Add a Menu» (أضف قائمة) سمِّ القائمة باسمٍ واضحٍ دالٍ على وظيفتها مثل «Social Links Menu» ثم اضغط على زر «Create Menu» (إنشاء قائمة) فعِّل مربع الاختيار المجاور لعبارة «Social Links Menu» ( قائمة الروابط الاجتماعية) في قسم «Display Location» (عرض الموقع) بعد أن تنتهي من ضبط القائمة، فيجب أن تبدو كما في الصورة الآتية: آخر خطوة هي الضغط على زر «Save & Publish» (حفظ ونشر) في المُخصِّص لحفظ القائمة الجديدة. يجب أن تظهر قائمة الروابط الاجتماعية الآن في تذييل الصفحة. أنا متأكد أنَّ ما سبق ليس صعبًا أبدًا، لذا لننتقل إلى أمرٍ أكثر صعوبةً! التعديل الثاني: تغيير عبارة «Proudly powered by WordPress» هنالك سببان يدفعانك إلى تغيير النص الموجود في تذييل الصفحة الذي يقول «Proudly powered by WordPress» أو «مدعوم بواسطة WordPress»: ربما تريد الإضافة إلى الجملة السابقة لتقول «مدعوم بواسطة WordPress، ومُصمَّم من شركة WebPress Designs، ومُستضاف من شركة LAMPress!». ربما تريد وضع عبارة أخرى لتصرِّح عن حقوق النشر الخاصة بموقعك مثل «جميع الحقوق محفوظة 2016، شركة MyBiz». وبغض النظر عن السبب الذي دفعك لتغيير هذه العبارة، فسأخبرك طريقة تعديلها في هذا القسم. أوّل شيءٍ عليك فعله هو إنشاء وتفعيل قالب ابن (Child theme) (ملاحظة: إذا أردت حلًا سهلًا جدًا، فكل ما عليك فعله هو تنزيل القالب الابن الذي سنعطيك إياه في نهاية هذا الدرس). بعد إنشائك وتفعيلك للقالب الابن، فانسخ ملف footer.php من قالب Twenty Seventeen إلى مجلد القالب الابن، ثم افتح ملف footer.php المنسوخ وابحث عن السطر get_template_part( 'template-parts/footer/site', 'info' );‎. لديك خياران الآن: إما أن تجعل السطر السابق تعليقًا (بإضافة // قبل الشيفرة) مما يؤدي إلى حذف تلك العبارة فقط، وإما أن تجعله تعليقًا ثم تضيف النص الخاص بك. هذه هي الشيفرة التي استخدمتها لإنشاء التذييل المعروض في الصورة السابقة: التعديل الثالث: إنشاء قائمة تنقّل بين أقسام الصفحة الرئيسية في أحد الدروس السابقة «تخصيص قالب Twenty Seventeen في ووردبريس ليناسب الشركات» أضفتُ سكربت jQuery بسيط لبناء قائمة تنقل ديناميكية ضمن الصفحة الرئيسية والتي يوجد فيها روابط لمختلف أقسام الصفحة الرئيسية. ولقد أدى السكربت السابق عمله كما ينبغي، لكنه كان يحتاج إلى بعض التحسينات. سأريك في هذا الدرس كيفية تحسينه؛ فبالإضافة إلى إنشاء قائمة تنقل لمختلف أقسام الصفحة الرئيسية، فسنحاول أيضًا حلّ مشكلة تأثير المرور فوق عناصر القائمة، وإضافة تأثير التمرير السلس (smooth scrolling) لتحسين تجربة المستخدم. لنبدأ أولًا بشيفرة jQuery التي عليك إضافتها إلى موقعك: /* One page nav code */ jQuery( document ).ready(function(){ /* Add padding and id's to each front page section */ jQuery( "h2.entry-title" ).each( function() { var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, "-"); jQuery( this ).wrapInner(function() { return "<span style='padding-top:96px;' id='" + panelId + "'></span>"; }) }) /* Remove navigation link highlighting */ jQuery('#top-menu li').removeClass('current-menu-item current_page_item '); /* Add highlighting on click */ jQuery('#top-menu li a').on('click', function(event) { jQuery(this).parent().parent().find('li').removeClass('current-menu-item'); jQuery(this).parent().addClass('current-menu-item'); }); /* Check current URL and highlight nav for current page */ jQuery('#top-menu li a').each( function() { var pageUrl = jQuery( location ).attr( 'href' ); var navUrl = jQuery( this ).attr( 'href' ); if ( navUrl == pageUrl ) { jQuery( this ).parent().addClass('current-menu-item'); } }) }) يمكنك إضافة هذه الشيفرة إلى ملف JavaScript الذي يُحمِّله القالب الابن (وهذا ما فعلتُ) أو يمكنك استخدام إضافة تسمح لك بإضافة شيفرات JavaScript إلى موقعك (وهذا ما نصحتك بفعله في درسي السابق)؛ لكن احرص على تحميل الشيفرة بعد انتهاء تحميل مكتبة jQuery. لم يتغيّر أوّل جزء من الشيفرة وبقي كما هو مذكور في الدرس السابق، أما بقية الشيفرة فتحل مشكلة تأثير المرور فوق عناصر القائمة. ألقِ نظرةً على التعليقات الموجودة في الشيفرة السابقة لتأخذ فكرةً عمّا يجري. إضافةً إلى ما سبق، سنجعل حركة الانتقال إلى كل قسم من أقسام الصفحة أكثر سلاسةً بتثبيت وتفعيل إضافة مجانية باسم jQuery Smooth Scroll. طبعًا ما يزال عليك بناء قائمة التنقل بإضافة روابط مخصصة إلى كل قسم من أقسام الصفحة عبر استعمال اسم الصفحة المعروضة في ذاك القسم. فمثلًا، لإضافة رابط إلى قسم «About» فعليك إنشاء رابط مخصص وجعله يشير إلى ‎#about. لتفاصيل كاملة رجاءً ارجع إلى درس «تخصيص قالب Twenty Seventeen في ووردبريس ليناسب الشركات». أعلم أنَّ إنشاء هذه القائمة يتطلب وقتًا، لكن هذا الجهد سيؤتي أكله. لم تقتنع بكلامي؟ انظر إلى النتيجة النهائية (صورة متحركة): التعديل الرابع: إضافة شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية يستخدم قالب Twenty Seventeen الفراغات البيضاء استعمالًا كثيرًا، لكنني أعلم بما تفكر به، إذ تظن أنَّ هنالك الكثير من المساحات البيضاء، ألا هل أدلك على طريقةٍ للاستفادة منها؟ تستطيع إضافة ودجات مختلفة للشريط الجانبي لكل قسمٍ من أقسام الصفحة الرئيسية، ويمكنك أيضًا إضافة شريط جانبي إلى الصفحات. لنقل -على سبيل المثال- أنَّك تريد إضافة حقل للبحث، وقائمةً منسدلةً فيها تصنيفات موقعك، وبضعة ودجات إلى قسم المدونة في صفحتك الرئيسية. من المؤكد أنَّ القائمة ستبدو جميلة إذا استطعنا جعلها شبيهةً بتلك الموجودة في هذه الصورة: وبالطبع لا ترغب بإظهار نفس الودجات في قسم «About»؛ وإنما تريد إضافة شيءٍ آخر في ذاك القسم، ومن المحبَّذ إظهار شريط جانبي في قسم About في الصفحة الرئيسية وإظهار شريط جانبي آخر في صفحة ‎/about نفسها! أود أن أبشِّرَك بإمكانية فعل ذلك، حيث تستطيع إضافة شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية ثم إعادة استخدام تلك الأشرطة الجانبية –أو إنشاء أشرطة جانبية مختلفة تمامًا– في صفحات موقعك. لكن هذا التعديل ليس سهلًا، حيث سنحتاج إلى تعديل القالب الابن وسيلزمنا استخدام إضافة. افتراضيًا، لا يُضيف قالب Twenty Seventeen أيّة أشرطة جانبية إلى أقسام الصفحة الرئيسية أو إلى أيّة صفحات. وإنما سيعرض شريطًا جانبيًا في المنشورات فقط، لكن الصفحات ستبدو وكأنها خاويةٌ لكثرة المسافات البيضاء. لكي نغيّر ذلك ولإضافة أشرطة جانبية إلى الصفحات، فعليك القيام بعدِّة أمور: نسخ ملفات القالب التي يستعملها Twenty Seventeen لعرض الصفحات وأقسام الصفحة الرئيسية. إضافة شيفرة الشريط الجانبي إلى قالب الصفحات وإلى كل قسم من أقسامٍ الصفحة الرئيسية عبر تعديل ملفات القالب. تثبيت إضافة Custom Sidebars. إنشاء شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية، ولكل صفحة نريد عرض الشريط الجانبي فيها. إضافة شريط جانبي لكل صفحة تريد عرضه فيها. دعني أريك كل خطوة على حدة. - الخطوة الأولى: نسخ ملفات content-page.php و content-front-page.php و content-front-page-panels.php إلى مجلد القالب الابن. ستجد الملفات السابقة في مجلد ‎\wp-content\themes\twentyseventeen\template-parts\page وعليك نسخها جميعها. ستحتاج إلى إعادة إنشاء نفس بنية المجلدات السابقة في مجلد القالب الابن بإنشاء مجلد جديد باسم template-parts ثم إنشاء مجلد جديد آخر داخله باسم page. ثم لصق الملفات الثلاثة السابقة في مجلد page. بعد انتهاء العملية السابقة، فيجب أن تبدو بنية مجلدات القالب الابن لديك كما يلي: الخطوة الثانية: إضافة شيفرة الشريط الجانبي إلى كل ملف من الملفات السابقة. افتح بدايةً ملف content-page.php وأضف ‎<?php get_sidebar(); ?>‎ قبل وسم إغلاق العنصر header مباشرةً كما يلي: ثانيًا، افتح الملفين الآخرين (content-front-page.php و content-front-page-panels.php) وأضف الشيفرة الآتية قبل وسم إغلاق العنصر header مباشرةً في كلاهما: <hr> <div class="front-page-sidebar"> <aside id="secondary" class="widget-area" role="complementary"><?php $title = get_the_title(); dynamic_sidebar( $title ); ?></aside> </div> بعد إضافة الشيفرة السابقة، فيجب أن يبدو كل من الملفين content-front-page.php و content-front-page-panels.php كما يلي (بعد إضافة الشيفرة الضرورية): الخطوة الثالثة: تثبيت إضافة Custom Sidebars إضافة Custom Sidebars المجانية متاحةٌ في موقع WordPress.org، لذا يمكنك البحث عن الكلمة المفتاحية «Custom Sidebars» في صفحة «Plugins > Add New» (إضافات > أضف جديد). الخطوة الرابعة: إنشاء شريط جانبي مخصص لكل قسم من أقسام الصفحة الرئيسية. اذهب إلى «Appearance > Widgets» (مظهر > ودجات) لإنشاء شريط جانبي جديد لكل قسم من أقسام الصفحة الرئيسية. انتبه الآن جيدًا لما سنفعله، لأنَّ من المهم جدًا أن تقوم بهذه العملية على أتم وجه لكي تُعرَض صفحتك الرئيسية كما يجب. اتبع الخطوات الآتية لإنشاء الأشرطة الجانبية: اضغط على زر «Create a new sidebar» (للأسف، لا توفر إضافة Custom Sidebars ترجمةً عربيةً لها)، وسمِّ كل شريط جانبي بنفس اسم الصفحة تمامًا؛ فمثلًا، لو كان أحد أقسام الصفحة الرئيسية يَعرِض صفحةً عنوانها «About» فعليك حينئذٍ أن تُنشِئ شريطًا جانبيًا بنفس الاسم: «About». الشيفرة التي أضفناها في الخطوة الثانية إلى قوالب الصفحة الرئيسية ستبحث عن مطابقة بين اسم القسم وبين اسم الشريط الجانبي لكي تعلم ما هو الشريط الجانبي الذي يجب عرضه. اضغط على «Advanced – Edit custom wrapper code» وأضف الشيفرة الآتية: في الحقل الأول «Before Title» أضف <h2 class="widget-title"‎> في الحقل الثاني «After Title» أضف <‎/h2> في الحقل الثالث «Before Widget» أضف <section id="%1$s" class="widget %2$s"‎> في الحقل الرابع «After Widget» أضف <‎/section> هذه الشيفرة تماثل الشيفرة التي يضيفها قالب Twenty Seventeen قبل وبعد كل ودجت، وقبل وبعد كل عنوان للودجت. وبتغليف محتوى الشريط المخصص بهذه الشيفرة فأنت تضمن أنَّ التنسيق الافتراضي لقالب Twenty Seventeen سيُطبَّق على محتوى الشريط الجانبي المخصص لأقسام الصفحة الرئيسية. 3. أصبحت جاهزًا الآن لإضافة محتوى إلى الأشرطة الجانبية، لذا اختر ما تشاء من الودجات المتاحة وابنِ الأشرطة الجانبية التي تريدها لعرضها لكل قسم. بعد أن تنتهي، فيجب أن تبدو قائمة الأشرطة الجانبية كالآتية، والتي يُطابِق اسمها اسم القسم الذي ستُعرَض بجواره: الخطوة الخامسة: إضافة شريط جانبي لكل الصفحات التي تريد عرض شريط جانبي فيها. اذهب الآن إلى أيّة صفحات تريد عرض شريط جانبي فيها، وافتح المحرر، ومرِّر إلى الأسفل لكي ترى مربعًا بعنوان «Sidebars» ثم اختر الشريط الجانبي الذي تريد عرضه من القائمة المنسدلة. مرِّر إلى الأعلى واضغط على زر «Update» (تحديث) ثم اعرض الصفحة، وستلاحظ أنَّ الشريط الجانبي معروضٌ تحت عنوان الصفحة: التعديل الخامس: إضافة صورة بارزة كبيرة جدًا لكل صفحة تعجبني طريقة عرض الترويسة التي تعرض فيها صورة أو مقطع فيديو في الصفحة الرئيسية لقالب Twenty Seventeen؛ لكنني لا أحب طريقة عرض الصور البارزة حيث تظهر كغيرها من الصور؛ لذا أود عرض الصورة البارزة لكل صفحة أو منشور بنفس أبعاد الصور الموجودة في الصفحة الرئيسية. هذا أكثر التعديلات تخصيصًا للقالب، ولن أكذب عليك وأقول أنَّ الشيفرة التي ستراها بعد قليل هي شيفرةٌ بسيطةٌ وجميلة! لكنها تؤدي عملها دون مشاكل. أوّل شيء عليك فعله هو نسخ ملف header.php من قالب Twenty Seventeen إلى القالب الابن؛ ثم عليك وضع الشيفرة الآتية بدلًا من كامل عنصر header: <header id="masthead" class="site-header" role="banner"> <?php if ( has_post_thumbnail() && ( is_single() || ( is_home() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) ) : ?> <span class="has-header-image twentyseventeen-front-page home"> <div id="page-header" class="custom-header"> <div id="custom-header-media" class="custom-header-media" > <div id="wp-custom-header" class="wp-custom-header"> <?php if ( is_home() && ! twentyseventeen_is_frontpage() ) { $page_for_posts = get_option( 'page_for_posts' ); echo get_the_post_thumbnail( $page_for_posts ); } else { the_post_thumbnail( 'twentyseventeen-featured-image' ); } ?> </div> </div> <div class="site-branding"> <div class="wrap"> <div class="site-branding-text"> <h1 class="site-title"> <?php if ( is_home() && ! twentyseventeen_is_frontpage() ) { $page_for_posts = get_option( 'page_for_posts' ); echo get_the_title( $page_for_posts ); } else { the_title();; } ?> </h1> </div> </div> </div> <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a> </div> </span> <?php else : get_template_part( 'template-parts/header/header', 'image' ); endif;?> <?php if ( has_nav_menu( 'top' ) ) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?> </div><!-- .wrap --> </div><!-- .navigation-top --> <?php endif; ?> </header> ثم علينا إضافة بعض شيفرات CSS إلى القالب الابن لكي تُنسَّق الصور البارزة مثل الصور الموجودة في الصفحة الرئيسية: /* Force sticky navigation into position */ #page-header { margin-bottom: 0 !important; } /* Force header image to full height */ #custom-header-media { height: 100vh; max-height: 100%; overflow: hidden; position: relative; } انسخ الشيفرة السابقة وألصقها في ملف الأنماط style.css في القالب الابن. الشيفرة التي وضعناها في ملف header.php والتنسيق الذي أضفناه إلى ملف style.css سيُجبِر الصورة لأن تكون بكامل الارتفاع؛ لكن بسبب الطريقة الديناميكية التي تُضاف فيها الفئات (classes) وتُحذَف؛ فإنَّ شريط التنقل الثابت (sticky) لن يعمل مباشرةً؛ وإنما علينا إضافة شيفرة jQuery إلى قالبنا لفعل ذلك. يمكنك إضافة الشيفرة الآتية إلى ملف JavaScript ضمن القالب الابن أو إلى إضافة، لكن احرص على أن يُحمَّل الملف بعد تحميل مكتبة jQuery. // Sticky nav on pages and posts var body = jQuery( 'body' ); var navigation = body.find( '.navigation-top' ); var customHeader = body.find( '.custom-header' ); var navigationOuterHeight = navigation.outerHeight(); if ( body.hasClass( 'has-header-image' ) ) { var headerOffset = customHeader.innerHeight() - navigationOuterHeight; } jQuery( window ).on( 'scroll', function() { if ( jQuery( window ).scrollTop() >= headerOffset ) { navigation.addClass( 'site-navigation-fixed' ); } else { navigation.removeClass( 'site-navigation-fixed' ); } }); رائع! عندما تضيف الآن صورةً بارزةً إلى صفحةٍ أو منشور، فستُعرَض بكامل ارتفاع الشاشة، كما هي الترويسات الموجودة في الصفحة الرئيسية. جميع التعديلات السابقة في قالب ابن وحيد لقد أجرينا الكثير من التعديلات في هذا الدرس وقد يصعب على البعض تطبيقها، ولتسهيل الأمر عليك، فقد أجريتُ هذه التعديلات على قالب ابن ورفعته على GitHub؛ لذا إذا لم تجد نفسك متفرغًا للقيام بكل التعديلات السابقة ولا ترغب بإنشاء قالب ابن يدويًا لكن التعديلات أعجبتك وتريد تطبيقها على موقعك، فكل ما عليك فعله هو تنزيل الملف المضغوط ثم رفعه إلى موقعك وتفعيل القالب. إضافةً إلى ما سبق، عليك تثبيت إضافة Custom Sidebars وإضافة jQuery Smooth Scroll لكي تتمكن من الوصول إلى جميع التخصيصات التي أجريناها في هذا الدرس. بعد ذلك، عليك إنشاء أقسام الصفحة الرئيسية وقائمة مخصصة للتنقل فيها والمشروحة بالتفصيل في درسنا السابق «تخصيص قالب Twenty Seventeen في ووردبريس ليناسب الشركات» ثم خصِّص قائمة روابط مواقع التواصل الاجتماعي، واكتب النص الذي تريده في التذييل، وأضف الأشرطة الجانبية لأقسام الصفحة الرئيسية، وستظهر عندك النتيجة النهائية نفسها. ترجمة -وبتصرّف- للمقال ‎5 Excellent Ways to Hack the Twenty Seventeen WordPress Theme لصاحبه Jon Penland.

بعد أن تطرّقنا إلى أساسيات تطوير إضافات ووردبريس حان الوقت لنقوم بإنشاء إضافة لتطبيق بعض ما تعلمناه. وهذا ما سنقوم به في هذا الدرس والدرس الذي يليه من خلال إنشاء إضافة تقوم بإضافة مربع جانبي لعرض المقالات الأكثر مشاهدة في موقع ووردبريس مع إمكانية عرض عدد المشاهدات في كل مقالة. التخطيط للإضافةلنبدأ بتحديد الأمور التي ستقوم بها الإضافة: إحصاء عدد المشاهدات لكل مقال.توفير شيفرة مختصرة Shortcode لعرض عدد مشاهدات المقال في أي مكان.توفير ودجت Widget لعرض المقالات الأكثر مشاهدة.وذلك من خلال: الاستفادة من البيانات الإضافية للمقال Post Meta لإضافة حقل بيانات جديد للمقالات يستخدم في حفظ واسترجاع عدد المشاهدات.الاستفادة من Shortcode API التي يوفرها ووردبريس لإنشاء الشيفرة المختصرة.الاستفادة من Widget API التي يوفرها ووردبريس لإنشاء الودجت واستخدام صنف WP_Query للحصول على المقالات مرتبة على حسب عدد المشاهدات.برمجة الإضافةدعنا في البداية نقوم بالتخطيط لجميع الملفات والمجلدات التي سنقوم بإنشائها لبرمجة الإضافة. تركيبة الملفات والمجلداتلنبدأ أولا بإنشاء مجلد للإضافة يحمل الإسم: ha-views-widget وأظن أنه اختصار جيد لاسم الإضافة واستخدامنا في البداية الحرفين ha كاختصار ل Hsoub Academy :). وبالطبع سنضع هذا المجلد في مجلد إضافات ووردبريس (ونحن نفترض أنك قمت بتنصيب ووردبريس مسبقا) والموجود في المسار wp-content/plugins. بعد ذلك سنقوم بإنشاء ملف php بنفس اسم المجلد وهو ha-views-widget.php وهذا الملف هو الملف الأساسي للإضافة وسيحتوي على الترويسة التي بها معلومات الإضافة والتي تعرفنا عليه في الدرس الأول من هذه السلسلة وبالتالي سيحتوي على هذه الترويسة: /** * Plugin Name: Hsoub Views Widget * Plugin URI: http://academy.hsoub.com/ * Description: إضافة صغيرة تقوم بإضافة مربع جانبي لعرض المقالات الأكثر مشاهدة في موقع ووردبريس مع إمكانية عرض عدد المشاهدات في كل مقالة. * Version: 1.4.0 * Author: Adil Elsaeed * Author URI: http://adilelsaeed.com * Text Domain: ha-widgets * Domain Path: /lang/ * License: GPL2 */بالطبع يمكننا أن نكتب جميع شيفرات php الخاصة بالإضافة في هذا المجلد لكن هذه ليست فكرة جيدة خصوصا إذا أردنا إنشاء إضافة سهلة التطوير والمراجعة، لذلك سنخصص ملفًا لإنشاء ومتابعة عدد المشاهدات وليكن باسم views.php وملف آخر لإنشاء الودجت وليكن باسم widget.php (لاحظ أنه داخل مجلد الإضافة يمكنك تسمية الملفات بأي اسم بدون خوف من التعارض مع ملفات ووردبريس الأخرى)، كما أننا سنحتاج لملف آخر لإنشاء الشيفرة المختصرة وليكن باسم shortcode.php ويمكننا أن نضع هذه الملفات الثلاثة داخل مجلد باسم includes للمحافظة على المجلد الرئيسي للإضافة مرتبًا. وبالطبع ما دمنا سنكتب بعض شيفرات html فإننا سنحتاج لتنسيقها من خلال CSS وهذا يعني أننا نحتاج لملف لوضع شيفرات CSS هذه، لذلك سنقوم بإنشاء مجلد أخر باسم css وبداخله ملف widget.css. هذه كل الملفات والمجلدات التي سنحتاج إليها في هذه النسخة الأولى من الإضافة. الملف الأساسي للإضافةفي الملف الأساسي للإضافة سنقوم أولا بتعريف بعض الثوابت التي سنحتاج إليها لاحقا، حيث سنحتفظ بكل من مسار الإضافة ورابطها URL وكذلك النسخة الحالية للإضافة كثوابت بالصورة التالية: if ( !defined( 'SDG_PLUGIN_DIR' ) ) { define( 'HA_VIEWS_DIR', plugin_dir_path( __FILE__ ) ); } if ( !defined( 'HA_VIEWS_URL' ) ) { define( 'SDG_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); } if ( !defined( 'HA_VIEWS_VER' ) ) { define( 'SDG_PLUGIN_VER', '1.1.0' ); }لاحظ أننا استخدمنا الدالتين plugin_dir_path و plugin_dir_url اللتين يوفرهما ووردبريس حيث تُرجعان مسار الإضافة ورابطها على التوالي. ثانيا سنقوم بتضمين ملفات php التي أنشأناها سابقا حتى ينفذ ووردبريس الشفرات الموجودة فيها ويتم تضمينها من خلال require_once كالآتي: // الملف المسؤول عن عدد المشاهدات require_once HA_VIEWS_DIR . 'includes/views.php'; // الملف المسؤول عن الويدجت require_once HA_VIEWS_DIR . 'includes/widget.php'; // الملف المسؤول عن الكود المختصر require_once HA_VIEWS_DIR . 'includes/shortcode.php';ثالثا وأخيرًا سنقوم بصف ملف الCSS الخاص بتنسيق الويدجت من خلال استخدام الحدث wp_enqueue_scripts ويمكنك معرفة المزيد حول التعامل مع ملفات CSS في ووردبريس بالإطلاع على مقال صف و تسجيل ملفات CSS في ووردبريس. وهذه هي الطريقة التي سنصف بها ملف widget.css: add_action('wp_enqueue_scripts', 'ha_scripts'); function ha_scripts(){ wp_enqueue_script( 'sdg-admin', HA_VIEWS_URL . 'css/widget.css', array(), HA_VIEWS_VER); }حفظ وتحديث عدد المشاهداتلننتقل الآن إلى ملف views.php حيث سنقوم بإضافة عداد المشاهدات لكل مقال من خلال بيانات الميتا الخاصة بالمقال post meta حيث سنقوم بإنشاء الدالة ha_set_post_views والتي تقوم بتحديث عدد المشاهدات للمقال عند زيارته ولنضمن تنفيذها عند كل مقال سنقوم بإضافتها للحدث wp_head والذي يتم تنفيذه في ترويسة Header كل صفحات الموقع. ويتم إضافة الدالة إلى هذا الحدث بالصورة التالية: add_action('wp_head', 'ha_set_post_views');أما بالنسبة للدالة نفسها فهذه هي صورتها: function ha_set_post_views() { // إذا لم يكن هذا مقال مفرد (صفحة أو مقال) لا تنفذ أي شيء if(!is_singular()){ return; } // الوصول إلى بيانات المقال الحالي global $post; $post_id = $post->ID; $count_key = 'ha_post_views_count'; // استرجاع العدد الحالي للمشاهدات $count = get_post_meta($post_id, $count_key, true); if($count==''){ // هذا يعني أنه لم يتم إنشاء الميتا الخاص بحفظ عدد المشاهدات حتى الان $count = 0; delete_post_meta($post_id, $count_key); add_post_meta($post_id, $count_key, '0'); // إنشاء الميتا الخاص بحفظ عدد المشاهدات }else{ // زيادة عدد المشاهدات بمقدار مشاهدة واحدة $count++; // حفظ الميتا التي حفظنا فيه عدد المشاهدات update_post_meta($post_id, $count_key, $count); } }لعل التعليقات تشرح الدالة بصورة واضحة لكن دعنا نوضح الأمور أكثر، قمنا في هذه الدالة أولا باستخدام الدالة is_singular والتي تتحقق إن كان المعروض حاليا صفحة مقال مفرد (مقال، صفحة، مقال مخصص) أم لا (صفحة تصنيف مثلا أو أرشيف أو غيرهما) وفي حالة لم يكن المقال مفردًا يتوقف تنفيذ الدالة لأن مهمتها تحديث عدد المشاهدات للمقالات والصفحات والمقالات المخصصة فقط وليس بقية صفحات الموقع (الأرشيفات أو التصنيفات أو غيرها). ثانيا قمنا باستخدام المتغير العام (global) الذي يوفره ووردبريس وهو post$ والذي يحفظ فيه بيانات المقال الحالي (الذي يتم عرضه) حتى نحصل على معرف المقال الحالي من أجل استخدامه في تحديث عدد مشاهداته. ثالثا قمنا باستخدام الدوال update_post_meta، get_post_meta، add_post_meta و delete_post_meta والتي تمكننا من إضافة ميتا مخصصة للمقال واسترجاعها وحذفها وتحديثها على التوالي. وكما تلاحظ قمنا بالتأكد من أن عدد المشاهدات لا يساوي قيمة خالية (غير موجود) وفي حالة أنه غير موجود يتم إنشاؤه وفي حالة أنه موجود يتم زيادته بمقدار واحد وهذه كل مهمة الدالة. استرجاع عدد المشاهداتفي هذا الملف أيضا (أعني ملف view.php) سنقوم بإنشاء دالة أخرى تقوم باسترجاع عدد المشاهدات للمقال الحالي حتى نستخدمها لاحقا في الشيفرة المختصرة shortcode، وهذه هي الدالة: function ha_get_post_views(){ // الوصول إلى بيانات المقال الحالي global $post; $post_id = $post->ID; $count_key = 'ha_post_views_count'; $count = get_post_meta($post_id, $count_key, true); if($count==''){ delete_post_meta($post_id, $count_key); add_post_meta($post_id, $count_key, '0'); return "0 مشاهدة"; } return $count.' مشاهدة'; }ليس هنالك الكثير مما يحتاج إلى شرح فقط قمنا باستخدام الدالة get_post_meta لاسترجاع قيمة الميتا ha_post_views_count وإعادتها في حالة كانت القيمة غير خالية وإعادة صفر في حالة كانت القيمة خالية وفي هذه الحالة تقوم أيضا بإضافة الميتا. برمجة الشيفرة المختصرة shortcodeفي هذه الجزئية سنعتمد على الواجهة البرمجية التي يوفرها ووردبريس حيث سنستخدم الدالة add_shortcode والتي لها الصورة التالية: <?php add_shortcode( $tag , $func ); ?>حيث: tag$ هو اسم الشيفرة المختصرة التي سيستخدمها المستخدم في حالتنا هذه سنسميها ha_views وسيقوم المستخدم بإستدعائها بالصورة التالية [ha_views] في المقال أو الصفحة. func$ هي الدالة المسؤولة عن إرجاع محتويات الشيفرة المختصرة أي ما تقوم به الشيفرة المختصرة وفي حالتنا هذه الدالة عبارة عن دالة ترجع عدد المشاهدات للمقال الحالي وهذه هي الشيفرة النهائية في ملف shortcode.php function ha_views_shortcode( $atts ){ return ha_get_post_views(); } add_shortcode( 'ha_views', 'ha_views_shortcode' );لاحظ أن الدالة ha_views_shortcode تقوم فقط بإرجاع القيمة المرجعة من الدالة ha_get_post_views والتي عرفناها مسبقا في ملف views.php والتي بدورها ترجع عدد المشاهدات للمقال الحالي. ولن نتطرق إلى شرح المزيد من التفاصيل حول الدالة add_shortcode تجنبا للإطالة وربما نخصص لها مقالا مفردا بعد نهاية هذه السلسلة إن شاء الله. سنكتفي بهذا القدر في هذا الدرس وفي الدرس الأخير من هذه السلسة سنكمل –إن شاء الله- برمجة الإضافة (حيث تبقى فقط برمجة الويدجت الذي يعرض أكثر المقالات مشاهدة)، كما سنلقي بعض الضوء على مجموعة من الأدوات والمواقع المفيدة لمطوري إضافات ووردبريس.

هل أنت مهتّمٌ بإنشاء إضافة ووردبريس خاصّة بك من الصّفر؟ إن لم تكُن قد قمت ببرمجة إضافة خاصّة بك من قبل فقد يبدو لك ذلك كالتوغل في عالم مجهولٍ، خاصّة إن لم تكُن تثق بمهاراتك في لغة PHP. التحدّي الذي ستواجهه سيكون معرفتك من أينَ ستبدأ، بالإضافة إلى قدرتك على تقبّل إمكانيّة ارتكابك لعدّة أخطاءٍ طيلة مسار التعلّم. الإضافات تسمح لك بإضافة جميع أنواع الوظائف الممكنة للووردبريس، انطلاقًا من إضافة استمارة تواصلٍ بسيطةٍ إلى صفحة ما لتعزيز حماية موقعك وُصولًا إلى إضافة قدرات تجارةٍ إلكترونية. تقريبًا يوجد إضافة لأيِّ شيءٍ يخطُر على بالك، إن لم يكن كذلك فيمكنك دائمًا إنشاء واحدة وفق تصوّراتك وحاجاتك. في هذا الدّرس ستتعلّمٌ طريقة برمجة إضافتك الخاصّة لكي تتمكّنً من تعديل وظائف: موقعك الووردبريس أو الإضافات الأخرى أو حتّى القوالب إن أردت. المعلِّقات، الأفعال و المرشِّحات (Hooks, Actions, Filtres ) قبل البدء بإنشاء إضافة خاصّة، فلنبدأ أوّلًا بإلقاء نظرةٍ مفصّلةٍ على المعلِّقات "hooks"، الأفعال "actions" والمرشِّحات "filtres". إنّها تلك العناصر التي يترّكز عليها نظام الإضافة بالكامل والتّي ستُساعدك بشكلٍ كبيرٍ لفهم ما يحدث خلف الستار حول طريقة عمل الووردبريس. لنلقِ نظرة على هذا المثال. ماذا لو أردتَ إنشاء إضافةٍ تقوم بإضافة شفرة تتبُّع تحليليّةٍ لموقعك؟ في العادة هذا النوع من البرمجيّات يتمُّ إضافته في نهاية صفحة الموقع مباشرة فوق وسمِ الإغلاق. هذه الشفرة يجب أن تبقى في ذلك المكان حتّى وإن تمّ تغيير القالب ويجب أن تعمل على أيّ موقع ووردبريس، إذًا كيف ستجعل هذه الشفرة تعمل دائمًا إن لم تكن لديك أية سلطة تحكّم مباشر على القوالب؟ تذكّر أنّه في درس تطوير ووردبريس للمبتدئين: برمجة القوالب قمت بذكر دوال ()wp_head و ()wp_footer و الطريقة التي يجب عليك إضافتها بها في قالبك. مثالنا هذا يبيّن بالتحديد لماذا يجب أن توضع هذه الدّوال بالطريقة المحدّدة سلفًا. دالّة ()wp_footer يمكنها أن تقوم بتشغيل دوالٍّ أخرى محدّدة بواسطة الإضافات. إليك مثال كود يمكنك أن تستمتع بالتجريب عليه: <?php function my_tracking_code() { echo 'Paste tracking code from Google Analytics here'; } add_action( 'wp_footer', 'my_tracking_code' ); لنقم الآن بتفكيك الكود قطعةً قطعة. أوّلًا لقد قمت بكتابة دالّة تقوم بطبع شفرة التتبّع. هذه الدالّة غيرُ مستخدمة في أيّ مكان، هي فقط موجودة بإضافتي. بعد ذلك استخدمت دالّة ()add_action لإخبار الووردبريس متى يجب تشغيل الدالّة. متى ما وجد ووردبريس بدالّة ()wp_header فإنّه سيجد كلّ الدّوال المعلّقة بها بواسطة ()add_action . عندئذٍ سيقوم الووردبريس بتشغيل هذه الدّوال واحدة بواحدة وصولًا إلى دالّتنا التي تقوم بطبع شفرة التتبّع كنتيجة. هذا هو أساس المعلِّقات "hooks" ولكنّنا سنخوض فيها بشكلٍ أعمق لاحقًا خلال هذا الدَّرس لكي تتعلّم عنهم أكثر وتكون قادرًا على استغلال قدراتهم بشكل أفضل. قبل الانتقال إلى شيء آخر أريد ان ألفت انتباهك الى شيء مهم، دالة ()wp_footer الموجودة في تذييل القالب ليست معلِّقا "hook" بل هي في الحقيقة مجرّد دالّة تحتوي على معلِّق في مكان ما بداخلها. للنداء على معلِّق "hook" نستخدم (’do_action(’wp_footer، لكنّ هذا لم يكن مهمًّا في المثال الأوّل. على كلٍّ ستفهم أكثر عن هذا قريبًا! المصطلحات الآن وبعد أن أخذت لمحةً عمَّا سنتحدث عنه، دعني أشرح لك بطريقةٍ مرتّبةٍ المصطلحات التي ستلتقي بها طيلة هذا الدّرس. المعلِّقات "hooks" هي جزء من API إضافات الووردبريس. الأفعال والمرشِّحات "Actions and Filtres" عبارة عن نوع مختلف من المعلِّقات. الأفعال "actions" تسمح لك بإضافة وظائف، أنت في الأساس ستقوم بتحديد دالّة تشتغل في كلّ مرّة يقوم ووردبريس بمعالجة المعلِّق "hook" . المرشِّح "filter" يعمل بشكل مماثل و لكنّه عوض أن يضيف دوالًّا جديدة يقوم بتعديل الدوّال الموجودة مسبقًا بالووردبريس. مثلًا ووردبريس يحتوي على معلِّق يحدّد طول المقتطف إلى 55 كلمةٍ، يمكنك تعديل ذلك باستخدام المرشِّح لجعل عدد كلمات المقتطف أيَّ رقم ترغب به. كلًّ شيءٍ عن الأفعال: الآن وبعد أن صِرنا نعرف القواعد، فلنلقِ نظرةً مفصّلةً على دالّة ()add_action لفهمها بشكلٍ أفضل. هذه الدّالة تأخذ أربعة معاملات هم: اسم المعلِّق. اسم الدالّة التي نريد إضافتها للمعلِّق. الأولويّة. المعاملات المقبولة. لقد سبق وأن ألقينا نظرةً على أوَّل مُعاملين اللّذان هما في الحقيقة المُعاملان الوحيدان الاجباريّان بحيث يقومان بتحديد الدّالة المراد إضافتها والمكان المراد تشغيلها به. المُعامل الثالث يقوم بتحديد ترتيب الدوّال التي يتمّ تشغيلها. فائدة هذا المُعامل تظهر عندما تريد إضافة عدّة دوالٍّ إلى نفس المعلِّق. يمكنك مثلًا إضافة عدَّة شفرات تتبُّعٍ لموقعك وباستخدام مُعامل الأولوية يمكنك التحكُّم بأيّ دالّةٍ سيتمُّ تشغيلها أوّلًا. المُعامل الرّابع يخبر الووردبريس عدَد المعاملات التي تقبلها الدالّة المراد تعليقها. يجب عليك إلقاء نظرة في دليل الووردبريس لِمعرفة إن كان يتوّجب عليك وضع قيمة هنا لأنّ لكلِّ معلِّقِ خصائصه. بعض الدّوال قد تأخذ أكثر من معاملٍ، في هذه الحالة سيكون عليك أنّ تحدّد ذلك هنا. ألقِ نظرةً على المثال أدناه لكي تعرف لِما سيتوجّب عليك استخدام هذه الطريقة عند إنشاء معلِّقاتك الخاصّة لاحقًا. مثال عن فعل ووردبريس لا يوفّر الأفعال للقوالب فقط ولكن أيضًا لواجهة المدير إضافةً إلى أفعال خاصّة بالمستخدمين. معلِّق publish_post يتم تشغيله في كلِّ مرّةٍ يتم نشر مقال ما ليسمح لك بالقيام بشيءٍ ما في تلك المرحلة. الحاجة للمُعاملات تصبحُ ظاهرةً هنا. إذا قمتُ بإضافة دالّةٍ لهذا المعلِّق فكيف لي أن أعرف أيَّ مقالٍ تمَّ نشرهُ وماذا كانت تفاصيلهُ؟ عند قراءة دليل استخدام المعلِّقات يُمكنك أن ترى أنَّ الدالّة تحتوي على معاملين: مُعامِل معرِّف المقال ومُعامِل بيانات المقال. مثلًا لِنقم بإرسال بريدٍ إلكترونيٍّ لكاتب المقال عندما يُنشر مقاله: <?php function our_author_notification( $id, $post ) { $author = $post->post_author; $name = get_the_author_meta( 'display_name', $author ); $email = get_the_author_meta( 'user_email', $author ); $link = get_permalink( $id ); $message = 'Hello ' . $name . ", \n\n" . "Your artcile <a href='" . $link . "'>" . $post->post_title . "</a> has been published."; wp_mail( $email, 'One of your posts has been published', $message ); } add_action( 'publish_post', 'our_author_notification', 10, 2 ); كلًّ شيءٍ عن المرشِّحات: كما سبق وأن ذكرته سابقًا، المرشِّحات تعمل بشكلٍ مماثلٍ للأفعال ولكنّها تقوم بتعديل البيانات لذا ستجد نفسك تقوم بإرجاع نتائج داخل دوالّك المعلّقة. لإضافة مرشِّح نستخدم الدالّةَ ()add_filter التي ستستخدم نفس معاملات الدالّة ()add_action. مثال عن مرشِّح: أحسن مثالٍ للبدء به سيكون تعديل كلمة “قراءة المزيد” الموجودة بِنهاية المقتطف، في الوضع الافتراضي ستجدها بهذا الشَّكل "[…]". لتعديلها يمكنك القيام بشيء مثل هذا: <?php function our_excerpt_more( $more ) { return '... هناك المزيد'; } add_filter( 'excerpt_more', 'our_excerpt_more' ); لاحظ أنّني لم أحدّد مُعامل الأولويّة ولا مُعامل عدد المُعاملات المقبولة. هذا سيجعل الأولويّة 10 وعددُ المُعاملات المقبولة 1. هنا أنا لا أستخدم المعامل المُمرَّر في الدالة more$ إطلاقًا، أنا فقط أقوم بإرجاع نص خطّيٍ. يمكنك استخدام نفس الطريقة لتضمين إعلانٍ قبل الفقرة الأولى من مقالك. انظر الى المثال التالي: function in_content_ad( $content ) { $ad = '<div class="in-content-ad"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Advertisement&w=250&h=250"></div>'; return $ad . $content; } add_filter( 'the_content', 'in_content_ad' ); مع قليل من الـ CSS لتعويم الإعلان نحو اليمين، يُمكنك الحصول على صندوقِ إعلاناتٍ قياسيٍّ داخل محتوى مقالك خلال ثوانٍ معدودة. تعريف المعلِّقات: معرفة كيفيّة تعريف المعلِّقات إضافة إلى معرفةِ الطريقة التي تُنشِئ بها معلِّقاتك الخاصّة سيكون له أثرٌ كبير على فهمك لنظام ووردبريس. فلنفترض أنَّك تريد إنشاء إضافة متجر إلكتروني وأنّك ستقوم بإضافة وظائف لقائمة المنتجات، يمكنك القيام بشيءٍ مشابه لهذا: <?php $products = get_products( 10 ); show_products(); هنا أنت قمت بكتابةِ برمجيّتك بطريقة "إجباريّة" لكي تقوم بعرض فقط 10 منتجات. ولكن ماذا لو حاول شخص ما صنع إضافة لعملك وأراد أن يُظهر فقط ثلاثة منتجات؟ لو أنّك كتبك برمجيّتك بذكاء فإنّك ستسمح للأخرين بتعديلها. دعنا نستخدم معلّقًا للسماح للمطوّرين باستخدام عملنا وتطويره: <?php $product_count = apply_filters( 'product_count', 10 ); $products = get_products( $product_count ); show_products(); باستخدام دالّة ()apply_filters نحن نقوم بإخبار ووردبريس أنّ عندنا معلِّقًا اسمه product_count و أنّنا نريد أن نشغّل جميع الدّوال المربوطة به. في أيّة إضافة أخرى، يمكن للمطوّر أن يغيّر قيمة عدد المنتجات الظاهرة إلى ثلاثةٍ مثلًا باستخدام الطريقة التالية: <?php add_filter( 'product_count', 'carousel_product_count' ); function carousel_product_count( $count ) { return 3; } سنتابع في الدرس القادم أساسيات إنشاء الإضافة وكيفية إضافة خصائص القالب للإضافات… ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Plugins لصاحبه Daniel Pataki

تعرّفنا في الدرس السابق على المعلِّقات، الأفعال و المرشِّحات (Hooks, Actions, Filtres ) وسنتعرّف في هذا الدرس على أساسيات إنشاء الإضافة وكيفية إضافة خصائص القالب للإضافات… أساسيّات إنشاء إضافةٍ: الآن وقد صِرنا نعرف كلّ شيءٍ عن المعلِّقات فإن الخطوة التاليّة ستكون معرفة طريقة استخدامها. لنعد خطوة للوراء ولنلق نظرة عامّة على الإضافات. يتم وضع الإضافات في المجلّد الرئيسي للإضافات في موقعك ووردبريس، يوجد هذا الملف عادة في هذا المسار "wp-content/plugins". كمثال لنقم بإنشاء إضافة تقوم بإضافة رابط تغريده تحت مقالاتك. أوّلا، فلننشئ مجلّدًا في مجلّد الإضافات الرئيسي ولنسمّه مثلا "tweet-plugin-tutorial". الآن أنشئ ملفًّا داخل هذا المجلّد وسمّه "tweet-plugin-tutorial.php". الآن قم بفتح الملف وقم بنسخ البرمجيّة التالية بداخله: <?php /** * Plugin Name: Tweet Plugin Tutorial * Plugin URI: http://danielpataki.com * Description: This plugin adds a simple tweet link below posts. * Version: 1.0.0 * Author: Daniel Pataki * Author URI: http://danielpataki.com * License: GPL2 */ هذه المعلومات سيتم عرضها في لوحة تحكّم المدير في قسم الإضافات. بمجرّد حفظك للملف ستلاحظ ظهور إضافةٍ جديدةٍ في قائمة الإضافات، تهانينا! لقد أنشأت أوّل إضافة لك بإتقان ولكن لا تفرح كثيرًا فهذه الإضافة لا تقوم بأيّة وظيفة بعد، ولكن يمكنك تفعيلها الآن وهو ما ندعوك للقيام به. حاليًّا قمنا بـ 90% من العمل. كلُّ ما علينا القيام به الآن هو إيجاد طريقة لإضافة رابط التغريدة أسفل محتوى المقال. ربّما أنت تفكّر بتعديل محتوى المقال عن طريق إضافة نصٍّ إضافي له. هذا يعني أنّك تفكّر في استخدام معلِّق the_content مثلما قمنا بهذا سابقًا: <?php function tweet_link( $content ) { return $content . '<p><a href="https://twitter.com/intent/tweet?url='.get_permalink().'">Tweet about this</a></p>'; } add_action( 'the_content', 'tweet_link' ); هذه البرمجيّة ستقوم بإضافة رابطٍ بعد محتوى مقالِتنا، ما سيتيح لمستخدمينا مشاركة رابط المقال عن طريق تغريده. في الواقع هذا كلّ ما يجب عليك معرفته لإنشاء إضافة ووردبريس. جميع الإضافات هي عبارة عن مزيج من الدّوال والمعلِّقات التي تحدِّد المكان الذي سيتم منه تشغيل هذه الدّوال. لذا من الآن فصاعدًا عليك التركيز على تعلُّم الأنظمة الفرعية مثل Options API, Metadata API وغيرها. إضافة خصائص القالب للإضافات: هناك عدّة طرق لإضافة خصائص لقوالبك. دعنا أولًّا نلقي نظرة على الطريقة القياسية للقيام بهذا الأمر عن طريق دليل ووردبريس. سوف نبدأ بإنشاء صفحة مدير ستحتوي على النموذج التالي: <?php add_action('admin_menu', 'tweetlink_settings_menu'); function tweetlink_settings_menu() { add_menu_page('Tweet Link Settings', 'Tweet Link', 'manage_options', 'tweetlink-settings', 'tweetlink_settings_page', 'dashicons-twitter'); } function tweetlink_settings_page() { echo '<div class="wrap"><h2>Tweet Link Options</h2></div>'; } دالّة ()tweetlink_settings_menu تمّ تعليقها بمعلِّق admin_menu. حسب دليل الووردبريس هذه هي الطريقة الصحيحة التّي يجب استخدامها لإنشاء قائمة مدخلات في لوحة التحكّم. العمل سيتّم عن طريق دالّة ()add_menu_page التي تأخذ مجموعة مُعامِلات صفحة ذات مستوى أعلى. المعاملات التي تأخذها هذه الدّالة هي: عنوان الصّفحة – يستخدم في وسم العنوان عنوان القائمة – يستخدم في كتابة اسم القائمة في الجهة اليسرى/اليمنى من لوحة تحكم المدير. الإمكانيّة – لتحديد أقل مستوى يمكنه مشاهدة القائمة (مثلا القائمة ستكون ظاهرة فقط للمدير والمحرّرين) الاسم اللطيف للقائمة – يستخدم في الرابط المؤدّي لصفحة القائمة. الدّالة - اسم الدّالة التي تقوم بالتحكّم بالمُخرجات. الأيقونة – رابط صورة او نص لأيقونات ووردبريس. الموقع – تموضع العنصر ضمن القائمة. إليك كيف تبدو صفحة الخصائص في لوحة التحكم: قد تبدو لك هذه الصّفحة رائعة ولكن في الحقيقة هي مبالغةٌ كبيرة إنشاء صفحة كاملة من أجل إضافة بسيطة كالتّي نعمل عليها الآن، لذا سيكون من الأفضل وضع هذه الصفحة داخل قائمة الإعدادات الموجودة سلفا بالووردبريس. يمكنك القيام بذلك باستخدام دالّة ()add_options_page. الخطوة التّالية ستكون جعل الووردبريس يعلم حول إعدادات تغريدتنا. هذا الأمر سيتطلب استخدام دالّة ()register_settings داخل دالّة معلّقة إلى ()to admin_init. إليك كيف سيكون شكل البرمجيّة: <?php add_action( 'admin_init', 'tweetlink_settings' ); function tweetlink_settings() { register_setting( 'tweetlink_settings', 'twitter_account' ); } كلّ شيءٍ تمام. الخطوة الأخيرة ستكون إضافة استمارة تستخدم خصائصنا. استخدم البرمجيّة التاليّة كنموذج لإنشاء إعداداتك الخاصّة، لا تنسَ استخدام دوال ()settings_fields و ()do_settings_sections لضمان قيام الووردبريس بحفظ البيانات لك. <?php function tweetlink_settings_page() { ?> <div class="wrap"> <h2>Tweet Link Settings</h2> <form method="post" action="options.php"> <?php settings_fields( 'tweetlink_settings' ); ?> <?php do_settings_sections( 'tweetlink_settings' ); ?> <table class="form-table"> <tr valign="top"> <th scope="row">Twitter Account</th> <td><input type="text" name="twitter_account" value="<?php echo esc_attr( get_option('twitter_account') ); ?>" /></td> </tr> </table> <?php submit_button(); ?> </form> </div> <?php } عند نهاية العمليّة يجب أن ترى ظهور حقل جديد يُمكّنك من إدخال حسابك على تويتر ثم الضغط على حفظ. بعد ذلك يمكنك استخدام دالّة 'get_option( 'twitter_account ( لاسترجاع القيمة المُدخلة واستخدامها بأي مكان داخل إضافتك. يمكننا الآن التعديل على رابط التغريدة لإضافة "via @username" إذا قام المستخدمون بإضافة حسابهم على تويتر في صفحة الخصائص. إليك كيف عدّلت دالّة ()tweet_link <?php function tweet_link( $content ) { $url = 'https://twitter.com/intent/tweet'; $url .= '?url=' . get_permalink(); $account = get_option( 'twitter_account' ); if( !empty( $account ) ) { $url .= '&via=' . $account; } return $content . '<p><a href="' . $url . '">Tweet about this</a></p>'; } خاتمة هكذا نختم سلسلتنا حول تطوير ووردبريس للمبتدئين. في هذه المقالة تعلّمنا طريقة إنشاء إضافة بسيطة نتمنّى أنها خلقت داخلك شعورًا بالرّضى كونك تمكّنت من برمجة أوّل إضافة لك. فقط التجربة والإصرار من سيجعلان تطوير الووردبريس أسهل بالنسبة إليك وسترتقي من مجرّد مبتدئ غير خبير إلى مستوى مطوّر. ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Plugins لصاحبه Daniel Pataki

تلعب جداول التسعير دورًا هامًّا في مساعدة زوّار موقعك في رؤية ومقارنة مختلف المميّزات التي تقدّمها خططك التسعيريّة. تكمن المشكلة في أنه يمكن لهذه الجداول أن تشكّل تحديًا من ناحية التصميم وسهولة الاستخدام في ذات الوقت. يجب أن تكون الجداول بسيطة ولكن يجب أن تفرّق بشكل واضح بين ميزات وأسعار الخدمات والمنتجات المختلفة. إذا لم يتمكّن مستخدموك من رؤية قيمة المنتج أو الخدمة فورًا فعليك أن تعرف أن أموالهم لن تُغادر محافظهم. ولكن يمكن لجداول مقارنة التسعير -مع بعض استراتيجيّات التسويق الصحيحة- توفير وسيلة فعّالة لتحديد موضع إظهار حِزَمك من أجل زيادة المبيعات. لذلك سنقوم بإلقاء نظرة على أفضل الإضافات المتاحة لمساعدتك في إظهار تسعيرك بالطريقة الصحيحة في موقعك المبني باستخدام ووردبريس. CSS3 Responsive Pricing Table إضافة CSS3 Responsive Pricing Table المُقدّمة من طرف QuanticaLabs هي إضافة جداول تسعير لووردبريس مدفوعة والتي توفر تصميمًا متجاوبًا. إذا كان مجرّد التفكير في احتياجك لكتابة شيفرات برمجيّة يسبب لك التوتر فإن هذه الإضافة طُوّرت خصيّصا لك. الإضافة متوافقة مع ووردبريس متعدّد المواقع أيضًا (Multisite WordPress). هناك تصميمان يمكنك الاختيار من بينهما، فاتح وغامق، وكل تصميم يأتي مع 20 لون مُختلف. تم تطوير الإضافة باستخدام CSS3 فقط مما يجعل الإضافة صغيرة الحجم ومؤثّرة. قام المطورون أيضًا بإطلاق نسخة HTML من الإضافة. تأتي الإضافة مُحمّلة بخيارات عديدة مثل ضابط وضع التجاوب ولوحة إدارة شاملة مع ضبط حي live configuration. لديك إمكانيّة التحكم الكامل في تصميم الجدول باستخدام عدد كبير من الخيارات للصفوف، الأعمدة، حالات الحومان (Hover states)، الأشرطة وأيقونات صح/خطأ (tick/cross icons). يمكنك الحصول على ترخيص عادي مقابل 18 دولار والذي يقدم لك أيضًا 6 أشهر دعم من المطورين والتحديثات المستقبليّة. خصائص الإضافةتفعيل وضع التجاوب وتحديد خطوات وأبعاد التجاوبلوحة إدارة بديهيّة مع ضبط حيتصميمان للجدول، 20 لون مُختلفعدد لا نهائي من الجداولعدد لا نهائي من الأعمدة والصفوفإظهار/إخفاء عمود أو عدّة أعمدة من لوحة الإدارةتحديد الأعمدة كنشطة (مُنبثقة)صفوف قابلة للتوسيعحالات الحومان (Hover states)42 أيقونة صح/خطأمثال حييستخدم موقع Fast Followerz هذه الإضافة منذ ثلاث أعوام إلى الآن. الصورة التالية توضح معاينة لجدول التسعير المصمم لشركتهم القائم على تقديم خدمات على الإنترنت. لاحظ كيفية انبثاق الأعمدة وإذا قمت بزيارة الموقع باستخدام هاتف ذكي ستلاحظ أن التصميم متجاوب. Plugmatter Pro Pricing Table Plugin إضافة Plugmatter Pro Pricing Table Plugin هي إضافة ووردبريس مدفوعة سهلة الاستخدام والتي تساعدك على إنشاء جداول مقارنة أسعار عالية التحويل. وفقًا لموقع الإضافة فإنه "يمكن للإضافة حرفيًّا أخذ مبيعاتك إلى المرحلة التالية وكذلك جعل تصميم موقعك متكاملاً". خاصيّة تحسين التحويل الموجودة بالإضافة مدعومة بواسطة دراسات البحث السلوكي وتحسين مُعدّل التحويل (CRO)، والتي تعطي الإضافة ميزة تنافسيّة تسبق جداول التسعير الأخرى من وجهة نظر تسويقيّة. تمّ تصميم الإضافة لأولئك الذين لا يريدون كتابة شيفرات برمجيّة. تحصل مع هذه الإضافة على 10 قوالب جداول تسعير متجاوبة ومُخصّصة والتي صُمّمت خصّيصًا لزيادة مُعدّل التحويل لموقعك. من الناحية التصميميّة، فإنه يُمكن للقوالب أن تظهر بصورة قوالب مصفوفة أو قوالب بطاقات. هُناك ثلاث خطط يُمكنك الاختيار من بينها بالنسبة لهذه الإضافة. أقلها سعرًا هي 47 دولار. إلا أنّ الخدمات التقنية عالية الجودة المُقدّمة بواسطة الإضافة تُبرّر أسعارها العالية. خصائص الإضافةمُحرّر مرئي WYSIWYGإمكانيّة ترتيب الصفوف والأعمدة بطريقة السحب والإفلات (Drag and Drop)خطوط جوجل وأيقونات Font Awesomeتعقّب الأحداث من جوجل23 زر قابلة للتعديلمُحرّر الخلايا مُحمّل مع خيارات مُختلفةتصميم متجاوب بالكاملاختبار A/B Split Testingدعم فوري للمُستخدمينرموز قصيرة (Short Codes)يُمكن تجربة جميع القوالب باستخدام مُدخلات واحدةVisual Composer Pricing Table Add-On إضافة Viusal Composer Pricing Table Add-On هي إضافة متجاوبة والتي تم تصميمها خصّيصًا للقوالب التي تم إنشاؤها باستخدام Visual Composer. الميزة البارزة لهذه الإضافة هي أّنّها تُتيح لك حريّة تخصيص خلفيّة، ألوان الخط والشفافيّة (Transparency) بالنسبة لجدول التسعير. مما يُعني أنّه لن تكون بحاجة للتعامل مع مجموعة من القوالب المُعرّفة مسبقًا من جديد. تم تصميم جداول التسعير بطريقة تجعلها تلعب دور أزرار الدّعوة إلى الإجراء Call to action. ستحصل مع الإضافة على أيقونات Font Awesome لإضافة المزيد من الحيويّة لجدول التسعير الخاص بك. تحتوي الإضافة على خاصيّة التبديل (toggle) والتي تُتيح إمكانيّة تبديل مقدار المساحة بين الخطط المختلفة في جدولك. ثمن الترخيص العادي هو 17 دولار والذي يشتمل على ستّة أشهر من الدّعم الفنّي. خصائص الإضافةتخطيطات عمود مُخصّصةتنسيقات حدود (borders) مُخصّصةخلفيّة وألوان خط مُخصّصة بالكاملتأثيرات شفافيّةأيقونات Font Awesomeإضافة تأثيرات تحريكالتّحكّم في المسافات بين خطط التسعيرصناديق الدعوة إلى الإجراءمثال حييستخدم موقع College for Pets هذه الإضافة لعرض أسعار الشهادات التي يقدمونها. Easy Pricing Table إضافة Easy Pricing Table التي توفّرها Fatcat Apps هي جداول تسعير مشهورة يسهل إعدادها خلال دقيقتين فقط. تُقدّم الإضافة 10 قوالب لجداول تسعير متجاوبة تمامًا والتي تحتوي على تلميحات مُضمّنة تُمكّنك من عرض معلومات مُفصّلة عن منتجك أو خدمتك دون بعثرتها. وفقًا لموقع الإضافة، فإن الإضافة ستعمل فور قيامك بتثبيتها. فلا تحتاج لكتابة شيفرات برمجيّة لأي شيء أو الخوض في إعدادات ضبط مُعقّدة. ستكون الإضافة مُثبّتة لديك وتعمل في دقائق معدودة. تُقدّم الإضافة أيضًا خطط خاصة بالشّركات والوكالات والتي تحتوي على تبديلات التسعير وإضافات إحصائيّات جوجل. تبديلات التسعير تُتيح لعملائك معاينة معدّلات التسعير التي تضعها لخدمة معيّنة بعملات مختلفة أو لفترات مختلفة (على سبيل المثال، خطط فصليّة، خطط سنويّة، إلى آخره). تُقدّم Fatcat Apps فترة 60 يوم لاستعادة مبلغك إذا لم تكن راضيًا عن جداول التسعير المُقدّمة. يُمكنك الحصول على ترخيص شخصي مقابل مبلغ 29 دولار والذي يمكن استخدامه في موقع واحد. بهذا الترخيص ستحصل على 10 قوالب ودعم عب البريد الإلكتروني. خصائص الإضافة10 قوالب تصميممتجاوبة وقابلة للتخصيص بالكاملسهلة الاستخدامتلميحات مضمّنةدعم بريد إلكتروني مدفوعإضافة تبديل الأسعارإضافة إحصائيات جوجلمثال حيربمّا تكون قد رأيت جداول Easy Pricing Tables في العديد من المواقع ولكنّك لم تعرف أنّها هي نفس الإضافة. إليك بعض المواقع الشهيرة التي تستخدم الإضافة لأغراضها التجارية: WooThemes، Social Media Examiner، Pagely، WPBeginner، WP Mayor، WPLift و wpmudev. PricingTable إضافة Pricing Table التي تطوّرها ParaTheme هي إضافة جدول تسعير ووردبريس مجّانيّة وصغيرة الحجم. تقوم الإضافة بإنتاج نظام HTML/CSS شبكي (grid) خالص لعرض الجدول في موقعك. إنّ سهولة استخدام الإضافة، تصميمها المتجاوب ومجموعة أخرى من المميزات هي أمور تجعل من هذه الإضافة خيارًا شائعًا لمن لا يريد شراء جدول تسعير. يُمكن ببساطة سحب وإفلات صفوف/أعمدة وإدارة جدول التسعير من خلال لوحة الإدارة المدمجة الخاصّة بالإضافة. تتضمّن الإضافة خاصيّة دعم الرموز القصيرة والتي تُمكّن المستخدمين من وضع جدول التسعير أينما أرادوا بسهولة. أحد أفضل الخصائص بهذه الإضافة هي أنّه بإمكانك تضمين فيديو (يوتيوب أو فيميو) في خطط جدولك التسعيري. خصائص الإضافةمتجاوبةعدد لا نهائي من الأعمدة والصفوفخاصّية السحب والإفلاتحزمة من 7 ألوان للنصوصحزمة من 12 لون للخلفية19 شريط للأعمدة21 خط من خطوط جوجلتدعم الإضافة وضع صورة خلفية في منطقة الجدولGo Pricing – WordPress Responsive Pricing Table تدعم إضافة Go Pricing – WordPress Responsive Pricing Table المُقدّمة بواسطة Granth العديد من عناصر الوسائط شاملة صور، خرائط، تسجيلات صوتيّة وفيديو. تثبيت الإضافة يستغرق بضع دقائق مع لوحة الإدارة. مدمج بالإضافة أيقونات Font Awesome، Icomoon، Linecon وMateral. كلها أيقونات يمكنك استخدامها في جدولك التسعيري المُخصّص. يمكنك معاينة الشكل النهائي لجدول التسعير الخاص بك قبل نشره على موقع وذلك باستخدام خاصيّة المعاينة الفوريّة التي توفّرها الإضافة. توفّر هذه الإضافة الكثير من الوقت الذي يمكن أن يُستنفذ في النشر ثم العودة لإضافة تعديلات بسيطة. تحتوي الإضافة على أكثر من 250 تصميم قالب يمكنك الاختيار منها. القوالب قابلة للتخصيص بالكامل مما يعني أنّه بإمكانك فعل أي شيء مثل تغيير مساحة الخلايا أو تعيين ألوان مختلفة لكل عمود. الترخيص العادي متاح مقابل 20 دولار والذي يسمح لك باستخدام الإضافة في موقع واحد فقط. خصائص الإضافةمجموعة من أكثر من 250 قالب جاهزأكثر من 650 خط من خطوط جوجلأكثر من 1900 أيقونة خطوطعدد لا نهائي من الأزرارتوفير QR Codeمعاينة فوريّة للجداولتخطيط متجاوبرمز قصير لزرّ باي بالعدد لا نهائي من الألوانمثال حييستخدم موقع View from the Boundary الإضافة لعرض خدمات الموقع التسويقيّة. ARPrice ARPrice هي إضافة مدفوعة تُطوّرها Repute InfoSystems. الإضافة تُقدّم جداول مقارنة تسعير متجاوبة وتتميز أيضًا بقوالب متحرّكة مع إمكانيّة تخصيصها. تأتي الحزمة وبها مجموعة فيها أكثر من 170 خيار لجداول التسعير يمكنك الاختيار من بينها. إذا لم تجد أيّ من تلك الجداول يناسب تصميم موقعك فيمكنك تخصيص الجدول بنفسك. مضمّن بالإضافة لوحة إدارة كاملة المزايا والتي من خلالها يمكن سحب وإفلات الأعمدة ومن ثمّ تغيير حجمها. يمكنك إضافة صور، خرائط جوجل، ملفّات صوتيّة وفيديوهات إلى جدول التسعير الخاص بك وإلحاق تأثيرات تحريك بهم. الترخيص العادي متاح مقابل 18 دولار والذي يحتوي على 6 أشهر دعم فنّي والتحديثات المستقبليّة. خصائص الإضافةأكثر من 170 قالب جداول تسعيرتأثيرات حركيةلوحة إدارة كاملة المزاياإمكانيّة السحب والإفلاتتجاوب مُخصّصخطوط جوجل وأيقونات Font Awesome مضمّنةدعم لسكربت بايبالإمكانيّة إضافة صور، خرائط، ملفّات صوتية، فيديودعم التلميحاتKento Pricing Tables تعدّ إضافة Kento Pricing Tables التي تطوّرها KentoThemes إضافة سهلة الاستخدام وقابلة للتخصيص مقدّمة لمواقع ووردبريس. تقوم الإضافة بإنتاج جداول تسعير تمّ إنشاؤها بواسطة HTML/CSS فقط والذي يعني أنها لن تتسبّب في بطء موقعك. تسمح لك الإضافة تخصيص أعمدة وصفوف الجدول بالكامل بالشكل الذي يتناسب مع قالب موقعك والألوان الموجودة به. تتيح لك الإضافة كذلك إمكانيّة تحديد اللون الرئيسي للجدول بلون من اختيارك. ولمن أصابه الملل من الألوان البسيطة فإنّه يمكن إضافة صورة خلفية إلى الجدول. يجب مراعاة أنّ صورة الخلفيّة ليست متجاوبة فلا تتوقع أن تعمل بسلاسة في الهواتف الذكية. تعديل حجم الصفوف والأعمدة بسيط. كل ما عليك فعله هو إدخال القيم وسوف تحصل على جدول بنفس الأبعاد المُحدّدة. خصائص الإضافةتصميم متجاوبعرض مُخصّص للأعمدةعدد لا نهائي من الأعمدة والصفوفلوحة إدارة سهلة الاستخدامحقول إظهار/إخفاء فارغةمثال حييستخدم موقع WebPrezence.com الإضافة في متجره الإلكتروني. يمكن أن ترى كيف أضافت صورة الخلفيّة التي استخدموها تأثيرًا مُكمّلاً للمظهر العام لجدول التسعير. POWr Price Table إضافة POWr Price Table التي تقدّمها POWr هي إضافة مجّانيّة مُختلف عن غيرها، حيث أنها خدمة سحابية ممّا يعني أنّه بإمكانك تعديل موقعك حتى بعد نشره. كما تدعم الإضافة خدمة بايبال ممّا سيُسهّل على زبائنك عملية الدّفع. تُتيح لك الإضافة إنشاء أنظمة دفع دوري لأشياء مثل العضويّات أو الاشتراكات. هذه الميزة ليست موجودة بالإضافات الأخرى التي تمّ استعراضها من قبل. يمكن في هذه الإضافة تخصيص الألوان، الخطوط والخلفيّات. يمكنك استخدام خاصيّة الإبراز (Highlight) لجعل خطّة معيّنة تبرز بين باقي الخطط الأخرى. كما تدعم الإضافة لغات مختلفة ومتجاوبة بالكامل. خصائص الإضافةمتجاوبة بالكاملخدمة سحابيةدعم مدمج للنصوص للعديد من اللغاتإمكانيّة إنشاء خاصيّة الدفع الدوريخاصيّة الإبراز لجعل خطّة محدّدة بارزة عن الخطط الأخرىخطوط، خلفيّات وألوان مُخصّصةدعم بايبالمقارنة بين إضافات جداول التسعير اختيار الإضافة الأنسب من الجدول أعلاه قد تكون مهمّة صعبة حيث أنه يوجد على الأقل ميزة واحدة تبرز كل إضافة عن الإضافات الأخرى. إذا كنت تبحث عن إضافة جداول تسعير مدفوعة فإنّ إضافة Easy Pricing Tables ببساطة هي خيارك الأمثل. تمتلك الإضافة كل ما تحتاج إليه أن يكون موجودًا في إضافة جدول تسعير. أعجبتني خاصيّة تبديل التسعير، وهي الخاصيّة التي لا تقدّمها الإضافات الأخرى. تصبح خاصيّة تبديل التسعير إلزاميّة عندما تختلف أسعار منتجك أو خدمتك. تحتوي إضافة POWr Price Table على العديد من المميّزات التي لا توجد بالإضافات الأخرى. مثل دعم اللّغات المختلفة وكونها خدمة سحابية. إذا كنت تقوم بتغيير المظهر العام لموقعك كثيرًا، فعلى الأرجح أفضل خيار لك هو جداول التسعير التي توفّرها إضافة GO Pricing حيث أن هناك أكثر من 250 خيار يمكنك الاختيار من بينها. اختيار أفضل إضافة تسعيرهناك عدد كبير جدًا من حلول جداول التسعير لووردبريس، ولكن تم اختيار هذه الإضافات التسعة بناءً على خصائصها الممتازة وقدرتها على الموازنة بين التصميم وقابلية الاستخدام. رأينا كيف قامت مواقع حقيقيّة بتنفيذ جداول التسعير الخاصّة بهم عن طريق استخدام الخصائص الأكثر أهميّة بالنسبة لهم. الآن لديك معرفة جيّدة بمختلف جداول التسعير الموجودة وماذا يمكن لكل إضافة من الإضافات تقديمه لك. إذا كنت تريد إضافة بها مجموعة من قوالب الجداول المصمّمة مسبقًا للاختيار من بينها أو واحد تقوم بتخصيصه بنفسك، فإنّك الآن لديك بعض الخيارات المختلفة التي بإمكانك الاختيار منها. هل تستخدم جداول التسعير في موقعك؟ ما هي أفضل إضافة جدول تسعير بالنسبة لك؟ قم بإخبارنا في قسم التعليقات بالأسفل. ترجمة -وبتصرّف- للمقال Nine Best Pricing Table Plugins For WordPress لصاحبه Tom Ewer.

صفحات لوحة التحكم هي روح وقلب الإضافات، ويسهل أن تفترض أنها عبارة عن استمارات متقدمة الغرض منها لتجميع البيانات من المستخدم. ولكن في الواقع، إن صفحات لوحة التحكم هي المكان الأفضل للترحيب بالمستخدمين الجدد، توفير المعلومات عن الإضافة، وعرض التفاصيل المطلوبة للدعم والوثائق. في هذا المقال القصير سنلقي نظرة على كيفية إضافة هذه الصفحات إلى لوحة تحكم ووردبريس. ويمكنك الاستعانة بهذه المعلومات بالإضافة لدروس أخرى لإنشاء صفحات مبوبة، استخدام خاصية الـ Ajax، وهكذا دواليك. مكونات صفحة لوحة التحكمهناك مكونين أو ثلاثة لصفحة لوحة التحكم، حسب الوظيفة التي تبني عليها: عنصر قائمة – رئيسي أو فرعي.محتوى الصفحة.برمجة وظيفة الاستمارات – إذا كانت مطلوبة.لن نتحدث في هذا المقال عن الاستمارات ووظيفتها، هذا موضوع آخر. إنما سنكتفي الآن بكيفية إنشاء الصفحات نفسها. القوائم الرئيسية والفرعيةهناك نوعين من عناصر القائمة: رئيسي وفرعي. وأرشح لك –كما يقول Wordpress Codex– أن تدرس ما إذا كانت إضافتك تحتاج إلى عنصر قائمة رئيسي فعلًا. حيث توجد العديد من الإضافات التي تضيف عناصر قائمة رئيسية، مما يؤدي إلى إزدحام لوحة التحكم. ومثال على ذلك هو إضافة WordTwit، المسئولة عن إنشاء تغريدات بالمحتوى الجديد. وهي إضافة ممتازة، إلا أنها تضيف عنصر قائمة رئيسي دون الحاجة إليه. هذا غير ضروري على الإطلاق، وكان من الأفضل الاكتفاء بعنصر فرعي في قائمة الإعدادات. بينما بعض الإضافات الأخرى مثل WooCommerce ،bbPress، وغيرها تضيف عناصر القائمة الرئيسية التي لها فائدة بالفعل، هذا يعتمد فقط على كيفية تفاعل المستخدمين مع منتجك. نصيحة عن خبرة: إذا كان المستخدم يحتاج للتعامل مع إضافتك بشكل يومي أو مستمر فاستخدم عنصر قائمة رئيسي. أما إذا كانت صفحتك في لوحة التحكم لغرض الإعدادات فقط، فسيكون إدراج عنصر فرعي في قائمة الإعدادات كافيًا. إنشاء صفحة لوحة تحكم رئيسيةأولًا نبدأ بإنشاء عنصر قائمة عن طريق الدالة ()add_menu_page. وترى هنا مثالًا لها مع الشرح: add_action( 'admin_menu', 'my_admin_menu' ); function my_admin_menu() { add_menu_page( 'My Top Level Menu Example', 'Top Level Menu', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6 ); }تأخذ الدالة سبع معطيات: عنوان الصفحة، الذي يعرّف وسم العنوان ويظهر في عنوان صفحة الانترنت في متصفح الانترنت وليس على الشاشة. العنوان الذي يظهر في القائمة.الصلاحيات المطلوبة للدخول إلى القائمة، يمكن استخدامه لحصر الصفحة على المدراء، أو المحررين، أو المؤلفين."الاسم اللطيف" أو slug للقائمة، وهو الذي يظهر في رابط الصفحة.الوظيفة، التي تتضمن محتوى الصفحة.رابط الأيقونة. ويقبل العديد من الصيغ. فإذا وُضع رابط صورة سوف تستخدم هذه الصورة. بإمكانك استخدام Dashicons، المبنية داخل ووردبريس، أو حتى استخدام ملف SVG.الترتيب في القائمة. وبما أن الوظيفة تختص بالمقالات، فقد اخترنا أن نضع عنصر القائمة بعدها مباشرة، أي في السادس. ويمكنك التعرف على ترتيب العناصر من Wordpress Codex.والآن الخطوة التالية هي إنشاء محتوى الصفحات. كل ما تحتاجه هو تعريف الدالة التي حددتها في المُعطى الخامس وكتابة بعض المحتوى. وهذا مثال بسيط لتبدأ به: function myplguin_admin_page(){ ?> <div class="wrap"> <h2>Welcome To My Plugin</h2> </div> <?php }إنشاء صفحة لوحة تحكم فرعيةهناك بعض الوظائف التي يمكن استخدامها لإنشاء صفحات فرعية. والدالة العامة ()add_submenu_page تمكنك من إنشاء صفحات فرعية في أي مكان، ولكن كل الصفحات الرئيسية لها وظائفها الخاصة لإضافة صفحات فرعية إليها: لإضافة صفحات فرعية إلى قسم المقالات استخدم add_posts_page.لإضافة صفحات فرعية إلى قسم الصفحات استخدم add_pages_page.لإضافة صفحات فرعية إلى قسم الوسائط استخدم add_media_page.لإضافة صفحات فرعية إلى قسم الروابط استخدم add_links_page.لإضافة صفحات فرعية إلى قسم التعليقات استخدم add_comments_page.لإضافة صفحات فرعية إلى قسم المظهر استخدم add_theme_page.لإضافة صفحات فرعية إلى قسم الإضافات استخدم add_plugin_page.لإضافة صفحات فرعية إلى قسم المستخدمين استخدم add_users_page.لإضافة صفحات فرعية إلى قسم الأدوات استخدم add_management_page.لإضافة صفحات فرعية إلى قسم الإعدادات استخدم add_options_page.كل من الوظائف السابقة تتبع نفس الصياغة: add_comments_page( $page_title, $menu_title, $capability, $menu_slug, $function); والمُعطىات شبيهة بتلك المذكورة في المثال السابق. ربما تود إضافة عنصر فرعي إلى عنصر قائمتك الرئيسي، وفي هذه الحالة لن تكون الوظائف السابقة ذات نفع لك. بل ستستخدم الدالة ()add_submenu_page، وهنا سنضيف عنصر فرعي إلى قائمتنا الرئيسية التي أعددناها سابقًا: add_action( 'admin_menu', 'my_admin_menu' ); function my_admin_menu() { add_menu_page( 'My Top Level Menu Example', 'Top Level Menu', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6 ); add_submenu_page( 'myplugin/myplugin-admin-page.php', 'My Sub Level Menu Example', 'Sub Level Menu', 'manage_options', 'myplugin/myplugin-admin-sub-page.php', 'myplguin_admin_sub_page' ); }كما يمكنك أن ترى هذه الدالة مشابهة للدوال المذكورة سابقًا، باستثناء المُعطى الأول الذي يحدد الاسم اللطيف المستخدم في رابط الصفحة الرئيسية، وهو في حالتنا هذه: myplugin/myplugin-admin-page.php. الختامكما ترى، فإن إضافة عناصر إلى القائمة وصفحات محتوى سهل للغاية. الصعوبة تبدأ بعد هذه المرحلة، حيث نختار محتوى الصفحات، كيف نرتبه، استخدام CSS وجافاسكريبت لإظهار المحتوى بتنسيق رائع، التأكد من أن الاستمارات آمنة وموثقة وهكذا دواليك، هذا كله سيتم تغطيته في دروس مستقبلية. هدف هذا الدرس هو فهم أساسيات إنشاء قوائم وصفحات لوحة التحكم لكي تلجأ إليها وقت الحاجة. وسنتطرق إلى حالات معينة في استخدام هذه الخصائص قريبًا. هل هناك أي شيء تريد إضافته إلى المقالة؟ أو تريد الاستفسار عنه؟ سنسعد بالرد عليكم في التعليقات. مترجم بتصرف من مقال A Quick and Easy Guide To Creating WordPress Admin Pages لصاحبه Daniel Pataki. حقوق الصورة البارزة: Car vector designed by Freepik.