المحتوى عن 'إضافة'.



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

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

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

نوع المُحتوى


التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

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

التصنيفات

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

أسئلة وأجوبة

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

التصنيفات

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

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

  1. لا تزال التقنية تغيّر مجال خدمة العملاء بصور شتى ومؤثرة على السوق، فقديمًا كان المستهلك يضطر إلى الذهاب إلى المتجر من أجل مشكلة يواجهها أو من أجل استفسار بسيط، فلما جاء الهاتف صار يتحدّث إلى الشركات والمتاجر التي يتعامل معها من خلاله، إلا أنه سرعان ما سئم من المشاكل التي ظهرت جراء ظهور الهاتف. ثم أتى الإنترنت بعد ذلك، ومكّنت الأدواتِ التي صحبَتْهُ أو لحِقَتْ به الشركاتِ من التعامل مع عدة مشاكل في نفس الوقت فصارت أزمنة الردود أقصر، لكن لا زال لتلك الأدوات من بريد أو شبكات اجتماعية جوانبها المظلمة السلبية في التعامل مع العملاء من أجل تقديم الدعم لهم. وأرى أن المحاولة الأخيرة إلى الآن للإجابة عن أسئلة العميل ومشاكله بأسلوب منضبط هي المحادثة الفورية التي تجمع فضائل كلًا من الانترنت والهاتف. ظهرت المحادثات الفورية أول مرة في أواخر الثمانينات من القرن الماضي حين أنشأت Quantum Link برنامج On-Line Messages لحاسوب كومودور 64، ممهدة الطريق لبرامج المحادثات الفورية فيما بعد، ثم تحولت Q-Link إلى ما عرفت بعد ذلك بشركة AOL، شركة الاتصالات الشهيرة. وربما يُنظر إلى المحادثات الفورية على أنها مجرد طريقة يصل بها المستهلك إلى البائع، لكني أرى أنها لم تأخذ حقها في التطبيق في السوق بسبب وجود وسائط أخرى توفر خدمة دعم للعملاء، رغم أنها تزيد من رضى العملاء ومن ثم تزيد من المبيعات. أهمية المحادثات الفورية إن من ينظر للمحادثات الفورية على أنها مجرد تقنية أو وسيلة أخرى يمكن استخدامها للتعامل مع العملاء يتجاهل الفوائد الكثيرة التي تأتي من ورائها، فإن المستخدم مثلًا يراها حلًا أفضل له لأنه لن يضطر إلى الخروج من الموقع من أجل استفسار بسيط طرأ في ذهنه عن المنتج، بل يمكنه الحصول على المساعدة بضغطة زر. وقد قال 51% من المستخدمين أنهم أُعجبوا بالمحادثات الفورية لأنهم يستطيعون تنفيذ أكثر من عملية في نفس الوقت (تسوق – استفسار - ..) أثناء إجراء هذه المحادثة، أما ممثلي الدعم الفني فإن بإمكانهم إجراء أكثر من محادثة نصية في نفس الوقت أيضًا، مما يقلل من نفقات الشركة إذ أنها لن تضطر إلى توظيف المزيد من العاملين، على عكس الشركات التي تستخدم المكالمات الصوتية للدعم الفني. كما أن المحادثات الفورية تحسّن تجربة المستخدم لأنها توفّر توقيتات استجابة منضبطة، فقد وجدت دراسة أن 93% من الشركات لا تتبع قاعدة الخمس دقائق في الرد على العملاء، بل 7% فقط هم من يستجيبون للعملاء في أقل من خمس دقائق. فهذا جدير بالإشارة إليه، إذ أن خمس دقائق تأخير في الرد على الزائر للموقع تتسبب في خسارة الفوز به كعميل بنسبة 400%، وجدير بالذكر أيضًا أن العامل المشترك بين الشركات التي تقع تحت نسبة 7% السابقة هو أنها جميعًا تستخدم المحادثات الفورية. فليس بخافٍ أن خدمة العملاء الممتازة تزيد من المبيعات، فإن 38% من العملاء يقولون أنهم قد اشتروا منتجًا ما نتيجة محادثة فورية مع ممثل للشركة، كما وجدت دراسة للتسويق الإلكتروني أن 63% من العملاء يعودون إلى الموقع الذي أجروْا فيه محادثة فورية. والأهم من كل ذلك أن 92% من العملاء الذين يتسوقون عبر الإنترنت يفضّلون هذه الطريقة في خدمة العملاء، فما أريد قوله هو أن استخدام أدوات للتحدث مباشرة مع العملاء ليس صعبًا، بل هو مربح أيضًا إن نظرت إلى الإحصاءات التي تذكر رضى العملاء عن هذه الطريقة في التعامل معهم. إضافات محادثة فورية لووردبريس 1. Live Chat تُعد هذه الإضافة أفضل الأدوات الموجودة في السوق لتقديم خدمات الدعم الفني للعملاء للمواقع العاملة بووردبريس، وتسمح لأصحاب الموقع أن يتواصلوا مع العملاء من أجهزتهم المكتبية أو اللوحية أو حتى الهواتف، إضافة إلى أنهم لا يحتاجون أن يسجلوا الدخول إلى لوحة تحكم ووردبريس كي يستخدموا الإضافة. وبها خاصية تسمح لممثلي خدمة العملاء أن يرسلوا دعوات محادثة إلى العملاء بُناءً على معايير محددة مثل عدد الصفحات التي زاروها أو الوقت الذي قضوْه على الموقع، إضافة إلى مزايا أخرى مثل المراقبة في الوقت الحقيقي -real time monitoring-، ومشاركة الملفات، ونظام بطاقات يوفر دعمًا على مدار الساعة للعملاء، وهذه الأخيرة تمكّن العملاء من مراسلتك حتى لو لم تكن متاحًا مباشرة على الموقع. وتتكامل live chat مع تطبيقات الطرف الثالث مثل Zendesk أو إحصاءات جوجل أو تطبيقات إدارة العلاقات مع المستخدمين مثل Hubspot وSalesforce، إضافة إلى مواقع الشبكات الاجتماعية مثل فيس بوك وتويتر. وتبدأ أسعار هذه الإضافة من 16$ شهريًا لكل ممثل دعم فني في الشركة، إن دفعت الباقة بشكل سنوي على دفعة واحدة. 2. Zendesk Chat تأتي إضافة Zendesk chat من منصة خدمة العملاء الشهيرة Zendesk، وتتميز بواجهة جميلة التصميم يمكن تغيير القوالب المرئية فيها، إضافة إلى سهولة تثبيتها. كما توفر هذه الإضافة بادئات آلية للمحادثات مع العملاء يمكن تخصيصها (كأن تُفتح محادثةٌ مع العميل حين يبقى فترة معينة على الموقع أو يفتح عددًا معينًا من الصفحات)، وبها ويدجت-widget- مهيأة لتعمل على الهواتف، ولوحة تحليل متطورة. وهناك خطة أسعار مجانية لهذه الإضافة لكنها تسمح بممثل خدمة عملاء واحد فقط، وبمحادثة واحدة مفتوحة، بمعنى أنك ستتعامل مع العملاء واحدًا تلو الآخر. وقد تناسبك هذه الخطة إن كنت المالك الوحيد لموقعك وتقوم بنفسك على تجارتك بدون مساعدة أو توظيف لأحد، أما للاستخدام التجاري فإن خطط الأسعار تبدأ من 14$ شهريًا لكل ممثل دعم فني. 3. Olark يمكنك استخدام هذه الإضافة بعد إضافة شفرة قصيرة إلى القالب الفرعي"child theme” الذي تستخدمه، أو عبر رابطها في موقع ووردبريس. وإليك بعض من مزايا هذه الإضافة: تقارير عن المحادثات تكامل مع برامج Help Desk و CRM مثل Salesforce وZendesk وGroove. تصنيف ممثلي الدعم إلى مجموعات حسب الوظيفة التي يقومون بها. البحث في تاريخ المحادثات، حيث تحصل كل محادثة على تصنيف مفصّل لنشاط المستخدم على الموقع، ويمكن له أن يقيّم المحادثة بعد انتهائها. رؤية ما بداخل سلة تسوق المستخدم. وتبدأ أسعار Olark من 17$ شهريًا لكل ممثل دعم. 4. WP Live Chat Support تهدف إضافة WP Live Chat Support إلى خدمة الشركات التي تبحث عن حلول غير مكلفة للمحادثات الفورية مع العملاء، وتأتي بست قوالب لصندوق المحادثات، وإمكانية نقل صندوق المحادثة في أي مكان في صفحتك، وفتح محادثات مع العملاء دون حد أقصى لعددها، وتخزين محلي للرسائل، وتكامل مع تحليلات جوجل، إضافة إلى أنها لا تحتوي على إعلانات أو روابط، ويمكنك حجب الزوار من عناوين IP بعينها. والإضافة نفسها مجانية، لكن الباقة المدفوعة التي تشتريها لمرة واحدة مقابل 40$ تعطيك مزايا مثل عدد غير محدود من ممثلي الدعم الفني، والردود المحددة مسبقًا، ومعدلات رضى العملاء، والقدرة على إضافة صورة ممثل الدعم الفني لنافذة المحادثة. 5. Tidio Live Chat تعد إضافة Tidio من أسهل الإضافات في تثبيتها، حيث لا تتطلب إلا تفعيلها فقط، وتأتي في ثلاث تصميمات، وتستطيع تعديل اللون إلى ما يناسب هوية شركتك. وتوفر Tidio تطبيقات مخصصة لأجهزة سطح المكتب والهواتف، حيث يمكنك إدارة محادثاتك مباشرة منها، إضافة إلى ودجة تدعم المحادثات المباشرة بأكثر من 140 لغة. ويمكن للمستخدمين أن يصلوا إليك إن لم تكن متاحًا من خلال إرسال أسئلتهم عبر البريد الإلكتروني، ويمكنك الرد عليهم من خلال البريد أيضًا، بل إن Tidio تتكامل مع Zendesk وGetResponse وSalesforce وMailChimp. ويمكنك استخدام باقة مجانية في tidio تدعم ممثل دعم فني واحد ومحادثة واحدة مفتوحة، أما الباقات المدفوعة فتبدأ من 15$ شهريًا لكل ثلاثة موظفين للدعم الفني، ، مع إمكانية إضافة موظفين أكثر بتكلفة 10$ شهريًا للموظف. أو يمكنك اختيار باقة تكلفك 15$ شهريًا لكل 5000 زيارة فريدة للموقع. خاتمة لعلي أكون قد وُفِّقت في بيان هذه الإضافات وتوضيح مزاياها، وأرجو أن تكون قد رأيتَ وجهة نظري في أهمية المحادثات الفورية لكثير من المواقع هذه الأيام -خاصة مواقع التجارة الإلكترونية- حيث تطرأ تساؤلات في أذهان المستخدمين قبل أن يقرروا شراء منتج ما. ولتعلم أن إضافات المحادثة الفورية تقرّب المسافات بين موظفي الشركة وبين المستهلكين ليجيبوا عن أسئلتهم بسرعة، فيزداد ولاؤهم للشركة ومن ثم تزيد مبيعاتهم. وما عليك أن تشغل بالك بشيء بعد تثبيت هذه الإضافات إلا أن تتأكد أن لديك موظفين كفاية للرد على أسئلة العملاء. ترجمة -بتصرف- لمقال How to Setup Live Chat on WordPress لصاحبته Maddy Osman.
  2. إنَّ مزية الإضافات التي يدعمها تطبيق جداول بيانات جوجل هو ما يميز هذا التطبيق عن سائر التطبيقات المشابهة له مثل مايكروسوفت إكسل (Microsoft excel) إذ توسِّع هذه الإضافات عمل التطبيق وتضيف له مزايا جديدة ومفيدة لا يدعمها وقد يحتاجها المستخدم. سنستعرض في هذا المقال خمسة إضافات رائعة يمكن استعمالها مع تطبيق جداول بيانات جوجل. الإضافة الأولى: Template Gallery أول ما يُعرض عند فتح تطبيق جداول بيانات جوجل النسخة الإنجليزية هو بعض القوالب الجاهزة، ويمكنك أيضًا البحث عن قوالب واستعمالها مباشرةً مع التطبيق، ولكنَّ ذلك غير متوافر للنسخة العربيَّة حاليًا، لذا نضطر إلى إنشاء الجدول وتنسيقه يدويًّا. توفر القوالب حقيقةً علينا الوقت والجهد إذ كل ما علينا فعله هو البحث عن قالب مناسب يخدمنا وإضافته إلى حسابنا ثمَّ البدء باستعماله بسرعة. سنضيف في الخطوات التالية إضافة Template Gallery التي تحوي الكثير من القوالب الجاهزة. نختار من قائمة الإضافات ← الحصول على إضافات ونكتب في مربع البحث اسم الإضافة. نضغط على الإضافة لفتحها ثمَّ نقرأ بعض التفاصيل عنها أهمُّها تقييم تلك الإضافة وآراء المستخدمين عنها وأهم المزايا والخدمات التي تقدمها، ولا تتوافر هذه المعلومات باللغة العربيَّة في الوقت الحالي. إن كان تقييم الإضافة جيِّدًا وكانت خدماتها مناسبة نضغط على “مجانًا” أعلى يسار النافذة لإضافتها فتظهر صفحة تطلب منك اختيار حسابك على Drive. تظهر صفحة أخرى تعرض سياسة الخصوصيَّة والأذونات اللازمة لاستعمال الإضافة ثمَّ يُطلب منك الموافقة عليها. اقرأ الصلاحيات بعناية تامَّة قبل الضغط على “السماح” وتأكَّد أنَّ حسابك لا يحوي ملفاتٍ مهمَّة إذ تصبح الإضافة عند الضغط على “السماح” قادرة على الوصول إلى ملفاتك بحسب صلاحياتها وبذلك قد تكون ملفاتك عرضة للخطر أو سرقة المعلومات والبيانات من حسابك لذا كن حذرًا في هذا الأمر واقرأ تقييمات المستخدمين عن الإضافة وتقييمها الكلي وهل يمكن الوثوق بها. اضغط على إشارة التعجب بجانب كل إذن لإطلاع على تفاصيل أوسع عنه، وتوضِّح الصورة التالية تفاصيل إذن “عرض الملفات وإدارتها في Google Drive” التي تتطلبها الإضافة لذا انتبه لجميع التفاصيل ولا تهمل قراءتها. تُثبَّت الإضافة بعد الضغط على “السماح” وتظهر بعد ذلك في قائمة الإضافات. نتصفح القوالب المتوافرة عبر الإضافات ← Template Gallery ← ‏Browse templates فتظهر نافذة بجميع التصنيفات الموجودة. سنضيف قالبًا لا على التعيين إلى حسابنا لتجريبه؛ نختار من تصنيف القوائم وقوائم التحقق (lists and checklists) قالب “wedding checklist” وهو قالب للتحقق من متطلبات حفل الزفاف إذ نفتحه ونقرأ بعض المعلومات عنه ونضيفه إلى حسابنا في drive بالضغط على “copy to google drive”. و يمكننا بعدئذٍ فتحه بالضغط على “open” من النافذة نفسها أو الانتقال إلى Drive وفتحه. توجد الكثير من القوالب المفيدة يمكنك تصفحها وإضافتها ثمَّ استعمالها بالطريقة نفسها. لا تقتصر القوالب على هذه الإضافة إذ توجد الكثير من القوالب العربيَّة توفرها مواقع عدَّة منها قوالب Excel المجانيَّة من مايكروسوفت. الإضافة الثانية: Google Analytics تساعدك هذه الإضافة الجيِّدة من google على تحليل البيانات ومعالجتها بكفاءة عالية. تستطيع باستعمال هذه الإضافة: الاستعلام عن البيانات عبر معاينات متعدِّدة. إجراء حسابات مخصَّصة من تقرير بياناتك. جدولة التقارير لتشغيلها تلقائيًّا. التحكم بمن يستطيع رؤية بياناتك بالاستفادة من مزايا المشاركة والخصوصيَّة في جداول بيانات جوجل. تُثبَّت الإضافة بالطريقة نفسها، ويجب أن تملك حساب على Google Analytics لتستطيع استعمالها. الإضافة الثالثة: QR Code Generator تتيح لك هذه الإضافة إنشاء رمز استجابة سريع (QR code) من بيانات موجودة في جدولك. تستطيع توليد رموز متعدِّدة باستعمالها بتحديد مجال من البيانات، وتُحفظ الرموز في مستندات google أو في حسابك فيgoogle drive. تستطيع باستعمال هذه الإضافة إنشاء بطاقات تعريف الهوية (ID cards) للموظفين مثلًا تحتوي على رمز استجابة سريع. الإضافة الرابعة: Mapping Sheets إظهار البيانات الموجودة في الجدول على الخريطة شيء جميل جدًا خصوصًا إن كانت البيانات هي جهات اتصال لشركة أو عناوين المواعيد والمقابلات الأسبوعيَّة أو الشهريَّة أو عناوين وبيانات الأصدقاء والأقرباء في أبسط الأحوال. توفر هذه الإضافة إمكانيَّة ربط البيانات الموجودة في أحد جداول بيانات جوجل مع خرائط google ‏(google maps). تَقرأ الإضافة Mapping sheets البيانات من الجدول الموجود في تطبيق جداول بيانات جوجل أولًا ثمَّ تنشئ ملف ‎.json في حسابك في drive؛ يعاِلج بعدئذٍ تطبيق خرائط الويب الملف السابق ثمَّ يُظهر بياناتك على الخريطة مباشرةً. بعض مزايا الإضافة هي: ترشيح آني لكامل البيانات أثناء الكتابة في مربع البحث عند فتح الخريطة. توفير مربعات اختيار (checkboxes) لتجميع المواقع والبيانات في مجموعات وترشيحها بسهولة وهو يمثل المرشح الرئيسي. وجود خيارات ترشيح أخرى تتكامل مع المرشح الرئيسي السابق لاختيار نطاق معين من المواقع. إمكانيَّة ملائمة حجم الخريطة وتكبيرها أو تصغيرها وإظهار كل المواقع المحدَّدة عليها. وجود أيقونة مميزة على الموقع مع قابليَّة الضغط عليها لإظهار جميع البيانات والتفاصيل لذاك الموقع. إمكانيَّة إضافة ما يقارب50 موقع باستعمال الإصدار المجاني وعدد غير محدود للإصدار المدفوع. ملاحظة: يُقبل إدخال موقع باللغة العربيَّة شرط أن يكون العنوان صحيحًا ومفصولًا بفواصل مثل “شارع عمر الخيام، حلب، سوريا” وموجودًا على الخريطة وقد جرَّبت ذلك وقَبِله التطبيق وظهر الموقع على الخريطة. خطوات إنشاء الخريطة ومعالجة البيانات باستعمال هذه الإضافة هي: إدخال جميع البيانات المتعلقة بالخريطة على الجدول، أو إدراج جدول تجريبي يعرض كيفيَّة استعمال الإضافة. اختيار ثلاثة أعمدة الأول هو للعنوان (title) والثاني للترشح (filter) أو تجميع البيانات ضمن مجموعات والثالث للموقع. الضغط على بناء (build) لمعالجة البيانات. الضغط على إظهار (view) لفتح الخريطة ورؤية جميع المواقع عليها. الإضافة الخامسة: Lucidchart Diagrams هل تريد إضافة بعض الخرائط الذاكرية والمخططات المميزة بسهولة وسرعة؟ إليك هذه الإضافة التي تساعدك في ذلك إذ تحتوي على أنواع كثير من المخططات منها المخططات الذاكرية، ومخططات UML (لغة النمذجة الموحدة)، والمخططات الهيكلية (wireframes) وغيرها الكثير. بعض مزايا هذه الإضافة هي: احتوائها على مئات القوالب والأمثلة عن مختلف أنواع المخططات. تحديث المخططات المدرجة. سهولة الاستعمال، وإمكانيَّة التعديل على المخطط. التصدير بصيغ PDF و PNG و JPG. استيراد البيانات من Microsoft Visio ‏(‎.vsd و ‎.vsdx و ‎.vdx) والتصدير بصيغة ‎.vdx
  3. تعرَّفنا في درسنا السابق على خيارات الإدراج التي يوفرها تطبيق مستندات جوجل ومنها المعادلات والكائنات الرسوميَّة؛ سننتقل في درسنا هذا إلى محطة أخرى نتعرَّف فيها على بعض الخصائص التي يوفِّرها التطبيق. نبدأ أولًا بخياري إنشاء نسخة وتاريخ النُسخ ثمَّ سنتعرف بعدها على الإضافات وكيفيَّة تثبيت بعضًا منها وتشغيلها والاستفادة منها وكيفية إلغاء تثبيتها. إنشاء نسخة يُستعمل هذا الخيار لإنشاء نسخة من المستند المفتوح بغرض مشاركتها أو التعديل عليها بشكل منفصل عن النسخة الأصليَّة؛ عند إنشاء نسخة تُمسح جميع التعليقات الموجودة على المستند الأصلي. يمكن إنشاء نسخة عبر القائمة ملف ← إنشاء نسخة وتحديد مكان حفظها. لا تدعم النسخة العربيَّة من مستندات جوجل إدراج القوالب الجاهزة للأسف؛ عند فتح النسخة الإنجليزية يُعرض عليك خيارات عديدة من القوالب والنماذج الجاهزة كما يمكنك البحث ضمن جوجل عن أي نموذج أو قالب وإضافته مباشرةً إلى مستنداتك وهذا غير متوافر في النسخة العربيَّة. الحل هو البحث عن قوالب ونماذج جاهزة ثمَّ تنزيلها إلى حاسوبك وتحميلها وفتحها عبر تطبيق مستندات جوجل، بما أنَّه يدعم صيغ عدَّة، والتعديل عليها. يوفر موقع ورقي مكتبة هائلة من القوالب والتقارير والنماذج الجاهزة والمجانيَّة التي تعمل على تطبيقات مايكروسوفت أوفيس؛ يمكنك أيضًا استعمال قوالب جاهزة من مايكروسوفت حيث يمكنك اختيار القالب المناسب وتحمليه إلى تطبيق مستندات جوجل والتعديل عليه وهي مجانيَّة أيضًا . تاريخ النُسخ يوفر تطبيق مستندات جوجل ميِّزة حفظ نُسخ متعدِّدة من المستند تلقائيًّا أثناء كتابته أو تعديله وذلك للرجوع إليها واستعادتها عند الحاجة إلى ذلك، ولعرضها نختار من قائمة ملف ← تاريخ النسخة ← الإطلاع على سجل النُسخ. عند الضغط على خيار "الإطلاع على سجل النسخ" ينقلك التطبيق إلى صفحة معاينة لعرض النُسخ المحفوظة حيث يمكنك من القائمة الواقعة على اليسار اختيار نُسخة من تاريخ معين أو معاينتها والإطلاع على الاختلافات بينها وبين النسخة الحالية كما يمكنك معرفة الشخص الذي عدَّل على كل نسخة. يمكنك تسمية النسخ بأسماء محدَّدة مما يسهل عليك التمييز بينها عند الرجوع إليها وذلك إما بالضغط على الاسم (٨ أكتوبر، ٢:٠١ م) مثلًا وتغييره أو إضافة اسم جديد لكل إصدار عند فتح المستند عبر الخيار ملف ← تاريخ النسخة ← اختيار اسم للإصدار الحالي. عند الرغبة بالرجوع إلى إصدار سابق حدِّده واضغط على "استعادة هذه النسخة" لتصبح النسخة الحالية، ولا تقلق على النسخة التي كنت تعمل عليها لأنَّها ستُدرج ضمن قائمة النسخ السابقة ويمكنك استعادتها فيما بعد. الإضافات الوظيفة الأساسيَّة للإضافات هي توسيع عمل تطبيق مستندات جوجل وسائر التطبيقات (جداول البيانات والعرض التقديمي والنماذج) وإضافة مزايا جديدة لا يدعمها التطبيق. سنتعرف على الإضافات بشكل عملي إذ سنضيف بعض الإضافات ونشغلها ضمن المستند ونتعرف على المزايا التي وسَّعت من عمل التطبيق، ثمَّ سنزيل الإضافات التي لا حاجة لنا بها. تثبيت الإضافات وتشغيلها سنثبِّت إضافة جديدة عبر إضافات ← الحصول على إضافات فتظهر النافذة التالية: يمكننا البحث عن إضافة محدَّدة بكتابة اسمها في مربع البحث، أو يمكننا تصفية المحتوى بالضغط على "الكل" واختيار فئة معيَّنة. عند وضع مؤشر الفأرة فوق الإضافة يظهر شرح مبسَّط لوظيفتها وفي أسفل ذلك الشرح يوجد زر "مجانًا" لتثبيتها، وللمزيد من المعلومات حول الإضافة اضغط عليها؛ جميع الإضافات وشرحها باللغة الإنجليزية. ألم تلاحظ وجود عدد قليل من الخطوط؟ دعنا نبحث عن إضافة تتيح استعمال المزيد من الخطوط. سنكتب في مربع البحث "fonts" للبحث عن إضافة توفر المزيد من الخطوط. نجد إضافة اسمها "Extensis Fonts"؛ نضغط عليها لمعرفة الخدمات التي تزودنا بها فنجد أنَّها تتيح لنا الوصول إلى ما يزيد عن 1200 خط وهذا كاف. قررنا تثبيتها لذا نضغط على "مجانًا" أعلى يسار النافذة. ننتقل إلى نافذة جديدة يُطلب فيها تحديد اسم الحساب فنحدِّده ثمَّ تظهر رسالة تَطلب منك السماح للإضافة بالوصول إلى بياناتك والتعديل عليها وغيرها من الصلاحيات والأمر عائدٌ لك بالسماح أو الرفض. ثُبِّتت الإضافة بنجاح ولاستعمالها نشغلها عبر الخيار إضافات ← Extensis Fonts ← ‏start. تظهر قائمة في الطرف الأيسر موضحة بالصورة التالية: نحدِّد النص ونختار الخط المناسب من القائمة؛ جميع الخطوط مرتَّبة وفق الترتيب الهجائي لذا يمكن تحديد أي خط تعرف اسمه. نلاحظ تغير قائمة الخطوط ضمن البرنامج لتتوسع أكثر ويصبح بإمكاننا إضافة أي خط من الخيار "مزيد من الخطوط". يمكننا الآن إضافة أي خط وذلك بالبحث عنه بواسطة خطوط جوجل ثمَّ نأخذ اسم الخط المطلوب ونضغط على خيار "مزيد من الخطوط" ثمَّ نكتب اسم الخط ضمن مربع البحث في الأعلى ونضيفه إلى القائمة. إدارة الإضافات يمكن معرفة الإضافات المرتبطة مع المستند عبر الخيار إضافات ← إضافات المستند؛ يمكن فصل تلك الإضافات عبر الخيار إضافات ← إدارة الإضافات ثمَّ نحدِّد الإضافة ونضغط على "إدارة" ونُزِيلُ الإشارة الموجودة بجانب "استخدام في هذا المستند". يمكن إزالة الإضافة من القائمة السابقة نفسها عبر الخيار "إزالة". يوجد عدد هائل من الإضافات التي تلبي أغلب متطلبات المستخدمين لذا إن لزمك أي خدمة غير مدعومة في تطبيق مستندات جوجل فيمكنك البحث عن إضافة تلبي حاجتك. بعض الإضافات المفيدة: Translate: هي إضافة لترجمة الكلمات والجمل المحدَّدة لعدَّة لغات، وهي أداة مصغَّرة شبيهة بتطبيقات وأدوات الترجمة التي توفرها جوجل. Table formatter: إن كنت من مستخدمي تطبيق مايكروسوفت وورد فهذه الإضافة تتيح استعمال تنسيقات الجداول الجاهزة المشابهة لتلك الموجودة في تطبيق وورد. LucidChart Diagrams: تُستعمل لإدراج وإنشاء المخططات والخرائط الذاكريَّة بسرعة وسهولة. كل ما عليك فعله هو اختيار الشكل أو التصميم من بين المئات منها وسحبه إلى المستند. Table of content: تُستخدم لترقيم جميع العناوين والتعديل على جدول المحتوى. الخاتمة تعرَّفنا في هذا الدرس على بعض مزايا تطبيق مستندات جوجل وكان أهمها الإضافات التي توسِّع من الوظائف والخدمات التي يوفرها هذا التطبيق، وتجعله مرنًا ليخدم مختلف أنواع المستخدمين.
  4. تحدثنا في السابق عن بضع خطوات يمكنك تطبيقها لزيادة أمان وحماية موقعك العامل بسكربت ووردبريس الشهير. صحيحٌ أنّ نواة ووردبريس آمنة للغاية، ولكن يجب عليك تثبيت عدّة إضافات وملحقات إضافية لزيادة مستوى أمان موقعك. سنتحدّث في هذا الدرس عن أهم إضافات الأمان والنسخ الاحتياطي التي يمكنك تثبيتها وتفعيلها على سكربت ووردبريس الشهير. لماذا قد أحتاج إضافة للحماية؟ بشكلٍ عام، تقوم إضافات الحماية والأمان بتوفير طبقة إضافية من الحماية ضدّ هجمات Bruteforce والهجمات الأخرى والبرمجيات الخبيثة التي قد تصيب موقعك، يمكنها أيضًا أن توفّر لك عدّة أدوات يمكنك استخدامها لتقليل المخاطر الأمنية المحيطة بك، كما توفّر بعض الأدوات للمراجعات اليدوية الدورية أيضًا. هناك إضافات أخرى للنسخ الاحتياطي تمكّنك من استرجاع موقعك بسرعة في حال ما إذا تمّ اختراقه. لهذا، سنتطرّق الآن إلى أهم الإضافات للحماية والأمان والنسخ الاحتياطي التي يمكنك استخدامها. iThemes Security تعتبر هذه الإضافة شهيرةً جدًا عندما يتعلّق الأمر بمجال أمان ووردبريس. كانت هذه الإضافة تدعى بالسابق "WP Security" ولكن تمّ تغيير اسمها. توفّر لك هذه الإضافة عدّة طرق لحماية موقعك. في الواقع، تقوم إضافة iThemes Security بالعديد من الأمور التي ذكرناها بالدروس السابقة تلقائيًا، مثل تغيير اسم المستخدم الرئيسي ورابط صفحة تسجيل الدخول، إزالة وسم generator والمزيد. كما تعرض عدّة أدوات للحماية مثل فحوصاتٍ دورية لملفّات موقعك للبحث عن الثغرات الأمنية والملفّات الخبيثة إن وجدت، مما يحسّن من أمان موقعك، كما أنّها تقوم بحظر المستخدمين الذين يفشلون بتسجيل الدخول لأكثر من مرّة عن طريق الـIP، وتحظر ربوتات الاختراق الشهيرة، وتفرض على المستخدمين اختيار كلمات مرورٍ قويّة.. والمزيد. توفّر إضافة iThemes Security ميزات التنبيه، حيث يمكنها أن تقوم بتنبيهك عندما يتم إجراء تغييراتٍ ما دون صلاحيات. يمكنها أن تلتقط الروبوتات التي تحاول اختراقك ويمكنها أن ترسل رسالة بريدٍ إلكتروني في حال التقطت أيًّا منها. توفّر الإضافة ميّزة النسخ الاحتياطي كذلك، حيث أنّها قادرة على أخذ نسخة احتياطية من جميع ملفّات موقعك وتدويناتك التي نشرتها، ويمكنها استعادتها في أيّ وقتٍ تريده. هناك إصدارٌ مدفوع من الإضافة كذلك ويوفّر ميّزاتٍ أكثر. All in One WP Security & Firewall خيارٌ آخر متوفّر أمامك هو إضافة All in One WP Security & Firewall، تتميز هذه الإضافة بسهولة تثبيتها وإعدادها مما يجعلها خيارًا جيَدًا للمدونين الجدد. تتضمن أيضًا نظام تقييم للحماية يحدد لك مدى أمان موقعك بوضعه الحالي. يمكنك من هناك تفعيل أو تعطيل مميزاتٍ معيّنة للأمان والحماية في موقعك حسبما تريده. تسمح لك هذه الإضافة المجانية كذلك بإعداد العديد من إجراءات الحماية بمجرّد بضع ضغطات، مثل تغيير اسم المستخدم "admin"، التعرّف على المستخدمين الذين يمتلكون أكثر من حساب وتفعيل أداة تقوية كلمات المرور. كما تحتوي الإضافة على ميزة تمنع هجمات Bruteforce على موقعك عبر حظر محاولات تسجيل الدخول الفاشلة لأكثر من مرّة. يمكنك أيضًا فرض تسجيل الخروج على حسابٍ معيّن، تتبع سجل النشاط الخاصّ به والمزيد. تتضمن الإضافة أيضًا مزايا حماية قواعد البيانات والملفّات، بالإضافة إلى إمكانية إنشاء ملفّ htaccess. عبرها وعمل النسخ الاحتياطية لملفّ wp-config.php. هناك ميزة أخرى مهمّة بهذه الإضافة وهي ميّزة الجدار الناري، حيث تسمح لك بتعديل ملفّ htaccess. لتمنع المخترقين حتّى من الوصول إلى الشفرة الخاصّة بموقعك. كما أنّها تحتوي على فاحص ملفّات، الحماية من نسخ النصوص، حماية ضد هجمات السخام (Spam)، تحديثات تلقائية والمزيد. Sucuri Security Sucuri Security هي إضافة أخرى شائعة لحماية ووردبريس. تسمح لك ميزة SiteCheck المُضمّنة بالتحقق من حالة موقعك الحالية وفحصه لإيجاد الثغرات الموجودة به بالإضافة للبحث عن البرمجيات الخبيثة إن وجدت. تمكّنك الميزة كذلك من البحث عن جميع أنواع الثغرات، مثل ثغرات حقن قواعد البيانات، محاولات التصيّد الاحتيالي، إعادة التوجيه المشبوهة.. إلخ، كما يمكنها أن تلتقط أكواد جافاسكربت وPHP الخبيثة إن وجدت. تستخدم الإضافة أكثر من واجهة تطبيق برمجية واحدة (API) لفحص موقعك، أيّ أنّها تستخدم أكثر من قاعدة بيانات للشفرات الضارّة والخبيثة الموجودة على الإنترنت للتأكد من أنّ موقعك لا يحتوي على أحدها، مما يوفّر فحصًا شاملًا لموقعك، تتضمن هذه المصادر الخارجية أسماءً عريقة مثل Norton, McAfee.. إلخ. هناك بعض المزايا الموجودة بالإضافة والتي توفّر الحماية لمسار رفع ملفّات الوسائط الخاصّ بموقعك، حيث تقيّد الوصول إلى مجلّديّ wp-content وwp-includes، تتحقق من إصدارات PHP ووردبريس وتعطّل محرر الإضافات والقوالب من لوحة التحكم. Wordfence Security تحدّثنا من قبل عن إضافة Wordfence Security، وقلنا أنّها من أهم إضافات الحماية لسكربت ووردبريس. بمجرّد تثبيتها على موقعك فإنّها ستقوم بعملية فحصٍ شامل للشفرة المصدرية للتأكّد من أنّها مطابقة للشفرة المصدرية الخامّة المنشورة من موقع ووردبريس الرئيسي، إذا اكتمل الفحص بنجاح، فإنّ الإضافة تقوم بعدها تلقائيا بتفعيل خيارات الحماية لزيادة أمان موقعك. هناك إصدار مدفوع ومجاني من الإضافة، كلاهما يعتمدان على منصّة "Wordfence Cloud"، مما يعني أنّ عملية الفحص وتفعيل الجدار الناري بالواقع تجريان على خواديم الشركة المطوّرة للاستضافة وليس على خادومك مما يقلل من الحمل الموجود عليه. توفّر هذه الإضافة دعمًا لأكثر من موقع ووردبريس في آنٍ واحد، تسجيل الدخول عبر الهاتف المحمول، دعم للإضافات الشهيرة مثل WooCommerce، الاستيثاق الثنائي، فرض كلمات المرور القوية، فحص الملفّات والمزيد. تتضمن الإضافة أيضًا جدارًا ناريًا لحماية موقعك من الروبوتات، البرمجيات الخبيثة وهجمات Bruteforce. بمجرّد تثبيتها فإنك ستكون قادرًا على حظر المهاجمين واتصالات الشبكات المشبوهة، وكلّه في الوقت الحقيقي (Real time). BruteProtect تمّ شراؤها مؤخرًا من قبل شركة Automattic (الشركة المطوّرة لووردبريس)، إضافة BruteProtect هي أحد الحلول الأمنية التي يمكنك استخدامها لصدّ هجمات Bruteforce بالتحديد. توفّر الإضافة أدواتٍ لمراقبة الهجمات الحالية على موقعك في حال حصولها بالوقت الحقيقي بالإضافة إلى التحديث التلقائي لنواة ووردبريس في موقعك. الإضافة ليست مجهّزة لحمايتك ضد الهجمات الأخرى، بل فقط ضدّ هجمات Bruteforce فلا تعتمد عليها لوحدها. Acunetix WP Security Acunetix WP Security هي إضافةٌ أخرى مجانية لفحص موقعك بسهولةٍ ويسر. تمكّنك من إعداد صلاحيات الملفّات، تأمين قاعدة البيانات، إخفاء إصدار ووردبريس الحالي الذي تستخدمه عن أعين المخترقين، تغيير اسم المستخدم admin والمزيد. تتوافق الإضافة مع مواقع ووردبريس المتعددة (multisite) وعمليات النسخ الاحتياطي، كما تتضمّن أداةً تعمل بالوقت الحقيقي لعرض من يتصفّح موقعك حاليًا وماذا يتصفّحون. Bulletproof Security آخر إضافة ووردبريس سنتحدث عنها هي إضافة Bulletproof Security. توفّر هذه الإضافة العديد من المزايا التي توفّرها الإضافات الأخرى مثل ملفّات htaccess. ، حفظ نسخة احتياطية من قاعدة البيانات، سمات مختلفة لواجهة الإضافة والمزيد. يتضمّن الإصدار المدفوع منها المزيد من المميزات مثل التثبيت بنقرة واحدة، الاستعادة التلقائية، جدار ناري يتعامل مع عناوين الـIP للمستخدمين، مسجّل للأخطاء، حامٍ من هجمات Bruteforce، حظر عناوين IP معيّنة والمزيد. أهمّية إضافات النسخ الاحتياطي بجانب إضافة قويّة للحماية والأمان، فإنّه يجب عليك استخدام إضافةٍ أخرى لعمليات النسخ الاحتياطي، معظم هذه الإضافات السابق ذكرها يتضمّن الميّزتين بالواقع مما يسهّل عليك الأمر، ولكن لا تنسى بتاتًا استخدام النسخ الاحتياطي. القيام دوريًا بعمل نُسخ احتياطية من موقعك هو أمرٌ مهم لخطّة أمان كاملة، وإلّا فكيف تتوقع أن تقوم باسترجاع موقعك في حال تمّ اختراقه مثلًا؟ هناك العديد من الإضافات الجيّدة للنسخ الاحتياطي مثل VaultPress ،WordPress Backup to Dropbox و BackupBuddy. تتنوّع هذه الإضافات ما بين المدفوعة والمجانية، ولكنّها مفيدة لضمان عدم فقدان أيّ شيء مهم يتعلّق بموقعك. الخاتمة صحيحٌ أنّه يمكنك القيام بالعديد من الأمور يدويًا لتحسين حماية ووردبريس، ولكن استخدام الإضافات قد يوفّر عليك الكثير من الوقت ويوفّر لك الكثير من المميزات، خاصةً لو كنتَ تمتلك أكثر من موقع ووردبريس واحد. الإضافات السابق ذكرها يجب أن تؤدّي المهمّة المطلوبة بالنسبة لك ويمكنك تجريبها جميعًا لتصل إلى أفضلٍ واحدةٍ منها بالنسبة لك. في الدرس الأخير من هذه السلسلة سنتحدث عن أهمية تحديث ووردبريس وإضافاته لزيادة أمان موقعك. ترجمة -وبتصرف- للمقال The WordPress Developer’s Guide to Security: Security & Backup Plugins لصاحبته Brenda Barron.
  5. هل ترغب في تعلّم برمجة إضافات ووردبريس؟ هذه السّلسلة أُعدّت خصّيصًا لك. سنتعرف في هذه السّلسلة على كل ما تحتاجه لتطوير أوّل إضافة لك على ووردبريس، وفق النّهج التّالي: 1. مُقدّمة إلى برمجة إضافات Wordpress: ستتعرّف في هذا المقال على ماهية إضافات ووردبريس، الأسباب التي تدفعك إلى إنشاء إضافة، وكيف تبني أوّل إضافية بسيطة. 2. برمجة إضافات ووردبريس: الخُطّافات (Hooks) : في هذا المقال ستتعرّف على مفهوم الخّطافات في ووردبريس والتي تعد من أهم الخصائص التي يوفرها ووردبريس والتي جعلته مرنًا وقابل للتمدد بصورة قل أن تجد لها نظيرًا في برمجيات الويب. 3. استقبال وحفظ خيارات (وبيانات) الإضافة: سنتعرف في هذا الدّرس على أنسب الطّرق لحفظ الخيارات العامةللإضافة، وكيفيّة إضافة صفحة إعدادات Settings Page في لوحة التحكم تمكن المستخدم من إدخال وتعديل الخيارات الخاصة بالإضافة 4. نظرة شاملة على قاعدة بيانات ووردبريس: في هذا المقال ستتعرّف على جداول قاعدة بيانات ووردبريس ودور كل جدول بالإضافة لأهم محتوياته وارتباطه بالجداول الأخرى، بالإضافة إلى ذكر بعض الطرق التي يوفرها ووردبريس للتعامل مع البيانات. الآن وبعد أن كوّنت صورة واضحة على كيفية برمجة إضافة ووردبريس، نختم السّلسلة بمثال عملي: 5. مثال عملي لبرمجة إضافة ووردبريس- الجزء الأوّل 6. مثال عملي لبرمجة إضافة ووردبريس- الجزء الثّاني
  6. تُسهِّل برمجية ووردبريس إنشاءَ صفحاتٍ ومنشوراتٍ محميةٍ بكلمة مرور، وهذه ميزةٌ رائعة إذا أردتَ تقييد الوصول إلى محتوى معيّن، لكن المشكلة الوحيدة هي أنَّ أيّة صور أومقاطع فيديو تَعرِضُها في تلك الصفحات ستبقى متاحةً للوصول من صفحات الوسائط المرفقة. يمكن أن يتحول الأمر إلى إشكالية رئيسية إذا كانت تحتوي ملفات الوسائط على معلومات مهمة التي تريد أن تبقى محميةً بكلمة مرور. أحدحلول هذه المشكلة هو إلغاء دعم صفحات الوسائط (attachment pages) في ووردبريس كليًّا، مما يعني أنَّ على زوار موقعك الوصول إلى المنشور (أوالصفحة) المحمي بكلمة مرور لرؤية المحتوى. سننظر في هذا الدرس إلى طريقتين لحل هذه المشكلة.فأولًا سنحلّ المشكلة بإنشاء «قالب ابن» (child theme) وكتابة بعض الشيفرات؛ ثم سنشرح كيف نستخدم إضافةً مجانيةً لفعل ذلك تلقائيًا. متى نخفي صفحات الوسائط؟ لنقل أنك كتبتَ درسًا تعليميًا رائعًا، وكان معروضًا في صفحةٍ وحيدةٍ، وبلغ طوله بضعة آلاف من الكلمات، إضافةً إلى مقطع فيديو أو أكثر، وعدد لا بأس به من الصور التوضيحية. سنفترض أنَّك لا تريد إنشاء متجر لبيع الدورات التعليمية وإنما توفِّر في بعض الأحيان محتوى مدفوع، لذا لن تكون مهتمًا بتثبيت نظام إدارة دورات تعليمية كامل مثلCoursePressPro. حيث اخترتَ حماية الصفحة بكلمة مرور التي ستُرسِلها بطريقةٍ مؤتمتة إلى البريد الإلكتروني للشخص الذي سيدفع لقاء الوصول إلى الدرس. سأفترض أنَّك وجدتَ حلًّا بسيطًا الذي يساعدك في ما سبق دون أن يتطلب جهدًا أو وقتًا طويلًا منك. لكن بعد عدِّة أسابيع أدركتَ وجود مشكلة، حيث شارك أحدهم صورةً من مقالتك على وسائل التواصل الاجتماعي مستعملًا رابط URL لصفحة الوسائط المرفقة، وتلك الصفحة يمكن الوصول إليها مباشرةً دون إدخال كلمة مرور. وما يزيد الطين بلّةً أنَّ القالب الذي تستعمله يُضيف روابط (للصورالتالية والسابقة) إلى صفحة المرفقات مما يسمح للزوار بالتنقل بسهولة بين جميع الصور التي أرفقتها بالمنشور المخفي! حسنًا، دعني أخبرك أنَّ هذه المشكلة سهلة الحل جدًا… إخفاء صفحات المرفقات باستخدام الشيفرات إذا توفر لديك عميل FTP ومحرر نصي، فيمكنك حلّ هذه المشكلة بسرعة عبر إنشاء «قالب ابن». كل ما عليك فعله هو إضافة سطرٌ واحدٌ إلى ملف image.php ويمكنك–اختياريًّا– إضافته إلى ملف video.php. إذا ألقيتَ نظرةً إلى البنية الهيكلية لقوالب ووردبريس فستلاحظ أنَّ أكثر ملف تخصيصًا يمكن إنشاؤه لصفحة المرفقات هو ملفٌ باسم MIME_type.php وهذا يعني أنَّه لو كانت لديك صورٌ ومقاطع فيديو في صفحةٍ محميةٍ بكلمة مرور، فستحتاج إلى إخفاء صفحة المرفقات لكلا النوعين، وستحتاج إلى تعديل ملفٍ مختلفٍ لكل نوع من الوسائط. لنبدأ بملف image.php،لكن قبل أن تبدأ بتعديل أيّة ملفات، فتأكد أنَّك تستعمل «قالب ابن». بعد إنشاء وتفعيل القالب الابن، أنشِئ ملفًا باسم image.php على حاسوبك، وافتحه باستخدام المحرر النصي المفضَّل لديك، وأضف إليه السطر البرمجي الآتي: <?php wp_redirect(get_permalink($post->post_parent)) ; ?> احفظ الملف وأغلقه، ثم ارفعه إلى مجلد الجذر للقالب الابن الذي أنشأتَه منذ قليل. عندما يحاول أحدهم الوصول إلى صفحة المرفقات للصور، فسيتم تحميل ملف image.php وسيؤدي إلى إعادة توجيه المتصفح إلى المنشور المرتبط بتلك الصورة، وهذا هو السلوك الذي نرغب به؛ فأيُّ شخصٍ يحاول الوصول إلى صفحة المرفقات الخاصة بالصور التابعة للمنشور المحمي بكلمة المرور سيُعاد توجيهه إلى الصفحة المحمية بكملة المرور، وعليه عندئذٍ إدخال كلمة المرور للوصول إلى تلك الصفحة. لإضافة حماية إلى صفحات المرفقات الخاصة بمقاطع الفيديو، أنشِئ ملفًا باسم video.php وأضف إليه نفس السطر السابق. هذاحلٌ بسيطٌ جدًا لإخفاء صفحات المرفقات باستخدام الشيفرات؛ لكن إذا كنتَ تُفضِّل إتمام الأمر دون استعمال محرر نصي وعميلFTP، فأود أن أبشِّرَك بوجود حلٍ آخر… إخفاء صفحات المرفقات باستخدام إضافة إذا أردتَ تفادي إنشاء قالب ابن وكتابة (أونسخ ولصق) السطر البرمجي السابق، فيمكنك استخدام إضافة لإعادة توجيه كل صفحات المرفقات. إضافة AttachmentPages Redirect هي إضافةٌ مجانيةٌ متاحةٌ على WordPress.org التي تؤدي الغرض الواضح من اسمها: إعادة توجيه جميع صفحات المرفقات إلى صفحة المنشور الأصلي الموجودةُ فيه (إعادة توجيه دائمة 301)،أو إلى الصفحة الرئيسية (إعادة توجيه مؤقتة 302) إذا لم تكن تلك الوسائط مرفقةً إلى أحد المنشورات. هنالك أكثر من 10000 موقع يستعمل هذه الإضافة، ولها تقييم 4.7 من 5 نجوم. للبدء باستخدام إضافة Attachment Pages Redirect اذهب إلى«Plugins > Add New» (الإضافات> أضف جديد) في لوحة تحكم ووردبريس وابحث عن العبارة «Attachment Pages Redirect»، ثم اضغط Install (تثبيت) ثم Activate (تفعيل). لا تحتاج إلى ضبط أيّ شيءٍ آخر. افتح متصفحك وحاول عرض صفحة أحد المرفقات،وستجد أنَّه قد تمت إعادة توجيهك إلى صفحة المنشور الأصلي أو إلى الصفحة الرئيسية للموقع. لا تظن أنَّ هنالك حماية كاملة لمرفقاتك لا تضمن الطريقتان اللتان شرحناهما في هذا الدرس أنَّ الزوار يجب أن يستعملوا كلمة مرور للوصول إلى الصور أو مقاطع الفيديو التي تُضيفها إلى منشوراتك المحمية؛ لكن دعني أوضِّح لك أنَّه لا توجد أيّة طريقة لحماية المرفقات حمايةً تامةً. فمثلًا، يستطيع المستخدمون الذين يملكون وصولًا إلى المرفقات (عبر إدخالهم لكلمة مرور صحيحة) أن ينسخوا محتواك بكل سهولة عبر: تفحص شيفرة الصفحة المصدرية والعثور على روابط URL مباشرة لملفات الوسائط أو عبر استخدام برمجيات لأخذ لقطات شاشة للصور أو تسجيل محتوى الفيديو عند تشغيله. هنالك خطواتٌ إضافية يمكنها التصدي لهذه المحاولات مثل إعادة التوجيه من طرف الخادوم (sever-level redirects) مما يمنع الوصول المباشر إلى ملفات الوسائط،وعبر استخدام JavaScript لمنع نسخ محتواك. لكن إذا كان المستخدم عاكفًا على نسخ مقالتك والوصول إلى ملفات الوسائط، فسيجد طريقةً للالتفاف على وسائل الوقاية التي استعملتها. في النهاية، أريد أن أُذكِّرك أنَّه لا توجد طريقةٌ لحماية ملفات الوسائط، ففي اللحظة التي تسمح بها لأيّ شخص بالوصول إليها،فلن تستطيع الاحتفاظ بالقدرة على التحكم بالمحتوى، لذا أبقِ هذا في بالك في كل مرة تُضيف فيها المحتوى في موقعك، حتى لو كنتَ «تحمي»المنشورات عبر كلمة مرور (يجب أن تكون مدركًا بعد قراءتك لما سبق أنَّه لا توجد حماية مطلقة للمحتوى). إذا لم تكن تريد رؤية الصور أو مقاطع الفيديو التي ترفعها إلى موقعك مسروقةً ومنشورةً في أحد المنتديات، فلا ترفعها إلى موقعك من الأساس. الخلاصة الميزة المُضمَّنة في ووردبريس لحماية المنشورات بكلمة مرور تُسهِّل من إنشاء محتوى خاص ومحمي، لكنها لا تحمي المرفقات والوسائط المُضافة إلى الصفحات والمنشورات التي لا تستطيع الوصول إليها إلا بكلمة مرور. الحل بسيطٌ جدًا. إذ يمكنك إعادة توجيه صفحات المرفقات إلى المنشور الأصلي الذي أُرفِقَت الوسائط به عبر سطرٍ برمجيٍ وحيد، وإذا لم تكن تريد أن تُضيع وقتك بكتابة ذاك السطر، فإضافة Attachment Pages Redirect ستساعدك في ذلك. ترجمة-وبتصرّف-للمقال [Howto Hide Media Attachment Pages in WordPress] لصاحبهJon Penland
  7. في الدرس السابق من هذه السلسلة بدأنا بتطوير إضافة عداد المشاهدات حيث قمنا بإضافة عدد المشاهدات لكل مقال ومتابعته كما قمنا بتوفير شيفرة مختصرة Shortcode لعرض عدد مشاهدات أي مقال، وتبقى لنا أن نبرمج ويدجت لعرض المقالات الأكثر مشاهدة وهذا ما سنقوم به في هذا الدرس بالإضافة لبعض الإقتراحات لتطوير الإضافة في نسخها القادمة ونختم هذا الدرس والذي هو الأخير في هذه السلسلة باستعرض بعض الأدوات المفيدة لمطوري إضافات ووردبريس. برمجة ويدجت المقالات الأكثر مشاهدةلبرمجة ودجت جديد في ووردبريس تقوم ببساطة بإنشاء صنف class جديد يرث الصنف الأساسي للويدجات الذي يوفره ووردبريس حيث تعتمد هذه الجزئية على البرمجة الكائنية ولكن لا تقلق إن كان هذا المصطلح لم يمر عليك من قبل فإن التطبيق لا يحتاج منا سوى كتابة أربعة دوال: الأولى هي الدالة الأساسية للويدجت والتي نعرف فيها اسم ووصف الودجت. والثانية لعرض خيارات الويدجت في لوحة تحكم ووردبريس (في القائمة المظهر – الودجات) .والثالثة لحفظ خيارات الويدجت عندما يقوم المستخدم بتعديلها.والرابعة هي ما سيتم عرضه في واجهة الموقع (الشريط الجانبي) عند إستخدام الويدجت. وإذا أردت أن تتعمق أكثر في برمجة الويدجات يمكنك مراجعة مقال كيف تبني ودجت لووردبريس. ملف widget.phpبالطبع سنكتب جميع الشيفرات المتعلقة ببرمجة الويدجت في هذا الملف، ولنبدأ بكتابة صنف الودجت وفيه الدوال الأربعة السابقة بدون تفصيل كالآتي: class HA_Views_Widget extends WP_Widget { // البيانات الأساسية للودجت (مثل اسم ووصف الودجت) public function __construct() { } // عرض خيارات الويدجت في لوحة تحكم ووردبريس public function form( $instance ) { } // لحفظ خيارات الويدجت عندما يقوم المستخدم بتعديلها public function update( $new_instance, $old_instance ) { } // ما سيتم عرضه في واجهة الموقع (المقالات الأكثر مشاهدة) public function widget($args, $instance ) { } }الأن سنقوم بإعلام ووردبريس أنه لدينا ودجت جديد من خلال تسجيله كالآتي: // تسجيل الويدجت من خلال إضافة الدالة أدناه للحدث widget_init add_action( 'widgets_init', 'ha_widget_init' ); function ha_widget() { register_widget( 'HA_Views_Widget' ); }لاحظ أن الدالة ()register_widget تستقبل مُعاملًا واحدًا وهو اسم صنف الودجت الذي نود تسجيله وهو في حالتنا هذه HA_Views_Widget كما اخترناه في الأعلى. بعد ذلك لنقم بكتابة تفاصيل الدوال التي عرفناها أعلاه. الدالة constructفي هذه الدالة نقوم ببناء الودجت من خلال تمرير البيانات الأساسية للودجت وهي الاسم والوصف بالإضافة للمعرف وكذلك اسم صنف CSS الذي سيقوم ووردبريس بإضافة للودجت، ويتم ذلك بهذه الطريقة: $widget_details = array( 'classname' => 'ha_views_widget', 'description' => 'ودجت لعرض المقالات الأكثر مشاهدة' ); parent::__construct( 'ha_views_widget', 'المقالات الأكثر مشاهدة', $widget_details );الان ستجد أن الودجت ظهرت في لوحة تحكم ووردبريس بالاسم والوصف اعلاه. الدالة formنود أن نضيف للمستخدم خيار لاختيار عدد المقالات الأكثر مشاهدة التي يود عرضها في واجهة الموقع وخيار آخر لاختيار عنوان الودجت الذي سيظهر أعلى المقالات، وهذا ما ستقوم به هذه الدالة فهي المسؤولة عن إنشاء النموذج form الذي سيظهر للمستخدم في لوحة التحكم، وهذه هي الصورة النّهائية لها: public function form( $instance ) { $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'count' => '' ) ); $title = strip_tags($instance['title']); $count = $instance['count']; ?> <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('العنوان:'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p> <p><label for="<?php echo $this->get_field_id('count'); ?>"><?php _e('عدد المقالات:'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="text" value="<?php echo $count; ?>" /></p> <?php }الدّالة updateهذه الدالة مهمتها بسيطة جدا وهي حفظ خيارات المستخدم عندما يقوم بتعديلها من خلال الضغط على زر الحفظ، وهي ببساطة تقوم بإرجاع القيم الجديدة للخيارات بالصورة التالية: public function update( $new_instance, $old_instance ) { return $new_instance; }الدالة widgetسنقوم من خلال هذه الدالة بعرض اكثر المقالات مشاهدة وذلك من خلال استخدام حلقة ووردبريس لجلب المقالات وذلك باستخدام صنف WP_Query والذي يمكننا من تحديد المقالات التي نود جلبها وفي حالتنا هذه نود جلب أعلى المقالات مشاهدة اعتمادًا على قيمة الميتا post_meta التي استخدمناها سابقا لحفظ عدد المقالات، أي أننا نود جلب المقالات مرتبة على حسب قيمة الميتا ha_post_views_count ولحسن الحظ يوفر صنف WP_Query طريقة سهلة لإنشاء مثل هذا الاستعلام. وهذه هي صورة الاستعلام: $count = ( ! empty( $instance['count'] ) ) ? $instance['count'] : 5 ; $query_args = array( 'meta_key' => 'ha_post_views_count', 'orderby' => 'meta_value_num', 'posts_per_page' => $count ) $query = new WP_Query($query_args);حيث أننا باختيار قيمة orderby لتكون على حسب meta_value_num أي على حسب قيمة الميتا وهي قيمة عددية، وكذلك قمنا باختيار عدد المقالات المعروض ليساوي count$ وهي القيمة التي سيدخلها المستخدم والتي نستطيع التوصل إليها من خلال المتغير instance$ الذي يتم تمريره للدالة والذي من خلاله يمكنك الوصول للبيانات التي قام المستخدم بإدخالها في لوحة التحكم. في حالة لم يقم المستخدم باختيار عدد المقالات المعروضة سيتم عرض 5 مقالات. الآن لم يتبقَ لنا سوى إنشاء الحلقة وعرض عناوين وروابط المقالات وكذلك عنوان الودجت لتصبح الصورة النهائية لهذه الدالة كالاتي: public function widget($args, $instance ) { $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : 'المقالات الأكثر مشاهدة' ; $count = ( ! empty( $instance['count'] ) ) ? $instance['count'] : 5 ; $query_args = array( 'meta_key' => 'ha_post_views_count', 'orderby' => 'meta_value_num', 'posts_per_page' => $count ); $query = new WP_Query($query_args); if($query->have_posts()): ?> <?php echo $args['before_widget']; ?> <?php if ( $title ) { echo $args['before_title'] . $title . $args['after_title']; } ?> <ul> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <li> <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a> </li> <?php endwhile; ?> </ul> <?php echo $args['after_widget']; ?> <?php wp_reset_postdata(); endif; }وبهذا نكون قد أكملنا برمجة الودجت ولا تنس إضافة بعض التنسيقات للودجت في ملف widget.css والذي قمنا بصفه سابقا. اقتراحات لتطوير الإضافةكانت هذه النسخة الأولى من الإضافة بالتالي تحتوي على المميزات الأساسية ويمكنك إضافة المزيد من المميزات في النسخ القادمة وسنقترح عليك بعض التطوير لتتدرب عليها، وهي: إضافة خيار في الشيفرة المختصرة shortcode لإدخال معرف المقال الذي تود عرض عدد مشاهداته، فربما يود المستخدم عرض عدد مشاهدات مقال ما داخل مقال آخر.إضافة المزيد من الخيارات للودجت مثل اختيار المدة الزمنية للمقالات المعروضة، مثلا أشهر المقالات خلال هذا الأسبوع.التعديل على ما يعرضه الويدجت وكذلك تنسيقه، كأن تعرض مثلا صور بارزة للمقالات الأكثر مشاهدة.يمكنك تحميل أو نسخ الإضافة من هذا الرابط. أدوات مفيدة لمطوري إضافات ووردبريسهنالك بعض المصادر والمواقع والأدوات التي توفر لك كثيرًا من الجهد والوقت عند برمجة إضافات ووردبريس خصوصا مع شهرة ووردبريس فهذا يعني أن هنالك العديد من الأسئلة التي قد تخطر ببالك قد تم الإجابة عنها مسبقا وبعض الأشياء التي تود برمجتها ربما سبقك بها بعض المطورين وقاموا بإتاحتها لمجتمع المطورين ولا ننسى المصادر الرائعة التي لا غنى لك عنها في كثير من الأحيان، وإليك بعض هذه الأدوات. مكتبات وفئات Classes جاهزة1- WordPress Plugin Boilerplateوهي عبارة عن نموذج جاهز أو أساس يمكنك استخدامه لبناء إضافتك، وما يميزها أنه تم بناءها من قبل المطور المشهور Tom McFarlin كما أنه تم بنائها بأسلوب برمجة الكائنات Object Oriented Programming بالتّالي تعتبر بالفعل أساسًا جيّدًا لإضافة قابلة للتطوير. فوق ذلك هنالك مولد يمكنك استخدامه لإنشاء ملفات إضافتك بالاعتماد على هذا النموذج. 2- CMB2وهذه عبارة عن مكتبة جاهزة للتعامل مع الحقول المُخصصة Custom fields لأنواع المقالات المختلفة Post Types وكذلك الحقول والبيانات الخاصة بالمستخدمين User Meta كما يمكنك استخدامها لإنشاء صفحات الخيارات Options Page ويمكنك دمجها في مشروعك بسهولة. تدعم هذه المكتبة عددًا كبيرًا جدًا من الحقول المتقدمة ويمكنك إضافة أنواع جديدة بسهولة حيث توفر مجموعة كبيرة من الخطافات Hooks التي تسهل من عملية التعديل عليها وزيادة مميزاتها بدون لمس الشيفرات الأساسية. ولا ننسى أن نذكر أن هذه المكتبة والنسخة الأولى منها CMB لقيت قبول ورواج كبير بين مطوري ووردبريس. 3- Settings API Classفي بعض الأحيان يكون التعامل مع Settings API بطيئًا وربما مُتعبًا بعض الشّيء، في مثل هذه الحالات يمكنك استخدام هذه الصّنف الجاهز التي تُسهّل التّعامل مع هذه الواجهة البرمجية، خصوصا إذا لم ترد أن تُثقل مشروعك بمكتبات كبيرة. إضافات للمطورين1- إضافة Developerهذه الإضافة تساعدك في عملية التطوير وبعد تنصيب الإضافة تعرض عليك اختيار ما تقوم بتطويره (إضافة، قالب) وبعدها تعرض عليك مجموعة من الإضافات التي تعمل معها لتنصيبها كما موضح في الصورة: وإليك بعض أهم هذه الإضافات: Debug Bar وكما يظهر من اسمها حيث تعرض قائمة لعمل Debug للاستعلامات Query والـ Cache ومجموعة أخرى من المعلومات المفيدة لعمل Debug.Rewrite Rules Inspector وهي عبارة عن أداة لتحليل قواعد إعادة كتابة الروابط links rewrite rules.log Viewer توفر لك طريقة سهلة لعرض ملفات Log عن طريق لوحة تحكم ووردبريس مباشرة.2- إضافة Query Monitorتقوم هذه الإضافة بعرض معلومات متعلقة باستعلامات قاعدة البيانات مثل الأداء Performance للاستعلامات وكذلك الخطافات Hooks وغيرها من المعلومات المفيدة التي تساعدك في تتبع الأخطاء وزيادة كفاءة وسرعة استعلامات قاعدة البيانات. مواقع ومصادر1- التّوثيق الرّسمي لووردبريس WordPress Codexببساطة إذا أردت احتراف برمجة ووردبريس فليكن هذا مصدرك الأول. يحتوي على توثيق للدوال والأصناف والخطافات التي يوفرها ووردبريس كما يحتوي على بعض المصادر والمراجع بل وحتى على كُتب للمطورين. 2- القسم الخاص بووردبريس في موقع StackExchangeفي كثير من الأحيان تقابلك بعض المشاكل التي قد لا تجد لها إجابة في المصادر المعروفة وعندها ربما تحتاج الى طرح هذه المشكلة على المختصين وهذا الموقع من أنسب المواقع لطرح الأسئلة المتعلقة بووردبريس. 3- مجموعة Advanced WordPress على فيس بوكنعم هذه مجموعة على فيس بوك لكنها مختلفة نوعا ما فهي تجمع مجموعة كبيرة من محترفي ووردبريس ومطوري بعض الإضافات الشهيرة مثل Joost de Valk مطور إضافة WordPress SEO by Yoast المشهورة. 4- رابطة مطوري ووردبريس (باللغة العربية)على غرار المجموعة السابقة هذه مجموعة أخرى تجمع عدد كبير من مستخدمي ومطوري ووردبريس العرب، بالتالي هي مكان جيد لتبادل الأفكار والآراء وحتى الأسئلة. 5- موقع ManageWP.orgهذا الموقع يبقيك على إطلاع دائم على آخر المقالات المتعلقة بووردبريس من مختلف المواقع، حيث يمكن للأعضاء مشاركة المواضيع المتعلقة بووردبريس وتقييمها، لذلك يستحسن أن يكون هذا الموقع في مفضلتك للعودة إليه بصورة يومية. 6- موقع wpsnippمجموعة من الشيفرات الجاهزة لعمل أشياء مختلفة ربما تفيدك. 7- موقع WP-Snippetsشبيه بالموقع السابق.
  8. بعد أن تطرّقنا إلى أساسيات تطوير إضافات ووردبريس حان الوقت لنقوم بإنشاء إضافة لتطبيق بعض ما تعلمناه. وهذا ما سنقوم به في هذا الدرس والدرس الذي يليه من خلال إنشاء إضافة تقوم بإضافة مربع جانبي لعرض المقالات الأكثر مشاهدة في موقع ووردبريس مع إمكانية عرض عدد المشاهدات في كل مقالة. التخطيط للإضافةلنبدأ بتحديد الأمور التي ستقوم بها الإضافة: إحصاء عدد المشاهدات لكل مقال.توفير شيفرة مختصرة Shortcode لعرض عدد مشاهدات المقال في أي مكان.توفير ودجت Widget لعرض المقالات الأكثر مشاهدة.وذلك من خلال: الاستفادة من البيانات الإضافية للمقال Post Meta لإضافة حقل بيانات جديد للمقالات يستخدم في حفظ واسترجاع عدد المشاهدات.الاستفادة من Shortcode API التي يوفرها ووردبريس لإنشاء الشيفرة المختصرة.الاستفادة من Widget API التي يوفرها ووردبريس لإنشاء الودجت واستخدام صنف WP_Query للحصول على المقالات مرتبة على حسب عدد المشاهدات.برمجة الإضافةدعنا في البداية نقوم بالتخطيط لجميع الملفات والمجلدات التي سنقوم بإنشائها لبرمجة الإضافة. تركيبة الملفات والمجلداتلنبدأ أولا بإنشاء مجلد للإضافة يحمل الإسم: ha-views-widget وأظن أنه اختصار جيد لاسم الإضافة واستخدامنا في البداية الحرفين ha كاختصار ل Hsoub Academy :). وبالطبع سنضع هذا المجلد في مجلد إضافات ووردبريس (ونحن نفترض أنك قمت بتنصيب ووردبريس مسبقا) والموجود في المسار wp-content/plugins. بعد ذلك سنقوم بإنشاء ملف php بنفس اسم المجلد وهو ha-views-widget.php وهذا الملف هو الملف الأساسي للإضافة وسيحتوي على الترويسة التي بها معلومات الإضافة والتي تعرفنا عليه في الدرس الأول من هذه السلسلة وبالتالي سيحتوي على هذه الترويسة: /** * Plugin Name: Hsoub Views Widget * Plugin URI: http://academy.hsoub.com/ * Description: إضافة صغيرة تقوم بإضافة مربع جانبي لعرض المقالات الأكثر مشاهدة في موقع ووردبريس مع إمكانية عرض عدد المشاهدات في كل مقالة. * Version: 1.4.0 * Author: Adil Elsaeed * Author URI: http://adilelsaeed.com * Text Domain: ha-widgets * Domain Path: /lang/ * License: GPL2 */بالطبع يمكننا أن نكتب جميع شيفرات php الخاصة بالإضافة في هذا المجلد لكن هذه ليست فكرة جيدة خصوصا إذا أردنا إنشاء إضافة سهلة التطوير والمراجعة، لذلك سنخصص ملفًا لإنشاء ومتابعة عدد المشاهدات وليكن باسم views.php وملف آخر لإنشاء الودجت وليكن باسم widget.php (لاحظ أنه داخل مجلد الإضافة يمكنك تسمية الملفات بأي اسم بدون خوف من التعارض مع ملفات ووردبريس الأخرى)، كما أننا سنحتاج لملف آخر لإنشاء الشيفرة المختصرة وليكن باسم shortcode.php ويمكننا أن نضع هذه الملفات الثلاثة داخل مجلد باسم includes للمحافظة على المجلد الرئيسي للإضافة مرتبًا. وبالطبع ما دمنا سنكتب بعض شيفرات html فإننا سنحتاج لتنسيقها من خلال CSS وهذا يعني أننا نحتاج لملف لوضع شيفرات CSS هذه، لذلك سنقوم بإنشاء مجلد أخر باسم css وبداخله ملف widget.css. هذه كل الملفات والمجلدات التي سنحتاج إليها في هذه النسخة الأولى من الإضافة. الملف الأساسي للإضافةفي الملف الأساسي للإضافة سنقوم أولا بتعريف بعض الثوابت التي سنحتاج إليها لاحقا، حيث سنحتفظ بكل من مسار الإضافة ورابطها URL وكذلك النسخة الحالية للإضافة كثوابت بالصورة التالية: if ( !defined( 'SDG_PLUGIN_DIR' ) ) { define( 'HA_VIEWS_DIR', plugin_dir_path( __FILE__ ) ); } if ( !defined( 'HA_VIEWS_URL' ) ) { define( 'SDG_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); } if ( !defined( 'HA_VIEWS_VER' ) ) { define( 'SDG_PLUGIN_VER', '1.1.0' ); }لاحظ أننا استخدمنا الدالتين plugin_dir_path و plugin_dir_url اللتين يوفرهما ووردبريس حيث تُرجعان مسار الإضافة ورابطها على التوالي. ثانيا سنقوم بتضمين ملفات php التي أنشأناها سابقا حتى ينفذ ووردبريس الشفرات الموجودة فيها ويتم تضمينها من خلال require_once كالآتي: // الملف المسؤول عن عدد المشاهدات require_once HA_VIEWS_DIR . 'includes/views.php'; // الملف المسؤول عن الويدجت require_once HA_VIEWS_DIR . 'includes/widget.php'; // الملف المسؤول عن الكود المختصر require_once HA_VIEWS_DIR . 'includes/shortcode.php';ثالثا وأخيرًا سنقوم بصف ملف الCSS الخاص بتنسيق الويدجت من خلال استخدام الحدث wp_enqueue_scripts ويمكنك معرفة المزيد حول التعامل مع ملفات CSS في ووردبريس بالإطلاع على مقال صف و تسجيل ملفات CSS في ووردبريس. وهذه هي الطريقة التي سنصف بها ملف widget.css: add_action('wp_enqueue_scripts', 'ha_scripts'); function ha_scripts(){ wp_enqueue_script( 'sdg-admin', HA_VIEWS_URL . 'css/widget.css', array(), HA_VIEWS_VER); }حفظ وتحديث عدد المشاهداتلننتقل الآن إلى ملف views.php حيث سنقوم بإضافة عداد المشاهدات لكل مقال من خلال بيانات الميتا الخاصة بالمقال post meta حيث سنقوم بإنشاء الدالة ha_set_post_views والتي تقوم بتحديث عدد المشاهدات للمقال عند زيارته ولنضمن تنفيذها عند كل مقال سنقوم بإضافتها للحدث wp_head والذي يتم تنفيذه في ترويسة Header كل صفحات الموقع. ويتم إضافة الدالة إلى هذا الحدث بالصورة التالية: add_action('wp_head', 'ha_set_post_views');أما بالنسبة للدالة نفسها فهذه هي صورتها: function ha_set_post_views() { // إذا لم يكن هذا مقال مفرد (صفحة أو مقال) لا تنفذ أي شيء if(!is_singular()){ return; } // الوصول إلى بيانات المقال الحالي global $post; $post_id = $post->ID; $count_key = 'ha_post_views_count'; // استرجاع العدد الحالي للمشاهدات $count = get_post_meta($post_id, $count_key, true); if($count==''){ // هذا يعني أنه لم يتم إنشاء الميتا الخاص بحفظ عدد المشاهدات حتى الان $count = 0; delete_post_meta($post_id, $count_key); add_post_meta($post_id, $count_key, '0'); // إنشاء الميتا الخاص بحفظ عدد المشاهدات }else{ // زيادة عدد المشاهدات بمقدار مشاهدة واحدة $count++; // حفظ الميتا التي حفظنا فيه عدد المشاهدات update_post_meta($post_id, $count_key, $count); } }لعل التعليقات تشرح الدالة بصورة واضحة لكن دعنا نوضح الأمور أكثر، قمنا في هذه الدالة أولا باستخدام الدالة is_singular والتي تتحقق إن كان المعروض حاليا صفحة مقال مفرد (مقال، صفحة، مقال مخصص) أم لا (صفحة تصنيف مثلا أو أرشيف أو غيرهما) وفي حالة لم يكن المقال مفردًا يتوقف تنفيذ الدالة لأن مهمتها تحديث عدد المشاهدات للمقالات والصفحات والمقالات المخصصة فقط وليس بقية صفحات الموقع (الأرشيفات أو التصنيفات أو غيرها). ثانيا قمنا باستخدام المتغير العام (global) الذي يوفره ووردبريس وهو post$ والذي يحفظ فيه بيانات المقال الحالي (الذي يتم عرضه) حتى نحصل على معرف المقال الحالي من أجل استخدامه في تحديث عدد مشاهداته. ثالثا قمنا باستخدام الدوال update_post_meta، get_post_meta، add_post_meta و delete_post_meta والتي تمكننا من إضافة ميتا مخصصة للمقال واسترجاعها وحذفها وتحديثها على التوالي. وكما تلاحظ قمنا بالتأكد من أن عدد المشاهدات لا يساوي قيمة خالية (غير موجود) وفي حالة أنه غير موجود يتم إنشاؤه وفي حالة أنه موجود يتم زيادته بمقدار واحد وهذه كل مهمة الدالة. استرجاع عدد المشاهداتفي هذا الملف أيضا (أعني ملف view.php) سنقوم بإنشاء دالة أخرى تقوم باسترجاع عدد المشاهدات للمقال الحالي حتى نستخدمها لاحقا في الشيفرة المختصرة shortcode، وهذه هي الدالة: function ha_get_post_views(){ // الوصول إلى بيانات المقال الحالي global $post; $post_id = $post->ID; $count_key = 'ha_post_views_count'; $count = get_post_meta($post_id, $count_key, true); if($count==''){ delete_post_meta($post_id, $count_key); add_post_meta($post_id, $count_key, '0'); return "0 مشاهدة"; } return $count.' مشاهدة'; }ليس هنالك الكثير مما يحتاج إلى شرح فقط قمنا باستخدام الدالة get_post_meta لاسترجاع قيمة الميتا ha_post_views_count وإعادتها في حالة كانت القيمة غير خالية وإعادة صفر في حالة كانت القيمة خالية وفي هذه الحالة تقوم أيضا بإضافة الميتا. برمجة الشيفرة المختصرة shortcodeفي هذه الجزئية سنعتمد على الواجهة البرمجية التي يوفرها ووردبريس حيث سنستخدم الدالة add_shortcode والتي لها الصورة التالية: <?php add_shortcode( $tag , $func ); ?>حيث: tag$ هو اسم الشيفرة المختصرة التي سيستخدمها المستخدم في حالتنا هذه سنسميها ha_views وسيقوم المستخدم بإستدعائها بالصورة التالية [ha_views] في المقال أو الصفحة. func$ هي الدالة المسؤولة عن إرجاع محتويات الشيفرة المختصرة أي ما تقوم به الشيفرة المختصرة وفي حالتنا هذه الدالة عبارة عن دالة ترجع عدد المشاهدات للمقال الحالي وهذه هي الشيفرة النهائية في ملف shortcode.php function ha_views_shortcode( $atts ){ return ha_get_post_views(); } add_shortcode( 'ha_views', 'ha_views_shortcode' );لاحظ أن الدالة ha_views_shortcode تقوم فقط بإرجاع القيمة المرجعة من الدالة ha_get_post_views والتي عرفناها مسبقا في ملف views.php والتي بدورها ترجع عدد المشاهدات للمقال الحالي. ولن نتطرق إلى شرح المزيد من التفاصيل حول الدالة add_shortcode تجنبا للإطالة وربما نخصص لها مقالا مفردا بعد نهاية هذه السلسلة إن شاء الله. سنكتفي بهذا القدر في هذا الدرس وفي الدرس الأخير من هذه السلسة سنكمل –إن شاء الله- برمجة الإضافة (حيث تبقى فقط برمجة الويدجت الذي يعرض أكثر المقالات مشاهدة)، كما سنلقي بعض الضوء على مجموعة من الأدوات والمواقع المفيدة لمطوري إضافات ووردبريس.
  9. إن دمج وسائل التواصل الاجتماعي مع موقعك هو أمر مهم للغاية -خاصة هذه الأيام- فهو سيساعدك على الانتشار والاشتهار سواء كنت تملك مدونة بسيطة أو شركة متعددة الجنسيات. توجد العديد من الملحقات التي ستساعدك على إضافة فيسبوك وتويتر وغيرها إلى موقعك، لكن من السهل أن تضيع بين المئات من الخيارات في قسم ملحقات ووردبريس. فعلى الرغم من وجود العديد من الملحقات المجانية إلا أن أغلبها تُرفع إلى قسم المُلحقات وتُنسى، ونادرا ما تجد ملحقًا يحصل على تحديثات مُستمرّة. في حين أنه لا يمكنك الاعتماد على ملحقات أخرى بسبب بطئ دعمها أو أنها لا تُقدّم مساعدة على الإطلاق. هذا هو السبب الذي يجعل الملحقات المدفوعة خيارًا موثوقًا لك ولمشروعك، فإن دعم المطورين والشركات عند الدفع للملحقات سيفعّل المميزات والخيارات والخدمات التي لا يمكنك الحصول عليها مجانا. إليك قائمة بـ 10 ملحقات مدفوعة الأجر ستمنحك دفعة قوية لنشر موقعك على مواقع التواصل الاجتماعي، وتعمل هذه الملحقات على النسخة المنفردة من ووردبريس أو النسخة متعددة المواقع من ووردبريس على حدٍ سواء. Social Marketing رابط تحميل الملحق يسمح لك هذا الملحق بإنشاء إعلان لموقعك مع عرض يظهر لزوارك عند نشرهم لموقعك، ويتميز هذا الملحق بسهولة إعداده وإنشاء الإعلان بطريقة مشابهة للتعامل مع التدوينات (post). عندما تفعّل الملحق، سيتم توجيهك مباشرة إلى صفحة الملحق في لوحة التحكم (dashboard) ويجب عليك إنهاء ثلاثة خطوات من الإعدادات حتى تتمكن من وضع الإعلان في موقعك، وهذه الإعدادات واضحة للغاية وسترى نتائج رائعة بعد أن تقوم ببضعة تعديلات فقط. يمكنك أيضا الاختيار بين قوالب جاهزة أو إنشاء قالب خاص بك والذي يمكنك تكييفه بسهولة مع احتياجاتك. Floating Social رابط تحميل الملحق يضع هذا الملحق أزرار مواقع التواصل الاجتماعي قابلة للتمرير scrollable على صفحتك أو تدوينتك في المكان الذي تختاره، وستبقى الأزرار ظاهرة للزوار عند تَنقُلِهم في صفحتك. لا توجد إعدادات كثيرة، عند الانتهاء من اختيار لون الخلفية ومواقع التواصل الاجتماعي التي تريد أن تضيفها وبعض الإعدادات الأخرى فستكون جاهزة للعمل. على الرغم من أن الإعدادات واضحة للغاية، إلا أنه توجد إعدادات متقدمة تتضمن اختيار Z index وإضافة شيفرات CSS مخصصة. ستجد أن أزرار التواصل الاجتماعي ستتحرك بسلاسة وستظهر بشكل جيد أيضا. Slide In رابط تحميل الملحق يعرض ملحق Slide In نافذة منبثقة مع نص مخصص على جانب الصفحة يحتوي على تدوينات ذات صلة بالتّدوينة الحالية أو نموذجًا للاشتراك في قائمتك البريدية على MailChimp. يمكنك وضع أزرار مواقع التواصل الاجتماعي في الأسفل أو يمكنك إنشاء عرض خاص ووضع هذه الأزرار حتى يتمكن الزوار من مشاركته على حساباتهم على مواقع التواصل الإجتماعي. إعدادات هذا الملحق بسيطة ويتم إنشاء محتوى النافذة المنبثقة عن طريق محرر مشابه لمحرر نشر التدوينات، ويوجد رابط في الإعدادات سيُمكنُك من معاينة النافذة المنبثقة قبل إضافتها إلى موقعك. Ultimate Facebook رابط تحميل الملحق سُمي هذا الملحق بهذا الاسم لما يوفره من خيارات التكامل مع فيسبوك، فأيًا كان ما تريده سواء كان إضافة زر الإعجاب أو النشر أو تعليقات فيسبوك أو السماح للمستخدمين بتسجيل دخولهم عن طريق حساب فيسبوك، فإن Ultimate Facebook يوفر كل ذلك. سيتمكن زوارك من التفاعل مع موقعك بسهولة أكبر ومن دون تسجيل حساب جديد في موقعك، وستتمكن من تعزيز تجربة المستخدم وكل ذلك موجود في ملحق واحد. يمكن أن تكون الإعدادات صعبة في البداية لأنه يجب عليك إعداد تطبيق فيسبوك، لكن الخطوات مشروحة بشكل جيّد لذلك سيكون من السهل اتباعها، وإذا واجهت أية مشكلة فستحصل على مساعدة من فريق الدعم، وعند الانتهاء من إعداد التطبيق، ستكون بقية الإعدادات سهلة. Pay with a Like رابط تحميل الملحق يسمح لك Pay with a Like بإخفاء المحتوى في موقعك إلى حين أن يقوم زائرك يإعجاب أو بنشر مشاركتك وبذلك سيزداد عدد زوار موقعك إذا أحسنت استخدام الملحق. عندما قمتُ بإعداد هذا الملحق وفعّلتُه على مشاركاتي عن طريق الصدفة، لاحظتُ ارتفاعًا كبيرًا في أعداد زوار موقعي، ولقد عمل بشكل أفضل عندما أظهرت بعض التفاصيل في مشاركتي وتركت الجزء الأكبر من الموضوع الرئيسي مخفيًِا حتى يتم الإعجاب like أو يتم نشر المشاركة. يمكنك أيضا استخدامه للتسويق لعروضك المجانية ككتاب إلكتروني أو سلسلة فيديوهات، ويتميز هذا الملحق بسهولة إعداده، فستنتهي من ذلك في رمشة عين. + Comments رابط تحميل الملحق لن تزعجك التعليقات غير المرغوب بها عند توفيرك لخيار التّعليق باستخدام حسابات شبكات التواصل الاجتماعي، وهذا ما يفعله ملحق Comments + وسيزيد بذلك الألفة لزوارك. يمكنك أيضا اختيار نشر التعليقات على حسابات الزوار التي قاموا بتسجيل دخولهم بها لجذب مزيد من الناس إلى موقعك، وإذا كان تعجبك ميزة تعليقات ووردبريس الافتراضية لكنك تريد إضافة آلية الشبكات الاجتماعية فهذا الملحق يفعل ذلك أيضا. يمكن أن تكون الإعدادات صعبة قليلا لأنك ستحتاج إلى إعداد تطبيقات على مواقع شبكات الاجتماعية التي اخترتها لكن صفحة الإعدادات ترشدك من بشكل واضح، وإذا واجهتك مشكلة، يمكنك الاستعانة بفريق الدعم للمساعدة. The Google+ Plugin رابط تحميل الملحق يسمح لك ملحق +Google بإضافة أزرار المشاركة إلى تدويناتك (posts) وصفحاتك كما يسمح لك في نفس الوقت بتتبعها عن طريق استخدام خدمة Google Analytics ويمكنك اختيار تجاوز الإعدادات العامة (global) للمشاركات ووضع إعدادات خاصة لكل منشور. يمكنك أيضا النشر في موقعك عن طريق Google+، فتوجد شيفرات قصيرة shortcode ستساعدك على اختيار نمط مشاركات +Google وإضافة أزرار 1+ حسب حاجتك. بمجرد أن تتمكن من إعداد مشروع جوجل للحصول على مفتاح API، سيكون من السهل إنهاء إعداد هذا الملحق، فالإرشادات متوفرة بشكل مُباشر على صفحة الإعدادات، وإذا واجهت أية مشكلة فسيساعدك فريق الدعم. YouTube Featured Video رابط تحميل الملحق يساعدك هذا الملحق على عرض فيديوهات يوتيوب في أي مكان في موقعك مثل الشريط الجانبي، ويمكنك أيضا اختيار كيفية تشغيل الفيديوهات بما في ذلك نافذة منبثقة أنيقة عند النقر على الفيديو. هذه طريقة رائعة لإحياء الاهتمام بفيديوهاتك القديمة أو الترويج لفيديوهاتك الجديدة، ويمكنك أيضا إظهار الفيديوهات ذات الصّلة بناءا على محتوى الصفحة أو المشاركة وهذا سيساعدك على إبقاء الزوار في موقعك لفترة أطول. الإعدادات والخيارات بسيطة وواضحة للغاية، فيمكنك بسهولة تشغيل الفيديوهات المميزة على موقعك في بضعة دقائق. Comment Form Text رابط تحميل الملحق يسمح لك هذا الملحق بإضافة محتويات إلى منطقة التعليقات، فباستخدام بضعة أسطر برمجية، يمكنك إضافة أي شيء من الإعلانات إلى أزرار مواقع التواصل الاجتماعي. هذا الملحق مرن (flexible) يسمح لك بالإبداع حسب قدراتك البرمجية. عملية التثبيت أطول قليلا من الملحقات الأخرى، وعلى الرغم من ذلك، هنالك إرشادات ستساعدك على تثبيت الملحق، وإذا واجهة أية مشاكل، يمكنك التواصل مع فريق الدعم. + Google Analytics رابط تحميل الملحق يسمح لك هذا الملحق بالتحقق من إحصائيات موقعك من لوحة التحكم الخاصة بالمدير مباشرة ولن تضطر إلى الدخول إلى حسابك على Google Analytics مرّة أخرى. وستتمكن من رؤية معلومات تفصيلية لموقعك أو لشبكتك التي تتكون من عدة مواقع. إن عملية تثبيت وإعداد هذا الملحق سهلة للغاية، وستتمكن من الوصول إلى إحصائيات ضخمة حول الزوار على الفور. الخاتمة هذه الملحقات التّجارية ستساعدك على تحقيق أكبر انتشار لموقعك على مواقع التواصل الاجتماعي، استخدم واحدة منها أو أكثر حسب حاجتك. يوجد العديد من الأسباب لدمج مواقع التواصل الاجتماعي مع موقعك، لكن ما هي أسبابك؟ شاركنا تجربتك وانضم إلينا في المحادثة في التعليقات أسفل المقال. ترجمة -وبتصرف- للمقال: 10 Premium WordPress Plugins for Maximizing Your Site’s Social Sharing لصاحبته Jenni McKinnon.
  10. يعد ووردبريس من أحد أكثر نظم إدارة المحتوى (CMS) قوة. فهو يتميز بإمكانية تعديله وتطوعيه حسب رغبتك. كما يمنحك القدرة على إضافة الميّزات والتعديل على التصاميم وكذلك إضافة قسم للمواضيع المميزة في غضون دقائق معدودة. بإمكانك مشاهدة العديد من الخصائص الموجودة في قائمة الودجات Widgets مثل التصنيفات، آخر المواضيع والأرشيف. ولكن ماذا لو أردّت أن تسلط الضوء على بعض المقالات المميزة ليشاهدها القراء على موقعك. تسمّى هذه الخاصّية عادة بـقسم المواضيع المميزة أو المواضيع ذات المحتوى المميز. بإمكانك أن تجد هذه الإضافة Plugin بسهولة في قسم تحميل أدوات ووردبريس. ولكن من الجيّد أنه بإمكانك أن تضيفها يدويًا باستخدام بعض الشيفرات والدوال Functions. مُلاحظة: لا يركّز هذا الدرس على التصميم الخاص بقسم المواضيع المميزة، بل ينصب التركيز على الجانب التطبيقي لعملية إنشاء القسم وعرضه، ولك كامل الحرية في تغيير تنسيقات CSS لتعديل التصميم وتشكيله حسب رغبتك. المتطلبات اللازمة لإكمال الدرس: تحميل وتثبيت ووردبريس.الخبرة الكافية بـ Wordpress Codex و PHP.الوقت و الصبر.ما الذي ستقوم ببنائه: قم بتحميل النسخة النهائية من هنا الشروع في العملسنستخدم قالبًا افتراضيًا يسمى Test-theme. وهو مكوّن من مجموعة Template (غير مكتملة) ستُستخدم لغرض إظهار قسم المواضيع المميزة فحسب. يمكنك تحميله من هنا أو قم باستخدام أي قالب Theme آخر تفضِّله لإكمال الدرس. سيركز الدرس على الخصائص التالية: إضافة صندوق meta box (على هيئة Checkbox) إلى الصفحات/المقالات.تخزين معلومات صندوق المُحتوى (meta box).إظهار قسم المواضيع المميّزة على الصفحة الرئيسية للموقع.الخطوة الأولى: إضافة صندوق محتوى meta box إلى الصفحات/المقالاتقم بفتح ملف function.php، وأضِف الشيفرة التالية لإدراج صندوق الاختيار checkbox. سيقوم الكود بإنشاء صندوق محتوى meta box سيظهر في شاشة تحرير الصفحات/المقالات على شكل صندوق اختيار checkbox. function add_featured_meta_box($post){ $featured = get_post_meta($post->ID, '_featured-post', true); echo "<label for='_featured-post'>".__('Feature this post?', 'foobar')."</label>"; echo "<input type='checkbox' name='featured-post' id='featured-post' value='1' ".checked(1, $featured)." />"; } إذا أراد المستخدمون إضافة أيّة مقالات إلى قسم المواضيع المميزة على الصفحة الرئيسية أو أي صفحة أخرى، سيكون بإمكانهم فعل ذلك ببساطة عن طريق الضغط على مربّع الاختيار. ولكن بيانات المقال لن يتم تخزينها في هذه المرحلة، لأننا لم نضف بعد كود حفظ بيانات صندوق المحتوى. الخطوة الثانية: تخزين بيانات صندوق المحتوى (meta box)قم بفتح ملف function.php مرة أخرى، وأضِف الشيفرة التالية أسفل شيفرة add_featured_meta_box الذي أضفناه في الخطوة السابقة. function save_featured_meta($post_id){ if (isset($_REQUEST['featured-post'])) update_post_meta(esc_attr($post_id), '_featured-post', esc_attr($_REQUEST['featured-post'])); } add_action('save_post', 'save_featured_meta');ستقوم هذه الشيفرة بالتأكّد من أن المقال قد تم تحديده ليظهر في قسم المواضيع المميزة، ومن ثم سيقوم بتحديث البيانات أو حِفظها في قاعدة البيانات مُستخدمًا دالة تحديث بيانات الميتا الخاصّة بالمقال update_posts_meta، هذه الدالة ستقوم بتحديث قيمة value مفتاح بيانات الميتا meta_key الخاص بالموضوع المحدد. ستقوم الشيفرة قبل كل شيء بالتأكد من أن مفتاح بيانات الميتا meta_key$ موجود بالفعل على المعرِّف الفريد الخاص بالمقال post_id$، وفي حال عدم وجوده، سيتم استعداء الدالة التالية عوضا عنه: add_post_meta($post_id ,$meta_key ,$meta_value)الخطوة الثالثة: إظهار قسم المواضيع المميزة على الصفحة الرئيسية للموقعسنقوم في هذه الخطوة بإظهار قسم المواضيع المميزة على الصفحة الرئيسيّة للموقع، ولفِعل ذلك، قم بإضافة الشيفرة التالية إلى القالب Template الذي ترغب فيه، وقم كذلك باختيار المكان الذي تراه مناسبًا لظهور القسم على الصفحة. في هذا الدرس، تمَّ إضافة الكود إلى ملف الصفحة الرئيسية index.php، وتمَّ تحديد موقع قسم المواضيع المميزة ليظهر في الشريط الجانبي sidebar للصفحة. <h2>Featured Posts</h2> <?php $args = array( 'posts_per_page' => 5, 'meta_key' => '_featured-post', 'meta_value' => 1 ); $featured = new WP_Query($args); if ($featured->have_posts()): while ($featured->have_posts()): $featured->the_post(); ?> <h3><a href="<?php the_permalink();?>"> <?php the_title();?></a></h3> <p class="details">By <a href="<?php the_author_posts();?>"><?php the_author();?></a> / On <?php echo get_the_date('F j, Y');?> / In <?php the_category(', ');?></p> <?php if (has_post_thumbnail()): ?> <figure> <a href="<?php the_permalink();?>"><?php the_post_thumbnail('', array('class' => 'box' ));?></a> </figure> <p><?php the_excerpt();?></p> <?php endif; endwhile; else: endif; ?> ستعمل الشيفرة ببساطة على تحليل المصفوفة المسؤولة عن عدد المواضيع المميزة لعرضها، وكذلك تحليل القيم Value و المعرف الفريد ID الخاص بها. ستقوم بعد ذلك باستخدام صنف WP_Query للاستعلام عن مواضيعك المميزة. قم بعمل حلقة loop للمواضيع المميّزة على الشريط الجانبي واحصل على تفاصيل المقال مثل العنوان، الروابط الدّائمة Permalink والكاتب ..إلخ. مُلاحظة: تمَّ إضافة تنسيق CSS للقالب الافتراضي المُستخدم، وبإمكانك التعديل عليه حسب رغبتك وفي أي وقت تشاء. إذا قمت بمُراجعة الصفحة الرئيسية للموقع، فإنّك ستجد النتيجة ظاهرة كما في الصورة التالية: الخاتمةتهانينا، لقد قمت بإنشاء أول قسم للمواضيع المميزة بنفسك باستخدام صندوق المحتوى met box وبعض الشيفرات والدّوال، إذا لم تكن مرتاحًا لهذه العملية، فبإمكانك استخدام إضافاتٍ Plugin مثل: TSP Featured Posts أو Featured Postes Widget. أتمنّى أن يكون هذا الدرس مفيداً لكم، وإذا كان لديكم أيّة طريقةٍ أخرى لإضافة قسم للمواضيع المميزة إلى ووردبريس، فلا تبخلوا بمشاركتها معنا على التعليقات. ترجمة ـوبتصرف- للمقال: http://www.1stwebdesigner.com/create-featured-posts-section. حقوق الصورة البارزة: Designed by Freepik.
  11. تحدّثنا في المقال السّابق عن البحث الدلالي، كيفية عمله ولماذا نحتاجه، وسنتحدث في هذا الجزء عن استخدام وتحسين البحث الدلالي في ووردبريس. كيفية تحسين البحث الدلالي في ووردبريس الآن وبعد أن تطرّقنا إلى بعض التفاصيل حول ماهية البحث الدلالي، وكيفية عمله، ولماذا يجب علينا الاهتمام به، يمكن أن نبدأ بالتركيز على الطرق التي يمكننا بها تحسين موقع ووردبريس الخاص بنا وفقًا لذلك. وقد تم تقسيم العملية إلى عدد من الخطوات الرئيسية. 1. فكر بالمستخدم النهائي إن الجزء الأكبر من تحسين البحث الدلالي يدور حول ما يريده المستخدم النهائي، وقد تحدّثنا عن ذلك في الجزء الأول. ولكن من وجهة نظر قابلة للتنفيذ فإنّه من المهم أن تأخذ بعض الوقت للتفكير فيما يريده جمهورك المستهدف. فكّر فيما يأمل أن يجده زائرك المثالي عندما يصل إلى موقع الويب الخاص بك. بعد ذلك، يجب عليك أن تأخذ بعين الاعتبار ما قد يبحثون عنه كي تحسّن من فرصة ظهور موقعك في نتائج البحث. قد يستغرق هذا الأمر قليلًا من التفكير للاقتراب من الجواب ولكن النتيجة النهائية ستجعل موقع الويب الخاص بك يفهم احتياجات زوّارك لأنه قد تم إنشاؤه بعد الأخذ بعين الاعتبار ما يريده الجمهور وتوقّعاتهم منه. إنّ الفكرة خلف البحث الدلالي هو معرفة ما يريده المستخدم وتقديم نتائج البحث والمحتوى الذي يحقق تلك التوقّعات. 2. أنشئ محتوى دقيقا وواضحا وفقًا لـ Neil Patel، فتحسين البحث الدلالي يعني التأكّد مرّتين من دقّة ووضوح كل جزء من المحتوى الذي تنشره، ونقتبس عنه: إنّ هذا يعني بأن كل مقال تنشره يجب أن يكون مركّزًا، ويحافظ على رسالته، ويقدّم المعلومات الواضحة للزوار. تذكّر: كلّما زادت كمية المعلومات ذات الصلّة التي تدرجها في المحتوى، كلّما كان من المحتمل أن ترتفع نسبة تقييم موقعك نتيجة لاحتوائه على كلمات مفتاحية وعبارات واستعلامات مناسبة. 3. التحكم بأساسيات SEO بشكل كامل كل هذا الحديث عن نتائج البحث الدلالي قد يجعلك تعتقد أن الكلمات المفتاحية لا تهم على الإطلاق وهذا غير صحيح أبدًا. إنّ الكلمات المفتاحية ما تزال مهمّة ولكن لم تعد بأهميتها سابقًا. مع ذلك، فتحسين المحتوى الخاص بك يمكن أن يكون مفيدًا لزيادة تركيز المحتوى الخاص بك لتصبح مناسبة أكثر لقرائك. إن من المهم أن تحقّق أقصى قدر من التأثير في كل صفحة أو منشور من خلال استثمار جميع المعلومات التي تؤثر على تقييم SEO. إن هناك العديد من الملحقات التي تستطيع مساعدتك لتحقيق هذا بسهولة، لكننا نميل إلى استحسان All-In-One SEO Pack عادة. 4. إعطاء عمليات البحث المكونة من عدة كلمات أهمية أعلى إن فهم واستخدام عمليات البحث المُكوّنة من عدّة كلمات (long tail keyword) أمر مهم، على الرغم من أن هذا قد يتناقض مع ما ذكرته سابقًا حول أهمية الكلمات المفتاحية، والسبب في هذا أنها مشتقة من عمليات البحث التي يقوم بها الأشخاص والتي ترتبط بكلماتك المفتاحية الأساسية. وبطبيعتها، فهي ذات طبيعة سياقية. إن تحسين عمليات البحث هذه في الواقع هو واحدة من الأسباب الأولى لارتباط SEO بالبحث الدلالي من الأساس. وكونك صاحب موقع ويب، فإن بإمكانك استخدام عمليات البحث الطويلة (ذوات الكلمات المفتاحية الكثيرة) لتضمن بأن محركات البحث تعرف بالضبط ما الذي تتحدث عنه. إن عمليات البحث الطويلة تعطي سياقًا للمحتوى الخاص بك وتظهر العلاقة بين الأفكار المختلفة المعروضة بداخلها لمحركات البحث. لذا، إن كنت تملك موقعًا حول أشكال الرقص، فإن من المفيد أن تذكر أسماء الرقصات المختلفة ضمن المحتوى، وعبر إدراج كلمات مثل "The Robot" في محتواك، فجوجل سيعلم ضمن سياق الحديث بأنك تتحدث عن الرقصة المسمّاة بهذا الاسم وأنك لا تتكلم عن الروبوتات. إن الجزء الأفضل حول تحسين الكلمات المفتاحية الطويلة بأنك لا تحتاج للتفكير مطوّلًا حولها، فغالبًا ما يكون كافيًا تضمين جملة من المحتمل أن يتم البحث عنها بشكل طبيعي. 5. استخدام مخطط الترميز تُعرف schema markup بترميز البيانات الهيكلية والتي تعطي أساسًا محرّكات البحث المزيد من المعلومات كي يظهر موقعك في نتائج البحث المشتقة من السياق بصورة أكبر. ستحتاج أن تضيف البيانات الدلالية إلى موقعك إن أردت أن تحصّل فوائد البحث الدلالي، وقد يبدو هذا مُعقّدًا في البداية، ولكن لا داع للقلق، فلن تحتاج أن تعيد بناء الموقع من البداية، فهناك الكثير من الملحقات المتوفرة التي تساعد في اختصار العمل على الخطوات التي سنذكرها لاحقًا. أما في الوقت الحالي، فمن المهم الحديث عن واحدة من الملحقات تحديدًا التي تساعد في إضافة schema markup إلى موقعك، وتدعى هذه الإضافة بـ Schema Creator لشركة Raven. إن من السهل استخدام هذا الملحق والذي يُضيف نموذجًا إلى موقعك يتم ملؤه تلقائيًا ببيانات مصغّرة microdata من موقع Schema.org في منشوراتك وصفحاتك، وتستطيع إدراج البيانات التي تنشؤها باستخدام رمز مختصر shortcode كما يمكنك تحرير البيانات بعد إدراجها، وتغيير شكلها، ويضيف الملحق أيقونة Schema Creator في المحرّر المرئي لتسهيل العملية عليك. كل ما تحتاج القيام به هو أن تختار ما نوع الـ schema الذي تريد إنشائه: شخص، منتج، حدث، مؤسسة، فيلم، كتاب أو عرض وجهة نظر. يمكنك أيضًا استخدام أداة البيانات الهيكلية ضمن أدوات مشرفي المواقع من جوجل لإنشاء schema markup لموقع ووردبريس الخاص بك، وهذا قد يكون أفضل حل إن كنت تتوقع أن تملك الكثير من المحتوى. مجموعة من الملحقات المفيدة إن محاولة تحسين الموقع بنفسك للاستفادة من البحث الدلالي بالشكل الأمثل يبدو أمرًا مُعقّدًا، وبالتالي قد تجد من الأسهل استخدام بعض الملحقات المفيدة لمساعدتك في هذا الصدد. 1. All-In-One SEO Pack إن All-In-One SEO Pack هو ملحق SEO كامل، يجعل من السهل استكمال جميع المهام المرتبطة بـ SEO. وتشمل على دعم لـ خرائط XML و Google Analytics وتساعد على توليد العناوين المتقدّمة، تحسين أنواع المنشورات المخصصة، توليد وسوم meta بشكل أوتوماتيكي، تعيين عناوين مخصصة وأوصاف meta، والمزيد. كما أن الملحق متوافق مع العديد من الملحقات الأخرى، وتساعد في القضاء على المحتوى المكرر، وتشمل على Nonce Security، وتم ترجمتها لـ 57 لغة. تتوفر نسخة مجانيّة وأخرى تجارية وتحتوي الأخيرة على مدير مزايا، دعم خرائط فيديوهات XML، التحكم على مستوى الفئة، الوسوم، تصنيفات SEO خاصة، دعم لـ WooCommerce والمزيد، مقابل 75$ في السنة. 2. Semantic Tags يركّز ملحق Semantic tags المجاني خصيصًا على الجانب الدلالي عبر مساعدتك على تحسين آلية فهم جوجل للعلاقة بين محتوياتك. بعد تثبيت الملحق، سيصبح من الممكن لك أن تقوم بإضافة وتعديل الوسوم في منشوراتك وصفحاتك. سيساعدك هذا على إنشاء وسوم دلالية تملك معنى أعمق من الوسوم التقليدية التي تضيفها في الصفحات والمنشورات، كما أن بإمكانك ربط المحتوى بالمزيد من المصادر باستخدام هذه الوسوم لتوفير سياق أغنى لمحتواك. 3. WordLift ملحق WordLift مجاني يستحق أن يؤخذ بعين الاعتبار، يُسهّل من عملية تنظيم الصفحات والمنشورات، حيث تسمح بإضافة "حقائق" إلى كل صفحة أو منشور على شكل نص وصورة، لتساعد على تحسين هيكلة موقعك، كما تقوم بنشر المحتوى بصيغة Linked Open Data لتجعله أكثر قابلية للأرشفة من قبل محركات البحث. يضيف هذا الملحق تعقيبات دلالية إلى محتواك ويساعد على تحسين التدفّق من خلال إعطاء النصائح حول المعلومات، الصور، والروابط. وفي الواقع فستقوم باقتراح صور وأشكال مجانية لتضاف إلى المحتوى لتساعد على تنظيمه وتحسين السياق لتجربة تصفّح أفضل وتضمن بأن الشريحة الأهم من الزوّار سيتمكنون من إيجاد موقعك بسهولة أكبر. 4. Kaimbo يعتبر ملحق Kimbo أحد حلول البحث الدلالي المجانية لووردبريس والذي يسمح بتحسين سياق المحتوى. يقوم الملحق بالتأشير على (highlights) الكلمات المفتاحية والأفكار، وتقدم وظيفة بحث دلالية متقدّمة لزوار الموقع، وتقوم بزحف آني على المحتوى لتضمن بأن يتم أرشفة موقعك بشكل اوتوماتيكي. يقوم الملحق أيضًا بأرشفة ملفات PDF لتجعل البحث ضمنها ممكنًا، ويملك قاعدة معلومات ضخمة تساعد على فهم الأفكار المرتبطة بعمليات البحث، كما يملك خاصية ذكية للإكمال التلقائي، والمزيد من المزايا كالإحصائيات والتثبيت بنقرة واحدة. 5. Add Meta Tags يسهّل Add Meta tags عملية تحسين البحث الدلالي من خلال إنشاء معلومات meta حول المحتوى بشكل أوتوماتيكي، لتمكّن من مشاركتها بسهولة مع المواقع الاجتماعية وتؤهلها لأرشفة أفضل في محركات البحث. يقوم الملحق بتوليد عنوان meta ووصف وكلمات مفتاحية ومخططات Open Graph ومعلومات Schema.org إضافة إلى JSON+LD وبطاقات Twitter. الخلاصة قد يبدو البحث الدلالي مُعقّدا ومخيفًا في البداية ولكن آمل بعد قراءة المقال أن يكون قد أصبح لديك فهم أفضل لما يعنيه وكيفية عمله وكيف يمكن استخدامه لتحسين موقع ووردبريس الخاص بك على صورة أفضل وفقًا لذلك. في نهاية المطاف، ستكافؤ جهودك من خلال جعل موقعك أكثر قابلية للعثور عليه من قبل الجمهور المستهدف وهذا بالتأكيد أمر جيّد. هل بذلت جهودًا لتحسين البحث الدلالي في موقعك؟ هل نسيت ذكر شيء حول الأمر؟ شاركونا تجاربكم في التعليقات أدناه. ترجمة -وبتصرّف- للجزء الثاني من مقال Using Semantic Markup with WordPress to Improve Your Search Results لصاحبته Brenda Barron.
  12. ستوفِّر قدرًا كبيرًا من الوقت عندما تطوِّر مواقع ووردبريس على خادوم محلي؛ فالتطوير على خادوم محلي له عدِّة مزايا أهمها أنه أكثر أمانًا وأسرع من لو أنَّك سترفع ملفاتك إلى الخادوم البعيد بشكل مستمر. المشكلة الوحيدة هي أنَّ نقل موقع ووردبريس إلى خادوم إنتاجي سيُسبِّب لك الصداع، فلا يحب أحدٌ أن يعبث مع جداول قاعدة البيانات. لحسن الحظ، عملية النقل أسهل مما تتصور ولن تأخذ من وقتك إلا القليل إن اتبعت الخطوات التي سنووردها في هذا الدرس. سأريك في هذا الدرس كيف تستعمل إضافة "Duplicator" لنسخ موقع ووردبريس يعمل على خادوم محلي إلى استضافة خارجية بسرعة وسهولة. هنالك طرقٌ مختلفة لنقل مواقع ووردبريس، لكن أسهلها هو استخدام إضافة Duplicator؛ وهذه الإضافة مشهورة جدًا في مستودع إضافات ووردبريس، بتقييم 4.9 من 5 وبأكثر من 700‎ 000 تنزيل. سأشرح -وسأريك- في الخطوات الآتية كيفية نقل ووردبريس من الخادوم المحلي عبر Duplicator، لكن قد تختلف بعض الخطوات اعتمادًا على الخادوم الإنتاجي الذي ستنقل إليه الموقع. ستحتاج إلى عميل FTP مع بيانات الدخول لخادومك الإنتاجي لكي تتبع الخطوات التي سنشرحها في هذا الدرس. من الجدير بالذكر أنَّك لا تحتاج إلى تثبيت ووردبريس على الخادوم الإنتاجي قبل اتباع هذه الخطوات، إذ سينسخ Duplicator كل ملفات ووردبريس اللازمة تلقائيًا. الخطوة الأولى: تحزيم موقعك باستخدام Duplicator نزِّل وثبِّت Duplicator على موقعك المحلي. هذه الإضافة مجانية ومتاحة في مستودع إضافات ووردبريس، لذا تستطيع أن تبحث عنها في صفحة الإضافات. بعد تثبيت وتفعيل الإضافة، اضغط على "Duplicator" في شريط أدوات لوحة التحكم، وستظهر شاشة "Duplicator Packages". ولأننا ثبتنا Duplicator منذ قليل فلن تكون هنالك أيّة حزم. حسنًا، ما هي الحزمة؟ تحتوي الحزمة على أرشيف لموقعك (الصيغة الافتراضية هي ZIP) وملف تثبيت مهمته أتمتة عملية ضبط الموقع المؤرشف على الخادوم الجديد. اضغط على Create New لإنشاء حزمة. ستسألك الصفحة التالية عن اسم الحزمة وتسمح لك بإضافة ملاحظات. الاسم الذي تمنحه لموقعك ليس ذا أهمية كبيرة، لكن عليك أن تعطيه اسمًا قابلًا للتذكر إن كنت تنوي أن تُنشِئ عدِّة حزم. أضف ملاحظاتك إن شئت. هنالك إعدادات اختيارية متعلقة بالأرشيف والمُثبِّت، لكنك تستطيع تجاهلها الآن. تسمح لك إعدادات الأرشيف بترشيح (filter) قاعدة البيانات الخاصة بك، بينما تسمح لك خيارات المُثبِّت بملء خيارات التثبيت التي كانت ستظهر لك عند تثبيت الحزمة المؤرشفة، مما يوفر عليك بعض الوقت في المستقبل. اضغط على Next للمتابعة. سيتفحَّص Duplicator نظامك ليتأكد أنَّ عملية بناء الحزمة ستتم بسلاسة دون مشاكل. يمكن أن تُساعد هذه الخطوة في تحديد أيّة مشاكل محتملة الوقوع؛ واجتياز هذا الخطوة يعني أنَّه ليس عليك فعل أيّ شيء لبناء الحزم، بينما يعني ظهور "تحذيرات" (Warn) أنَّك ستواجه مشاكل أثناء عملية بناء وتثبيت الحزمة. لم يكشف الفحص الذي أجراه Duplicator على الموقع الذي نحاول نقله في مثالنا عن أيّة مشاكل، سوى أنَّ المساحة التخزينية لملفات الصور كبيرة، لكنني سأتجاهل ذلك لأنه من غير المحتمل أن تُسبِّب الصور أيّة مشاكل في الخطوات المقبلة. اضغط الآن على Build لإنشاء الحزمة، وعندها ستبدأ الإضافة بأخذ نسخة احتياطية من موقعك. وكما ذكرتُ سابقًا، ستُنتِج إضافة Duplicator ملفين: أرشيف لموقعك (كملف ZIP مضغوط) وملف تثبيت (بصيغة PHP). حمّل كلا الملفين إلى سطح المكتب عندك. الخطوة الثانية: نسخ المثبت والأرشيف إلى الخادوم الإنتاجي علينا الآن نسخ ملفَي الأرشيف والتثبيت اللذان أنشأتهما إضافة Duplicator إلى الخادوم الإنتاجي لكي نستطيع البدء بعملية التثبيت. سأستخدم هنا برنامج Filezilla لنقلهما عبر FTP. عليك تسجيل الدخول إلى خادومك عبر FTP، ثم التنقل إلى مجلد public_html (أو أيًّا كان اسم المجلد الجذر لموقعك) ونسخ ملفَي الأرشيف والمُثبِّت من سطح مكتبك إلى ذاك المجلد؛ ربما ستأخذ هذه العملية بعضًا من الوقت، خصوصًا إذا كان ملف الأرشيف كبيرًا جدًا. الخطوة الثالثة: تثبيت الموقع على خادومك الإنتاجي الخطوة التالية هي تثبيت الموقع على الخادوم الإنتاجي، وعليك الوصول إلى ملف التثبيت الذي نسخته إلى خادومك بإضافة ‎/installer.php إلى اسم النطاق الخاص بك. مثلًا http://example.com/installer.php. ستظهر صفحة المُثبِّت أمامك طالبةً منك إدخال تفاصيل الدخول لقاعدة بيانات MySQL. إذا كنتَ ستستبدل موقع ووردبريس موجود مسبقًا (أي أنَّك تريد تحديث نسختك الحالية من الموقع) فعليك إدخال تفاصيل قاعدة البيانات الموجودة مسبقًا. أما إذا كنتَ تُنشِئ موقعًا جديدًا، فاضغط على Create New وأدخِل تفاصيل قاعدة البيانات الفارغة. لاحظ أنَّ بعض شركات الاستضافة لا تسمح باستخدام خيار إنشاء قاعدة البيانات، وهذا يعني أنَّ عليك إنشاء قاعدة البيانات يدويًا. هذه هي خطوات إنشاء قاعدة بيانات في لوحة تحكم cPanel: افتح MySQL Database أنشِئ قاعدة بيانات بالاسم الذي يحلو لك أنشِئ مستخدمًا جديدًا أضف المستخدم الجديد إلى قاعدة البيانات التي أنشَأتها امنح مستخدمك جميع امتيازات الوصول إلى قاعدة البيانات ثم اضغط على Make Changes املأ تفاصيل الدخول إلى قاعدة البيانات في صفحة التثبيت (لإضافة Duplicator) ثم اضغط على زر Test Connection لتتأكد أنَّ المُثبِّت يملك وصولًا إلى قاعدة البيانات الخاصة بك تأكد أنَّك ستحصل على رسالة Success لاختبارَي Server Connected (أي تم العثور على الخادوم) و Database Found (أي تم العثور على قاعدة البيانات) قبل أن تنتقل إلى الخطوة الآتية. وبهذا ستضمن عدم مواجهة مشاكل أثناء عملية التثبيت. اضغط على Close، ثم ضع إشارة "صح" على بند I have read all warnings and notices في أسفل الصفحة ثم اضغط على Run Deployment. سيبدأ المُثبِّت الآن بتثبيت موقعك على الخادوم الإنتاجي، لكن قد تستغرق هذه الخطوة بعض الوقت إن كان موقعك كبيرًا. سيسألك Duplicator أثناء التثبيت أن تتأكد من تفاصيل موقعك القديمة… اضغط على Run Update بعد أن تتأكد منها. الخطوات الأخيرة سيطلب Duplicator منك إكمال أربع خطوات قصيرة لكنها مهمة: Install Report (تقرير التثبيت): هذا تقريرٌ عن تفاصيل الأخطاء التي قد واجهت عملية التثبيت (أرجو أن لا تكون هنالك أيّة أخطاء!) وعدد الجداول والسجلات التي أنُشِئت (أو حُدِّثَت) في قاعدة البيانات كي تتأكد أنَّ إضافة Duplicator قد نسخت كل معلومات قاعدة البيانات التي تريدها. Save Permalinks (حفظ إعدادات الروابط الدائمة): اضغط على Save Permalinks لكي تؤخذ إلى موقعك الجديد حيث تستطيع ضبط إعدادات الروابط الدائمة. Test Site (اختبار الموقع): اضغط على Test Site وستُظهر لك واجهة الموقع على الخادوم الإنتاجي لكي تتحقق من أنَّ كل شيءٍ يعمل على ما يرام. File Cleanup (حذف ملفات التثبيت): هذه الخطوة مهمة جدًا وغرضها هو حذف ملف التثبيت وأيّة ملفات أخرى مرتبطة فيه التي أنشِئت أثناء عملية التثبيت وذلك لضروراتٍ أمنية. اضغط على File Cleanup لحذف تلك الملفات تلقائيًا. اختبر موقعك الجديد على الخادوم الإنتاجي هذا كل ما في الأمر، يجب أن تحصل الآن على نسخة مماثلة لموقعك الذي كنت تطوره على الخادوم المحلي. هل استخدمتَ Duplicator لنقل المواقع من قبل؟ إن لم تكن تستخدمه، فما هي أفضل طريقة لنقل المواقع برأيك؟ شاركنا تجربتك في التعليقات. ترجمة -وبتصرّف- للمقال The Quick and Easy Guide to Migrating a Local WordPress Installation to a Live Site لصاحبته Raelene Morey.
  13. تساعدك إضافة Google Analytics إلى موقع ووردبريس الخاص بك على تتبع الزوار، تتبع المحتوى الذي يتصفحونه فضلا عن كيفية وصولهم إليه. يعتبر استخدام ملحق ما مثل +Analytics أسهل طريقة للقيام بذلك ما يعطيك إمكانية الولوج إلى لوحة تحكم Analytics الخاصة بك من خلال لوحة التّحكّم. من جهة أخرى، قد ترغب أحيانا في المحافظة على بساطة الأمور والقيام بإدخال كود تتبع analytics إلى موقعك بشكل يدوي. تتجلى طريقة القيام بذلك حسب جوجل في إدخال هذا الكود في قسم <head> في كل صفحة على موقعك، من حسن الحظ أنك باستخدامك لووردبريس تصبح في غنى عن كل هذا العناء، حيث يمكنك إنشاء ملحق بسيط يعمل على إدخاله بشكل أوتوماتيكي في كل صفحة تقوم بإنشائها. ما ستحتاج إليه لإنشاء هذا الملحق، ستحتاج إلى ما يلي: تثبيت ووردبريس واستخدام أي قالب من اختيارك. الولوج إلى ملفات موقعك من خلال FTP. مُحرر نصوص شخصيا، أستخدم Coda الذي يوفر إمكانية تحرير الشيفرات فضلا عن الولوج إلى ملفات FTP، يمكنك أن تستخدم أي محرر شيفرات أو نصوص تريد إضافة إلى أحد البرامج المجانية لنقل الملفات باستخدام بروتوكولات (FTP (FTP client مثل: Filezilla. منهجية العمل قد يبدو لك أن إنشاء ملحق ووردبريس أمرًا في غاية الصعوبة خصوصا إن لم يسبق لك القيام بذلك، لا تقلق فهذا ليس صحيحا إطلاقا، ما عليك إلا أن تتبع الخطوات الخمس التالية: تفحص ملف header.php الخاص بالقالب الذي تستخدمه للتأكد من احتوائه على خُطَّاف (hook) يسمى wp_head. أنشئ ملفا جديدا في مجلد الملحقات. أحصل على كود التتبع (tracking code) الخاص بك من موقع Google analytics. أضف بعض الأكواد التي تتضمن كود التتبع إلى ملحقك. قم بتفعيل الملحق. فلنبدأ بالعمل. التأكد من وجود خطاف wp_head في ملف القالب (Theme) الذي تستخدمه تعمل الملحقات على إدخال كود (code) ما إلى موقعك من خلال ربطه مع خُطَّاف (hook) تم إدماجه مسبقا في قالب موقعك، تتوفر القوالب المبرمجة بشكل جيد على خطاف wp_head داخل ملف header.php، تَسْتَخْدِمُ العديد من الملحقات هذا الخُطَّاف بغرض إدخال السكريبتات (scripts)، الأنماط (styles) وغيرها. إذا قمت بتحميل قالبك من مستودع القوالب الخاص بموقع ووردبيرس (WordPress theme repository)، سيتواجد خُطَّاف wp_head في المكان المناسب، لنقم بالتأكد من ذلك. قم بالولوج إلى مجلد wp-content في تثبيت ووردبريس باستخدام برنامج FTP من اختيارك، ستجد داخله مجلد قوالب (themes folder) ثم مجلدا خاصا بالقالب المُفَعَّل (active theme). على سبيل المثال سيكون المجلد الذي يتضمن ملفات القالب twenty fifteen متواجدا في: wp-content/themes/twentyfifteen. ملاحظة: عليك بالعمل فقط على القالب المُفَعَّل (active theme) دون القوالب الأخرى المثبتة على موقعك. افتح ملف header.php المتواجد داخل مجلد القالب المُفَعَّل. يتضمن ملف header.php الكود الكامل في بداية كل صفحة، بما في ذلك قسم <head> الخاص بالصفحة، يوجد خُطَّاف wp_head في نهاية هذا القسم. لنأخذ على سبيل المثال قسم <head> الخاص بقالب twenty fifteen كاملا والذي يبدو كما يلي: <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> في السطر الأخير وقبل وسم النهاية <head> يوجد خُطَّاف wp_head، يمكنك استخدامه في ملحقك عوض اللجوء إلى التعديل على ملفات القالب. قد يتبادر إلى ذهنك السؤال التالي: لم يجب علي عدم التعديل على ملفات القالب؟ تتلخص الإجابة في سببين اثنين: سيؤدي أي تحديث للقالب مستقبلا إلى ضياع كل التعديلات التي قمت بإدخالها على ملفاته. يتمحور دور ملحق Google analytics حول الجانب الوظيفي (functionality) أي ما الذي يحدث خلف الكواليس في موقعك وليس حول العرض (display) أي مظهر الموقع وكيف يبدو المحتوى عليه، لذى يجب إضافته من خلال ملحق وليس من خلال قالب. بما أنك أصبحت متأكدا الآن من جاهزية موقعك، لم يبقى إلا الحصول على كود التتبع من Google analytics. ملاحظة: إذا لم يتوفر القالب الذي تستخدمه على هذا الكود فهذا يدل على أنه مبرمج بشكل سيئ، لذا لن تعرف أبدا أين قد تواجهك مشاكل أخرى، أنصحك في هذه الحالة بالحصول على قالب آخر. كيفية الحصول على كود التتبع (Tracking Code) عند إضافة موقعك إلى حسابك على Google analytics فإنك تحصل على كود تتبع بغرض إدخاله إلى صفحات موقعك حتى يتمكن جوجل من تتبع زوار كل واحدة من هذه الصفحات. إن كنت تملك حساب جوجل فيمكنك استخدامه من أجل الولوج إلى بيانات analytics، أما إن كنت من القليلينَ الذين لا يملكون حساب جوجل فعليك بالالتحاق بالركب والحصول على حساب لك. يمكنك الآن أن تقوم بنسخ كود التتبع الخاص بك من قسم Admin على موقع analytics. اضغط على Admin أعلى الشاشة من أجل الولوج إلى الفضاء الخاص بالإدارة كما هو موضح في الصورة أسفله. سيتم تحديد حسابك بشكل أوتوماتيكي في اليسار، سيكون عليك إضافة موقعك إلى خانة PROPERTY في الوسط. إن لم تكن أضفت موقعك إلى Google analytics بعد، اضغط على الخانة المنسدلة (drop-down box): PROPERTY واختر Create New Property. أما إن كنت قد أضفت موقعك سابقا فلا داعي للاطلاع على الفقرة التالية فما عليك إلا أن تقوم بتحديده في PROPERTY ثم الضغط على زرTracking Info المتواجد في نفس الخانة الوسط. إضافة موقعك إلى Google Analytics بعد الضغط على خيار Create New Property سيتم طلب تفاصيل موقعك في شاشة New Property كما في الصورة أسفله: املأ الخانات بتفاصيل موقعك ثم اضغط على زر Get Tracking ID لتحصل على كود التتبع الخاص بك. الحصول على كود التتبع سواء أنشأت property جديدة أو ضغطت زر الولوج إلى كود تتبع ملكية متواجدة مسبقا سيتم في كلتا الحالتين تقديم كود التتبع الذي يجب أن يتم إدخاله: قم بنسخ الكود كاملا بما في ذلك وسوم <script> الخاصة بالبداية والنهاية، ستقوم بلصقه في ملحقك بعد قليل. ملاحظة: لقد قمت بإخفاء بعض الرموز وتعويضها ب XXX في كود التتبع الخاص بي حتى لا تتمكن من تتبع زوار موقعي، عليك بنسخ الكود المميز الخاص بموقعك أنت. إنشاء الملحق لنقم الآن بإنشاء الملحق الذي سنضيف إليه كود التتبع. أنشئ ملف PHP جديدا في مجلد wp-content/plugins، اعطه اسما سهل التذكر، مثلا أنا سميت ملفي: wpmudev-google-analytics.php. افتح هذا الملف في محرر الأكواد (code editor) الخاص بك ثم أضف ما يلي: <?php /* Plugin Name: Simple Google Analytics Plugin Plugin URI: http://rachelmccollin.com Description: Adds a Google analytics trascking code to the <head> of your theme, by hooking to wp_head. Author: Rachel McCollin Version: 1.0 */ تتجلى أهمية هذا الكود في إعلام ووردبريس أن هذا عبارة عن ملحق، التعريف بدوره فضلا عن صاحبه. قم بالتعديل على تفاصيل الملحق واسم صاحبه بما تشاء، فهذا ملحقك أنت. أسفل هذا الكود، أضف الدالة (function) التي ستحتوي على كود تتبع analytics: function wpmudev_google_analytics() { ?> <?php } add_action( 'wp_head', 'wpmudev_google_analytics', 10 ); حاليا تكون هذه الدالة المسماة ()wpmudev_google_analytics فارغة كما أنها مرتبطة (attached) بالخُطَّاف wp_head ما يعني أنه سيتم كتابة (output) محتواها كلما صادف ووردبريس هذا الخُطَّاف ، أي عند قسم <head> من كل صفحة. تتجلى المرحلة التالية في لصق كود التتبع الخاص بك الذي قمت بنسخه سابقا داخل وسوم PHP الخاصة بالبداية والنهاية والمتواجدة داخل أقواس الدالة. ستظهر الدالة على الشكل التالي: function wpmudev_google_analytics() { ?> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-XX', 'auto'); ga('send', 'pageview'); </script> <?php } add_action( 'wp_head', 'wpmudev_google_analytics', 10 ); تفعيل الملحق قم الآن بحفظ ملف ملحقك ثم الذهاب إلى شاشات إدارة موقعك، ستجد ملحقا مدرجا في شاشة Plugins: ما عليك الآن إلا أن تُفَعِّلَ الملحق ثم تذهب إلى موقع Google analytics لتفحص كود التتبع. يمكن أن تحتاج إلى الانتظار لبعض الوقت حتى يلتقط جوجل الكود الجديد ليتم بعد ذلك الإبلاغ باشتغاله. خلاصة إن أردت إضافة كود تتبع تحليلات جوجل بشكل يدوي إلى موقع ووردبريس الخاص بك فلا يجب عليك إضافته إلى قالبك، عوض ذلك عليك بكتابة ملحق بسيط مثل ما قمنا به للتو. يتضمن هذا الملحق دالة تحتوي على كود التتبع المقدم من جوجل، يتم ربطها بعد ذلك بخُطَّاف wp_head المتواجد في قسم <head> في القوالب المبرمجة بشكل جيد، تسمح لك هذه العملية بإدخال الكود دون التلاعب بقالبك. بمجرد قيامك بذلك يمكنك تتبع زوار موقعك كجزء من استراتيجية SEO التي تتبعها. هل تستخدم Google Analytics؟ ما هي أسهل طريقة لإضافة analytics إلى موقعك في نظرك؟ شاركنا آرائك في التعليقات أسفله. ترجمة بتصرف للمقال: How to Add Google Analytics to WordPress With a Simple Plugin لصاحبته: RACHEL MCCOLLIN.
  14. هناك عدد كبير من ملحقات ووردبريس التي تسمح لك بتضمين كل أنواع الاستمارات والنّماذج forms إلى موقعك، سواء تعلق الأمر بنماذج التواصل العامة (contact forms)، الاستبيانات الاستقصائية المفصلة (detailed surveys) أو النماذج المتقدمة (premium forms) التي تحمل العديد من الخانات القابلة للتعديل والميزات الإضافية. لكن قبل أن تقوم بتحميل وتنزيل ملحق ووردبريس الشائع الذي تصادفه في المرة القادمة، يجب عليك أن تأخذ أولا بعين الاعتبار نماذج جوجل (Google Forms)، خصوصا أن هناك ملحقا خاصًا بها يجعل إدماج هذه النماذج في موقع ووردبريس الخاص بك أمرا سلسا. نماذج جوجل (Google forms) تتجلى روعة نماذج جوجل في كونها متعددة الاستعمالات ومجانية في نفس الوقت، رغم ذلك فإن حَشْرَها كجزء صغير في الخدمة السَحَابية الخاصة بجوجل يؤدي إلى عدم معرفة المستعملين بها. إن لم تكن تملك حسابا في جوجل درايف (Google drive) وهو أمر مستبعد، يمكن لك الحصول على حساب بشكل مجاني وفي لمح البصر، أما إن كنت تملك حسابا، فيمكنك التوجه إلى My drive لتطّلع على هذه النماذج من خلال الضغط على الزر الأحمر الكبير New في العمود المتواجد في اليسار. في القائمة الظاهرة قم بالضغط على خيار More في الأسفل، حيث ستظهر قائمة أخرى تتضمن Google Forms بالضغط عليها تُفْتَحُ صفحة جديدة لتحرير محتوى النموذج. باستعمال نماذج جوجل يمكن لك القيام بـ: إنشاء مسوح استقصائية، تطبيقات، تسجيلات، استبيانات، استطلاعات الرأي، اختبارات وأكثر من هذا. استعمال تَفَرُّعات الصفحات وخاصية تجاوز الأسئلة ( page branching and question skip logic ) للحصول على نماذج أكثر تقدما. استعمال إضافات (add-ons) من أجل نماذج أكثر كفاءة. معاينة نموذجك. إعطاء تصميم خاص لصفحة التأكيد الخاصة بك. إدارة الأجوبة التي تتلقاها. تنسيق حقول النصوص، الفقرات، إمكانية استخدام الخيارات المتعددة، الخانات أو قائمة الخيارات حسب رغبتك. تجميع عناوين البريد الإلكتروني من المشتركين لغرض مُراسلتهم بنشرات إخبارية (Newsletter). إعادة ترتيب الأسئلة بسهولة من خلال خاصية السحب والإفلات (Drag and drop). إضافة صور ومقاطع فيديو من يوتيوب. تصميم النموذج بشكل مرئي (Visual theme design). التعاون مع مستعملي جوجل درايف آخرين لإنجاز نماذجك. و غيرها من الخصائص. إن مشاركة النموذج من خلال رابط أمر سهل للغاية لكن ماذا إن أردت أن تضعه في صفحة على موقع ووردبريس الخاص بك؟ إحدى الطرق السريعة للقيام بذلك هي استخدام خاصية التضمين (embed)، والتي يمكن إيجادها من خلال الضغط على File في القائمة أعلى الصفحة التي تقوم فيها بصياغة نموذج جوجل الخاص بك، اضغط على Embed ثم قم بنسخ ولصق شيفرة HMTL في محرر النص الخاص بصفحة أو منشور ما على موقعك، يمكن لك أن تعمل على تعديل ارتفاع وسمك النموذج لتتأكد من احتواء الصفحة له بشكل جيد. أكبر مشكل فيما يخص الاقتصار على القيام بتضمين شفرة نموذجك التي يقدمها جوجل، هو حفاظه على النمط الافتراضي (default style) الخاص بنموذج جوجل، وعدم اندماجه مع تصميم موقعك، حيث أنه لا يستفيد من أنماط CSS الموجودة كما أنه يُظْهِرُ شعار جوجل فضلا عن العديد من الروابط نحو المزيد من المعلومات الخاصة بجوجل. لحسن الحظ، يوجد ملحق لحل هذا المشكل. ملحق Google Forms Plugin for WordPress يسمح لك هذا الملحق باستخدام نماذج جوجل وإدارتها من خلال لوحة التّحكم على وورديريس. كما يقدم الكثير من الخاصيات لتحسين عملية الدمج مع ووردبريس وجعلها أكثر خصوصية مقارنة باستعمال شيفرة HTML مباشرة على صفحتك أو منشورك. إليك فيما يلي أولى الخطوات للقيام بذلك. استعمال نماذج جوجل مع ملحق Google Forms Plugin for WordPress بمجرد تنصيب وتفعيل الملحق، تظهر خاصية جديدة: Google Forms في الشريط الجانبي الخاص بووردبريس، عندما تضع مؤشر الفأرة عليها دون الحاجة إلى الضغط، ستظهر ثلاثة خيارات: Google forms ،Add New Google Form و Form Submission Log. يسمح لك تبويب Google forms بإلقاء لمحة سريعة بنفس الطريقة التي يمكن لك من خلالها رؤية كل منشوراتك أو صفحاتك، كما يُمكنك تصنيف، تعديل أو حذف عدّة نماذج دُفعة واحدة. لن يظهر أي شيء أسفل تبويب Google forms في حال ما إن لم تملك أي نماذج بعد، قم بالضغط على Add New Google Form في التبويب سالف الذكر أو في خيار Add New Google Form في القائمة لإنشاء نموذج جديد من خلال تحديد عنُوان للنموذج وملء الحقول. يمكن أن تستعمل هذا الملحق لإنشاء نماذجك. في المثال التالي، سنستعمل نموذجا بسيطا للتسجيل في حدث ما: للقيام بهذا، ستحتاج إلى نموذج سبق لنا إنشاؤه، فكما ستلاحظ في تبويب Add New Google Form الخاص بالملحق أن Form URL هو أحد أول الحقول التي يجب ملؤها. إن القيام بهذا أمر سهل للغاية. بالرجوع إلى جوجل درايف حيث تقوم بإنشاء نموذجك، قم بالضغط على الزر الأزرق Send Form المتواجد في الزاوية أعلى اليمين أو أسفل الصفحة، سيتم فتح علبة تتضمن خيارات المشاركة والتي تتضمن الرابط الخاص بالنسخ والنشر. بمجرد أن تقوم بنسخ الرابط، قم بلصقه في حقل Form URL في الملحق. لاحقا يمكن لك أن تقوم أيضا بإضافة رابط التأكيد Confirm URL. بما أن صفحة التأكيد الافتراضية (default Confirmation Page) قاعدية جدا ودمجها في موقع ووردبريس الخاص بك غير ممكن فإنه من الأفضل ملء هذا الحقل لإبقاء صفحات كامل النّموذج على موقعك. فيما يتعلق بميزة Custom Confirmation Page Style، يمكن لك أن تحدد كيفية تقديمها من خلال تحديد أحد الخيارية Redirect أو AJAX. تذكر أنه في حال ما إذا تركتها في خيار None، فإنّه ستتم إعادة تحويل الصّفحة redirect بشكل قياسي. هذه هي الحقول الثلاثة الأساسية التي يجب عليك ملؤها في نموذجك ليعمل بشكل جيد. فيما يلي، لنلقي نظرة على كيفية أخرى لتخصيص نموذجك على موقع ووردبريس الخاص بك. ملء الحقول الإضافية في ملحق Google Forms WordPress إضافة إلى حقلي Form URL و Confirm URL هناك الكثير من الحقول الأخرى لتقوم بملئها، لكن من المستبعد أن تحتاج ملأها أو تعديلها كلها خصوصا إذا كنت تقوم بإعداد نموذج بسيط. تحريا للدقة، لنقم على أي حال بتفحصها أهمّها وشرح معانيها. Alert (تنبيه): من أجل إعلام المستعملين أنه قد تم إرسال النّموذج بنجاح، يمكن لك أن تقوم بكتابة رسالة بسيطة على سبيل المثال: "شكرا على التسجيل" سيتم عرضها في علبة تنبيه جافا سكريبت (JavaScript Alert box). Class (صنف): إن كنت تنوي التعديل على الـ CSS الخاص بنموذجك، يمكن لك أن تستعمل خانة class لتقوم بإضافة صنف أو أصناف لعنصر div الذي يحتوي النموذج. افصل بين كل صنف والآخر بإضافة فراغ بينهما. Email (بريد إلكتروني): يمكن لك أن تختار إرسال رسالة إلى بريد المدير أو إلى أي بريد آخر كلما تم بنجاح إدخال واستقبال نموذج جديد. تحتوي هذه الرسالة على رابط URL للنموذج فضلا عن وقت وتاريخ الإدخال. Send to (أرسل إلى): إن قمت بتفعيل خيار Email أعلاه، فعليك أن تقوم في هذا الحقل بإدخال البريد الإلكتروني الذي تريد أن تستقبل فيه رسالة التنبيه. لا تنس أنه سيتم دائما إرسال رسالة إلى المدير على هيئة (BCC (Blind Carbon Copy. Form CSS: يُستعمل هذا الحقل لإضافة أية أنماط CSS خاصة تريد إضافتها لتعديل شكل ظهور النّموذج. Form Caching: يمكنك تفعيل هذا الخيار إن كنت ترغب تفعيل خاصّيّة التخزين، مع إمكانية تحديد مُدّة التّخزين. Google Form Field Validation (التحقق من حقول نماذج جوجل): بشكل افتراضي تكون هذه الخاصية غير مفعلة، تفعيلها سيضيف دعم خاصية التحقق من حقول النموذج قبل إرسالها (باستخدام jQuery). Google Form Hidden Fields (حقول نموذج جوجل المخفية): إن كان لديك حقول مخفية في نموذجك وتريد التحكّم فيها، هذه الخاصيّة مُعطّلة بشكل قياسي. ستحتاح إلى معرفة أسماء الحقول التي ترغب في التّحكّم فيها، يمكن فقط استعمال أنواع الحقول التالية: value ،url و timestamp. Google Form Field Placeholder: إن أردت إظهار "أمثلة" عن القيم التي تتوقّعها في الحقل، بإمكانك القيام بذلك عبر إضافة ما يُسمّى بـ placeholder عبر هذه الخاصّيّة. Google Form Default Text Overrides (تغير النّصوص الافتراضية في النموذج): هذه آخر الخاصيات المتقدمة المتوفرة، تسمح لك بالتّحكم في النّص إذا لم يُعجبك النّص الذي تُظهره نماذج Google. إعداد خصائص الملحق هناك المزيد، فحتى وإن كانت كل الإعدادات التالية اختيارية يمكن لك أن تقوم بإعداد العديد منها حتى تبدوا نماذج جوجل الخاصة بك وتعمل بشكل جيد. عليك بكل بساطة التوجه إلى Google Form Options الموجودة في العمود يمين الخانات التي سبق أن تحدثنا عنها أعلاه. CAPTCHA (كابتشا): لتعزيز الحماية ضد السبام، يمكن أن تعمل على تفعيل حقل CAPTCHA الذي يتوجب على المستعملين ملؤه لإثبات أنهم بشر وليسوا برامج. Columns (الأعمدة): افتراضيا، يتم عرض نماذج جوجل في عمود واحد، باستعمال هذه الخاصية يمكن أن تحصل على عدد الأعمدة الذي تريده (10 أعمدة كأقصى حد). يمكن أيضا أن تحدد ترتيب الأعمدة من اليسار إلى اليمين باختيار Left-to-Right أو من اليمين إلى اليسار باختيار Right-to-Left. Email End User (راسل المُستخدم): قم بتفعيل هذه الخاصية إن أردت إرسال رسالة إلى المُستخدم الذي قام بملء النّموذج بمجرد أن يقوم بذلك. Legal: تتوفر نماذج جوجل على عبارة "Powered by Google Docs" أسفلها، يمكنك إخفاؤها من خلال تعطيل هذا الخيار. Read Only (قراءة فقط): إن أردت أن يكون النموذج قابلا للقراءة فقط دون إمكانية الكتابة يمكنك القيام بذلك من خلال هذه الخاصية. BR: إضافة سطر فارغ ما بين عنوان الحقل والحقل (يظهر العنوان فوق الحقل). CSS Prefix: إضافة بادئة في بداية اسم كل صنف (class name) في نموذج جوجل، لتحكّم أفضل في CSS النّموذج. Title (العنوان): إن أردت أن لا يظهر عنوان النموذج على موقعك قم بتعطيل هذه الخاصية. Map H1 to H2: إن كنت تريد الاحتفاظ بالعنوان لكن لا ترغب في استخدام وسم H1 معه (الذي يُستخدم معه بشكل قياسي) يُمكنك تفعيل هذه الخاصية لجعله يبدو كـ H2. نشر نموذج جوجل على موقع ووردبريس الخاص بك الآن بما أنك تملك نموذج جوجل جديدا مُعَدًا على ووردبريس (على الأقل بتحديد Form URL)، يمكن لك أن تقوم بحفظه كمسودة، معاينته أو نشره مباشرة. سيكون الرابط الثابت على شكل http://example.com/wpgforms/title، تستطيع التعديل على العنوان (title) عند الحاجة قبل القيام بالنشر. بمجرد أن تقوم بالنشر، يمكنك أن توجّه المُستخدمين إلى صفحة النموذج لملئه، أو يمكن لك تضمينه في صفحة أو منشور آخر على موقعك من خلال استعمال شيفرة مختصرة (short code)، لتحصل عليها، اذهب إلى Google Forms ستجد شفرة نموذجك المختصرة قرب اسمه. قم بنسخ الشفرة المختصرة للصقها في أي صفحة أو منشور. بعد ذلك يمكن أن ترى صفحتك لتتفقد كيف تم تضمين نموذجك معها، إليك كيف يبدو مع قالب Twenty Fifteen : الاطلاع على النماذج التي تم إرسالها يمكن الاطّلاع على النماذج التي تم إرسالها من خلال الذهاب إلى Form Submission Log، حيث تجد تاريخ إرسالها (timestamp) ورابط URL الخاصين بكل إدخال، كما تستطيع القيام بمسحها دفعة واحدة عندما تريد ذلك. بدلا من ذلك، يمكن أن تتوجه إلى نموذجك في جوجل درايف لتطلع على الأجوبة هناك. في القائمة أعلاه، يتواجد خيار Responses، الذي يسمح لك برؤية ملخص الأجوبة، فضلا عن إمكانية ضغط الزر View responses في الأسفل الذي يسمح لك برؤيتها في مُجَدْوَلَةً. خلاصة انطلاقا من تجربتي الخاصة، يمكنني أن أجزم بأن نماذج جوجل رائعة جدا، أكيد أنها ليست أغنى أداة بالخصائص من نوعها، لكن ثمنها أكثر من مغر مقارنة مع ما تقدمه. بناء على ما سبق، إن أردت تحكمًا كاملًا في شكل نموذج جوجل على موقع ووردبريس الخاص بك فإن ملحق Google Forms plugin ضروري جدا. بإدماج نماذج جوجل بشكل مناسب في موقعك والعمل على إعطائها طابعا خاصا، لن يلاحظ المستعملون أنك تستعمل خدمة جوجل المجانية. هل تستعمل نماذج جوجل؟ لأي غرض بالضبط؟ شارك معنا أية أفكار حولها في التعليقات. ترجمة -وبتصرّف- للمقال: How to Integrate Google Forms With WordPress لصاحبه: Tom Ewer.
  15. عند استخدام التحريكات animations والانتقالات transitions ضمن واجهة المستخدم، فإنّه من الضروري أن يكون لها هدف واضح ومحدّد، ألا وهو تحسين تجربة المستخدم. تؤمّن لنا الانتقالات transitions الوسيلة المناسبة والمثالية لجعل الحركة سلسة وانسيابية أمام المستخدم. بدون تأثيرات الانتقال من الممكن أن يصبح المستخدم في حيرة من أمره حول الذي حدث بالضبط عند تنفيذه لأمر معين. في هذا المقال، سننشئ بعض التحريكات والانتقالات الإبداعية لإضافة وإزالة عناصر من قائمة، لقد أعجبتني الفكرة الواردة في مقال باسكويل دي سيلفيا. أمّا بالنسبة للشيفرة المسؤولة عن الإنتقالات في مقال باسكويل، فقد كتبه كريس كوير. سأعمل على تطوير المثال الوارد في مقال باسكويل، وذلك بإضافة المزيد من تأثيرات الانتقالات والتحريكات، وسأستخدم أيضاً شيفرة صغيرة من مقال كريس لإضافة خطوة إضافية في كل تحريكة، تتمثل بحجز مكان للعناصر المراد إضافتها إلى القائمة قبل إضافتها فعلياً. سأستخدم خصائص CSS بدون أي بادئة prefix وذلك بغرض الاختصار، لكنك ستجد الخصائص كاملة ضمن النص المصدري للمشروع على Github. ستعمل مقاطع الشيفرة التي ستجدها ضمن هذا الدرس على متصفحات تدعم خصائص CSS المستخدمة. لنبدأ العمل! الرماز The Markupلتوضيح فكرة الدرس بشكل جيد، أنشأت تطبيقاً بسيطاً خاصاً بالملاحظات البسيطة. يستخدم هذا التطبيق تقنية التخزين المحلي LocalStorage التي توفرها HTML5 وذلك لحفظ الملاحظات ضمن التخزين المحلي لمتصفح ويب لديك. يسمح لك التطبيق بأخذ ملاحظات وحفظها ضمن المتصفح إن أردت ذلك، في الحقيقة هو السبب الذي من أجله بنيت هذا التطبيق، وذلك من أجل ملاحظاتي الخاصة. لن أخوض في تفاصيل كيفية بناء هذا التطبيق لأنّ ذلك ليس هدف هذا الدرس. الرُماز markup المستخدم في هذا التطبيق هو مجرد نموذج form بسيط يحتوي على حقل نصي text field وزر إرسال submit button، بالإضافة إلى قائمة غير مرتّبة unordered list. ستُضاف الملاحظات إلى هذه القائمة بشكل تلقائي. كما يوجد أيضاً عنصري div لعرض التنبيهات، التي ستظهر عند حفظ أو إزالة أي عنصر، بالإضافة إلى عدّاد وزر لحذف جميع العناصر بنقرة واحدة. فيما يلي جميع رُماز HTML الذي سنحتاجه: <div class="notification undo-button"> Item Deleted. Undo? </div> <div class="notification save-notification"> Item Saved </div> <div class="reminder-container"> <header> <h1>mini reminders list</h1> </header> <form id="input-form"> <input type="text" id="text" placeholder="Remind me to.."/> <input type="submit" value="Add" /> </form> <ul class="reminders"> </ul> <footer> <span class="count"></span> <button class="clear-all"> Delete All </button> </footer> </div>يمكنك إضافة وتحرير وإزالة العناصر (الملاحظات) بالإضافة إلى إمكانية إستعادة العنصر المحذوف. في الواقع، تأتي أغلب التحريكات مرافقة لعملية إزالة وإستعادة العناصر. تُعتبر عملية إضافة العناصر بسيطة ولا تترافق مع الكثير من التحريكات، باستثناء التحريك الخاص بالظهور التدريجي fade in والسقوط إلى أسفل falling down واللذان سنتحدث عنهما عندما نبدأ العمل مع CSS. تنسيقات CSSستحصل العناصر المُضافة توّاً عن طريق JavaScript على الصنف new-item. (صنف CSS). أمّا العناصر المُزالة فستحصل على الصنف removed-item. كما ستحصل العناصر المُستعادة على الصنف restored-item. وكل صنف من الأصناف السابقة سيُفعّل التحريكات الخاصة به. ستبقى أسماء الأصناف السابقة ثابتةً لجميع الأمثلة التوضيحية، في حين ستختلف فيما بينها بالتوجيه المسؤول عن مظهر التحريك keyframes@. لنبدأ الآن بالمثال التوضيحي الأول. المثال الأول المثال الأول: العناصر المُزالة "تسقط إلى أسفل"، والعناصر المُستعادة ستعود بحركة معاكسة. ستسقط العناصر المضافة حديثاً من الأعلى، وهذا تأثير بسيط لكنه جميل. سيبدأ كل عنصر مُضاف حديثاً بالسقوط إلى أسفل وذلك من موقع يعلو 400 بيكسل عن الموقع النهائي الذي سيستقر فيه (أي الموقع النهائي ناقص 400 بيكسل) لا تنس أنّه يجب على الخاصية الفرعية animation-fill-mode أن تحمل القيمة forwards وذلك للتأكّد من أنّ العناصر ستبقى في موقعها النهائي ضمن القائمة، وإلّا فإنّها ستختفي بمجرّد انتهاء عملية التحريك. li.new-item { opacity: 0; animation: new-item-animation .3s linear forwards; } @keyframes new-item-animation { from { opacity: 0; transform: translateY(-400px); } to { opacity: 1; transform : translateY(0); } }ستسقط العناصر المزالة وتتلاشى fade out. بالنسبة لتحريكة السقوط إلى أسفل فهي بسيطة جداً، حيث ينتقل العنصر إلى أسفل وفق محور التراتيب (محور y) ليحاكي تحريكة السقوط، ويدور بينما يسقط ويتلاشى بالتدريج حتى يختفي تماماً (ستتحقّق شيفرة JavaScript من أنّ العنصر قد أُزيل كليّاً من DOM في نهاية هذه التحريكة). li.removed-item { animation: removed-item-animation 1s cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards; transform-origin: 0% 100%; } @keyframes removed-item-animation { 0% { opacity: 1; transform: rotateZ(0); } 100% { opacity: 0; transform: translateY(600px) rotateZ(90deg); } }أمّا عندما نستعيد عنصرًا فستعمل تحريكة الاستعادة على عكس المنطق الموجود في تحريكة إزالة عنصر، لذلك فستكون الأُطر الأساسية keyframes مُعرّفة بشكل معاكس تماماً لما هو عليه في تحريكة إزالة عنصر: li.restored-item { animation: openspace 0.3s ease forwards, restored-item-animation 0.3s 0.3s cubic-bezier(0, 0.8, 0.32, 1.07) forwards; } @keyframes openspace { to { height: auto; } } @keyframes restored-item-animation { 0% { opacity: 0; transform: translateY(600px) rotateZ(90deg); } 10% { opacity: 1; transform: translateY(600px) rotateZ(90deg); } 100% { opacity: 1; transform: rotateZ(0); } }يمكنك أن ترى أننا نستخدم في الشيفرة السابقة مظهر تحريك اسمه openspace استعرته من مقال كريس كوير. يتأكّد مظهر التحريك هذا من أنّ العناصر التي تقع أسفل العنصر المُسترجع (إن وجدت)، ستنزلق إلى الأسفل وتفسح مجالاً للعنصر المُسترجَع ليعود إلى مكانه. إذاً عندما تنزلق العناصر إلى الأسفل لتفسح مجالاً open space للعنصر المُسترجَع، فإنّها فعلياً يجب أن تنتقل إلى الأسفل بشكل سلس، ولكن بما أنّ العناصر في هذا التطبيق لا تملك ارتفاعاً height ثابتاً، لذلك فإنّ إطار التحريك الأساسي to (انظر الشيفرة في الأعلى) سيجعل قيمة الارتفاع height لها لتصبح auto في نهاية عملية التحريك، سيؤدي ذلك لسوء الحظ إلى أنّ العناصر لن تنزلق إلى الأسفل، بل ستبدو كما لو أنّها تقفز إلى الأسفل. على أية حال توجد طريقة تجعل العناصر تغير مواقعها بشكل سلس، وهي تقنية كتب عنها ستيف ساندرسون Steve Sanderson هنا. لكنه يستخدم لهذا الغرض التموضع المطلق absolute positioning، وكمية لا بأس بها من شيفرة JavaScript. يمكنك تفقّد مقالته إذا كنت مهتماً بمعرفة المزيد عن التقنيّة التي يستخدمها، والتي تعطي في الحقيقة نتائج رائعة! المثال الثاني المثال الثاني: العناصر تكبُر وتتلاشى أمام المستخدم، وتُستَعاد بطريقة معكوسة. يعود الفضل في هذه الفكرة إلى تيم بيتروسكي Tim Pietrusky، حيث جاء بها عندما أخبرته أنّ الأفكار قد نفذت منّي بعد أن وضعت خمسة أمثلة توضيحية! في هذه الفكرة، تظهر العناصر المُضافة حديثاً (أي تلك العناصر التي لم تُزال من قبل ثم استُعيدت) بشكل تدريجي fade in ضمن موقعها. li.new-item { opacity: 0; animation: fadeIn .3s linear forwards; } @keyframes fadeIn { to { opacity: 1; } }عندما تُزال العناصر، فإنّها تكبُر وتتلاشى أمام المستخدم، أمّا العناصر المُستعادة فتسلك الأسلوب المعاكس، فعملية التحريك بالنسبة للعناصر المستعادة تماثل تماماً عملية التحريك بالنسبة للعناصر المزالة ولكن بالمقلوب. li.removed-item { animation: removed-item-animation .6s ease-out forwards; transform-origin: 50% 50%; } @keyframes removed-item-animation { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } } li.restored-item { animation: openspace .3s ease forwards, restored-item-animation .3s .3s ease-out forwards; } @keyframes openspace { to { height: auto; } } @keyframes restored-item-animation { 0% { opacity: 0; transform: scale(4); } 100% { opacity: 1; transform: scale(1); } }المثال الثالث المثال الثالث: ستنزلق العناصر المستعادة لتدخل من اليمين، أما العناصر المزالة فستنزلق يساراً إلى الخارج. يُعتبر المثال الثالث أبسط من سابقيه من الناحية الشكلية. فالعناصر المُضافة حديثاً سيكون لها نفس تأثير الظهور التدريجي كما في المثالين السابقين، لذلك سنتجاوز عملية التحريك الخاصة بإضافة عنصر جديد. بالنسبة للعناصر المُزالة فإنها ستنزلق يساراً إلى الخارج، مع ملاحظة تأثير جميل يحدث عند بدء عملية الإزالة باستخدام دالة توقيت من النوع Cubic Bezier، انظر إلى المثال التطبيقي لترى كيف تعمل هذه التحريكة. li.removed-item { animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29); } @keyframes removed-item-animation { 0% { opacity: 1; transform: translateX(0); } 30% { opacity: 1; transform: translateX(50px); } 80% { opacity: 1; transform: translateX(-800px); } 100% { opacity: 0; transform: translateX(-800px); } }أمّا العناصر المستعادة فستنزلق إلى الداخل من اليمين، وذلك باستخدام نفس دالة التوقيت السابقة، ولكنها ليست الحالة المعاكسة تماماً لها (تفقّد المثال التطبيقي لترى النتيجة النهائية). li.restored-item { animation: openspace .3s ease forwards, restored-item-animation .5s .3s cubic-bezier(.14,.25,.52,1.56) forwards; } @keyframes openspace { to { height: auto; } } @keyframes restored-item-animation { 0% { opacity: 0; transform: translateX(300px); } 70% { opacity: 1; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } المثال الرابع المثال الرابع: ستكبر العناصر المستعادة والجديدة وتظهر تدريجياً ضمن موقعها، أمّا العناصر المزالة فإنّها ستصغر وتختفي تدريجياً. وهذا المثال بسيط أيضاً. فكل من العناصر الجديدة والمستعادة ستكبر وتظهر تدريجياً في مواقعها، أما العناصر المزالة ستصغر وتختفي تدريجياً. هناك إطارين أساسيين keyframes لهاتين التحريكتين: li.removed-item { animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards; } @keyframes removed-item-animation { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0); } } li.restored-item { animation: openspace .3s ease forwards, restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards; } @keyframes openspace { to { height: auto; } } @keyframes restored-item-animation { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } المثال الخامس المثال الخامس: تسقط العناصر الجديدة من الأعلى إلى الأسفل. العناصر المزالة تبقى معلّقة قليلاً ثم تسقط إلى الأسفل. أما العناصر المستعادة فتنزلق إلى الداخل من اليمين. في هذا المثال، عندما نُزيل أحد العناصر فإنّه يبقى معلّقاً قليلاً قبل أن يبدأ بالسقوط الفعلي ثم الإختفاء. في الحقيقة هذا هو الجزء الأهم في هذا المثال، لأنّ العناصر الجديدة ستسقط إلى الأسفل كما في المثال الأوّل، والعناصر المستعادة ستنزلق إلى الداخل من اليمين كما في المثال الثالث، ولكن مع فرق طفيف في دالة التوقيت timing function. لذلك فإنّ التحريكة الخاصة بإزالة العناصر هي التأثير الجديد الوحيد في هذا المثال. li.restored-item { transform: translateX(300px); animation: openspace .3s ease forwards, restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards; } @keyframes openspace { to { height: auto; } } @keyframes restored-item-animation { to { opacity: 1; transform: translateX(0); } } li.removed-item { animation: removed-item-animation 2s cubic-bezier(.55,-0.04,.91,.94) forwards; transform-origin: 0% 100%; }يعطي تغيير زاوية الدوران للعنصر ضمن أُطر frames مختلفة (الأطر الرئيسية: 0% و 20% و 40% و 60% و 70% و 90% و 100%) انطباعاً بأنّ العنصر يتأرجح بينما يكون معلّقاً، وبعد ذلك يبدأ بالسقوط إلى الأسفل. @keyframes removed-item-animation { 0% { opacity: 1; transform: rotateZ(0); } 20% { opacity: 1; transform: rotateZ(140deg); } 40% { opacity: 1; transform: rotateZ(60deg); } 60% { opacity: 1; transform: rotateZ(110deg); } 70% { opacity: 1; transform: rotateZ(90deg) translateX(0); } 90% { opacity: 1; transform: rotateZ(90deg) translateX(600px); } 100% { opacity: 0; transform: rotateZ(90deg) translateX(600px); } } المثال السادس المثال السادس: ستختفي العناصر المزالة تدريجياً وتسقط إلى الأسفل باتجاه اليسار، أما العناصر الجديدة والمستعادة فستنزلق إلى الداخل من اليمين. سيكون لكل من العناصر الجديدة والمستعادة نفس السلوك في هذا المثال، حيث ستنزلق هذه العناصر إلى الداخل من اليمين ثم تخرج بشكل طفيف من الجهة اليسرى قبل أن تستقرّ في مكانها. li.restored-item { transform: translateX(300px); animation: openspace .3s ease forwards, restored-item-animation .5s .3s cubic-bezier(.14,.25,.52,1.56) forwards; } @keyframes openspace { to { height: auto; } } @keyframes restored-item-animation { 0% { opacity: 0; transform: translateX(300px); } 70% { opacity: 1; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } }ستنزلق العناصر المزالة ببطء نحو اليسار، وبعد ذلك ستسقط إلى الأسفل باتجاه اليسار وتتلاشى. من المهم الآن أن نعمل على إعداد تحويل مناسب لموضع نقطة الأصل origin (مبدأ الإحداثيات)، بحيث أنّ التأثير المسؤول عن السقوط إلى أسفل يبدو أكثر واقعية. بغية ذلك، أجريت تحويلاً على نقطة الأصل لكي تنطبق على آخر نقطة تماس بين العنصر والسطر الذي ينتمي إليه، وذلك قبل أن يبدأ بالدوران والسقوط إلى أسفل، يعطي ذلك انطباعاً بأنّ العنصر يسقط بسبب وزنه. li.removed-item { animation: removed-item-animation 1s linear; transform-origin: 390px 100%; } @keyframes removed-item-animation { 0% { opacity: 1; transform: translateX(0) rotateZ(0); } 50% { opacity: 1; transform: translateX(-400px) rotateZ(0); } 75% { opacity: 1; transform: translateX(-420px) rotateZ(-30deg); } 100% { opacity: 0; transform: translateX(-800px) rotateZ(-60deg) translateY(400px); } } خاتمةفي الواقع، الإمكانيات المتاحة لا حدّ لها تقريباً، هناك الكثير من الطرق الأكثر الإبداعية لإضافة وإزالة عناصر قائمة، وأنا على ثقة بأنّك تستطيع ابتكار تأثيرات خاصة بك، وأرجو أن يكون هذا الدرس مثيراً وملهماً. لم أدخل في القسم المتعلّق بـ JavaScript لأنّ ذلك ليس من محور اهتمام الدرس. من الملاحظ وجود خطأ ضمن متصفح Firefox (ربما يُصحّح في النسخ اللاحقة) ,والذي يسبب وميضاً للصفحة كلّما تمّ وضع التركيز على العنصر أو حتى إزالة التركيز عنه (أي عندما تضغط زر edit/save). لا أدري إذا كانت توجد طريقة لتجاوز هذا الأمر، لذلك فمن فضلك أعلمني إذا استطعت تحديد سبب ذلك الوميض وإذا كانت هناك أي طريقة لمنعه. على أية حال جُرّبت الأمثلة السابقة بشكل جيّد على المتصفحات التي تدعم Webkit. شكراً لقراءتك هذا الدرس، وأرجو أن تكون قد استمتعت فيه. بإمكانك الاطّلاع على هذه الأمثلة من هنا، أما الشيفرة المصدرية فهي متُوفّرة على هذا المُستودع. ترجمة -وبتصرّف- للمقال Creative Add/Remove Effects For List Items with CSS3 Animations لصاحبته Sara Soueidan.
  16. إذا كان لديك موقع تطوير، توثيق لمشروع، قسم مساعدة منتجات أو أي شيء مماثل وكنت تستعمل ووردبريس كنظام إدارة مُحتوى، فهناك احتمالات أنّك احتجت إلى عرض شيفرات برمجيّة في وقت أو آخر. قد يسبّب هذا الأمر مشكلة صغيرة أو مشكلة كبيرة جدًا على حسب لغة البرمجة المستخدمة. سنقوم في هذا المقال بتوضيح لماذا يعدّ هذا أمرًا مثيرًا للإزعاج وكذلك استكشاف بعض الخيارات المتاحة لك من أجل عرض الشيفرات البرمجيّة بشكلٍ جميل وسهل على موقع ووردبريس الخاص بك. لماذا عرض الشيفرات البرمجية أمر صعبتحتاج لفهم سبب صعوبة عرض الشيفرات البرمجيّة إلى معرفة بعض أساسيّات HTML. لجعل بعض النصوص عريضة (Bold) فعليك وضعها بين وسوم. من أجل جعل الخط عريضًا مثل هذا النصّ فسأحتاج إلى كتابة <strong>الخط عريضًا</strong> في محرّر ووردبريس الخاص بي. الأمور إلى الآن جيّدة ولكن الجزء الصعب هو: ماذا لو أردتُ أن أريك كيف قمتُ بعمل ذلك؟ في أيّ وقت أقوم بكتابة <strong> في المحرّر سيتمّ ترجمتها كشيفرة HTML برمجيّة، يعني هذا أن الوسم سوف يختفي وفي المقابل سيتم إظهار النص عريضًا. المشكلة الأخرى الموجودة لدينا هي إبراز بنية الجملة (Syntax) وتلوينها. حتى إذا تمّ عرض الشيفرات البرمجيّة بشكل صحيح فربّما يكون من الصعب قراءتها بدون التنسيق الصحيح. عرض الشيفرات البرمجيةأفضل طريقة لعرض الشيفرات البرمجيّة بالشكل الصحيح هي تحويل الرموز ذات المعاني المميّزة إلى HTML Entities (كيانات HTML). ربّما تكون على درايّة أنّه أحيانًا قد تحتاج إلى كتابة &amp; بدلاً من علامة العطف & العاديّة لجعلها تظهر على نحوٍ صحيح. يرجع هذا إلى أنّ &amp; هي كيان HTML الخاص بعلامة العطف &. لا يتمّ ترجمة كيانات HTML إلى شيفرات برمجيّة وإنّما يتم عرضها مثل نظيراتها من غير الكيانات. من أجل أن تريني كيف تنشئ خطّ عريض فعليك أن تكتب شيء يشبه ما يلي: &lt;strong&gt;bold text&lt;/bold&gt;&lt; هي كيان HTML لعلامة أقل من (لاحظ اختصار lt) و&gt; كيان HTML لعلامة أكبر من، لهذا استخدمنا الاختصار gt. إضافة شيفرة برمجية إلى تدوينة ووردبريس – الطريقة السهلةأسهل طريقة لإضافة شيفرات برمجيّة إلى تدويناتك هي أن تستخدم كيانات HTML وتحيط كل شيء بوسم <pre>. مثال سريع لتوضيح الأمر: <pre> add_action('admin_notices', 'show_mot_text'); function show_mot_text() { $text = get_motivation_text(); echo "&lt;p id='wp-admin-motivation'&gt;$text&lt;/p&gt;"; } </pre>لاحظ كيف قمتُ بإدراج الشيفرات البرمجيّة بعد وسم <pre> مباشرةً وأغلقتُ الوسم باستخدام <pre/> بعد آخر رمز في الشيفرة البرمجيّة. قد ترى أنّه من الأفضل لو تمّ وضع الوسوم في أسطر منفردة ولكن في هذه الحالة ستقوم خاصيّة إبراز بنية الجملة (Syntax Highlighter) في جافا سكربت بترجمة فواصل الأسطر تلك على أنّها فواصل أسطر فعليّة. ولذلك فعدم ترك فواصل أسطر تعتبر عادة حميدة هنا. تعمل هذه الطريقة بشكل جيّد ولكن صيانتها تعتبر كابوسًا. إذا كان لديك العديد من الوسوم وليس فقط النصّ الوحيد الموجود في المثال ستجد هناك فوضى من كيانات HTML مما يجعل عمليّة تعديل الشيفرات البرمجيّة أمرًا صعبًا. إذا احتجتُ إلى اللجوء إلى هذه الطريقة فإنّني أستخدم محرّر نصوصي لإنشاء كيانات HTML. أقوم بكتابة شيفرات برمجيّة عاديّة ومن ثمّ تحويل كل كيانات HTML مرّة واحدة باستخدام محرّر النصوص. إذا احتجت إلى تعديل الشيفرات البرمجيّة فيمكنك لصق النسخة المحوّلة ثمّ فكّ ترميز الكيانات إلى الرموز الصحيحة. إذا كنت تستخدم Atom.io فيمكنك استخدام حزمة HTML Entities، أمّا إذا كنت تستخدم محرّر النصوص Sublime فيمكنك استخدام أمر HTML: Encode Special Characters. رغم أنّه باستطاعتك الحصول على سير عمل جيّد باستخدام هذه الطريقة، إلا أنّ الشيفرات البرمجيّة تظهر بشكل مضطرب في محرّر تدوينات ووردبريس ودعونا نعترف أنّ هذه النتيجة أبعد ما تكون عن نظام سير عمل سريع. طريقة أفضل لعرض الشيفرات البرمجيةطريقة أفضل لإضافة شيفرات برمجيّة إلى موقع هي استخدام إضافة لتنفيذ هذا الأمر بالتحديد. الكثير من الإضافات تستخدم مكوّن جافا سكربت يعمل على إبراز بنية الجملة وخيارات أخرى لشيفراتك البرمجيّة. مكوّن إبراز بنية الجملة المفضّل بالنسبة لي هو Prism ولحسن الحظّ هناك إضافة تقوم بدمجه في ووردبريس. حمّل إضافة Prism WP، ثبّتها ثم ابدأ في كتابة شيفراتك البرمجيّة مع اتّباع التعليمات التالية. قم بإحاطة شيفراتك البرمجيّة باستخدام وسم <pre> ووسم <code>.قد تتم إضافة فئة معيّنة class إلى هذا الوسم والتي ستحدّد اللغة المستهدفة، وذلك لإبراز وتلوين الشيفرة بشكل مُناسب.إذا أردت إضافة ترقيم للأسطر فستحتاج إلى تفعيل هذا من إعدادات الإضافة ثم تضيف فئة line-numbers إلى وسم <pre>.مثال الشيفرة البرمجيّة السابق يبدو كما يلي الآن في المحرّر: <pre class="line-numbers"> <code class='language-php'> add_action('admin_notices', 'show_mot_text'); function show_mot_text() { $text = get_motivation_text(); echo "<p id='wp-admin-motivation'>$text</p>"; } </code> </pre>يبدو هذا أفضل بكثير، أليس كذلك؟ الإخراج الخاص بهذه الشيفرات لطيف أيضًا، تلقائيًّا سيظهر الإخراج مثل الصورة أدناه في حالة استخدام قالب Twenty Fifteen. هناك عدد آخر من القوالب التي يمكنك استخدامها، ربّما تريد إلقاء نظرة على الصفحة الرئيسيّة لإضافة Prism. يمكن تغيير القوالب بالنّقر على الدّوائر الموجودة في الجانب الأيمن. تتيح لك الإضافة تغيير القالب من خلال الإعدادات الخاصّة بالإضافة. خدمات خارجيةهناك عدد كبير جدًا من الخدمات التي تسمح لك بلصق شيفراتك البرمجيّة مثل Gist ،JSFiddle و Pastebin. لدى كل خدمة من هذه الخدمات إضافات ووردبريس تمكنك من تضمين شيفراتك في تدوينات ووردبريس الخاصّة بك. أقترح عليك الذهاب إلى صفحة البحث عن الإضافات في ووردبريس والبحث عن الإضافة المناسبة لك، ستجد العديد منها في ثوانٍ معدودة. افعلها بنفسك DIYأفضّل دائمًا الاعتماد على نفسي لإيجاد حلول للمشاكل عملاً بمبدأ افعلها بنفسك (DIY – Do It Yourself)، لذلك دعونا نحاول حل هذه المشكلة دون اللجوء لحلول جاهزة. لن نتطرّق لعمليّة الإبراز لأنّها صعبة للغاية، ولكن باستطاعتنا فعل الكثير لجعل إضافة الشيفرات البرمجية في ووردبريس أكثر سهولة. أكبر مشكلة تواجهنا هي مشكلة كيانات HTML. ما نريد فعله هو القدرة على كتابة الشيفرات البرمجيّة كما هي في الواجهة الخلفيّة (Backend) وعرضها كما هي أيضًا في الواجهة الأماميّة (Frontend) بدون ترجمة الوسوم. يمكن تنفيذ ذلك عن طريق إضافة مرشّح (Filter) إلى the_content. الفكرة عبارة عن أنّه قبل عرض المحتوى سنبحث خلال هذا المحتوى عن أي نصوص بين وسوم code واستبدال أي رموز مميّزة بها بكيانات HTML. لقد قمتُ قبل بضعة أشهر بكتابة إضافة بسيطة تسمّى Smart Code Escape لفعل هذا الأمر. الإضافة مثال ممتاز على شيء مفيد يستخدم 15 سطر شيفرات برمجيّة فقط. لنلق نظرة الآن. أول شيء تحتاج لفعله هو إنشاء إضافة. يمكن الاطلاع على سلسلة "مدخل إلى برمجة إضافات ووردبريس" إذا لم يكن لديك معرفة مسبقة حول كيفيّة برمجة الإضافات. باختصار: قم بإنشاء مجلّد في مجلّد الإضافات الخاصّ بك وقم بتسميته smart-code-escape وبداخل المجلّد قم بإنشاء ملفّ باسم smart-code-escape.php. قم بإضافة المحتوى التالي إلى الملف. <?php /* * Plugin Name: Smart Code Escape * Plugin URI: https://github.com/danielpataki/Smart-Code-Escape * Description: Converts less than, greater than and ampersand characters to their HTML entities within pre tags before they are output on the page. You will always see the non-escaped version in the editor, making code easy to modify. It Will not convert code tags directly within pre tags to support Prism-style highlighting. * Version: 1.1 * Author: Daniel Pataki * Author URI: http://danielpataki.com * License: GPL v2 * Licence URI: http://www.gnu.org/licenses/gpl-2.0.txt */ function smart_code_escape_pre($data) { preg_match('@(<code.*>)(.*)(<\/code>)@isU', $data[2], $matches); if(!empty( $matches)) { return $data[1] . $matches[1] . str_replace(array('&', '<', '>'), array('&amp;', '&lt;', '&gt;'), $matches[2]) . $matches[3] . $data[3]; } else { return $data[1] . str_replace(array('&', '<', '>'), array('&amp;', '&lt;', '&gt;'), $data[2]) . $data[3]; } } add_filter('the_content', 'smart_code_escape_content', 9); function smart_code_escape_content($content) { $content = preg_replace_callback('@(<pre.*>)(.*)(<\/pre>)@isU', 'smart_code_escape_pre', $content); return $content; }تحتوي الإضافة الأصليّة على توثيق مضمّن للشيفرات البرمجيّة، إذا كنت مهتمًّا فيمكنك تحميلها من المستودع وإلقاء نظرة عليها. أوّل شيء يمكن ملاحظته هو أنّني قمتُ بإضافة مرشّح إلى the_content. يقوم هذا المرشّح باستدعاء دالّة Callback تعمل مع المحتوى الموجود بين وسوم <pre>. تقوم دالة ()smart_code_escape_pre بتولي عمليّة التحويل. تعمل أوّلاً على التحقّق ممّا إذا كانت الشيفرات البرمجيّة محاطة بوسم <code>. فكّرتُ في عمل هذا التحقّق للتأكّد من أنّ الإضافة لن تتعارض مع إضافات الشيفرات البرمجيّة الأخرى مثل إضافة Prism السابق ذكرها. أتوقّع أنّه إذا قام أحدهم بإضافة شيفراتهم البرمجيّة عن طريقة إحاطتها بوسم <pre> وكذلك وسم <code> فمؤكّد أنّه يريد بالفعل عرض الشيفرات البرمجيّة كما هي في تدوينته وليس تنفيذ الشيفرات وإظهار تأثيرها على النص فقط. إذا لم تكن محتويات الوسم <pre> موجودة داخل وسم <code> فستقوم الدّالة باستبدال كل الرموز المميّزة بكيانات HTML المعبّرة عنها. خاتمةكما تلاحظ فإنّ إضافة شيفرات برمجيّة إلى موقعك ليس بالأمر الصعب، كل ما عليك معرفته مجرّد أساسيّات لماذا يتم فك الترميز. ترجمة -وبتصرّف- للمقال: How To Display Code On Your WordPress Website The Proper Way لصاحبه Daniel Pataki.
  17. توجد الكثير من المقالات التّتي تتحدّث عن ترجمة إضافات Plugins ووردبريس، إلّا أنّ القليل منها يتطرّق لتفاصيل عمليّة التّرجمة عندما تكون مهمَّة يوميّة. مالّذي يحدُث عند تغيير جزء من الشّفرة البرمجيّة Code؟ مالّذي يحدُث عند إضافة سلاسل محارف Strings جديدة؟ مالّذي يحدُث عند تحديث إضافة إلى إصدار جديد؟ هذه هي نوعيّة الأسئلة الّتي سيُجيب عليها هذا المقال. سنتطرَّق، خطوة بخطوة، كيف نعمل من أجل أن تكون الإضافات الجديدة أو المُحدَّثة جاهزةً للتّرجمة إلى أيّ لغة. يتوفّر ووردبريس بلغات عدّة: تُضَمَّن في نظام ووردبريس لإدارة المحتوى قابليّةُ الاستخدام بأيّ لغة، على الرّغم من أنّ لغة الواجهة الافتراضيّة هي الإنجليزية الأميركية (التّرميز en_US). إنشاء إضافةأوّل ما يجب تنفيذه هو إنشاء إضافة. سننشئ إضافةً للتّطبيق عليها. يُمكنك متابعة درس مُقدّمة إلى برمجة إضافات Wordpress للمزيد حول برمجة إضافات ووردبريس. ستعمل الإضافة على كتابة نصّ تحفيزي في التّرويسة Header. أولًا أنشئ مجلَّدًا جديدًا ضمن مجلَّد الإضافات وسمِّه wp-admin-motivation. ثمّ أنشئ ملفًّا ضمن هذا المجلّد وسمِّه wp-admin-motivation.php. في ما يلي الشّفرة الّتي يجب وضعها في الملفّ: <?php /* Plugin Name: Admin Motivation Plugin URI: http://danielpataki.com Description: Shows motivational messages in the admoin bar Author: Daniel Pataki Version: 1.0 Author URI: http://danielpataki.com Text Domain: wp-admin-motivation */ function get_motivation_text() { $motivation = array( 'You are awesome', 'This website is boss', 'You look great today', 'Your earlobes are well rounded, good job!' ); shuffle( $motivation ); return $motivation[0]; } add_action( 'admin_notices', 'show_motivation_text' ); function show_motivation_text() { $text = get_motivation_text(); echo "<p id='wp-admin-motivation'>$text</p>"; } add_action( 'admin_enqueue_scripts', 'motivation_assets' ); function motivation_assets($hook) { wp_enqueue_style( 'motivation-styles', plugin_dir_url( __FILE__ ) . 'styles.css' ); }تخلِط الدّالّة الأولى ()get_motivation_text مصفوفة Array من العبارات التّحفيزيّة باستخدام دالّة shuffle الموجودة في PHP، ثمّ بعد الخلط تختار العبارة الأولى من المصفوفة. يُمكن عدّ دالّة ()get_motivation_text وسيلةً لتوزيع العبارات التّحفيزيّة عشوائيًّا. نربُط في الخطوة التّاليّة بين دالّة ()show_motivation_text والخطّاف Hook المسمَّى admin_notices. تحصُل دالّة ()show_motivation_text على عبارة تحفيزيّة عشوائيّة عن طريق ()get_motivation_text ثمّ تطبع العبارة داخل فقرة ذات معرّف wp-admin-motivation. تكون العبارة التّحفيزيّة، بالوصول إلى هذه النّقطة، مرئيّة؛ ولكنّنا سنغيّر موضعها لتكون إلى جانب تبويب خيّارات/مساعدة (Options/help). نستخدم CSS لهذا الغرض. تكتفي بعض الإضافات بوضع بضعة أسطر CSS في التّرويسة، إلّا أنّ الطّريقة الصّحيحة للتّعامل مع CSS هيّ إدراج الأسطُر ضمن الطّابور Queue؛ وذلك عن طريق ربط دالّة ()motivation_assets بالخطّاف admin_enqueue_scripts وإدراج CSS في الطّابور هناك. يحدّد النّمط مواضع النّصّ مع أخذ اتّجاه الكتابة من اليمين إلى اليسار Right-to-left, RTL في الحسبان. #wp-admin-motivation { float: right; padding-right: 15px; padding-top: 7px; margin: 0; font-size: 11px; } .rtl #wp-admin-motivation { float: left; padding-left: 15px; }الإضافة جاهزة الآن للعمل. المشكل الوحيد هو أنّ العبارات التّحفيزيّة تستخدم الإنجليزيّة فقط. إن أردت استخدام لغة أخرى فسيتطلّب الأمر إنشاء إضافة مماثلة وإبدال العبارات الإنجليزيّة بعبارات اللّغة المستهدفة. تخيّل أنّك تُريد استهداف عشرين لغةً، يعني هذا أنّك ستحتاج لعشرين إضافة لا يوجد فرق بينها سوى في العبارات المعروضة. الكثير من الجهد المهدور، لا بدّ من وجود وسيلة أخرى. تدويل Internationalizing إضافةيهدف تدويل الإضافات في الأساس إلى جعلها جاهزةً لتُترجَم. يتطلّب التّدويل تغليفَ سلاسل المحارف Strings في دوالّ خاصّة تُسخدَم لتحميل التّرجمات الصّحيحة. توجد العديد من دوالّ التّدويل إلّا أنّنا سنأخذ فقط واحدةً منها، وهي دالّة ()__، ونترك البقيّة إلى أن نفهم المثال. تأخذ الدّالّة ()__ معطييْن: النّص الّذي نُريد ترجمته ونطاق النّصّ Text domain. في ما يلي الصّيغة العامّة لاستخدام هذه الدّالّة: <?php $greeting = __( 'Hello There!', 'text-domain' ); ?>نحصُل بعد استخدام دالّة ()__ على ترجمة النّصّ إن كانت موجودة، وإلّا فإنّ الدّالّة تُعيد النّصّ الأصليّ. تستخدم الدّالّةُ اللّغةَ الحاليّة لتحديد التّرجمة المطلوبة. يُمكنك الانتقال بين لغات ووردبريس في الإعدادات. تُطبَّق اللّغة المُختارة في الإعدادات على جميع التّرجمات. نأتي الآن لنطاق النّصّ، حتّى تكتمل عندنا الصّورة. نطاق النّصّ هو طريقة لتجميع التّرجمات مع بعض. لدى القالب Theme الّذي تستخدمه نطاق نصّ خاصّ به، نفس الشّيء بالنّسبة لجميع الإضافات. تجعل نطاقات النّصوص من التّفريق بين التّرجمات عمليّةً أيسر. يجب أن يكون نطاق النّصّ، بالنّسبة للإضافات، مطابقًا لاسم مجلّد الإضافة. يعني هذا، في مثالنا، أنّ نطاق النّصّ يجب أن يكون wp-admin-motivation. كلّ ما ياوجّب علينا فعله، من أجل تدويل الإضافة، هو تغليف سلاسل المحارف بالدّالّة ()__. $motivation = array( __( 'You are awesome', 'wp-admin-motivation'), __( 'This website is boss', 'wp-admin-motivation'), __( 'You look great today', 'wp-admin-motivation'), __( 'Your earlobes are well rounded, good job!, 'wp-admin-motivation')' );تنفيذ التّرجماتجعلنا في الخطوة السّابقة سلاسل المحارف جاهزةً للتّرجمة، لكن لحدّ الآن لا توجد أيّ ترجمات على الموقع. يجب أن نخبر ووردبريس أين توجد ترجمات الإضافة. الطّريقة المعياريّة لذلك هي إنشاء مجلّد فرعيّ باسم lang ضمن مجلَّد الإضافة. أنشئ مجلّد lang الآن وأضف الشّفرة التّاليّة في الملفّ الرّئيس للإضافة حتى يعرف ووردبريس أين توجد التّرجمات: add_action('plugins_loaded', 'wan_load_textdomain'); function wan_load_textdomain() { load_plugin_textdomain( 'wp-admin-motivation', false, dirname( plugin_basename(__FILE__) ) . '/lang/' );تعدّ دالة ()load_plugin_textdomain أساسيّةً هنا ويجب أن تُستدعى من دالّة مربوطة بالخطّاف plugins_loaded. أوّل معطى لدالّة ()load_plugin_textdomain هو اسم نطاق النّصّ الّذي تحدّثنا عنه سابقًا، الثّاني مهجور Deprecated، والثّالث هو مجلّّد اللّغة. ستكون أسماء ملفّات التّرجمات على صيغة plugin_name-locale.mo. حيثُ plugin_name اسم الإضافة وlocale المحلّيّة. سنرى في ما بعد كيفيّة إنشاء هذه التّرجمات. تذكّر، في الوقت الحاليّ، أنّك يجب أن تضع ملفّات التّرجمات هنا. ملحوظة: المحليّة Locale هي مجموعة من المُعطيات تحدّد لغة المستخدم، دولته، وأيّ تفضيلات خاصّة قد يودّ المستخدم رؤيتها في لغة الواجهة. سنختار ترجمة العبارات التّحفيزيّة الموجودة في الإضافة إلى اللّغة العربيّة؛ لذا سيكون المفّ باسم wp-admin-motivation-ar.mo. بالوصول إلى هذه النّقطة سيعمل كلّ شيء بالطريقة المرجوَّة، ينقُصُنا فقط إنشاء التّرجمات. إنشاء التّرجماتتوجد طُرُق متعدّدة لإنشاء ترجمات إلّا أنّ النّتيجة في النّهاية متطابقة. ستحصُل على ملفّين، أحدهما بامتداد po. والآخر بامتداد mo. الأوّل يُمكن للأشخاص قراءته، ويُمكنك فتحه بأيّ محرّر نصوص والتّعديل عليه. أمّا الملفّ ذو الامتداد mo. فهو نتاج تحويل ملفّ po. إلى صيغة مقروءة بالنّسبة للآلة، ذات حجم أصغر بكثير إلّا أنّه لا يمكن للإنسان قراءتها. في ما يلي مثال على ملفّ PO غير مُترجَم. توجد في أعلى الملفّ معلومات أساسيّة عن التّرجمة، المترجِم والمشروع؛ تليها سلاسل محارف تُمكن ترجمتها متبوعة بأماكن التّرجمات المنتظَرة. msgid "" msgstr "" "Project-Id-Version: WP Admin Motivation 1.0.0\n" "Report-Msgid-Bugs-To: \n" "POT-Creation-Date: 2015-04-27 13:09+0100\n" "PO-Revision-Date: 2015-04-27 13:09+0100\n" "Last-Translator: Daniel Pataki <contact@tastique.org>\n" "Language-Team: Daniel Pataki <hello@danielpataki.com>\n" "Language: Hungarian\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" "X-Poedit-KeywordsList: __;_e\n" "X-Poedit-Basepath: .\n" "X-Poedit-SearchPath-0: ..\n" #: ../wp-admin-motivation.php:20 msgid "You are awesome" msgstr "" #: ../wp-admin-motivation.php:21 msgid "This website is boss" msgstr "" #: ../wp-admin-motivation.php:22 msgid "You look great today" msgstr "" #: ../wp-admin-motivation.php:23 msgid "Your earlobes are well rounded, good job!" msgstr ""الصّيغة العامّة للأسطُر في ملفّ التّرجمة هي التّاليّة: #: مسار الملفّ الّذي توجد به السّلسلة:رقم السّطر حيثُ توجد السّلسلة msgid "السّلسة المطلوبة ترجمتها" msgstr "التّرجمة"قد تظنّ أنّ كون أماكن تواجد السّلاسل مذكورة مباشرةً بعد ذكر رقم السّطر الّذي تتواجد به يجعل من إنشاء وصيّانة ملفّات التّرجمة أمرًا شاقًّا. لهذا السّبب توجد أدوات مخصًّصة للمساعدة. تُساعد أدوات المدير Admin tools في توليد ملفّات po. للإضافات الموجودة في مستودع ووردبريس. كما يُمكن أيضًا إنشاء ملفّات po. عبر البرنامج الرّائع Poedit. نزّل Poedi وشغّله؛ انقُر على File (ملفّ) ثمّ New catalog (مسرَد جديد). أدخل المعلومات المطلوبة في النّافذة المنبثقة. لا تهتّم بطقم المحارف (Charset) وصيّغ الجمع (Plural forms)؛ سنكتفي الآن بالمعلومات الأساسيّة. انتقل إلى تبويب Sources paths (مسارات المصادر). يُخبر مربَّع Paths (المسارات) Poedit أين يجب عليه البحث عن السّلاسل القابلة للتّرجمة ذات العلاقة بالمسار القاعديّ (Base path). سنضع التّرجمات ضمن مجلَّد فرعيّ في الإضافة؛ يعني هذا أنّ لدينا خيّارين لإعداد المسارات في Poedit: ضبط المسار القاعديّ Base path على القيمة /.. (المجلَّد الأب) وإعطاء القيمة . (المجلَّد الحاليّ) لمربَّع المسارات Paths.ضبط قيمة المسار القاعديّ Base path على قيمة المجلَّد الحاليّ . وقيمة مربَّع المسارات Paths على المجلَّد الأب /...يُخبر الخيّار الأوّل Poedit أنّ الشّفرة البرمجيّة للإضافة موجودة في المجلَّد الأب لمجلَّد اللّغة lang؛ أي أنّ البرنامج سيذهب للمجلَّد الأب ويبحث في ذلك المجلَّد. أمّا الخيّار الثّاني فيقول إنّ المجلَّد الّذي يوجد به الملفّ الحاليّ هو مجلَّد اللّغة؛ وأنّ الملفّات الّتي يجب التّحقّق منها توجد في المجلَّد الأعلى، لذلك استخدمنا /.. في مربَّع المسارات Paths. سنعتمد في هذا الدّرس الخيّار الثّانيّ. الخطوة التّاليّة هي ضبط الكلمات المفتاحيّة في تبويب Sources keywords (الكلمات المفتاحيّة للمصادر). نحدّد في هذا التّبويب أسماء دوالّ التّرجمة المستخدَمة. في المثال هنا نحتاج فقط لإضافة دالّة __. في أغلب الحالات ستحتاج لإدراج دالتّيْن إلى ثلاث؛ راجع التّرجمة المتقدّمة أدناه. لم يبق إلّا الموافقة على البيانات المُدخَلة. سيطلُب منك البرنامج مكان حفظ الملفّ؛ اختر مسار المجلَّد lang إن كنت اعتمدت الخيّار الثّاني في إعداد المسارات أعلاه. سيبحث Poedit في ملفّات الإضافة ويعثُر على السّلاسل الجاهزة للتّرجمة. يُمكنك بعدها ترجمة هذه السّلاسل إلى اللّغة الّتي تُريد. احفَظ الملفّ بعد الانتهاء من التّرجمة وسيولّد Poedit ملفّ MO في مجلَّد lang. تجب إعادة تسميّة ملفّ MO (اسم الملفّ في الإعداد الافتراضيّ هو default.mo) ليوافق الصّيغة الّتي ناقشناها سابقًا؛ أي أن اسم الملفّ، في المثال لدينا، هو wp-admin-motivation-ar.mo. بالنّسبة لملفّ PO فلايهمّ اسمه كثيرًا، إلّا أنّ من الأفضل تسميّته بنفس الطّريقة لكي تعرف بسهولة أيّ ملفّ PO يوافق ملفّ MO إذا كانت توجد الكثير من الملفّات في مجلَّد اللّغات. ستظهر العبارات التّحفيزيّة باللّغة العربيّة؛ بعد وضع ملفّ اللّغة في مجلَّد اللّغات ضمن الإضافة وتفعيل اللّغة العربيّة في إعدادات ووردبريس. صيّانة التّرجماتيبدو تحديث التّرجمات صعبًا للوهلة الأولى، إلّا أنّه ليس كذلك. صحيحٌ أنّ ملفّ PO يحوي رقم السّطر الّذي توجد به السّلسلة المُترجمَة، لكن ووردبريس لا يعتمد على أرقام الأسطُر عند استخدام ملفّ PO. الهدف من استخدام الملفّ والسّكر الّذيْن توجد بهما سلسلة المحارف المُترجَمة هو مساعدة المترجِم بحيث يُمكن النّظر إلى مكان وجود العبارة ومن ثمّ ترجمتها حسب السّيّاق الّذي وردت فيه. لن تحتاج إلى ملفّات التّرجمة إن كانت التّعديلات الّتي تُجريها تقتصر على الشّفرة البرمجيّة الّتي توجد بها سلاسل المحارف الجاهزة للتّرجمة دون أن تعدّل على هذه الأخيرة. ما أفعله عادةً هو إنشاء ملفّ POT ثمّ أحدّثه في كلّ مرة أحدّث فيها الإضافة، حتى ولو لم تتغيَّر سلاسل المحارف. تُشبه ملفّات POT ملفّات PO؛ إلّا أنّها لا تحتوي على أيّ ترجمات، فكلّ ما تحتويه هو الجمل والعبارات الجاهزة للتّرجمة؛ أيّ أنّها قوالب فقط. تكون التّرجمات سهلة ما دام ملفّ القالب محدَّثًا ويحوي رقم السّطر الصّحيح لكلّ سلسلة محارف. إذا احتجت إلى تحديث ملفّ لغة فكلّ ما عليك فعله هو فتحه عن طريق Poedit ثمّ النّقر على أيقونة التّحديث Update وسيُشعرك البرنامج بالسّلاسل الجديدة والمُعدَّلة ويمكنك بعدها التّعديل عليها. قبول التّرجماتمن الأمور الّتي يحدُث فيها الارتباك كثيرًا، على الأقلّ هذا ما حدث لي أولَ وهلة، هو كيفيّة إنشاء ترجمات جديدة لإضافة. كيف يُمكنني إضافة ترجماتي الخاصّة؟ كنتُ أظنّ أنّ هذه العمليّة تحدُث آليًّا، لكنّها ليست كذلك. عندما يُعجَب أحدهم بإضافة فإنّه يترجمها إلى لغته باستخدام ملفّ POT المضمَّن في الإضافة ثمّ يُرسل التّرجمة (ملفّات MO وPO) إلى مطوّر الإضافة الّذي يضعها في ملفّ lang، يُنشئ إصدارًا جديدًا ويدفعها إلى مستودع ووردبريس. عندما يتلقّى مستخدم الإضافة التّحديث تظهر الإضافة بلغة واجهة ووردبريس لديه، إن كانت ضمن اللّغات الموجوة في ملفّ lang. أستضيف كلّ مستودعاتي على Github وهو ما يسهّل على المترجمين إرسال ملفّات التّرجمة لي باستخدام طلبات السّحب Pull requests. كلّ ما عليّ فعله بعدها هو الضّغط على زرّ وإنشاء إصدار جديد من مستودع ووردبريس. التّرجمات المتقدّمةتعرّفنا في ما سبق على طريقة ترجمة سلاسل محارف قاعديّة عن طريق دالّة ()__. توجد 14 دالة ترجمة في ووردبريس يُمكن استخدامها لتدقيق ضبط ترجماتك. على الأرجح لن تحتاج إلّا إلى 3 أو 4 منها. نبدأ بالأشهر من بينها. 1- ()__هذه هي الدّالّة الأساسيّة للتّرجمة. تأخذ سلسلة محارف وتُعيد التّرجمة إن كانت موجودة. 2- ()e_نفس عمل الدّالّة السّابقة تقريبًا، إلّا أنّها بدلًا من إرجاع التّرجمة تعرضها مباشرةً. 3- ()n_تتيح هذه الدّالة وسيلة أنيقة للتّعامل مع الجموع. تأخذ الدّالّة أربعة معطيات: صيغة المفرد، صيغة الجمع، العدد الّذي على أساسه ستعرض الصّيغة (صيغة المفرد أو الجمع) ونطاق النّصّ. في ما يلي مثال سريع: <?php $messages = get_message_count(); // الاستعمال المبَسَّط: لا تُظهر الدّالة العدد الفعليّ $text = _n( 'You have one message', 'You have lots of messages', $messages, 'my-message-app' ); // في طريقة الاستعمال هذه نُظهر العدد الفعليّ للرّسائل $text = sprintf( _n( 'You have one message', 'You have %s messages', $messages, 'my-message-app' ), $messages ) ?>في هذا المثال نحصُل على عدد الرّسائل ضمن متغيّر messages ثمّ نستخدم هذا المتغيّر في دالّة ()n_ الّتي تعتمد على قيمة المتغيّر لاختيّار سلسلة المحارف الّتي تعرضها (بصيغة المفرد أو الجمع). في طريقة الاستعمال المبسَّط للدّالة لا يظهر عدد الرّسائل ضمن سلسلة المحارف المعروضة حيثُ توجد عبارتان، الأولى للعرض إذا كانت قيمة messages مفردة وتُعرَض الثّانيّة في حالة الجمع. إذا أردنا عرض العدد نستخدم عبارة s% في المكان الّذي نُريد أن يُعرض فيه العدد. بالنّسبة لملفّ PO فينبغي أخذ اللّغة الّتي نريد التّرجمة إليها في الحسبان. في أغلب اللّغات الأوروبيّة لا توجد سوى صيغة واحدة للجمع: إذا كان المعدود أكبر من أو يُساوي اثنين يُعدّ جمعا، أي أنّ هناك حالتين فقط (واحدة للمفرَد والأخرى للجمع). في اللّغة العربيّة يتغيّر المعدود حسب العدد في ما مجموعه خمس صيّغ (مفرَد، مثنَّى وثلاث حالات بالنّسبة للجمع)، إضافةً للصّيغة الّتي يكون العدد فيها يُساوي صفرا (أيّ أنّ المجموع يُساوي ستة). لمن يُريد التّفصيل في المسألة فليراجع فصل العدد والمعدود في النّحو :). لأخذ هذه التّغييرات في الحسبان عند إنشاء ملفّ التّرجمة نُخبر Poedit بعدد صيّغ الجمع الموجودة لدينا، بالنّسبة للعربيّة: nplurals=6; plural=n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 ? 4 : 5; قبل البدء في البحث عن سلاسل المحارف نُضيف الدّالة n_ في تبويب Sources keywords (الكلمات المفتاحيّة للمصادر) حتى يتعرّف عليها البرنامج؛ إضافةً للدّالّة __ السّابقة. ملحوظة: من المهمّ جدًّا كتابة الدّالّة بالصّيغة n:1,2_ الّتي تعني أنّ المُعطى الأوّل (الرّقم 1) يعبّر عن صيغة المفرد وأنّ المعطى الثّاني لصيغة الجمع. يمكننا الآن إنشاء ملفّ اللّغة وترجمة العبارات الواردة فيه مع أخذ الجمع بالحسبان. ملحوظة: أبقِ عبارة %s في التّرجمات الّتي تحتاج ذلك، أي الّتي يكون العدد فيها اثنان فما فوق. ستُبدَل هذه العبارة بالعدد الفعليّ أثناء تنفيذ البرنامج. مثلًا إذا كان العدد بين 3 و 10 (التّبويب الرّابع في الصّورة، الّذي يحمل العنوان Form 3) فيمكن أن تكون التّرجمة “توجد لديك 3 رسائل” أو “توجد لديك 8 رسائل”. القيمة (3 و 8) ستُعرف أثناء عمل الإضافة الّتي ستضعها مكان %s. 4- ()x_تهدف هذه الدّالّة إلى الوقاية من الخلط بين الكلمات مختلفة المعنى الّتي تُكتَب بنفس الطّريقة. مثلًا إذا كنت تستخدم كلمة pair بمعنى “زوج أشخاص” وبمعنى “ربط بجهاز بلوتوث” فيُمكن أن يشتبه المعنى. لمنع الاشتباه ولمساعدة المترجم على اختيّار العبارة المناسبة في لغته استخدم دالّة ()x_. _x( 'Pair', 'A pair of people', 'my-plugin-textomaind' ); _x( 'Pair', 'As in: pairing devices', 'my-plugin-textomaind' );5- ()ex و ()nxيُشبه عمل هاتيْن الدّالتيْن عمل دالّة ()x_ أعلاه. الفرق هو أنّ ()ex_ تعرض النّتيجة مباشرةً في حين أنّ nx_ تُضيف إمكانيّة تحديد صيغة للجمع. تخليص Escaping التّرجماتتتيح الدّوال السّتّ التّاليّة إمكانيّة تخليص التّرجمة من أجل الاستخدام الآمن في نصوص HTML (الثّلاث الأخيرة) أو خاصيّاته attributes (الثّلاث الأولى). ()esc_attr__()esc_attr_e()esc_attr_x()esc_html__()esc_html_e()esc_html_xترجمات Noopتسجّل دوالّ Noop سلاسل المحارف بصيغة الجمع في ملفّ POT دون أن تترجمها. يعود السّبب في ذلك إلى أنّ العدد غير معروف سلفًا، وهو ما يعني أنّنا سنحتاج لدالّة أخرى للحصول على العدد وبالتّالي اختيّار صيغة المعدود (الجمع). لهذا السّبب نستخدم دالّة Noop ثمّ نترجم القيمة الحقيقيّة لاحقًا بعد الحصول على العدد. راجع المقال التّالي للمزيد. تستخدم الدّوال التّاليّة لهذا الغرض: ()n_noop_()nx_noop_()translate_nooped_pluralترجمة Javascriptربّما ننساءل ماذا عن سلاسل المحارف الموجودة ضمن شفرة Javascript؟ يقدّم ووردبريس الحلّ عبر دالّة ()wp_localize_script. تأخذ هذه الدّالّة ثلاثة معطيات: مِقبض Handle (معرّف) السّكريبت الّذي نُريد ترجمته، اسم كائن Object للاستخدام داخل السّكريبت ومصفوفة التّرجمة. في ما يلي مثال على ترجمة سلاسل محارف ضمن Javascript: add_action( 'admin_enqueue_scripts', 'motivation_assets' ); function motivation_assets($hook) { wp_enqueue_script( 'motivation-scripts', plugin_dir_url( __FILE__ ) . 'scripts' ); wp_localize_script( 'motivation-scripts', 'wma', array( 'section_title' => __( 'Today's motivation', 'wp-admin-motivation' ) )); }بعد إضافة التّرجمات يُمكنك استخدامها في ملفّ Javascript المُسجَّل. يجب عليك استخدام اسم الكائن ومفاتيح مصفوفة التّرجمة: jQuery.html( "<h2>" + wma.section_title + "</h2>" );خاتمةيستخدم ملايين الأشخاص لغاتِهم للتّعامل مع ووردبريس، فلمَ لا تساعدهم في عمل نفس الشّيء مع منتجاتك؟ فلا جعل الإضافات جاهزة للتّرجمة أمر صعب ولا صيّانتها تُمثّل كبير إزعاج. يُساعد تجهيز سلاسل المحارف للتّرجمة وإنشاء ملفّات po وmo الجميع كما أنّه يزيد من جودة المنتج. ترجمة بتصرّف لمقال Everything You Need to Know About Translating WordPress Plugins لكاتبه Daniel Pataki.
  18. صفحات لوحة التحكم هي روح وقلب الإضافات، ويسهل أن تفترض أنها عبارة عن استمارات متقدمة الغرض منها لتجميع البيانات من المستخدم. ولكن في الواقع، إن صفحات لوحة التحكم هي المكان الأفضل للترحيب بالمستخدمين الجدد، توفير المعلومات عن الإضافة، وعرض التفاصيل المطلوبة للدعم والوثائق. في هذا المقال القصير سنلقي نظرة على كيفية إضافة هذه الصفحات إلى لوحة تحكم ووردبريس. ويمكنك الاستعانة بهذه المعلومات بالإضافة لدروس أخرى لإنشاء صفحات مبوبة، استخدام خاصية الـ Ajax، وهكذا دواليك. مكونات صفحة لوحة التحكمهناك مكونين أو ثلاثة لصفحة لوحة التحكم، حسب الوظيفة التي تبني عليها: عنصر قائمة – رئيسي أو فرعي.محتوى الصفحة.برمجة وظيفة الاستمارات – إذا كانت مطلوبة.لن نتحدث في هذا المقال عن الاستمارات ووظيفتها، هذا موضوع آخر. إنما سنكتفي الآن بكيفية إنشاء الصفحات نفسها. القوائم الرئيسية والفرعيةهناك نوعين من عناصر القائمة: رئيسي وفرعي. وأرشح لك –كما يقول Wordpress Codex– أن تدرس ما إذا كانت إضافتك تحتاج إلى عنصر قائمة رئيسي فعلًا. حيث توجد العديد من الإضافات التي تضيف عناصر قائمة رئيسية، مما يؤدي إلى إزدحام لوحة التحكم. ومثال على ذلك هو إضافة WordTwit، المسئولة عن إنشاء تغريدات بالمحتوى الجديد. وهي إضافة ممتازة، إلا أنها تضيف عنصر قائمة رئيسي دون الحاجة إليه. هذا غير ضروري على الإطلاق، وكان من الأفضل الاكتفاء بعنصر فرعي في قائمة الإعدادات. بينما بعض الإضافات الأخرى مثل WooCommerce ،bbPress، وغيرها تضيف عناصر القائمة الرئيسية التي لها فائدة بالفعل، هذا يعتمد فقط على كيفية تفاعل المستخدمين مع منتجك. نصيحة عن خبرة: إذا كان المستخدم يحتاج للتعامل مع إضافتك بشكل يومي أو مستمر فاستخدم عنصر قائمة رئيسي. أما إذا كانت صفحتك في لوحة التحكم لغرض الإعدادات فقط، فسيكون إدراج عنصر فرعي في قائمة الإعدادات كافيًا. إنشاء صفحة لوحة تحكم رئيسيةأولًا نبدأ بإنشاء عنصر قائمة عن طريق الدالة ()add_menu_page. وترى هنا مثالًا لها مع الشرح: add_action( 'admin_menu', 'my_admin_menu' ); function my_admin_menu() { add_menu_page( 'My Top Level Menu Example', 'Top Level Menu', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6 ); }تأخذ الدالة سبع معطيات: عنوان الصفحة، الذي يعرّف وسم العنوان ويظهر في عنوان صفحة الانترنت في متصفح الانترنت وليس على الشاشة. العنوان الذي يظهر في القائمة.الصلاحيات المطلوبة للدخول إلى القائمة، يمكن استخدامه لحصر الصفحة على المدراء، أو المحررين، أو المؤلفين."الاسم اللطيف" أو slug للقائمة، وهو الذي يظهر في رابط الصفحة.الوظيفة، التي تتضمن محتوى الصفحة.رابط الأيقونة. ويقبل العديد من الصيغ. فإذا وُضع رابط صورة سوف تستخدم هذه الصورة. بإمكانك استخدام Dashicons، المبنية داخل ووردبريس، أو حتى استخدام ملف SVG.الترتيب في القائمة. وبما أن الوظيفة تختص بالمقالات، فقد اخترنا أن نضع عنصر القائمة بعدها مباشرة، أي في السادس. ويمكنك التعرف على ترتيب العناصر من Wordpress Codex.والآن الخطوة التالية هي إنشاء محتوى الصفحات. كل ما تحتاجه هو تعريف الدالة التي حددتها في المُعطى الخامس وكتابة بعض المحتوى. وهذا مثال بسيط لتبدأ به: function myplguin_admin_page(){ ?> <div class="wrap"> <h2>Welcome To My Plugin</h2> </div> <?php }إنشاء صفحة لوحة تحكم فرعيةهناك بعض الوظائف التي يمكن استخدامها لإنشاء صفحات فرعية. والدالة العامة ()add_submenu_page تمكنك من إنشاء صفحات فرعية في أي مكان، ولكن كل الصفحات الرئيسية لها وظائفها الخاصة لإضافة صفحات فرعية إليها: لإضافة صفحات فرعية إلى قسم المقالات استخدم add_posts_page.لإضافة صفحات فرعية إلى قسم الصفحات استخدم add_pages_page.لإضافة صفحات فرعية إلى قسم الوسائط استخدم add_media_page.لإضافة صفحات فرعية إلى قسم الروابط استخدم add_links_page.لإضافة صفحات فرعية إلى قسم التعليقات استخدم add_comments_page.لإضافة صفحات فرعية إلى قسم المظهر استخدم add_theme_page.لإضافة صفحات فرعية إلى قسم الإضافات استخدم add_plugin_page.لإضافة صفحات فرعية إلى قسم المستخدمين استخدم add_users_page.لإضافة صفحات فرعية إلى قسم الأدوات استخدم add_management_page.لإضافة صفحات فرعية إلى قسم الإعدادات استخدم add_options_page.كل من الوظائف السابقة تتبع نفس الصياغة: add_comments_page( $page_title, $menu_title, $capability, $menu_slug, $function); والمُعطىات شبيهة بتلك المذكورة في المثال السابق. ربما تود إضافة عنصر فرعي إلى عنصر قائمتك الرئيسي، وفي هذه الحالة لن تكون الوظائف السابقة ذات نفع لك. بل ستستخدم الدالة ()add_submenu_page، وهنا سنضيف عنصر فرعي إلى قائمتنا الرئيسية التي أعددناها سابقًا: add_action( 'admin_menu', 'my_admin_menu' ); function my_admin_menu() { add_menu_page( 'My Top Level Menu Example', 'Top Level Menu', 'manage_options', 'myplugin/myplugin-admin-page.php', 'myplguin_admin_page', 'dashicons-tickets', 6 ); add_submenu_page( 'myplugin/myplugin-admin-page.php', 'My Sub Level Menu Example', 'Sub Level Menu', 'manage_options', 'myplugin/myplugin-admin-sub-page.php', 'myplguin_admin_sub_page' ); }كما يمكنك أن ترى هذه الدالة مشابهة للدوال المذكورة سابقًا، باستثناء المُعطى الأول الذي يحدد الاسم اللطيف المستخدم في رابط الصفحة الرئيسية، وهو في حالتنا هذه: myplugin/myplugin-admin-page.php. الختامكما ترى، فإن إضافة عناصر إلى القائمة وصفحات محتوى سهل للغاية. الصعوبة تبدأ بعد هذه المرحلة، حيث نختار محتوى الصفحات، كيف نرتبه، استخدام CSS وجافاسكريبت لإظهار المحتوى بتنسيق رائع، التأكد من أن الاستمارات آمنة وموثقة وهكذا دواليك، هذا كله سيتم تغطيته في دروس مستقبلية. هدف هذا الدرس هو فهم أساسيات إنشاء قوائم وصفحات لوحة التحكم لكي تلجأ إليها وقت الحاجة. وسنتطرق إلى حالات معينة في استخدام هذه الخصائص قريبًا. هل هناك أي شيء تريد إضافته إلى المقالة؟ أو تريد الاستفسار عنه؟ سنسعد بالرد عليكم في التعليقات. مترجم بتصرف من مقال A Quick and Easy Guide To Creating WordPress Admin Pages لصاحبه Daniel Pataki. حقوق الصورة البارزة: Car vector designed by Freepik.
  19. يقوم النّاس بتنصيب مواقع ووردبريس كل يوم. بعضهم يستخدمه كما هو دون تغيير. ببساطة، ينصبون ووردبريس، يهيؤونه، ويستخدمون قالبًا دون أي تعديل فيه. ويبدؤون بالتدوين وهذا كل شيء. والبعض الآخر يفضل تخصيص الأشياء قليلًا. وبينما يمكنك تحقيق الكثير عن طريق استخدام قالب التصميم المناسب واختيار إضافات معينة، ربما يأتي عليك وقت تحتاج فيه للدخول إلى النص البرمجي بنفسك وإضافة بعض السطور. ولكن كيف تفعل ذلك؟ هذا هو السؤال الذي سنستكشف إجابته اليوم. الأمر نسبينعم، هاتان الكلمان هي الإجابة القصيرة لذلك السؤال. لكن هكذا لن تكون المقالة مثيرة للاهتمام، أليس كذلك؟ أفضل طريقة لإضافة نص برمجي مٌخصَّص لووردبريس يعتمد على عدد من العوامل. ولهذا اخترت تقديم خياراتك بصيغة "إذا كان / فافعل". إذا استخدمت قالبًا صُمِّمَ من قِبل شخص آخرفيجب ألّا تضيف نصًا برمجيًا مٌخصَّصًا إلى ملفات ذلك القالب، يقول إريك بويلو (صاحب وكالة برمجية): هذا يبدو مضيعة هائلة للوقت، أليس كذلك؟ إذًا، إذا كان لا يمكنك تعديل الشيفرة مباشرة في ملفات قالب التصميم، فماذا تفعل؟ 1. أنشئ قالبًا فرعيًاوفقًا لبراندون هوارد (مالك لشركة تطوير قوالب ووردبريس)، إنشاء قالب فرعي يسمح لك بإضافة نص برمجي إلى ملف functions.php دون القلق من خسارة التعديلات حين تجري تحديثات نظام ووردبريس أو القالب. بالإضافة إلى ذلك، فإن القوالب الفرعية تساعدك على "استخدام الخطافات hooks الخاصة بووردبريس والقوالب لإضافة النص البرمجي الخاص بك". وبالتالي لن تواجه خطر إعادة الكتابة على تعديلاتك مجددًا. إذا لم تمتلك فكرة جيدة عما يكون القالب الفرعي، دعني أشرح لك. إنه بشكل أساسي عبارة عن قالب فرعي للقالب الرئيسي المُنَصّب. ويمكن إنشاؤه بسهولة. إذ كل ما تحتاج فعله هو الولوج إلى موقعك عن طريق FTP وإنشاء مجلد (قد يكون اسم themename-child مناسبًا) ثم أنشء ملف style.css في ذلك المجلد. هذا الملف سيسحب المعلومات من ملف CSS التابع للقالب الرئيسي. ثم ستحتاج لتفعيل القالب الفرعي في لوحة التحكم. لن أخوض في تفاصيل كيفية فعل ذلك، إذ كتبنا بالفعل مقالًا حول كيف تنشئ القالب الفرعي الخاص بك بشكل متعمق سابقًا، لذا يمكنك قراءته إذا قررت أن هذه هي الطريقة التي تريد إضافة النص البرمجي المُخَصَّص بها. بالطبع، هذا الخيار لا يصلح في جميع الحالات. 2. استخدم إضافةإذا لم تكن مرتاحًا في التّعامل مع الواجهة الخلفية (backend) لووردبريس لكن ما زلت تريد إدخال تعديلات برمجية مٌخصَّصة، يمكنك استخدام إضافة تساعدك على وضع النص البرمجي في أماكن مناسبة على موقعك. وفقًا لسكوت تشاو من مدونة The Blog Starter، استخدام إضافة "سيٌخفِّض بشكل كبير من احتمالية حذف شيء بالخطأ". ولا حاجة لذكر أن مشكلة "تحديث الموقع وخسارة جميع التعديلات" لن تحدث إطلاقًا هنا. يُرشّح تشاو إضافتين خصيصًا. الأولى هي Insert Headers and Footers. هذه الإضافة تساعدك على إدخال النص البرمجي في ترويسة أو ذيل موقعك. وهذا مناسب للأشخاص الذين يريدون إضافة شيء مثل Google Analytics. الإضافة الثانية التي يرشحها هي Global Content Blocks. هذه الإضافة تساعدك على إدخال الشيفرة ضمن المقالات وحفظها كمقتطفات نص برمجي للاستخدام لاحقًا. رشحت ناتاليا كريس، مطورة أخرى تحدثت معها، إضافة أخرى تدعى Code Insert Manager وهي ممتازة لإضافة نصوص برمجية لخدمات مثل Google Analytics, Aweber وGetResponse. لكن مجددًا، قد لا تجد إضافة تستطيع تحقيق تلك المهمة التي تريد فعلها. في هذه الحالة يمكنك.. 3. برمجة إضافةعندما تريد إعادة تصميم موقع ما مع المحافظة على نفس وظائفه السّابقة – أو ببساطة تريد إضافة نص برمجي إلى موقعك – يمكنك برمجة إضافة لتنفيذ ذلك. يقول أدم سميث، مدير قسم التقنية فيMarketing Mojo: موضحًا أن هذا ينطبق غالبًا في حالة استخدام قالب مُصَمَّم من قبل شخص آخر أكثر من إذا كنت من صمّمه من الصفر. عادة ما يصمم سميث الإضافة المٌخصَّصة بحيث تتضمن أنواع المقالات المٌخصَّصة، الاختصارات النصية، تعديلات على إدارة ووردبريس، وتعديلات أخرى يراها مطلوبة. وينتهج هوارد أسلوبًا مماثلًا، حيث يقول: إذا أنشأت قالبك الخاصتحدثنا حتى الآن عما نفعله إذا أردت إضافة نص برمجي مٌخصَّص إلى قالب حملته مجانًا أو بمقابل مادي من على متجر قوالب. ولكن ماذا لو كان القالب من صنعك؟ ما هي أفضل الممارسات لهذه الحالة؟ يذكر بويلو في حالة ما إذا كنت قد أنشأت قالبك من الصفر، "فيجب أن تدخل الشيفرة مباشرة في القالب"، هذا يشكل تأثيرًا إيجابيًا على تطوير سرعة الموقع وكفاءته. فقط التعديل على ملف functions.php التابع للقالب حين تحتاج لإجراء تغييرات سيكون كافيًا. إنشاء إضافة (نعم، مجددًا)نعم، تنطبق هذه الطريقة على كلا الحالتين سواء أكنت تستخدم قالب مُصَمَّمًا من قبل أشخاص آخرين أو صمّمته بنفسك. هناك بعض المزايا لإنشاء إضافة لتلحقها بقالبك الخاص. ليس فقط سهولة تفعيل وإيقاف وظائف معينة للموقع حين تقرر أنك لا تحتاجها، بل أيضًا تعطيك الفرصة للتوسع إلى تطوير الإضافات. يقول بويلو: حسنًا، ما هو أفضل حل؟من جديد، الأمر نسبي. اتفق كل المطورين الذين تحدثت معهم على ذلك. وهذا لا ينفي أن هناك بضع قواعد مجربة وصحيحة. حين تحتاج لإضافة نص برمجي مٌخصَّص إلى موقع ووردبريس، فيجب عليك أن: تستخدم قالبًا فرعيًا عند التعديل على خصائص قالب مُصَمَّم من قبل شخص آخر، أوتستخدم إضافة لإضافة سطور النص البرمجي إلى موقعك، أوتُبرمج إضافات للحصول على مجال أوسع من إضافة الخصائص.هذه الخطة ستساعدك على إنشاء مواقع مُخصَّصة تبقى كما تريد لها أن تكون، بغض النظر عن أي تحديث جديد. خاتمةإن قرأت كامل المقال بتمعّن فستدرك بشكل أفضل كيفية إضافة نصوص برمجية مُخصَّصة إلى موقع ووردبريس الخاص بك وما هي أفضل طريقة بناءً للقيام بذلك اعتمادًا على حالتك الخاصّة. هل سبق لك أن واجهت نفس الوضع؟ هل وجدتَ طريقة مختلفة وأكثر كفاءة؟ شاركنا بها ترجمة -وبتصرف- للمقال What's The Best Way To Add Custom Code To WordPress؟ لكاتبته Brenda Barron. حقوق الصور محفوظة لـ: +Tuts
  20. إذا كنت تستخدم ووردبريس لفترة، أو حتى إذا كُنت مستخدمًا جديدًا، فغالبًا ما ستحتاج في وقت ما أن تجري بعض التعديلات في النص البرمجي لموقعك. قد يكون أي شيء، مثل إضافة خاصية أساسية إلى موقعك لا تتطلب إضافة كاملة plugin، أوإنشاء قالب فرعي child theme، وهذا فقط غيض من فيض. لكن توقف ها هنا! هناك بعض القواعد الأساسية التي يجب معرفتها فيما يتعلق بتعديل النص البرمجي في ووردبريس، بالإضافة إلى بعض المناطق التي يجب تفاديها تمامًا. وهذا ما سنتناوله في مقالنا. قاعدة عامة: إياك أن تعدّل في البنية الأساسية لووردبريس (WordPress Core)ربما قد تكون سمعت تلك العبارة الخالدة مرارًا من متمرسي ووردبريس: “لا تعدّل في البنية الأساسية" “Don’t hack core". ما يعنيه هذا هو أنك يجب ألا تلمس الملفات الأساسية، وهي الملفات المسؤولة عن عمل ووردبريس. لم هذا؟ حسنًا، هناك العديد من الأسباب، لكن دعنا نكتف باثنين من أهمها هنا: عدم ضمان استمرارية موقعك مستقبلًا. إذا أجريت تعديلات في بنية ووردبريس، فإنك تخسر القدرة على التحديث مع المحافظة على تعديلاتك. أي ببساطة، عندما يصدر تحديث جديد وتضغط على زر التحديث لينطبق على موقعك (لأنك شخص منظم يحافظ على تحديث موقعه بانتظام)، فإن تعديلاتك سيتم الكتابة فوقها بالتحديث. مما يضطرك لإعادة كتابتها، وهذا مضيعة للوقت في رأيي.توجد بالفعل إضافة متاحة لهذا. عندما تعدل في بنية ووردبريس، فإنك تفعل بالضبط ما تفعله الإضافات: تغيير، أو إضافة إلى الطريقة التي يعمل بها ووردبريس. بالتالي الإضافات هي طريقة أفضل بكثير في تحقيق ما تريد فعله بدلًا من تعديل البنية الأساسية.إذًا الآن تعرف لم لا يجب تعديل البنية الأساسية، دعنا نر ما المتاح تعديله بأمان. بنية ملفات ووردبريسهذه لقطة توضح بنية ملفات موقع ووردبريس نموذجي. سترى أن هناك ثلاث مراحل عليا من المجلدات ومجموعة من الملفات. المجلدات المسماة wp-admin وwp-include محظورة، يجب ألا تلمس شيئًا هناك. أما مجلد wp-content فإنه يحوي القوالب، الإضافات، وأي صورة أو مستند نصي رفعتها على الموقع. ويمكنك أن تجري تعديلات على قالبك الخاص عن طريق ملف functions.php. وبالنسبة لملفات المستوى الأعلى، فالملف الوحيد المسموح بالتعديل فيه هو ملف wp-config.php. سنغوص في بعض الأمثلة لكيفية تعديل كلا الملفين لاحقًا، لكن دعنا نتحدث عن بعض من أفضل الممارسات قبل أن نفعل. أفضل الممارسات لتعديل ملفات ووردبرسيأتي ووردبريس مع محرر قوالب وإضافات كجزء من الخواص الأساسية. يمكنك أن تجده في موقعك من الشريط الجانبي: المظهر > المحرر أو Appearance > Editor ألقِ نظرة عليه إذا أحببت، ثم بعدها انس أمره تمامًا، لأنك لن تستخدم محرر ووردبرس لأي شيء. في الحقيقة، أود أن تحذف هذه الخاصية تمامًا من ووردبرس لسببين: هذا المحرر ليس محررًا نصّيّا برمجيًا كامل الوظائف، ويمكن بسهولة ارتكاب أخطاء تنتج عنها "شاشة الموت البيضاء".حين تضغط على زر الحفظ، ليس هناك زر للرجوع. ليس هناك إمكانية لإعادة المحاولة. معظم محررات النصوص البرمجية الجيدة تُتيح لك إمكانية التّراجع عن التغييرات التي أجريتها في حال لم تعمل كما يجب.إذًا، ما هو البديل؟ حسنًا، إذا أردت استخدام محرر نص برمجي، فستحتاج دراية بـ FTP . FTP هو اختصار لـ File Transfer Protocol بروتوكول نقل الملفات. ولنشرح ذلك بأنه عبارة عن نقل الملفات من جهازك إلى خادم الويب الذي يوجد عليه موقعك. ستحتاج للاتصال بموقعك عن طريق عميل FTP، ثم تحمّل نسخة من الملف الذي تريد تغييره، أجرِ التغييرات ثم ارفعه إلى الخادم، وسيحل محل النسخة القديمة في الخادم. بعض محررات النصوص البرمجية – Coda على سبيل المثال– يسمح لك بتعديل الملفات مباشرة على الخادوم. والبعض الآخر يسمح باستعراض تعديلاتك (عادة لملفات HTML وCSS فقط). إذا كان محرر النص البرمجي الخاص بك يفعل هذا، فمن المستحسن أن تحفظ نسخة من الملف الأصلي باسم جديد (وليكن filename_old.php مثلًا). بهذه الطريقة، إذا ارتكبت أي خطأً لا تستطيع الرجوع فيه، فيمكنك ببساطة حذف الملف المعدّل، وإعادة تسمية النسخة الاحتياطية التي أنشأتها إلى اسمها الأصلي وكل شيء سيكون على ما يرام. حان الوقت لتعديل بعض ملفات ووردبريسسنجري بعض التعديلات البسيطة على ملفين wp-config.php وfunctions.php وهي ملفات غير تابعة للقالب، غالبًا ما ستحتاج إلى تعديلها. تعديل ملف wp-config.phpملف wp-config.php هو واحد من أهم الملفات في موقع ووردبريس الخاص بك. ولا يأتي مع النسخة الأساسية لووردبريس؛ إذ أنك تنصب ملفًا يُدعى wp-config-sample.php. ويُنشأ ملف wp-config.php أثناء عملية التنصيب (تحديدًا عند إدخال معلومات قاعدة البيانات الخاصة بموقعك)، أو يمكنك ببساطة إعادة تسمية ملف wp-config-sample إلى wp-config وإضافة معلومات قاعدة البيانات إلى الملف. ستجد كلّا الملفين في الجذر الأساسي لمسار الويب. إذا أتممت عملية التنصيب (لقطة لها بالأسفل)، بما في ذلك إعدادات قاعدة البيانات الخاصة بالموقع، فإنك بالفعل قد أنشأت ملف wp-config.php. الآن، دعنا نفتحه في محرر النص البرمجي المفضل لديك لنجري بعض التغييرات. مثال نص برمجي مفيد: تعطيل التحديثات التلقائيةكانت التحديثات التلقائية جزءًا من ووردبريس منذ الإصدارة رقم 3.7. ولا يفضل الجميع هذه الخاصية، إذ يودون لو أنهم يغلقونها. كل ما تحتاجه لفعل هذا هو إضافة ذلك السطر إلى ملف wp-config.php الخاص بموقعك. /* تعطيل تحديثات ووردبرس الة */ define( 'WP_AUTO_UPDATE_CORE', false );عندما أضيف نصًا برمجيًا إلى ملف wp-config، فإنني أتأكد دومًا من وضعه في مكان يسهل الرجوع إليه عند الحاجة. انظر إلى السطر 85 في ملف wp-config.php (من السهل الوصول إليه باستخدام محرر النص البرمجي)، ستجد هذه الجملة: /* That's all, stop editing! Happy blogging. */بمعنى: /* هذا هو المطلوب! توقف عن التعديل. نتمنى لك التوفيق في موقعك! */إنني أضع جميع تعديلاتي قبل ذلك السطر مباشرة. وبهذا أستطيع العثور على جميع التعديلات التي أجريتها في مكان ثابت مع كل موقع أعمل عليه. فقط تأكد من حفظ نسخة احتياطية من الملف قبل أية تعديلات. تعديل ملف functions.phpملف functions.php يسمح لك بتعديل وظائف ووردبريس. إذ يعمل هذا الملف كإضافة، فينشء خصائص ومزايا جديدة في موقع ووردبريس الخاص بك. وعادة ما تجد الملف موجودًا في مجلد القالب الخاص بك في المسار /wp-content/themes/yourthemename/ (حيث yourthemename هو اسم القالب). إذا لم تمتلك واحدًا، يمكنك بسهولة إنشاءه؛ فقط تأكد من أنك تضعه في القالب المٌفعّل. إذا بدأت بملف جديد، فستحتاج لبداية نص PHP مستخدمًا php?>. وعلى عكس ملف php التقليدي، فإنك لن تحتاج لإغلاق النص البرمجي (في الواقع، تقل احتمالية الأخطاء إذا تركته مفتوحًا). وستجد بالأسفل مثالين للخصائص التي يمكنك إضافتها إلى ملف functions.php خاصتك ملحقة بالنص البرمجي، لا تنس أنه من المستحب إضافة التعديلات الكبيرة عن طريق قالب فرعي. مثال نص برمجي مفيد: إضافة دعم المُصغّرات thumbnailsإذا كان قالبك لا يدعم المُصغّرات، فيمكنك إضافة النص البرمجي التالي إلى ملف functions.php الخاص بك: add_theme_support( 'post-thumbnails');لاستخدامه في قالبك، فقط أضف هذا السطر من الكود إلى الحلقة loop حيث تريد للمُصغرات أن تظهر: <?php the_post_thumbnail(); ?>مثال نص برمجي مفيد: تخصيص طول الاقتباساتالطول الافتراضي للاقتباسات في ووردبريس هو 55 كلمة، ولكن يمكنك تعيين طول الاقتباس حسبما تريد عن طريق إضافة ذلك النص البرمجي إلى ملف functions.php الخاص بك: //وظيفة تخصيص طول المقتبس custom_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'custom_excerpt_length');فقط كل ما تحتاجه تغيير رقم "20” إلى عدد الكلمات التي تريدها. الخاتمةوالآن قد أصبحت تعرف القواعد الأساسية بخصوص تعديل ملفات البنية الأساسية لووردبريس. أتمنى أن تكون قد استمتعت بالمقال. وبالطبع نود معرفة آرائكم ونسر بالإجابة على ما يلتبس عليكم في التعليقات. مُترجم بتصرف من مقالة How to Edit Your WordPress Website Without Hacking Core Files لصاحبها Tom Ewer.