لوحة المتصدرين

رجل أعمال؟ لديك شركة ناشئة؟ مؤسسة؟ نشاط تجاري؟ وجود موقع إلكتروني لعملك شيء ضروري و حتمي لا بدّ منه. تطوّر الإنترنت بشكل كبير جعل النشاط التجاري عليه مهمًا وزاد بدرجة كبيرة وملحوظة، لذلك أنت بحاجة لإيجاد مكان لعملك على شبكة الإنترنت لأهمية التواصل مع الجمهور الخاص بك، وفتحِ أسواقٍ جديدة، إقليمية وعالمية. عند البدء في اتخاذ قرار إيجاد كيان إلكتروني لك على الشبكة، أول ما يخطر في ذهنك هو إنشاء موقع الكتروني خاص بعملك، وهنا تبدأ رحلة البحث عن موقع مناسب لطبيعة عملك، وأهم ما يبحث عنه أصحاب العمل في الغالب هو موقع بواجهة مرنة، بسيطة سهلة وسلسة للمستخدمين، متوافق مع محركات البحث وبأقل تكلفة ممكنة. هذه الأمور غالبًا ما تشغل بال أصحاب العمل، بالإضافة للتساؤل الأكبر وهو: ما السبيل لتحقيقِ ما سبق؟ هنا نقفُ على مفترقِ طرقٍ مهم : الإستعانة بمطور أو بشركة برمجيات لبناء موقع كامل من الصفر.استخدام أحد نظم إدارة المحتوى.وغالبًا ما يعتقد الجميع بأن الأمر هنا اختياريًا، في الحقيقة لا.. !! لا تُعِدْ اختراعَ العجلة !في عالم الويب، يوجد العديد من نظم إدارة المحتوى المتنوعة، تتيح لك إمكانية إنشاء موقع بسيط، أو بناء مواقع كبيرة ومعقدة بسهولة ويسر. لمن لا يعرف نظم إدارة المحتوى، وكيف يخدم هذا النظام مشرفي المواقع وتحديد النظام المناسب لموقعك ستكون هذه المقالة دليلك المعرفي. ما هو نظام إدارة المُحتوى ؟نظام إدارة المحتوى أو ما يعرف بـ (CMS وهي اختصار لـContent Management System)، هو نظام مصمم لإدارة محتوى موقع على شبكة الانترنت أو غيرها من الموارد الإلكترونية التي يتم استخدامها بشكل تعاوني من قبل عددٍ من الناس، وغالبًا تُستخدم نُظم إدارة المحتوى لعمل مواقع مثل: المدونات، مواقع الأخبار، المتاجر الإلكترونية ، والعديد من المواقع للشركات ومواقع التسويق. يهدف نظام إدارة المحتوى لتجنيب الناشر أو المسؤول عن الموقع الحاجة لاستخدام الشيفرات البرمجية، أو حتى معرفته بإحدى لغات الويب مثل : Html. من خلال نظام إدارة المحتوى، بإمكانك بناء وإدارة موقعك الخاص دون الحاجة لمساعدة مصمم و مطوّر ويب، ولكن في بعض الحالات قد تحتاج لمطور إذا أردت إضافة بعض العناصر لصفحات الموقع. مميزات و عيوب استخدام نظام إدارة محتوى مقارنة بالبرمجة الخاصة.المواقع المتطورة والتفاعلية التي نراها اليوم مكتوبة بلغات برمجية مثل : (php / Asp.net). بناء مواقع كهذه يتطلب مهارات برمجية وتطويرية، وإذا كنت ممن يودون بناء مواقهم دون الحاجة لمعرفة الـ HTML، أو احدى لغات البرمجة، فنُظم إدارة المحتوى صُممت خصيصًا لك، فهي كل ما تحتاجُه لإنشاء موقع بتصميم احترافي، يحقق لك طموحك ويُلبي حاجتك. العديد من الشركات الناشئة والصغيرة التي تود بناء وإدارة مواقعها بنفسها عمدت إلى اختيار أحد نظم إدارة المحتوى في هذه الأيام. ايجابيات وسلبيات استخدام نظام إدارة محتوى مقارنة بالبرمجة الخاصةالإيجابيات : سهولة الاستخدام: في المواقع ذات البرمجة الخاصة (مواقع php، asp.net)، اذا أردت عمل أي تغيير في لوحة التحكم فأنت بالتأكيد بحاجة للعودة للمبرمج أو شركة البرمجة التي قامت بتطوير الموقع. بالنسبة لنظام إدارة المحتوى، لا تحتاج لمهارات خاصة، فالأمر بسهولة برامج ميكروسوفت المكتبية، مع خاصية السحب و الإفلات. بالإضافة إلى لوحة تحكمٍ بسيطة وغير مُعقدة، كما يوفر نظام إدارة المحتوى شروحات ووثائق للمبتدئين.تصميم ثابت: في المواقع ذات البرمجة الخاصة، التصميم النهائي للواجهة الأمامية يصبح ثابتًا، ولو طرأ أي تغيير في نوع المحتوى المعروض في الموقع يتأثر التصميم ككل ولا يظهر بصورة سليمة، و تحتاج لمصمم أو مطوّر متخصص للقيام بالتعديل أو الإضافة، مع الأخذ بعين الإعتبار أنّ تكلفة التعديل أو التطوير في هذه الحالة أعلى بكثير مقارنة مع نظام إدارة المحتوى المُصمم خصيصًا لاستيعاب جميع أنواع المحتوى، ولو احتجت لتغيير الواجهة الأمامية لن يتطلب ذلك أي تعقيدات، فكل ما عليك هو تغيير القالب بكل بساطة.تكلفة أقل: العديد من نظم إدارة المحتوى المجانية، بالإضافة لإمكانية استضافة موقعك على خوادمهم، وتكلفتها المدفوعة أقل بكثير من تكلفة بناء وتطوير موقع ببرمجة خاصة.تفعلُها بنفسك: ربما لا يوجد لكل نظام إدارة المحتوى فريق دعم فني، لكن لديهم مجتمع مستخدمين للمساعدة في حل المشكلات الخاصة به، والمعلومات والحلول موجودة بشكل مجاني على الإنترنت. بإمكانك حل المشكلات بنفسك أو الاستعانة بمطور إذا كانت الأمر معقدًا، مع العلم أن التكلفة بالنسبةِ لك هي الوقت والجهد، إذا ما قورِنت مع دعم فني خاص.السلبيات:التخصص و التوسع: الموضوع هنا مشابه جدًا لعملية شراء منزل جديد أو بناءه، فشراء منزلٍ جديد محكوم بالتصميم الخاص المُسبق له، فإما أن يكون رائعًا وإبداعيًا أو سيئًا للغاية، وهذا يرتبط بذوق المهندس أو مالكه. أما بناء منزل جديد، فأنت ستخطط لهُ وفق رؤيتك الخاصة، وذوقكَ الرفيع، وحسب احتياجاتك ورغباتك، مثلاً : ستضع بالحسبان وجود مساحات إضافية إذا كنت تخطط لإنجاب طفل جديد،أواستضافة أحد الأقارب،أو تخصيص مساحة لبركة مياه.. الخ. الأمر نفسة ينطبق على نُظم إدارة المحتوى، فمهما ذكرنا من إيجابيات تبقى بالنهاية محدودة ومخصصة لسبب بنائها الأساسي، إذ لا يمكننا تنفيذ جميع أنواع المواقع والتطبيقات من خلالها، خصوصًا المشاريع الكبيرة. كيف تختار نظام إدارة محتوى مناسب لك؟بعض نظم إدارة المحتوى تحتوي على العديد من الوظائف والتعقيدات، غالبًا لن تحتاج لها إذا كان موقعك عبارة عن مدونة مثلًا. من الضروري أن تحدد قائمة أسئلة تُجيب من خلالها على سؤالٍ مهم: ما الذي أريده من موقعي؟ إجابتكَ على هذا السؤال تُساعدك في تحديد الخيار المناسب لك، وتقدير مدى توسع عملك أو شركتك مستقبلًا والتمكن من تحديد النظام الأمثل، ومدى إمكانية إضافة الخصائص الجيدة له، و هل هو مناسبٌ لعملك أم لا. بإمكانك أيضًا الرجوع إلى مطوّر برمجيات واستشارته حول الخيار الأمثل لمشروعك، وأي النظم يعد الأنسب له. هناك العديد من نظم إدارة المحتوى المدفوعة والمجانية، التي لا يُمكن حصرُها في مقالة، لذلك سنناقش أكثر النظم انتشارًا، بالإضافة لإيجابيات و سلبيات كل نظام على حده، وفي نهاية المقالة ستكون قادرًا على تحديد النظام الأنسب لموقعك. الجدول التالي يُبيّن أكثر النظم انتشارًا، بناءً على: سعر التكلفة، سهولة الاستخدام، حجم مجتمع المستخدمين على الويب، إمكانية التخصيص. النظام الإيجابيات السلبيات السوق المستهدفةWordpressسهلة الاستخدام.كبر حجم مجتمع مستخدميها. قلة دعمها للمحتوى المتعدد.معرضة للإختراق.مواقع المؤسسات والشركات الصغيرة.المدونات.Joomlaتدعم تعدد اللغات.تعدد الصلاحيات والمستخدمين.النظام الداخلي معقد جداً.لا تتوافق مع محركات البحث بسهولة.مواقع الشبكات الإجتماعية.المجلات الالكترونية.Drupalالتخصيص والإستقرار.تحمل ضغط زوار عالي.قلة القوالب والتصاميم.بحاجة لمعرفة بالتقنية.الشركات الكبيرة.مواقع التجارة الالكترونية.Tumblrسهولة التنصيب.ميزة الاسئلة والإجابات.خصائص البريد للجمهور.لا توفر خيارات تحكم بشكل كبير في المحتوى. المدونات.مواقع نماذج الاعمال.ووردبرس WordPress :تُعد أكثر نظام تدوين صديق للمستخدم، وتيح له تعديلها لإنشاء موقع احترافيّ دون الحاجة لأي معرفة بالـ HTML. بإمكانك أن تضيف الصفحات والمنشورات باستخدام الإضافات ( plugins )، ويمكنك أن تُضيف العديد من الوظائف والخصائص إلى موقعك. نظام WordPress مخصص للتدوين ويمتاز بتوافقه مع محركات البحث، وبالأرشفة السريعة لمواضيعه. وإذا نظرنا للنظام من وجهة نظر تسويقية، فهو يعتبر نظام تصعب مقاومته، لواجهته الاحترافية سهلة الاستخدام، التي تستطيع التعامل معها بسلاسة بدون الحاجة إلى دليلٍ إرشادي. إذا أردت التغيير في التصميم والألوان، قد تحتاج لمعرفة مسبقة بأساسيات الـ CSS، أو بإمكانك أن تستعين بمطور لديه الخبرة في هذا النظام للقيام بالتعديلات اللازمة. تنصيب نظام WordPress سريع بالإضافة للميزة الأساسية، وهي الأرشفة السريعة لمواضيعها في محركات البحث وعلى رأسها محرك البحث الشهير Google، مقارنة مع Joomla التي تحتاجُ وقتًا أطول في عملية الأرشفة، وسبب ذلك أن النظام يساعدك في كتابة مقالاتك وفق أحدث معايير الـ SEO . ساعتين من التعلم عبر فيديوهات YouTube أو القراءة عن WordPress كفيلةٌ بجعلك قادرًا على خلق محتوىً رائع واحترافيّ بطريقةٍ صحيحة، بالإضافة لتعلم استخدام التصنيفات والصفحات الثانوية. لا تحتوي Wordpress على نظام تعدد اللغات، لكن بإمكانك تنصيب إضافات معدة لذلك سهلة الإستخدام. كما تستطيع تحمل عدد كبير من الزوار، فهي لا تنهار بسهولة، حتى مع الكثير من المحتوى. تحديثات WordPress ليست كبيرة مما يجعلها منصة مستقرة إلى حد ما. والآن سنلخص لكم أهم الإيجابيات والسلبيات للمنصة : الايجابيات:مجانية .سهلة التنصيب و الصيانة.نطاق مستخدمين واسع.أكبر عدد من الإضافات و الملحقات متاحة.صديقة لمحركات البحث مع العديد من الإضافات.مجموعة متميزة من القوالب.السلبيات:خياراتها محدودة.القوائم الرئيسية مرتبطة بالقالب المنصب وفي حالة اردت التعديل فانت بحاجه لمعرفة مسبقة في برمجية الـ wordpress.ليس كل الاضافات الخاصة بها سهلة الاستخدام و الفهم.مناسبة للمواقع التالية: المدونات، مواقع الشركات لصغيرة، المواقع الشخصية.Drupal:تعتبر من أعرقِ نظم إدارة المحتوى، فهي أول نظام إدارة محتوى تم اطلاقه عام 2001، وهي نظام مفتوح المصدر مجاني، تتميز بقوتها و سلاسة التعامل معها من جانب المطورين، فهي توفر خيارات متعددة ومرنه في التطوير وتمكنهم من بناء مواقع قوية وضخمة من خلالها، لذا لا نستغرب أن موقع البيت الابيض مثلا تم إنشاؤه من خلالها، كما أنها منصة تمتاز بالثبات، وبإمكانك بناء مواقع بمُحتويات مُركّبة، بفضل وجود وحدتي CCK و Views. يُمكنك استخدامها لبناء مواقع لا يُمكنك بناؤها باستخدام wordpress أو Joomla، هذه الوحدات تساعدك على بناء موقع بمحتوى متعدد ومتخصص، تتمكن من خلالها التحكم بطريقة أسلوب عرض المحتوى في الموقع بكل سهولة ويسر. لو أخذنا على سبيل المثال : موقع إعلانات مبوبة. من خلال هذه الوحدات بإمكانك إنشاء حقول محتوى متعددة والتحكم بهذه الحقول بكل سهولة ويسر وتنيظم عرض المحتوى، فمثلاً : لو أردت أن يظهر آخر ما تم اضافته للموقع من إعلانات أو ترتيب الإعلانات حسب المدينة أو تاريخ الإضافة، وغيرها العديد من الخيارات التي تمكنك من التحكم بشكل كبير في موقعك. من وجهة نظري، أهم ما يميز Drupal هو أن التصميم لا يتحكم بالموقع كما في WordPress، بل هي من تتحكم بالتصميم . ايجابياتها:مجانية.حل ممتاز للمواقع التي تمتلك حركة عالية من الزوار باستمرار.التحكم في حجم الموقع بكل سهولة.تتميز باستقرار عالي.القدرة على تحرير المحتوى من خلال الواجهة الأمامية للموقع.لديها نظام مستخدمين قوي ومرن في التعامل، يمكنك من منح أذونات متعددة.صديقة لمحركات البحث.سلبياتها:على خلاف WordPress، استخدام Drupal بحاجه لمعرفة مسبقة بتقنيات الـ HTML ، ومعرفة جيّدة بلغة البرمجة PHP.عدد القوالب الخاصة بها محدود.الإضافات المجانية قليله مقارنة بغيرها من نظم ادارة المحتوى. تكلفة الصيانة مرتفعة نسبيًا.مناسبة للمواقع التالية: الشركات الكبيرة، مواقع الإعلانات المبوبة، مواقع التجارة الإلكترونية الكبيرة.Joomla:إذا كنت تريد إنشاء مجتمع إلكتروني أو شبكة اجتماعية مع نظام العضويات فيها أو غُرف للأخبار، منتديات، موقع أخباري لنشر المقالات، أو استضافة كتّاب عديدين للنشر في موقعك ..الخ، ستكون Joomla الخيار الأمثل لك، لأنها مصممة لهذا الغرض. إنشاء هيكلية وبنية الموقع سهلة، فقط تحتاج منك معرفة أساسية بكيفية عمل المنصة، ولا تحتاج منك إلى أي معرفة بلغة الـHTML . تتيح لك المنصة إمكانية الجدولة الزمنية للمقالات، وتصنيفها حسب تاريخ النشر واسم المؤلف، والكثيرمن الخصائص الأخرى. تمنحكَ Joomla في لوحة التحكم الكثير من القوة والخيارات والخصائص. حتى تستطيع إعداد موقعك بسرعة وسهولة وحرفية، عليكَ اقتناء دليل يُعرّفك بماهية لوحة التحكم وكيفية استخدامها. محاولة التعلّم الذاتي والاكتشاف الشخصي لها بدون أي مساعد قد يأخذ منك عدة أيام بدون أية نتائج. المظهرالعام للقوالب بسيط، ويمكنك تغييرالألوان فيه وشعارالموقع أيضًا بسهولة. على الرغم من هذه الميّزة، ستلاحظ أنّ بنية مواقع Joomla الهيكلية معقدة. تدعم المنصة عدة لغات مدمجة في الموقع، مثلاً: العربية والإنجليزية والتحويل بينهما، ميّزة ذلك أنها مضمنة في المنصة بدون الحاجة لإضافتها على عكس Wordpress، كما تُعد حل وسط بين wordpress و Drupal فهي تتمتع بالسهولة وتعدد الوظائف. ايجابياتها:على الرغم من أنها لا تُشبه Wordpress، إلا أنها مازالت تُعد مرنه وسهلة للاستخدام من قبل المستخدم إلى حدٍ ما.كما هو الحال في wordpress، Joomla أيضًا لديها مجتمع إلكتروني كبير، وجمهور خاص بها .توفر عدد كبير من الملحقات والإضافات.سلبياتها:عملية استيراد المقالات من موقع لآخرصعبة ومعقدة. هناك الكثيرمن الإضافات التي تؤدي هذه الوظيفة، ولكن المشكلة تكمن في اختلاف إصدارات المنصة، الذي قد يؤدي إلى حدوث مشاكل كثيرة تتعلق بعدم التوافقية أوالتأثيرعلى نسق المحتوى أوحذف جزءٍ منه.استهلاك مصادر وموارد الخادم المُستضاف عليهِ الموقع. هذه المشكلة لم تتحسن في الإصدارات الحديثة حتى آخر إصدار وهو 2.5 الأحدث لها بل على العكس، المشكلة تفاقمت وأصبحت أكثر سوءًا.Joomla تقوم بالكثير من التحسينات على منصتها بشكلٍ منتظم، وهذا قد يؤدي لإلغاءِ وتحطيمِ الإصدارات السابقة من الإضافات. عملية الترقية من الإصدارات القديمة إلى الجديدة ليست بالمهمة السهلة، خصوصًا عندما يتعلق الأمر بتنصيب نظام العضويات المعقد أو نظام المنتديات .مناسبة للمواقع التالية: المنتديات، المجلات الإلكترونية، مواقع التجارة الإلكترونية متوسطة الحجم.Tumblr :البعض يعرفها كمنصة للتواصل الإجتماعي، والآخر يعتبرها منصة للتدوين المصغر. لكن القليل هم من يستخدمها بذكاء كموقع الكتروني. إذا كنت تفضل موقع بسيط بلوحة تحكم بسيطة وتواصل مباشر مع جمهورك بخيارات مرنه ف tumblr هي خيارك الأنسب. ايجابياتها:تستطيع اختيار نطاق خاص مجانًا.بإمكانك استضافة نطاق فرعي على tumblr للمدونة الخاصة بموقعك مثل : blog.yourdomain.com .سهلة الإستخدام و لا تحتاج لتدريب.تحتوي على ميزة الأسئلة والإجابات من خلال الجمهور.لديها تطبيقات للهواتف الذكية، مما يعني قدرة إدارة المحتوى الخاص بك من أي جهاز.سلبياتها:ليست مناسبه للمواقع ذات الوظائف المتعددة.غير مناسبة للمواقع ذات المحتوى الكبير.تفتقر للتحكم الكامل بالموقع بسبب استضافتها على خادوم Tumblr.مناسبة للمواقع التالية: مواقع نماذج الأعمال، موقع مدونة، موقع لمستقل (إذا كُنتَ مهندسًا أو طبيبًا، فالمنصة تُعد خيارًا مميزًا لنشر معلوماتك وخبراتك وسط جمهورٍ كبير، مع إمكانية التواصل معك وطرح الأسئلة والإستفسارات من قبل الجمهور) .بعد أن تعرفت على نظم إدارة المحتوى، هل يعني ذلك إلغاء فكرة البرمجة الخاصة؟ بالطبع لا. نظم إدارة المحتوى وجدت لتوفر علينا الوقت والجهد حسب متطلباتنا، إلا أن إمكانياتها رغم كثرتها وكبر حجمها تبقى محدودة. إذًاً... متى أحتاج لبرمجة الموقع ببرمجة خاصة ؟ لبناء نظام موظفين .في مواقع البنوك.في المواقع التي تقدم خدمة معينة مثل: مواقع تصميم الإنفوجرافيك.أيضًا إذا كنت بحاجة لعمل لوحة تحكم تتوافق مع نظام الشركة و يتعامل معها الموظفين.

