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

تعتبر السيرة الذاتية من أهم الأدوات عند التقدم للحصول على وظيفة ولذلك يجب أن تكون جيدة الصياغة وتعرض مؤهلاتك بصورة ذكية. يتيح مايكروسوفت وورد إمكانية إنشاء سيرة ذاتية باستخدام القوالب الجاهزة أو إنشائها يدويا من الصفر. ولمعرفة كيفية إنشاء سيرتك الذاتية بإحدى الطريقتين، بالإضافة إلى بعض الأدوات والنصائح لتحسينها تابع معنا هذا الدرس. إنشاء السيرة الذاتية باستخدام القوالب بالإمكان الوصول إلى قوالب السيرة الذاتية مباشرة من نافذة بداية وورد: في حقل البحث سنكتب Resume ونضغط Enter لعرض القوالب الخاصة بالسير الذاتية. وهذه القوالب مصنفة بفئات مختلفة. أن كنت تستخدم إصدارات أقدم من وورد 2013 يمكنك الوصول إلى هذه القوالب من: ملف File > جديد New ثم البحث في حقل البحث الخاص بالقوالب. حقوق الصورة ننقر على أحد المصغرات لعرض معاينة للقالب، ونستخدم الأسهم للتنقل بين القوالب. عندما نختار المناسب ننقر إنشاء Create: بعد تنزيل القالب وفتحه في وورد سنبدأ بتحرير القالب وكتابة المعلومات الشخصية، الهدف المهني، المهارات، الخبرات، إلخ. يحتوي القالب على إرشادات بسيطة تخبرنا ما الذي يجب كتابته في كل حقل: بإمكاننا نسخ ولصق النصوص من نسخة قديمة من السيرة الذاتية إن وجدت. عند لصق النصوص يمكننا تنسيقها من خانة الأنماط لتتلاءم مع تنسيقات القالب. أو استخدام خيارات اللصق عن طريق زر Ctrl. نستخدم الأمر Keep Text Only إذا كنا نرغب في اللصق دون تنسيق: أو نستخدم خيار Merge Formatting لدمج التنسيقات، أي جعل حجم ونوع الخط متناسقا مع القالب، والاحتفاظ بالتنسيقات الأخرى للنص الأصلي كالنصوص العريضة والمائلة، إلخ: يجب أن نأخذ في الاعتبار عند إنشاء السيرة الذاتية أن نكون محددين جدا في فقرة الهدف المهني Objective. إذ يجب أن يكون الهدف مختلفا باختلاف الشركة التي نقدم للحصول على وظيفة فيها. لا تستخدم نفس الهدف المهني لجميع الشركات. تحتوي القوالب، وخصوصا قوالب السير الذاتية، على حقول بتنسيقات معينة، وتحتوي على نصوص إرشادية، تسمى هذه الحقول عناصر التحكم بالمحتوى Content Controls. كمثال على هذه العناصر الحقل المؤشر في الصورة أدناه: لدينا خيار استخدام هذه العناصر أو إزالتها بالنقر بزر الفأرة الأيمن عليها واختيار Remove Content Control: يمكننا التعديل على تنسيق وتصميم القالب من تبويب تصميم Design. يمكننا اختيار التنسيق الذي يناسبنا من أحجام النصوص، الألوان أو المسافات بين الأسطر والفقرات، وغيرها، وذلك معرض تنسيقات المستند Document Formatting: أو من معرض نسق Themes: استخدام الجداول في إنشاء السيرة الذاتية يفضل البعض عدم استخدام القوالب لإنشاء السيرة الذاتية، ويعتمدون على مفتاح tab أو المسطرة في تنسيق المسافات بين عناوين الأقسام وما يقابلها. لكن هناك طريقة أسهل وأسرع وهي استخدام الجداول. ولفعل ذلك سنقوم بالخطوات التالية: سنقوم بفتح مستندًا جديدًا وكتابة المعلومات الشخصية في بداية الصفحة، ثم سنقوم بإدراج جدول Table من تبويب إدراج Insert: سنقوم بإدراج عمودين، أحدهما لعنوان القسم، والآخر لما يقابل تلك الأقسام من معلومات. أما عدد الصفوف فيعتمد على عدد الأقسام التي تريد إضافاتها، أي صف للهدف المهني، صف للخبرات، صف للمهارات، إلخ. بعدها سنقوم بكتابة المحتويات، وسنستخدم خلية واحدة لكل قسم، أي سنكتب جميع المهارات أو الخبرات السابقة في خلية واحدة من الجدول مهما كان عددها: الخطوة التالية بعد الانتهاء من الكتابة هي تنسيق الجدول. سنقوم بتقليل عرض العمود الأول لإزالة المساحة الزائدة والاستفادة منها في زيادة عرض العمود الثاني. سنضع المؤشر على الحد بين العمود إلى أن يتغير شكله إلى متجهين، ثم سنقوم بالسحب إلى جهة اليسار: ثم سنقوم بإضافة عمود وسطي كحاجز رفيع يفصل بين العمودين، بالنقر على علامة (+) التي تظهر عن وضع المؤشر على الحد بين العمودين وهي طريقة سريعة لإدراج أعمدة (أو صفوف) في إصدار 2013 من البرنامج: أو بالنقر داخل أحد خلايا العمود الأول، والتأشير فوق إدراج Insert واختيار إدراج عمود إلى اليمين Insert Column to Right: وسنقوم بتقليل عرض هذا العمود لأننا لا نريد من الحاجز أن يكون كبيرًا جدًا: بالتأكيد لا نريد إظهار حدود الجدول في السيرة الذاتية لذلك سنقوم بإزالتها. سنحدد جميع خلايا الجدول أولا من أيقونة (+) في حافة الجدول: ثم سنذهب إلى تبويب تصميم Design السياقي الخاص بالجدول، ونختار بلا حدود No Borders من أمر حدود Borders: ما زال بإمكاننا تعديل أبعاد الجدول حتى بعد إزالة الحدود. يمكننا استخدام خطوط الشبكة Gridlines. هذه الخطوط لا تظهر عند الطباعة لكنها تساعدنا على معرفة أماكن حدود أعمدة وصفوف الجدول. سنقوم بتحديد الجدول أولا من أيقونة (+) كما في الخطوة السابقة، ومن أمر حدود سنختار عرض خطوط الشبكة View Gridlines: انتهينا تقريبا من إنشاء السيرة الذاتية. ما تبقى هو تنسيق النصوص وأحجامها، أو إضافة عناصر تصميمية في رأس Header الورقة. نصائح وأدوات لتحسين السيرة الذاتية اليوم أصبح أغلب الباحثين عن عمل يقدمون سيرهم الذاتية عبر الإنترنت. وتخضع تلك السير الذاتية للبحث عن كلمات معينة بواسطة أنظمة تتبع تستخدم من قبل أصحاب العمل. الأمر أشبه بتهيئة محركات البحث SEO، إذ يجب أن تتضمن سيرتك الذاتية الكلمات التي تجعل العثور عليها سهلا عند البحث. تسمى هذه الكلمات بالكلمات المفتاحية Keywords أو الكلمات الفعالة Power Words. تحتاج إلى سيرة ذاتية احترافية؟ استعن بأفضل خبراء التوظيف في الوطن العربي لمساعدتك على إنشاء سيرة ذاتية احترافية بتصميم عصري وجذاب أنشئ سيرتك الذاتية الآن تختلف هذه الكلمات باختلاف الوظيفة التي تُقدم إليها ويجب عليك أن تذكر الكلمات المناسبة ذات الصلة بالعمل الذي تبحث عنه والتي تجذب صاحب العمل. ابحث عن الكلمات المستخدمة في الوصف الوظيفي وضمنها في سيرتك الذاتية. فإذا كانت الوظيفة تتطلب خبرة في برامج التصميم الجرافيكي من ضمنها Photoshop ،Illustrator ،After Effects ...إلخ، تحدث عن هذه البرامج ضمن خبراتك أو اذكرها ضمن مهاراتك، لكن بالطبع إذا كنت مؤهلا لذلك. وإذا كنت تقدم طلبا للعمل في شركة هواتف، تحدث عن الهواتف بالتحديد وليس الأجهزة الذكية بصورة عامة. كن محددا. من الأمور الأخرى التي يجب مراعاتها في السيرة الذاتية هو تجنب تكرار الكلمات. في بعض الأحيان تكرر الكثير من الكلمات دون أن تدرك ذلك. في المثال أدناه هناك العديد من الكلمات المكررة، "expert specialist"، "high experience"... ما سنفعله هو أننا سنقوم بالبحث عن مرادفات لتلك الكلمات واستبدالها. أولا سنقوم بوضع المؤشر فوق إحدى الكلمات، ثم ننقر بزر الفأرة الأيمن ونؤشر فوق مرادفات Synonyms، وسنختار واحدة من المرادفات المقترحة: وإذا لم نجد الكلمة التي تناسبنا سنبحث في Thesaurus الذي يوفر المزيد من المرادفات: وكذلك هناك ما يسمى بصفحة المقدمة أو الخطاب المرفق مع السيرة الذاتية Cover Letter. وهي عبارة عن صفحة تُرفق في بداية السيرة الذاتية توضح بشكل مختصر وسريع الهدف من الوظيفة والمؤهلات التي تجعلك مناسبا للوظيفة التي تقدم إليها. يجب أن تحرص على صياغة صفحة المقدمة بطريقة ذكية وجذابة، فقد تكون هي فرصتك للحصول على الوظيفة. وإذا لم تكتب صفحة مقدمة من قبل، أو لم تكن معتادا على كتابتها يمكنك استخدام قوالب وورد. إذ تتوفر عدة قوالب بالتنسيق الرسمي، يمكنك تنزيلها وتحريرها. من صفحة البداية وفي حقل البحث، اكتب resume cover letter واختر أحد القوالب. قم بتنزيل القالب وابدأ بتحريره حسب الإرشادات في حقول التحكم بالمحتوى. بهذا تكون قد تعرفت على كيفية إنشاء سيرتك الذاتية، والتي إن كنت منشغلًا عن إتمامها كما يجب، أو كنت بحاجة لواحدة ذات احترافية عالية، فيمكنك استعمال خدمة كتابة السير الذاتية المقدمة من منصة بعيد، التي تمنحك سيرةً ذاتيةً احترافيةً مقدمةً من طرف خبراء في التوظيف، وهذا بتصاميم مميزة تستهدف مجالات العمل المختلفة؛ إلى جانب بعض المزايا الإضافية التي ستفيدك أكثر لرفع حظوظك بالتوظيف، وسنوضح بعضها في الآتي: الحصول على استشارة فردية مع أحد خبراء التوظيف. الحصول على السيرة الذاتية بنسختين عربية وإنجليزية حسب الباقة التي ستختارها، وبالنموذج الذي تراه مناسبًا لك. إجراء مقابلة توظيف تجريبية يقودها أحد اخصائيي التوظيف، لتكون بمثابة تدريب لك ليوم مقابلة العمل الفعلية مع التطرق إلى أهم الأسئلة التي قد تُطرح عليك فعليًا، وبطبيعة الحال ستحصل على بعض التعقيبات والتوجيهات التي ستساهم في رفع جاهزيتك والتحضير لمقابلات العمل. الحصول على مساعدة لإعداد ملف مهني احترافي على بعيد وإعداد ملفاتك الشخصية على مستقل وخمسات للتعريف بخبراتك ومهاراتك الشخصية. وإن كنت بحاجة لفهم أوسع حول الأمور قبل حصولك على باقة من الباقات المتاحة، فيمكنك التواصل مع الدعم الفني للمنصة لإجابتك عن استفساراتك.

تعرّفنا في الدّرس السّابق على كيفيّة تهيئة بيئة التّطوير وكيفيّة إنشاء تطبيق يقبل قيما من المُستخدم ويُعالجها ثمّ يُرجع النّتيجة على شكل صفحة HTML ليقرأها المُتصفّح، لكنّنا لم نستخدم لغة HTML كما يجب لأنّنا وضعنا شيفراتها داخل ملفّ app.py المكتوب بلغة بايثون. ما يعني بأنّنا جمعنا لغتين في ملفّ واحد، وهذا أمر غير مُناسب ولا يُمثّل مُمارسة جيّدة، الطريقة الأنظف هي بجعل شيفرات بايثون مُستقلّة عن شيفرات لغة HTML. وهذا بالضّبط ما سنتعلّمه في هذا الدّرس. استعمال قوالب HTML يُمكن فصل ملفّات HTML عن ملفّ لغة بايثون بوضعها داخل مُجلّد باسم templates (اسم المُجلّد مهم)، ويكون هذا المُجلّد في نفس مسار الملف app.py. بعد ذلك يُمكن تقديم الملفّ من قبل التّطبيق المكتوب بلغة بايثون عبر الدّالة render_template (يجب استيرادها في البداية) مع تمرير اسم الملفّ. أولا ادخل إلى مُجلّد flask_app ثمّ أنشئ مجلّدا جديدا باسم templates بعدها أنشئ ملفّا باسم index.html داخل هذا المُجلّد، وضع به شيفرة HTML التّاليّة: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>الصّفحة الرّئيسيّة</title> </head> <body style="direction: rtl;"> <h1>السّلام عليكم ورحمة الله</h1> </body> </html> يُمكننا الآن أن نجعل التّطبيق app.py يُقدم هذه الشّيفرة، وذلك أولا باستيراد الدالة render_template واستدعائها مُباشرة بعد جُملة return. # -*- coding:utf8 -*- from flask import Flask, render_template app = Flask(__name__) # Home Page @app.route("/") def home(): return render_template('index.html') if __name__ == "__main__": app.run(debug=True) بعد تشغيل التّطبيق زر العنوان http://127.0.0.1:5000. ستُلاحظ بأنّ مُحتوى الصّفحة هو نفسه مُحتوى الملفّ index.html، ويُمكنك مُشاهدة مصدر الصّفحة بالضّغط على زر الفأرة الأيمن واختيار الخيار View Page Source. تمرير متغير وعرض قيمته يُمكن تمرير المُتغيّرات إلى ملفّ HTML لعرض قيمها بإضافتها كمُعاملات للدّالة render_template. # Home Page @app.route("/") def home(): return render_template('index.html', page = u"الصّفحة الرّئيسيّة") لاحظ بأنّنا قُمنا بإضافة المُتغيّر page وأسندنا له القيمة "الصّفحة الرّئيسيّة"، يُمكننا الآن عرضه في ملفّ HTML بإحاطته بعلامات {{ }}، في المثال التّالي، نعرض قيمة المُتغيّر page داخل وسم h3 مُباشرة بعد الجملة الرّئيسيّة. <body style="direction: rtl;"> <h1>السّلام عليكم ورحمة الله</h1> <h3>{{ page }}</h3> </body> بعد تعديل الملفّ وحفظه ستُلاحظ بأنّ السّطر {{ page }} قد تغيّر إلى عبارة "الصّفحة الرّئيسيّة". عند مُشاهدة مصدر الصّفحة ستُلاحظ بأنّ السّطر: <h3>{{ page }}</h3> قد تحوّل إلى السّطر: <h3>الصّفحة الرّئيسيّة</h3> وهذا هو العمل الرّئيسي لمُحرّك القوالب Jinja2. يُمكن كذلك تقديم نفس ملفّ HTML عبر أكثر من توجيه، كما يُمكن أن تكون قيم المُتغيّرات المُمرّرة مُختلفة، فمثلا المُوّجه الرّئيسي / سيؤدي إلى تقديم الصّفحة index.html مع مُتغيّر يحمل القيمة "الصّفحة الرّئيسيّة". ويُمكن إضافة توجيه آخر /hello، مع تقديم نفس الملفّ ومُتغيّر page بالقيمة "صفحة التّرحيب". وبالتالي سيُصبح التطبيق الكامل كالآتي: # -*- coding:utf8 -*- from flask import Flask, render_template app = Flask(__name__) # Home Page @app.route("/") def home(): return render_template('index.html', page = u"الصّفحة الرّئيسيّة") # Hello Page @app.route("/hello") def hello(): return render_template('index.html', page = u"صفحة التّرحيب") if __name__ == "__main__": app.run(debug=True) يُمكنك كذلك عرض قيمة المُتغيّر في أكثر من موضع، مثلا يُمكنك وضعه كعنوان للصّفحة داخل الوسم title. <head> <meta charset="UTF-8"> <title>{{ page }}</title> </head> بعد تشغيل التّطبيق، سنتمكّن من الوصول إلى صفحتين تُقدّمان نفس ملفّ HTML مع اختلاف في قيمة المُتغيّر page (أي اختلاف في مُحتوى الوسم h3 وعنوان مُناسب لكلّ صفحة). الصّفحة الرّئيسيّة: http://127.0.0.1:5000 صفحة التّرحيب: http://127.0.0.1:5000/hello التعليقات يُمكن وضع تعليقات في مُحرّك القوالب Jinja2 بإحاطتها بعلامات {# تعليق #}، والتّعليق لن يظهر حتى بعد النّظر إلى مصدر الصّفحة، ويُمكن استعماله كالتّالي: <body style="direction: rtl;"> <h1>السّلام عليكم ورحمة الله</h1> {# هذا تعليق لن يظهر للزائر #} <h3>{{ page }}</h3> </body> الجمل الشرطية في محرك القوالب Jinja2 تعرّفنا إلى الآن على طريقة تقديم ملفّات HTML وكيفيّة تمرير المُتغيّرات من ملفّ بايثون إلى ملفّ HTML وكيفيّة عرض قيّمها. لكن مُحرّك القوالب Jinja2 ليس لهذا الغرض فقط، بل يُمكّننا كذلك من استعمال خصائص لغة بايثون، مثل الجمل الشّرطية وحلقة التّكرار for وغير ذلك. انتبه فقط إلى حقيقة أنّ بنية الجمل Syntax الخاصة بلغة بايثون مُختلفة عن بنية الجملة في مُحرّك القوالب Jinja2. فمثلا جملة شرطيّة في لغة بايثون ستكون كالتّالي: x = 10 if x == 10: print x أمّا في Jinja2 فستكون كالتّالي: {% set x = 10 %} {% if x == 10 %} {{ x }} {% endif %} أول فرق قد تُلاحظه هو أنّ جميع الشيفرات مُحاطة بالعلامات {% %} وعرض المُغيّر يكون داخل علامات {{}}. وبالنّسبة لتعريف مُتغيّر وإسناد قيمة له فيلزمه كلمة set. كما يجب إنهاء الجملة الشّرطية بجملة endif، كما أنّ الإزاحة ليست ضروريّة في مُحرّك Jinja2. مُلاحظة: يُفضّل عدم تعريف المُتغيّرات مُباشرة في ملفّات HTML إلا لحاجة، ومن الأفضل تعريفها داخل ملفّات بايثون. لإضافة جملتي elif و else يُمكن القيام بالتّالي: {% set x = 6 %} {% if x == 10 %} x يُساوي 10 {% elif x == 5 %} x يُساوي 5 {% else %} x يُساوي شيئا آخر {% endif %} جرّب تغيير قيمة المُتغيّر x وانظر إلى النّتيجة. حلقة for تعرّفنا على كيفيّة عرض مُتغيّر يحمل قيمة واحدة فقط، لكن ماذا لو أردنا أن نعرض عناصر قائمة ما، بحيث يعرض كلّ عنصر داخل وسم مُعيّن، يُمكن ذلك عبر حلقة for ويُمكن كتابتها كالآتي: {% for item in list %} <h1> {{ item }} </h1> {% endfor %} بحيث list هي القائمة مُتعدّدة العناصر. مثال لنفترض بأنّه لدينا قائمة مقالات لعرضها للزائر، بحيث تكون القائمة كالتّالي: posts = [ u"مُحتوى المقال الأول", u"مُحتوى المقال الثاني", u"مُحتوى المقال الثالث", u"مُحتوى المقال الرابع" ] سنقوم أولا بإنشاء توجيه جديد باسم posts إلى ملفّ app.py وسنُمرّر ملفّ index.html مع تمرير القائمة إلى الملف. # Posts Page @app.route("/posts") def posts(): posts = [ u"مُحتوى المقال الأول", u"مُحتوى المقال الثاني", u"مُحتوى المقال الثالث", u"مُحتوى المقال الرابع" ] return render_template('index.html', posts = posts, page = u"صفحة عرض المقالات") لاحظ بأنّ المُعامل الثاني للدّالة render_template هو posts = posts، الأمر يعني بأنّ القائمة المُمرّرة للقالب اسمها posts وستحمل قيّم القائمة posts المتواجدة في الأعلى. يُمكن عرض كل مقال داخل وسم p بالطّريقة التّاليّة: {% for post in posts %} <p> {{ post }} </p> {% endfor %} يُمكنك الآن زيارة مُدوّنتك المُتواضعة عبر الرّابط http://127.0.0.1:5000/posts. إذا قُمت بعرض مصدر الصّفحة فستُلاحظ ما يلي: <h3>صفحة عرض المقالات</h3> <p> مُحتوى المقال الأول </p> <p> مُحتوى المقال الثاني </p> <p> مُحتوى المقال الثالث </p> <p> مُحتوى المقال الرابع </p> لاحظ بأنّ الوسم p قد تكرّر مع عرض كلّ عنصر. تنسيق الصفحات، إضافة الملفات الساكنة الملفّات السّاكنة هي الصّور وملفّات CSS أو Javascript وتوضع في مُجلّد باسم static بجانب المُجلّد templates. في هذا القسم سنُضيف ملفّ CSS لتنسيق عرض المقالات أعلاه. أنشئ مُجلّدا باسم static داخل مُجلّد المشروع (بجانب المُجلّد templates). بعدها أنشئ 3 مُجلّدات داخل هذا المُجلّد أسماؤها كالتّالي: static ---| css # هنا توضع ملفّات التّنسيق ---| js # في هذا المُجلّد يُمكنك وضع ملفّات جافاسكريبت ---| img # ضع الصّور في هذا المُجلّد بعد إنشاء المُجلّدات أنشئ ملفّ تنسيق باسم style.css داخل مُجلّد css، وضع به ما يلي: body { text-align: center; } h3 { color:#1383EA; } p { font-size: 14px; } للرّبط بين ملفّ css وملفّ HTML، يُمكننا الاعتماد على دالة url_for التّي يُقدّمها مُحرّك القوالب Jinja2 لإعطاء مرونة أكثر في التّعامل مع ملفّات مُتعدّدة، واستخدامها يكون كالتّالي: {{ url_for('static', filename='path/to/file') }} مع تغيير path/to/file إلى مسار الملفّ. وبالتّالي لتضمين ملفّ style.css داخل ملفّ index.html فسيتوجّب علينا إضافة السّطر التّالي إلى وسم head. <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}"> بعد حفظ الملفّ ستُلاحظ بأنّ المُحتوى أصبح يتوسّط الصّفحة، وستُلاحظ كذلك بأنّ لون عنوان الصّفحة قد تغيّر إلى الأزرق. مُلاحظة: عند التّعديل على ملفّ التنسيق وحفظه قد تحتاج إلى إعادة تحميل الصّفحة كاملة بتركيبة المفاتيح CTRL+SHIFT+R وذلك لأنّ المُتصفّح يخبّئ الملف عند أول مرّة تزور فيها الصّفحة وبالتالي فسيعطيك نفس الملف غير المُعدّل في كلّ مرّة تعيد فيها تحميل الصّفحة، والحلّ هو بإعادة تحميل كاملة لجميع الملفّات. ربط ملفات Javascript مثلما هو عليه الحال مع ملفّات css يُمكنك ربط ملفّات جافاسكريبت بوضعها داخل وسم script واستخدام الدّالة url_for. إليك مثالا: <script src="{{ url_for('static', filename='js/main.js')}}"></script> مع مُلاحظة بأنّ ملفّ main.js يجب أن يكون داخل المُجلّد js وليس في مكان آخر. عرض الصور يُمكن كذلك استعمال الدّالة لعرض الصّور، كلّ ما عليك فعله هو وضع الصّورة داخل المُجلّد img وعرضها بالدّالة url_for داخل وسم img، مثلا ضع صورة حسب رغبتك داخل المجلّد img وسمّها logo.png. لعرضها أعلى الصّفحة يُمكن إضافة السّطر التّالي مُباشرة بعد وسم body. <img src="{{ url_for('static', filename='img/logo.png')}}" /> بهذا سيُصبح التّطبيق كالتّالي: يُمكنك تصفّح ملفّات التّطبيق من هذا الرّابط. خاتمة بعد أن تعرّفنا على طريقة تمرير قيم المُتغيّرات من بايثون إلى ملفّات HTML أصبح بإمكاننا أن نستعمل قاعدة بيانات تحتوي على جدول للمقالات عوضا عن استعمال قائمة أو قاموس، في الدّرس القادم سنتعرّف على قاعدة البيانات SQLite يُمكن استخدامها لحفظ المقالات.

يُعَد اختيار القالب المناسب لموقعك الإلكتروني هو فقط الخطوة الأولى للبدء بتخصيص الموقع، حيث تتضمن قوالب ووردبريس إمكانية تخصيصها وتعديل التصميم والأشكال ضمن موقعك مع معاينة مُباشرة لهذه التعديلات (أي قبل نشر التعديلات وتثبيتها على الموقع) في الزمن الحقيقي، حيث لا بد من إجراء بعض التعديلات على تصميم القالب مهما كان هذا التصميم جميلًا ليتناسب مع الهوية البصرية التي اخترتها للموقع والشعار، لذلك سوف نشرح بالتفصيل كيفية استخدام التخصيص في قالب ووردبريس، وكيف تصل للخيارات المتعددة التي يوفرها القالب عبر نافذة التخصيص وعمل هذه الخيارات. أين تستطيع إيجاد موضع تخصيص قالب ووردبريس يتضمن كل قالب ووردبريس على مُخصِّص، وللوصول له عليك تسجيل الدخول في الموقع والتوجه إلى لوحة التحكم حيث يوجد قسم "المظهر" في القائمة الجانبية، بعدها اضغط ضمن هذا القسم على تبويب "تخصيص" لتظهر لك نافذة المُخصِّص للقالب الحالي النشط للموقع، أما للخروج من المُخصِّص فعليك الضغط على إشارة × في الزاوية العلوية اليمنى. سوف تجد نفس لوحة التحكم ضمن المُخصّص بغض النظر عن القالب الذي تستخدمه، ويُضيف القالب هنا خياراته المتقدمة التي تُسهل عليك تطبيق التغييرات على الموقع من مكان واحد. ما هي وظائف وخيارات التخصيص تظهر لك خيارات التخصيص على يمين الصفحة عند فتح نافذة التخصيص والمعاينة المُباشرة للموقع على يسار الصفحة، وعليك تذكر أن هذه معاينة لما سيبدو عليه موقعك عند تطبيق التغييرات ونشرها، وليست لما يبدو عليه موقعك الآن. ولتطبيق أي تغيير عليك اختيار أحد التبويبات الموجودة في لوحة التحكم وضبط الإعدادات التي تُقدمها، أو تستطيع النقر على القلم الأزرق للانتقال إلى خيارات العنصر التابع له، حيث سيظهر هذا القلم على بعض العناصر وليس جميعها. سوف نشرح الآن الخيارات المختلفة التي تستطيع استخدامها في مُخصّص قالب ووردبريس. تخصيص اسم الموقع والشعار وأيقونة الموقع تستطيع تغيير اسم الموقع وسطر الوصف وأيقونة الموقع من خلال تبويب "هوية الموقع"، وتُعَد الخطوات لتعديل العناصر السابقة بسيطةً جدًا وواضحة، فلرفع شعار أو أيقونة الموقع مثلًا، عليك النقر على "تحديد الشعار" أو "تحديد أيقونة الموقع"، ثم تحديد موقع الشعار أو الأيقونة سواءً كانت على حاسوبك أو ضمن مكتبة وسائط ووردبريس. بعض الأمور التي عليك معرفتها: سوف يُعرض اسم الموقع في أعلى الموقع ضمن الترويسة الرئيسية له. إذا لم تُعدّل وصف الموقع فسوف يستخدم ووردبريس الوصف الافتراضي وهو "موقع ووردبريس آخر". لا تدعم جميع القوالب الشعار، فمن المُمكن إضافة شعارك باستخدام هذا الخيار ولكنه لن يظهر ضمن الموقع وهذا يعني أن القالب الذي تستخدمه لا يدعم هذه الجزئية. تظهر أيقونة الموقع في لسان المتصفح من الأعلى عند زيارة أي صفحة ضمن الموقع. إضافة أو إخفاء صورة الترويسة يُمكن إيجاد خيار تعيين صورة الترويسة في المُخصّص إذا كان قالبك يدعمها، وعادةً يأتي هذا الخيار مع تعليمات حول أبعاد الصورة التي يجب عليك استخدامها ضمن الترويسة. تستطيع قص الصورة بعد رفعها لووردبريس للحصول على الأبعاد الصحيحة المناسبة للقالب وتستطيع إخفاء هذه الصورة أيضًا إذا كنت لا تُحبّذ استخدام صور ضمن الترويسة. تغيير ألوان الموقع يسمح لك هذا التبويب بتغيير ألوان الموقع ولكن الخيارات التي تجدها هنا تعتمد على القالب المُستخدم، حيث سوف تكون قادرًا مثلًا على تغيير لون نص الترويسة ولون خلفية الترويسة ولون خلفية الموقع فقط، أما عند استخدامك لقالب آخر فتستطيع فقط تغيير لون الخلفية، تقدم بعض القوالب خيارات أوسع في هذا القسم لتغيير ألوان الخلفيات والنصوص والتأثير عند تحريك الفأرة فوق قسم مُعيّن، وكما ذكرنا فهذا يعتمد على القالب المُستخدم. تغيير الخط الافتراضي للموقع إذا رأيت تبويب الخط Typography، فهذا يعني بسماح المُخصّص لك بتغيير الخط الافتراضي ضمن الموقع وتعتمد الخيارات الموجودة على القالب المُستخدم، لذلك القالب لا يوفر خيارات تحكم كافية في الخط، تستطيع استخدام إضافة مُخصصة لهذا الأمر أو استخدام CSS مُخصّص لتغيير الخطوط المُستخدمة في الموقع. اختيار إعدادات الصفحة الرئيسية اختر "صفحةً ثابتةً" إذا كنت تريد عرض صفحة رئيسية مُختلفة في موقعك عن المدونة، حيث سوف تظهر عندها قائمة منسدلة تتضمن أسماء الصفحات في موقعك لتختار منها، وتستطيع اختيار صفحة المقالات من قائمة منسدلة منفصلة. إذا كنت لا تملك صفحات لاستخدامها صفحةً رئيسيةً أو صفحة مقالات، فتستطيع الضغط على خيار "أضف صفحةً جديدةً" الموجود أسفل القائمة المنسدلة، سوف يُنشِئ هذا الخيار صفحةً فارغةً تستطيع تسميتها بالاسم الذي تُريد وتصميمها فيما بعد، لكن إذا كنت لا تملك أي صفحة منشورة، فغالبًا لن يظهر لك هذا الخيار ويجب عليك إنشاء صفحة من خلال لوحة التحكم بالضغط على "أضف جديدًا" في قسم "صفحات". إعدادات خيارات المحتوى إذا تضمّن قالبك خيارات للمحتوى فعندها سوف تتحكم أكثر بكيفية عرض محتواك ضمن صفحات مُختلفة من الموقع، تختلف هذه الخيارات من قالب لآخر (في حال وجودها في قالبك)، ولذلك سوف نذكر أكثرها رواجًا، وهي الآتية: نبذة تعريفية عن الكاتب: تستطيع اختيار عرض النبذة التعريفية عن الكاتب في منشورات المدونة أو إخفاءها. عرض المدونة: اختيار عرض مُقتطف المدونة أو محتوى المدونة بكامله. الصور البارزة: اختيار مكان عرض الصور البارزة ضمن منشورات المدونة أو الصفحات. تفاصيل المقالات: اختيار أي التفاصيل يجب عرضها ضمن المنشور، مثل التاريخ والفئات والوسوم والكاتب. ربما لن تجد هذه الإعدادات ضمن المُخصّص ولكنك تستطيع الوصول لها في مكان آخر ضمن لوحة تحكم ووردبريس، وذلك حسب القالب، حيث تستطيع مثلًا الاختيار بين عرض محتوى المدونة الكامل أو مُقتطفها لمنشورات المدونة ضمن لوحة التحكم من تبويب "قراءة" في قسم "الإعدادات". إنشاء قوائم تستطيع من خلال خيار "قوائم" إنشاء قوائم مُختلفة واختيار مكان عرضها ضمن موقعك الإلكتروني، أو إيجاد القوائم الحالية في موقعك وأماكن استخدامها والتعديل عليها أو تغييرها. اضغط على "مشاهدة كل الأماكن" لتتمكن من معرفة المواقع المُختلفة التي تستطيع عرض القوائم ضمنها في موقعك، إذ تختلف هذه الأماكن من قالب لآخر. تستطيع أيضًا إضافة ودجت قائمة لعرض القائمة التي تريد ضمن الأماكن المُخصصة للودجات في موقعك، ولذلك من المُفيد تجريب الأماكن المُختلفة التي يوفرها قالبك قبل تحديد الأماكن النهائية لعرض هذه القوائم ضمن الموقع. اضغط على "إنشاء قائمة جديدة" إذا كنت لا تملك أي قائمة بعد، ثم أَعطِ اسمًا لهذه القائمة -لن يُعرض الاسم ضمن الموقع ولكنه مُستخدم لأغراض إدارية فقط ولمُساعدتك على معرفة القائمة التي تعمل عليها-، عليك الآن اختيار مكان عرض القائمة ثم الضغط على "التالي" عند الانتهاء من اختيار الاسم والموقع. اضغط على "أضف عناصرًا" واختر المكونات التي تريد عرضها ضمن هذه القائمة، تستطيع إضافة تصنيفات أو وسوم أو روابطًا مُخصّصة أو صفحات أو منشورات، بعد الانتهاء من اختيار المكونات المناسبة تستطيع إعادة ترتيب ظهورها ضمن القائمة. تخصيص ودجات الموقع تستطيع إضافة وإدارة وإزالة الودجات من موقعك من خلال لوحة تحكم الودجات في المُخصّص، حيث توجد خيارات واسعة للودجات التي يُمكنك استخدامها ضمن موقعك مثل التقويم والمعرض والبحث. سوف ترى أولًا الأماكن التي يُتيحها القالب لعرض الودجات في موقعك (تختلف الخيارات باختلاف القالب)، وعليك الآن الضغط على المكان الذي تريد إضافة ودجت له ثم الضغط على "أضف ودجت" واختيار ما تريد من ضمن ما يوفره قالبك والإضافات التي تستخدمها. إضافة تنسيقات CSS تستطيع هنا إضافة تنسيقات CSS لتعديل تصميم بعض العناصر في موقعك دون تعديل ملف style.css مباشرةً وهي طريقةً أكثر أمانًا لإنهاء التعديلات، ثم عرضها على الموقع عند الانتهاء منها فأنت هنا تستطيع معاينة التغييرات مباشرةً قبل نشر هذه التعديلات، لأن هذه هي وظيفة المُخصّص في النهاية. المزيد من خيارات التخصيص سوف تختلف الخيارات الإضافية التي تستطيع الوصول لها ضمن المُخصّص حسب القالب الذي تستخدمه، مثل إضافة صورة للخلفية، أو إضافة صورة عشوائية لخلفية الترويسة، أو اختيار تخطيط مُختلف للصفحات. معاينة التغييرات ضمن أحجام شاشة مختلفة تستطيع الآن بعد الانتهاء من جميع التعديلات تفقّد ما أنجزته، وذلك من خلال خيار المعاينة لأحجام شاشة مُختلفة وذلك قبل نشر هذه التعديلات. انظر أسفل قائمة المُخصّص لتجد "إخفاء عنصر التحكم" وبجانبه ثلاث أيقونات تسمح لك بمعاينة الموقع بثلاث أنماط مُختلفة هي الحاسوب والحاسوب اللوحي والهاتف الذكي، وسيسمح خيار الإخفاء بمعاينة النافذة دون وجود لوحة تحكم المُخصّص. اختر قوالب جديدة باستخدام المخصص هل أنت متأكد من جميع التعديلات ولا تريد التراجع عن أي منها؟ إذًا أصبح الآن الوقت المناسب للضغط على "نشر" في أعلى لوحة تحكم المُخصص ونشر هذه التعديلات مُباشرةً على الموقع بدلًا من أن تكون مسودةً محفوظةً. الخلاصة يُعَدّ استخدام مُخصّص ووردبريس سهلًا جدًا ويُمكنك التعرف على جميع مكوناته بوقت قصير حتى لو كان القالب الخاص بك يتضمن المزيد من الإعدادات الإضافية، حيث سوف تتمكن من استخدام هذه الإعدادات بسهولة دون الرجوع لتوثيق القالب أو الاستعانة بخبير، وهذا هو الهدف من المُخصص، أي أن يُستخدم من قِبل الجميع بغض النظر عن خبرتهم في مجال تصميم المواقع، تُعَدّ ميزة المعاينة المُباشرة التي يوفرها المُخصّص هي الأهم، حيث تستطيع الاطلاع على تغييراتك مُباشرةً وذلك بأحجام مُختلفة لشاشة المُستخدم سواءً كان يتصفح من حاسوبه أو هاتفه الذكي أو حاسوبه اللوحي. ترجمة -وبتصرّف- للمقال How to Use the WordPress Theme Customizer لصاحبه Lindsay Pietroluongo. اقرأ أيضًا كيفية ضبط إعدادات الخصوصية في ووردبريس كيفية إضافة تسجيل الدخول باستخدام فيسبوك في ووردبريس أفضل القوالب والإضافات للتجارة الالكترونية ومتاجر ووكومرس

هل أنت مهتم بتعلم PHP وبناء قوالب وملحقات خاصة بك على ووردبريس؟ أو ربما أنت مُهتمّ بتعلّم القليل الذي يُمكنك من إدخال التّعديلات التي تحتاجها على مواقعك ومدوّناتك التي تعتمد على ووردبريس. أيّا كان وضعك، هناك أمور يجب عليك أن تعرفها قبل أن تغوص في مجال تطوير ووردبريس. سنحاول في هذا المقال إعطاءك فكرة واضحة عليها. كيف يعمل ووردبريس؟ لنفهم ماذا وكيف يمكننا التطوير في ووردبريس، سنلقي أولا نظرة سريعة على آلية عمل ووردبريس. يتكون ووردبريس من ثلاثة عناصر رئيسية: النواة الأساسية والقوالب والمُلحقات. تحتوي النواة على جميع الوظائف الأساسية التي تشكل نظام إدارة المحتوى لووردبريس، وهذه الشيفرات البرمجية تتضمن كل شيء من البنية التحتية (backend) للإدارة إلى دوال جدولة المشاركات والتأكد من قوة كلمة المرور والسماح بإنشاء مستخدمين وغيرها. في حين أن النواة الأساسية (core) مسؤولة عن البنية التحتية للموقع وكيفية التعامل معها، فإن القوالب مسؤولة عن الواجهة الأمامية للموقع وكيفية ظهوره. نستخدم إدارة ووردبريس (WordPress admin) لإنشاء المشاركات والصفحات وبقية محتوى الموقع، وأما بالنسبة لكيفية ظهور هذه الأشياء للزائر فهو أمر متروك للقالب theme، لذلك فإن هذا سيعطيك قوة كبيرة للتحكم في موقعك، فقد ترغب بتثبيت وتفعيل القوالب الموجودة أو حتى تطوير قوالبك المخصصة. أبسط طريقة لوصف المُلحقات plugins هي أنها توفر وظائف إضافية للووردبريس، ولفعل ذلك، قد تعدّل المُلحق الشيفرة البرمجية للواجهة الأمامية أو البنية التحتية للموقع، وأبسط مثال لذلك هي المُلحق الذي يضيف زر لتغريدة تويتر، وقد تُنشئ أيضا صفحة إعدادات جديدة في البنية التحتية لقائمة الإدارة والتي ستمكنك من إعداد بعض الخيارات الافتراضية لتغريدة المستخدم ويمكنها إضافة نفسها إلى الواجهة الأمامية للموقع، والتي سيكون موقعها في الغالب تحت التدوينة (post). مجالات التطوير بقدر تقدمك في تطوير ووردبريس، ستتمكن من تطوير أي واحدة من المكونات الرئيسية المذكورة أعلاه بالإضافة إلى تطبيقات مستقلة بمساعدة REST API الجديدة وسنذكر المزيد عن هذا الموضوع بعد قليل. مهما كان ما تريد فعله مع ووردبريس، أنصحك باتباع منهج في دراستك، هذه القائمة ستساعدك على التعرف على الأنظمة التي تحتاج إلى معرفتها قبل بدء تعلمك المزيد حول المجال الذي اخترته: القوالب المُلحقات REST API النواة القوالب إن تعلم كيفية عمل القوالب وتطويرها سيسمح لك باحتراف إنشاء المواقع بدءا من المواقع الصفحة الواحدة إلى مواقع المحتوي الحيوي الثقيل، وستسمح لك أيضا بالحصول على المزيد من العملاء (إذا كان هذا ما يهمك) أو حتى بيع القوالب تجاريا. يوجد العديد من مطوري القوالب الناجحين في أسواق مثل Themeforest و Mojo Marketplace وغيرها. ففي وقت كتابة هذا المقال، أشهر قالب على موقع Themeforest تم بيع 1377 نسخة منه في أسبوع أي أكثر من $81,000 في أسبوع واحد فقط! يمكنك الحصول على الكثير من الأموال إذا كنت تستطيع تطوير قالب مميزة. على الرغم من أن هذا المبلغ لا يحققه جميع مطوري القوالب، وربما لن تصبح مليونيرًا بين عشيّة وضحاها من إنشاء القوالب، لكن يمكنك الحصول على مبلغ مالي جيد من القوالب إذا كنت تقوم بالأمر بالشكل الصحيح. إذا أردت رؤية بعض الأمثلة عن القوالب الشهيرة، فألق نظرة على الأسواق التي ذكرناها أعلاه، أو على قسم قوالب ووردبربس حيث جميع القوالب مجانية، فالكثير من مطوري القوالب يصدرون أعمالهم الأولى في هذا القسم. يمكنك تعلم كيفية إنشاء قوالب ووردبريس في أكاديمية حسوب من خلال سلسلة الدروس مدخل إلى تطوير قوالب ووردبريس. الملحقات plugins بطريقة ما، تعتبر المُلحقات شريان حياة ووردبريس، فهي تحوله إلى كل شيء من منتدى إلى شبكة اجتماعية أو منصة للتجارة الإلكترونية وغيرها باستخدام ضغطة زر واحدة، فالمُلحقات تعطيك تحكمًا كاملًا بجميع جوانب نظام ووردبريس، وتسمح لك بتعديل ما تشاء، وسيساعدك هذا كثيرا عند إنشاء مواقع ووردبريس للعملاء. كما هي الحال مع القوالب، فالمُلحقات تملك أيضا أسواقا وفي العادة يتم إدارتها من نفس الشركات التي تدير أسواق القوالب. يعتبر سوق CodeCanyon على سبيل المثال أكبر سوق للملحقات حيث يملك أكثر من 4000 ملحق متاحة للشراء. على الرغم من أن المبيعات ستكون أقل من القوالب إلا أنه يمكنك ربح الكثير إذا أنشأت ملحقًا جيدًا. يملك موقع ووردبريس قسمًا للملحقات المجانية ويحتوي على أكثر من 40000 ملحق، وهو بذلك مصدر كبير للأدوات والإلهام والأمثلة على الشيفرات البرمجية المميزة (والشيفرات البرمجية السيئة للأسف). يمكنك تعلم كيفية إنشاء ملحقات وإضافات ووردبريس في أكاديمية حسوب من خلال سلسلة الدروس مدخل إلى برمجة إضافات ووردبريس. ما بين WordPress.org و WordPress.com لقد أُطلق نظام ووردبريس بطريقتين مختلفتين، حيث كانت الأولى عن طريق WordPress.com؛ أمّا الثّانية، فعبر استخدام WordPress.org، وهذا نظرًا لإمكانيّة احتساب ووردبريس موقعًا للإنترنت، ومنصّة أعمال في آنٍ واحد، حيث يمكنك إنشاء حساب مجّاني في WordPress.com، والحصول على نسخة مُستضافة من نظام ووردبريس لخدمة موقعك، بحيث ستتحمل شركة الاستضافة مسؤوليّة صيانة الخادم وتثبيت ووردبريس عليه، ممّا يوفر عليك بعض العبء، ويتيح لك التّركيز على إنشاء المحتوى. تجني WordPress.com أرباحها عبر تقاضيها لأموال مقابل ترقيتها للمزايا، فعلى سبيل المثال إذا رغبت في استخدام اسم النّطاق الخاصّ بك في WordPress.com، فستحتاج إلى دفع القليل من الرسوم، وهناك الكثير من الشّركات التي تدفع لمنصّة WordPress.com لأجل استضافة مواقع ووردبريس ضخمة، مثل: بي بي سي أمريكا (BBC America)، ومجلة نيويوركر (The New Yorker Magazine)، ومدونة ستار وورز (Star Wars) الرّسمية. بسبب حاجة ووردبريس لدعم مختلف أنواع وأحجام المواقع، تمتلك منصّتها العديد من القيود المتعلّقة بتخصيص المواقع على نحو شخصيّ، فهناك عدد محدود من القوالب التي تتحكم بتنسيق ومظهر المواقع، كما يوجد عدد قليل من الإضافات التي تُعزّز من أداء وظائفه؛ أمّا WordPress.org فهو الموقع الرّسمي لنظام إدارة المحتوى ووردبريس الذي تستضيفه بنفسك. نقصد باستضافة ووردبريس عمليّة تنزيل نسخة من برنامج ووردبريس، وتثبيته على خادم إنترنت، والذي هو بالمقابل عبارة عن حاسب يستخدم برمجيّات خاصّة تسمح له بتوفير الوصول إلى مواقع الإنترنت المُخزّنة به لجميع المستخدمين على الإنترنت، حيث يمكن لهذا الخادم أن يكون مجرّد حاسب عتيق مُلقى في مكان ما بمنزلك، أو قد يكون مركز بيانات متطوّر، ولك حريّة اختيار الخادم المناسب لموقعك حسب تفضيلك، إذ تتيح استضافتك لنظام ووردبريس بنفسك إنشاء موقع إنترنت تمتلك فيه كامل الحريّة في التّحكم؛ بالمقابل، ستقع عليك مسؤوليّة إعداد وتثبيت نظام ووردبريس، وصيانته بنفسك. REST API ستستخدم REST API لاحقا عندما تحترف تطوير القوالب والمُلحقات، ونظريا ستكون قادرا على استخدامها إذا كانت لديك خبرة في البرمجة بلغة أخرى مثل جافا أو روبي. تعتبر REST API جديدة نسبيا وتسمح لك بإنشاء تطبيقات حقيقية بالاعتماد على ووردبريس، وهذا يتضمن تطبيقات أندرويد وأيفون وغيرها. أفضل طريقة لشرح هذه الميزة هي عن طريق مقارنتها بمواقع مثل تويتر أو انستغرام، لا شك أنك قد رأيت تغذية تويتر معروضة على موقع أحدهم، ولإضافة هذه الميزة إلى موقعك لن تحتاج إلى معرفة كيفية عمل نواة شيفرة البرمجية الخاصة بتويتر، كل ما تحتاجه هو القليل من الشيفرات البرمجية التي تقول: "من فضلك استرجع آخر خمسة من تغريداتي." وسيتعامل تويتر مع الباقي وسيرجع لك بيانات آخر خمسة تغريدات التي طلبتها، وبعد ذلك يمكنك استخدام HTML و CSS لعرضها. وهذا بالضبط ما يفعله REST API لووردبريس، يمكنك الاتصال بأي موقع وطلب منه آخر خمسة مشاركات فيها، ويمكنك أيضا القيام بأكثر من ذلك: يمكنك إنشاء/حذف المستخدمين وتعديل الفئات وغيرها (بالطبع، تحتاج إلى الاستيثاق قبل استخدامها)، هذا يعني أنه يمكنك استخدام ووردبريس كمستودع للمعلومات وبناء واجهة أمامية وبنية خلفية باستخدام نظام مختلف تماما. النواة ساهم في تطوير ووردبريس مجتمع من الآلاف المتطوعين حول العالم، حيث أنه يعمل 471 شخص على الإصدار 4.4 من ووردبريس، والعديد من الأشخاص الآخرين يعملون على جوانب مختلفة من ووردبريس، من الترجمة وتطبيقات الويب إلى الإتاحة (accessibility) والدعم. في الحقيقة، يمكنك الاشتراك معهم الآن، فبينما تحتاج إلى بعض الخبرة للمشاركة في برمجة نواة ووردبريس إلا أنه يمكنك المساهمة في تحديد المشاكل والأخطاء والتأكد منها وتقديم الأفكار في أي وقت باستخدام WordPress Trac، وهو المكان الذي يمكنك من متابعة تطوير شيفرة نواة ووردبريس. إذا وجدت علة (خطأ - bug) يمكنك إرفاقها بالشيفرة المناسبة للتخلص منها، وبعد عدة مراجعات وتدقيقات سيتم استخدام شيفرتك البرمجية إذا كانت مناسبة، وهذه هي أفضل طريقة للمشاركة في تطوير النواة. تطوير ووردبريس: ماذا تحتاج أن تتعلمه يجب أن تعتاد على العمل على مجموعة محددة من الأدوات حتى تتمكن من تطوير ووردبريس. إن عملية التعلم لا تنتهي بالنسبة إلى أي مطور جيد، سوف أعرض عليك هنا حزمة للبداية كما سأريك بعض الأدوات المتقدمة التي قد تحتاج إليها لاحقا عندما تريد أن تتعلم المزيد. الحد الأدنى من المتطلبات لتطوير الووردبريس هي HTML و CSS و PHP، بالإضافة إلى هذه اللغات ستحتاج إلى جافا سكربت و MySQL في مرحلة ما، عندما تتقن هذه اللغات يمكنك الانتقال إلى أشياء أخرى مثل LESS/SASS و Coffeescript و XML و JSON وغيرها، لكن هذه الأشياء لا تعتبر ضرورية لتطوير ووردبريس، لكن إذا عرفتها سيجعل حياتك أسهل كمطور وستوسع آفاقك. HTML و CSS أول لغتين يجب عليك تعلمهما هما HTML و CSS، مهما كانت الشيفرة البرمجية التي تكتبها ومهما كانت اللغة التي تستخدمها فستحتاج حتما إلى HTML عند إرسال صفحات الويب إلى المستخدم وإلى بعض CSS لتصميم وتزيين الصفحة. إن HTML مسؤولة عن إعطاء هيكل المواقع. على المستوى الأساسي، هذا يعني أنك ستقرر ما النص الذي يجب أن يكون عنوانًا وما يجب أن يكون قائمة وما الذي يجب أن يكون في رأس أو أسفل الصفحة. أما في المستوى الأعمق، ستقرر قرارات مهمة حول SEO والتحسين (optimization). يُستخدم CSS لتطبيق أنماط لهيكل HTML، أي أنك ستُعرّف لون النص والروابط والمسافة بين الفقرات ومحاذاة الصورة وألوان الحدود وسمكها وغيرها من العناصر عن طريق استخدام شيفرة CSS. إن CSS تتميز بسهولة تعلمها وبصعوبة إتقانها. PHP تحظى PHP بشعبية كبيرة كأشهر لغة سكربتات من جانب الخادوم server-side-، ووفقا للاستطلاع الذي قام به W3Techs، تستخدم PHP في 81.6% من المواقع وهي اللغة التي كُتب بها ووردبريس (وتقريبا أغلب أنظمة إدارة المحتوى الأخرى أيضا) ولذلك فإن معرفة PHP هو أمر ضروري لتطوير ووردبريس. إن معرفتك بـ PHP وحدها، سيجعلك تحصل على أكثر من معرفة بتطوير ووردبريس فقط. إن أهم فرق بين لغات جانب الخادوم عن لغات جانب العميل - مثل HTML - هو أنه يتم معالجتها في الخادوم أولا، ففي HTML، يمكنك كتابة شيفرة برمجية لـ Good Morning وسيرسلها HTML كما هي وسيعرضها على الزوار. أما في لغات جانب الخادوم، فستكتب شيء مشابه لهذا [good [time_of_day، وقبل أن يتم إرسال ذلك الأمر إلى المستخدم، سيعالج الخادوم هذه الأمر حتى يعرف ما يضعه في مكان [time_of_day] حسب الوقت الذي دخلت فيه إلى الموقع، فيمكنك أن ترى "Good day" أو "Good evening". لاحظ أن البيانات التي يستقبلها متصفحك تبقى HTML لكن تمت معالجتها في الخادوم مسبقا، ولاحظ أيضا أن الشيفرة السابقة لم تكن شيفرة PHP بل هي مثال فقط لأعطيك فكرة عن آلية عمل هذه اللغة. كما هو الحال مع جميع لغات البرمجة، فالممارسة والتمرين هي التي تجعلك تبرمج بشكل أفضل، فيمكنك تعلم PHP في غضون بضعة أيام لكنك ستجد نفسك أنك لا تملك أية فكرة عن ما الذي تقوم به، لذلك تحتاج إلى تجربة الأشياء وتخريبها وليس الوقوف دون معرفة ما يجري، وكما يقولون الممارسة تولد الإتقان. جافا سكربت ازداد دور جافا سكربت أهمية على الإنترنت، خاصة مع ظهور أدوات مبنية على جافا سكربت مثل Node و Angular. جافاسكربت تستخدم عادة لإضافة وظائف حيوية للمواقع وللتحميل غير المتزامن. سأعطيك مثال على كل واحد منها. فمثلا لو أردت أن يتم إخفاء نموذج بشكل كامل وأن يظهر ببطء داخل lightbox عندما يضغط المستخدم على زر معين، فيمكنك فعل ذلك باستخدام جافا سكربت بما أنه يمكنه التعامل مع تحريك الرسوم (animation) وربما الوظائف الأخرى، مثل التأكد من أنه تم ملئ النموذج بشكل صحيح قبل إرساله. أما التحميل غير المتزامن فيتم عمله عبر آلية تسمى بـ AJAX، فيمكنك استخدام AJAX للحصول على معلومات من الخادوم وعرضها دون إعادة تحميل الصفحة، وأبسط مثال لذلك هو التمرير اللانهائي (endless scrolling) فعندما يتم تحميل 10 مشاركات وتصل إلى نهاية الصفحة فسيتم عرض 10 مشاركات أخرى وتستمر هكذا. الكثير من المطورين تعلموا جافا سكربت من خلال إطار jQuery، فهو يُستخدم على نطاق واسع في ووردبريس وفي ملايين المشاريع على الإنترنت، وعلى الرغم من أن هذا الأمر جيد لكن ضع في اعتبارك أن جافا سكربت هو أكثر من مجرد jQuery وإن تعلم جافا سكربت كما هو هي فكرة جيدة. MySQL إن Mysql هي لغة تُستخدم للوصول والعمل مع البيانات المخزنة في قاعدة البيانات، يستخدم ووردبريس هذه اللغة كثيرا للتعامل مع البيانات، لكن كمطور، لا تحتاج إلى معرفة الكثير لأن ووردبريس يملك مجموعة من الدوال المساعدة. لكن في بعض الحالات الخاصة، قد تحتاج إلى كتابة استعلام قاعدة البيانات بنفسك أو ربما قد ترغب بتحسين شيء في موقعك، لذلك سيفيدك تعلم أساسيات MySQL. إن العمل مع قواعد البيانات واضح للغاية، فالجدول في قاعدة البيانات يشبه كثيرا جداول بيانات Microsoft Excel، فكل عمود يملك عنوانًا وبيانات مخزنة في الأسطر، ونستخدم MySQL لإضافة وحذف وتعديل واسترجاع البيانات، ربما ترغب بكتابة استعلام MySQL يرجع لك جميع المشاركات التي تحتوي على كلمة "awesome" ولديها أكثر من 8 تعليقات، أو قد ترغب أيضا بإيجاد جميع المستخدمين الذين يملكون اسم "Daniel". مرة أخرى، إن كتابة شيفرة MySQL خام في ووردبريس هو أمر نادر، لكنه يحدث في بعض الأحيان، لذلك فإن فهم كيفية عمل اللغة سيساعدك على كتابة شيفرات أفضل بشكل عام أدوات متقدمة بمجرد أن تتعود على الأقل على استخدام ثلاثة اللغات الأساسية - HTML و CSS و PHP - يمكنك البدء باكتشاف العديد من الأدوات المساعدة، واحدة من الأشياء الأولى التي يميل الناس إلى تعلمها هي LESS و/أو SASS، كلاهما "مجموعات موسّعة" (Superset) لـ CSS، أي أن أي شيفرة CSS صحيح تعتبر صحيحة في شيفرة LESS و SASS، وتكمن أهمية إضافة هاتين اللغتين هو إمكانية استخدام متغيرات ودوال و غيرها في CSS، والذي هو غير ممكن بشكل افتراضي. إن أدوات البناء (Build tools) هو شيء سترغب في اكتشافه عند مرحلة معينة، أفضلها Gulp و Grunt فهذان يمكنهما مراقبة تعديلات الملفات وتنفيذ مختلف المهام عند استيفاء المتطلبات، فعلى سبيل المثال، في أي وقت تعدل فيه ملف SASS يمكنك ترجمته تلقائيا إلى CSS وحفظه إلى ملف معين، أو يمكنك تحسين الصور أو دمج الملفات أو تحميل الحزم الخارجية فجميع المهام الأخرى يمكنك أن تفعلها باستخدام هذه الأدوات. سطر الأوامر أو الطرفية (terminal) هو شيء يجب أن تلقي نظرة عليه. نعم إن استخدام سطر الأوامر قد يبدو مخيفا لكنه ليس كذلك، فبمجرد كتابة بضعة أوامر يمكنك حفظ الكثير من الوقت، فسكربت/أداة مثل WP-CLI يمكنه تثبيت ووردبريس في بضعة ثواني، بما في ذلك تثبيت القوالب والمُلحقات والمحتويات للتجربة والتي لو قمت بها بشكل يدوي ستتطلب الكثير من الوقت والجهد. إن أنظمة االتّحكّم في الإصدارات (Version control) هي من الأدوات المفيدة للغاية فلن تعرف حاجتك إليها إلا لو استخدمتها، فعلى الرغم من أنها وُضعت أصلا للعمل على نفس الشيفرة البرمجية في مجموعات إلا أنه يمكنك استخدامها كحل لإدارة المشاريع والمشاكل والنسخ الاحتياطي في نفس الوقت. ويعتبر كل من SVN و Git الأشهر على الإطلاق، لكن بالنسبة لي، أعتبر أن Git أفضل نظرا لأنه يعمل بشكل أفضل وبسبب Github الذي يوفر خدمة استضافة مستودعات Git على الإنترنت. ووردبريس: بوابتك إلى عالم البرمجة إن أفضل شيء بالنسبة إلى ووردبريس أنه يمكن أن يكون مدخلا لتعلم مهارات تطوير ويب ولغات أخرى. ولقد خضت هذه التجربة شخصيا، فلقد تعلمت أولا البرمجة الموجهة في PHP ثم تعلمت إطار عمل Laravel وأدوات البناء ثم LESS/SASS وأدوات سطر الأوامر وغيرها الكثير. ولقد خضت أيضا في غمار native app باستخدام #C وغيرها من اللغات. بمجرد معرفتك بكيفية عمل كل شيء، ستتعلم المزيد عند إنشاء مشاريع جديدة وكبيرة وكل شيء سيصبح أسهل، فبعد البرمجة كائنية التّوجّه في PHP لن تبذل الكثير من الجهد في تعلم #C لأن دماغك سيتعود على منطقه بطريقة مشابه لتعلم قيادة الشاحنات بعد تعلمك قيادة السيارات، فعلى الرغم من وجود الكثير من الاختلافات لكن بمجرد أن يكون لديك بعض الأساسيات سيسهل عليك التّحكمّ فيه. خاتمة ها قد عرفت الآن ما الذي تحتاجه للبدء في تطوير موقع ووردبريس، وقد تشعر بالإرباك، لكن لا تقلق، فالجميع سيشعر بذلك في هذه المرحلة. تذكّر أمرًا: من المهم أن لا تثبط عزيمتك، فجميع المبرمجين بدؤوا من مكان ما، فالكثير منهم كان سيئا للغاية عندما بدأ، يصارع لفهم المفاهيم الجديدة وشعر بالإحباط، لكنهم لم يستسلموا وكانوا دائما يدفعون أنفسهم للتّعلّم وهذا ما يُميّز المبرمج الجيد من السيئ. ترجمة -وبتصرف- للمقال: WordPress Development for Beginners: Getting Started لصاحبه Daniel Pataki والمقال WordPress.org and WordPress.com من موقع wordpress.org. حقوق الصورة البارزة: Designed by Freepik.

يظهر الخطأ 404 عندما تحاول زيارة صفحة غير موجودة في الموقع، ويميل أغلب الناس إلى ترك هذه الصفحة وعدم التفكير في تصميمها. لكن أخذ بعض الوقت وإنشاء تصميم لهذه الصفحة من الممكن أن يعطي تجربة استخدام مختلفة لزوار موقعك ويحدد قرار بقائهم في موقعك أو مغادرته في أسرع وقت. في الغالب عندما قمت بتصميم الموقع، قمت بتفقد صحة كل الروابط في الموقع حتى لا تظهر صفحة الخطأ للمستخدم لكن مع الوقت ربما تقوم بحذف منشور ما أو تغيّر اسمه. وأيضًا من الممكن أن يقوم المستخدم بزيارة الصفحة مباشرةً من دون تصفح الموقع مما سيقوده إلى صفحة الخطأ. يمكن تصميم هذه الصفحة ببساطة وسهولة بمساعدة قوالب صفحات ووردبريس الجاهزة. فهم الخطأ 404 رسالة الخطأ 404 هي عبارة عن رسالة ستظهر للزائر عند عدم وجود الصفحة التي يحاول زيارتها في الموقع. وهذه الصفحة موجودة بشكل افتراضي في ووردبريس لكن ليست موجودة في كل قوالب ووردبريس الموجودة على الإنترنت، إذا قمت بإنشاء قالب ووردبريس مخصص لموقعك، فذلك يزيد من فرصة بقاء المستخدم في موقعك حتى عندما لا يجد الصفحة التي يبحث عنها، عندما يجد صفحة 404 مبهجة وجميلة. الصفحة الافتراضية للخطأ 404 يتم تضمين صفحة الخطأ 404 مع بعض قوالب ووردبريس ولكن ليس بالضرورة كل القوالب التي تجدها على شبكة الإنترنت، مع أن ووردبريس تبحث بشكل افتراضي عن قالب الصفحة 404.php في القالب المفعّل في الموقع لكن إذا لم تجد هذا القالب سوف تظهر رسالة الخطأ الافتراضية لووردبريس والتي تعد غير ملائمة للمستخدم. إذا لم يكن قالب هذه الصفحة موجودًا، فيمكنك إنشاء قالب هذه الصفحة بسهولة. قم بإنشاء صفحة فارغة باسم 404.php. هذه هي التعليمات البرمجية التي سنبدأ بها: ملف 404.php <?php get_header(); ?> <h2>Error 404 - Page Not Found.</h2> <?php get_sidebar(); ?> <?php get_footer(); ?> التعليمات البرمجية السابقة ستقوم بإظهار مخرجات بسيطة، ضمن وسم h2. كما تستدعي أيضًا رأس الموقع (header)، الشريط الجانبي (sidebar)، وتذييل الموقع (footer) وكل هذه العناصر افتراضية ويمكنك تعديلها طبعًا لتناسب القالب الذي تقوم بتصميمه. العمل على قالب الصفحة أولًا، سنضيف مربع البحث إلى الصفحة لجعلها أكثر فائدة للمستخدم. وبهذه الطريقة، حتى إذا ظهرت هذه الصفحة لأحد الزوار، فسيكون لديه خيار البحث في موقعك بدلًا من المغادرة. ملف 404 – مع إضافة مربع البحث <?php get_header(); ?> <h2>Error 404 - Page Not Found.</h2> Search: <?php include(TEMPLATEPATH . "/searchform.php"); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> جعل الصفحة أكثر ديناميكية كي نجعل صفحة 404 أكثر ديناميكية يمكننا استخدام ميزة إعادة التوجيه بحيث تظهر صفحة الخطأ للمستخدم لفترة وجيزة من الزمن ومن ثم يتم إعادة توجيه المستخدم إلى الصفحة الرئيسية للموقع. كما يمكن الاستفادة من هذه الصفحة في ارتفاع ترتيب الموقع في محركات البحث. في المثال التالي يمكننا البدء بتعديل ملف header.php من القالب الخاص بك. وإضافة ما يلي: <?php if (is_404()) { $redirectHome = get_option('home'); ?> <?php echo $redirectHome; ?> بعد إضافة هذه التعليمات، سنقوم الآن بتعديل ملف 404.php ليصبح بالشكل التالي: <?php get_header(); ?> <h1>Error 404 - File Not Found.</h1> <h3>Please <a href="<?php bloginfo('home'); ?>" Click here</a> to return to our home page, or you can wait to be redirected in 15 seconds.</h3> <?php get_footer(); ?> في المثال السابق ستظهر صفحة 404 للمستخدمين، ولكن بعد ذلك سيتم توجيههم تلقائيًا إلى الصفحة الرئيسية. بدلًا من تركهم محبطين من هذه الصفحة ومغادرتهم للموقع مع تجربة سيئة. قد لا يكون هذا المثال أفضل حل دائمًا، ولكن يمكن أن يكون مفيدًا لشخص يبحث عن شيء معين على موقعك. التأكد من عمل الصفحة يمكن التأكد أن صفحة 404 تعمل بكتابة رابط موقعك وإلحاقها بعنوان صفحة أو مقال تعرف أنه غير متواجد في موقعك. مثال: http://www.yourwebsitedomain.com/test404page.php إذا لم تعمل إذا لم يتم توجيهك إلى الصفحة هذا يعني أنه علينا تعديل ملف htaccess. على الخادم (server) كي نجعل صفحة 404 تعمل ابحث عن ملف htaccess. في تنصيب ووردبريس الخاص بك وأضف السطر التالي له: ErrorDocument 404 /index.php?error=404 لكن إذا لم يكن تنصيب الووردبريس في المجلد الجذر للخادم الخاص بك يجب الإشارة إلى المجلد الفرعي الذي نصبت عليه ووردبريس: ErrorDocument 404 /YOURSUBFOLDERNAME/index.php?error=404 هذا سيجبر الخادم على استخدام ملف 404.php مثال كامل التعليمات البرمجية أدناه تعطينا بعض الأفكار الجيدة التي يمكن استخدامها في صفحة 404 في حال لم يجد المستخدم ما يرغب في الوصول إليه، يمكنك ملاحظة هذه الخيارات التي تزيد من فرص بقائهم في الموقع، والوصول إلى ما يرغبون به. <?php get_header(); ?> <h1>404 Error</h1> We cannot seem to find what you were looking for. Maybe we can still help you. <ul> <li>You can search our site using the form provided below.</li> <li>You can visit <a href="<?php bloginfo?>"</a></li> <a href="<?php ('url'); ?>" the homepage.</a> <li>Or you can view some of our recent posts.</li> </ul> Search: TEMPLATEPATH . "/searchform.php"); ?> <h3>Recent Posts</h3> <ul> <?php query_posts('posts_per_page=5'); if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>" title="Permalink for : <?php the_title(); ?>"><?php the_title(); ?></a> endwhile; endif; ?> </ul> <?php get_footer(); ?> يمكنك تغيير هذا المثال وتنسيقه ليناسب احتياجاتك. كل هذا المزيج من الخيارات يضمن بأن المستخدمين لن يغادروا الموقع مباشرًة، إذا لم يجدوا ما كانوا يبحثون عنه. جعل الصفحة أكثر ملائمة وبهجة للمستخدم لجعل هذه الصفحة أكثر جاذبية للمستخدم، يمكن استخدام العديد من الأفكار كوضع صور خلفية لهذه الصفحة أو كتابة تعليمات html خاصة لجعل هذه الصفحة أكثر قوة وتنوعًا وإليك بعض الأمثلة لصفحات 404 مميزة: Mundofox.com CSSRemix.com CSSRemix.com ChrisJennings.com ook.co.uk Youcastr.com Mixx.com JustCreativeDesign.com Agens.no Mushroomdigital.co.uk استخدمها بحكمة من الجيد دائمًا استخدام صفحة الخطأ 404 سواءً في ووردبريس أو في مواقع html الثابتة (static)، والاستفادة منها بوضع إعلانات مثلًا. هناك العديد من الطرق لتصميم صفحة 404 الخاصة بك، والعديد من الطرق أيضًا لمساعدة زوار الموقع في الوصول إلى ما يبحثون عنه، استخدم الأمثلة المذكورة أعلاه كما ترغب واختر ما يناسبك للوصول إلى أفضل نتيجة. ترجمة -وبتصرّف- للمقال How to Create a Custom WordPress 404 Error Page حقوق الصورة البارزة محفوظة لـ Freepik

إذا كنت مهتمًا في تطوير ووردبريس فمن المؤكد أنك قمت بمحاولة تعديل قوالب ووردبريس سواء من خيارات القالب أو قمت بعمل قالب ابن من أجل تعديلات أكثر. تبعًا لتعريف موقع ووردبريس للقالب: مجموعة من الملفات التي تعمل معًا من أجل تشكيل واجهة للمستخدم. في هذا الدرس سوف نتعلم تطوير قوالب ووردبريس، سنبدأ مع الملفات الأساسية التي تشكل قالب ووردبريس وسوف نتقدم لنتعلم عن الحلقات وملفات ووردبريس الافتراضية، لتتمكن من عرض منشوراتك أو صفحات موقعك. بنهاية هذا الدرس سوف تكون قادرًا على بناء قالب ووردبريس الخاص بك. البداية إذا كنت جاهزًا و تملك نسخة ووردبريس تم تنصيبها على خادم محلي على حاسبك الشخصي، لنبدأ و نتعرف أين مكان القوالب في ووردبريس، توجد قوالب ووردبريس عادة في المسار wp-content/themes إذا ذهبت إلى هذا المسار داخل نسخة ووردبريس المثبتة على حاسبك فستجد عدة قوالب افتراضية من ووردبريس. لنقم بإنشاء قالب ووردبريس جديد. هناك بضع خطوات سهلة للقيام بذلك: أنشئ مجلد جديد في المجلد themes وأعطِه اسمًا مميزًا يشبه التالي my-awesome-theme. والآن في هذا المجلد قم بإنشاء ملفين باسم style.css و index.php الآن قم بفتح ملف style.css وانسخ التالي إليه: /* Theme Name: My Awesome Theme Theme URI: https://myawesometheme.awesome Author: Daniel Pataki Author URI: https://danielpataki.com Description: The theme for my awesome site Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-awesome-theme This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ هذه التفاصيل ستظهر بشكل أوتوماتيكي في قسم تفاصيل القالب في شاشة Appearance->Themes في لوحة تحكم ووردبريس. إذا قمت بزيارة قسم Appearance->Themes سوف ترى قالبك بين القوالب المعروضة وأيضًا يمكنك تفعيله. لكن هذا القالب لا يملك أي تعليمات برمجية لذلك سترى شاشة بيضاء عند تفعيله وسنضيف التعليمات البرمجية قريبًا. كيف تعمل ملفات قوالب ووردبريس تعمل قوالب ووردبريس باستخدام صفحات ووردبريس الافتراضية. لأنها بذلك تقلل عدد الملفات التي نحتاجها لكل موقع مقارنة مع html التي تتطلب بناء صفحة مكررة كثيرة. لكن منذ ظهور php ومعالجتها للملفات على الخادم(server) يمكننا أن نوفر مساحة كبيرة في الملفات فمن الممكن أن يكون ملف واحد مسؤول عن عرض المقال المنشور أو عرض الصفحة ويمكن ل php أن تعرف ماذا نريد وبناء على ذلك تستبدل المعلومات في هذا الملف. ها هو مثال لنرى كيف يعمل ذلك: <!DOCTYPE html> <html> <head> <title>A single post template</title> </head> <body> <div id="site-header"> <h1>Welcome to my site</h1> <nav> <ul> <li><a href=''>Home</a></li> <li><a href=''>About</a></li> <li><a href=''>Contact</a></li> </ul> </nav> </div> <div id="article"> <h2 class="article-title"><?php the_title() ?></h2> <div class="article-content"><?php the_content() ?></div> <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div> </div> <div id="site-footer"> <nav> <ul> <li><a href=''>Home</a></li> <li><a href=''>About</a></li> <li><a href=''>Contact</a></li> </ul> </nav> <div id="copyright">&copy; Daniel Pataki</div> </div> </body> </html> لاحظ أنك لا ترى محتوى ثابت مكتوب في هذه الملف، بدلًا من أن ترى عنوان المقال سترى دالة ()the_title و هي مسؤولة عن إخراج نص العنوان. هذه الدالة تحدد أي مقال تم طلبه حاليًا من خلال رابط الصفحة وتجلب المعلومات المناسبة من قاعدة البيانات لعرضها. وبذلك قمنا بعمل ملف لأي مقال في الموقع، وتأخذ ووردبريس هذه المرحلة إلى مستوى آخر وتقوم بفصل رأس وتذييل الموقع ووضعها في ملفات منفصلة واستدعائها عندما نريدها وليست نسخ رأس وتذييل الموقع كل مرة نحتاجهم فيها: <?php get_header() ?> <div id="article"> <h2 class="article-title"><?php the_title() ?></h2> <div class="article-content"><?php the_content() ?></div> <div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div> </div> <?php get_sidebar() ?> <?php get_footer() ?> كيف تعمل قوالب ووردبريس سوف نستعمل مجموعة من ملفات قالب ووردبريس في قالبنا الذي نقوم بصنعه، ما نحتاج لمعرفته هو أسماء الملفات التي تلزمنا لعمل الصفحات الأساسية للموقع وأسماء هذه الملفات محددة في وردبريس من التسلسل الهرمي لملفات قوالب ووردبريس. لنلقي نظرة على أنواع الصفحات التي نحتاجها: الصفحات الأرشيفية مثل (التصنيفات، الوسوم، أرشيفات الوسوم، الناشرين في الموقع) الصفحات الواحدة (المقال الواحد، الصفحة الواحدة، نوع المقال) الصفحة الرئيسية وصفحة كل المقالات صفحة الخطأ صفحة نتائج البحث تسمى هرمية لأن ووردبريس تبحث عن مجموعة من الملفات وتعرض الذي له هرمية أعلى. لنأخذ مثلًا صفحة المؤلف أولاً ووردبريس تبحث عن صفحة باسم هذه المؤلف إذا وجدتها سوف تقوم باستخدامها، لكن إن لم تجدها سوف تقوم بالبحث عن ملف برقم المستخدم وإذا لم تجدها ستتابع البحث عن ملف باسم author.php وإن لم تجده ايضًا ستبحث عن achive.php وإذا فشلت كل المحاولات السابقة سوف تعرض سوف تستخدم ملف index.php والذي هو حتمًا موجود لأنه مطلوب لإنشاء القالب. لاحظ أن ووردبريس تبدأ مع الملفات الخاصة ثم تقوم بالتعميم. وهذا أفضل لأنه يمكنك إنشاء ملف واحد من أجل أن يقوم باستخدامه لعرض المستخدم وهو author.php ولكن ربما تريد عمل ملف خاص لأحد المستخدمين وبذلك يمكنك استخدام اسم المستخدم مثال author-danielpataki.php. لنقم ببناء قالب عند بناء قالب جديد، فمن الأفضل بناء الأساسيات التي سأحتاجها في كل الصفحات. مثل أقسام رأس الموقع(header) وتذييل الموقع(footer). يجب أن يكون ما زال لديك ملفي index.php و style.css اللذان قمنا بإنشائهما، لذا لتبدأ. بناء الأساسيات عادة أقوم بعمل صورة للقالب كي يتم عرضه في لوحة تحكم ووردبريس في تفاصيل القالب. هذ ليس مطلوبًا بشدة عند بناء قالب لكنه يعطيني انطلاقة جيدة وإلهام لما سيكون عليه القالب إذا كان لديك صورة للتصميم فمن الأفضل أن تضعها، أو يمكنك الاستعانة بموقع Unsplash. عندما تحصل على صورة تعجبك، قم بقصها لتصبح بعرض 880px وبطول 660px، قم بتسميتها screenshot.png وضعها في مجلد القالب إذا أردت صورة بسرعة فيمكنك الاستعانة بهذه الصورة التي قم بعملها وتنزيلها من هنا. الخطوة القادمة هي كتابة تعليمات html الأساسية التي ستظهر في كل الصفحات مثل عنصر . لنبدأ بإنشاء ملف header.php داخل هذا الملف سنقوم بلصق تعليمات html كالتالي: <!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> الآن سنقوم بإنشاء ملف footer.php الذي سيحتوي وسوم الإغلاق للوسوم المفتوحة في ملف header.php : <?php wp_footer() ?> </body> </html> يجب أن أشير إلى دالتين هامتين و هما ()wp_head و ()wp_footer . عندما تقوم بإنشاء أي قالب يجب وضع ()wp_head مباشرة قبل إغلاق وسم <head> و دالة ()wp_footer مباشرة قبل إغلاق وسم <body> لأن هذا يساعد ووردبريس و الإضافات التي تنصبها على موقعك بوضع روابط ملفاتهم الخاصة هنا. الآن لنعد إلى ملف index.php إذا قمت بزيارة موقعك فستجد صفحة فارغة. هذا لأن ملف index.php فارغ ولم تقم باستعمال ملفات header.php و footer.php بعد. قم بإضافة التعليمات التالية إلى ملف index.php: <?php get_header() ?> My Awesome Theme <?php get_footer() ?> إذا زرت الصفحة مجددًا فيجب أن ترى عبارة "My Awesome Theme" وإذا اطلعت على الشيفرة المصدرية للصفحة فستجد الكثير من الأشياء هناك وليس عليك القلق بشأنها في الوقت الحالي. والآن من المؤكد بأنك ترغب بإضافة تنسيقات بما أن ملف style.css لا يتم استدعائه بشكل تلقائي، وربما تفكر بإضافة ملف style.css كما كنت تفعل عندما تصميم مواقع html ولكن في ورردبريس لا يجب عليك فعل ذلك أبدًا دع هذا الأمر لووردبريس. أنشئ ملف functions.php وأضف التعليمات التالية: <?php add_action( 'wp_enqueue_scripts', 'mat_assets' ); function mat_assets() { wp_enqueue_style( 'my-awesome-theme', get_stylesheet_uri() ); } التعليمات في ملف functions.php تخبر ووردبريس عن ملفات css الخاصة بك و بعدها تقوم ووردبريس باستدعاء ملفات في مكان وضعك لدالة ()wp_head و هذه هي وظيفة دالة ()wp_head أن تستدعي ملفاتك و بعض ملفات ووردبريس في رأس الموقع. الآن يمكنك تجربة وضع بعض التعليمات في ملف style.css ورؤية النتيجة مثل: body {background:red} قبل المتابعة لنضف بعض التعليمات البسيطة إلى ملفاتنا لتصبح أفضل وأجمل: في ملف header.php: <!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="site-header"> <h1><?php bloginfo('title') ?></h1> </div> <div id='site-content'> في ملف footer.php: </div> <!-- site content --> <div id='site-footer'> <p>&copy; My Awesome Theme</p> </div> <?php wp_footer() ?> </body> </html> في ملف style.css: /* Theme Name: My Awesome Theme Theme URI: https://myawesometheme.awesome Author: Daniel Pataki Author URI: https://danielpataki.com Description: The theme for my awesome site Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-awesome-theme This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ html { height: 100%; background:#444; font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.5em; } #site-header { text-align: center; } #site-header h1 { font-size:32px; color: #ffffff; font-weight: 300; letter-spacing: 1px; } #site-content { max-width:625px; background: #fff; margin: 0 auto; padding: 22px; border-radius:5px; } #site-footer { color: #fff; text-align:center; font-size:12px; text-transform: uppercase; } الآن كل صفحة ستقوم بزيارتها في موقع ستبدو نفسها لأننا فقط نملك index.php والذي سترجع إليه ووردبريس عند عدم وجود أي صفحات. فهم حلقة ووردبريس الحلقة هي أساس عمل كل الصفحات في ووردبريس. لأن الحلقة تحوي المعلومات التي ستعرض على الصفحة. ووردبريس تعرف ماذا يجب أن تحتوي كل صفحة، وتعرف هذه من روابط الصفحات مثلًا صفحة المقال الواحد يجب أن تحتوي مقال واحد وصفحتك الرئيسية يجب أن تحتوي أحدث 10 مقالات وهذا كله تعرفه ووردبريس. هذه المعلومات يتم جلبها من قاعدة البيانات بشكل أوتوماتيكي وكل ما عليك القيام به هو تفعيل الحلقة من أجل عرض البيانات من الأفضل شرح هذا بمثال أضف هذه التعليمات إلى ملف index.php: <?php if( have_posts() ) : ?> <?php while( have_posts() ) : the_post() ?> <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2> <div class="content"> <?php the_content() ?> </div> <?php endwhile ?> <?php else : ?> <p>Oh No, there are no posts!</p> <?php endif ?> عندما تنسخ هذه التعليمات وتزور صفحتك الرئيسية ستكتشف قوة ووردبريس وسحر قوالبها، سوف ترى قائمة مقالاتك التي قمت بإضافتها في لوحة تحكم ووردبريس. إذا قمت بالضغط على عنوان المقال سوف تذهب إلى صفحة تعرض لك هذا المقال بالرغم من أنك لم تقم بعمل صفحة للمقال الواحد. لنحلل التعليمات البرمجية ونرى كيف تعمل. كل هذا يبدأ مع عبارة if التي تتحقق من قيمة دالة have_posts(). هذه الدالة ستعيد قيمة true إذا كان هناك مقالات وقيمة false إذا لم يكن هناك مقالات لعرضها. كما ترى من عبارة else إذا لم يكن هناك مقالات فإننا نعرض رسالة للمستخدم بأنه ليس هناك مقالات. إذا كان هناك مقالات فإننا ننشئ حلقة while والتي لن تتوقف عن تنفيذ التعليمات التي بداخلها ما دامت دالة ()have_posts ترجع قيمة true. الدالة الأولى التي نستخدمها هي دالة ()the_post والتي تقوم بإعداد بعض البيانات لنا وتكمل الحلقة بعد ذلك، إذا كنا قد وصلنا للمقال الأخير هذا يعني أن دالة have_posts() ستعيد لنا false في المرة القادمة وبذلك تتوقف الحلقة و يتم تنفيذ التعليمات البرمجية التالية إذا كان هناك تعليمات باقية. عند عرض المقال، قمت بإضافة العنوان والمحتوى الكامل للمقال. لقد قمت باستخدام دالة ()the_permalink للحصول على رابط المقال، دالة ()the_title لعرض العنوان ودالة ()the_content لعرض محتوى المقال كاملًا. هذه الدوال تستخدم داخل حلقات ووردبريس وسوف تحدد المقال المطلوب كما هو متوقع. هكذا يبدو موقعي الآن: من الآن وصاعدًا عرض المقال بطرق مختلفة هي مسألة معرفة الدوال التي تستخدمها ووردبريس وإضافة بعض تعليمات CSS لجعل قالبك رائع، إليك بعض الدوال المفيدة التي تساعدك في عرض التصنيفات، الوسوم، تاريخ المقالات وأكثر من ذلك. القوالب وعبارة if ماذا تفعل إذا أردت عرض مقتطف من المقالات في الصفحة الرئيسية وكامل المقال في حال عرض المقال الواحد؟ في هذه الحالة لديك خيارين استخدام الدوال الشرطية التي توفرها ووردبريس أو عمل ملف قالب جديد. الدوال الشرطية التي توفرها ووردبريس تستخدم للتحقق من أشياء عديدة، على سبيل المثال إذا أردت معرفة إذا كنت تعرض مقال واحد أو عدة مقالات، إليك اللائحة الكاملة لهذه الدوال على موقع ووردبريس بمساعدة دالة ()is_singular يمكننا فعل التالي: <?php get_header() ?> <?php if( have_posts() ) : ?> <?php while( have_posts() ) : the_post() ?> <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2> <div class="content"> <?php if( is_singular() ) : ?> <?php the_content() ?> <?php else : ?> <?php the_excerpt() ?> <?php endif ?> </div> <?php endwhile ?> <?php else : ?> <p>Oh No, there are no posts!</p> <?php endif ?> <?php get_footer() ?> الحل الآخر هو استخدام ملفين منفصلين index.php لعرض مقتطفات من المقالات وملف single.php لعرض المقال كاملًا. من المؤكد أنك تسأل أي طريقة هي الأفضل؟ ليس هناك إجابة واضحة لهذا السؤال لأنه يعتمد بالدرجة الأولى على ما تريد إنجازه. في الواقع، عرض جميع المقالات وعرض المقالة الواحدة مختلف بما يكفي لعمل ملفين منفصلين، ولكن هناك بعض القوالب التي تطبق الطريقتين. وبعض القوالب تذهب أبعد من ذلك وتقوم بإنشاء ملف خاص بالحلقة فقط. لأن هذا سيجعل التعليمات نفسها تستخدم من قبل جميع الصفحات بدلًا من نسخ الحلقة في كل مكان نريد تواجد الحلقة فيه. لنلقي نظرة على ملف index.php المعدل: <?php get_header() ?> <?php if( have_posts() ) { while( have_posts() ) { the_post(); get_template_part( 'template-parts/content', '' ); } } else { get_template_part( 'template-parts/content', 'none' ); } ?> <?php get_footer() ?> قمت بوضع كل محتوى المقال في ملف مختلف. دالة ()get_template_part تجلب المحتوى من ملف وتجمع الوسيط الثاني مع الأول بإضافة “-” للمسار. في حالة الاستدعاء الثاني داخل عبارة else الدالة ستحاول استدعاء ملف template-parts/content-none.php، في الاستدعاء الأول لهذه الدالة تركت الوسيط الثاني فارغًا وهذا سيستدعي template-parts/content.php. في ملف single.php، سأضيف نفس التعليمات ولكن سأضيف كلمة single للوسيط الثاني من دالة ()get_template_part . أخيرًا لنقم بعمل مجلد template-parts وبداخله 3 ملفات: content.php و content-single.php وcontent.php وأقوم بنسخ تعليمات الحلقة المناسبة لكل ملف على سبيل المثال ملف content.php سيبدو كالتالي: <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2> <div class="content"> <?php the_excerpt() ?> </div> غطينا في هذا الدرس ما يكفي لعمل قالب بسيط، وهذا سيمكّنك من عرض مقالاتك بالطريقة التي تعجبك بتنسيقاتك الخاصة. ترجمة -وبتصرّف- للمقال WordPress Development for Beginners: Building Themes لصاحبه Daniel Pataki

بينما يوفّر ووردبريس (WordPress) الكثير من المميزات والمرونة، لا يزال هناك الكثير من الوظائف المفقودة من النواة الأساسية . أفضل طريقة لملء هذا الفراغ، بالطبع، هي الحصول على الإضافات المناسبة لك. تقدم إضافات ووردبريس جميع أنواع التخصيص لمديري المواقع، وعلى الرغم من ذلك، مع وجود أكثر من 55000 إضافة للاختيار من بينها في دليل إضافات ووردبريس، ناهيك عن جميع المنتجات المدفوعة (premium) المتاحة، يمكن أن يكون من الصعب فرز الجيّد من الأقل جودة. إذًا، إليك مجموعة من الإضافات المجانية والمدفوعة الضرورية لتحسين موقعك في شتى النواحي. لقد ضمّنت خيارات لكل شيء بدءًا من التخزين المؤقت (caching) لتحسين الصور إلى الحماية (security) والمزيد. Hummingbird لن ينتظر الزائرُ العادي لثمان ثوانٍ حتى يكتمل تحميل موقعك، وتوصي Google بأن يكون وقت تحميل موقعك في حدود ثانيتين تقريبًا. إذا استغرق موقعك وقتًا أطول من ذلك، فمن المحتمل أن يغادر زوّار موقعك حتى قبل أن تتاح لهم فرصة التحقق من عنصر واحد على الموقع. إضافة على ذلك، لن تحرص Google على تصنيفك مرتبة أعلى في نتائج البحث. التخزين المؤقت (cashing) هو أحد أفضل الطرق التي تمكّنك من تسريع موقعك لأنه يحفظ نسخة سريعة للتحميل تُقدّم في المتصفحات بأقصى سرعة. هذا مكان إضافة Hummingbird لتعتني لك بهذا الأمر، وبالإضافة على ذلك، فهي سهلة الاستخدام. تمسح هذه الإضافة موقعك، ثم تعطيك تحليلًا لموقعك. يمكنك رؤية النتيجة الإجمالية لسرعة موقعك، ثم إصلاحها في بضع نقرات. تتجاوز هذه الإضافة عملها الأصلي لأنها لا تخزّن الصفحة في ذاكرة التخزين المؤقت وحسب، بل تزيد عليها بتقليل حجم الشيفرة المصدرية (minifies)، وضغط الملفات (compresses) ودمجها (merge). تشبه هذه الإضافة الطائر المساعد الصغير الذي يخبر موقعك على الإنترنت كيف يطير بسرعة مثل الطائر الطنّان. هذه الإضافة مضمّنة في عضوية WPMDEV ويمكنك تجربتها مجانًا لمدة 30 يوما. HubSpot توفر هذه الإضافة نموذجا (form) وباني قوام منبثقة (pop-up builder) مع واجهة سحب وإفلات (drag-and-drop) سهلة الاستخدام حتى تتمكّن من التِقاط معلومات زوّارك، ولكنها تقدّم أكثر من ذلك بكثير. ستُجمّع إضافة HubSpot الإرسالات (submissions) من أي نموذج لديك على موقعك الذي يعمل بووردبريس (حتى لو بنيتها باستخدام الإضافة المجانية Forminator أو Hustle) وستضيف HubSpot هؤلاء العملاء المتوقّعين الجدد تلقائيًا إلى إدارتك الخاصة بعلاقات العملاء (CRM). يمكنك تقسيم قاعدة بيانات جهات اتصالك إلى قوائم وإضفاء طابع شخصي على رسائل بريدك الإلكتروني باستخدام أي خاصية من خواص إدارة العلاقات مع العملاء (CRM). وكل هذا مجانًا! يمكنك نشر تقارير عن النجاح الكلّي لبريدك الإلكتروني ومعرفة كيفية تفاعل كل جهة اتصال (contact) مع حملات بريدك الإلكتروني ويعود الفضل في هذا إلى التحليلات المدمجة في هذه الإضافة. تتضمن هذه الإضافة على محادثة مباشرة (live chat) وباني روبوت الدردشة (bot builder) حتى تتمكن من البدء في التفاعل مع الزوّار وجذب عملاء محتملين. يمكنك إعداد روبوتات الدردشة للإجابة على الأسئلة البسيطة من قِبَل زوّار موقعك لتتمكن من التفاعل مع زوّارك حتى عندما تكون غير متصلٍ بالإنترنت. محتملين. يمكنك إعداد روبوتات الدردشة للإجابة على الأسئلة البسيطة من قِبَل زوّار موقعك لتتمكن من جذب زوّار حتى عندما تكون غير متصلٍ بالإنترنت. بمجرد أن يرسل شخص ما معلوماته عبر نموذج (form)، أو نافذة منبثقة (popup)، أو الدردشة المباشرة (live chat)، يمكنك حينها أتمتة بريد إلكتروني راجع (kickback email) للاتصال مع هذا العميل ومشاركة المحتوى معه. W3 Total Cache صُممت هذه الإضافة لزيادة تحميل صفحة الويب لمواقع ووردبريس، مما سيحسّن تجربة الزوّار الإجمالية. تساعد هذه الإضافة على زيادة أداء الخادم عن طريق تقليل مرات التحميل. بتقليل أوقات تحميل الصفحة، سيتحسّن الأداء الكلّي للموقع مما يساعد على رفع تصنيف موقعك في محركات البحث. تُمكّن إضافة W3 Total على تحسين أداء خادم الويب خلال فترات الازدحام العالية، وهو أمر مصيري للمواقع الكبيرة. اختبر محررو موقع wpmudev أفضل إضافات التخزين المؤقت لمعرفة الأفضل منها في تحسين سرعة الصفحات. Defender يُعد ووردبريس خيارًا شائعًا لإنشاء مواقع الويب وهذا يجعله هدفًا مثاليًا للمخترقين لأنهم يستطيعون إنشاء برنامج خبيث يُفسد ملايين المواقع دون عناءٍ يُذكر. لا يهم إذا كان موقعك مستهدفًا أم لا، بل المهم متى سيُستهدف. هذا السبب في أنّ الحفاظ على أعلى معايير الأمان مهم للغاية. إذا تمكّنت من إعداد حماية جيّدة، فيمكنك حماية موقعك من المخترقين، وستساعدك إضافة Defender في حمايتك وستقدم لك المزيد من الخدمات. تبحث إضافة Defender عن أي ثغرات أمنية في موقعك وتتيح لك معرفتها إذا وجدت في موقعك حتى تتمكن من ترقيعها بنقرة واحدة. هذا يعني أن تثبيت هذه الإضافة سيساعدك حتى بعد اختراق الموقع وسيحمي موقعك من أي اختراق محتمل بنقرة واحدة، وهذا سيجعل موقعك منيعًا ضد الاختراقات. أفضل ما في هذه الإضافة أنك بمجرد ضبط إعداداتها وتفعيل الفحص المُجَدْوَل يمكنك حينها نسيانها لتقوم بالعمل دوريًا بدلًا عنك. إضافة لذلك، قد يكون أفضل ما في الأمر أن هذه الإضافة مضمّنة في عضوية WPMDEV ويمكنك تجربتها مجانًا لمدة 30 يومًا. Jetpack توفّر إضافة Jetpack العديد من المميزات. ترفع هذه الإضافة الأمان، وتزيد كفاءة الموقع، وتحتوي العديد من أدوات المحتوى ومميزات مشاركة الزوّار. تحتوي على ميزة إضافة تعليقات خالية من السُخام (spam)، والمشاركة على منصات التواصل الاجتماعي، والنشر عبر البريد الإلكتروني وغيرها الكثير. توفّر Jetpack قالبًا (theme) للجوال يتميّز بسرعته وخفته وهو ملائم للاستخدام على الجوالات والأجهزة اللوحية. Akismet تساعد إضافة Akismet على تصفية أي تعليقات غير مرغوب فيها أو تبدو كذلك. تتحقق هذه الإضافة تلقائيًا من التعليقات عبر خدمة Akismet على الويب. سيكون لكل التعليقات سِجل للمستخدمين يعرض التعليقات التي عُلّمت أو مُحِيَتْ من بواسطة Akismet. إضافة لذلك، ستُعلّم كل التعليقات التي مُيّزت أنها رسالة غير مرغوب فيها أو غير مُعلّمةٍ من قبل مشرف الموقع (moderator) في السِّجل. Google Analytics +‎ تتبُّع كيفية وتوقيت زيارة المستخدمين لموقعك مهم للغاية إذا كنت تريد زيادة شعبية موقعك؛ لأن هذا التتبع سيعطيك الفرصة لمعرفة المكامن التي تتطلب التحسينات على موقعك. تُعدّ تحليلات Google أداةً ممتازةً لهذا الغرض، وتحضر إضافة Google Analytics +‎ هذه المعلومات مباشرة إلى لوحة تحكم مدير الموقع. ستمكّنك هذه الإضافة من تتبّع الزيارات، وعدد مرّات مشاهدة الصفحة، ومعدّل الارتداد (Bounce Rate) ويعني معدّل خروج الزوار من موقعك فورًا من أول صفحة، وستمكّنك هذه الإضافة من معرفة متوسط مدة الزيارة، والمراجع التي أتى منها الزائر إلى موقعك، ليس هذا وحسب، بل وستستطيع تمكين الإعدادات المتقدمة لتتبّع محتوى موقعك بحسب علم السُّكان (demographic)، ومدى الاهتمام بالإعلانات (interest for advertising) بالإضافة إلى تحليل سلوكيّات التسوّق لتعزيز أداء منتجاتك. كما يمكنك تتبّع إحصائيات موقعك أو شبكة مواقعك بسهولة من خلال إعدادات سريعة ومفهومة عند العرض. Google XML Sitemaps تولّد هذه الإضافة - المتوجّب تثبيتها في موقعك - تلقائيًا خريطةً لموقعك (XML sitemap). يُعدّ هذا الأمر ضروريًا لمساعدة محركات البحث على فهرسة موقعك فهرسة أفضل. بوجود خريطة الموقع (sitemap)، ستتمكن زواحف محركات البحث (search engine crawlers) من رؤية بنية موقعك رؤيةً أفضل وبالتالي ستزداد كفاءة موقعك بالنسبة لمحركات البحث. ستُنبّه محركات البحث مثل Google و Bing و Yahoo في كل مرة تكتب منشورًا جديدًا على موقعك. iThemes Security (كانت تُسمّى Better WP Security) تساعد إضافة iThemes Security في إصلاح الثغرات الشائعة في مواقع ووردبريس لمواجهة الهجمات الآلية المحتملة. لا يعلم كثير من مديري مواقع ووردبريس عن هذه الثغرات الأمنية، لكن إضافة iThemes Security ستقوم بما يلزم لحماية مواقعهم. ونظرًا لوجود ثغرات أمنيّة غير معروفة ناتجة من الإضافات الأخرى المثبتّة على موقعك، يمكن أن يكون موقعك معرضًا للاختراقات. تعمل إضافة iThemes Security على تحديد هذه الثغرات وإصلاحها حمايةً موقعك. Contact Form 7 يمكن إنشاء نماذج اتصال (contact forms) متعددة وإدارتها من خلال هذه الإضافة. لا حاجة لكتابة شيفرة إضافية مع إضافة Contact Form 7، كما يمكنك تخصيص محتويات البريد الإلكتروني بسهولة عبر الإعدادات. تدعم هذه الإضافة عملية الإرسال المقدمة من Ajax، واختبار CAPTCHA، ومرشحات Akismet للمساعدة في تصفية البريد غير المرغوب فيه. Snapshot يمكن أن يوفّر النسخ الاحتياطي لموقعك الكثير من الندم مستقبلًا. سواءً توقّف موقعك عن العمل أو اُخترق فلا مشكلة، ما عليك إلا استعادة موقعك من نسخة احتياطية وسيرجع كما كان وكأنّ شيئًا لم يكن. ولكن ماذا لو فقدت نسختك الاحتياطية أو تلفِت أو حُذفت خطأً؟ هل لديك نسخة احتياطية لنسخك الاحتياطية؟ لا يملك معظم الناس هذا المستوى من النسخ الاحتياطي، ولكن لا داعي للقلق بشأن ذلك مع وجود إضافة Snapshot Pro. تستطيع هذه الإضافة إنشاء نسخ احتياطية لموقعك، ويمكنها أيضًا حفظ هذه النسخ الاحتياطية في مواقع متعددة مثل Dropbox و Amazon S3 و Google Drive وحاسوبك المحلي والمزيد. يمكن توقيت النسخ الاحتياطية بأزمنة مجدولة بحيث لا تضطر لعمل ذلك يدويًا من أجل استعادة موقعك عند حدوث الكوارث. جرّب هذه الإضافة مجانًا لمدة 30 يومًا. Branda (كانت تعرف باسم Ultimate Branding) عندما تدير موقع ووردبريس لعملك التجاري، فأنت تعلم أن المظهر الاحترافي لموقعك مهم بنفس أهمية محتوى موقعك ومنتجاتك. هذا هو السبب في أن تكون قادرًا على تخصيص موقعك بالكامل واستبدال أي شيء فيه. فكرة رائعة. يمكنك استبدال شعار ووردبريس بشعارك، وتخصيص شريط المدير، وإضافة اسم شركتك لتحقيق علامة تجارية متّسقة في موقعك. تمكّنك هذه الإضافة من عمل كل ما سبق وأكثر. يمكنك تخصيص شريط المدير تخصيصًا كاملًا، وصفحة تسجيل الدخول، وتذييل الصفحة (footer)، ولوحة التحكم، وفي كل مكان آخر تظهر فيه شعارات ووردبريس وعلامتها التجارية. يمكنك حتى إضافة علامتك التجارية في أماكن أكثر، وبالإضافة لذلك، لن تكتب أي شيفرة برمجية. هذه الإضافة سهلة الإعداد والاستخدام وتعمل عبر شبكات مواقع ووردبريس (Multisite WordPress network) بأكملها أو في موقع ووردبريس واحد. هذه الإضافة هي الإضافة الوحيدة التي تحتاجها للعلامة التجارية لتحويل موقع ووردبريس إلى موقع شركتك. SmartCrawl أنت تعمل بجدّ على إنشاء محتوىً هائل لجذب الزوار إلى موقعك ولكن هل استهدفت كل المستخدمين الذين من الممكن أن يهمهم محتوى موقعك؟ يمكن أن تساعد بعض ممارسات تحسين موقعك لمحركات البحث (SEO)، ولكنك ستمضي بعيدًا مع إضافة SmartCrawl. تجعل هذه الإضافة موقعك أكثر جهوزية لمحركات البحث عن طريق إعلام زواحف الويب (web crawlers) عندما يحتوي موقعك على محتوى مهم يحتاج إلى التسجيل بدلًا من انتظار زواحف الويب للعثور عليك. وعلاوة على ذلك، يمكن للإضافة SmartCrawl إنشاء خريطة موقعك (sitemap)، وتخصيص كيفية ظهور عناوينك (titles) وأوصاف صفحاتك (descriptions) في محركات البحث، وإضافة رابط تلقائي للكلمات المفتاحية (keywords)، ويمكنك أيضا عرض التقارير الرائدة في مجال تحسين المواقع لمحركات البحث من موقع Moz. وفوق ذلك، يُعدّ إعداد واستخدام SmartCrawl سريعًا من خلال مرشد الإعداد (setup wizard). إذا كنت ترغب في التحقق من ذلك بنفسك، يمكنك تجربة ذلك مجانا لمدة 30 يومًا أو بالاشتراك بعضوية WPMU DEV. Yet Another Related Posts Plugin هذه الإضافة "Yet Another Related Posts" والتي يطلق عليها اختصارًا YARPP، يمكنها عرض قائمة من المنشورات أو الصفحات المتعلقة المنشور الحالي. توفّر هذه الميزة فرصةً رائعة للقراء لمشاهدة المحتوى الآخر ذا الصلة من موقعك. لدى مديري المواقع خيار عرض المحتوى الموجود على موقعهم فقط أو يمكنهم جني أموال إضافية من خلال عرض المحتوى الدعائي. Smush Pro يعدّ رفع الصور على موقعك وفي منشوراتك طريقةً ممتازة لجذب انتباه الزوّار، لكنها تثقل كاهل موقعك. تشغل الصور مساحة كبيرة، ,والأسوأ أنها تبطّئ الموقع. لحسن الحظ، يمكنك ضغط صورك لحل هذه المشكلة. قُيّمت إضافة Smush Pro أنها أحسن إضافة لضغط وتحسين الصور. ليس هذا فقط، ولكنها تعمل بطريقة توفّر مساحة التخزين، وتساعد على تحميل موقعك أسرع دون تقليل جودة الصور. يمكنك ضغط الصور وتحسينها تلقائيًا أو يدويًا أو تحديد مجموعة من الصور وتحسينها مرة واحدة، وتحسين الصور بقوة ضغط أقوى بعشر مرّات دون فقد جودة الصورة. تتكامل هذه الإضافة مع إضافتي NextGEN و WP Retina 2x، لذلك لا داعي لقلق المصورين بشأن عرض صورِ واضحة ورائعة. لقد أضيف أيضًا إلى Smush Pro ميزة التحميل المُرجأ (lazy loading) وهي ميزة تأخير تحميل الصور في أسفل صفحات الويب حتى يصل إليها المستخدم، وهي بهذا ترفع سرعة وكفاءة المواقع لعدم تحميل أي صورة إلا بحسب الحاجة إليها. يمكنك تجربة الإصدار المجاني من WP Smush على wordpress.org أو تجربة الإصدار المميز مجانا لمدة 30 يومًا. إذا كنت بالفعل عضوًا في WPMU DEV فأنت تملك صلاحيّة الوصول إلى إضافة WP Smush Pro، لذا يمكنك تجربته ومعرفة سهولة استخدامه وربما رفع أداء موقعك للطاقة القصوى. Forminator تقدّم إضافة Forminator ميزات قيّمة لتوفير المال وربحه مقابل لا شيء. تكامل مع تطبيقات أخرى مثل Zapier، وجدول بيانات Google، ومجموعة من تطبيقات التسويق عبر البريد الإلكتروني. تكامل مع بوابات الدفع الإلكتروني الشائعة لحلول التجارة الإلكترونية البسيطة. في الواقع، إذا كنت تستخدم Stripe، فستحبّ حقًا إمكانية إجراء عملية دفع إلكتروني دون مغادرة الصفحة. تصميم بدون كتابة أي شيفرة برمجية حتى تتمكّن من تصميم الشكل الذي تريده دون الانشغال باستخدام CSS. منطق شرطي (Conditional Logic) حتى تتمكن من إنشاء نماذج ديناميكية (dynamic forms). إجراء الحسابات الرياضية حتى تتمكن نماذجك من إجراء العمليات الحسابية بدلًا عنك. ستتمكن من الوصول الكامل ل 24 حقلًا متقدمًا حتى تتمكن من التحقق من صحة بياناتك. باستخدام زر معاينة النموذج في Forminator، يمكن عرض النموذج أثناء بنائه وتصميمه دون الحاجة إلى تضمينه في الصفحة أولًا لمعرفة ما إذا كان يبدو صحيحًا. هذه الإضافة هي الوحيدة التي تسمح لك بإنشاء نماذج، واستطلاعات الرأي (polls)، والإرسالات (submissions)، والاختبارات (quizzes)، وإرسال منشورات المدونة من نموذج (form). ويحتوي على واجهة برمجية (API) يمكنك الوصول إليها مجانًا واستخدامها لإنشاء إضافات مخصصة لك. هناك شيء مهم جدًا للمستخدمين الأوروبيين وهو الميزات المتقدمة لمساعدتك على البقاء متوافقًا مع اللائحة العامة لحماية البيانات في الاتحاد الأوروبي (GDPR). يمكنك ضبط مدة الاحتفاظ بالبيانات، وتعيين المدة التي يجب الاحتفاظ بها ببروتوكول الإنترنت (IP)، قبل إخفاء هوية هذه البيانات، بل وهناك حقل (field) لخانة تأشير (checkbox) اللائحة العامة لحماية البيانات في الاتحاد الأوروبي. Duplicator هل احتجت يومًا للنسخ الاحتياطي أو نقل موقع ووردبريس بالكامل إلى موقع آخر؟ يمكن لإضافة Duplicator نسخ الموقع، وإنشاء نسخة احتياطية، ونقل الموقع أيضًا. يمكن لهذه الإضافة أن تكون بمثابة أداة سهلة لهؤلاء المديرين الذين يتطلّعون إلى النسخ الاحتياطي لمواقعهم. هل تحتاج إلى استنساخ موقعك الذي يعمل حاليًا لأغراض اختبارية؟ نعم، تعدّ هذه الإضافة Duplicator الحل المثالي لعمل نسخة احتياطية من موقع ووردبريس من أجل الاختبار والتحقق من صحته. Relevanssi يمكن لإضافة Relevanssi استبدال خيار البحث الافتراضي في موقعك بنتائج موقعك حسب أهميتها، بدلًا من عرضها بحسب التاريخ. هذه الإضافة قابلة للتخصيص بحيث يمكن إعدادها لإجراء مطابقة مبهمة (fuzzy matching) للكلمات الجزئية (partial words). يمكن العثور على المحتوى عن طريق المطابقة على مصطلح بحث واحد فقط أو يكون مطلوبًا العثور على جميع الكلمات التي تطابق مصطلح البحث. هناك نسخة مجانية من Relevanssi تدعم موقعًا واحدًا، بينما توفّرر النسخة المتميزة دعمًا لشبكة مواقع (multi-site) إلى جانب ميزات أخرى. Broken Link Checker تراقب إضافة Broken Link Checker الروابط في منشوراتك، وصفحاتك وتعليقاتك وقائمة المدونات (blogroll)، وغيرها. تحدّد الإضافة أي روابط معطّلة لم تعد تعمل أو تفتقد الصور (في حالة كانت الصورة رابطًا من موقع آخر) أو أي عمليات إعادة توجيه (redirect) معطّلة. ما إن يُحدّد رابط معطّل على موقعك، يمكنك حينها تحرير الروابط مباشرة من صفحة الإضافة لتجنب تحديث كل منشور يدويًا. Disable Comments إضافة Disable Comments والتي تعني إلغاء تفعيل التعليقات، تتيح لمديري المواقع التحكم العام في التعليقات على موقعهم. يمكن إلغاء تفعيل التعليقات بحسب نوع المنشور، أو الصفحات، أو المرفقات، …إلخ. تعمل هذه الإضافة جيدًا إذا كنت تريد إلغاء تفعيل التعليقات على أنواع منشورات محددة أو على موقعك بالكامل. وعلى الرغم من ذلك، إذا كنت ترغب في إلغاء تفعيل التعليقات على المشاركات الفردية انتقائيًا، فمن الأفضل استخدام هذه الوظيفة مباشرة في إعدادات ووردبريس الأساسية. Regenerate Thumbnails تمكّنك هذه الإضافة من إعادة توليد الصور المصغّرة من الصور المُرفقة. لديك الخيار لتوليد الصور المصغرة من كل الصور المرفوعة إلى الموقع، أو توليد هذه الصور المصغّرة لصور محددة أو لتحديد مجموعة معيّنة من الصور وتوليد الصور المصغّرة منها. تعدّ هذه الإضافة مفيدة للغاية إذا غيّرتَ أيًا من أبعاد صورك المصّغرة أو حوّلت إلى قالب آخر يستخدم أبعادًا مختلفة للصور. Easy Updates Manager تمكّنك إضافة Easy Updates Manager من إدارة جميع تحديثات ووردبريس سواءً كان ذلك لموقع واحد أو عدة مواقع. تتوفر الكثير من الإعدادات المضمّنة في الإضافة مما يتيح تخصيصًا عاليًا. تشمل الميزات خيارات لتحديث الإصدارات الرئيسية والثانوية تلقائيًا من ووردبريس. يمكن لمديري المواقع تحديث الإضافات والقوالب وغير ذلك الكثير. Redirection يمكن أن تساعد إضافة Redirection في إدارة عمليات إعادة التوجيه 301 وتتبع أخطاء 404 دون عناء البحث في ملفات ‎‎‎.htaccess. يمكن أن تكون هذه الإضافة مفيدة حقًا إذا كنت تقوم بترحيل الصفحات من موقع ويب آخر وتُغيّر هياكل الدليل الخاصة بتثبيت ووردبريس. يمكن إعداد هذه الإضافة لتمرير عنوان URL إلى صفحة أو ملف أو موقع ويب آخر. يمكن إعادة توجيه أي عنوان URL، وليس فقط تلك العناوين التي لم تعد موجودة. TablePress يمكنك باستخدام الإضافة TablePress بسهولة إنشاء جداول يمكن تضمينها في المنشورات أو الصفحات أو عناصر واجهة المستخدم (widgets) النصيّة باستخدام شيفرة قصيرة (Shortcode). لا حاجة إلى تشفير خاص إذْ يمكن إدخال بيانات الجدول مباشرة في واجهة جدول البيانات (spreadsheet). يمكن أن تحتوي الجداول على أي نوع من البيانات، بما في ذلك الصيغ الرياضية (formulas). تضيف ميزات الفرز، وترقيم الصفحات، والترشيح (filtering)، ميزات إضافية لإضافة TablePress. يمكن أيضًا استيراد الجداول أو تصديرها من وإلى هذه الصيغ Excel و CSV و HTML و JSON. Advanced Custom Fields تمنح هذه الإضافة لمستخدمي ووردبريس المرونة لإنشاء الحقول المخصصة بصريًا لموقعهم. تتضمن أنواع إدخال الحقول المخصصة ما يلي: النص العادي (text)، والنص الكبير (textarea)، ومحررات تُظهر النتيجة النهائية للتعديل الذي تقوم به آنيا (WYSIWYG)، والصورة، والملف، والرابط، وكائن المنشور (post object)، والعلاقات، وحقل الاختيار من متعدد (select)، وخانة التأشير المتعدد (checkbox)، وخانة التأشير الوحيد (radio button)، ومنتقي التاريخ (date picker)، وحقول الصواب والخطأ (true/false)، والمحتوى المرن، ومعرض الصور (gallery). WP Mail SMTP تعيد إضافة WP Mail SMTP تهيئة وظيفة استلام البريد الإلكتروني في ووردبريس لتأتي بخدمة بريد SMTP بدلًا منها. توفر الإضافة صفحة إعداد تتيح لك تكوين خيارات البريد الإلكتروني المختلفة. تتضمن هذه الخيارات تحديد استضافة SMTP ومنفذ SMTP، وتحديد الاسم وعنوان البريد الإلكتروني للبريد الصادر، وإعداد اسم مستخدم SMTP وكلمة المرور، وغير ذلك. لمزيد من المعلومات عن كيفية استخدام استضافة WP Mail SMTP لإرسال رسائل البريد الإلكتروني، راجع هذا الدليل عن كيفية استخدام خدمة Gmail لإرسال بريد ووردبريس الإلكتروني. Photo Gallery توفر إضافة Photo Gallery أدوات تساعد في إضافة وتحرير الصور لأساليب عرض مختلفة على موقعك متجاوبة على جميع الأجهزة بنسبة %100. يمكن إضافة معارض الصور والألبومات بسهولة إلى المنشورات والصفحات الموجودة في موقع ووردبريس ويمكن إضافتها أيضًا إلى عددٍ من عناصر واجهة الاستخدام (widgets). يمكن لهذه لإضافة أيضًا تسهيل إعادة تسمية الصور، وتحميلها، وحذفها، ونسخها في بضع خطوات فقط. يمكن إضافة أوصاف الصور ووسومها (tags) عن طريق هذه الأداة كذلك. All In One Schema.org Rich Snippets يمكن أن تساعد هذه الإضافة في إعطاء محركات البحث ملخصًا مفيدًا لمحتواك المعروض. يمكن أن تساعدك مقتطفات المعلومات الخاصّة بمحتواك على أن تتميّز على منافسيك. تدعم هذه الإضافة أنواع المحتوى التالية: مراجعة (review)، وحدث (event)، وأشخاص، ومنتج، ووصفة (recipe)، وتطبيق برمجي، وفيديو، ومقالات. Black Studio TinyMCE Widget تتيح لك هذه الإضافة إدراج نص أو وسائط مباشرة إلى شريط موقعك الجانبي (sidebar) دون كتابة أي شيفرة HTML وكل ذلك عبر محرّر مرئي. افتراضيًا، تفتقر عناصر واجهات الاستخدام (widget) في ووردبريس إلى إمكانيات التحرير التي تُقدّم في المنشورات والصفحات. تتغلب هذه الإضافة على القيود من خلال توفير واجهة نظيفة لإضافة الوسائط والنصوص. ولأولئك الذين يفضّلون التبديل من محرر مرئي إلى شيفرة HTML (مثل المنشورات والصفحات) لديهم أيضًا هذا الخيار. Optimize Database افتراضيًا، يحتفظ ووردبريس بجميع منشوراتك، وصفحاتك، وتعليقاتك، وكل مراجعات منشوراتك، وتعليقات البريد العشوائي (spam). كل ما سبق حتى لو حُذف فسيُحفظ افتراضيًا في ووردبريس، كذلك ستحفظ الوسوم غير المستخدمة وما شابه ذلك. وإلى أن يأتي الوقت الذي تتخلص فيه من كل هذه العناصر الزائدة يدويًا، فإنّ هذه العناصر ستتراكم وستبطّئ موقعك. تُنظّف إضافة Optimize Database قاعدة بيانات موقعك من جميع الجداول التي لم تعد تحتاج إليها بما في ذلك البيانات الضّالة الأخرى مثل عناصر postmeta اليتيمة (وتعني البيانات الوصفية لمنشور معيّن بعد حذف ذلك المنشور)، والعناصر منتهية الصلاحية. يمكنك اختيار ما تريد حذفه بالضبط حتى لا تحذف عن طريق الخطأ العناصر التي تريد الاحتفاظ بها. ما إن تُنَّظف قاعدة بياناتك، ستصبح أسرع وسيصبح موقعك أكثر سلاسة. هذه الإضافة متوافقة مع المواقع المتعددة (Multisite) لذا يمكنك تفعليها على شبكة مواقعك وستحسن الإضافة هذه الشبكة من المواقع بنقرة واحدة لكلٍّ منها. يمكنك أيضًا جدولة قاعدة بياناتك لتحسينها تلقائيًا تحسينًا منتظمًا حتى تتمكّن من الحفاظ على قاعدة بيانات محسنّة دائما لا حاجة إلى القلق بشأنها. ترجمة -وبتصرف- للمقال ‎30 Essential WordPress Plugins You Should Install If You Haven’t Already لصاحبه Tom Ewer

واحدة من أبرز قوى ووردبريس مكتباته التي تحتوي على المئات من دوال PHP، وهذه الدوال لديها وظائف متعددة من كتابة روابط التدوينات والمشاركات داخل الإضافة إلى استرجاع اسم مستخدم كاتب التدوينة والاستعلام عنه في قاعدة البيانات. فإذا لم تفهمهم، ستكون العناصر الأساسية للووردبريس مثل the_post غريبة بالنسبة لك، وسيكون الكود التي تكتبه مليئا بالأخطاء والغرابة. وفي نفس الوقت، عند محاولة استعمال المئات من الدوال ذات أسماء غير نظامية يمكن أن يسبب الإرباك لقارئها، لذا سأقوم اليوم بإعطائك مبدأين أساسيين لفهم دوال ووردبريس. هذه المبادئ المنطقية تطبق بشكل واسع (إذا لم يكن عالميا) على مكتبات الدوال، والتي سوف تعطيك نظرة خاطفة على وظيفة دالة ووردبريس معينة. 1. دوال _get تقوم بإرجاع أشياء و دوال _the تطبع أشياءهذا ملخص بسيط لآلية عمل هذين الدالتين: دوال _get تقوم بإرجاع قيمة، مما يسمح لك بالتعامل معها في تعليمات برمجية لاحقة. دوال _the تقوم بطباعة قيمة في صفحة HTML في المكان الذي تم استدعاؤها فيها.ولتوضيح ذلك، لنلق نظرة على الكود المصدري لدالتين، دالة ()the_ID و دالة ()get_the_ID: function get_the_ID() { post = getpost(); return !empty(post ) ? $post->ID : false; } function the_ID() { echo get_the_ID(); }باختصار، إن دالة ()get_the_ID تقوم بإرجاع مُعرف الرقمي للتدوينة، وأما return فهي تعني: قُم بإعطاء القيمة لمن طلبها”، وعندما تحصل على هذه القيمة، يمكنك القيام بأي شيئ بها، مثلا تقوم بضربها في 3، قسمتها على 2، وغيرها حسب البرنامج، (بالمناسبة إذا كنت تتساءل على بقية الشِفرة البرمجية فإن معناها قُم بإرجاع المُعرف، أو قُم بإرجاع false إذا لم تجد التدوينة التي يجب أن تحصل على مُعرفها). لنفترض أنك ترد تعديل صفحة php، لنأخذ ملف index.php للقالب على سبيل المثال، وتريد أن تقوم بطباعة عنوان التدوينة في الصفحة، هذه بعض الخيارات لتفعل ذلك: <h1><?php get_the_title(); ?></h1> <!-- لن يتم طباعة أي شيئ --> <h1><?php the_title(); ?></h1> <!-- طباعة عنوان التدوينة داخل عنصر h1 --> <h1><?php echo get_the_title(); ?></h1> <!-- طباعة عنوان التدوينة داخل عنصر h1 --> <h1><?php echo 'My title: ' . get_the_title(); ?></h1> <!-- طباعة ": My title" وعنوان التدوينة داخل عنصر h1 -->سيكون مفيدا أن تعرف هذه العلاقة التي تُعقد عبر مكتبة دالة ووردبريس مع استثناء أن ()the_post تقوم بشيء مهم لكنها لا تطبع أي شيئ. 2. داخل أو خارج الحلقة التكراريةالحلقة التكرارية هي النواة التقنية الأساسية لووردبريس، بعض الدوال يجب أن يتم استدعاؤها داخل الحلقة التكرارية، وبعضها لا يجب ذلك، فمثلا هذا المثال يوضح لك ما معناه "دالة داخل الحلقة": //خارج الحلقة التكرارية if ( have_posts() ) : while ( have_posts() ) : the_post(); // داخل الحلقة التكرارية، محتويات التدوينة تكون هنا endwhile; endif; // خارج الحلقة التكرارية مرة أخرىللتمييز بين “دالة داخل الحلقة” و “دالة خارج الحلقة”، سنقوم باستخدام التشبيه لتفسير مكان الحلقة داخل الووردبريس: لنتخذ ووردبريس كمصنع سيارات! ووردبريس هو مصنع السيارات. المشاركات والتدوينات هي السيارات. الحلقة التكرارية هي خط التجميع في المصنع.دعونا نشرح العلاقة بين هذه المصطلحات بمزيد من التفاصيل: خط التجميع تدخل داخله أجزاء السيارات خامة لتخرج سيارة كاملة. بنفس الطريقة، الحلقات التكرارية هي مواد المشاركات الخامة (محتوى المشاركة والبيانات التعريفية) تدخل لتخرج صفحة HTML جاهزة.والآن دعونا نشرح الجزء المهم: كل عملية تقوم بتغيير أو تقوم باسترداد معلومات حول السيارات يجب أن تكون في خط التجميع، ويجب أن يتم الإعلان عن أية سيارة ستعمل بطريقة أخرى، فالعمليات التي لا تعمل على السيارات يجب أن لا تكون في خط التجميع. وبالمثل، كل دالة تقوم باسترداد أو تغيير أو عرض لخصائص التدوينة أو المشاركة يجب أن تكون إما داخل الحلقة التكرارية أو يجب أن يتم إعطاء معرف التدوينة أو المشاركة للتعامل معها كمعامل (paramter) للدالة. الدوال التي لن تعمل عن التدوينات/المشاركات لا يجب أن تكون داخل الحلقة التكرارية. عمليا هذا يعني: إن دوال _the وأغلب دوال _get_the تفترض معرفة التدوينة/المشاركة الحالية لذا سيعملون فقط داخل الحلقة التكرارية. أما في خارج الحلقة التكرارية، يجب إخبار دوال _get_the على أية تدوينة ستعمل، أي يجب تمرير معرفة التدوينة. الدوال التي لا تستخدم لاسترداد أو تغيير أو عرض لخصائص التدوينة/المشاركة يجب أن لا يتم استدعاؤها في الحلقة التكرارية.على خط التجميع: دالة _the_title التي تعمل فقط في الحلقات التكرارية. بالنسبة لآلة الطلاء فإنه يجب على الآلة أن تعرف الكثير من المعلومات حول السيارات قبل البدء بطلائه، ولهذا السبب ستجد هذه الآلة في خط التجميع تحصل على معلومات السيارة الحالية بهذه الطريقة و سوف تكون في المكان الصحيح لطلاء السيارة في الوقت المناسب في المصنع. آلة الطلاء في هذه الحالة هي دالة _the_title، فهي تعمل فقط داخل الحلقة التكرارية، وهي تقوم بطلاء الموقع الذي صممه المصنع لعمل عنوان التدوينة الحالية. لتكون قادرا على الإشارة إلى عنوان تدوينة في موقع ربما يمتلك أكثر من 1000 تدوينة ومشاركة يجب أن نعلم أية تدوينة نريدها بالضبط، والدالة التي تقوم ببساطة بطباعة عنوان التدوينة (بدون خيارات أخرى) لن تؤثر كثيرا خارج سياق الصفحة التي صممت من تلك التدوينة. لذلك فالطريقة الوحيدة لتعمل دالة ()the_title هو وضعها داخل الحلقة التكرارية، مثل الآلة الطلاء التي لا يجب أن تكون في بهو المصنع. داخل أو خارج خط التجميع: ()get_the_title، دالة داخل أو خارج الحلقة التكرارية. دعونا نفترض أنك تريد معرفة لون طلاء لسيارة، وهذا الأمر سيكون ذا أهمية داخل خط التجميع، وفي هذه الحالة سوف تقوم ببناء آلة تقوم بإعطائك لون السيارة التي تمر من أمامها. لكن قد ترغب أيضا بإرسال فريق مراقبة الجودة إلى منطقة الشحن للحصول على لون سيارة معينة، لذلك سوف يحتاج الفريق إلى معرفة أية سيارة سيقومون بتفقدها، وإلا لن يستطيعوا إخبارك بأي شيئ. بكلمات أخرى، يمكنك فعل هذا داخل أو خارج خط التجميع، لكن إذا كنت في الخارج، يجب عليك أن تقوم بخطوة إضافية لتحديد أية سيارة أنت مهتم بها. فمثلا دالة ()get_the_title التي تعمل داخل الحلقة التكرارية بدون إدخال معطيات، أو خارج الحلقة مع إدخال مُعرف التدوينة، كما يلي: get_the_title(); // يتم استدعاؤها داخل الحلقة التكرارية، تقوم بإعطائك عنوان التدوينة الحالية. // استدعاؤها خارج الحلقة لن يفيد. get_the_title(‘121’); // داخل أو خارج الحلقة التكرارية، تقوم بإعطائك عنوان التدوينة مع المُعرف 121.خارج خط التجميع: ()wp_enqueue_script، دالة خارج الحلقة التكرارية. حتى الآن تحدثنا كثيرا حول خط التجميع في المصنع، ومع ذلك، قد يحتوي المصنع أيضا على مستودع ومكتب الاستقبال وقسم الشحن والمكاتب الإدارية وغيرها. ولا أي إدارة من هذه الإدارات تحتاج إلى معرفة أية سيارة يتم العمل عليه الآن، وأنت بالتأكيد لا تريد وضع المكاتب الإدارية مع خط التجميع. وهذا هو نفس الحال مع دالة ()wp_enqueue_script التي لا تفيد داخل الحلقة التكرارية، فهذه الدالة تستعمل لمعرفة أن صفحة ما تم صنعها بواسطة مصدر خاص للووردبريس أو لا. ملفات جافاسكريبت ليست جزءً من التدوينة تم صنعه بواسطة الحلقة التكرارية، فهو لا يتفاعل مع التدوينات بنفس الطريقة التي لا يتفاعل فيها مكتب الحسابات مع السيارات، فعندما توجد شحنة سيارات جاهزة، سوف يتأكد هذا القسم من أن الشحنة لديها فاتورة ملتصقة بها، لكنه بالتأكيد لا يعقل أن يتم إلصاق الفاتورة على أرض المصنع. لذلك لا تقم باستخدام دالة ()wp_enqueue_script في الحلقة التكرارية، وسيكون أفضل لو وضعتها في ملف functions.php للقالب أو للإضافة. قم بالبرمجةحسنا حاولت تسهيل هذا الأمر عن طريق استعمال جميع معرفتي عن مصانع السيارات، و من الأرجح أنني قمت بتوسيع منطقة التشبيهات داخل دماغي، لكن أرجو أنني علمتكم بعض المفاتيح الرئيسية التي سوف تمكنك من الدخول إلى عالم دوال ووردبريس وأنت مطمئن، وإذا كان لديك أي سؤال أو تعليق، فيسرنا أن نسمعه في التعليقات في الأسفل، وإذا أعجبك هذا المقال، أرجو أن تقوم بمشاركتها مع أصدقاءك. ترجمة -وبتصرف- للمقال: Two Key Principles for Understanding WordPress Functions لصاحبه Fred Meyer. حقوق الصورة البارزة: Business vector designed by Freepik.

إن السعي إلى إنشاء برامج خالية من الأخطاء في العالم الرقمي هو أمر جدير بالاهتمام. ولكن في حال وجدت هذه الأخطاء، فليس من الضروري أن تتسبب في مشكلة، إذ يمكن أن نقابل نتائج غير مرضية أو أقل من المتوقع للموقع أو التطبيق. بمعنى آخر، لا تكمن المشكلة غالبًا في الشيفرة بل في تصميم واجهة المستخدم (UI) أو تجربة المستخدم (UX) أو كليهما. يمكن للأدوات والموارد المطروحة هنا أن توفر لك الوقت والمال وتساعدك في تجنب مشكلات ناتجة عن قابلية الاستخدام (usability issues) عند استخدام المواقع والتطبيقات الخاصة بك. تعدُّ هذه الأدوات الأفضل في مجالها، إذ اخترناها بعناية من بين العديد من الخيارات المتوافرة. هل أنت جاهز؟ لنبدأ رحلة التعرف عليها. 1. Mason من الأمور البديهية في عالم تصميم وتطوير البرمجيات هو أن الحاجة إلى إجراء تغيير بسيط في منتج سبق نشره سيسبب في حدوث إشكاليات كبيرة في التخطيط والتنفيذ عدا عن النفقات غير المتوقعة وغير المخطط لها. لذلك، من الضروري أن تحمل الفرق على عاتقها مسؤولية تصميم التغيير، والذي يتم غالبًا من خلال استخدام أسلوب النموذج الأولي (prototyping approach) واختباره وبرمجته ثم الانتظار لحين دورة النشر القادمة لتثبيته واعتماده. وأثناء ذلك، لن يتمكن العميل أو المستخدم النهائي من فعل شيء سوى أن يتنتظر. لكن مع Mason، الأمر مختلف؛ فهو يقدم منصة مرئية مدعمَّة بأدوات بناء الواجهة الأمامية مما يوفر للفِرق بيئة عمل مشتركة وسريعة لإضافة الميزات للتطبيقات أو المنتجات الرقمية الأخرى المطلقة (أو المنشورة)، حيث يمكن بسهولة بناء تلك الميزات دون الحاجة إلى النماذج الأولية، أو الإطارات الشبكية، أو فحص ضمان الجودة (QA inspection). كذلك لا حاجة إلى البرمجة أيضًا نظرًا لأنَّ Mason ينشئ قاعدة بيانات خاصة به لإضافتها إلى قاعدة بيانات موجودة مسبقًا، مما يتيح للمطورين العمل في مشاريع برمجية أكبر وأكثر تعقيدًا. إن التطور السريع والقدرة الفائقة لـ Mason جعلت العملاء يشعرون بمزيد من الرضا والسعادة. يتم تشغيل Mason عند الحاجة دون أن يؤثر تشغيله على سرعة موقعك، وستظل الميزات التي تنشئها دائمًا موثوقة وقوية وقابلة للتوسيع والتطوير. 2. UXPin يوجد نماذج أولية مخصصة بالأساس لأغراض معينة ويوجد ونماذج أخرى تفاعلية، وواقعية، وقوية تثير لديك السؤال التالي: لماذا لا يمكن تجاهل مرحلة التطوير برمتها؟ تلك هي درجة الواقعية التي يمكن للمستخدم توقعها من الأداة UXPin. وذلك بفضل أنها أدة تصميم تعتمد على الشيفرة. تعرض UXPin حلولًا قريبة من رغبة المستخدم، فربط اللوحات الفنية الثابتة معًا لم يعد متواجدًا في وقتنا الحالي. هذه الأداة هي بمثابة الحلم الذي تحقق للمصمم. لماذا؟ لأنها تسهل عليه التصميم، وإنتاج النموذج الأولي، والتعاون مع مصممين آخرين في مكان واحد وآنيًّا. إبدأ بفكرة إثبات مفهوم الإطارات الشبكية، ثم تدرج في العمل نحو النماذج منخفضة الدقة إلى النماذج عالية الدقة. أنجز كل شيء آنيًّا دون الحاجة إلى ترك ومغادرة UXPin. تعد أداة تصميم واجهة وتجربة المستخدم UX/UI المعتمدة على السحابة أداةً ثابتةً ومفضلة لدى شركات 500 Fortune كشركة PayPal و Microsoft وذلك بفضل امكانياتها الهائلة في تصميم النماذج الأولية. فهي تتضمن العديد من الخصائص مثل: حالات التفاعل، والشرط المنطقي، والمتغيرات، ومكونات الشيفرة، وتعابير JavaScript وغيرها. ناهيك عن الطريقة التي تعزز وتبسط بها تعاون الفريق. 3. Interfacer متى كانت آخر مرة اضطررت فيها إلى إجراء بحث موسع للعثور بسهولة على أنسب خط، أو أيقونة، أو صورة، أو مجموعة أدوات واجهة المستخدم UI؟ سواء كان ذلك بالأمس القريب أو قبل عام، فمن المحتمل أنك تتذكره وتتذكر كم كان ذلك مضيعة للوقت! إن Interfacer هي عبارة عن مجموعة من المكتبات المصغرة المليئة بأدوات تصميم عالية الجودة من جميع الأنواع. كل ما يتم تقديمه ليس مجانيًا فحسب، ولكنه مجاني للاستخدام في المنتجات التجارية أيضًا. 4. Webflow من الأهمية بمكان أن تبحث عن منتج يتيح لك تصميم وتطبيق وإنشاء وإطلاق واستضافة موقع سريع الاستجابة من خلال منصة واحدة؛ وهذا تماما ما تقوم به الأداة Webflow. يمكنك من خلال تلك الأداة متعددة الامكانيات القيام بجميع ما سبق ذكره، بما في ذلك إنشاء نظام إدارة محتوى CMS سهل الاستخدام لكل موقع تقوم بإنشائه، دون الحاجة إلى برمجته. يمكنك كذلك بدء المشروع من واجهة فارغة أو باستخدام أحد القوالب المتوافرة أو مجموعة أدوات واجهة المستخدم UI المقدمة من قبل المجتمع. لماذا من المهم أن تختار واحدة أو أكثر من بين تلك الأدوات أو الموارد؟ التصميم الجيد لتجربة المستخدم UX يزيد من نسبة العثور على الموقع واستعماله وتفوقه على منافسيه. ربما صادفت أكثر من مرة وأنت تتصفح الويب بحثًا عن خدمة أو منتج معين ظهور عدة مواقع أخرى تخدم نفس الغرض في وجهك مباشرة؛ إذن، ما السبب في ظهور تلك المواقع؟ السبب هو تجربة المستخدم UX المتميزة التي تسهل استخدامك للموقع وكذلك تساعدك على العثور على ما تريده بسرعة ودون عناء. بعد أن تنجز ما أردته، يمكنك وضع إشارة مرجعية على الموقع لتتمكن من استخدامه في المستقبل. أليس من الرائع أن تكون مالكاً لذلك الموقع؟ التركيز على تصميم تجربة المستخدم UX يمكن أن يزيد من إخلاص العملاء للعلامة التجارية. إن التصميم الفريد والفعال لتجربة المستخدم UX يأخذك في رحلة فريدة وممتعة، إذ أنه يزيد من ثقة وإخلاص العملاء والمستخدمين لعلامتك التجارية أو لمنتجك أو الخدمة التي تقدمها. تعد تجربة المستخدم UX يستخدمها المصمم ليسهِّل على المستخدم عثوره على ما يريد أو إيصاله للمكان الذي يطلبه دون عناء بالإضافة إلى توفير أجواء ممتعة له خلال التصفح. صمم تجربة مستخدم UX تذهل العقول وتجعل كل من استعمل الموقع أو التطبيق يتحدث عنها. كيف يمكنك تحقيق ذلك؟ ببساطة من خلال تصميم تجربة المستخدم UX بشكل يسهل على المستخدمين التصفح بمرونة. فتزيد لديهم الرغبة بمشاركة خبراتهم مع الآخرين. والنتيجة؟ ستكون سلسة عملاء متنقلين يمدحون بك ويسهون في إذاعه صيتك، وهؤلاء العملاء من يقاتل الجميع حتى الموت لكسبهم. خاتمة ما الذي تحاول تحقيقه؟ توفير الوقت والمال وضمان توفير التحسيان دون الحاجة إلى النماذج الأولية؟ توفير الوقت والمال على المدى الطويل باستخدام أسلوب النماذج الأولية التكرارية أو السريعة؟ استخدام منصة واحدة فقط لإنجاز جميع الأعمال؟ البحث عن مصدر واحد يجمع أدوات تصميم مساعدة عالية الجودة (مثل الخطوط والصور والأيقونات ...إلخ.) تبقى متاحة عند الحاجة إليها؟ الأدوات والخيارات التي ذكرناها آنفًا توفر وتتيح لك ذلك بالإضافة إلى تحسين تصميم واجهة وتجربة المستخدم UI/UX. يمكنك اختيار واحدة منها، أو جميعها، ومن المؤكد أنك ستصل إلى نتائج جيدة باستعمالها. ترجمة -وبتصرف- للمقال Need help choosing a UX/UI tool? Check out these options

سواء كنت تبحث عن عملاء جدد أو تتبع محادثة هاتفية مع عميل أو حتى تقدّم توثيقًا لمواصفات منتجك، فإنك ستضطر إلى إرسال رسالة بريدية في النهاية، بل سيكون عليك في الحقيقة أن ترسل عشرات الرسائل المتشابهة كل يوم، ذلك يعني أنك ستكرر كثيرًا مما تكتبه في كل رسالة لكن مع تغييرات طفيفة هنا وهناك كي ﻻ تبدو رسالتك آلية لكل العملاء، فلا أحد يرغب أن يتلقى رسالة منواضح أنها آلية وليست مخصصة له، لكن ذلك لا يعني أنك مضطر إلى كتابة نفس الرسالة مرة بعد مرة، كما سيكون أفضل أن تركز على الأجزاء التي ستحدث فرقًا معك، وهنا يأتي دور القوالب البريدية. 4 أساليب لاستخدام وتخصيص القوالب البريدية يحفظ لك استخدام القوالب البريدية وقتًا لا بأس به ويسمح لك بزيادة عدد من تصل إليه، وإن اختيار أو تخصيص قالبك البريدي ليس صعبًا حتى لو كان لديك أسلوبك الخاص في جذب الانتباه، فهناك بعض النقاط التي يجب أن تبقيها في ذهنك إن كنت تريد أن تحصل على أكبر نسبة نجاح من رسائل البريد التي ترسلها. 1. انتبه إلى سطر العنوان تزيد نسبة فتح الشخص للرسائل البريدية إن كانت تحتوي على اسمه في سطر العنوان، هذه ظاهرة تم توثيقها جيدًا من قبل، لذا احرص –إن كان ذلك ممكنًا- على إدراج اسم المستقبِل في سطر العنوان في الرسالة. وتزيد أهمية هذه النقطة إن كنت ترسل رسائل باردة، حيث تكون غريبًا تمامًا على من ترسل إليه، وأضف إلى ذلك أنك يجب أن تبقي الرسالة مختصرة ومحددة وشخصية. إليك أمثلة على أسطر العناوين الشائعة: “{تقديم، مثل “مرحبًا”} {الاسم}”، أو “{تقديم} {اسمك/شركتك} <> {اسم المرسل إليه/شركته}” “{اسم شركة المرسل إليه}” “محاولة للتواصل” “طلب سريع” 2. متن الرسالة، ادخل في صلب الموضوع مباشرة إن أول جملة في متن الرسالة أهم مما تظن، ذلك أن أغلب برامج البريد تعرض أول جزء من متن رسالتك إلى جانب سطر العنوان، هذا يعني أن أول رسالتك سيكون ظاهرًا حتى دون فتح الرسالة أصلًا. لذلك فكر جيدًا ما الذي يمكن أن يجذب انتباهك أنت في أول خمس ثوان من قراءة الرسالة. 3. اجعل الرسالة شخصية سيكون هذا هو النص الوحيد الذي ستكتبه فعليًا، تلك الأنباء التي ستزفّها إلى عميلك لتلمس شخصه خاصة، وهنا يقوم القالب الجاهز بأغلب العمل ويذرك تصرف جهدك في أجزاء الرسالة التي تريدها أن تصل جيدًا إلى عميلك المحتمل. وتلك الخطوة مهمة جدًا في حالة رسائل المتابعة وإعادة فتح قنوات التواصل، وتتضمن طرق إضافة تلك اللمسة الشخصية إلى رسالتك ما يلي: استخدام أسماء الأشخاص والشركات والمنتجات. تأييد ما يفعل عميلك أو تأييد مهمة شركته. ذكر أي مخاوف أو مخاطر أو مشاكل تواجهه، وكيف يمكنك مساعدته في حلها. ذكر أي ملاحظات كنتَ قد ذكرتَها في محادثات سابقة. 4. احصل على نقد وطبّق ما فيه من المهم أن تحصل على نقد حول كيفية دخولك على العميل –أو إلى صندوق وارده-، فقد يطلب البعض ذلك النقد من عملائهم أو المستثمرين معهم ليساعدوهم على تجميع نقد حول قوالبهم البريدية. إليك بعض الأسئلة التي يمكن أن تطرحها: هل تفتح هذه الرسالة لو وصلتك؟ هل سترد عليها؟ ما هو الواضح فيها وما الأجزاء التي بدت غامضة؟ كيف أثّرَت تلك الرسالة على مشاعرك؟ خمس قوالب بريدية للمبيعات كتبها محترفون بما أننا تكلمنا قليلًا فيما سبق حول الطرق المثلى لاستخدام القوالب البريدية، دعنا الآن ننظر على هذه القوالب البسيطة التي يمكنها استخدامها في أي وقت تشاء. 1. اسم القالب: قالب الرسالة الباردة عنوان الرسالة: طلب سريع مرحبًا (اسم العميل) سأحاول اختصار هذه الرسالة لعلمي أنك قد تكون مشغولًا، أنا أعمل مع شركات مثل (اسم الشركات) لمساعدتها على (اذكر الفائدة التي تجنيها الشركات منك، مثل تسجيلات عملاء جدد). وأكثر ما يحبه عملاؤنا في شركتنا أننا (نقطة قوتكم الرئيسية، مثل أن جودة العملاء المحتملين قد زادت في منصتكم على مدار الستة أشهر الماضية، ومن ثم فقد رادت معدلات الاستجابة مرتين أو ثلاثة عن متوسط باقي السوق). وأنا أتمنى أن أعطيك أنت أو زميلًا لك عرضًا من عشرين دقيقة، هل يناسبك الثلاثاء القادم أو الأربعاء القادم؟ أطيب التحيات، (اسمك) 2. اسم القالب: متابعة عنوان الرسالة: متابعة بشأن اجتماعنا مرحبًا (اسم العميل) أشكرك على وقتك الذي قضيته هذا اليوم في تصفح شراكتنا المستقبلية، لقد شعرت أن منتجنا قد يساعدك في حل بعض المشاكل التي تجدها في شركتك، خاصة في هذه النقاط التالية: (ميزة 1) ستساعدك في (تحقيق هدف س) (ميزة 2) ستساعدك في (التغلب على عقبة ص) (ميزة 3) ستساعدك في (مسألة ل) وسأرفق لك بعض المصارد التي ستعطيك فهمًا أفضل للطريقة التي يمكننا أن نساعدك بها. إنني أتفهم أنك ستتناقش حول النقطة التالية في شركتك، وأرجو أن تطلعني إن كان لديك أية أسئلة أو إن كانت هناك أي طريقة يمكنني أن أساعدك بها، وإن لم يكن هنالك شيء فسأحدثك في (تاريخ/وقت). تحياتي، (الاسم) 3. اسم القالب: المواد بعد التواصل عنوان الرسالة: المواد بعد محادثتنا مرحبًا (اسم العميل) لقد استمتعت بحديثنا اليوم، خاصة ما ذكرت بشأن دورك في الشركة، وقد فهمت أنك تواجه بعض التحديات حول (المشاكل التي تناقشتما حولها)، وتأثيرها عليك. وكما وعدتك فإني أرفقت لك المصادر والمواد التي قد تساعدك على فهم كيف يمكننا مساعدتك بشكل أفضل لمعالجة هذه المشاكل وإحداث التغيير الذي تريد. أرجو أن تطلعني على أية أسئلة قد تكون لديك، وإن لم تكن ثمة أسئلة فأنا أتطلع إلى الحديث معك مجددًا في (تاريخ/وقت). تحياتي، (اسمك) 4. اسم القالب: إعادة فتح قنوات التواصل عنوان الرسالة: مرحبًا (اسم العميل) كيف الحال؟ أرجو أن تكون أمورك بخير. قد تذكرت أنك كنت مهتمًا بميزة (س) في المرة الماضية، وقد أحدثنا تطورًا ملحوظًا بشأنها وقد أعجب الحل الجديد كثيرًا من عملائنا. وأحب أن أشاركك بعض هذه التحديثات في أقرب وقت يناسبك، أخبرني رجاءًا إن كان (تاريخ/وقت) يناسبك، أو لا تتردد في أن تختار وقتًا أفضل. كما أتمنى أن تخبرني إن كان لديك أي أسئلة مسبقًا كي أجهز الإجابات لدي. تحياتي، (اسمك) 5. اسم القالب: قالب التقديم عنوان الرسالة: طلب مرحبًا (اسم العميل) لقد مر وقت منذ أن تحدثنا آخر مرة، وأتمنى أن تكون بصحة جيدة. دعني أولًا أسألك كيف هي أمورك وأخبار شركتك، وهل هناك فرصة لمساعدتك إلى جانب ما نفعله؟ ثانيًا، لدي طلب وأتمنى ألا تخيّب رجائي: باختصار، هل تعرف أحدًا من معارفك يمكنني أن أتواصل معه كي أرى إن كان بإمكاني مساعدته بنفس الطريقة التي عملنا بها معًا؟ إن كنت تستطيع تقديمي باختصار إلى شخص تظن أن بإمكاني مقابلته والتحدث معه حول تعاون مشترك فسأكون شاكرًا لك، وأعدك أن أعامل جيدًا. لكن يمكنك أن ترد على هذه الرسالة بـ"لا أستطيع التفكير في أحد الآن" إن شئت، وأنا شاكر في كل الأحوال لك على وقتك الذي ستمنحنا إياه. أطيب التحيات، (اسمك) ترجمة –بتصرف- لمقال Five Sales Email Templates to Get You Started – and How to Use Them Effectively لصاحبه James Campbell حقوق الصورة البارزة محفوظة لـ Freepik

يعرّف جملة Joomla بأنه نظام إدارة محتوى مفتوح المصدر ومجاني تمامًا وتم نشره وفق شروط سياسة GPL مما يعني يسمح بإمكانية الاستفادة منه واستخدامه وإعادة نشره مجانًا. بني نظام جملة باستخدام لغة PHP ووفق قواعد البرمجة غرضية التوجه OOP مما يضيف إليه ميزات جديدة أهمها سهولة الاستخدام وقابلية التوسع، بالإضافة إلى أن نظام جملة متعدد اللغات. حصل نظام جملة على العديد من الجوائز منها أفضل نظام محتوى إدارة محتويات للأعوام الثلاثة السابقة، بالإضافة إلى جائزة أفضل تطبيق مفتوح المصدر من Infoworld Bossie للعام 2012. نبذة تاريخية ظهر نظام جملة في شهر آب عام 2005 كنظام فرعي مستقل عن نظام شركة Mambo التي كانت تُسمّى في ذلك الحين شركة ماريو الدولية المحدودة، ولكن لم يكن هناك تمويل لنظام جملة، لذلك قام مطوروا جملة ببناء موقع يدعى OpenSourceMatters.org نشروا فيه معلومات عن البرنامج كما قام مدير المشروع آندرو ايدي بكتابة رسالة ظهرت في منتدى mamaboserver.com العام للإعلان عن النظام ودعوة المهتمين للمشاركة في بنائه، وقد تفاعل الناس مع الإعلان وقاموا بالانضمام إلى OpenSourceMatters.org في وقت قياسي حيث ساهم المشاركون في انطلاق نظام جملة. بعد هذا التفاعل الكبير من العديد من الناس الموجودين في شركة Mambo والأشخاص الآخرين والذي كان قد لاحظه مدير المشروع، دعى المسجلين في المنتدى لاقتراح اسم للمشروع في شهر آب من العام نفسه بعد أسبوعين من انطلاق الفكرة فقط. وفي 22 أيلول من العام نفسه أُعلِن عن الاسم الجديد للمشروع “Joomla” وهو اللفظ الانجليزي لكلمة “Jumla” القادمة من اللغة السواحلية التي تنطق بها بلاد افريقية مثل تنزانيا وكينيا وتعني "الجميع معًا" أو "الكلِّية" لذلك سنستخدم كلمة "جملة" باللغة العربية للإشارة إلى هذه النظام حيث أنها تحمل نفس المعنى. طريقة تثبيت جملة لتثبيت أي نظام إدارة محتوى على جهازك يجب أن يكون لديك خادوم أولًا، وقد شرحت طريقة تثبيت خادوم WAMP في مقال مقدمة في دروبال. بعد أن قمت بتركيب الخادوم ابدأ بعملية تثبيت نظام جملة وذلك وفق الخطوات التالية: 1- يجب أن نتبه إلى أن الخادوم WAMP يعمل، من خلال التأكد من وجود أيقونه الخادوم في شريط المهام باللون الأخضر 2- نفتح المتصفح على الموقع الرسمي لنظام جملة الذي يحتوى على نواة النظام التي سنقوم بتركيبها https://downloads.joomla.org/ حيث نختار النسخة الأخيرة joomal 3.8.3 ونحمّلها 3- ننتقل إلى مجلد www الموجود بالخادوم من خلال النقر على أيقونة WAMP واختيار www directory من القائمة 4- ننشئ مجلد جديد ضمن مجلد www ولنسميه joomla3 5- نقوم بعملية نسخ لملف نظام جملة الذي حمّلناه بصيغة ZIP في الخطوة الثانية إلى مجلد joomla3 الذي أنشأناه في الخطوة السابقة ونفك ضغطه 6- نفتح صفحة الخادوم الرئيسية من خلال الرابط التالي http://localhost/ حيث نستطيع من خلال هذه الصفحة التأكد من وجود مشروعنا الخاص بجملة 7- ننتقل إلى الموقع الذي قمنا ببنائه من خلال الرابط localhost/joomla3 حيث ستظهر لدينا صفحة إعدادات الموقع 8- ندخل في صفحة الإعدادات اسم الموقع JOOMLA3، البريد الإلكتروني، اسم المستخدمadmin ، كلمة المرور وتأكيد كلمة المرور ثم ننقر على زر NEXT 9- ستظهر لدينا الآن لوحة الإعدادات الخاصة بقاعدة البيانات المتعلقة بالموقع 10- لبناء قاعدة بيانات الموقع نقوم بفتح صفحة التحكم الخاصة بالخادوم عبر الرابط http://localhost/phpmyadmin/ وندخل اسم المستخدم root أما كلمة المرور تترك فارغة 11- بعد الدخول إلى صفحة إعدادات الخادوم ننقر على زر new الموجود في القائمة الجانبية وندخل في المربع create database اسم قاعدة البيانات الخاصة بالموقع مثل joomlaDB ثم ننقر على زر create 12- نعود لصفحة إعدادات جملة التي ظهرت لدينا في الخطوة رقم 9 حيث ندخل مكان username اسم كلمة المستخدم الخاص بقاعدة البيانات root ثم ندخل اسم قاعدة البيانات joomlaDB في خانة Database Name وننقر على زر next 13- ستظهر لدينا أخيرًا صفحة overview ، نلاحظ وجود عدة أقسام في هذه الصفحة حيث نتأكد من اختيار الخيار الأول none في قسم finalization وهو ضروري لأننا سنقوم باستخدام اللغة العربية في موقعنا كما نلاحظ أن جميع المتطلبات في قسم pre-installation check مُعلّمة بجانبها بكلمة yes وهذا يعني أننا قمنا بالخطوات كاملة بالشكل المطلوب لذك نكمل وننقر زر install 14- عند تثبيت الموقع ستظهر لدينا صفحة التي تحوي رسالة تفيد بأن الموقع قد تم تثبيته ولكن نلاحظ رسالة التحذير الموجودة في الأسفل باللون الأصفر ولحلّها ننقر على زر Remove Installation folder 15- نلاحظ الآن بعد انتهاء عملية تثبيت جملة وجود زرين الأول site وهو الذي يأخذنا عند النقر عليه إلى النسخة النهائية لموقعنا والتي يشاهدها المستخدم أما زر administrator فينتقل عند النقر عليه إلى صفحة الدخول للوحة التحكم الخاصة بالموقع وعند النقر على log in سينتقل المتصفح إلى لوحة التحكم control panel وبذلك نكون قد انتهينا من إنشاء موقعنا الخاص باستخدام جملة، ويمكننا البدء بعملية النشر على صفحات الويب. بناء موقع باستخدام جملة بعد أن قمنا بتثبيت نظام جملة سنبدأ الآن ببناء الموقع خطوة بخطوة. أولًا: تغيير لغة جملة إلى العربية للدخول إلى لوحة التحكم control panel الخاصة بموقعنا نستخدم الرابط http://localhost/joomla3/administrator/ وللقيام بتغيير اللغة نتبع الخطوات التالية: 1- ننتقل إلى قسم اللغة من خلال اختيار المسار التالي Extensions -> Languages عندها تظهر لدينا صفحة اللغات حيث ننقر على زر install languages 2- تظهر لدينا قائمة باللغات التي تدعمها جملة، نختار منها اللغة العربية Arabic Unitag وننقر على زر install وفي حال تم تحميل اللغة بنجاج تظهر لدينا رسالة بذلك ضمن المربع الأخضر 3- نعود الآن إلى صفحة اللغة من خلال المسار Extensions -> Languages نلاحظ أنه في القائمة الجانبية تظهر لدينا ثلاث خيارات ثلاث هي installed، content language و overrides 4- الخيار installed يعني لغة الواجهة النهائية التي تظهر للمستخدم، أي أنه في المواقع التي تستخدم اللغة الانجليزية يكون اتجاه الكتابة من اليسار إلى اليمين بينما في اللغة العربية من اليمين إلى اليسار نلاحظ ضمن قائمة اللغات العمود language tag وهو يمثل رمز اللغة المعين من قبل ISO والذي يتم من خلاله تعريف اللغة لجعل اللغة العربية هي لغة الواجهة التي تظهر لزائر الموقع ننقر على زر النجمة المقابل للغة العربية ضمن العمود default تظهر لدينا في الأعلى رسالة باللون الأخضر تفيد بتغير الواجهة إلى اللغة العربية حيث نجد أن اتجاه الموقع الذي نستطيع الوصول إليه من المسار http://localhost/joomla3/ أصبح من اليمين إلى اليسار كما تم تعريب الواجهة 5- الخيار content language يعني لغة محتوى الموقع حيث نلاحظ وجود إشارة × على الحالة أمام اللغة العربية لذلك فقط نقوم بتغيير الحالة إلى publish من خلال الضغط على مربع × 6- الخيار overrides يعني لغة لوحة التحكم ولتغييرها من قائمة Filters نختار خيار اللغة العربية لـ Administrator ثم نقوم بتسجيل الخروج لذلك فإنه عند تسجيل الخروج من لوحة التحكم control panel ثم محاولة الدخول مرة أخرى من خلال الرابط http://localhost/joomla3/administrator سيظهر لدينا خيارات للغة نختار منها اللغة العربية وعند دخولنا ستكون لوحة التحكم قد أصبحت باللغة العربية بشكل كامل ثانيًا: اختيار القوالب يوجد العديد من القوالب المجانية المناسبة لجملة في الإنترنت حيث يمكنك البحث عن إحداها وتثبيتها على موقعك وجميعها تتم بنفس الخطوات. ولكن أولًا دعني أعرفك على أحد المواقع التي تقدم لك قوالب مجانية وهو https://www.siteground.com/joomla-templates.htm حيث يحوي هذا الموقع على الكثير من القوالب وبمجرد اختيارك لأحدها يمكنك أن تنقر عليه عندها ستظهر لديك خيارين إما free download أو view demo في حال أردت أن تشاهد القالب بشكل موسع. هذا الموقع يطلب منك فقط اسمك وبريدك الالكتروني ليرسل إليك خلال ثواني رابط يمكنك من خلاله تحميل القالب. بعد قيامك بتحميل القالب إلى جهازك على شكل ملف ZIP سنبدأ بالخطوات التالية لتثبيته لديك: 1- نقوم بفك ضغط ملف ZIP والذي يعطينا مجلد باسم القالب 2- ننقل مجلد القالب (الذي قمت بتحميله اسمه sunnyorange) إلى المسار التالي ضمن مشروع joomla3 هو C:\wamp64\www\joomla3\templates مع العلم أن هذه المسار اختياري يمكنك تغييره 3- نفتح لوحة التحكم من http://localhost/joomla3/administrator/ ثم من القائمة الجانبية نختار الإضافات ثم تنصيب الإضافات 4- نختار الخيار "تنصيب من مجلد" ونضع في المربع مسار مجلد القالب الذي قمنا بإنشائه في الخطوة 2 ثم ننقر على التأكيد والتنصيب حيث تظهر لدينا رسالة في المربع الأخضر بأنه تم تنصيب القالب بنجاح 5- نلاحظ شكل الواجهة النهائية للمستخدم بالشكل التالي 6- من لوحة التحكم الجانبية نختار مدير القوالب في قسم الإعدادات العامة 7- تظهر لدينا أسماء القوالب حيث يكون القالب الافتراضي المُعلّم بالنجمة الصفراء هو القالب المطبق الآن ولتغييره إلى القالب الذي قمنا بتثبيته فقط نضغط على إشارة النجمة 8- عند فتح واجهة الموقع النهائية نلاحظ أنها تغيرت لشكل القالب الذي قمنا بتحميله ومن الأفضل عند اختيار القالب مراعاة الشكل ليعبر عن هدف الموقع بالإضافة لكونه سهل التعامل والتنقل يجذب الزائر لتكرار تجربة تصفحه. ثالثًا: إضافة محتوى لإضافة مقال جديد إلى الموقع نتبع الخطوات التالية: 1- نختار من لوحة التحكم إضافة مقال جديد فيظهر لدينا محرر المقالة الذي يمكن من خلاله كتابة المقالة وتنسيقها بشكل كامل، مع التأكد من وضع عنوان المقال بالأعلى حيث ستظهر هذه المقالات ضمن مدير المقالات بعد حفظها 2- لإضافة المقالة إلى قائمة موجودة سابقًا كما في حالتنا Main Menu نختار من القائمة الرئيسية اسم القائمة ثم إضافة عنصر جديد 3- سيتظهر لدينا الآن تحرير عنصر قائمة جديد، حيث نلاحظ مكان القائمة في Main Menu 4- نختار ضمن نوع عنصر القائمة مقالات ثم مقال مفرد ليظهر لدينا مربع جديد يمكننا من إضافة المقالات التي أنشأناها سابقًا ثم ننقر على حفظ وإغلاق عند فتح موقعنا نلاحظ وجود عنصر جديد في Main Menu بالإضافة إلى المقالة التي قمنا بكتابتها. يوفّر جملة الكثير من الطرق لإضافة قوائم وعناصر إلى هذه القوائم بالإضافة إلى المقالات والمدونات مع إمكانية تعديلها وتغيير طريقة ترتيبها وكل ذلك من خلال لوحة التحكم، لذلك أنصحك بالاستمتاع ببناء العديد من الأرشيفات والمدونات التجريبية حتى تصل إلى الشكل الأمثل الذي تخطط له. من أهم المواقع التي تم بناؤها باستخدام جملة كلية الدراسات العليا للفنون الجميلة – جامعة هارفارد لينوكس موقع أخبار التقنية العالمي IT Wire موقع قناة التلفزيون MTV Greece مركز الأمم المتحدة الإقليمي للإعلام في أوروبا الغربية UNRIC IKEA

هل تريد تطوير مهاراتك في تطوير ووردبريس إلى مرحلة متقدمة؟ هل أنت مستعد لرفع مستواك في لغة PHP لأعلى مستوى وإضافة المزيد من القوة إلى إضافات وقوالب ووردبريس التي تقوم بتطويرها. قبل أن نبدأ يُفترض قبل البدء أنك تعرف برمجة ووردبريس وتعلم كيف تعمل قوالب وإضافات ووردبريس بشكل بسيط إذا لم تكن تعلم فيمكنك البحث في الموقع وستجد مقالات للمبتدئين. ماذا سنغطي في هذه المقالة في هذه المقالة، سوف نبدئ مباشرة في البرمجة غرضية التوجه (object-oriented programming) وكيف يتم استخدامها في تطوير ووردبريس. البرمجة غرضية التوجه لا تحتاجها بشدة كمطور ووردبريس لكن بعد استخدامي لها لاحظت أن جودة تعليماتي البرمجية قد تحسنت بشكل سريع وقوي عندما بدأت في وضع مفاهيم البرمجة غرضية التوجه في عين الاعتبار، واستطعت أن أتعلم لغات برمجة آخرى لأن مفهوم الأصناف(classes) والكائنات(objects) متشابهة في كل لغات البرمجة. لنلقي نظرة على مبادئ البرمجة غرضية التوجه لنرى ما هي ولنستعملها في برمجة قوالب وإضافات قوية. ما هي البرمجة غرضية التوجه؟ البرمجة غرضية التوجه هي منطق تفكيري أكثر من أن تكون طريقة لكتابة التعليمات البرمجية، لأنها تعني التفكير في البرمجة بشكل منظم أكثر، وتغليف التعليمات البرمجية وجعلها كوحدات منفصلة من أجل استخدامها بشكل أفضل لاحقًا. لا تقلق إذا لم تستوعب ما شرحناه، لأننا سنلقي نظرة على كثير من الأمثلة خلال هذه المقالة لتساعدك في ترسيخ هذه المفاهيم. لماذا نستخدم البرمجة غرضية التوجه؟ البرمجة غرضية التوجه تُغلف المجموعات المتماثلة منطقيًا من التعليمات البرمجية موفرةً بذلك تعليمات برمجية أكثر قابلية للقراءة وأكثر تنظيمًا وهي توفر الفوائد التالية: • تعليمات برمجية أسهل تتبعًا. • تطوير هذه التعليمات البرمجية يصبح فيما بعد أسهل بكثير. • أسماء الدوال لا داعلي لأن تكون طويلة بعد الآن، والدوال داخل الأصناف لا تتضارب مع الدوال خارج هذه الأصناف. • درجة أعلى من قابلية إعادة استخدام التعليمات البرمجية. تعلم عن طريق مثال لنبدأ مع مثال على تعليمات برمجية عادية وتحويلها إلى تعليمات برمجية غرضية التوجه، لنفترض أننا نبني موقع تويتر Twitter، ونريد أن نقوم بحذف الأحرف من نص معين، وتحويل النصوص إلى روابط، لذا سأقوم بكتابة بعض الدوال لاستعمالها في المشروع: // Cut text down to required length function get_chirp_text( $text ) { return substr( $text, 0, 200 ); } // Parse hashtags from text function get_hashtags( $text ) { preg_match_all("/S*#((?:\[[^\]]+\]|\S+))/", $text, $matches); return $matches; } // Create the final chirp text function create_chirp( $text ) { $chirp_text = get_chirp_text( $text ); $hastags = get_hashtags( $chirp_text ); if( !empty( $hastags[1] ) ) { foreach( $hastags[1] as $key => $match ) { $hastags[1][$key] = "<a href='http://chirp.chip/hastags/" . $match . "/'>" . '#' . $match . "</a>"; } $chirp_text = str_replace( $hastags[0], $hastags[1], $chirp_text ); } return $chirp_text; } $text = 'This is a chirp with an #example hashtag created with code that is #procedural'; echo create_chirp( $text ); دالة ()get_chirp_text تقوم باستلام نص كوسيط و تقتطعه، أما دالة ()get_hashtags تقوم باستلام نص و إرجاع الجزء من النص الذي يبدأ ب “#”. دالة ()create_chirp تستعمل القيم المعادة من الدالتين السابقتين لتحويلها إلى روابط. صحيح أن هذه التعليمات البرمجية تعمل بشكل صحيح، لكن ماذا لو أردنا تغيير عدد الأحرف التي نريد اقتطاعها إلى 200 أو 300 حرف، أو نريد تغيير الروابط. هذه المشاكل لن يتم ملاحظتها ولكن من الممكن أن تعقد التعليمات البرمجية إذا كانت هذه التعليمات كثيرة. لنقم بتغليف هذه التعليمات البرمجية وتحويلها إلى تعليمات برمجية غرضية التوجه سأبدأ مع التعليمات البرمجية كاملة وسأقوم بشرحها بالتتالي: class Chirp { var $text; var $length; var $hashtag_base; var $hashtags; var $chirp; function __construct( $text ) { $this->hashtag_base = 'http://chirp.chip/hastags/'; $this->text = $text; $this->set_length(); $this->set_hashtags(); $this->set_chirp(); } function set_length() { $this->length = 200; } function set_hashtags() { preg_match_all("/S*#((?:\[[^\]]+\]|\S+))/", $this->text, $matches); $hashtags = array(); foreach( $matches[1] as $key => $match ) { $hashtags['#' . $match] = "<a href='http://chirp.chip/hastags/" . $match . "/'>" . '#' . $match . "</a>"; } $this->hashtags = $hashtags; } function set_chirp() { $chirp = substr( $this->text, 0, $this->length ); $chirp = str_replace( array_keys( $this->hashtags ) , array_values( $this->hashtags ), $chirp); $this->chirp = $chirp; } } $chirp = new Chirp( 'This is a chirp with an #example hashtag created with code that is #procedural' ); echo $chirp->chirp; من البداية قمت بتعريف صنف اسمه chirp. يحوي بداخله عددًا من المتغيرات والدوال. المتغيرات تمثل خصائص مهمة للكائنات التي سيتم بناءها من هذا الصنف. متغير text$ يحمل النص الأصلي الذي نريد معالجته متغير length$ يحمل عدد الأحرف المسموحة بها في التغريدة متغير hashtag_base$ يحمل القيمة الأساسية لروابط الهاشتاغ متغير hashtags$ يحمل خريطة الهاشتاغ متغير chirp$ يحمل ال html النهائية للتغريدة لنتخطى دالة __construct() للوقت الحالي و نركز على دالة ()set_length . كل ما تفعله هذه الدالة هي تعيين قيمة 200 ل this->$length. من المؤكد أنك تتساءل عن المتغير ?this$ يستخدم للإشارة إلى المتغيرات والدوال داخل الصنف، كما قمنا بتعيين قيمة length$ عن طريق this->$length سنكون قادرين على مناداة هذا المتغير في أي مكان في الصنف باستخدام this->$length والنتيجة أننا لا نحتاج لتمرير هذا المتغير كوسيط عند استعماله في كل دالة. الدالة التالية هي ()set_hashtage، تقوم بهذه الدالة بجلب النص للقيام بمعالجته من this->$text و الذي سوف يوضع في دالة __construct() و التي سنقوم بشرحها لاحقًا، لقد قمت بتغيير المصفوفة التي تنتجها هذه الدالة لتحتوي على الهاشتاغ كمفتاح و الرابط الكامل كقيمة هذا المفتاح و هذه سيجعل استبدال النص أسهل. و أخيرًا الدالة ()set_chirp تستخدم this->$text و this->$length لقطع النص و this->$hashtags لتبديل النصوص مع الروابط. أخيرًا تقوم بتعيين نتيجة html إلى this->$chirp. و في النهاية قمت باستخدام هذا الصنف لإنشاء الكائنات مخزن في chirp$ قمت بتمرير وسيط واحد لهذا الصنف عندما تم إنشاء الكائن من الدالة __construct() عندما تم تفعيل هذا الصنف. هذه الدالة يتم تفعيلها فورًا عند إنشاء الكائن يمكنك رؤية كيف يتم تمرير الوسائط وتقوم ايضًا بالتالي: تضع قيمة المتغير $this->hashtag_base مباشرةً تضع قيمة للمتغير this->$text مباشرةً تستخدم الدالة ()set_length لضبط الطول، لاحظ بما أن الدالة داخل الصنف فيتم الإشارة إليها ب this$ تقوم بإنشاء تعليمات html النهائية باستخدام الدالة ()set_chirp. بعد إنشاء الكائن يمكننا إظهار أي قيمة من الكائن ونعلم أن تعليمات html النهائية مخزنة في الخاصية chirp$، ويمكننا الدخول إليها باستخدام الصيغة chirp->$chirp. عناصر الأصناف والكائنات في هذا القسم، سوف نشرح عناصر الأصناف والكائنات. الاختلاف بين الأصناف والكائنات، بأن الأصناف هي المخططات التي تصنع منها الكائنات. الأصناف تعرف باستخدام الكلمة class متبوعة باسم الصنف الذي نريده و كل التعليمات البرمجية الخاصة به موضوعة بين { }. <p>These are just 8 of our awesome posts. Click here for <?php echo $posts->found_posts - 8 ?> more!</p> الأصناف يمكن أن تحوي شيئين هما المتغيرات والدوال، لكن داخل الأصناف يشار لهم بالخصائص(properties) والطرق(methods) وهذا هو الصنف فقط عبارة عن مجموعة من الخصائص والطرق. لاستخدام الخصائص والطرق داخل الصنف نحتاج إلى الإشارة لها ب this$. الأصناف يمكن أن تحوي عددًا من الدوال الخاصة. واحدة من هذه الدوال __construct() والتي يبدأ تنفيذها مباشرةً عندما ننشأ كائن من صنف. أي عدد من الكائنات يمكن إنشاءه من صنف واحد. $chirp_one = new Chirp( 'This is a chirp with an #example hashtag created with code that is #procedural' ); echo $chirp_one->chirp; $chirp_two = new Chirp( 'This is a chirp with an #example hashtag created with code that is #procedural' ); echo $chirp_two->chirp; استخدام الكائنات بشكل صحيح ليس هناك طريقة واحدة صحيحة لاستعمال الكائنات، لأن ذلك يعتمد بشكل كبير على ماهية ما تبنيه. لنراجع بعض النقاط المهمة في المثال السابق تحديد الطول لدينا دالة منفصلة لتعيين الطول، لكن كل ما تفعله هو تعيين الطول ل 200 و كان يمكننا أن نضع القيمة يدويًا في دالة ()substr الموجودة في ()set_chirp. السبب هو التفكير للأمام، لأنه لا يجب أن نكون هذه مهمة ()set_chirp لمعرفة الطول. لأنه من الممكن أن نقرر أن يكون عدد الحروف 160، وتوفير أطوال مختلفة بناء على حالة المستخدم على سبيل المثال. إذا أسندنا مهمة تعيين الطول لدالة منفصلة يمكننا تغيير المنطق الخاص بالطول من دون التأثير على أجزاء آخرى في التعليمات البرمجية. دوال الضبط Setter Methods الطرق أو الدوال التي تقوم بتعيين قيمة لخاصية يتم الإشارة إليها بدوال الضبط أو التعيين. يمكنك ملاحظة أنني قمت بتعيين بعض الخصائص من الدالة البانية __construct() و بعضها من الدوال الآخرة. طريقة تفكيري هنا كانت أن الخصائص التي لا أحتاج إلى إجراء العمليات عليها يمكنني تعيين قيمها في الدالة البانية أما التي أريد معالجة قيمها أسندتها لدوال خاصة. العمل مع الكائنات القدرة على الإشارة إلى الخصائص والطرق داخل الأصناف توفر لنا كثيرًا من الاستراتيجيات في التعامل مع الأصناف. إذا أزلنا معظم التعليمات من الدالة البانية في مثالنا السابق يمكننا القيام بالعمليات المطلوبة من خارج الأصناف. لنلقي نظرة: class Chirp { var $text; var $length; var $hashtags; var $chirp; function __construct( $text ) { $this->hashtag_base = 'http://chirp.chip/hastags/'; $this->text = $text; $this->set_length(); } function set_length() { $this->length = 200; } function set_hashtags() { preg_match_all("/S*#((?:\[[^\]]+\]|\S+))/", $this->text, $matches); $hashtags = array(); foreach( $matches[1] as $key => $match ) { $hashtags['#' . $match] = "<a href='http://chirp.chip/hastags/" . $match . "/'>" . '#' . $match . "</a>"; } $this->hashtags = $hashtags; } function get_chirp() { $chirp = substr( $this->text, 0, $this->length ); if( !empty( $this->hashtags ) ) { $chirp = str_replace( array_keys( $this->hashtags ) , array_values( $this->hashtags ), $chirp); } return $chirp; } } الفرق هنا أن الدالة البانية لا تقوم بتشغيل دالة ()set_hashtags و بالتالي يمكننا بناء التغريدة بطريقتين: $chirp = new Chirp( 'This is a chirp with an #example hashtag created with code that is #procedural' ); // Hashtags will not be links here echo $chirp->get_chirp(); $chirp->set_hashtags(); // Hashtags are now links because they have been set echo $chirp->get_chirp(); مثال ووردبريس يمكننا أخذ مثال رائع من ووردبريس يستخدم البرمجة غرضية التوجه وهو WP_Query. إذا كنت قد استخدمته من قبل من دون علم بالبرمجة غرضية التوجه فسيصبح أوضح بالنسبة لك الآن. لنفترض أنك تقوم بإنشاء صفحة خاصة في ووردبريس ستحتوي على أحدث 8 مقالات و3 من تقييمات الكتب القادمة. يمكنك صناعة كائنين باستخدام هذا الصنف: $posts = new WP_Query(array( 'post_type' => 'post', 'posts_per_page' => 8, 'post_status' => 'publish' )); $books = new WP_Query(array( 'post_type' => 'book', 'posts_per_page' => 3, 'post_status' => 'future' )) إذا اطلعت على التوثيق الخاص بهذا الصنف يمكنك روية أنه يملك العديد من الخصائص ومن بينها $found_posts. ولقد أصبحنا نعرف كيف نشير إلى هذه الخصائص: <p>These are just 8 of our awesome posts. Click here for <?php echo $posts->found_posts - 8 ?> more!</p> أصعب جزء في الأصناف والكائنات هو ليس استخدامها بل كيف تستخدمها بشكل صحيح، وأنا أشجعك أن تبدأ باستخدام البرمجة غرضية التوجه في مشاريعك، ربما في البداية سترى أنها غير مفيدة. لكن عندما بدأت في تطبيقها في مشاريعي وجدت الفائدة الكبيرة للبرمجة غرضية التوجه ومعظم إطارات العمل الحديثة ك Laravel تستخدم البرمجة غرضية التوجه. احتراف تطوير ووردبريس نحن فقط بدأنا في تعلم ما يمكننا فعله، ويوجد الكثير مما يمكن تعلمه عن الأصناف وأنصحك في التدريب والتجريب وارتكاب الأخطاء وعدم الاستسلام. ترجمة -وبتصرّف- للمقال Advanced WordPress Development: Introduction to Object-Oriented Programming لصاحبه Daniel Pataki

من المؤكد أنك قمت بتصفح الإنترنت من هاتف محمول، ستلاحظ في كثير من المواقع زر فتح قائمة التنقل الموجود في أعلى الموقع الذي بمجرد أن تضغط عليه يقوم بفتح قائمة تنقل الموقع. إضافة هذا الزر إلى موقع ووردبريس الخاص بك سوف تحسن تجربة المستخدم بشكل كبير للمستخدمين الذين يزورون الموقع من أجهزة الهاتف المحمول أو الأجهزة اللوحية. صحيح بأنه يمكنك استعمال إضافة ووردبريس جاهزة للقيام بهذه المهمة أو تنصيب قالب يحوي هذه الميزة ولكن ماذا لو كنت تستعمل قالب خاص بك وتريد إضافة هذه الميزة بنفسك؟ في هذه المقالة سوف أريك كيف تقوم بعمل هذا بمساعدة ووردبريس وبعض تعليمات css وjavascript وتحويل القائمة إلى الشكل المطلوب. ماذا ستحتاج لتتابع مع هذا المقال، ستحتاج إلى: موقع ووردبريس على حاسوبك الذي يحتوي قائمة. قالب ابن للقالب الذي تعمل عليه من أجل أن تبقى تعديلاتك في مكانها عندما يتم تحديث هذا القالب من الإنترنت. سأقوم بتنفيذ هذه التعليمات على موقعي الخاص، الذي يستهدف قائمة التنقل الرئيسية والتي في موقعي الخاص تملك اسم صنف css وهو menu.main ، إذا كان اسم هذا الصنف مختلفًا في موقعك فسوف تقوم بتطبيق التعليمات على اسم الصنف الخاص بقائمتك. القائمة الحالية قائمتي تبدو على أجهزة الحاسب بهذا الشكل: لكن على شاشة الهاتف ليست جميلة: يمكنني تحسين ذلك بجعل محاذاة القائمة إلى المنتصف لكن ذلك سيأخذ الكثير من مساحة الشاشة لذلك سنقوم بعمل زر القائمة الذي بمجرد الضغط عليه سوف تظهر القائمة التي سنقوم بإخفائها في أجهزة الهاتف المحمول. إضافة زر القائمة الخطوة الأولى هي إضافة أيقونة زر القائمة. سوف نقوم بذلك في ملف header.php في قالبك أضف رابط تحت قائمة التنقل الرئيسية ها هو الخاص بي: <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> <a class="toggle-nav" href="#">☰</a> هذا الرابط سيقوم بعمل زر الذي يقوم بفتح وإغلاق زر القائمة وله اسم الصنف togglenav وبداخله الأيقونة وهي في هذه الحالة رمز html. هذا كل ما يتطلب إضافته إلى ملف header.php إذا قمت بإعادة تحميل صفحتك سترى بأن زر القائمة قد ظهر على الشاشة: إخفاء زر القائمة على الشاشات الكبيرة لنبدأ مع شاشات الحاسب ونضيف هذه التعليمات، لكن لا تنسى وضع هذه التعليمات ضمن media query المناسبة لعرض الشاشة: .toggle-nav { display: none !important; } هذا يجعل الرابط الذي يحوي الأيقونة بداخله يختفي. لقد أضفت كلمة important! حتى تبقى هذه التعليمة هي الأقوى و لا يتم الكتابة عليها من قبل التعليمات الآخرى. لقد اختفى. سوف نقوم بإخفائه أيضًا في الشاشات الأصغر من ذلك و لكن سنأتي لهذا لاحقًا. إضافة تنسيقات css لزر القائمة الأن نحن نحتاج لإضافة بعض التنسيقات إلى القائمة في شاشات الهاتف والتي تظهر عندما يضغط المستخدم زر القائمة. أولًا، في ملف css الخاص بك أضف media query المناسبة: @media screen and ( max-width: 480px) { } لقد استهدفت الشاشات التي يبلغ أكبر عرض لها 480px ولكن يمكنك اختيار الأبعاد المناسبة لقائمتك. الآن لنقم بإضافة بعض تعليمات css في media query أولًا سنقوم بإظهار الأيقونة مجددًا و نقوم بوضع تنسيقات لها لتبدو أفضل: .toggle-nav { padding: 15px; margin: 15px; display: inline-block !important; color: #8D7F68; color: #fff; transition: color linear 0.15s; } .toggle-nav:hover, .toggle-nav.active { text-decoration: none; color: #8D7F68; } الأن لنقم بتنسيق القائمة نفسها و إضافة هذه التعليمات في نفس media query : .menu.main { display: inline-block; position: relative; background: #fff; } .menu.main ul { display: none; position: absolute; top: 80%; left: 0px; padding-left: 15px; background: #fff; } .menu.main li { display: block; float: none; } والآن الخطوة الأخيرة هي إضافة javascript المسؤولة عن إظهار القائمة عندما يضغط المستخدم على زر الأيقونة. إضافة سكربت javascript هذه الخطوة تتألف من خطوتين استدعاء السكربت وإضافة التعليمات له. لنقم أولًا باستدعائه. في قالبك أضف مجلدًا جديدًا يسمى scirpts وفي داخله ملف فارغ باسم burger-menu-script.js. الآن افتح ملف functions.php في قالبك وأضف التالي إليه: function wpmu_burger_menu_scripts() { wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpmu_burger_menu_scripts' ); /* الآن قمنا باستدعاء الملف بشكل صحيح وسنضيف التعليمات البرمجية له، افتح ملف وأضف التالي */ jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery('.menu.main ul').slideToggle(500); e.preventDefault(); }); }); هذه التعليمات استهدفت العنصر الذي له اسم الصنف toggle-nav. و هو في حالتنا الزر و الذي سوف يتم تنفيذ التعليمات عليه عند الضغط عليه من قبل المستخدم و ستعمل دالة slideToggle الخاصة بمكتبة jquery لإخفاء زر القائمة و إظهاره عند الضغط عليه من قبل المستخدم. والآن لنرى النتيجة: وعندما أضغط على الأيقونة تظهر القائمة: وهذا فيديو يوضح كيف تجري العملية: استخدام زر القائمة سيحسن تجربة المستخدم على جهاز الهاتف المحمول إذا اتبعت الخطوات السابقة، سيصبح لديك زر قائمة بسيط والذي سيحسن تجربة المستخدم بشكل كبير عندما يزور المستخدمون موقعك من شاشات صغيرة. ويمكنك فعل ما تشاء لتحسن مظهر هذا الزر وجعله مناسبًا لموقعك. ترجمة -وبتصرّف- للمقال How to Create a Custom Animated Burger Menu for WordPress لصاحبته Rachel McCollin حقوق الصورة البارزة محفوظة لـ Freepik

الانتشار الكبير في استخدام لغات تصميم الويب أدى إلى ظهور بعض إطارات العمل (Frameworks) الجاهزة التي تسهل وتسرع عملية تطوير الواجهات كذلك فإن الانتشار الواسع لووردبريس والطلب الكبير لقوالبه دفع بعض المطورين والشركات إلى تطوير العديد من الأدوات الجاهزة التي تسهل بصورة أو أخرى عملية تطوير قوالب ووردبريس، إحدى هذه الأدوات الجيدة جدا هي قالب Underscores _s والذي يتمتع بمجموعة من المميزات (كما سنرى) تجعله من أفضل الأدوات المعينة لمطور قوالب ووردبريس. وفي هذا المقال سنتعرف على بعض مميزات قالب _s وطريقة استخدامه والاستفادة منه، لكن دعنا في الأول نلقي نظرة سريعة على بعض الأدوات المتاحة لمطوري قوالب ووردبريس (من قبل شركات أو مطورين أخرين) وأنواعها وفي أي الأنواع يمكن تصنيف قالب Underscores _s. أطر عمل قوالب ووردبريس WordPress Theme Frameworksأتذكر أنه عند بداية دراستي لتطوير قوالب ووردبريس شكل هذا المصطلح بعض الصعوبة بالنسبة لي ليس لأنه يحتوي على كلمة إطار عمل (Framework) فقط بل لأنه في مجتمع ووردبريس يطلق هذا المصطلح على عدة معاني حيث يختلف المعنى الذي يستخدم لأجله من بعض المطورين، لذا دعنا نحاول تجنيبك الوقوع في مثل هذا الإشكال بتعريف مبسط لكلمة إطار عمل وكذلك الإشارة الى بعض المعاني التي تستخدم لها هذه الكلمة في مجتمع ووردبريس. التعريف المبسط لإطار العمل Framework في مجال تطوير الويبهو عبارة عن مجموعة من الأدوات الجاهزة (عادة شيفرات برمجية) تؤدي بعض المهام الشائعة وتغنيك هذه الإطارات من كتابة هذه الشيفرات بنفسك. بالطبع فإن التعريف يمكن أن يكون أعم من ذلك لكن هذا ما نحتاجه في هذا المقال. إطارات عمل قوالب ووردبريس Themes Frameworkيطلق هذا المصطلح عادة على أربعة معاني في مجتمع ووردبريس (موقع ووردبريس الرسمي ذكر ثلاثة ودعني أضيف لها رقم 2 في قائمتنا هذه). القالب الأب Parents Themes (البعض يطلق عليها Themes Framework) هذا النوع من الأدوات عبارة عن قالب جاهز يمكنك الاستفادة منه من خلال صنع قالبك كقالب ابن Child Theme له وذلك بالاستفادة من هذه الميزة (القالب الابن) التي يوفرها ووردبريس. عادة عند إطلاق كلمة إطار عمل قوالب Themes Framework فإن المقصود هو هذا النوع من القوالب، ومن أشهر هذه القوالب هو إطار العمل Genesis ومن الإطارات ذات التطوير العربي هنالك إطار العمل ممتاز وليس المقام هنا لسرد القوالب المتوفرة تحت هذا النوع من الأدوات.إطارات عمل لوحة تحكم القوالب Theme Options Framework هذا النوع من الأدوات كما يظهر من أسمه يستخدم لتسهيل مهمة إنشاء لوحة تحكم للقالب فهو يسهل عملية إضافة واسترجاع خيارات القالب وعادة ما يوفر مجموعة من الحقول المتقدمة التي تتطلب برمجتها بدونه بعض الوقت والجهد. البعض أيضا يطلق كلمة إطار عمل (هكذا بإطلاقها) على هذا النوع من الأدوات، ومن أشهر هذه الإطارات إطار عمل Redux.المكتبات المساعدة Dropin Libarary هذه مجموعة من الملفات التي تقوم بتضمينها في قالبك للاستفادة من الدوال والأصناف الموجودة فيها وبالرغم من أن كثير من إطارات عمل لوحة التحكم يمكنها العمل بنفس الطريقة (تضمين ملفاتها في قالبك) لكن هذه المكتبات توفر عادة أكثر من مجرد تسهيل لعمل لوحة التحكم بل تتيح لك المزيد من التسهيلات فيما يتعلق بتطوير القالب ككل. من هذه المكتبات إطار العمل Hyprid.القالب الابتدائي Starter Theme عبارة عن قالب جاهز بنسبة كبيرة تقوم بتطوير قالبك بالتعديل عليه مباشرة لا عن طريق استخدام قالب ابن كما في الرقم 1 من هذه القائمة، ويوفر هذا القالب عادة التركيبة الأساسية لملفات قوالب ووردبريس وبعض الدوال والإعدادات الأساسية للقالب بحيث يجعل المصمم يركز على التصميم (CSS) أو تحويل التصميم الجاهز. قالب Underscores والذي نحن بصدد التعرف عليه يقع تحت هذا النوع من إطارات العمل وتستطيع استخدامه في تطوير قالبك من الخلال التعديل المباشر عليه كما سنرى لاحقا إن شاء الله.مميزات قالب Underscoresهنالك عدة مميزات تجعل من الجيد إختيار هذا القالب كنقطة بداية لتطوير قالبك، ومن هذه المميزات: القالب مفتوح المصدر ومطور من قبل مجموعة من المبرمجين المحترفين وعلى رأس التطوير شركة Automatic الراعية لووردبريس، وهذا يضمن لك توافقية عالية بين ووردبريس وقالب Underscores وكذلك احترافية في تطويره.القالب يعتمد على HTML5 كما أنه موثق بصورة جيدة ويحتوي على نسبة مناسبة من الشيفرات (بالتالي لن تفقد الكثير من الأساسيات الموجودة في أي قالب كما أنك لن تضطر لمسح الكثير من الشيفرات).يحتوي على مثال لتطبيق خاصية الترويسة المخصصة Custom header التي يوفرها ووردبريس.مجموعة مخصصة من وسوم القالب Template Tags (يشير هذا المصطلح الى مجموعة من الدوال تستخدم في جلب بيانات المقال) يمكنك استخدامها لتجنب تكرار الشيفرات البرمجية.مجموعة من تنسيقات CSS الأساسية تحتوي على توضيح لبعض فئات العناصر CSS Classes التي يولدها ووردبريس.يتبع الCoding standard الخاصة بووردبريس وموثق بصورة ممتازة، حيث يمكنك أن تتعلم الكثير منه.مجموعة من الدوال والإعدادات الأساسية في ملف functions.php.يشجع على استخدام مخصص القوالب Theme Customizer وهذا أمر مهم جدا خصوصا وأنه قبل أيام قليلة من نشر هذا المقال أصبح إستخدام مخصص القوالب لإعدادات القالب أمر إجباري لكل القوالب في مستودع القوالب الخاص بووردبريس وهذا قد يشير إلى توجه في مجتمع ووردبريس نحو المخصص ومحاولة جعلها Standerd في مسألة خيارات القالب، ولذلك في نهاية هذه السلسلة سنلقي نظرة إلى طريقة إستخدام مخصص القوالب في خيارات القالب.طريقة استخدام Underscoresفي البداية عليك التوجه لموقع القالب وقم بكتابة اسم القالب الذي تود تطويره في الخانة المخصصة ويمكنك الضغط على Advanced Options لإدخال المزيد من الخيارات مثل اسم المطور ورابط موقعه ووصف القالب، وسيقوم الموقع باستخدام هذه المعلومات ويولد لك القالب والذي سيبدأ التحميل مباشرة فور الضغط على Generate. طبعا ستجد أن المعلومات التي قمت بكتابتها تم استخدامها في الترويسة الأساسية للقالب والموجودة في ملف style.css وكذلك في اسم مجلد القالب. بعد ذلك يمكنك تنصيب القالب على الموقع الذي قمت بإعداده لتطوير القالب ومن الجيد أن تقوم بفتح مجلد القالب على محرر الشيفرات المفضل بالنسبة لك حتى تتابع معنا شرح بعض خصائص القالب. التركيبة الأساسية للقالب (المجلدات والملفات)ستلاحظ أن مجلد القالب يحتوي على الملفات الأساسية لقوالب ووردبريس وهي: Style.css, index.php, functions.php, single.php, page.php, archive.php, search.php, 404.php, header.php, footer.php, sidebar.php, comments.php, rtl.css بالإضافة الى مجموعة من الملفات التي يبدأ اسمها بـ content وهي: Content.php, content-single.php, content-page.php, content-search.php, content-none.phpوهذه الملفات تستخدم لوضع محتويات الحلقة The Loop لبعض ملفات القالب الأساسية التي تحتوي على حلقة لجلب المقالات مثل ملف single.php مثلا، حيث يتم تضمين ملف conent المناسب (مثلا content-single.php) في ملف القالب المناسب (single.php) من خلال إستخدام الدالة get_template_part وتستخدم بهذه الطريقة: <?php get_template_part( 'content', 'single' ); ?> حيث أن المعامل الأول للدالة هو بداية اسم الملف والمعامل الثاني هو نهايته (ما بعد الفاصلة) وهذا يوضح لك سبب تسمية الملفات التي تبدئ بـ content بهذه الطريقة. واستخدام هذه الدالة من الأمور الجيدة في هذا القالب لما تتميز به من مميزات وحتى تحافظ على مقروئية جيدة للشيفرة البرمجية فبدلا من وضع كل الشيفرات في ملف single.php او index.php يتم فصل محتويات الحلقة -والتي عادة ما تحتوي على الكثير من شيفرات html- في ملف لوحدها ثم تضمينها. وأيضا يمكنك استخدامها مع الدالة get_post_format لتضمين الملفات اعتمادا على بنية المقال. من الملفات أيضا في المجلد الرئيسي للقالب ملف README.md وصورة screenshot.png ولا أظن أنهما يحتاجان إلى شرح. مجلد incهذا أو المجلدات التي سنتحدث عنها ، حيث يحتوي على خمسة ملفات الجامع بينها أنه يتم تضمينها داخل ملف function.php كما ترى في نهاية هذا الملف من خلال استخدام الدالة بهذه الطريقة: require get_template_directory() . '/inc/template-tags.php'; حيث أن الدالة ()get_template_directory ترجع مسار القالب الحالي ومن الجيد استخدام دوال ووردبريس التي يوفرها فيما يتعلق بمسارات القالب، وهذه أحد الأشياء التي عليك تعلمها من قالب Underscores بالإضافة الى العديد من الممارسات الجديدة Best Practice الأخرى كما سنرى. تضمين هذه الملفات في ملف functions.php بدلا عن كتابة كل الشيفرات الوظائفية الخاصة بالقالب في ملف functions.php يجعل القالب أكثر تنظيما ويسهل التعديل عليه فيما بعد بالإضافة لفصل الدوال والشيفرات على حسب وظائفها. لاحقا سنتطرق الى تفاصيل بعض هذه الملفات بعد أن نلقي نظرة سريعة على ملف functions.php، لكن الأن دعنا نكمل الاطلاع على تركيبة القالب. مجلد jsواضح من اسمه أنه يحتوي على ملفات الجافا سكربت الخاصة بالقالب، وبه ثلاث ملفات سنطلع على وظائفها فيما الدرس القادم إن شاء الله. وبالطبع يمكنك إضافة ملفات جافا سكربت الخاصة بك في هذا المجلد. لاحظ أنك فيما بعد قد تحتاج لإضافة مجلد لملفات CSS واخر للصور وفي هذه الحالة ربما تفضل وضع هذين المجلدين مع مجلد js في مجلد جديد باسم assest أو static مثلا. بقية المجلداتكما تلاحظ هنالك أيضا مجلد language الذي به ملفات اللغة، وملف layout وهو يحتوي على ملفي CSS يستخدمان لتوفير خيارين في تخطيط الموقع، وملف sass وبه بعض الملفات المفيدة في حالة كنت تستخدم SASS. خاتمة كانت هذه مقدمة سريعة على أنواع الإطارات الخاصة بعمل قوالب ووردبريس، ونظرة على طريقة تحميل قالب _s وتركيبة الملفات والمجلدات فيه، وتبقى لنا الكثير لمعرفته حول قالب _s وإستخدامه في تطوير قوالب ووردبريس وهو ما سنتطرق إليه في المقالات القادمة من هذه السلسلة إن شاء الله.

في الدروس السابقة تعرّفنا على برنامج OneNote، أحد برامج حزمة أوفيس المكتبية، واستعرضنا الخصائص والأدوات التي يوفّرها لحفظ الملاحظات وتنظيمها. في هذا الدرس سنتعرّف على أداتين ستسهّل عليك إضافة الملاحظات إلى دفاتر الملاحظات وجعلها أكثر تنظيمًا وبخطوات بسيطة. مُلحق OneNote Web Clipper للمتصفحات يُستخدم هذا الملحق لالتقاط الملاحظات من على صفحات الويب وحفظها على دفاتر الملاحظات مباشرة من المتصفّح دون الحاجة إلى فتح OneNote. ويعمل مع أغلب المتصفحات الحديثة، مثل Chrome، Firefox، Safari، وغيرها. وبالإضافة إلى حفظ الملاحظات، يوفّر خصائص أخرى سريعة مثل تسمية صفحة الملاحظات، كتابة ملاحظة إضافية معها، أو اختيار دفتر الملاحظات المناسب لحفظها. أولًا، قم بتنصيب الملحق على متصفحّك بالذهاب إلى www.onenote.com/clipper ثم النقر على زر التحميل: ملاحظة: يختلف هذا الزر باختلاف المتصفّح الذي تستخدمه. فلمتصفّح Chrome مثلًا ستجد الزر Get OneNote Web Clipper for Chrome. سيتم تحميل الملحق وتثبيته على متصفّحك وبموقع يختلف أيضًا باختلاف المتصفّح. على سبيل المثال ستجد أيقونة الملحق على متصفّح Chrome مع مجموعة الملحقات بجانب شريط العناوين. انقر عليه لتبدأ باستخدامه. في المرّة الأولى التي تفتح فيها الملحق، سيُطلب منك تسجيل الدخول باستخدام حساب ميكروسوفت، أو حساب العمل أو المدرسة. اختر نوع حسابك ثم أكمل تسجيل الدخول: بعد تسجيل الدخول، انقر على أيقونة الملحق مجددًا لفتحه، وستلاحظ وجود 4 خيارات أساسية لالتقاط صفحات الويب: Full Page يعمل هذا الخيار على التقاط كل محتويات الصفحة، من الترويسة إلى التذييل، بما فيها الأشرطة الجانبية. عندما تنقر على الخيار Full Page ستظهر نافذة لمعاينة الصفحة الملتقطة، ومنها يمكنك تغيير اسم صفحة الملاحظات التي ستُحفظ عليها بحذف النص في الحقل العلوي وإدخال العنوان المرغوب، أو كتابة ملاحظة إضافية بالنقر على + Add a note: بعد ذلك حدّد دفتر الملاحظات والقسم الذي تريد حفظ الملاحظة عليه من القائمة Location ثم انقر على زر Clip: عند نجاح الالتقاط سيكون بإمكانك عرض الملاحظة على نسخة الويب من تطبيق OneNote بالنقر على زر View in OneNote، أو على النسخة المثبّتة على جهازك: سيتم تخزين الصفحة الملتقطة على OneNote في صفحة جديدة مستقلة بصيغة صورة، بالإضافة إلى رابط لمصدر الصفحة وتاريخ الالتقاط: Region يُستخدم هذا الخيار لالتقاط منطقة معيّنة من الصفحة نقوم بتحديدها يدويًا. عند النقر على الخيار Region سيتم تعتيم ألوان الصفحة ويتحول شكل المؤشر إلى +. حدّد المنطقة التي تريد التقاطها بالنقر والسحب بالفأرة. بعد ذلك قم بإفلات زر الفأرة لفتح نافذة المعاينة: وكما في الخيار السابق، يمكنك من هذه النافذة تغيير عنوان صفحة الملاحظات التي سيتم حفظها، أو كتابة ملاحظة إضافية بالنقر على +Add a note. من الخصائص المفيدة مع هذا الخيار هو أنّه بإمكانك التقاط أكثر من منطقة في نفس الوقت وحفظها على نفس صفحة الملاحظات. ويتم ذلك بالنقر على زر + Add another region في أعلى نافذة المعاينة: حدّد المنطقة المرغوبة بالنقر والسحب كما ذكرنا أعلاه. من المفيد أيضًا هو أنّه بإمكانك حذف إحدى اللقطات مباشرة من نافذة المعاينة وقبل حفظ الملاحظة بالنقر على أيقونة × بجانب كل لقطة، وذلك في حال قمت بعمل لقطة بالخطأ أو رغبت في التراجع عنها: بعد الانتهاء من التقاط المناطق التي تريدها من صفحة الويب، حدّد موقع الحفظ (دفتر الملاحظات والمقطع section) من قائمة Location ثم انقر على زر Clip. Article ربّما يكون هذا الخيار هو الأفضل من بين الخيارات الأربعة. حيث أنّه يقوم بالتقاط الجزء المهم من الصفحة (متن الصفحة) ويهمل الأجزاء الأخرى الهامشية مثل الترويسة، التذييل، الأشرطة الجانبية وغيرها. ويقوم بحفظ محتويات الصفحة الملتقطة كما هي؛ أي تبقى النصوص نصوصًا قابلة للتعديل، على عكس الخيار الأول الذي يحفظها بشكل لقطة شاشة. عند النقر على الخيار Article ستُفتح نافذة المعاينة على غرار الخيارات السابقة، ومنها يمكنك تعديل عنوان صفحة الملاحظات أو كتابة ملاحظة إضافية. وبما أنّ المحتوى النصّي للصفحة سيُحفظ بشكل نصوص، ستلاحظ وجود خيارات إضافية في أعلى نافذة المعاينة يمكنك استخدامها لتنسيق نصوص الصفحة منها مباشرة: بإمكانك اختيار نوع الخط Serif أو Sans-serif أو تغيير حجمه من الأزرار A أو حتّى تمييز الجزء الذي تراه مهمًا باللون الأصفر بالنقر على أيقونة القلم ثم تظليل النص بالنقر والسحب. بعد الانتهاء من التقاط الصفحة وتخصيصها، حدّد موقع حفظها على OneNote من قائمة Location ثم انقر على زر Clip. وكما في الخيارين السابقين، سيتم حفظ الصفحة الملتقطة في صفحة ملاحظات جديدة ويُرفق معها رابط المصدر وتاريخ الحفظ. Bookmark يقوم هذا الخيار بحفظ عنوان الصفحة ورابطها بالإضافة إلى صورة مصغّرة ومقتطف من بدايتها كملاحظة. ويمكنك استخدامه لحفظ الروابط التي تريد الرجوع إليها لاحقًا (مثل الإشارة المرجعية للصفحة) بشكل سهل وسريع. ستظهر نافذة معاينة الملاحظة عند النقر على الخيار Bookmark، ويمكنك منها كتابة ملاحظة إضافية، أو حفظ الملاحظة مباشرة بالنقر على زر Clip بعد تحديد موقع الحفظ من قائمة Location: ملاحظة: يقوم ملحق OneNote Web Clipper بتذكّر آخر موقع قمت بحفظ الملاحظات الملتقطة عليها. أي إذا كنت تحفظ الصفحات الملتقطة على نفس المقطع section في كل مرّة، يكفي تحديد موقع الحفظ من قائمة Location في المرّة الأولى فقط. إلّا إذا رغبت لاحقًا في حفظ الملاحظة في مقطع مختلف أو دفتر ملاحظات مختلف. قوالب OneNote القالب هو عبارة عن صفحة ملاحظات مصمّمة مسبقًا تحتوي على عناصر بتخطيط وتنسيق معيّن حسب الغرض من القالب. وتعتبر القوالب من الأدوات المفيدة جدًا لتوفير الوقت، حيث أنّها ستسرّع عملك على OneNote إذا كنت تتبع نمطًا معيّنًا في إضافة الملاحظات وترتيبها، كما أنّها ستجعل ملاحظاتك أكثر تنظيمًا. يوفّر OneNote مجموعة قوالب جاهزة يمكنك استخدامها مباشرة أو تخصيصها لتناسب احتياجك، أو يمكنك إنشاء قالبك الخاص من صفحة فارغة وحفظه للاستخدام لاحقًا. استخدام القوالب الجاهزة وتخصيصها لاستعراض القوالب الجاهزة اذهب إلى تبويب Insert ثم انقر على Page Templates: سيُفتح على أحد جوانب النافذة جزء Templates الذي يحتوي على عشرات القوالب الجاهزة المصنّفة في مجموعة فئات حسب الغرض من استخدام القالب، مثل قوالب ملاحظات المحاضرات/الدروس، قوالب للمشاريع والاجتماعات، قوالب لقوائم المهام، أو غيرها: انقر على أيقونة السهم الصغير بجانب كل فئة لتوسيعها، ثم انقر على القالب المرغوب. سيتم إنشاء القالب في صفحة جديدة، وعندها يمكنك البدء بإدخال المحتوى مباشرة: أمّا إذا رغبت في تخصيص القالب وحفظه لاستخدام لاحقًا، فيمكنك إجراء أي تعديل عليه، كتغيير تنسيق النصوص من تبويب Home أو إضافة عناصر جديدة من تبويب Insert. كما بإمكانك تغيير حجم الورقة واتجاهها من تبويب View> Paper Size> جزء Pager Size: بعد الانتهاء من تخصيص القالب، انقر على رابط Save current page as a template من جزء Paper Size نفسه (موضّح في الصورة أعلاه) أو من جزء Templates. سيظهر مربّع حوار صغير لتسمية القالب، أدخل اسمًا مناسبًا ثم انقر على زر Save: بعد حفظ القالب سيكون بإمكانك الوصول إليه واستخدامه من جزء Templates، وبالتحديد من فئة My Templates: إنشاء قالب من صفحة فارغة إذا لم تكن ترغب في الاعتماد على أحد القوالب الجاهزة لتصميم قوالبك، يمكنك إنشاء صفحة فارغة (+ Add Page) ثم البدء بتصميمها وإضافة المحتوى المرغوب من صور، نصوص، قوائم مهام، وغيرها. يُنصح عند تصميم القوالب بعدم استخدام عناصر مشتّتة، كالصور الكثيرة التي لا فائدة منها، واستخدام خطوط التسطير أو خطوط الشبكة (تبويب View> Rule Lines) لتسهيل محاذاة العناصر، بالإضافة إلى استخدام خطوط بألوان وأشكال واضحة وبأحجام مناسبة. بعد وضع جميع لمساتك على التصميم، احفظ القالب كما ذكرنا أعلاه (Insert> Page Templates> Save current page as a template). ملاحظة: إذا رغبت باستخدام قالب معيّن مع جميع الصفحات الجديدة التي تقوم بإنشائها، قم بتعيينه كقالب افتراضي من قائمة Always use a specific template في جزء Templates، علمًا أنّ هذا الأمر يُطبّق على المقطع section الحالي فقط (أي أنّه يجب تعيين القالب المرغوب كقالب افتراضي لكل مقطع على حدة): خاتمة تظهر فائدة ملحق OneNote Web Clipper وقوالب OneNote بشكل أكبر للأشخاص الذين يستخدمون هذا البرنامج بشكل يومي أو متكرر. إذ تعمل هاتان الأداتان على توفير الوقت وجعل العمل على OneNote أكثر سلاسة وتنظيمًا. هل لديك أفكار أو نصائح حول استخدم ملحق OneNote أو قوالب OneNote؟ شاركنا بها في صندوق التعليقات.

مُقدّمة: بعد أن قمنا بتنظيم ملفّات التّطبيق على حسب الوظيفة باستعمال خاصيّة المُخطّطات، أصبح لدينا اختلاف بسيط في كيفيّة التّعامل مع ملفّات العرض التّي تحتوي على شيفرات HTML وشيفرات مُحرّك القوالب Jinja، وسيكون هناك اختلاف بسيط أيضا في طريقة استخدام الدّالة url_for للرّبط بين المُوجّهات. إنشاء صفحات HTML بما أنّنا أنشأنا ثلاثة مجلّدات باسم templates لتعدّد أغراضها، فسيتوجّب علينا أن نفهم أولا كل مجلّد ووظيفته. مسارات المُجلّدات التّي أنشأناها سابقا هي كالآتي: project/templates/ project/posts/templates/ project/users/templates/ المسار الأول عبارة عن مجلّد رئيسي للقوالب، يُمكنك أن تعتبره مُشتركا مع القوالب الأخرى، فمثلا يُمكن لكل من ملفّات المقالات والمُستخدمين أن يرثوا من ملفّ base.html كما سنوضّح بعد قليل، كما أنّ أي موجّه يُعرّف داخل الملفّ الرّئيسي project/__init__.py له الحق في تقديم الملفّات المُتواجدة في مجلّد القوالب الرّئيسي مُباشرة. أي أنّك تستطيع تعديل الموجّه الرّئيسي ليُقدّم القالب index.html المتواجد داخل مجلّد project/templates كالآتي: # project/__init__.py from flask import Flask, render_template #... #... @app.route('/') # 127.0.0.1:5000/ def index(): return render_template('index.html') # render project/templates/index.html لا تنس بأنّنا استردنا أولا الدّالة render_template ثمّ استدعيناها في المُوجّه لتقديم الملفّ index.html. بنفس الطّريقة سنقوم بتقديم كلّ من ملفّي posts.html الخاصّ بالمقالات و users.html الخاص بالمُستخدمين. حدّث المُوجّه في مُخطّط المقالات ليُصبح كما يلي: # project/posts/views.py from flask import Blueprint, render_template @posts.route('/') # 127.0.0.1:5000/posts def index(): return render_template('posts.html') # render project/posts/templates/posts.html وهكذا سيكون الموجّه الجديد في المُخطّطات الخاصّة بالمُستخدمين: # project/users/views.py from flask import Blueprint, render_template @users.route('/') # 127.0.0.1:5000/users def index(): return render_template('users.html') # render project/users/templates/users.html هكذا إن طلب الزّائر أي صفحة من الصّفحات الثّلاث فسيُقدّمُ ملفّ HTML المُناسب. استخدام إطار Bootsrap لتنسيق الصّفحات الهدف من هذه السّلسلة هو التّعريف بكيفيّة إنشاء تطبيقات ويب ديناميكيّة بلغة بايثون وإطار فلاسك ولن أتطرّق إلى لغات أساسيّة مثل HTML و css وJavascript، ولأنّ تطبيقات الويب في يومنا هذا أصبحت تعتمد كثيرا على المظهر الجميل والاستخدام المرن باستعمال كل من لغتي css وjavascript، فمن الضّروري أن نستعمل إطار عمل لسد هذا الفراغ وإتاحة تصميم أنيق لتطبيقنا. سنستخدم في هذا المشروع إطار bootsrap 3 الذي يُمكنك تحميله من الموقع الرّسمي وفك الضّغط عن ملفّ zip داخل مجلّد project/static، سأعتمد كذلك على مشروع Bootsrap-rtl لتعريب وتوجيه التّنسيق من اليمين إلى اليسار وسأضعه في مجلّد project/static/css كما سأضع مكتبة jquery داخل مجلّد project/static/css/bootstrap لذا تأكّد من أنّك قد جهّزت كلّ شيء قبل أن تبدأ في استدعاء الملفّات السّاكنة. بعد تجهيز مُجلّد static ستكون المُجلّدات والملفّات بداخله كما يلي: project/static/ ├── bootstrap │ ├── css │ │ └── bootstrap.min.css │ └── js │ ├── bootstrap.min.js │ └── jquery.js └── css ├── bootstrap-rtl.min.css └── style.css قد تكون هناك ملفّات إضافيّة حسب ما قُمت بتنزيله عندما نزّلت إطار العمل Bootstrap، لكنّ الملفّات أعلاه هي الأهم وهي التّي سنحتاج إليها حاليّا. إذا أردت إضافة ملفّات Javascript أخرى، فيُمكنك إمّا أن تضعها داخل مُجلّد js المُتواجد داخل المُجلّد bootstrap أو أن تُنشئ مُجلّدا جديدا باسم js داخل مُجلّد الملفّات السّاكنة static. الوراثة في قوالب Jinja2 لنقل بأنّنا نُريد عرض جملة واحدة في كل ملف من ملفات HTML الثلاثة. يُمكن أن أقوم بما يلي في كل ملفّ: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> Hello </body> </html> مع تعويض Hello بالجملة التّي ارغب في عرضها عند طلب كل موجّه. هذه الطّريقة تعمل بشكل جيّد، لكن ألا تُلاحظ بأنّنا سنُكرّر نفس الأسطر في كلّ ملف؟ عوضا عن تكرار الأسطر في كلّ ملف يُمكننا استعمال مبدأ الوراثة في مجرّك القوالب Jinja. وللاستفادة من هذا المبدأ في المثال السّابق، يُمكن أن نكتب الأسطر التّي تتكرّر في كل ملف في ملفّ رئيسي واحد يُعتبر القاعدة لجميع الملفّات الأخرى، وهذا هو دور ملفّ project/templates/base.html الذي أنشأناه سابقا، ففيه يُمكننا وضع الأسطر السّابقة مع تخصيص المكان الذي سنستطيع كتابة الجملة الخاصّة بكل ملف فيه. افتح ملفّ base.html وضع فيه ما يلي: {# project/templates/base.html #} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %} {% endblock %}</title> <script src="{{ url_for("static", filename="bootstrap/js/jquery.js") }}"></script> <script src="{{ url_for("static", filename="bootstrap/js/bootstrap.min.js") }}"></script> <link rel="stylesheet" href="{{ url_for("static", filename="bootstrap/css/bootstrap.min.css") }}"> <link rel="stylesheet" href="{{ url_for("static", filename="css/style.css") }}"> <link rel="stylesheet" href="{{ url_for("static", filename="css/bootstrap-rtl.min.css") }}"> </head> <body> {% block content %} {% endblock %} </body> </html> احفظ الملف وأغلقه. لاحظ بأنّنا قمنا باستدعاء جميع الملفّات التّي سنحتاج إليها للتّنسيق وإضافة ميّزات أخرى بلغة Javascript، وقُمنا كذلك بوضع كتلة Block باسم title لتعويضها بالعنوان في كل ملفّ، أمّا كتلة content فهي التّي ستُعوّضُ بالمحتوى (كلمة Hello في مثالنا السّابق). يُمكنك إضافة ملفّات أخرى إلى مُجلّد static، لكن لا تنس أن تقوم باستيرادها في ملفّ base.html لكي تعمل في جميع الصّفحات. بعد تجهيز الملفّ base.html الذي سيُشكّل قاعدة للملفّات الأخرى، سنُنشئ الآن ثلاثة ملفّات HTML رئيسيّة، وهي كما يلي: ملفّ HTML للصّفحة الرّئيسية (مساره project/templates/index.html ). ملفّ HTML للصّفحة الرّئيسية للمُستخدمين (مساره project/users/templates/users.html). ملفّ المقالات الرّئيسي (مساره project/posts/templates/posts.html). لملء الملفّات، ضع الشّيفرة التّاليّة في كلّ ملفّ يُمكنك الاستعانة بالمسار المُشار إليه في التّعليق أعلى الشّيفرة للوصول إلى الملفّ بشكل أسرع. ملفّ الصّفحة الرّئيسية: {# project/templates/index.html #} {% extends 'base.html' %} {% block title %} كلمة – الصّفحة الرّئيسية {% endblock %} {% block content %} <h1> مرحبا بك في تطبيق كلمة </h1> {% endblock %} ملفّ الصّفحة الرّئيسية للمُستخدمين: {# project/users/templates/users.html #} {% extends 'base.html' %} {% block title %} كلمة – المُستخدمون {% endblock %} {% block content %} <h1> الصّفحة الرّئيسية للمُستخدمين </h1> {% endblock %} ملفّ الصّفحة الرّئيسية للمقالات: {# project/posts/templates/posts.html #} {% extends 'base.html' %} {% block title %} كلمة – المقالات {% endblock %} {% block content %} <h1> الصّفحة الرّئيسية للمقالات </h1> {% endblock %} كما ترى عوضا عن تكرار الكثير من شيفرات HTML قمنا ببساطة بإنشاء ملفّ واحد والوراثة منه باستخدام الجملة extends 'base.html' وفي كلّ مكان نضع المحتوى المناسب، وبهذه الطّريقة سنمتلك طريقة ديناميكية لتحديد عنوان ومحتوى كلّ موجّه مرتبط بقالب معيّن، بالإضافة إلى أنّ الملفّات السّاكنة مثل ملفّاتcss و js ستكون مُتاحة في جميع الملفّات التّي ترث من الملّف الرّئيسي base.html. مُلاحظة: في بعض المشاريع المكتوبة بلغة بايثون وإطار العمل فلاسك، يُمكن أن يُسمّى الملفّ المُشترك باسم layout.html عوضا عن base.html، لكنّ المبدأ هو نفسه. الآن إن عدت إلى الموجّهات السّابقة، فستُلاحظ بأنّ التّنسيق ومكوّنات كلّ صفحة قد تغيّرت. الرّبط بين المُوجّهات باستخدام الدّالة url_for بعد أن تعرّفنا على كيفيّة تقديم قوالب HTML، أصبح بإمكاننا عرض صفحات للمُستخدم حسب المُوجّه المطلوب، وبقي لنا التّعرف على كيفيّة الرّبط بين هذه الموجّهات. للرّبط بين موجّهات المُخطّطات باستخدام الدّالة url_for، نقوم أولا بوضع اسم المُخطّط ثمّ اسم الدّالة التّي يتم استدعاؤها عند الوصول إلى المُوجّه، وبما أنّنا سمينا هذه الدّوال باسم index فللرّبط بينها يُمكنك أن تقوم بشيء مُشابه لما يلي: url_for('index') # / url_for('posts.index') # /posts url_for('users.index') # /users لو كانت الدّالة تقبل مُعاملا لتوجّب علينا تمرير قيمته كالآتي: url_for('posts.post_by_id', post_id = 1) للرّبط بين الموجّهات الثّلاثة التّي سبق وأن أنشأناها سنُضيف ما يلي مُباشرة بعد وسم h1 في كل ملفّ من ملفّات HTML حسب المسار في بداية الشّيفرة. الرّوابط في الصّفحة الرّئيسية: {# project/templates/index.html #} <a href="{{ url_for("posts.index") }}"> اضغط هنا للوصول إلى صفحة المقالات </a> <br> <a href="{{ url_for("users.index") }}">اضغط هنا للوصول إلى صفحة المُستخدمين</a> رابط العودة إلى الصّفحة الرّئيسية في صفحة المقالات: {# project/posts/templates/posts.html #} <a href="{{ url_for("index") }}">اضغط هنا للعودة إلى الصّفحة الرّئيسيّة</a> رابط العودة إلى الصّفحة الرّئيسية في صفحة المُستخدمين: {# project/users/templates/users.html #} <a href="{{ url_for("index") }}">اضغط هنا للعودة إلى الصّفحة الرّئيسيّة</a> بعد حفظ الملفّات، ستجد بأنّ الصّفحة الرّئيسية أصبحت تحتوي على رابط لكلّ من صفحتي المقالات والمُستخدمين مع رابط للعودة إلى الصّفحة الرّئيسية في كل صفحة من الصّفحتين. الرّبط بين المُوجّهات مع تمرير مُعاملات للدالّة التّابعة لكل موجّه. لفهم مبدأ المعاملات أكثر، سنقوم بإضافة موجّه للوصول إلى مقال برقم مُعرّفه في ملفّ project/posts/views.py كما يلي: # project/posts/views.py #.. #.. @posts.route('/<int:id>') def post_by_id(id): return render_template('post.html', id = id) لاحظ بأنّنا خصّصنا المعامل id من نوع int أي عدد صحيح، فإن لم تكن قيمة المُعامل عند الوصول إلى الرّابط عددا صحيحا فإنّ ذلك سيُسبّب خطأ من نوع 404. بمعنى أدق، الرّابط /posts/1 صحيح، أمّا /posts/abc فسيرجع الخطأ ذو الرّقم 404. سنتعرّف على كيفيّة التّعامل مع هذه الأخطاء في درس قادم. سنضع ما يلي في ملفّ post.html الذي قدّمناه: {% extends 'base.html' %} {% block title %} كلمة – المقال ذو المُعرّف {{ id }} {% endblock %} {% block content %} <h1> صفحة المقال الواحد ذو رقم المُعرّف {{id}} </h1> <a href="{{ url_for("index") }}">اضغط هنا للعودة إلى الصّفحة الرّئيسيّة</a> {% endblock %} لنستخدم الآن الدّالة url_for داخل ملفّ posts.html لضرب مثال على كيفيّة تمرير مُعاملات إلى الدّالة. أضف ما يلي إلى ملفّ posts.html مُباشرة بعد الوسم <h1>: <a href="{{url_for("posts.post_by_id", id=1)}}"> <h2> رابط المقال الأول </h2> </a> <a href="{{url_for("posts.post_by_id", id=2)}}"> <h2> رابط المقال الثّاني </h2> </a> الآن، إن دخلت إلى صفحة المقالات فستلاحظ رابطين لمقالين وهميّين، الأول رقم معرّفه 1 والآخر رقم مُعرّفه 2، ورابط المقالين كالتّالي: http://127.0.0.1:5000/posts/1 http://127.0.0.1:5000/posts/2 يُمكنك كذلك زيارة صفحات أخرى عبر تغيير قيمة رقم المُعرّف إلى أي عدد صحيح، والتّالي بعض الأمثلة: http://127.0.0.1:5000/posts/99 http://127.0.0.1:5000/posts/232 في المقالات القادمة سوف نعوّض جملة “صفحة المقال ذي المُعرّف رقم * ” بعنوان المقال وسنعرض محتواه وقسمه أسفل العنوان مع الوسوم الخاصّة بالمقال، وذلك بجلب كل مقال حسب رقم مُعرّفه في قاعدة البيانات. خاتمة تعرّفنا في هذا الدّرس على جزء آخر من أساسيّات تطوير تطبيقات ويب أكثر تعقيدا وذات مهام مُتعدّدة، هذا الدّرس يُمثّل قسما صغيرا فقط ممّا يجب عليك معرفته حول كيفيّة التّعامل مع قوالب HTML ومحرّكها Jinja الذي يُرافق إطار العمل Flask افتراضيّا، لكنّك ستجده في مشاريع بايثون أخرى تتعلّق بتطوير الويب وبعض المجالات الأخرى ولو لم يكن إطار Flask حاضرا، لذا فتعلّم أساسيّات Jinja سيُخوّلك لتعلّم أساسيّات أطر عمل أخرى ومُختلف الأدوات التّي تعتمد عليه بشكل أسرع.

تعرفنا في المقال السابق على ملفات الوظائف في قالب Underscores بشئ من التفصيل وفي هذا المقال سنلقي نظرة على ملفات العرض وهي ملفات القالب التي يستخدمها ووردبريس لعرض محتويات الموقع في مختلف الصفحات وكذلك ملفات التنسيق. لكن دعنا في البداية نلقي نراجع بصورة سريعة مفهوم ملفات القالب وكذلك هرمية القالب. ملفات القالب وهرمية القالبملفات القالب Template files هي عبارة عن ملفات قابلة لإعادة الإستخدام Reusable يستخدمها ووردبريس لتوليد صفحات الموقع المختلفة. بعض هذه الملفات (مثل ملف الترويسة header.php وملف التذييل footer.php) تستخدم في جميع صفحات الموقع تقريبا، وبعضها مثل ملف single.php وملف index.php تستخدم في حالات معينة فقط (مثلا الصفحة الرئيسية، أو صفحة عرض المقال). يتبع ووردبريس نظام معين لتحديد ملف القالب الذي سيتم إستخدامه في الصفحة الحالية ويقوم بتحميله عند طلب الصفحة ليستخدم في عرضها. هذا النظام يمكن أن نسميه هرمية القالب في ووردبريس WordPress Template Hierarchy. وفقا لهرمية القالب فإن الملفات الموجودة في القالب قد تختلف من قالب لأخر (وهو ما يحدث عادة) ولكن هنالك ملفات أساسية موجودة في أغلب القوالب، وقالب Underscores بدوره يحتوي على هذه الملفات الأساسية، ويمكنك بالطبع إضافة المزيد من ملفات القالب على حسب المشروع الذي تقوم بتطويره وكذلك يمكنك الإستغناء عن بعضها. ملفات القالب في قالب Underscoresملف الترويسة header.phpهذا الملف من الملفات التي يتم إستخدامها في جميع ملفات القالب الأخرى تقريبا حيث يحتوي على ترويسة الموقع اي بداية وسم html ووسم head وكذلك بداية وسم body، ويحتوي أيضا على عنوان ووصف الموقع وكذلك القائمة الرئيسية للموقع. من الأمور والممارسات الجيدة التي يمكن ملاحظتها في هذا الملف: إستخدام الدالة language_attributes داخل وسم html وهي عبارة عن دالة يوفرها ووردبريس وتعرض خصائص اللغة لوسم html وهي خاصية dir وكذلك خاصية lang وهي مفيدة جدا في حالة تطوير الموقع بأكثر من لغة حيث تقوم بجلب إتجاه اللغة الحالية تلقائيا وكذلك اللغة نفسها.إستخدام الدالة wp_head قبل إغلاق وسم head وهي دالة مهمة جدا يستخدمها ووردبريس في عدة امور وتعتمد عليها مجموعة كبيرة من الإضافات لذلك إذا لم تقم بمناداتها في هذا المكان فقد تتفاجأ بأن كثير من الإضافات لا تعمل في موقعك وكذلك لن يتمكن ووردبريس من ربط ملفات التنسيق والجافا إسكربت في ترويسة الموقع. وفي الحقيقة هي مسئولة من من اداة الحدث وبالتالي مناداة أي دالة مرتبطة به.إستخدام الدالة body_class داخل وسم body والتي تقوم بإخراج كلاسات CSS للصفحة الحالية على حسب الصفحة نفسها، فمثلا في ستجد كلاس home في الصفحة الرئيسية وكلاس blog في صفحة المقالات وغيرها من الكلاسات المفيدة والتي تعينك في تنسيق الموقع إعتمادا على الصفحة نفسها.يتم تضمين هذا الملف في بقية ملفات القالب من خلال الدالة get_header. ملف الفوتر footer.phpمثل ملف الهيدر فإن ملف الفوتر يتم إستخدامه في جميع ملفات القالب الأخرى تقريبا، حيث يحتوي على وسم الإغلاق لكل من html وكذلك body ويحتوي أيضا على الدالة wp_footer والتي يتم مناداتها قبل إغلاق وسم body مباشرة ومهمتها مشابهة لمهمة الدالة wp_head التي ذكرناها اعلاه إلا أن هذه الدالة مرتبطة بالحدث wp_footer وهي بنفس أهمية wp_head وعليك دوما التأكد من أن قالبك يحتوي على كليهما في جميع صفحات الموقع. ملف المقالات (الصفحة الرئيسية) index.phpهذا الملف يستخدم لعرض الصفحة الرئيسية للموقع، أو بصورة أدق صفحة المقالات (لانه يمكنك إستخدام صفحة ثابتة لرئيسية الموقع وعرض المقالات في صفحة اخرى غير الصفحة الرئيسية وهو ما يمكنك التحكم به من خلال إعدادات القراءة في لوحة تحكم ووردبريس). مهمة هذا الملف هو عرض جميع المقالات في الموقع وبالتالي فإن الحلقة Loop في هذا الملف تجلب بصورة تلقائية جميع المقالات، وما يمكن ملاحظته في هذا الملف: يتم تضمين ترويسة الموقع (ملف الترويسة) من خلال إستخدام الدالة get_header كما أسلفنا.يتم إستخدام الدالة get_template_part مع الدالة get_post_format لتضمين ملف الcontent المناسب من داخل مجلد template-parts على حسب بنية المقال بالصورة التالية:get_template_part( 'template-parts/content', get_post_format() );فمثلا عندما تكون بنية المقال إقتباس quote سيتم تحميل ملف content-quote.php من داخل مجلد template-part، وهذا في حالة كان الملف content-quote.php موجودا وإذا لم يكن موجود فإن الدالة get_template_part تقوم تلقائيا بتضمين الملف content.php وهذه إحدى مميزات الدالة get_template_part. وكما سترى فإن هذه الدالة مستخدمة في عدد من ملفات القالب لجلب الأجزاء الموجودة في مجلد template-parts وبهذه الطريقة تصبح ملفات القالب أكثر تنظيما وتصبح الشيفرة البرمجية مقرؤة بصورة أكبر. ملف المقال المفرد single.phpكما هو معلوم لديك فإن ووردبريس يستخدم هذا الملف لعرض المقال المفرد وقد يستخدمه أيضا لعرض صفحة التفاصيل لأنواع المقالات المخصصة الأخرى في بعض الأحيان وفق هرمية القالب التي أشرنا إليها سابقا. ما يمكن ملاحظته في هذا القالب هو إستخدام الدالة get_template_part داخل الحلقة لجلب ملف تفاصيل المقال المفرد وبعد ذلك يتم إستدعاء الدالة the_post_navigation التي تم تعريفها في ملف template-tags.php لعرض المقال السابق والمقال التالي لهذا المقال في حالة وجودهما. بعد ذلك يتم التحقق من إذا ما كانت التعليقات مفتوحة لهذا المقال وفي هذه الحالة يتم جلب ملف comments.php والذي يحتوي نموذج التعليقات وأيضا يعرض التعليقات السابقة في حالة وجودها. وأخيرا يتم جلب ملف sidebar.php من خلال الدالة get_sidebar التي يوفرها ووردبريس، وكذلك يتم جلب ملف الفوتر. ملف الصفحة المفردة page.phpهذا الملف شبه مطابق للملف السابق، فقط داخل الحلقة يتم جلب ملف content-page.php بدلا عن ملف content-single.php. ملف الشريط الجانبي sidebar.phpفي هذا الملف يتم التحقق من وجود أي ودجات نشطة في الشريط الجانبي Sidebar المسمى sidebar-1 وذلك من خلال الدالة is_active_sidebar وفي حالة لم يكن هنالك ودجات نشطة يتم الخروج من الملف وإلا سيتم جلب محتويات الشريط الجاني من خلال الدالة dynamic_sidebar والتي تستقبل معرف الشريط الجانبي لجلبه. ملف الأرشيف archive.phpكما هو معلوم وفق هرمية القالب يتم إستخدام هذا الملف لعرض أرشيف التصنيفات والشهور والكاتب وعموما أي أرشيف إذا لم يكن لديه ملف أرشيف خاص به (مثلا في حالة وجود ملف category.php فحينها سيتم إستخدامه لعرض أرشيف التصنيف ولا يتم إستخدام ملف archive.php لأرشيف التصنيف). نلاحظ أنه في البداية وقبل الدخول الى الحلقة يتم إستخدام الدالتين the_archive_title و the_archive_description لجلب عنوان ووصف الأرشيف على التوالي، وبعد ذلك تجد بقية الملف مشابه لملفات single.php وpage.php طبعا مع إختلاف الملف content الذي يتم جلبه حيث يتم جلبه هاهنا وفق تنسيق المقال كما في ملف index.php. ونلاحظ فرق أخر في هذا الملف وهو أنه في حالة لم يكن هنالك محتويات في الأرشيف الحالي يتم جلب ملف content-none.php والذي في هذه الحالة يخرج رسالة للزائر تفيده بأنه لا يمكن إيجاد المحتوى المطلوب بالإضافة لنموذج البحث. وقبل ذلك وبعد نهاية الحلقة يتم إستدعاء الدالة the_posts_navigation التي تم تعريفها في ملف template-tags.php والتي تعرض روابط التنقل بين المقالات (الصفحة السابقة والصفحة التالية). ملف البحث search.phpفي بداية هذا الملف وقبل الدخول الى الحلقة يتم عرض عنوان يشير الى كلمة البحث (يمكن ان يترجم إلى نتائج البحث عن: "كلمات البحث") حيث يتم الوصول الى الكلمة التي بحث عنها المستخدم من خلال الدالة get_search_query التي يوفرها ووردبريس. بعد ذلك يتم عرض نتائج البحث في حالة وجودها من خلال إستدعاء ملف content-search.php وفي حالة عدم وجود نتائج مطابقة يتم إستدعاء الملف content-none.php والذي في هذه الحالة يعرض رسالة للزائر تفيده بأنه لم يتم إيجاد نتائج مطابقة وتقترح عليه إستخدام كلمات أخرى في البحث ويرفق له نموذج البحث. ملف الخطأ 404.phpيستخدم هذا الملف لعرض صفحة الخطأ المشهورة 404 وفي قالب underscores تم برمجته بحيث يقدم فائدة كبيرة للمستخدم حيث أنه بالإضافة لعنوان الصفحة ورسالة الخطأ يقوم بعرض نموذج البحث، وودجت أخر المقالات، والتصنيفات الأكثر إستخداما في المدونة، والأرشيف الشهري للمدونة، بالإضافة لسحابة الوسوم. ملف التعليقات comments.phpيستخدم هذا الملف لعرض التعليقات السابقة ونموذج التعليقات لكل من الصفحات والمقالات في حالة كانت التعليقات مفتوحة للمقال المعين. وربما نخصص لطريقة برمجة ملف التعليقات في ووردبريس مقالا مفردا لنتعرف على أهم الدوال التي يوفرها ووردبريس للتعليفات وطريقة إستخدامها، وحاليا يمكنك إستخدام هذا الملف كما هو في قالبك مع التعديل على التنسيق بما يتناسب مع تصميم القالب. ملفات التنسيق في قالب Undescoresلا يجبرك قالب Underscores على إستخدام ملفات التنسيق الموجودة فيه ويمكنك بكل بساطة مسحها أو مسح محتوياتها والبدء بكاتبة شيفراتك الخاصة، لكنه يوفر لك بعض الأمور الأساسية المهمة في تنسيق قوالب ووردبريس لتبني عليها كما سنرى. ملف style.cssكما هو معلوم فإن هذا الملف من الملفات الأساسية التي لا بد من وجودها في أي قالب ووردبريس ليعمل حيث يستخدم ووردبريس الترويسة الموجودة في هذا القالب والمكتوبة كتعليق ليأخذ منها معلومات القالب التي سيعرضها في لوحة التحكم لذلك لابد من إرفاق هذا القالب وكتابة هذه المعلومات في أي قالب ووردبريس، لكنك غير مجبر على كتابة تنسيقات القالب في هذا الملف ولا ربطه في ترويسة الموقع (من خلال إستخدام الدالة wp_enqueue_style كما أشرنا لذلك في المقال السابق) ولكن يحسن بك أن تستخدمه ما دام ليس هنالك مانع يمنعك من إستخدامه. بعد ترويسة هذا الملف تلاحظ وجود تعليق طويل هو عبارة عن جدول لمحتويات الملف، وهذه من الأشياء التي يمكنك تعلمها من قالب Underscores ليسهل فهم ملف التنسيق والوصول لأي جزء فيه فيما بعد بسرعة أكبر. وكما هو ملاحظ في جدول المحتويات فإن هذا الملف يحتوي مسبقا على الأمور الأساسية في تنسيقات CSS حيث يحتوي على Normalize لعناصر html وتنسيقات الخطوط والعناصر والنماذج وهذه الثلاثة الأخيرة يمكنك تعديلها بما يتناسب معك. بعد ذلك يحتوي على تنسيقات التنقل وتنقسم الى الروابط والقائمة، وفي تنسيقات القائمة ستجد بعد الأصناف المعدة مسبقا لتضيف عليها تنسيقات القائمة (وفق الصنف الذي تم كتابته في القائمة في ملف header.php)وبعض التنسيقات الأساسية التي تجدها مكتوبة بل إن القائمة معدة مسبقا للعمل في الأجهزة الصغيرة من خلال توفير تنسيقات مختلفة لهذه الأجهزة من خلال Media queries وهنالك أيضا ملف navigation.js المسئول عن إضافة وحذف بعض الأصناف على حسب عرض الجهاز المستخدم لتصفح الموقع وهذا يعني أن القائمة شبه جاهزة لديك وعليك فقط إضافة القليل من الشيفرات لتتناسب مع تنسيق القالب الخاص بك. بعد ذلك يحتوي الملف على تنسيقات خاصة بإمكانية الوصول والمحازاة وتنظيف الfloat، وبعدها بعض التنسيقات الخاصة بالودجات. وبعدها تسنيقات المحتويات (الصفحات والمقالات والتعليقات) وتلاخظ فيها إستخدام بعض الأصناف التي يولدها ووردبريس سواء في وسم body أو وسم المقال نفسه من خلال الدالتين body_class و post_class على التوالي، وبعدها تنسيقات خاصة بـ Infinite scroll في إضافة Jetpack. بعد ذلك هنالك التنسيقات الخاصة بالميديا وهذه التنسيقات مفيدة لمعرفة الأصناف التي يولدها ووردبريس مع الميديا مثل Caption الخاص بالصور والمعرض Gallery. ملف التنسيق لللغات من اليمين للشمال rtl.cssفي حالة كانت لغة العرض للموقع تتبع التنسيق من اليمين للشمال مثل اللغة العربية يقوم ووردبريس تلقائيا بربط الملف المسمى rtl.css في ترويسة الموقع في حالة وجوده في القالب، بالتالي يحسن وضع التنسيقات المختصة بهذه اللغات في هذا الملف حيث أن ووردبريس يقوم بربطه بعد ملف style.css وهذا يعني أن التنسيقات في هذا الملف سيكون لها أولوية للتنسيقات المشابهة في ملف style.css كما هو معلوم في لغة CSS. خاتمةكما تلاحظ فإن ملفات العرض (ملفات القالب) في قوالب ووردبريس تعتمد بصورة كبيرة على فهم هرمية القالب والحلقة وكذلك معرفة وسوم القالب التي يوفرها ووردبريس ومنها الوسوم الشرطية وقد تحتاج أيضا لإنشاء دوال أخرى لإستخدامها ورأينا أنه من المهم أيضا معرفة الأصناف التي يولدها ووردبريس لتستطيع الإستفادة منها في تنسيق القالب وفق الصفحة والمقال وتنسيق طريقة عرض الميديا. بهذا نكون وصلنا لختام هذه السلسلة التي ألقينا فيها نظرة سريعة على ملفات قالب Underscores بشيء من التفصيل وتعلمنا منه بعض الأمور المفيدة في تطوير قوالب وودربريس.

تعرفنا في الدرس الماضي على مفهوم حاويات لينكس (LXC)، مبدأ عملها وكيفية تثبيتها، سنشرع في هذا الدرس إلى كيفية بدء تشغيلها واستعمالها. لا يملك LXC عفريتًا (daemon) يعمل طوال الوقت، لكنه يملك مهام upstart: المهمة ‎/etc/init/lxc-net.conf: هي مهمة اختيارية تعمل فقط إذا حَدَّد الملف ‎/etc/default/lxc الخاصية USE_LXC_BRIDGE (قيمتها هي true افتراضيًا)؛ حيث تهيِّء جسر NAT لكي تستخدمه الحاويات. المهمة ‎/etc/init/lxc.conf: تعمل إذا كانت الخاصية LXC_AUTO (قيمتها true افتراضيًا) مضبوطة إلى true في ‎/etc/default/lxc؛ حيث تبحث عن القيود في المجلد ‎/etc/lxc/auto‎/‎ حيث توجد وصلات رمزية إلى ملفات الضبط للحاويات التي يجب أن تُشغَّل في وقت الإقلاع. المهمة ‎/etc/init/lxc-instance.conf: تُستخدَم من ‎/etc/init/lxc.conf للبدء التلقائي لتشغيل حاوية. التخزين يدعم LXC عدّة أنماط من التخزين لجذر نظام ملفات الحاوية؛ افتراضيًا يكون مجلدًا بسيطًا، لأنه لا يتطلب أي ضبط مسبق للمضيف طالما أن نظام الملفات فيه مساحة تخزينية كافية؛ وهو لا يتطلب أيضًا امتيازات الجذر لإنشاء المخزن، لذلك سيكون ملائمًا للاستخدام دون امتيازات؛ جذر نظام الملفات للاستخدام مع امتيازات موجود افتراضيًا في ‎/var/lib/lxc/C1/rootfs، بينما جذر نظام الملفات للحاويات التي تعمل دون امتيازات يكون في ‎~/.local/share/lxc/C1/rootfs، إذا حُدِّد lxcpath خاص في lxc.system.com، فإن جذر نظام ملفات الحاوية سيكون موجودًا في ‎$lxcpath/C1/rootfs. نسخة snapshot باسم C2 لحاوية C1 التي تُخزَّن في مجلد ستصبح حاوية overlayfs، بجذر نظام ملفات هو overlayfs:/var/lib/lxc/C1/rootfs:/var/lib/lxc/C2/delta0، أنواع التخزين الأخرى تتضمن loop، و btrfs، و LVM، و zfs. حاوية تعتمد على تخزين btrfs تبدو عمومًا مثل حاوية تعتمد على التخزين في مجلد، ويكون جذر نظام الملفات في نفس المكان؛ لكن جذر نظام الملفات يحتوي على حجم فرعي (subvolume)، لذلك تكون نسخة snapshot مُنشَأة باستخدام نسخة snapshot لحجم فرعي. جذر نظام الملفات لحاوية تستخدم LVM يمكن أن يكون أي حجم منطقي منفصل؛ اسم مجموعة الحجوم الافتراضي يمكن أن يُحدَّد في ملف lxc.conf؛ ويُضبَط نوع وحجم نظام الملفات لكل حاوية باستخدام lxc-create. جذر نظام الملفات لحاوية تستخدم zfs هو نظام ملفات zfs منفصل، وموصول في المكان التقليدي ‎/var/lib ‎/lxc/C1/rootfs، يمكن تحديد zfsroot باستخدام lxc-create، ويمكن تحديد قيمة افتراضية في ملف lxc.system.conf. المزيد من المعلومات حول إنشاء الحاويات بمختلف طرائق التخزين يمكن أن توجد في صفحة دليل lxc-create. القوالب يتطلب إنشاء حاوية عادةً إنشاء جذر نظام ملفات للحاوية؛ يفوض الأمر lxc-create هذا العمل إلى القوالب (templates)، التي تكون عادةً خاصة بالتوزيعة؛ قوالب lxc التي تأتي مع lxc يمكن أن توجد في مجلد ‎/usr/share/lxc/templates، بما فيها القوالب لإنشاء أوبنتو، ودبيان، وفيدورا، وأوراكل، وسنتوس، وجنتو بالإضافة لغيرها. إنشاء صور للتوزيعات في أغلب الحالات يتطلب القدرة على إنشاء عقد أجهزة، ويتطلب ذلك أدوات التي ليست متوفرة في بقية التوزيعات، وعادةً يستغرق هذا الأمر وقتًا طويلًا؛ فلذلك يأتي lxc بقالب download، الذي ينزل صور مبنية مسبقًا للحاويات من خادوم lxc مركزي؛ أهم حالة استخدام هي السماح بإنشاء بسيط لحاويات دون امتيازات بواسطة مستخدمين غير الجذر، الذين لن يستطيعوا ببساطة تشغيل الأمر debootstrap. عند تشغيل lxc-create، فجميع الخيارات التي تأتي بعد «--» تُمرَّر إلى القالب؛ ففي الأمر الآتي، تمرر الخيارات ‎--name و ‎--template و ‎--bdev إلى lxc-create، بينما يمرر الخيار ‎--release إلى القالب: lxc-create --template ubuntu --name c1 --bdev loop -- --release trusty يمكنك الحصول على مساعدة حول الخيارات المدعومة في حاوية معينة بتمرير الخيار ‎--help واسم القالب إلى الأمر lxc-create؛ فعلى سبيل المثال، للحصول على مساعدة حول تنزيل قالب: lxc-create --template download --help البدء التلقائي يدعم LXC تعليم الحاويات لكي تُشغَّل عند إقلاع النظام؛ ففي الإصدارات قبل أوبنتو 14.04، كان يتم ذلك باستخدام وصلات رمزية في المجلد ‎/etc/lxc/auto؛ وبدءًا من أوبنتو 14.04، يتم ذلك عبر ملفات ضبط الحاوية؛ القيد: lxc.start.auto = 1 lxc.start.delay = 5 يعني أن على الحاوية البدء عند إقلاع النظام ويجب الانتظار 5 ثواني قبل بدء تشغيل الحاوية التالية؛ يدعم LXC أيضًا ترتيب وتجميع الحاويات، وأيضًا إعادة الإقلاع وإيقاف التشغيل عبر مجموعات autostart؛ راجع صفحات دليل lxc-autostart و lxc-container.conf للمزيد من المعلومات. AppArmor يأتي LXC مع ملف ضبط AppArmor مهمته هي حماية المضيف من الإساءة العرضية للامتيازات داخل الحاوية؛ على سبيل المثال، لن تكون الحاوية قادرةً على الكتابة إلى ‎/proc/sysrq-trigger أو أغلبية ملفات ‎/sys. الملف usr.bin.lxc-start يدخل حيز التنفيذ عند تشغيل lxc-start؛ يمنع ملف الضبط lxc-start من وصل أنظمة ملفات جديدة خارج نظام ملفات الجذر الخاص بالحاوية؛ قبل تنفيذ init للحاوية، فإن LXC يطلب تبديلًا لملف ضبط الحاوية؛ افتراضيًا، هذا الضبط هو السياسة lxc-container-default المعرَّفة في ملف الضبط ‎/etc/apparmor.d/lxc/lxc-default. يمنع هذا الضبط الحاوية من الوصول إلى مسارات خطرة، ومن وصل أغلبية أنظمة الملفات. لا يمكن تقييد البرامج في الحاوية أكثر من ذلك؛ فعلى سبيل المثال، خادوم MySQL الذي يعمل ضمن نطاق الحاوية (مما يحمي المضيف) لا يمكن أن يدخل في نطاق ملف ضبط MySQL (لحماية الحاوية). لا يدخل lxc-execute ضمن سلطة AppArmor، لكن الحاوية التي يُنشِئها (spawn) ستكون مقيدةً. تعديل سياسات الحاوية إذا وجدت أن lxc-start لا يعمل بسبب تقييد في الوصول من سياسة AppArmor، فيمكنك تعطيل ملف ضبط lxc-start بتنفيذ: sudo apparmor_parser -R /etc/apparmor.d/usr.bin.lxc-start sudo ln -s /etc/apparmor.d/usr.bin.lxc-start /etc/apparmor.d/disabled/ هذا سيجعل lxc-start يعمل دون قيود، لكن ستبقى الحدود موجودةً للحاوية نفسها، وإذا أردت إزالة التقييد عن الحاوية، فعليك بالإضافة إلى تعطيل ملف الضبط usr.bin.lxc-start أن تضيف السطر: lxc.aa_profile = unconfined إلى ملف ضبط الحاوية. يأتي LXC مع سياسات بديلة للحاويات، فإذا أردت إنشاء حاويات داخل حاويات (تشعب)، فعليك استخدام ملف الضبط lxc-container-default-with-nasting بإضافة السطر الآتي إلى ملف ضبط الحاوية: lxc.aa_profile = lxc-container-default-with-nesting إذا أردت استخدام libvirt داخل الحاويات، فستحتاج إلى تعديل تلك السياسة (المعرفة في ‎‎/etc/apparmor.d/lxc/lxc-default-with-nasting) وإزالة التعليق عن السطر الآتي: mount fstype=cgroup -> /sys/fs/cgroup/**, ثم أعد تحميل السياسة. لاحظ أن سياسة التشعب للحاويات ذات الامتيازات هي أقل أمانًا من السياسة الافتراضية، حيث تسمح للحاويات بإعادة وصل ‎/sys و ‎/proc في أمكان غير قياسية، مما يتجاوز سياسة AppArmor؛ لا تملك الحاويات دون امتيازات هذا التأثير الجانبي، ﻷن جذر الحاوية لا يمكنه الكتابة إلى ملفات proc و sys المملوكة من الجذر. إذا أردت تشغيل الحاوية بملف ضبط مخصص، فبإمكانك إنشاء ملف ضبط في ‎/etc/apparmor.d/lxc، ويجب أن يبدأ اسمه بالكلمة lxc-‎ لكي يُسمَح لبرنامج lxc-start بالانتقال إليه؛ ملف lxc-default يتضمن إعادة استعمال الملف المجرد ‎/etc/apparmor.d/abstraction/lxc/container-base؛ طريقة سهلة لإنشاء ملف ضبط جديد هي فعل المثل، ثم إضافة الأذونات الإضافية في نهاية السياسة. حَمِّل الضبط الجديد بعد إنشاءه كما يلي: sudo apparmor_parser -r /etc/apparmor.d/lxc-containers سيُحمَّل هذا الضبط تلقائيًا بعد إعادة الإقلاع، ﻷنه يُقرَأ من الملف ‎/etc/apparmor.d/lxc-containers؛ وفي النهاية ولجعل الحاوية CN تستخدم ملف الضبط الجديد lxc-CN-profile، فأضف السطر الآتي إلى ملف الضبط: lxc.aa_profile = lxc-CN-profile مجموعات التحكم إن مجموعات التحكم (cgroups) هي ميزة من ميزات النواة توفر تجميع للمهام تجميعًا هيكليًا، وإسناد وتحديد الموارد لكل مجموعة تحكم؛ تُستخدَم في الحاويات للحد من الوصول إلى الأجهزة الكتلية أو المحرفية (block or character devices) وتجمِّد عمل الحاويات؛ يمكن استعمالها أيضًا لتحديد استخدام الذاكرة وإيقاف الدخل أو الخرج، وضمانة استخدام أصغري للمعالج، والسماح للحاوية بالوصول إلى معالجات محددة. افتراضيًا، سيُسند للحاوية CN ذات امتيازات مجموعةُ تحكمٍ باسم ‎/lxc/CN؛ وفي حال حدوث تضارب بالاسم (الذي قد يحدث عند استخدام lxcpaths مخصصة)، فستُضاف لاحقة «‎-n» حيث n هو رقم صحيح يبدأ من الصفر، ويُسنَد إلى اسم مجموعة التحكم. افتراضيًا، سيُسند للحاوية CN دون امتيازات مجموعة تحكم باسم CN في مجموعة التحكم الخاصة بالمهمة التي بدأت الحاوية، على سبيل المثال ‎/usr/1000.user/1.session/CN سيُمنَح جذر الحاوية ملكية المجموعة للمجلد (لكن ليس جميع الملفات)، وهذا ما سيسمح بإنشاء مجموعات تحكم فرعية. وفي أوبنتو 14.04، يستخدم LXC مدير مجموعات التحكم cgmanager لإدارة مجموعات التحكم؛ يستقبل مدير مجموعات التحكم طلبات D-Bus عبر مقبس يونكس ‎/sys/fs/cgroup/cgmanager/sock؛ يجب أن يُضاف السطر الآتي لاستخدام آمن للحاويات المتشعبة: lxc.mount.auto = cgroup إلى ملف ضبط الحاوية، مما يصل المجلد ‎/sys/fs/cgroup/cgmanager وصلًا ترابطيًا (bind-mounted) إلى الحاوية؛ ويجب على الحاوية في المقابل تشغيل وسيط إدارة مجموعات التحكم (ويتم ذلك افتراضيًا إذا كانت الحزمة cgmanager مثبتةً على الحاوية) الذي سينقل المجلد ‎/sys/fs/cgroup/cgmanager إلى ‎/sys/fs/cgroup‎/cgmanager.lower ثم سيبدأ الاستماع إلى الطلبات للوسيط على مقبسه ‎/sys/fs/cgroup ‎/cgmanager‎/sock؛ سيتأكد مدير مجموعات التحكم في المضيف أن الحاويات المتشعبة لن تستطيع «الهروب» من مجموعات التحكم المُسندَة إليها أو إنشاء طلبات غير مصرح لها بها. الاستنساخ للتزويد السريع بالحاويات، ربما تريد تخصيص حاوية تبعًا لحاجاتك ثم تُنشِئ عدَّة نسِخٍ منها؛ ويمكن فعل ذلك بالبرنامج lxc-clone. الاستنساخ إما أن يكون عبر snapshots أو بنسخ حاوية أخرى؛ فالنسخ هو إنشاء حاوية جديدة منسوخة من الأصلية، وتأخذ مساحة تخزينية مثل الحاوية الأصلية؛ أما snapshot فإنها تستخدم قدرة آلية التخزين على إنشاء snapshots لإنشاء حاوية النسخ-عند-الكتابة (copy-on-write) تُشير إلى الحاوية الأولى؛ يمكن إنشاء snapshots للحاويات المخزنة في btrfs، و LVM، و zfs، وتلك التي تكون مخزنة في مجلدات؛ حيث كل آلية تخزين لها خصوصياتها؛ فمثلًا، حاويات LVM التي ليست thinpool-provisioned لا تدعم إنشاء snapshots من snapshots؛ ولا يمكن حذف حاويات zfs مع snapshots قبل أن تُطلَق (release) جميع snapshots؛ ويجب أن يُخطط جيدًا لحاويات LVM فقد لا يدعم نظام الملفات أن يزيد حجمه. لا يعاني btrfs من تلك السلبيات، لكنه يعاني من أداء fsync منخفض يسبب جعل dpkg و apt-get أبطئ. تُنشَأ snapshots من الحاويات المخزنة في مجلدات عبر نظام الملفات؛ فمثلًا يكون لحاوية ذات امتيازات C1 جذر نظام ملفات في ‎/var/lib/lxc/C1/rootfs، وستبدأ نسخة snapshot للحاوية C1 باسم C2 بجذر نظام الملفات للحاوية C1 موصولًا للقراءة فقط في ‎/var/lib/lxc/C2/delta0؛ كل ما يهم في هذه الحالة أنه لا يفترض أن تعمل أو تحذف الحاوية C1 أثناء عمل C2؛ من المستحسن اعتبار الحاوية C1 هي حاوية أساسية واستخدام نسخة snapshot لها فقط. لنفترض أن لدينا حاوية باسم C1، فيمكن إنشاء نسخة منها باستخدام الأمر: sudo lxc-clone -o C1 -n C2 يمكن إنشاء snapshot باستخدام: sudo lxc-clone -s -o C1 -n C2 راجع صفحة دليل lxc-clone لمزيد من المعلومات. Snapshots LXC يدعم snapshots لتسهيل دعم نسخ snapshot لتطوير تكراري للحاوية؛ فعندما تعمل على حاوية C1 -وقبل إنشاء تغيير خطير وصعب العكس- يمكنك إنشاء snapshot: sudo lxc-snapshot -n C1 التي هي نسخة snapshot باسم «snap0» في مجلد ‎/var/lib/lxcsnaps أو ‎$HOME/.local ‎/share/lxcsnaps، النسخة الثانية ستُسمى «snap1» وهكذا؛ يمكن عرض النسخ الموجودة حاليًا باستخدام الأمر lxc-snapshot -L -n C1، ويمكن أن تُستعاد نسخة snapshot وتمحى حاوية C1 الحالية باستخدام الأمر lxc-snapshot -r snap1 -n C1، وبعد تنفيذ أمر الاستعادة، فستبقى النسخة snap1 موجودةً. تُدعَم snapshots لحاويات btrfs، و lvm، وzfs، و overlayfs؛ إذا استدعي الأمر lxc-snapshot على حاوية تُخزَّن في مجلد، فسيسجل خطأ وستُنشَأ نسخة copy-clone؛ وسبب ذلك أنه لو أنشأ المستخدم نسخة overlayfs snapshot لحاوية تخزن في مجلد، فسينعكس جزء من تغيرات الحاوية الأصلية على نسخة snapshot؛ إذا كنت تريد إنشاء snapshots لحاوية C1 مخزنة في مجلد، فيمكن إنشاء نسخة overlayfs للحاوية C1، ويجب ألّا تلمس C1 بعد ذلك قط، لكن يمكن أن نعدِّل overlayfs وننسخها نسخ snapshots كما نريد، أي: lxc-clone -s -o C1 -n C2 lxc-start -n C2 -d # make some changes lxc-stop -n C2 lxc-snapshot -n C2 lxc-start -n C2 # etc الحاويات العابرة «الحاويات العابرة» (Ephemeral containers) هي حاويات تستخدم لمرة واحدة فقط؛ فليكن لدينا حاوية موجودة مسبقًا باسم C1، فيمكنك إنشاء حاوية عابرة باستخدام: lxc-start-ephemeral -o C1 ستبدأ الحاوية كنسخة snapshot للحاوية C1، وستطبع التعليمات للدخول إلى الحاوية على الطرفية، وستدمر الحاوية العابرة بعد إيقاف التشغيل، راجع صفحة الدليل lxc-start-ephemeral لمزيد من الخيارات. ترجمة -وبتصرف- للمقال Ubuntu Server Guide: LXC.

واحد من أكثر الأشياء المفيدة في ووردبريس ما يسمى بالوسوم الشرطية (Conditional Tags)، حيث ستمكنك من البرمجة بسهولة وفهم الكود الذي تكتبه كأنك تقرأ نص باللغة الإنجليزية. سنقوم في هذا الدرس بدراسة طريقة عمل الوسوم الشرطية مع إيضاح بعض النقاط الخفية والمبهمة مع قائمة بأكثر الوسوم الشرطية المفيدة وسنختم ببعض الأمثلة إن شاء الله. كيف تعمل الوسوم الشرطيةالوسوم الشرطية هي دوال خاصة بووردبريس تقوم بإرجاع قيمة صح أو خطأ (boolean) إعتمادا على معطيات مختلفة. يوجد حوالي 50 وسما شرطيا في ووردبريس، ولذلك سنقوم باختيار أكثرها استعمالا وأكثرها جديرة بالاهتمام وإلا سوف تسبب لنا الكثير من التعقيد. مفيدة()is_single سيتم إرجاع قيمة صحيحة إذا كانت الصفحة الحالية متكونة من تدوينة واحدة فقط من أي نوع ماعدا التدوينة مع المرفقات. ويتم ذلك عن طريق تمرير رقم التدوينة أو عنوانها كمعامل (parameter).()is_page سيتم إرجاع قيمة صحيحة إذا كانت الصفحة معروضة (غير مخفية).()is_singular مشابهة لـ ()is_single، لكنها تعود بقيمة صحيحة إذا تم عرض تدوينة تحتوي على مرفقات، وهي مشابهة لـ ()is_single() || is_page() || is_attachment حيث أن || تعني "أو".()is_archive سيتم إرجاع قيمة صحيحة إذا كانت الصفحة الحالية عبارة عن أرشيف مهما كان نوعها.()is_main_query سيتم إرجاع قيمة صحيحة إذا كان الاستعلام الحالي هو الاستعلام الرئيسي لهذه الصفحة.مبهمة ومخادعة()is_admin سيتم إرجاع قيمة صحيحة إذا كُنت في منطقة الإدارة من موقع ووردبريس، بعض الأشخاص يعتقد أن هذا الوسم لمعرفة هل المستخدم الحالي من المدراء أم لا، وهذا الأمر خاطئ.()is_dynamic_sidebar سيتم إرجاع قيمة صحيحة إذا كان الشريط الجانبي الحالي (ويدجت أو مناطق) لديه أية ودجات مفعلة.()is_home هذا الوسم مربك قليلا، سوف تعتقد للوهلة الأولى أنه لمعرفة هل أنت في الصفحة الرئيسية أم لا مثل http://www.example.com. لكن هذا ليس صحيح لأن هذا الوسم لمعرفة هل أنت في صفحة الرئيسية للتدوينات أم لا لأنه في بعض الأحيان قد تكون الصفحة الرئيسية للموقع ليس هي نفسها للتدوينات.()is_front_page سيتم إرجاع قيمة صحيحة إذا كانت الصفحة التي أنت فيها هي الصفحة الرئيسية سواء أن كانت هي نفسها للتدوينات أو صفحة تابعة للمدونة.قمنا بعرض جزء فقط من الوسوم الشرطية، إذا أردت المزيد يمكنك زيارة القائمة الكاملة. بعض الإستخدامات للوسوم الشرطية في ووردبريسهنالك الكثير من الإستخدامات للوسوم الشرطية وسنقوم الآن باستعراض أشهرها وأكثرها استعمالا. استخدام الوسوم الشرطية في القوالبتستخدم الوسوم الشرطية بكثرة في تطوير القوالب، ففي بعض الأحيان هنالك عنصر يظهر في كل الصفحات لكن هنالك حالات أو صفحات لا تريد أن يظهر بها. على سبيل المثال، لنقل أنك لا تريد أن يظهر التاريخ على الصفحات لكنك تريده أي يظهر على جميع التدوينات، فيمكنك القيام بهذا عن طريق هذه الشِفرة: /* الوسط: داخل ملف single.php */ <?php if ( ! is_page() ): ?> <span class="meta-date"> <?php the_date(); ?> </span> <?php endif; ?>ملاحظة حول الوسوم الشرطية والقالب الهرميإن القالب الهرمي مشابه بالأساس لـشجرة القرار التي يمكنك بناؤها باستعمال الوسوم الشرطية. ويمكنك أيضا وضع كامل القالب في index.php واستخدام هذه الوسوم لعمل ما يعمله القالب الهرمي. في الحقيقة فعل هذا الأمر ليست فكرة فريدة وجيدة، لكن معرفة أن هذا ممكن ومحاولة استعمال الوسوم الشرطية والقالب الهرمي سوف يساعدك على فهم الإثنين معا حسب رأيي. ولفهم هذا الأمر أكثر أنظر لهذا المخطط: إدراج ورقة أنماط خاصة أو ملفات جافا سكريبتفي بعض الأحيان سوف تحتاج إلى صنع صفحة مخصصة في موقعك بها الكثير من التأثيرات و الخصائص، ولتحقيق هذا سوف تحتاج إلى الكثير من التأثيرات والسكريبات والتي يجب أن تكون في صفحة واحدة فقط لأن تحميل كل هذه التأثيرات والسكريبات في جميع صفحات الموقع سوف يزيد من حجمه ويجعله أبطأ، ويمكن القيام بذلك عن طريق الوسوم الشرطية كما في المثال: add_action( 'wp_enqueue_scripts', 'wpshout_special_page' ); function wpshout_special_page() { if ( is_page( 'special-page' ) ) { wp_enqueue_script( 'special_js', get_stylesheet_directory_uri().'/special.js' ); wp_enqueue_style( 'special_css', get_stylesheet_directory_uri().'/special.css' ); } }هنا قمنا بعمل إدراج بشكل عادي، لكننا قمنا بربط عملية الإدراج بشرط: إذا لم تكن الصفحة الحالية "صفحتنا الخاصة"، التأثيرات وأوراق الأنماط و السكريبتات لن يتم تحميلها. لاحظ أن ()is_page ستقوم باختبارين: الأول للتأكد من أن المشاركة من نوع صفحة.والثاني هل لصفحة special-page اسم للطيف، معناها هل هي slug ؟ ويقصد بها أن الرابط يحتوي على عنوان الصفحة مثلا في هذا الرابط، سيكون slug هو wordpress-203. ولاختبار هذا قمنا بتمرير 'special-page' إلى ()is_page كمعامل.إن التأكد من هذين الشرطين يجعلنا نرفض وضع السكريبتات وأوراق الأنماط سوى لصفحة واحدة مخصصة. ()is_admin يمكن استخدامه أيضا فهو حالة أخرى حيث تحتاج الإضافات للقيام بعمليات اختبار مماثلة. ملاحظة عن الوسوم الشرطية والحالة العامةالوسوم الشرطية تستطيع الوصول إلى الحالة العامة (Global State) لووردبريس (طريقة عمل الأشياء في الخلفية) وهذه الحالة يجب أن يتم وضعها قبل أن تستطيع استخدامها، لكن لا يمكنك الاعتماد كليا على استعمال الوسوم الشرطية حتى تتأكد أن عملية المصنع الخاصة بووردبريس قد فعّلت الإجراء (action) المسمى posts_selection. (هنا لائحة الكاملة بالإجراءات المفعلة من قبل ووردبريس وترتيبها). هذا يعني أن بعض الإجراءات التي يتم استخدامها عادة لا يمكن استخدامها بالتوازي مع الوسوم الشرطية، ومن أشهر هذه الإجراءات: setup_theme، init، register_sidebar و pre_get_posts. ومع ذلك، حوالي نصف الخُطّافات (hooks) وجميع القوالب تعمل جيدا بعد أن يتم تحميل الوسوم الخاصة بالقوالب، وسوف تكون مفيدة جدا هناك. في أغلب الوقت لن تكون هذه مشكلة لك، لكنه من الجيدة أن تعرف ما يمكنك فعله وما لا يمكنك، فهذا الأمر لن يزعجك سوى لمرة واحدة في كل 50 مرة تستخدم فيها الوسوم الشرطية. الوسوم الشرطية: تعلمها، استخدمها، وأحبهاإن الدوال الشرطية لووردبريس واضحة للغاية و مفيدة جدا و تستعمل في كل مكان، وآمل أن تستخدمها وأن تكون مفيدة لك في جميع الحالات عندما تحتاجها و تتحدث مع نفسك مثل : "نعم، أريد فعل هذا لكن ليس في هذه الحالة ..." أو "لكن أريدها فقط أن تظهر عندما ..." وغيرها، وسوف تبرز لك قوة ووردبريس كما هي. ترجمة وبتصرف للمقال: WordPress’s Conditional Tags لصاحبه David Hayes.

في هذا الدرس سنتعلم كيفية إنشاء القوالب في Outlook واستخدامها بدلا من إنشاء نفس الرسائل، دعوات الاجتماعات، المهام، أو جهات الاتصالات المتكررة أو المتشابهة. كما سنتعلم كيفية تنسيق خلفيات الرسائل بإضافة نقوش أو ألوان عن طريق تطبيق القرطاسية Stationery أو النسق Themes على الرسائل. 0 استخدام القوالب إذا كنت ترسل نفس البريد الإلكتروني مرارا وتكرارا إلى عدد من الأشخاص، يمكنك توفير الكثير من الوقت والتخلص من هذا التكرار الممل بإنشاء قالب Outlook واستخدامه في كل مرة. يتم إنشاء القالب ببساطة كإنشاء رسالة جديدة. من تبويب الصفحة الرئيسية Home انقر فوق بريد إلكتروني جديد New Email: في نافذة الرسالة الجديد قم بكتابة النص، إرفاق الملف، أو إضافة الصور التي تتكرر بشكل مستمر. يمكنك أيضا كتابة عنوان الرسالة وعناوين البريد الإلكتروني للمستلمين. لكن يمكنك إضافة عناوين البريد الإلكتروني لاحقا عند إرسال الرسالة. وكذلك يمكنك كتابة أية ملاحظة أخرى ترغب في تذكير نفسك بها عند إرسال الرسالة: بعد الانتهاء من إضافة جميع العناصر التي تتكرر في كل رسالة اذهب إلى: ملف File > حفظ باسم Save As ثم اختر Outlook Template من خيارات Save as type. قم بتسمية القالب ولا تغير مجلد الحفظ، إذ يُفضل حفظ قوالب Outlook جميعها في هذا المجلد (Microsoft> Templates): قم بإغلاق نافذة الرسالة الجديد، وانقر No عندما يسألك البرنامج إذا كنت ترغب في حفظ الرسالة كمسودة. لأننا قمنا بحفظ القالب ولا حاجة لنا إلى حفظ الرسالة. في المرة القادمة التي ترغب فيها بإرسال تلك الرسالة المتكررة استخدم القالب بدلا من إنشاء بريد إلكتروني جديد. انقر فوق زر : New Items > More Items > Choose Form من خيارات Look in اختر User Templates in File System، حدد القالب الذي تريد استخدامه وانقر Open: عند فتح القالب قم بإجراء التغييرات المرغوبة وحذف الملاحظات التي كتبتها لنفسك (لن يتغير القالب في هذه الحالة فقط الرسالة التي تعمل عليها حاليا)، ثم ادخل عناوين البريد الإلكتروني للمستلم/المستلمين إن لم تكن قد أدخلتها مسبقا عند إنشاء القالب. عند الانتهاء قم بإرسال الرسالة من زر Send. وبهذه الطريقة يمكنك استخدام قالب الرسالة متى تشاء وتوفر الكثير من الوقت. بإمكانك أيضا إنشاء قوالب للتقاويم بنفس الطريقة. قم بإنشاء قالب اجتماع إذا كان لديك اجتماع بجدول محدد يتكرر بمواعيد غير محددة، حيث لا تستطيع في هذه الحالة استخدام خاصية Recurrence لأنّ مواعيد التكرار غير محددة. اذهب أولا إلى نافذة التقاويم: من تبويب الصفحة الرئيسية قم بإضافة اجتماع جديد New Meeting: في نافذة الاجتماع الجديد، قم بإضافة عناوين البريد الإلكتروني للأشخاص الذين يحضرون الاجتماع في كل مرة، عنوان الاجتماع، موقعه، وبعض الملاحظات إن وجدت. أما بالنسبة لتواريخ البدء والانتهاء فبإمكانك عدم تغييرها لحين وقت إرسال الدعوة: عند الانتهاء من تعديل القالب، اذهب إلى: File > Save As واختر Outlook Template من خيارات Save as type. قم بتسمية القالب ولا تغير مجلد الحفظ: اغلق نافذة دعوة الاجتماع ولا تقم بحفظه فلا حاجة إليه. سيتم حفظ القالب وستتمكن من استخدامه كلما رغبت في إرسال دعوة اجتماع جديدة. لإرسال دعوة اجتماع مستخدما القالب انقر: New Items > More Items > Choose Form من خيارات Look in اختر User Templates in File System، حدد قالب الاجتماع الذي تريد استخدامه وانقر Open: عند فتح القالب قم بتحديد وقت البدء Start Time ووقت الانتهاء End Time، وأجر التغييرات المرغوبة عليه. عند الانتهاء انقر زر Send لإرسال الدعوة إلى الأشخاص المحددين. يمكنك اتباع نفس الطريقة لإنشاء قوالب جهات اتصال أو قوالب مهام. في حالة جهات الاتصال، يمكنك اختصار الخطوات والاستفادة من خاصية Contact from the Same Company. استخدم هذا الخيار إذا كانت لديك جهة اتصال سابقة من شركة ما، وترغب في إضافة جهة اتصال من نفس الشركة. في هذه الحالة يمكنك استخدام معلومات جهة الاتصال الأصلية، كاسم الشركة، موقعها الإلكتروني، رقم الهاتف، إلخ دون الحاجة إلى إعادة إدخالها ثم إضافة بقية المعلومات الخاصة بجهة الاتصال الجديدة. حدّد جهة الاتصال التي تريد استخدامها كمصدر (في هذا المثال سأحدد Namida لأنني أرغب في استخدام بعض المعلومات الخاصة بجهة الاتصال هذه لغرض التوضيح فقط)، من خيارات New Items اختر Contact from the Same Company: ستُفتح نافذة جهة اتصال جديدة، وستلاحظ وجود معلومات الشركة الخاصة بجهة الاتصال الأصلية مسبقا، قم بإضافة اسم جهة الاتصال الجديدة وأية معلومات أخرى، وانقر Save & Close لحفظ جهة الاتصال الجديدة وإغلاق النافذة: استخدام القرطاسية في الرسائل يُقصد بالقرطاسية مجموعة من الخلفيات والنقوش، بالإضافة إلى عناصر التصميم الأخرى كالخطوط، الألوان والتأثيرات، معرّفة في البرنامج وجاهزة لاستخدامها في تخصيص رسائل البريد الإلكتروني ذات تنسيق HTML لجعل الرسائل أكثر جاذبية وإثارة لاهتمام القارئ. لاستخدام القرطاسية تأكد أولا من أن البرنامج معد لإنشاء البريد الإلكتروني بتنسيق HTML. اذهب إلى: File > Options > Mail واختر HTML من خيارات Compose messages in this format: ولتطبيق القرطاسية في جميع رسائل البريد الإلكتروني التي تنشئها، انقر زر Stationery and Fonts من نفس مربع الحوار Outlook Options: في مربع الحوار Signatures and Stationery انقر Theme من تبويب Personal Stationery: من قائمة النسق والقرطاسية تستطيع اختيار النمط المرغوب فيه. لاحظ أن القرطاسية توفر نقوش وألوان لخلفية للرسالة، بينما توفر النسق themes مجموعة من تنسيقات الخطوط، التعدادات النقطية، الروابط التشعبية، بالإضافية إلى النقوش والألوان. بعد اختيار النسق/القرطاسية انقر موافق، وسيتم تطبيقه على جميع الرسائل الجديد التي تقوم بإنشائها. للعودة إلى الخيارات الافتراضية اتبع نفس الخطوات السابقة واختر No Theme من مربع الحوار Theme or Stationary: إذا كنت ترغب في تطبيق قرطاسية على رسالة واحدة محددة (وليس على جميع الرسائل كما شرحنا في الفقرة السابقة)، انقر New Items بدلا من: New Email > E-mail Message Using > More Stationery: اختر النسق/القرطاسية المرغوبة وانقر OK وسيتم تطبيقها على خلفية الرسالة الجديدة. اكتب عنوان ونص الرسالة وعنوان البريد الإلكتروني للمستلم ثم أرسلها. بعد الإرسال سيعود البرنامج إلى استخدام النسق الافتراضي في الرسائل.

أنشأنا في الدرس السابق مسارات تكتفي بكتابة عبارات في صفحة الويب. سننشئ في هذا الدرس عروضا لتقديمها إلى الزوار حسب الرابط الذي يختارونه؛ نستخدم لهذا الغرض قوالب Blade. هذا الدرس جزء من سلسلة تعلم Laravel والتي تنتهج مبدأ "أفضل وسيلة للتعلم هي الممارسة"، حيث ستكون ممارستنا عبارة عن إنشاء تطبيق ويب للتسوق مع ميزة سلة المشتريات. يتكون فهرس السلسلة من التالي: مدخل إلى Laravel 5.تثبيت Laravel وإعداده على كلّ من Windows وUbuntu.أساسيات بناء تطبيق باستخدام Laravel.إنشاء روابط محسنة لمحركات البحث (SEO) في إطار عمل Laravel.نظام Blade للقوالب. (هذا الدرس)تهجير قواعد البيانات في Laravel.استخدام Eloquent ORM لإدخال البيانات في قاعدة البيانات، تحديثها أو حذفها.إنشاء سلة مشتريات في Laravel.الاستيثاق في Laravel.إنشاء واجهة لبرمجة التطبيقات API في Laravel.إنشاء مدوّنة باستخدام Laravel.استخدام AngularJS واجهةً أمامية Front end لتطبيق Laravel.الدوّال المساعدة المخصّصة في Laravel.استخدام مكتبة Faker في تطبيق Laravel لتوليد بيانات وهمية قصدَ الاختبار. تعرِّف القوالب Templates إطارا عامًّا للعرض، يحدّد أجزاءه والعناصر التي تكوّنه. Blade هو نظام إدارة القوالب والتعامل معها المضمَّن في Laravel. نحصُل بنهاية هذا الدرس على الواجهة التالية. يشمل الدرس المواضيع التالية: توريث القالب.المخطّط الرئيس Master layout.تمديد المخطّط الرئيس.عرض المتغيرات.التعبيرات الشرطية Conditional statements في Blade.الحلقات التكراراية Loops في Blade.تنفيذ تعليمات PHP في Blade,تنتهي جميع ملفات العروض في Blade بالامتداد blade.php. توريث القوالبيمكن تعريف توريث القوالب بأنه تلك الخاصيّة التي تسمح بجمع عناصر مشتركة بين عدة عروض ضمن عرض تعيد استخدامه عند الحاجة مع إضافة العناصر الخاصة بالصفحة؛ مما يجنب تكرار العناصر المشتركة في كلّ مرة. المخطط الرئيستُجمع العناصر المشتركة في عرض يُطلَق عليه المخطّط الرئيس تعيد العروض الأخرى استخدامه وتضيف إليه العناصر الخاصة بها. سننشئ في ما يلي مخطّطا رئيسا نضمنه عناصر مشتركة بين العروض.ننشئ مجلدا جديدا باسم layouts على المسار resources/views/. ثم ننشئ ملفا باسم master.blade.php ضمن المجلد layouts.نضيف الشفرة التالية إلى الملف master.blade.php:<html> <head> <title>@yield('title')</title> </head> <body dir="rtl"> @section('sidebar') هنا يوجد محتوى المقطع sidebar في المخطط الرئيس. @show <div class="container"> @yield('content') </div> </body> </html>قالب Blade عبارة عن وسوم HTML مع تعليمات خاصة بنظام القوالب. يستخدم القالب أعلاه ثلاث تعليمات هي section ،@yield@ و show@. تُستخدم التعليمة section@ لتعريف مقطع (عنصر) من القالب.بينما تستخدم التعليمة yield@ لعرض محتوى مقطع معطى (مقطع باسم title في أول استخدام للتعليمة yield@ في المخطّط السابق).أما التعليمة show@ فتستخدم لعرض محتوى مقطع.تمديد المخطط الرئيسننشئ الآن قالبا يمدّد القالب الرئيس السابق. أنشئ ملفا باسم page.blade.php في المسار resources/views وأضف إليه الشفرة التالية: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <p>جسم الصفحة.</p> @endsectionتشير التعليمة ('extends('layouts.master إلى أننا في صدد تمديد المخطّط الرئيس master.blade.php الموجود ضمن المجلد layouts.تعيّن التعليمة ('section('title', 'Page Title قيمة المقطع title المعرّف في المخطّط الرئيس. ثم نعرّف مقطع جديدا باسم sidebar ضمن العرض page. داخل المقطع sidebar نطبع محتوى المقطع الذي يحمل نفس الاسم في المخطّط الرئيس باستخدام التعليمة parent@، نضيف فقرة HTML باستخدام الوسم <p>...</p> ثم ننهي المقطع sidebar بالتعليمة endsection@.تعرّف التعليمة ('section('content محتوى المقطع content وهو في هذا المثال الفقرة <p>جسم الصفحة.</p>.في المخطط الرئيس توجد ثلاثة مقاطع وهي، حسب ترتيب الاستخدام، sidebar ،title و content. بالنسبة للمقطعين title و content فقد اكتفينا بتحديد أماكنهما (التعليمة yield@)؛ أما المقطع sidebar فقد عرفنا محتواه وعرضناه (التعليمتان section@ و show@). في القالب page أعدنا استخدام المخطّط الرئيس ثم أعطينا قيمتي المقطعين title و content المعرّفين سابقا. بالنسبة للمقطع sidebar فقد أعدنا تعريفه مع إعادة استخدام محتوى المقطع المماثل له في الاسم ضمن القالب الرئيس (تعليمة parent@) وإضافة فقرة نصية أخرى. سنضيف مسارا خاصًّا لتجربة عمل نظام القوالب. افتح ملف المسارات routes.php وأضف المسار التالي: Route::get('blade', function () { return view('page'); });احفظ التعديلات. الآن أدخل الرابط في المتصفح: http://larashop.dev/bladeستحصل على الصفحة التالية: استخدام متغيرات في قوالب bladeنعرّف متغيرا باسم name ونمرره إلى قالب blade. افتح ملف المسارات وغيره بحيث يصبح على النحو التالي: Route::get('blade', function () { return view('page',array('name' => 'حسوب')); });احفظ التعديلات. نحدّث القالب page.blade.php لإظهار المتغير الذي يمرره المسار: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> @endsectionتستخدم التعليمة {{name$}} لطباعة قيمة المتغير name$. احفظ التعديلات ثم أعد تحميل الصفحة http://larashop.dev/blade. ستلاحظ وجود عنوان h2 جديد هو حسوب التي هي قيمة المتغير الممرًّر لقالب page.blade.php. التعبيرات الشرطية في Bladeيدعم نظام Blade التعبيرات الشرطية التي تحدّد ما يُعرض حسب شرط معرَّف مسبقا. سنمرر متغيرا إلى القالب ثم نختبر قيمته (الشرط) وحسب نتيجة الاختبار يكون العرض. افتح ملف routes.php وعدل المسار بحيث يصبح ما يلي: Route::get('blade', function () { return view('page',array('name' => 'حسوب','day' => 'Friday')); });أضفنا هنا متغيرا جديد باسم day وأعطيناه القيمة Friday. احفظ التعديلات. افتح ملف القالب وعدله على النحو التالي: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> <h2>تعبير if الشرطي</h2> @if ($day == 'Friday') <p>إنه يوم الجمعة</p> @else <p>اليوم ليس يوم الجمعة</p> @endif @endsectionإذا كانت قيمة المتغير day هي Friday نعرض الجملة <p>إنه يوم الجمعة</p> وإلا فإن الفقرة المعروضة تصبح <p>اليوم ليس يوم الجمعة</p>. احفظ التعديلات ثم أعد تنزيل الصفحة ولاحظ الفرق. الحلقات التكرارية في Bladeيدعم Blade كل الحلقات التكرارية التي يدعمها PHP. سنرى مثالا لاستخدام الحلقة التكرارية foreach لعرض محتويات مصفوفة Array في قالب Blade. عدل ملف المسارات routes.php على النحو التالي: Route::get('blade', function () { $foods = array('Barbecue','Couscous','Fish'); return view('page',array('name' => 'حسوب', 'day' => 'Friday', 'foods' => $foods)); });عرّفنا مصفوفة تحوي ثلاثة عناصر ومررناها إلى قالب Blade. احفظ التعديلات ثم افتح ملف القالب وعدّله على النحو التالي: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> <h2>تعبير if الشرطي</h2> @if ($day == 'Friday') <p>إنه يوم الجمعة</p> @else <p>اليوم ليس يوم الجمعة</p> @endif <h2>حلقة foreach التكرارية</h2> @foreach ($foods as $food) {{$food}} <br> @endforeach @endsectionاحفظ التعديلات ثم أعد تحميل الصفحة ولاحظ طباعة محتوى المصفوفة. تضمين شفرة PHP في قالب Bladeافتح ملف القالب وعدّله بإضافة سطر يستخدم إحدى دوالّ PHP (اخترنا الدالة date). يصبح ملف القالب كما يلي: @extends('layouts.master') @section('title', 'عنوان الصفحة') @section('sidebar') @parent <p>هذا المحتوى ملحق بمحتوى المقطع sidebar الموجود في المخطط الرئيس</p> @endsection @section('content') <h2>{{$name}}</h2> <p>جسم الصفحة</p> <h2>تعبير if الشرطي</h2> @if ($day == 'Friday') <p>إنه يوم الجمعة</p> @else <p>اليوم ليس يوم الجمعة</p> @endif <h2>حلقة Loop التكرارية</h2> @foreach ($foods as $food) {{$food}} <br> @endforeach <h2>شفرة PHP</h2> <p>تاريخ اليوم {{date(' D M, Y')}}</p> @endsectionوضعنا دالة PHP داخل معكوفين مزدوجين لتنفيذها. أعد تنزيل الصفحة http://laravel.dev/blade بعد حفظ التعديلات. العروض المكونة لمشروع Larashopذكرنا في بداية السلسلة أننا نهدف إلى إنشاء موقع للتسوق الإلكتروني. سنستخدم ما تعلمناه في هذا الدرس والدروس السابقة لبناء اللبنة الأولى من هذا المشروع وهي الجانب المرئي. لإعطاء وجه لائق لمشروعنا بحثنا عن تصميم HTML جاهز ووجدنا أن قالب Eshopper من موقع shapebootstrap.net مناسب لما نريد. الخطوة التالية للحصول على تصميم HTML هي تحويله إلى قالب Blade يعمل مع Laravel. سنبدأ أولا بمحتوى الملف المرفق وكيفية استخدامه للحصول على واجهة الموقع المعروضة في أول الدرس، ثم نشرح بعد ذلك تعليمات Blade التي لم نتطرق إليها حتى الآن. محتوى الملف المرفقيحوي الملف المرفق: عروض المشروع larashop.ملف المتحكم Front الذي حدثناه ليحمّل عروض المشروع.ملف المسارات.الموارد المستخدمة في القالب: ملفات CSS، الصور، ملفات Js والخطوط.العروضيحوي المشروع العروض التالية: layout: وهو المخطط الرئيس ويوجد في المجلد الفرعي layouts.sidebar: وهو عرض مشترك بين صفحاتٍ عدة، يوجد في مجلد فرعي باسم shared.blog: صفحة المدونة.blog_post: صفحة منشور على المدونة.cart: صفحة سلة المشتريات.checkout: صفحة الدفع.contact_us: صفحة الاتصال.home: الصفحة الرئيسية.login: صفحة تسجيل الدخول.products: صفحة المنتجات.product_details: تفاصيل منتج.يجب أن توضع العروض في المجلد resources/views. تبدو بنية هذا المجلد كالتالي بعد إضافة العروض إليها. المتحكم Front وملف المساراتأنشأنا في الدرس السابق متحكم Front لكنه يكتفي بعرض نص في المتصفح. سنحتاج لتعديله ليحمِّل العروض. عدّلنا قليلا على ملف المسارات routes.php لتعريف مسار لكل تصنيف أو علامة تجارية. مجلد publicيحوي الموارد (صور، css، js) التي تحتاجها واجهة الموقع للعمل. يجب وضع هذه الموارد في مجلد public في المشروع. ملحوظة: تأكد بعد نقل الملفات من المرفق إلى أماكنها في المشروع من أن الأذون ما زالت على الحال التي ضبطناها بها في درس الإعداد (لينكس). الآن وبعد التأكد من نقل الملفات من المرفق إلى أماكنها الصحيحة، اذهب إلى الصفحة الرئيسية http://larashop.dev وستظهر واجهة الموقع. نأخذ وقتا لشرح المشروع. تحويل صفحات HTML إلى قالب Bladeقوالب Blade هي، كما رأينا، وسوم HTML مع تعليمات خاصّة بنظام القوالب؛ لذا نحافظ على البنية العاملة لملفات HTML المكوِّنة للموقع مع إجراء تغييرين أساسيين: جمع العناصر المشتركة بين مختلف الصفحات ضمن صفحة خاصة.إبدال الروابط في صفحة HTML بتعليمات Blade.يُترجَم تحويل صفحات HTML إلى قوالب Blade بالخطوات التالية: إنشاء مخطّط رئيس تُمدده جميع الصفحات. يحوي المخطط الرئيس العناصر المشتركة بين الصفحات.إنشاء صفحة (عرض) لكل مسار من المسارات المعرَّفة في الدرس السابق.تحديث المتحكم Front.php لتحميل العروض.إضافة الموارد (الصور، ملفات css وjs) إلى مجلد public في تطبيق Laravel.يحوي الملف المرفق بهذا المقال عروض Blade الناتجة عن تحويل صفحات HTML إلى قوالب Blade، إضافة إلى ملف المسارات الخاص بمشروع Larahop، المتحكم Front.php والموارد مثل الصور وملفات css (مجلد public). المخطط الرئيسأنشأنا ملفا لمخطط رئيس باسم layout.blade.php على المسار resources/views/layouts. في هذا الملف توجد وسوم HTML مع تعليمات Blade؛ بعضها لم نتطرق له بعد: تعليمة {{url}}:{{url('products')}}تنشئ التعليمة {{url}} رابط URL بالنسبة للمجلدpublic. في المثال أعلاه فإن الرابط الذي ترجعه التعليمة هو http://larashop.dev/products؛ وهو الرابط الذي تتعامل معه دالة المسار products/. لإنشاء رابط إلى الصفحة الرئيسية فالتعليمة تكون: {{url('')}}نأخذ أيضا المثال التالي الموجود في المخطط الرئيس: <li><a href="{{url('products')}}" {{$page == 'products' ? 'class=active' : ''}}>Products</a></li>نلاحظ استخدام التعليمة url لإعطاء قيمة الرابط ضمن وسم <a>. في نفس السطر توجد تعليمة تشبه تعليمةً مألوفة في PHP وهي {{$page == 'products' ? 'class=active' : ''}}هنا نتحقق من قيمة المتغير page فإذا كانت تساوي products نضيف صنف CSS يسمّى active إلى الوسم. تعليمة {{asset}}:{{asset('css/bootstrap.min.css')}}تُرجع الدالة asset مسار مجلد public (أي عنوان الموقع) وتلحق به المعطى الممرَّر إليها. في السطر أعلاه ترجِع الدالةُ القيمةَ http://larashop.dev/css/bootstrap.min.css. تُستخدم هذه الدالة كثيرا لإضافة ملفات CSS، الصور وملفات JavaScript كما في الأمثلة التالية المأخدوذة من المخطط الرئيس. <!-- CSS --> <link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet"> <!-- صورة --> <img src="{{asset('images/home/iframe1.png')}}" alt="" /> <!-- JavaScript --> <script src="{{asset('js/jquery.js')}}"></script>يمكن من خلال المعطيات الممرَّرة إلى الدالة asset في الأمثلة أعلاه اسنتاجُ أننا نستخدم مجلدًّا فرعيا في public لكل نوع من الموارد (CSS، الصور، JS إضافة للخطوط fonts). إن نظرت جيدا في ملف المخطط الرئيس فستميز ثلاثة أجزاء فارقة: الجزء الأول ويحوي الوسوم المؤسِّسة للجزء الأعلى المشترك بين مختلف صفحات الموقع، ويحوي ترويسة الموقع وقائمته الرئيسية.الجزء الثاني تمثله التعليمة ('yield('content@ وتلعب دور ماسك مكان Place holder. ستحدّد العروض الأخرى الممدّدة للمخطط الرئيس محتوى ماسك المكان.الجزء الثالث وبه التذييل المشترك بين صفحات الموقع.إن فهمت جيدا آلية عمل نظام القواعد فستعرف أن الجزأين الأول والثالث لا يتغيران بتغير الصفحة التي يطلبها الزائر. ما يتغير هو فقط الجزء الثاني الذي يعبئه نظام القوالب بمحتوى مختلف حسب الصفحة. الصفحات المشتقةننتقل الآن للعروض الخاصة بكل صفحة. يمدّد كل عرض المخطّط الرئيس. في ما يلي المنحى العام للعروض: @extends('layouts.layout') @section('content') <!--وسوم HTML --> @include('shared.sidebar') <!--وسوم HTML --> @endsectionيمدد العرض المخطط الرئيس بتنفيذ التعليمة التالية:@extends('layouts.layout')يعرّف مقطعا باسم content:@section('content')يُحمَّل محتوى المقطع content في المكان المعرّف بنفس الاسم في المخطّط الرئيس. ينتهي المقطع عند التعليمة endsection@. نضمِّن محتوى العرض sidebar الموجود في المجلد resources/views/shared:@include('shared.sidebar')تستخدم التعليمة include لتحميل محتوى عرض ضمن آخر. عرض sidebar الذي يمثل شريطا جانبيا للموقع موجود في أغلب الصفحات. نضيف وسوم HTML المأخوذة من قالب E-Shopper لتكوين الصفحة.تحديث المتحكم Frontنحدّث المتحكم Front.php ليحمل العروض بدلا من الاكتفاء بطباعة نص في الصفحة. يصبح محتوى المتحكم بعد التحديث على النحو التالي. تحمل كل دالّة العرض الموافق لها حسب جدول الدرس السابق. <?php namespace App\Http\Controllers; use App\Http\Controllers\Controller; class Front extends Controller { public function index() { return view('home', array('page' => 'home')); } public function products() { return view('products', array('page' => 'products')); } public function product_details($id) { return view('product_details', array('page' => 'products')); } public function product_categories($name) { return view('products', array('page' => 'products')); } public function product_brands($name, $category = null) { return view('products', array('page' => 'products')); } public function blog() { return view('blog', array('page' => 'blog')); } public function blog_post($id) { return view('blog_post', array('page' => 'blog')); } public function contact_us() { return view('contact_us', array('page' => 'contact_us')); } public function login() { return view('login', array('page' => 'home')); } public function logout() { return view('login', array('page' => 'home')); } public function cart() { return view('cart', array('page' => 'home')); } public function checkout() { return view('checkout', array('page' => 'home')); } public function search($query) { return view('products', array('page' => 'products')); } } جرب تصفح الموقع والتنقل بين صفحاته. إذا اتبعت خطوات الدرس على النحو المشروع فستكون قادرا على التنقل بين صفحات الموقع دون مشاكل. يمكنك أيضا فتح الشفرة المصدرية لصفحات موقع الويب ومقارنتها بما كتبناه في قوالب Blade. خاتمةنحصل بنهاية الدرس على تصميم أنيق لصفحات الموقع، استخدمنا لإنشائه Blade الذي يوفر نظاما فعّالا لكتابة قوالب العروض في Laravel مما يتيح تجنب تكرار العناصر المشتركة. بانتهاء هذا الدرس نكون قد أنهينا أساس جزء العرض من بنية MVC. الدروس التالية من السلسلة تتناول بقية الأجزاء. ترجمة -وبتصرّف- لمقال Laravel 5 Blade Template لصاحبه Rodrick Kazembe.

في الدرس السابق من هذه السلسلة، تعرفنا على بعض مميزات قالب s_ وإستعرضنا مجلدات القالب وبعض الملفات الأساسية، وفي هذا الدرس سنكمل الإطلاع على الملفات الأساسية وسنحاول شرح مهمة بعض الشيفرات والدوال البرمجية بالإضافة الى الإشارة الى بعض الممارسات الجيدة في تطوير قوالب ووردبريس والتي يمكن أن نتعلمها من قالب underscores. ملفات الوظائف والأحداث والمفلتراتنقصد بهذه الملفات ملف functions.php والملفات التي يتم تضمينها من خلاله، حيث تحتوي هذه الملفات في قالب underscores على بعض الشيفرات المهمة التي يتكرر استخدامها في كل قالب ووردبريس تقريبا (أحيانا مع تعديلات بسيطة عليها) وبالطبع يمكنك إضافة المزيد من الشيفرات أو التخلي عن بعضها على حسب القالب الذي تقوم بتطويره. ملف functions.phpالدالة hsb_setupكما تلاحظ فإن أول الدوال الموجودة في ملف functions.php دالة تأخذ الاسم اللطيف للقالب متبوعا بكلمة setup وبالمناسبة هذه من الممارسات المهمة جدا في تطوير قوالب وإضافات ووردبريس أي أن تقوم ببدء تسمية الدوال الخاصة بالقالب بكلمة مميزة (عادة الاسم اللطيف للقالب) حتى لا تختلط مع اسم أحد الدوال الموجودة في ووردبريس أو أي من الإضافات في الموقع. في حالتنا هنا سنستخدم hsb كاسم لطيف للقالب وهو اختصار لكلمة Hsoub بالتالي فإن اسم الدالة سيكون كالاتي function hsb_setup()قبل أن ندخل في شرح مهمة هذه الدالة قد تكون لاحظت السطر البرمجي السابق لها (تجاهل التعليقات البرمجية) والذي هو عبارة عن عبارة شرطية if statement تأخذ الصورة if ( ! function_exists( 'hsb_setup' ) ) : ويتم إنهاء هذه العبارة الشرطية بعد قوس إغلاق الدالة مباشرة، وهذه أيضا من الممارسات الجيدة حيث أنه بهذه الطريقة يتم التأكد أولا من وجود تعريف الدالة في مكان أخر وفي حالة وجودها يتم تجاهل هذا التعريف وهذا بالطبع يتيح لك إعادة تعريف الدالة من خلال القالب الأبن أو الإضافات وهذا يزيد من دعم القالب لخاصية القالب الإبن. الان لنعود لمهمة هذه الدالة ويمكن أن نقول أنها مسؤولة من ثلاثة أمور: تحميل دعم القالب للترجمة من خلال استخدام الدالة load_theme_textdomain.تسجيل قوائم القالب والتي ستظهر للمستخدم عند إنشائه قائمة جديدة في مكان مواضع القالب ويتم تسجيلها من خلال الدالة register_nav_menus، ويأتي قالب underscores مسجلا لقائمة واحدة فقط وهي القائمة الرئيسية، ويمكنك بالطبع إضافة المزيد على حسب عدد القوائم في قالبك.تعريف خصائص ووردبريس التي يدعمها القالب، أو ببساطة إضافة خصائص القالب من خلال الدالة add_theme_support ومنها على سبيل المثال الصورة البارزة وخصائص أخرى يمكنك الإطلاع عليها في صفحة توثيق الدالة.كما تلاحظ يتم إضافة هذه الدالة الى الحدث after_setup_theme وهو الحدث المناسب معها، وهذه ميزة أخرى يمنحك لها قالب underscores وهي التعرف على الأحداث المناسبة لمختلف الوظائف التي تحتاجها في القالب. الدالة hsb_widgets_initهذه الدالة مسؤولة عن تسجيل مواضع الودجات في القالب، فمثلا قد يحتوي القالب على موضوع واحد وهو موضع الشريط الجانبي الأيسر وقد يحتوي بالإضافة الى ذلك الى مواضع للودجات في الفوتر أو غيره مثلا، وكل هذه المواضع يتم تسجيلها داخل هذه الدالة من خلال الدالة register_sidebar، وبعد ذلك يتم إضافة هذه الدالة الى الحدث widgets_init. الدالة hsb_scriptsوتستخدم هذه الدالة لصف ملفات CSS وملفات الجافا اسكربت ويمكنك معرفة المزيد عن هذا الامر من خلال هذا المقال. كما تلاحظ في نهاية هذا الملف يتم تضمين خمسة ملفات تحتوي على بعض الوظائف ومقسمة على حسب مهامها وهي ما سنتطلع علي تفاصيله في الفقرات القادمة ملف custom-header.phpيوفر لك ميزة ووردبريس تمكين المستخدم من صورة ترويسة القالب من لوحة التحكم وتجدها تحت قائمة المظهر في حالة كان القالب يدعمها، وقالب s_ يأتي افتراضيا داعم لهذه الخاصية حيث يمكنك استدعاء صورة الترويسة التي اختارها المستخدم لعرضها في أي مكان في القالب من خلال هذه الشيفرة (الموجودة في التعليقات أعلى هذا الملف) <?php if ( get_header_image() ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt=""> </a> <?php endif; // End header image check. ?> ويحتوي هذا الملف على الدوال اللازمة لجعل القالب يدعم الترويسة وقد يفيدك الاطلاع على هذه الدوال وطريقة عملها لتطبيق هذه الميزة كما يمكنك تعديل بعض القيم الافتراضية في حالة أردت ذلك بالإضافة لإضافة التنسيق الخاص بصورة الترويسة وكذلك عنوان ووصف المدونة. ملف template-tags.phpوسوم القالب Template Tags أو يمكن تسميتها بدوال القالب هي مجموعة من الدوال يوفرها ووردبريس لمطوري القوالب ويتم إستخدامها عادة في ملفات القالب لعرض معلومات الموقع والمقالات مثل عنوان المقال و إسم المقال وكاتب المقال ورابط الموقع وغيرها من البيانات التي تحتاج عادة لعرضها في القالب وهذه الدوال تتيح لك عرض مثل البيانات فقط بكتابة إسم الدالة، فبدلا عن الإتصال بقاعدة البيانات وجلب البيانات التي تريدها فإن الدالة (وسم القالب) تقوم بهذه العمليات نيابة عنك وترجع لك المحتويات. هذا الملف يوفر لك مجموعة إضافية من دوال القالب التي تعرض بعض البيانات التي تحتاجها عادة في القالب، وبدلا من كتابة الشيفرة البرمجية لجلب هذه البيانات بداخل ملفات القالب يتم كتابتها في هذه الدوال وتستطيع مناداة هذه الدوال في ملفات القالب وبالتالي تحافظ على شيفرة برمجية نظيفة ومقروءة في ملفات القالب بالإضافة لإمكانية جلب البيانات في اكثر من ملف فقط بإستدعاء هذه الدالة. من الدوال الموجودة في هذا الملف الدالة the_posts_navigation وتستخدم لعرض صفحة المقالات السابقة وصفحة المقالات التالية في صفحة الأرشيف (صفحة عرض المقالات، وصفحة التصنيف وغيرها من الصفحات التي تعرض مجموعة من المقالات).الدالة the_post_navigation وتستخدم لعرض المقال السابق والتالي للمقال الحالي (في صفحة المقال الحالي).الدالة hsb_posted_on تستخدم لعرض تاريخ وكاتب المقال.الدالة the_archive_title تستخدم لعرض عنوان الأرشيف إعتمادا على نوعه فمثلا تعرض عنوان التصنيف بصورة مختلفة عن عنوان الوسم وغيرها من الأرشيفات.الدالة the_archive_description لعرض وصف الأرشيف.الدالة hsb_categorized_blog للتأكد من أن الموقع يحتوي على أكثر من تصنيف للمقالات حيث ترجع true في هذه الحالة.الدالة hsb_category_transient_flusher وتستخدم لمسح الtransient الخاص بالتصنيف والذي يستخدم عادة لزيادة سرعة الموقع.بالطبع يمكنك إضافة المزيد من الدوال في هذا الملف وتذكر أنه أنسب الأماكن لكتابة الدوال التي تحتاج لإستخدامها في ملفات القالب لعرض بيانات معينة، فمثلا يمكنك إنشاء دالة لعرض عدد مشاهدات المقال وسيكون هذا الملف هو الأنسب لكتابتها. ملف extras.phpهذا الملف مشابه للسابق ويختلف عنه أن الدوال في هذا الملف لا يتم إستخدامها عادة في ملفات القالب بل تقوم بعمل مهام لا تعتمد على ملفات القالب، وعموما يمكن أن نقول أن الدوال في هذا الملف هي عادة الدوال التي يتم إضافتها الى مفلترات Filters أو أحداث Actions معينة وليست الدوال التي يتم إستداعائها داخل القالب. من الدوال في هذا الملفK، الدالة hsb_body_classes والتي تستخدم للتعديل على المتغير الذي يحتوي على CSS Classes الخاص بوسم body للموقع من خلال مفلتره body_class، وهي في هنا تضيف الClass المسمى group-blog في حالة كانت المدونة تحتوي على أكثر من كاتب. الدالة hsb_wp_title والتي تقوم بالتعديل على إسم الموقع (الذي يظهر في وسم title بداخل وسم head في الموقع) من خلال فلتره wptitle ويتم التعديل على حسب الصفحة المعروضة (حيث يختلف عنوان الموقع في الصفحة الرئيسية من العنوان في صفحة عرض المقال). الدالة hsb_render_title وهي المسؤولة عن عرض عنوان الموقع داخل وسم head وذلك من خلال إضافتها للحدث wphead. وكما هو الحال بنسبة لملف template-tags.php يمكنك إضافة المزيد من الدوال لهذا الملف كما تريد. ملف jetpack.phpيستخدم هذا الملف لإضافة توافقية القالب مع إضافة Jetpack المشهورة وبالتحديد مع خاصية Infinite Scroll التي توفرها هذه الإضافة حيث وذلك من خلال دالتين الأولى وهي hsb_jetpack_setup تقوم بإخبار ووردبريس أن الموقع متوافق مع خاصية infinite-scroll بإستخدام الدالة add_theme_support، والدالة الثانية هي hsb_infinite_scroll_render وهي المسؤولة عن طريقة عرض المقالات التي سيتم تحميلها من خلال هذه الخاصية. ملف customizer.phpهذا الملف يستخدم لإضافة دعم القالب للمخصص Theme Customizer في تعديل إسم ووصف الموقع بحيث تظهر مباشرة في العرض الحي Live Preview بعد التعديل عندما يتم التعديل على المخصص وهذه هي الطريقة التي يعمل بها المخصص، وسنتناول طريقة عمل المخصص وكيفية جعل القالب داعم له وكيفية إضافة بعض الخيارات في المخصص في سلسلة مقالات اخرى إن شاء الله. خاتمة بهذا المقال نكون قد أكملنا الحديث عن ما يتعلق بالوظائف العامة Functions التي يوفرها القالب وطريقة ترتيبها وتوزيعها بين الملفات، وتبقى لنا الكلام عن ملفات القالب المسؤولة من عرض محتوى الموقع للمستخدم وطريقة تنسيقه وترتيبها وهو ما سنتكم عنه في المقال القادم إن شاء الله.

لَعِبت التّوجيهات المبنيّة داخل Angular مثل ng-bind وng-model وinput دور النّجوميّة في هذه السلسلة منذ الفصل الأوّل، المبادئ، حتّى أنّ فصل المجموعات كان يركّز كلّيًّا على استخدام توجيهٍ واحدٍ (قويٍّ إلى حدّ كبير) هو التّوجيه ng-repeat. قد تظنّ بعد ذلك أن قائمة التّوجيهات المبنيّة في داخل Angular تحوي حلولًا لجميع الحالات، ولكنّ هذا غير صحيحٍ بالطّبع. لقد تصوّر مصمّموا Angular بأنّها ستكون طريقةً للسّماح لغير المبرمجين ببناء صفحاتٍ تفاعليّة، إلّا أنّها تطوّرت لتصبح منصّةً تعطي مطوّري الويب القوّة لإنشاء امتداداتٍ وتخصيص HTML العاديّة، وهذا يعني إنشاء التّوجيهات الخاصّة بك، وهذا تمامًا ما سنقوم به في هذا الفصل. يكون إنشاء توجيهٍ مخصّص بشكله الأبسط مشابهًا كثيرًا لإنشاء مرشّح مخصّص، وهذا هو سبب الحديث عن المرشّحات قبل التّوجيهات في فصلٍ سابق. التّابع الخارجي الذي سنقوم بتمريره إلى التّابع directive هو غلافٌ لحقن التّبعيّة ويُدعى بتابع الصّناعة (factory function)، ويُعرف بالوصفة (recipe) ضمن توثيق Angular. يتمّ استدعاء هذا التّابع مرّةً على الأكثر، أو لا يتمّ استدعاؤه أبدًا إن لم يتمّ استخدام التّوجيه، كما تعلّمنا سابقًا في فصل الخدمات. في داخل تابع الصناعة يوجد تابعٌ آخر تقوم Angular فعليًّا باستدعائه وهو المكان الذي نقوم فيهذر عن بالعمل الحقيقيّ للتّوجيه، ويُسمّى بتابع الربط link. التابع directiveنستخدم التّابع directive لتسجيل توجيهٍ مخصّص، وهذا التّابع ذو الاسم المناسب لوظيفته جزءٌ من الواجهة البرمجيّة للوحدات، لذا سنحتاج إلى إنشاء وحدةٍ جذرٍ لتطبيقنا. angular.module('app', []);ثمّ نقوم بتحميل الوحدة الجذر عن طريق تمرير اسم التّطبيق إلى التّوجيه ng-app. <body ng-app="app"> <!-- الأمثلة توضع هنا --> </body>وبذلك أصبحنا جاهزين لإنشاء توجيه مخصّص، ولنبدأ بتوجيهٍ بسيطٍ جدًّا اسمه hello. angular.module('app') .directive('hello', function() { return function(scope, element) { element.text("hello"); }; });للقيام بأيّ شيءٍ مفيدٍ سنحتاج إلى استخدام الوسيط الثّاني لتابع الرّبط، والّذي يكون غلافًا (wrapper) لعنصرٍ من المستند نجلبه من مكتبة jqLite الخاصّة بـAngular أو من مكتبة jQuery حسب الوسيط الذي قمت بتضمينه. في هذا المثال، قمنا باستبدال المحتوى السّابق للعنصر بالعبارة hello. The message is <span hello></span>.الناتج: The message is hello.أليس هذا رائعًا؟ لقد أنشأنا لتوّنا خاصّيّة HTML جديدة خاصّةً بنا. الوسيط scopeفي المثال السابق قمنا يدويًا (hardcoded) بكتابة النصّ التي نريد كتابته وهذا لا يفيدنا كثيرًا، لذا لنرى إن كان بإمكاننا استبدال النّصّ بقيمةٍ متغيّرة. ربّما كنت تتساءل بخصوص الوسيط الأوّل scope، لنقم بإضافة متحكّمٍ يقوم بإنشاء العنصر message في مجاله. angular.module('app') .controller('MessageController', function($scope) { $scope.message = 'hello'; });والآن لنقم باستخدام هذا العنصر في التّوجيه، وسنُسمّيه message أيضًا. angular.module('app') .directive('message', function() { return function(scope, element) { element.text(scope.message); }; });من الواضح أنّه يتوجّب علينا استخدام هذا التّوجيه في المكان داخل المستند الذي يكون تابعًا للمتحكّم MessageController. <p ng-controller="MessageController"> The message is <span message></span>. </p>الناتج: The message is hello.قد تتساءل، لماذا يتمّ في المتحكّم تعريف وسيط المجال مسبوقًا برمز الدولار scope$ بينما في تابع الرّبط يكون هذا الوسيط بدون علامة الدولار في بدايته scope، والسّبب هو أنّ أسماء الوسطاء في تابع الرّبط غير مهمّة (إلّا بالنّسبة لنا فقط) على عكس الوسطاء التي يتم حقنها. الوسطاءكما تعلّمنا سابقًا عند استخدام التّوجيهات المبنيّة داخل Angular، فالتّوجيهات تقبل تمرير الوسطاء، وهذه الوسطاء تُمرّر داخل الوسيط الثّالث لتابع الرّبط، وهو الوسيط attrs. مرّةً أخرى، وعلى عكس حقن التّبعيّات، يُمكننا تسمية الوُسطاء بأيّ اسمٍ نريده، ويُفضّل استخدام أسماءٍ مفهومةٍ لتبقى الشّيفرة مفهومة. angular.module('app') .directive('welcomeMessage', function() { return function(scope, element, attrs) { element.text(attrs.welcomeMessage); }; });The message is <em welcome-message="bonjour"></em>.الناتج: The message is bonjour.لاحظ أنّه عندما نستخدم أكثر من كلمةٍ واحدةٍ في كتابة اسم التّوجيه بأنّنا نستخدم نمط camel case حيث نكتب أوّل حرفٍ في الكلمة الثّانية بحرفٍ كبير، وهذا هو النّمط المتعارف عليه في JavaScript، ولكنّ النمط المستخدم في HTML هو فصل الكلمات باستخدام إشارة (-) وهو ما يُدعى hyphenated style، وخلاصة الكلام هي أنّك عندما تريد استخدام welcome-message لتضمين التّوجيه الخاص بك في القالب، سيكون عليك استخدام الاسم welcomeMessage عندما تقوم بتعريفها في JavaScript. قد تكون لاحظت بأنّ بعض التّوجيهات المدمجة في Angular تقوم بمعالجة (evaluate) العبارات، إلّا أنّ هذا السلوك ليس هو السلوك الافتراضي. The message is <em welcome-message="'bon' + 'jour'"></em>.الناتج: The message is 'bon' + 'jour'.بما أنّنا نعمل داخل قالب Angular، سيكون بإمكاننا دومًا تمرير نتيجة عبارةٍ معالجَة (evaluated). The message is <em welcome-message="{{'bon' + 'jour'}}"></em>.الناتج: The message is bonjour.يُمكنك أيضًا إدخال سلسلةٍ نصّيّة معرّفة مسبقًا داخل السلسلة النّصّية العاديّة. <p ng-init="greeting = 'bonjour'"> The message is <span welcome-message="I say {{greeting}}, you say hello"></span>. </p>الناتج: The message is I say bonjour, you say hello.لتتمكّن من معالجة العبارة الممرّرة إلى التّوجيه كسلسلةٍ نظاميّة، ستحتاج إلى استخدام التّابع eval$. التّابع scope.$evalبالرغم من أنّ Angular لا تعتبر أنّ الوسيط المُمرّر إلى التّوجيه عبارةٌ تحتاج إلى معالجة، إلّا أنّه يمكننا ببساطةٍ أن نعالج هذه العبارة باستخدام التّابع eval$، ولأخذ العلم، فهذه الطّريقة لا تؤدّي إلى إعادة تحديث العرض (view) عند تغيُّر النّموذج، وهذا مفيدٌ فقط في حالات الاستخدام الأساسيّة. angular.module('app') .directive('welcomeMessage', function() { return function(scope, element, attrs) { var result = scope.$eval(attrs.welcomeMessage); element.text(result); }; });لنقم بتجربة حالة استخدامٍ بسيطة نقوم فيها بوصل سلسلتين نصّيّتين. The message is <em welcome-message="'bon' + 'jour'"></em>.الناتج: The message is bonjour.يُمكننا أيضًا باستخدام scope.$eval أن نقوم بتمرير كائنات، مّما يتيح لنا طريقةً لتلقّي العديد من الوسطاء معًا، وسنلقي نظرةً في فقرةٍ لاحقةٍ من هذا الفصل علىتوجيهات العناصر، والتي تقبل أيضًا العديد من الوسطاء المُسمّاة عن طريقة إتاحة وجود العديد من الخصائص للعنصر، أمّا الآن فسنرى في المثال التالي معالجةً لكائنٍ من نوع options، حيث نقوم بتمرير العديد من الوسطاء إلى التّوجيه. angular.module('app') .directive('welcomeMessage', function() { return function(scope, element, attrs) { var options = scope.$eval(attrs.welcomeMessage); var result = options.emoticon + ' ' + options.message + ' ' + options.emoticon; element.text(result); }; });وبهذه الطّريقة استطعنا إدخال وسيطين بفعّاليّة، message وemoticon، واستطعنا إنجاز الوصل بينهما داخل التّوجيه. The message is <em welcome-message="{message: 'bonjour', emoticon: '\u263a'}"></em>.الناتج: The message is ☺ bonjour ☺.صِرنا الآن نفهم كيفيّة استخدام توجيهاتٍ مخصّصةٍ مع المجالات والمتحكّمات. ولكن ماذا لو أردنا استخدام خدماتٍ أخرى داخل التّوجيه؟ حقن التبعيةإن أردنا الوصول إلى موارد مُدارة مثل خدمةٍ ما، أو مُرشّحٍ ما من داخل توجيهنا الخاصّ، فلن يكون علينا سوى التّصريح عن التّبعيّات كوسيطٍ في التّابع الخارجيّ. (راجع فصل حقن التّبعيّة وفصل الخدمات إن لم يكن هذا المفهوم مألوفًا لديك.) على سبيل المثال، لنفترض بأنّنا نريد توجيهًا يُمكنه تطبيق حسمٍ على السّعر وأيضًا القيام بتنسيقٍ للعملة لقيمة المتغيّر price في المجال. سيحتاج هذا التّوجيه للوصول إلى الخدمة المخصّصة calculateDiscount المُعرّفة كما يلي. angular.module('app') .value('discountRate', 0.8) .factory('calculateDiscount', function(discountRate) { return function(amount) { return amount * discountRate; }; });والآن سنستخدم تابع الوصفة (recipe) التّغليفيّ لحقن الخدمة calculateDiscount مع المُرشّح currency أيضًا. angular.module('app') .directive('discount', function(calculateDiscount, currencyFilter) { return function(scope, element, attrs) { var price = scope.$eval(attrs.discount); var discountPrice = calculateDiscount(price); element.html(currencyFilter(discountPrice)); }; });لاحظ بأنّنا قمنا بتمرير العنصر price كقيمةٍ لوسيط التّوجيه في القالب، ويُمكننا الحصول على هذه القيمة للوسيط عن طريق الوسيط attrs حيث نصل إلى الخاصّيّة (discount) وهي اسم التّوجيه الخاصّ بنا. في المثال التّالي، سنقوم بإسناد قيمة هذا العنصر في المجال (الّتي نحصل عليها عن طريق scope.$eval) إلى المتغيّر المحلّي المُسمّى price. <table ng-init="price = 100"> <tr> <td>Full price:</td> <td ng-bind="price | currency"></td> </tr> <tr> <td>Sale price:</td> <td discount="price"></td> </tr> </table>الناتج: Full price: $100.00 Sale price: $80.00قد ترغب في وضع مُرشّحٍ بدلًا من التّوجيه، فالتّحويل الذي قمنا به بسيطٌ للغاية، حيث لم نضِف إلى المستند أيّ سلوكٍ تفاعليّ. لننتقل الآن إلى مثالٍ أكثر تعقيدًا بحيث يحتاج إلى إضافة وسمٍ باستخدام القالب. القوالبكُلّ العمليّات التي قمنا بتنفيذها في الأمثلة السّابقة على الوسيط element كانت سهلةً إلى حدٍّ ما، ولكن ماذا لو أردنا إضافة قطعةٍ متغيّرة الحجم من محتوىً جديدٍ إلى المستند؟ لنقم بمحاولة حلّ هذه المشكلة بالتّدريج. في البداية، لنقُل بأننا نريد فقط تغليف سلسلةٍ نصّيّةٍ نُمرّرها كوسيطٍ للتّوجيه الخاصّ بنا باستخدام عنصر strong. The message is <span strong-message="a strong hello!"></span>يُمكننا دومًا استخدام عمليّة وصل السّلاسل (concatenation). angular.module('app') .directive('strongMessage', function() { return function(scope, element, attrs) { element.html('<strong>' + attrs.strongMessage + '</strong>'); }; });الناتج: The message is a strong hello!أو يُمكننا بناء المحتوى بطريقةٍ برمجيّة باستخدام jqLite أو jQuery. angular.module('app') .directive('strongMessage', function() { return function(scope, element, attrs) { element.html('<strong>'); element.find('strong').text(attrs.strongMessage); }; });الناتج: The message is a strong hello!عمليّة وصل السّلاسل والتّغييرات البرمجيّة على المستند طريقةٌ جيّدةٌ عند استخدامها للأمور الصّغيرة كعنصرٍ واحدٍ مثلًا، ولكن ماذا سنفعل عندما يكون المحتوى يتضمّن العديد من العناصر المتداخلة؟ أو عندما يكون لدينا قائمةٌ متغيّرة الحجم؟ سيجيبك عن هذا السّؤال أيّ خبيرٍ في تطوير النهاية الأماميّة (front-end) بأنّ مكتبة القوالب ستسهّل الأمر كثيرًا، ولحسن الحظّ، فـAngular مكتبة قوالب، وستجعل الأمر أكثر سهولة. يُمكن لـAngular أن تقوم بإخراج (render) قوالب متداخلةٍ يقدّمها التّوجيه الخاصّ بنا، وذلك في الوقت نفسه الّذي تقوم فيه بإخراج قالب التّطبيق الخاصّ بنا. لإضافة قالبٍ للتّوجيه، سنحتاج إلى تغيير أسلوبنا السّابق، فبدلًا من إعادة (return) تابع الرّبط فقط، سنقوم بإعادة كائنٍ يحوي تابع الربط ومعه قالب. هذا تغيير كبير، لذا فلنكرّر ذلك: سيقوم المُغلّف الوصفيّ (recipe) الآن بإعادة كائنٍ بدلًا من تابع، وسنستخدم العنصر link في هذا الكائن المُعاد للوصول إلى التّابع. فيما يلي مثالٌ يستخدم قالبًا لإنشاء عددٍ غير محدّدٍ مسبقًا من عناصر li. angular.module('app') .directive('wordList', function() { return { link: function(scope, element, attrs) { scope.words = attrs.wordList.split(" "); }, template: "<li ng-repeat='word in words'>\ {{word}}\ </li>" }; });ستستلم Angular مهمّة تضمين القالب في المجال الصحيح، ثمّ إلحاق المخرجات بالعنصر الذي استخدم التّوجيه. بما أنّ مخرجات هذا التّوجيه ستكون عناصر في قائمة، لنقم بتضمين التّوجيه في العنصر ul. <ul word-list="we love templates"></ul>الناتج: . we . love . templatesأظنّ بأن المثال بدأ يوضّح لك قوّة وأناقة التّوجيهات المخصّصة. العنصر templateUrlاستخدمنا في المثال البسيط السّابق رمز الشرطة الخلفيّة (\) مرّتين لنتمكّن من كتابة نصّ القالب، وكما ترى، فالقوالب السّطريّة سُرعان ما تصبح مستهجنةً داخل شيفرة JavaScript، ولذلك سنستعين بالقوالب الخارجيّة التي تدعمها Angular، سواء كانت عناصر خاصّة مخفيّة في المستند، أو موارد ويب منفصلةً تمامًا في مكانٍ مستقل. <li ng-repeat="word in words"> {{word}} </li>لقد قمنا باستخراج شيفرة القالب إلى مورد ويب موجودٍ في الرابط النّسبيّ views/word-list.html، والآن سنقوم بإضافة العنصر templateUrl إلى كائن الإعدادات الذي يعيده التّوجيه الخاص بنا، وسنقوم بإسناد مسار القالب إليه، وذلك بدلًا من استخدام العنصر template وإسناد شيفرة القالب إليه مباشرةً. angular.module('app') .directive('wordList', function() { return { link: function(scope, element, attrs) { scope.words = attrs.wordList.split(" "); }, templateUrl: '/views/word-list.html' }; });أمّا الاستخدام فيبقى كما هو دون تغيير. <ul word-list="external templates rock"></ul>الناتج: . external . templates . rockالقوالب الخارجيّة عمومًا أسهلُ بكثيرٍ للقراءة وللتّعديل من القوالب السّطريّة. العنصر replaceلا بُدّ من استخدام التّوجيه في المثال السابق ضمن قائمة، ولكن ماذا لو لم يقم المستخدم باستخدام التّوجيه بشكلٍ صحيح؟ أحد الحلول هو استبدال العنصر الذي يتضمّن التّوجيه بدلًا من إلحاق العناصر به. إذًا لنقُم بإضافة عنصر ul لتغليف مخرجات قالبنا، سنحتاج أيضًا إلى عنصرٍ جديدٍ في كائن الإعدادات هو العنصر replace، وسنُسند إليه القيمة true. (القيمة الافتراضيّة له هي بالطّبع false.) لنقم أوّلًا بإضافة العنصر ul إلى قالبنا. <ul> <li ng-bind="word" ng-repeat="word in words"></li> </ul>التّغيير الوحيد الهامّ في التّوجيه هو استخدام العنصر الجديد replace. angular.module('app') .directive('wordList', function() { return { link: function(scope, element, attrs) { scope.words = attrs.wordList.split(" "); }, templateUrl: '/views/word-list-ul.html', replace: true }; });بما أنّ العنصر الذي يتضمّن التّوجيه سيتمّ استبداله مهما كان، يُمكننا تضمين التّوجيه في عنصرٍ غريبٍ وغير ملائمٍ مثل h1. <h1 word-list="lists not headlines"></h1>الناتج: . lists . not . headlinesيبيّن المثال السّابق قوّة تأثير التّوجيهات على المستند، ولكنّني أُفضّل أن يكون التّصميم أكثر وضوحًا، ودلالته صحيحة، ولذلك فبدلًا من استبدال وسوم HTML، أرى أنّ الصّواب هو التّحقّق من صحّة العنصر الذي قام بتضمين التّوجيه، وإن لم يكن صحيحًا يتمّ إلقاء خطأ (throw an error). العنصر controllerفي بداية هذا الفصل، رأينا مثالًا يحوي متحكّمًا يقوم بتحضير عنصرٍ في المجال، ثمّ استخدمنا هذا العنصر لاحقًا داخل تابع الربط الخاصّ بالتّوجيه. والآن بعد أن تعرّفنا على طريقة استخدام القوالب، لنقُم بإعادة كتابة هذا المثال، واستبدال تابع الرّبط الذي يحدّد نصّ العنصر في المستند بقالب. angular.module('app') .controller('MessageController', function($scope) { $scope.message = 'hello, from the external controller'; }) .directive('message', function() { return { template: "<strong>{{message}}</strong>" }; });بما أنّ المتحكّم والتّوجيه منفصلان، فكلاهما يحتاج إلى التّضمين بشكلٍ منفصلٍ في المثال التالي. يُمكننا أن نضع المتحكّم في نفس العنصر الذي يحوي التّوجيه أو في عنصرٍ مغلّف، فلا فرق. The message is <span message ng-controller="MessageController"></span>.الناتج: The message is hello, from the external controller.كما ترى في المثال السّابق، لقد قُمنا بإزالة تابع الرّبط، فوجوده أمرٌ اختياريّ، واقتصرنا على العنصر template، وذلك لأنّ استخدام تابع الرّبط يكون للقيام بالتّغييرات البرمجيّة على المستند بطريقةٍ أكثر أُلفةً لمطوّري النّهاية الأماميّة. أمّا الآن بعد أن انتقلنا إلى استخدام القوالب، فسنحتاج إليه للقيام بمهمّاتٍ نحتاج فيها إلى الوصول إلى العنصر الحاوي للتّوجيه أو إلى خصائص العنصر (مُتضمّنةً التّوجيه بذاته، كما رأينا سابقًا.) إضافةً إلى ذلك، فإنّ تحضير بيانات النّموذج لا يحتاج إلى الوصول إلى العنصر أو إلى خصائصه، وهو من مهمّات المتحكّم، وهذا بالرّغم من إمكانيّة القيام بذلك داخل تابع الرّبط كما بيّنّا في فقرة القوالب. لذا، سيكون من الأفضل أن ننقل مسؤوليّة تحضير النّموذج إلى داخل المتحكّم، إلّا أنّ المشكلة الآن هي أنّ المتحكّم منفصلٌ ويحتاج إلى إعداداتٍ خاصّةٍ به، فهل يُمكننا نقل المتحكّم إلى داخل التّوجيه؟ نعم، يمكننا ذلك. angular.module('app') .directive('message', function() { return { template: "<strong>{{message}}</strong>", controller: function($scope) { $scope.message = 'hello, from the internal controller'; } }; });أليس هذا رائعًا؟ لم نحصل الآن على مكوِّنٍ مغلّفٍ جيّدًا وحسب، بل تخلّصنا الآن من تضمين المتحكّم واستخدام التّوجيه ng-controller في الوسم. The message is <span message></span>.الناتج: The message is hello, from the internal controller.ويمكننا طبعًا القيام بكلّ الأشياء المعتادة مع المتحكّم، كتعريف تابعٍ في المجال وتضمين هذا التّابع من عنصر تحكّمٍ داخل القالب. راجع فصل المتحكّمات للاستزادة. الخيار restrictتُوجد أربع طرقٍ لتضمين توجيهٍ ما، إلّا أنّنا لم نرَ حتّى الآن إلّا طريقة تضمين التّوجيهات كخصائص لعناصر HTML، وذلك لأنّه الأسلوب الأكثر شيوعًا وفائدةً للقيام بذلك، وهي أيضًا القيمة الافتراضيّة للخيار restrict الذي يُمكن أن يملك واحدةً أو أكثر من الخيارات التّالية: 'A' يتمّ تضمينه كخاصّيّة (Attribute)'C' يتمّ تضمينه كفئة (Class)'E' يتمّ تضمينه كعنصر (Element)'M' يتمّ تضمينه كتعليق (Comment)بالنّسبة للأساليب الثّلاثة الأخرى في التّضمين (الفئة، العنصر والتّعليق) فأسلوب التضمين كعنصرٍ هو الأكثر إثارةً للاهتمام من النّاحية العمليّة، فأسلوبا الفئة والتّعليق موجودان لدعم الحالات الهامشيّة مثل وجود تحقّق صارمٍ لصحّة نصوص HTML. أعتبر أنّ عنصر التّوجيه يُشبه مدفعًا كبيرًا، يجب عليك ألا تستخدمه إلّا إن كان الأمر يستحق ذلك. نموذجيًّا، يتمّ استخدام هذه الطّريقة عندما نحتاج إلى وضع عددٍ كبيرٍ من الوسوم داخل مكوّنٍ من مكوّنات HTML ويكون أيضًا عليك تمرير العديد من الوسطاء إليه، فعندما تستخدم عنصر التّوجيه، ستتمكّن من تمرير قيم الوسطاء على شكل خصائص لهذا العنصر. في المثال التّالي لن يكون لدينا هذا العدد الكبير من الوسوم إلّا أنّنا سنصمّم جدولًا مع كلّ الزخرفات الخاصة به. <table class="table table-condensed"> <thead> <tr> <th ng-bind="column" ng-repeat="column in columns"></th> </tr> </thead> <tbody> <tr ng-repeat="model in models"> <td ng-bind="model[column]" ng-repeat="column in columns"></td> </tr> </tbody> </table>سيستخدم تابع الرّبط الآن وسيطين في تعريف التّوجيه الخاصّ بنا، وسنصل إلى هذا الوسيطين عن طريق attrs.models و attrs.columns. angular.module('app') .directive('modelsTable', function() { return { restrict: 'E', templateUrl: '/views/models-table.html', link: function(scope, element, attrs) { scope.models = scope.$eval(attrs.models); scope.columns = attrs.columns.split(","); } }; });قد ترغب بإسناد القيمة true إلى العنصر replace في عنصر التّوجيه إن كانت البيئة التي تعمل عليها تُسبّب لك بعض المشاكل عند استخدام أسماء عناصر غير معياريّة، على الجانب الآخر، تركُ هذا العنصر المخصص في مستندك قد يساعدك أثناء تصحيح الأخطاء في الشيفرة. سنقوم مرّةً أخرى باستخدام متحكّمٍ خارجيّ في هذا المثال. angular.module('app') .controller('ItemsController', function($scope) { $scope.items = [ {name: 'Item 1', color: 'green', price: 5.0}, {name: 'Item 2', color: 'blue', price: 4.93} ]; });وأخيرًا، سنقوم بإضافة Bootstrap إلى صفحتنا لجعل مثالنا الأخير أكثر أناقة. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>الخطوة الأخيرة الآن هي تضمين عنصر التّوجيه الخاصّ بنا مع وسيطيه models وcolumns حيث سنضيفهما على شكل خصائص للوسم. <p ng-controller="ItemsController"> <models-table models="items" columns="name,color,price"></models-table> </p>رائع، لقد قمنا بإخفاء الشيفرات المزعجة الخاصّة بجدول HTML بإحكام. خاتمةلقد قدّم لك هذا الفصل عن التّوجيهات معرفةً ستعطيك قوّةً كبيرةً عند استخدامك لـAngular في تطوير تطبيقات طرف المستخدم، فكما رأينا في المثال الأخير، يُمكنك الآن تعريف توجيهٍ مخصّصٍ يستخدم قوّة قوالب Angular ويستخدم التّوجيهات المدمجة معها، مع قدرةٍ كبيرةٍ على التّقليل من الشّيفرات المزعجة ومن ثمّ زيادة الإنتاجيّة. لا يزال علينا فهم أمورٍ أخرى بخصوص التّوجيهات، خصوصًا عندما تدخل مشكلة الحالة المشتركة إلى السّاحة. سيعرض الفصل القادم هذه السيناريوهات المتقدّمة، فإن كنت تشعر بأنك حصلت على المعرفة الكافية لخدمة أهدافك، فيُمكنك القفز مباشرةً إلى فصل HTTP. أما إن كنت ترغب في تعلُّم المزيد، فتابع مباشرةً إلى الجزء الثّاني من فصل التّوجيهات. ترجمة وبتصرّف للفصل العاشر من كتاب: Angular Basics لصاحبه: Chris Smith.

كل يوم ينمو ووردبريس ويتطور أكثر فأكثر وفي جميع الدول العالم الناطقة باللغة الإنجليزية وغيرها، وأغلب البرمجة في ووردبريس تتم باللغة الإنجليزية بالإضافة إلى أغلب الإضافات والقوالب تكتب بسلاسل نصية باللغة الإنجليزية على الرغم من أن أكثر من نصف مستخدميه لغتهم الأصلية ليست الإنجليزية. هذا المقال، تعزيز للمقال الموجود مسبقا على أكاديمية حسوب، حول دليل المطور لتهيئة إضافات ووردبريس للترجمة. وهذا هو السبب الذي جعلنا نشهد على المدى العقد الماضي المزيد من المناقشات لدعم التدويل التي ستجعل ووردبريس يدعم جميع اللغات الأخرى، وهذا سيكون ضروريا لو كنت تعمل على إضافات أو قوالب عالمية الانتشار. يجب علينا القيام بثلاثة خطوات حتى نتمكن من ترجمة السلاسل النصية لعناصر الواجهة: اختر، صرّح، و استخدم "مجال النص".استخدم وظائف مناسبة لسلاسلك النصية ومجال النص المختار.سيسمح لك هذا بإنشاء ملفات الترجمة.بفضل ملفات الترجمة هذه، ستسمح للناس بترجمة قوالبك و إضافاتك. ما هو "مجال النص" ؟مجال النص هو "ترجمة مساحة الأسماء" (translation namespace) لإضافاتك أو ثيماتك وهي طريقة لوردبريس لفصل قائمة من "السلاسل النصية لترجمتها" من بقية السلاسل النصية. وتكمن أهمية مجال النص في أن بعض السلاسل النصية قد تعني معاني كثيرة في الإضافات والقوالب، فمثلا كلمة "!Let’s go" قد تعني "Create a membership account" في سياق وقد تعني "Start the survey" في سياق آخر. لذلك بعد تعريف مجال النص، واستخدامه مع "gettext" أو مع دوال الترجمة التي سوف نقوم بشرحها فيما بعد. (إن مشروع gettext جزء أساسي من طريقة عمل نظام الترجمة في الووردبريس) إذا أردت أن تضع مجال النص في إضافتك أو في قالبك في الجزء العلوي للتعليقات الموجود في ملف style.css للقوالب أو في ملف PHP الرئيسي لإضافتك. فسيكون مشابهًا لهذا بالنسبة للقوالب: <?php /* Plugin Name: Pretend Plugin [Other comment-block information goes here] Text Domain: wpshout */أما للقوالب فسيكون مشابهًا لهذا: /* Theme Name: Pretend Theme [Other comment-block information goes here] Text Domain: wpshout */دوال Gettext: أبقِ ()__ و ()e_ و ()x_ و ()n_ صحيحةلجعل النصوص الخاصة بك قابلة للترجمة، تحتاج إلى تمرير دالة سوف تقوم باستبدال "!Let’s go" مع ترجمتها باللغة الإسبانية أو العربية أو الفرنسية أو غيرها، ولتسهيل هذا الأمر، يقوم ووردبريس بإعطاء أسماء قصيرة جدا للدوال التي تقوم بهذه الوظيفة. الدالة ()__أعتقد أن هذه الدالة هي الدالة الأهم، فلقد حصلت على أكثر اسم مبهم وغريب. لكن هدفها الرئيسي هو السماح لجميع السلاسل النصية بأن تترجم إلى لغة أخرى إذا كان يجب ذلك. وتُستخدم هذه الدالة مع معاملين الأول للسلسلة النصية والثاني لمجال النص، على سبيل المثال: echo __( 'WPShout is a great WordPress site!', 'wpshout' );الطباعة الذاتية بواسطة () e_الدالة الأولى ستقوم بإرجاع نص فقط ويجب عليك طباعة (عرض) النص بنفسك، فإذا كان هذا يزعجك فيمكنك استخدام ()e_ فهي مثل ()__ echo . ستقوم هذه الدالة باختصار كتابة بعض الأحرف، لكنها لن تقوم بأي شيئ آخر، وهذا مثال تطبيقي على استخدام هذه الدالة: _e( 'WPShout is a great WordPress site!', 'wpshout' );والآن سنبدأ بالتعامل مع الجوانب الدقيقة للترجمة. توفير نص للشرح بواسطة ()x_في بعض الأحيان كلمة أو جملة تكون مبهمة وصعبة الترجمة فقد تعني العديد من المعاني، فمثلا كلمة "post" قد تعني اسما مثل "مشاركة" أو "تدوينة" وقد تعني فعلا مثل "نشر" (to post - to publish). على عكس الدالتين السابقتين، يمكنك بواسطة ()x_ وضع نص لشرح الكلمة أو الجملة مثل المثال التالي: _x( 'Post', 'verb, as in "to publish"', 'wpshout' );النص الأوسط لن يظهر للمستخدم، لكنه سيظهر للمترجم حتى يفهم النص. (يذكر أنه توجد دالة ()ex_ و التي تجمع ما بين e_ و x_). الجمع بواسطة ()n_من المشاكل التي قد تواجهها في الترجمة هو الجمع. ففي اللغة الإنجليزية، "I have 1 Comment" (أنا أملك 1 تعليق) أو "I have 3 Comments" (أنا أملك 3 تعليقات)، لأجل معالجة مشكلة جمع كلمة تعليق، ووردبريس يوفر لك دالة ()n_ التي ستقوم بمعالجة الفرق بين الإثنين. في العادة، عندما تستخدم دالة ()n_ سوف تحتاج إلى استدعاء دالة الكتابة ()printf. (أو sprintf التي تقوم بإرجاع سلسلة نصية على عكس printf التي تقوم بطباعة النص). وهذه الدوال ستقوم باستبدال قيمة في سلسلة نصية مع قيمة تم تمريرها لهم. لتفهم أكثر أنظر للكود أدناه: printf( _n( 'One comment', '%s comments', $comments, 'wpshout' ), $comments );ستلاحظ أننا استخدمنا قيمة عددية مسندة إلى متغير comments$ مرتين. نفترض أن comments$ تمتلك قيمة "3". في المرة الأولى استخدمنا comments$ مع n__ لتحديد هل سنستخدم الجمع أو لا، وبما أن 3 أكبر من 1 سوف يختار " s% comments" بدلا من "One comment". أما في المرة الثانية فاستخدمناها مع printf لوضع الرقم في السلسلة النصية، عن طريق استبدال s% بـ 3 والتي هي قيمة المتغير comments$، لتكون الجملة الكاملة المطبوعة هي "3 comments". دوال Gettext أخرىسوف نقوم بشرح جميع الدوال المهمة والأساسية، وهذا لا يعني أنه لا توجد دوال أخرى جديرة بالاهتمام: ()__esc_attr: هذه الدالة تقوم بنفس وظيفة ()__ لكنها سوف تراعي ()esc_attr (سمة الخروج للـ HTML) لدواعي السلامة. (يوجد أيضا دالة ()esc_attr_e و دالة ()esc_attr_x).()__esc_html: نفس الشيء مع هذه الدالة، ففي سبيل السلامة يمكنك الجمع بين سمة الخروج للـ HTML وبين ترجمتك. (و بالطبع توجد دالة ()esc_html_e و دالة ()esc_html_x). ()n_noop_ : هذه الدالة تقوم بنفس وظيفة دالة ()n_ لكن بدون عمليات.تسليم الترجمة إلى جافا سكريبت عن طريق دالة ()wp_localize_scriptبسبب أن الترجمات في الووردبريس يتم التعامل معها عن طريق PHP، سوف تحتاج إلى تمرير السلاسل النصية لاستخدمها مع الجافا سكريبت، ويمكنك فعل هذا عن طريق دالة ()wp_localize_script. هذه الدالة مفيدة للغاية وتستخدم كثيرا خارج الترجمة، لأنها تمكنك من تمرير أية قيمة أو متغير من PHP إلى جافا سكريبت. لكن الاستخدام الأساسي لها للترجمة ولذلك سميت باسمها. وهذا هو مثال لطريقة استخدام هذه الدالة: wp_localize_script( 'wpshout-js', 'strings', array( 'hello' => __( 'Hello!', 'wpshout' ); ) );وللوصول إلى هذه القيم عن طريق ووردبريس، فستقوم بشيء مثل: alert(strings.hello);تمتلك دالة ()wp_localize_script ثلاثة معاملات: المعرّف (handle) الذي استخدمناه في ()wp_enqueue_script (أو ()wp_register_script) للجافا سكريبت التي نقوم بترجمتها.اسم كائن جافا سكريبت الذي نريد أن ترتبط به ترجمتنا.مصفوفة (array) مترابطة للترجمات، مع مؤشر index أو اسم خاص كمفتاح و قيمة كسلسلة نصية ابتدائية لاستخدمها.يتم التعامل مع الترجمة نفسها عن طريق نفس دوال PHP التي شرحناها في الجزء السابق من الدرس. ما هي ملفات POT ،PO و MO ؟حتى الأن كنا نتحدث عن البرمجة باستخدام PHP، لكن هنالك جزء ثاني لا يعتمد على الـ PHP، وهذا الجزء هو الذي يقوم بإنشاء ملفات الترجمة. يعتبر هذا الجزء صعبا بالنسبة لي، فببطء يقوم نظام ووردبريس ببناء حلول أكثر قوة و أكثر إفادة للتعامل مع العمل الحالي للترجمة (أنظر إلى GlotPress ،translate.wordpress.org و the Polyglot Make blog) لكن يبقى هذا الجزء صعبا للمستخدم ذا الخبرة المتوسطة، على الرغم من أننا سنقوم بشرح أساسياته لكننا لن نخوض في التفاصيل، بالنسبة لي اعتدت على استخدام Poedit كمحرر للترجمة. مهما كانت الطريقة الذي اعتدت بها أن تقوم بإنشاء وتعديل و قراءة ملفات الترجمة، يوجد ثلاثة أنواع أساسية من ملفات الترجمة: ملفات pot.: الملفات الرئيسية للإضافات والقوالب، والتي قامت بجمع جميع السلاسل النصية من الدوال ()s__ وغيرها.ملفات po.: هذه الملفات عبارة عن نص ترجمة السلاسل النصية الإنجليزية إلى اللغة المستهدفة، نادرا ما سوف تقوم بتعديل واحدة مباشرة (لأن الصيغة بها الكثير من الكلمات والرموز المبهمة والغريبة) لكن يمكنك فتحها باستخدام محرر نصوص والقيام بتعديلات سريعة للترجمة.ملفات mo.: الترجمة النهائية من اللغة الإنجليزية إلى اللغة المستهدفة، وهذه الملفات عبارة عن ملفات ثنائية (binary files) تستخدم وتقرأ عن طريق ووردبريس، لذلك عندما تقوم بفتحها مع محرر النصوص لن تستطيع معالجتها، لذا إذا أردت القيام بذلك يجب عليك العودة إلى ملفات PO و التعديل عليها و إعادة إنشاء ملفات MO.كما أخبرتك سابقا، هذا هو الجزء الأصعب بالنسبة لي، لكن إذا كان إضافتك أو قالبك في مستودعات WordPress.org، سوف تجد ملفات pot. جاهزة بالنسبة لك وسيفهم مترجميك كيف يهتمون بالباقي. إذا أردت المزيد من التفاصيل أو الأدوات، قم بزيارة صفحة Translating WordPress. ماذا تعلمنا حول تدويل كود ووردبريسلقد قمنا في هذا الدرس بتغطية الأجزاء الثلاثة الرئيسية لجعل كود ووردبريس الخاص بك جاهزا للترجمة: اختر مجال النص، استخدم دوال gettext ومن ثم أحصل على ملف POT لصنع ملفات الترجمة PO و MO. الخطوات سهلة و قابلة للتنفيذ، ولها تأثير كبير للناطقين بغير اللغة الإنجليزية، أو أولئك الذين يحسون براحة أكبر عند استخدامهم لغة أخرى تعلموها مؤخرا. ترجمة -وبتصرف- للمقال Making plugins and themes translation ready لصاحبه: David Hayes.

يجذب ووردبريس بسبب قوته، وشهرته، وتوثيقه الكثير من طاقة “افعل ذلك بنفسك”، فبشكل عام هذا يبدو رائع، فهذه شهادة على أن الناس لديها آمال عالية في ووردبريس، وهذه طريقة ممتازة لتعلمه، لكن للأسف، فإن جهود “افعل ذلك بنفسك” غالبا ما تكون خاطئة. كمطور، غالبا ما أجد أن هذه جهود الفردية تسقط بالكامل، أو أجد نفسي أفسد الموقع عندما يكون تقريبا يعمل جيدا لكن يبدوا غريبا و هنالك بعض الميزات الرئيسية تنقصه. سوف نتحدث هنا عن أولى و أسوء الأخطاء التي قد يرتكبها شخص جديد إلى عالم ووردبريس، لقد رأينا هذه الأخطاء مرات عديدة، ولقد ارتكبنا بعضها سابقا. 1- محاولة بناء موقعك من الثيم الافتراضي إذا كنت جديدا في ووردبريس، فإنه من السهل بناء موقعك عن طريق: تثبيت الووردبريس. تخصيص الووردبريس ليظهر كما تريد.ربما ستكون لديك معرفة بقوالب ووردبريس، لكن سوف تقوم إما بوضع إحدى القوالب الافتراضية المجانية أو انك ستقوم باستخدام قالب بوتستراب (bootstrap) الذي يقوم بتجريد شكل ووردبريس إلى أساسياته، وسرعان ما ستجد نفسك تقوم بتعديلات على ملفات المصدرية للثيم، فتقوم بحذف أجزاء و إضافة أجزاء أخرى. سبب المشكلة: إن المواقع المبنية على قوالب غير ملائمة تكون في العادة قبيحة جدا، و وضعها في موقعك سيجعله سيئا، لأنك ستقوم بتجاهل العديد من أبرز المميزات المفيدة للووردبريس. ربما تحتاج إلى معرفة: قوة ومرونة ثيمات الووردبريس، خاصة المدفوعة منها، وإن إيجاد ثيم مدفوع قريب من احتياجاتك وتخصيصاتك هو الخيار الصحيح. قم بالبحث عن بعض قوائم الثيمات، ستجد أنه يوجد الآلاف منها، لذلك اجعل بحثك أكثر تحديدا، فمثلا قم بالبحث عن “ثيمات مجلات مسطحة للوردبريس” إذا كنت تبحث عن تصميم مسطح وأنت تقوم بتشغيل موقع مجلة، أو قم بالبحث عن موقع تحبه يعمل على الووردبريس واعرف أي ثيم يستخدم. لا تستخدم قالب “Twenty Fourteen” أو أول ثيم يبدوا جميل وتبدأ ببناء موقعك. 2- إفساد ملفات القوالب أو تكديسها بوسوم HTML في أغلب الأوقات يحدث هذا بسبب الإحباط، عندما لا تعرف كيف تقوم بجعل السلايدر يعمل على صفحتك الرئيسية في الوقت الذي يعمل فيه على صفحة HTML الثابتة. فلماذا لا تقوم بقطع جزء من القالب الذي يتعامل مع السلايدر ولصق السلايدر من موقع HTML (مع جافاسكربت) مباشرة في ملف home.php؟ سبب المشكلة: هذا الأمر يجعل ووردبريس ثابت بدل من ديناميكي، وهذه علامة على أنك لا تعرف ما الذي تقوم بفعله، وهذا معناه في الغالب أنه سيكون هنالك مشاكل قريبا، لأنك ستقوم بإفساد وتغيير شِفرة ووردبريس وستزيد من صعوبة العمل عليها لاحقا. ربما تحتاج إلى معرفة: دوال ووردبريس، التي هي الطريقة الصحيحة (والديناميكية) للقيام بأغلب الأشياء التي تريد القيام بها بنفسك، فعلى سبيل المثال، يمكنك التعامل مع السلايدر على أنه شِفرة قصيرة (shortcode) عن طريق دالة ()do_shortcode. وإن وضع السلايدر بالطريقة الصحيحة يسمح لك بتعديل محتويات السلايدر من داخل منطقة إدارة ووردبريس في موقعك. 3- إعادة بناء الوظائف يدويا بدل التعامل معها عن طريق الإضافاتخاصة عندما تكون جديدا في ووردبريس، فإنه من السهل القيام بأشياء اليدوية عن طريق الإضافات، والمثال الكلاسيكي على ذلك هو القيام بلصق شِفرة التتبع الخاصة بـجوجل أناليتكس (Google Analytics) مباشرة في ملف header.php بدل إستخدام Google Analyticator أو أية إضافة مماثلة، وإن القيام بهذه الطريقة يعني أن جوجل أناليتكس لن تتكامل مع موقعك في الوقت الذي يجعل فيه Analyticator الأمر أسهل بالإضافة إلى أن إلصاق شِفرة جوجل أناليتكس إلى الشِفرة المصدرية للقالب لديه سلبياته التي ذكرناها في النقطة الثانية. ومثال آخر على ذلك هو تعديل الأعمدة يدويا داخل التدوينة عن طريق أنماط مضمنة، مثلا (“width: 50%”) بدل استخدام Column Shortcodes أو أية إضافة مشابهة. سبب المشكلة: إعادة اختراع العجلة يستغرق وقتا طويلا و يقود في الغالب إلى نتائج أسوء. ربما تحتاج إلى معرفة: غريزة البحث عن إضافة قبل أي شيئ آخر، فووردبريس يمتلك الآلاف من الإضافات المجانية، وإذا أردت القيام بشيء يحتاجه أشخاص آخرون (مثل مجموعة جميلة من تصاميم الأزرار المسطحة) قُم بالبحث عنه ولا تستسلم حتى تجده. ملاحظة: هذا لا يعني أنه يجب عليك أن تعتمد على الإضافات في كل شيئ بدل من كتابة سكربتات بسيطة (مثل الفلترات) إذا كنت تعرف كيف تكتبها، هذه النصيحة تستهدف القادمين الجدد لتجنب على سبيل المثال صنع حلول للتجارة الإلكترونية بنفسهم بدلا من إستخدام WooCommerce. 4- اقتصار ووردبريس على جزء المدونة من الموقعيحدث هذا عندما تبقي موقعك القديم يعمل وتقوم ببناء ووردبريس في “blog/” ثم تقوم بنسخ جميع ملفات CSS من الموقع الرئيسي و تضعهم (على الأرجح) في قائمة التصفح الرئيسية لموقعك ككود HTML في ملف header.php (تقوم بتكرار خطأ رقم 2 مرة أخرى). سبب المشكلة: إن تكرار تصميم موقعك الرئيسي على ووردبريس هو مضيعة للوقت، فأنت الآن تحافظ على نسختين من ملفات CSS ومن قائمة التصفح الرئيسية وغيرها. وستجد أن العشرات من مميزات الووردبريس لا تعمل سوى على الجزء المدونة في الموقع. ربما تحتاج إلى معرفة: ووردبريس هو نظام إدارة المحتوى، وليس منصة مدونات فالعديد من المواقع التي تضع ووردبريس كمدونة يجب أن تعمل بالكامل على ووردبريس، باستثناء تطبيقات الويب المعقدة، لكن إذا كنت، على سبيل المثال، تقوم بنقل مدونة الشركة إلى ووردبريس، فقُم بنقل بقية الموقع كذلك، وهكذا ستقوم بإدارة نسخة واحدة من كل شيئ وستحصل على مميزات ووردبريس على كامل الموقع. في الختام …بشكل عام، كل هذه الأخطاء سببها عدم معرفة ماذا يمكن للووردبريس أن يفعله، فهذا الأمر يشبه استئجار طائرة للطيران عبر البلاد، لذلك إذا بدأت بالشعور أن المشروع الذي تقوم به بنفسك بدأ يفشل وبدأت الأخطاء والمشاكل بالظهور، فهذه علامة على ضرورة التريث واتخاذ خطوة للوراء، والبدء بتعلم المزيد عن ووردبريس قبل بدأ العمل بها. إذا كنت شخص من نوع يريد أن يفعل كل شيئ بنفسه، فنرجو أن تساعدك هذه النصائح، وإذا كنت تعرف شخص من هذا النوع، فنرجو منك إخباره بهذه النصائح، فهذه النصائح يمكن أن تحدث فرقا بين تجربة أولية جيدة مع ووردبريس وبين إحباط كامل، وكالعادة نريد أن نسمع تعليقاتكم. ترجمة -وبتصرف- للمقال: Classic Do-It-Yourself WordPress Mistakes To Avoid لصاحبه Fred Meyer. حقوق الصورة البارزة: Designed by Freepik.