هل رغبتَ يومًا في وضع شيءٍ ما ضمن الشريط الجانبيّ لموقعك إلا أنك لم تجد ما تفكّر به تمامًا ضمن الودجات Widgets الافتراضيّة أو في متجر الإضافات Plugins؟ الودجات هي أدوات فعّالة يمكن استخدامها لإظهار: محتوىً إضافي مرتبط بالصفحة، معلومات عن الكاتب، أعلى المقالات زيارةً، وغير ذلك. استخدام الودجات بشكل صحيح سيزيد من فاعليّة موقعك وتميزه، والعكس صحيح أيضًا. سنتناول في هذا المقال كيفية إنشاء ودجت خاصة بشكل مبسّط. كل ما يتوجب عليك معرفته هو أساسيات البرمجة بلغة PHP و HTML بالحدّ الأدنى، إضافةً لذلك سيكون من الجيد أن تلمّ ببعض مبادئ البرمجة الشيئيّة object oriented في PHP، رغم أنه ليس ضروريًا لفهم ما سنتحدث عنه اليوم، حيث سأطيل في شرح بعض النقاط مراعيًا ذلك. الهدف يعتبر التعلّم باستخدام الأمثلة أكثر الطرق نجاحًا وفاعليةً؛ لذا لنجرب وضع هدفٍ لنا في هذا المقال، ولنقل أننا سنبني ودجت لعرض المحتوى، تتضمن عنوانًا، نصًا بسيطًا، صورة، ورابط، بحيث يُعرض ذلك كلّه ضمن مربع أنيق على الشريط الجانبي. توضّح الصورة أدناه كيف تبدو الودجت بشكل افتراضي ضمن قالب Twenty Fifteen. سنجزّئ العمل إلى قسمين، يشمل الأول بناء الودجت بشكل كامل باستثناء ميزة عرض الصورة، بينما يستكمل القسم الآخر هذه المهمة، وذلك بهدف تبسيط الشرح. بناء الإضافة بإمكانك نسخ كامل النصّ البرمجيّ الذي سنعمل على بناءه في هذا المقال إلى ملف functions.php الخاص بالقالب الذي تستخدمه، لكن الودجت الحقيقية تأتي على شكل إضافة plugin، وباعتبار أن إنشاء واحدة هو أمرٌ سهل فلمَ لا تُكمل معنا خطوةً بخطوة. بدايةً أنشئ مجلد جديد داخل الدليل wp-content/plugins باسم معبّر عن ما سنقوم به، بالنسبة لي فقد أسميته my-featured-content. تاليًا سننشئ الملف الأساسي للإضافة داخل هذا المجلد، وانتبه إلى أن يتطابق اسم الملف المُنشئ مع اسم المجلد بينما يحمل اللاحقة PHP، ففي حالتي هذه يكون اسم الملف my-featured-content.php. افتح الملف الجديد وألصق به النصّ التالي، يُحَلّل هذا التعليق من قبل محرّك WordPress حيث تُستخدم البيانات الواردة ضمنه للتعريف عن الإضافة في قسم الإضافات ضمن لوحة التحكم في موقعك. <?php / Plugin Name: My Featured Content Version: 1.0 Plugin URI: http://danielpataki.com Description: Allows you to add an arbitrary featured item to the sidebar. Includes a title, image, description and a link. Author: Daniel Pataki Author URI: http://danielpataki.com/ / حتى الآن نكون قد أنشأنا إضافة جديدة بأسلوبٍ صحيح تمامًا بحيث تظهر لدينا إلى جانب الإضافات الأخرى في لوحة تحكم WordPress بذات الأسلوب المعروف باستثناء أنها لا تحمل أية وظيفة بعد. مكونات الودجت إنشاء ودجت لمنصة ووردبريس يتم عبر أربع خطوات: بدء وإعداد الودجت. العمل على البنية التحتيّة backend للودجت. استكمال البنية التحتيّة للودجت وإضافة ما يلزمها من قواعد معالجة rules for processing. إضافة واجهة رسومية frontend تدير تعامل المُستخدم مع الودجت. جميع هذه الخطوات تُترجم عمليًا على شكل دوال functions محدّدة، لنلقي نظرة على المخطط العام للخطوات الأربع السابقة برمجيًا: add_action( 'widgets_init', 'mfc_init' ); function mfc_init() { register_widget( 'mfc_widget' ); } class mfc_widget extends WP_Widget { public function __construct() { // Basic widget details } public function widget($args, $instance ) { // Widget output in the front end } public function update( $new_instance, $old_instance ) { // Form saving logic - if needed } public function form( $instance ) { // Backend Form } } وكما ترى فإننا أنشأنا فئة ممتدة class extending باسم WP_Widget، إذا لم يكن لديك فكرة عن معنى ذلك؛ فلا تقلق، إذ لا يلزمك هنا معرفة البرمجة الشيئيّة في PHP، كل ما يلزمنا حتى الآن هو بدء إعداد الودجت بشكل صحيح من خلال الفئة السابقة. انتبه أيضًا إلى أننا ضمنّا الدالة ()mfc_init داخل الحدث widgets_init، ومن خلال هذه الدالة نستخدم دالة أخرى هي ()register_widget لبدء إعداد الودجت بتمرير اسم الفئة mfc_widget لها. الأحرف الثلاثة الأولى في اسم الفئة "mfc" تشير إلى "My Featured Content"، يدعى هذا القسم بـ "بادئة اسم الدالة" function prefixing" ويهدف إلى إنشاء الدوال بأسماء مميزة تمامًا درءًا لمشكلة التعارض بين أسماء الدوال المستخدمة في مختلف الإضافات. نودّ الإشارة هنا أيضًا إلى الفرق بين ما يسمى بـ "الطريقة" method و"الخاصيّة" property، "الطريقة" هي دالة مضمّنة ضمن فئة class أو شيء object، فإذا أنشأنا الدالة خارج فئة أسميناها "دالة"، بينما نطلق عليها اسم "طريقة" فيما لو وضعت ضمن فئة، وتسمى المتغيرات Variables المعرّفة ضمن فئة ما بـ"الخصائص" properties. حاليًا لا يوجد أهمية على التفريق بينهما، إلا أنه من الجيد أن ترتب مفاهيمك بشكل صحيح. بنية الودجت الطريقة ()__construct تضم بعض المعلومات الأساسيّة حول الودجت، والتي تحدّد الفئة WP_Widget جزءًا كبيرًا منها. عن طريق إضافة النصّ التالي إلى بنية الودجت، ستظهر الأخيرة ضمن لوحة إدارة الودجات في ووردبريس: $widget_details = array( 'classname' => 'mfc_widget', 'description' =>h 'Creates a featured item consisting of a title, image, description and link.' ); parent::__construct( 'mfc_widget', 'Featured Item Widget', $widget_details ); نموذج البنية التحتيّة عندما يسحب المستخدم الودجت الخاصة بنا إلى الشريط الجانبي ستُعرض الودجت مع نموذج صغير لإعدادها، في مثالنا هذا نحتاج إلى الحقول التالية ضمن نموذج الودجت: العنوان، الشرح، عنوان الرابط، مسار الرابط (كما ذكرنا سنؤجّل إضافة الصورة إلى مرحلة لاحقة). في الأسفل النموذج النهائي للطريقة ()form، قد تبدو طويلة جدًا، لكن لا داعي للخوف؛ فسنشرح كل شيء بالتفصيل: <?php public function form( $instance ) { $title = ''; if( !empty( $instance['title'] ) ) { $title = $instance['title']; } $description = ''; if( !empty( $instance['description'] ) ) { $description = $instance['description']; } $link_url = ''; if( !empty( $instance['link_url'] ) ) { $link_url = $instance['link_url']; } $link_title = ''; if( !empty( $instance['link_title'] ) ) { $link_title = $instance['link_title']; } ?> <p> <label for="<?php echo $this->get_field_name( 'title' ); ?>"> <?php _e( 'Title:' ); ?> </label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this- >get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /> </p> <p> <label for="<?php echo $this->get_field_name( 'description' ); ?>"><?php _e( 'Description:' ); ?></label> <textarea class="widefat" id="<?php echo $this->get_field_id( 'description' ); ?>" name="<?php echo $this->get_field_name( 'description' ); ?>" type="text" ><?php echo esc_attr( $description ); ?></textarea> </p> <p> <label for="<?php echo $this->get_field_name( 'link_url' ); ?>"><?php _e( 'Link URL:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'link_url' ); ?>" name="<?php echo $this->get_field_name( 'link_url' ); ?>" type="text" value="<?php echo esc_attr( $link_url ); ?>" /> </p> <p> <label for="<?php echo $this->get_field_name( 'link_title' ); ?>"><?php _e( 'Link Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'link_title' ); ?>" name="<?php echo $this->get_field_name( 'link_title' ); ?>" type="text" value="<?php echo esc_attr( $link_title ); ?>" /> </p> يبدو النصّ البرمجي السابق طويلًا لاستخدامنا أربع حقول كما أسلفنا، حيث بدأنا بالإعلان عن قيمة كل حقل، المتغيّر instance$ يضم القيم الافتراضية للحقول تحسبًا لتركها فارغة من قبل المستخدم، ثم أنشأنا لكل حقل عنصرين، مربع لإدخال النصّ المطلوب وعنوان له label يوضّح وظيفته، استخدمنا برمجيًا لذلك كل من دالة ()get_field_name ودالة ()get_field_id. قد يتساءل هنا البعض؛ لماذا استخدمنا دوال للحقول الأربع بدل كتابة الأسماء والقيم بأنفسنا مباشرة؟ يعود ذلك لتجنب التعارض فيما إذا كان هناك ودجات مشابهة مستخدمة، وهكذا يتولى ووردبريس بآلياته الداخلية إدارة ذلك بشكل تلقائي. عنصر الإدخال الأخير يحمل الاسم link_url بدلًا من link فحسب. هذه هي الطريقة التي يعالج بها ووردبريس وجود مساحة متعدّدة للودجات، وأشرطة جانبية متعددة، وودجات متعددة. الكود السابق يجب أن يظهر على شكل نموذج ضمن قسم الودجات، والذي يمكن استخدامه لملئ الودجت بالمعلومات المطلوبة. معالجة بيانات النموذج تستخدم الدالة ()update للإعلان عن أية أحداث نرغب بتنفيذها قبل حفظ بيانات النموذج السابق، تشكّل الخلاصات RSS مثالًا جيدًا على ذلك، فعندما تُدخِل رابط rss وتحفظه، ستظهر لك آخر المقالات المنشورة، يمكن استخدام هذه الدالة أيضًا للتحقق من البيانات (فيما إذا كانت أرقامًا أو أحرفًا أو ما شابه، تبعًا للمطلوب)، أو للتحقق من صحة كتابة الروابط الخ... في الحقيقة نحن لا نحتاج إلى أي شيء هنا؛ لذا فإن دالتنا الأخيرة ستكون على الشكل التالي: public function update( $new_instance, $old_instance ) { return $new_instance; } عرض الودجت تعرض الدالة ()widget الودجت الخاصة بنا، يمكننا هنا إضافة وسوم HTML لتظهر على الشريط الجانبي. تأخذ هذه الدالة محدّدين Arguments؛ يحتوي الأول على بيانات متعلقة بمنطقة تموضع الودجت، بينما يضم الآخر القيم الافتراضية لمتغيرات الودجت. يتم إعداد منطقة تموضع الودجت بتعريف عدد من المعاملات Parameters، أهمها المحتوى قبل وبعد الودجت، وقبل وبعد عنوان الودجت. للتأكّد من توافق الودجت مع منصة ووردبريس ومع الإضافات الأخرى يمكنك استخدام الإطار التالي عندما تنشئ إضافة: echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title']; } // Rest of the widget content echo $args['after_widget']; داخل هذا الإطار نضيف قيمة حقل "الوصف" وحقل "الرابط" والذين حصلنا عليهما من حقلي link_url و link_title، شيء كهذا: <div class='mfc-description'> <?php echo wpautop( esc_html( $instance['description'] ) ) ?> </div> <div class='mfc-link'> <a href='<?php echo esc_url( $instance['link_url'] ) ?>'> <?php echo esc_html( $instance['link_title'] ) ?> </a> </div> لا تنسَ أخيرًا استخدام دالة الهروب escaping functions والتي ستحمي البيانات قبل تقديمها للمستخدم. للمزيد حول هذا الموضوع يمكنك قراءة المقال التالي من مركز WordPress Codex. إضافة صورة عند البحث عن أسلوب لإضافة صورة إلى الودجت فسنحصل على عدد من الطرق لفعل ذلك، والذي يتطلب بالحدّ الأدنى معرفة أساسيات التعامل مع JS و CSS حيث سنحتاج إلى معرفة كيفية إضافة هذه الأكواد إلى الودجت خاصتنا، ما سنستخدمه هنا هو دالة إدارة الوسائط المُقدّمة من ووردبريس، حيث لا داعي لإعادة اختراع العجلة. إذا كنتَ لا تزال ترغب في بناء دالتك الخاصة، فإن أسلوب العمل لتضمين نصوص JS و CSS متشابهٌ تقريبًا. نحن بحاجة إلى تضمن بعض الأكواد تمامًا كما لو كنا نعمل على الواجهة المرئية للودجت أو في لوحة إدارة ووردبريس، تعريف هذا الحدث يتم ضمن بنية الدالة بإضافة السطر التالي: add_action( 'admin_enqueue_scripts', array( $this, 'mfc_assets' ) ); إذا لم يكن لديك معرفة بالبرمجة الشيئية مع PHP فقد تختلط عليك الأمور قليلًا هنا، البارامتر الثاني للدالة ()add_action عادةً ما يكون سلسلة string تشير إلى الدالة المطلوبة، نفس الشيء يحدث هنا لكننا نبيّن أننا نريد الدالة ()mfc_assets محليًا ضمن الفئة التي أنشأناها، وليس دالة بمجال عام global scope. الخطوة التالية هي إنشاء الدالة ()mfc_assets داخل الفئة، ومن ثم إدراج نصوص JS و CSS اللازمة بداخلها: public function mfcassets() { wpenqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_enqueue_script('mfc-media-upload', plugin_dir_url(__FILE) . 'mfc-media-upload.js', array( 'jquery' )) ; wp_enqueue_style('thickbox'); } كما ترى، فإننا أضفنا كلًا من media-upload و thickbox وهي سكربتات JS مُقدّمة من ووردبريس تدير تعامل المستخدم مع الوسائط، كما أضفنا السكربت الخاص بنا mfc-media-upload.js، وهو ملف بسيط للغاية يدير عملية رفع الصور (سنتكلم عن ذلك بعد قليل)، أخيرًا وليس آخرًا أضفنا ملف التصميم CSS المطلوب من قبل الدالة thickbox. سنعود الآن خطوة إلى الوراء لتعديل عملنا السابق بإضافة حقل إضافة الصورة، حيث سيلزمنا معرفة قيمة حقل الصورة، وخرج عنصر التحكم بها، تمامًا كما فعلنا من قبل: $image = ''; if(isset($instance['image'])) { $image = $instance['image']; } <p> <label for="<?php echo $this->get_field_name( 'image' ); ?>"><?php _e( 'Image:' ); ?></label> <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat" type="text" size="36" value="<?php echo esc_url( $image ); ?>" /> <input class="upload_image_button" type="button" value="Upload Image" /> </p> وكما ترى فإن عملنا هنا مشابه تمامًا لما سبق، الإضافة الوحيدة هي زر إدخال input مع الفئة upload_image_button. أنشئ الآن ملفًا جديدًا باسم mfc-media-upload.js، سيضم هذا الملف نصّ جافا سكربت يعمل على إظهار مربع اختيار صورة عند الضغط على الزر، داخل الملف ضع الكود التالي: jQuery(document).ready(function($) { $(document).on("click", ".upload_image_button", function() { jQuery.data(document.body, 'prevElement', $(this).prev()); window.send_to_editor = function(html) { var imgurl = jQuery('img',html).attr('src'); var inputText = jQuery.data(document.body, 'prevElement'); if(inputText != undefined && inputText != '') { inputText.val(imgurl); } tb_remove(); }; tb_show('', 'media-upload.php?type=image&TB_iframe=true'); return false; }); }); بعد تحديد الصورة سيُمرر رابط الصورة إلى عنصر الإدخال السابق input element كي يحفظ. أخيرًا ينبغي تمرير قيمة الحقل لإظهار الصورة ضمن الودجت: <p> <img src='<?php echo $instance['image'] ?>'> </p> النتيجة النهائية ينبغي أن تكون شيئًا مشابها لما يلي: خاتمة كما ترى فإن كتابة ودجت ووردبريس ليست بالشيء الصعب، كتجربة أولى سيأخذ ذلك منك بعض الوقت، لكن مع الممارسة ستصبح العملية أبسط ولن تستغرق أكثر من 20 دقيقة على أبعد تقدير. إنها مهارة مهمة و تعطي موقعك الكثير من التميّز والتفرّد، إضافةً إلى تخفيف العبء بعض الشيء عن مطوريّ الوِب بإدارتك للشريط الجانبي ذاتيًا. إذا كنتَ تودّ الإطلاع على كامل الكود يمكنك تحميل المثال الذي كتبتُه لهذا الدرس من هنا، كما يمكنك تركيبه على منصة ووردبريس لموقعك، لكن لا تنسَ أن تطلع على الكود وتحاول أن تتعلم منه بعض الأشياء كذلك. ما هي الاستخدامات التي تفكّر بها لهذه الودجت؟ دعنا نطلع على أفكارك في التعليقات. تُرجم وبتصرف من المقال Creating a Featured Content Widget – With its Own Image Uploader لصاحبه Daniel Pataki.