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

لن تتمكن من إنجاز أي شيء في موقعك ما لم تتمكن من تسجيل الدخول والوصول للوحة التحكم، ولا توجد سوى طريقة واحدة للدخول، وهي صفحة تسجيل الدخول، وفي حال لم تستطع الوصول لها لأي سبب كان فهذا يعني أنك لا تستطيع التحكم بالموقع. يُعَدّ الوصول لصفحة تسجيل الدخول سهلًا جدًا ولهذا سنشرح في هذا المقال كيفية الوصول لهذه الصفحة واستخدامها، وماذا عليك أن تفعل إذا كنت لا تستطيع تحديد موقعها. كيف تجد صفحة تسجيل الدخول في ووردبريس يجب أن تكون عملية الدخول لموقعك الإلكتروني بسيطة، حيث يستخدم ووردبريس الرابط الافتراضي yourwebsite.com/wp-login.php للوصول لصفحة تسجيل الدخول، حيث سوف يظهر لك نموذج تسجيل الدخول الظاهر في الصورة التالية عند الدخول للرابط السابق. يجب عليك الآن إدخال اسم المستخدم أو البريد الإلكتروني في الحقل الأول وكلمة المرور في الحقل الثاني والضغط على "دخول"، يوجد طرق أخرى للوصول لصفحة تسجيل الدخول غير التوجه لصفحة wp-login.php، فمثلًا إذا كنت تحاول الوصول للوحة التحكم مباشرةً وأنت غير مسجل، فسوف يُعيد ووردبريس توجيهك إلى صفحة تسجيل الدخول بدلًا من لوحة التحكم، وتستطيع الوصول للوحة التحكم باستخدام الرابط yourwebsite.com/wp-admin. وبطبيعة الحال يُمكن تغيير الرابط الافتراضي لتسجيل الدخول في ووردبريس من قِبل شركة الاستضافة لدواع أمنية، وهذا أمر تستطيع تحقيقه باستخدام الإضافات، نوصي بتغيير الرابط الافتراضي لتسجيل الدخول ليَصعب على المهاجمين الدخول للموقع. الجانب السلبي الوحيد لتغيير الرابط الافتراضي لتسجيل الدخول هو احتمال نسيانك العنوان الجديد وهذا أمر يسهل تجاوزه من خلال حفظ الرابط ضمن المتصفح. تُوفر بعض الاستضافات إمكانية الوصول للوحة تحكم ووردبريس من لوحة تحكم الاستضافة مباشرةً وبنقرةً واحدةً فقط، وهذه ميزة شائعة في استضافات ووردبريس المُدارة، لكن ليس من الضروري توفرها في استضافتك، ولهذا عليك التحقق من وجودها. إضافة روابط لصفحة تسجيل دخول ووردبريس تتضمن العديد من مواقع ووردبريس روابطًا لصفحة تسجيل الدخول سهلة الوصول التي يُمكن لزوار الموقع استخدامها، إذ من المُمكن إضافتها في تذييل الموقع Footer أو باستخدام ودجت. تُسهل هذه العملية تحديد موقع صفحة الدخول لموقعك، لكننا لا ننصح باستخدامها لأنها قد تسبب خرقًا أمنيًا، إذ تُعد مواقع ووردبريس أهدافًا شائعةً للهجمات الإلكترونية بسبب شعبية هذه المنصة، ولذلك يسعى الكثير من المهاجمين والبوتات bots للدخول بالقوة لهذه المواقع. وبغض النظر عن شعبية وحجم الموقع، فنشر صفحة تسجيل الدخول للعوام يجعل من موقعك هدفًا أسهل للمخترقين. إذا كان لا بد من جعل صفحة تسجيل الدخول عامةً، فيجب عليك عندها تفعيل المصادقة الثنائية 2FA على الأقل لرفع أمان الموقع، وتستطيع عرض رابط صفحة تسجيل الدخول ضمن موقعك عند الانتهاء من هذه الخطوة بثلاث طرق، هي الآتية: إضافة رابط تسجيل الدخول للقائمة الرئيسية للموقع. استخدام ودجت ضمن الشريط الجانبي. إضافة الرابط ضمن تذييل الموقع Footer. ننصح باستخدام التذييل لتضمين رابط تسجيل الدخول لووردبريس في موقعك، فمن السهل تجاهله إلا إذا كنت على علم مُسبق بوجود الرابط في ذلك المكان، وهذا يجعل الرابط أكثر آمانًا. لاستخدام الطريقة الثالثة التي نوصي بها، توجه إلى "مظهر" في لوحة التحكم ثم تبويب "ودجات" واسحب ودجت "منوعات" إلى قسم التذييل وأعطها عنوانًا مناسبًا. سوف تجد الآن قسمًا جديدًا ضمن التذييل كما هو ظاهر في الصورة. سوف تعرض هذه القائمة خيارًا لتسجيل الخروج للمُستخدمين الذين سجلوا دخولهم للموقع، وهكذا لديك دائمًا رابط جاهز يسمح لك بالوصول لصفحة تسجيل الدخول، إلا في حال حدث خطأ برمجي في الموقع منعك من استخدامه. 4 مشاكل شائعة تمنع المستخدم من الوصول لصفحة تسجيل الدخول سيسهل عليك الآن الوصول لصفحة تسجيل الدخول، ولكن هناك بعض المشاكل التي يُمكن ظهورها لتمنعك من دخول لوحة التحكم، لهذا ألقِ نظرة على أكثر 4 مشاكل شائعة وكيفية حلها. كلمة مرور خاطئة أو مفقودة يُمكن لأي شخص أن ينسى كلمة المرور الخاصة بحسابه، ولذلك فمن المُفيد استخدام برامج لإدارة كلمات المرور الخاصة بك؛ أما إذا كنت ممن يُفضل حفظ كلمات المرور، فعليك قراءة ما يلي. يتضمن ووردبريس ميزةً بسيطةً تسمح بتهيئة كلمة المرور وذلك من خلال صفحة تسجيل الدخول، فكل ما عليك فعله هو الضغط على "هل فقدت كلمة مرورك؟" ليطلب منك ووردبريس عنوان البريد الإلكتروني الذي سوف يُرسل له رابط تهيئة كلمة المرور. يجب حل مُشكتلك من خلال الخطوة السابقة إلا إذا نسيت بريدك الإلكتروني أيضًا، أو إذا كنت لا تستطيع الدخول له، ففي هذه الحالات سوف تحتاج طُرقًا متقدمةً مثل تغيير كلمة المرور من خلال قاعدة بيانات ووردبريس. ملفات تعريف الارتباط الكوكيز معطلة يتطلب ووردبريس تفعيل ملفات تعريف الارتباط في المتصفح لتعمل آلية تسجيل الدخول الخاصة به، لذلك فإذا عُطلت ملفات تعريف الارتباط في متصفحك لأي سبب كان، فيجب عليك تفعيلها لتتمكن من تسجيل الدخول في مواقع ووردبريس. تستطيع إعادة تفعيل هذه الملفات بوقت قصير وذلك يعتمد على المتصفح الذي تستخدمه، فمثلًا عند استخدام متصفح كروم عليك التوجه إلى الإعدادات، ثم "ملفات تعريف الارتباط وبيانات الموقع الإلكتروني الأخرى" واختر الخيار الأول للسماح لجميع ملفات تعريف الارتباط. إذا كنت تستخدم متصفحًا مُختلفًا، فإليك الإرشادات الخاصة بالمتصفحات: إعدادات ملفات تعريف الارتباط في متصفح فايرفوكس. إعدادات ملفات تعريف الارتباط في متصفح مايكروسوفت إيدج. إعدادات ملفات تعريف الارتباط في متصفح سفاري. حاول تسجيل الدخول مرةً أخرى للموقع بعد تفعيل ملفات تعريف الارتباط، إذ يجب اختفاء الخطأ السابق ونجاح عملية الدخول للموقع. محاولات تسجيل متكررة تُعطل الكثير من إضافات ووردبريس عملية تسجيل الدخول عند اكتشافها لمحاولات تسجيل فاشلة عديدة، وعند حصول هذا فلن يتمكن المستخدم الذي فشل في عملية تسجيل الدخول من إتمام هذه العملية إلا بعد إنقضاء مدة زمنية مُحددة من قِبل الإضافة المسؤولة. تَسمح عملية تحديد عدد المرات المسموح فيها لمحاولة تسجيل الدخول؛ بعرقلة المهاجمين الذين يحاولون استخدام الهجوم الغاشم Brute Force Attack للدخول لموقعك، وتستطيع تعطيل هذه الميزة بالنسبة لعنوان IP مُحدد في حال كنت تستخدم إضافةً مثل Limit Login Attempts Reloaded، أو عليك الانتظار حتى انقضاء فترة منعك من عملية تسجيل الدخول والمحاولة بعدها. فشل تحميل صفحة تسجيل الدخول تَمنع بعض أخطاء ووردبريس صفحة تسجيل الدخول من التحميل، فقد تظهر لك نافذة تسجيل الدخول بيضاء مثلًا عند محاولة تسجيل الدخول، كما قد يظهر لك رمز خطأ HTTP. تختلف طريقة حل كل مشكلة حسب الخطأ الذي يظهر لك، فإذا حصلت على خطأ Error 404، فهذا يعني أن صفحة تسجيل الدخول غير موجودة، ومن المُحتمل استخدامك لرابط خاطئ للوصول لها، أو قد يكون مالك الموقع يستخدم رابطًا مُخصصًا مختلفًا للدخول للموقع، وفي هذه الحالة تستطيع معرفة الرابط المُخصص إذا كان لديك وصول إلى لوحة تحكم الاستضافة أو عليك التواصل مع مالك الموقع مُباشرةً. الخلاصة العثور على صفحة تسجيل الدخول في موقع ووردبريس هو أمر بسيط، ولكن في حال كنت تستخدم رابطًا مخصصًا لها، عندها ننصحك بحفظ هذا الرابط ضمن المتصفح أو في مكان آخر لتجنب مشكلة النسيان، وتذكر المشاكل التي تُواجهك عند تسجيل الدخول في موقعك ربما تكون لأحد الأسباب التالية: كلمة مرور خاطئة أو مفقودة. ملفات تعريف الارتباط مُعطلة. محاولات عديدة فاشلة لتسجيل الدخول. فشل في تحميل صفحة تسجيل الدخول. هل ترغب في امتلاك موقع ووردبريس سريع وآمن؟ احصل على موقع ووردبريس احترافي بالاستعانة بأفضل خدمات الووردبريس على خمسات أنشئ موقع ووردبريس الآن ترجمة -وبتصرّف- للمقال How to Find Your WordPress Login Page and Sign In لصاحبه Will Morris. اقرأ أيضًا كيفية إضافة تسجيل الدخول باستخدام جيميل Gmail لموقع ووردبريس التعرف على لوحة التحكم بشاشة الصفحات في ووردبريس كيفية ضبط صفحة عام في إعدادات ووردبريس كيفية ضبط إعدادات صفحة الكتابة في ووردبريس

ينشر المحتوى على الموقع في ووردبريس كـمقالٍ (post) أو كصفحة (Page)، يستخدم المقال عند إنشاء مدوّنة اعتيادية، وتظهر المقالات على الصفحة الرئيسيّة للمدوّنة مرتّبة بترتيب زمنيٍّ عكسيّ. تُستخدم الصّفحات في المقابل للمحتوى غير الزّمنيّ، كصفحة "حول" (About) أو "اتصل بنا" (Contact) والتي تعدّ أمثلة شائعة عن الصّفحات، تبقى الصّفحات خارج التّسلسل الزّمنيّ المعتاد للمدوّنة، وتُستخدم غالبًا لتقديم معلوماتٍ ثابتةٍ -غير قابلة للتغيير- متعلّقةٍ بالمستخدم أو الموقع، كما يمكن استخدامها لتنظيم وإدارة بنية محتوى الموقع على الويب . من الأمثلة الشائعة الأخرى لاستخدام الصفحات حقوق النشر أو المعلومات القانونية أو الصلاحيات والأذونات أو معلومات عن الشركة أو بيان إمكانيّة الوصول (Accessibility Statement). تتشابه الصفحات هنا إلى حدٍّ كبيرٍ مع المقالات، فكلاهما يحوي عناوين ومحتوىً. تمنح ملفّات قوالب السّمات (Theme Template Files) في ووردبريس مظهرًا متناسقًا لكلّ أنحاء الموقع، لكن هناك فوارق رئيسيّة بين الصّفحات والمقالات. ماهي الصفحات تخصّص الصّفحات تحديدًا للمحتوى الذي لا يعتمد على الوقت، والذي ليس "محتوى مدوّنة Blog Content" تقسم الصّفحات إلى صفحات أساسيّة و أخرى فرعيّة. تستخدم الصّفحات قوالب templates مختلفةً تتضمّن ملفّات القوالب template files ووسوم القوالب template tags وترميز PHP. توفّر السّمات (Themes) الأكثر تعقيدًا نطاقًا واسعًا من التّعديلات أو خيارات العرض للصّفحات الفرديّة. يمكن إنشاء موقعٍ إلكترونيٍّ يحتوي على صفحاتٍ باستخدام ووردبريس فقط. ما لا تشمله الصفحات تختلف الصفحات عن المقالات لذلك لا تظهر في طرق العرض ذات الطّابع الزمنيّ داخل قسم المدوّنة في الموقع. لا تسمح الصّفحات بالتصنيف (التصنيفات(Categories) و الوسوم وكذلك أيّ تصنيفاتٍ مخصّصةٍ) بشكلٍ افتراضيٍّ, لكن يمكن تحسينها عبر الإضافات (Plugins). يأتي الهيكل التنظيمي للصّفحات من ترابط هرميّ لا من نظام تصنيفٍ (كالوسوم tags أو الفئاتCategories). الصفحات ليست ملفات، وإنما تُخَزّن في قاعدة البيانات مثل المقالات تمامًا. على الرغم من إمكانيّة وضع وسوم القوالب (Template Tag) وترميز PHP في ملف قالب الصّفحة إلّا أنّه لا يمكن وضعها داخل الصّفحة أو محتوى المقال دون استخدام إضافات ووردبريس (Plugin). تحذير: يمكن أن يؤدّي دمج ترميز PHP مباشرة في الصّفحة أو محتوى المقال إلى مشكلةٍ أمنيّةٍ أو خطأٍ غير متوقّع في الموقع . لا يتم تضمين الصفحات في "خلاصة الموقع" (site’s feed) . (على سبيل المثال RSS أو atom) يفسّر زوّار الموقع ومحركات البحث الصّفحات والمقالات بشكلٍ مختلفٍ، تمنح محركات البحث عادةً أهميّةً أكبر للمحتوى المعتمد على الوقت -كالمقالات- لأن المقال الأحدث في الموضوع يكون ملائمًا أكثر من الصّفحة الثّابتة. يمكن تعيين صفحة محدّدة (أو مقال معيّن) كصفحةٍ أماميّةٍ ثابتةٍ. عادة يكون لمواقع الويب التي تم إعدادها بهذه الطريقة صفحة ثانويّة محدّدة تعرض أحدث مقالات المدوّنة. إنشاء الصفحات لإنشاء صفحة جديدة يجب تسجيل الدّخول إلى نسخة ووردبريس الموجودة بصلاحيّات إداريّة كافية. للبدء بإنشاء صفحات جديدة نستخدم (الصّفحات pages > إضافة جديد add new). تنظيم الصفحات تنظّم الصّفحات باستخدام تصنيفاتٍ فرعيّةٍ ضمن التّصنيفات الأساسيّة، يمكن أيضًا الحصول على صفحاتٍ فرعيّة داخل الصّفحات، مما ينشئ تسلسلًا هرميًّا لها. على سبيل المثال قد يحوي موقع وكيل سفرٍ -منشأٍ على ووردبريس- صفحةً فرديّةً لكلّ قارّةٍ وبلدٍ يقوم بإجراء ترتيبات السفر إليه، يمكن إنشاء صفحةٍ بعنوان "إفريقيا" وصفحات فرعية لكل من الجزائر وليبيا والسودان ومصر، كما يمكن إنشاء صفحةٍ رئيسيّة أخرى بعنوان "آسيا" تعرض صفحات فرعيّة للعراق والأردن وسوريا. ستظهر بنية الصفحات على الموقع بالشكل التالي: أفريقيا الجزائر ليبيا السودان مصر آسيا العراق الأردن سوريا اتبع الخطوات التالية لإنشاء صفحةٍ فرعيّةٍ: ننتقل إلى شاشة لوحة التّحكم administration > الصفحات Pages> إضافة جديد Add New. ننقر على القائمة المنسدلة "الصفحة الأصل Page Parent" في القائمة اليمنى، والتي تحوي قائمةً بجميع الصّفحات التي تمّ إنشاؤها في الموقع. نحدد الصّفحة الأصليّة التي ستكون الصّفحة الحاليّة صفحةً فرعيّةً (Child Page) منها. نضيف محتوىً إلى الصًفحة الفرعيًة. ننقر على زرّ النّشر Publish عند الانتهاء. ستدرج الصّفحة الفرع داخل الصّفحة الأصل عندما يتم تسجيلها. كما ستعكس الرّوابط الدّائمة (Permalinks) للصّفحات هذا التّسلسل الهرميّ. يكون الرّابط الدائم لصفحة الكاميرون في المثال السابق: http://example.com/africa/cameroon تغيير عنوان مسار الصفحة Page URL لتغيير جزء العنوان URL (الاسم المستعار) الذي يحوي اسم الصّفحة نستخدم زر "تحرير edit" تحت عنوان الصفحة على شاشة تحرير صفحة معيّنة، كما يمكن الوصول إليه من علامة التّبويب (الصّفحات Pages) في شاشة لوحة تحكم ووردبريس. إنشاء قائمة صفحات يستطيع ووردبريس إنشاء قائمة بالصّفحات على الموقع تلقائيٍّا داخل الشّريط الجانبي (sidebar) أو تذييل الصفحة (Footer)، مثلٍا يمكن استخدام وسم قالب template tag يسمى wp_list_pages()‎. يمكن مراجعة صفحة wp_list_pages للحصول على معلومات حول تعديل طريقة عرض قائِمة الصّفحات على الموقع في ووردبريس. هناك أيضًا إضافات ووردبريس والتي تساعد على عرض قائمة بالصّفحات داخل المقالات وفي مناطق أخرى من القوالب. قوالب الصفحات Pages Templates يمكن تعيين الصّفحات الفرديّة لاستخدام قالب صفحةٍ مخصّصٍ (كملف قالب PHP على سبيل المثال my-custom-page.php) يُنشأ داخل القوالب -يمكن مراجعة قوالب الصّفحات المخصّصة للحصول على مزيد من المعلومات حول كيفيّة إنشاء ملف قالب مخصّص لصفحة- ثم سيقوم قالب الصّفحة الجديد هذا بتجاوز قالب الصّفحة الافتراضي page.php المضمّن مع القوالب. الطبيعة الآلية لصفحات ووردبريس يمكن أن تكون صفحة الويب ثابتةً أو آليّة. تشبه الصّفحاتُ الثابتة صفحةَ HTML عاديّة تُنشأ باستخدام Dreamweaver، والتي يتم إنشاؤها مرّةً واحدةً ولا حاجة لإعادة توليدها في كل مرة تُزَار فيها الصّفحة. أمّا الصفحات الآليّة فيتم إنشاؤها باستخدام ووردبريس ويجب إعادة توليدها في كل مرّة تعرض فيها. يحدّد المؤلّف التّرميز الخاصّ بما يجب توليده في الصّفحة -وليس الصّفحة الفعليّة نفسها- تستخدم هذه الصّفحات ترميز PHP واسع النّطاق يقيّم في كل مرة تُزَار فيها الصّفحة، وبالتّالي يتمّ إنشاء المحتوى عند كلّ زيارةٍ جديدةٍ. في ووردبريس يُنشأ كلّ شيء آليٍّا بما في ذلك الصفحات، ويخزّن كل شيء يتم نشره في ووردبريس (المقالات والصفحات والتعليقات والمدونات Blogrolls والتصنيفات Categories الخ…) في قاعدة بيانات (MYSQL)، تستخدم معلومات هذه القاعدة لإنشاء صفحة الويب المطلوبة عندما يتم الوصول إلى الموقع بواسطة قوالب ووردبريس من خلال السّمة (Theme) الحاليّة. تعد صفحة HTML (بدون أي ترميز PHP) مثالًا على صفحةٍ ثابتةٍ، تكمن المشكلة في الصّفحات الثابتة في صعوبة الحفاظ عليها، لا تترجم التّغييرات المطبّقة على إعدادات ووردبريس والسمات themes والقوالب templates في الصّفحات المكتوبة بلغة HTML فقط، تم تطوير ميزات الصفحة في ووردبريس للتّخفيف من هذه المشكلة. عند استخدام الصّفحات لا حاجة لتحديث الصّفحات الثّابتة عند كلّ تغيير لنمط الموقع، إذ ستحدّث الصفحات الآليّة -إذا تمت كتابتها بشكلٍ صحيحٍ- بالتّزامن مع بقية المدوّنة. يعتبر العديد من الأشخاص الصّفحات ثابتةً على الرغم من طبيعتها الآليّة، فعليّاً يطلق عليهم صفحات "الحدث الشبه ساكن pseudo-static"، بعبارة أخرى تحوي الصّفحة معلومات ثابتة لكنّها تُنشأ آليًّا، وبالتالي يمكن وصف طبيعة الصّفحات في ووربريس بأنّها ثابتة (Static) أو آليّة (Dynamic) أو حدث شبه ساكن(Pseudo-Static). الصفحة الأمامية الثابتة يظهر ووردبريس قائمةً بالمقالات على الصّفحة الرّئيسيّة للموقع بشكلٍ افتراضيٍّ، ويتمّ تحديث هذه القائمة تلقائيًا عند نشر مقالاتٍ جديدة، وهذه القائمة ليست ثابتةً، ولا داعي لإنشاء صفحةٍ ليقوم ووردبريس بعرض القائمة فيها. الصّفحة الأماميّة الثّابتة هي صفحةٌ مخصّصةٌ تُستخدم كصفحةٍ رئيسيّةٍ للموقع. تذكير: لإنشاء صفحة (Page) نقوم بالذهاب إلى (الصفحات Pages > إضافة جديد Add New) الصّفحة الأماميّة Front Page: نقوم بإنشاء الصّفحة التي نريد استخدامها كصفحة أماميّةٍ ثابتةٍ (إن لم تكن منشأة مسبقًا). صفحة المقالات Posts Page: نُنشئ صفحة فارغة (إن لم تكن منشأة مسبقًا)، ونعطِيها عنوانًا سيتمّ استخدامه أعلى قائمة المقالات، هذه الخطوة إلزاميّة وكأننا نقوم بتعديل الإعدادات الافتراضيّة لووردبريس، لن يظهر على الصّفحة المحدّدة أي محتوىً سوى العنوان. الإعدادات: ننتقل إلى (الإعدادات Settings> القراءة Reading > "عرض الصفحة الأماميّة Front page displays"). إعدادات الصّفحة الثّابتة Static Page Settings: نختار صفحة ثابتة بدلاً من صفحة أحدث المقالات الموضوعة تلقائيًّا.. إعدادات الصّفحة الأماميّة: نختار الصّفحة التي نريدها كصفحةٍ أماميّةٍ ثابتةٍ من قائمة "الصّفحة الأماميّة Front page". إعدادات صفحة المقالات: نختار الصفحة الفارغة empty page التي أُنشأناها في قائمة "صفحة المقالات Posts page"، لا يجب اختيار صفحةٍ تحوي محتوىً لأنّها لن تظهر. حفظ الإعدادات: بالنقر على زر "حفظ التّغييرات Save Changes" عندما نتّصل بالصّفحة الرّئيسيّة للموقع سنشاهد الصّفحة التي حدّدناها الآن. هذا المقال ترجمة -وبتصرّف- للمقال Pages والمقال Creating a Static Front Page من موقع wordpress.org

تحدثنا في الدرس السابق مُقدّمة إلى تطوير قوالب ووردبريس حول إنشاء قالب ووردبريس بسيط، واليوم سنقوم بإكمال العمل عليه لعرض أرقام الصفحات أو عرض رابطيّ السابق والتالي للتنقل بين الصفحات والوصول إلى جميع المقالات ضمن المدوّنة. عند وجود عدد كبير من المقالات في المدوّنة، فلن يتم عرضها جميعاً في صفحة واحدة، بل يتم تقسيمها على عدد من الصفحات، بشكل افتراضي يتم عرض 10 مقالات في الصفحة الرئيسية أو الأرشيف (تصنيف أو وسم)، ويمكن تغيير رقم المقالات في الصفحة الواحدة من لوحة التحكم. فهرس السلسلة: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس التصفيح (Pagination) في قوالب ووردبريس (هذا الدرس) إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس Pagination تقدّم ووردبريس دالّة مخصّصة لعرض أرقام الصفحات هي ()paginate_links. سنقوم بالاطلاع على كيفية استخدامها وخياراتها، وننوه بوجود طرق أخرى لعرض أرقام الصفحات، مثل إضافة WP-PageNavi. يتم استخدام الدالّة بهذه الطريقة: <?php echo paginate_links($args);?> حيث متحول args$ هو مصفوفة تحوي إعدادات مخصصة لهذه الدالّة، يمكن أن نستخدم الإضافة دون تمرير هذا المتحول، أو يمكن أن تكون قيمة هذه المتحول هي بعض من الإعدادات الخاصة بالدالّة وليس جميعها. الإعدادات الكاملة هي كالتالي بقيمها الافتراضية: <?php $args = array( 'base' => '%_%', 'format' => '?page=%#%', 'total' => 1, 'current' => 0, 'show_all' => False, 'end_size' => 1, 'mid_size' => 2, 'prev_next' => True, 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'type' => 'plain', 'add_args' => False, 'add_fragment' => '', 'before_page_number' => '', 'after_page_number' => '' ); ?> يمكننا أن نضع بعض هذه الإعدادات في المتحول، وتقوم ووردبريس بمعالجة الإعدادات التي نقدّمها للدالّة، بحيث تضيف للإعدادات المُدخلة ما يكملها من الإعدادات الافتراضية. سنقوم الآن باستخدام هذه الدالّة ورؤية كيف تظهر الروابط دون وجود إعدادات للدالّة، نضع ما يلي في نهاية ملف index.php فيصبح: <div class="row"> <div class="medium-12 columns"> <?php echo paginate_links(); ?> </div> </div> </div> <?php get_sidebar(); ?> عندما نقوم بزيارة الصفحة الرئيسية للمدونة، نجد أن روابط أرقام الصفحات تظهر بشكل مشابه لهذه الصورة: سنرى في الفقرة التالية كيف يمكن تخصيص ظهور هذه الروابط. إضافة Style جديد سنحتاج إلى إضافة Style جديد إلى القالب الذي نقوم باستخدامه، وذلك لكي تظهر أرقام الصفحات بشكل يتناسب مع باقي القالب. قد يتبادر للذهن في البداية أن يتم استخدام النسخ واللصق لإضافة Style جديد إلى ملف css الرئيسي. رغم أن هذا ممكن ويؤدي الغرض المطلوب، إلا أن الطريقة الأفضل هي استخدام دالّة تدعى wp_enqueue_style. 1. إضافة دالّة ()wp_head إلى ملف header.php قبل إغلاق وسم </head> نقوم بإضافة السطر التالي: <?php wp_head();?> وهي دالّة مهمة جداً في أي قالب ووردبريس، حيث تقوم ووردبريس (والعديد من الإضافات) باستخدام هذه الدالّة سواءً لإضافة ملفات الشكل (CSS) أواستدعاء ملفات جافاسكريبت أو حتى إضافة وسوم إضافية تتعلق بـ SEO. قمنا بإضافة دالّة wp_head ﻷننا نريد استخدام دالّة ()wp_enqueue_style التي ستقوم بإدراج وسم HTML لاستيراد ملف CSS جديد. 2. إضافة ملف CSS الجديد نقوم بإنشاء ملف جديد هو custom.css، وهو الذي سنقوم باستدعاءه من خلال دالّة ()wp_enqueue_style. نقوم بنسخ ولصق محتوى هذا الرابط ونضعه ضمن ملف custom.css الذي أنشأناه، وهو ما سيقوم بإضافة الشكل المناسب ﻷرقام الصفحات في القالب. 3. استخدام دالّة ()wp_enqueue_style لنقم بفتح ملف functions.php من ملفات القالب، ولنضف عليه ما يلي: // Enqueue custom style add_action('wp_enqueue_scripts', function() { wp_enqueue_style('custom-pagination', get_template_directory_uri() . '/custom.css'); }); ما قمنا بفعله هو أننا أخبرنا ووردبريس أن تنفذ دالّة ()wp_queue_style عند وصول دورة تنفيذ ووردبريس إلى الحدث (action) المُسمّى wp_enqueue_scripts وهو المسؤول عن ترتيب وتنسيق وطباعة ملفات جافاسكريبت و CSS وتحليل متطلبات كل ملف -إن وجدت له متطلبات-، وفي النهاية يتم استخدام الملف/الملفات المطلوبة بعد أن يتم طلب جميع متطلباتها. الآن إن قمنا بفتح المصدر الخاص بالصفحة الرئيسية من المتصفح، نجد أن المصدر أصبح يحوي شيئاً مشابهاً لما يلي: <link rel='stylesheet' id='custom-pagination-css' href='http://localhost:8000/wp-content/themes/my_theme/custom.css?ver=4.1' type='text/css' media='all' /> وهو استدعاء ملف CSS خاص، الذي أردنا وجوده قبل البدء بعرض إرقام الصفحات. لننظر الآن كيف تبدو أرقام الصفحات: أجمل بكثير من سابقتها أليس كذلك؟ شرح إعدادات دالّة paginate_links كما أسلفنا، يمكن أن نمرر جزءًا من الإعدادات ويمكن ألا نمرر أي شيء على الإطلاق، فتقوم ووردبريس باستخدام الإعدادات الافتراضية التي أوردناها في الأعلى. base (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: %_% تُستخدم للإشارة إلى الرابط، الذي سيتم استخدامه لإنشاء روابط الصفحات. في رابط مثل: http://example.com/all_posts.php%_% يتم استبدال القيمة الافتراضية: %_% بقيمة format التي سنتحدث عنها في الفقرة التالية. format (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: ?page=%#% تُستخدم كهيكل للصفحات. في حال كنا نريد أو كنا نستخدم عناوين نظيفة (pretty permalinks) ستكون القيمة هي /page/%_%، حيث تعبير %_% يتم استبداله برقم الصفحة. total (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 1 مجموع عدد الصفحات، عند استخدام دالّة ()paginate_links داخل حلقة ووردبريس، تكون القيمة الافتراضية تساوي خاصّية max_num_pages$ في WP_Query. current (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 0 رقم الصفحة الحالية. show_all (القيمة اختيارية)، نوعها قيمة منطقية (true أو false). القيمة الافتراضية: false إذا كانت القيمة true عندها سيتم إظهار جميع الصفحات بدلاً من قائمة قصيرة من الأرقام المجاورة لرقم الصفحات الحالية. بشكل افتراضي هذا الخيار تكون قيمته false ويتم التحكم به عن طريق الخيارين end_size و mid_size. end_size (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 1 عدد الأرقام عند بداية ونهاية أطراف القائمة. mid_size (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 2 عدد الأرقام على جانبيّ الصفحة الحالية، (مع ملاحظة أن الرقم لا يشمل الصفحة الحالية). prev_next (القيمة اختيارية)، نوعها قيمة منطقية (true أو false). القيمة الافتراضية: true لتحديد إن كنا نريد روابط التالي والسابق أن يتم استخدامها في القائمة أم لا. prev_text (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: __('« Previous') حيث __() هي دالّة مسؤولة عن الترجمة. نص رابط الصفحة السابقة، تعمل فقط إن كان الخيار السابق (prev_next) فعّالاً (قيمته true). next_text (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: __('Next »') حيث __() هي دالّة مسؤولة عن الترجمة. نص رابط الصفحة التاية، تعمل فقط إن كان خيار (prev_next) فعّالاً (قيمته true). type (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: ‘plain’ تتحكم بشكل القيمة التي تقوم الدالّة بإرجاعها. القيمة الممكنة هي: plain: تكون القيمة التي يتم ارجاعها عبارة عن سلسلة نصّية مؤلفة من روابط مفصول بينها بمحرف السطر الجديد. array: تكون القيمة التي يتم ارجاعها عبارة عن مصفوفة من روابط الصفحات لتوفّر تحكم كامل بكيفية الظهور. list: تكون القيمة التي يتم ارجاعها عبارة عن قائمة HTML غير مرتّبة (ul). add_args (القيمة اختيارية)، نوعها مصفوفة. القيمة الافتراضية: false مصفوفة اسمية من المحددات ليتم إضافتها إلى الرابط، تكون المصفوفة على شكل: اسم => قيمة. add_fragment (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص لتتم إضافته إلى نهاية كل رابط بشكل مباشر (يمكن تمرير متحولات GET عن طريق هذا الخيار، بشكل يشبه خيار add_args لكن على شكل سلسلة نصية بدلاً من مصفوفة). before_page_number (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص ليتم إظهاره قبل كل رقم صفحة (النص وليس الرابط). after_page_number (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص لتتم إضافته بعد رقم الصفحة (النص وليس الرابط). أزرار التالي والسابق قد يفضّل البعض استخدام أزرار "التالي" و"السابق" بدلاً من أرقام الصفحات، أو ربما يتطلب القالب الذي يعملون عليه هذه الأزرار. تقدّم ووردبريس دالّة واحدة لعرض الرابطين معاً (التالي - السابق) هي: posts_nav_links. لنقم بوضع هذه الدالّة بدلاً من دالّة إظهار أرقام الصفحات التي تحدثنا عنها سابقاً: <?php posts_nav_link(); ?> يصبح القالب بهذا الشكل: يمكن أن تأخذ الدالّة ثلاثة محددات كلها اختيارية، هي: sep$: (سلسلة نصية)، يمثل النصّ المعروض بين الرابطين. القيمة الافتراضية: ' — ' prelabel$: (سلسلة نصية)، اسم رابط الصفحة السابقة. القيمة الافتراضية: '« Previous Page' nxtlabel$: (سلسلة نصية)، اسم رابط الصفحة التالية. القيمة الافتراضية: 'Next Page »' لنقم معاً بتعديل هذه الإعدادات لتصبح كالتالي: <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> تظهر لنا التعديلات في القالب كما يلي: ما رأيكم لو نختم الدرس بخدعة بسيطة، نقوم من خلالها بجعل روابط التالي السابقة تظهر بشكل مشابه لأرقام الصفحات؟ سأخبركم بتلميح: تكمن الخدعة بالاستفادة من المحدد الأول sep$. لنضع في البداية وسم ul محيطاً بدالّة ()posts_nav_links يأخذ نفس صنف CSS الموجود في أرقام الصفحات كما يلي: <ul class="page-numbers"> <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> </ul> الآن نريد إحاطة كِلا الرابطين بوسم li لكل رابط، يمكن أن نضع داخل وسم ul بداية وسم li ونضع قبل إغلاق وسم ul وسم إغلاق وسم li، فيصبح المصدر كالتالي: <ul class="page-numbers"> <li> <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> <li> </ul> ما فعلناه حتى الآن أننا أحطنا كلا الرابطين بوسم li واحد، لكننا نريد أن نحيط كل واحد من الرابطين بوسم مستقلّ، سنقوم باستبدال المحدد الأول $sep بـ: </li><li>. بما أن محتوى هذا المحدد سيكون بين الرابطين بشكل دائم، فسنضع فيه إغلاق وسم li الأول يليه بداية وسم li الثاني. فيصبح المصدر: <ul class="page-numbers"> <li> <?php posts_nav_link('</li><li>', '&laquo; السابق', 'التالي &raquo;'); ?> <li> </ul> يصبح شكل الروابط كالصورة التالية: خلاصة تعرّفنا خلال الدرس على كيفية إضافة أرقام الصفحات أو روابط التالي-السابق بحيث يتم استخدامها للتنقل بين صفحات الموقع. كما تعرفنا بشكل بسيط على كيفية إضافة ملف CSS جديد باستخدام دالّة ()wp_enqueue_style.

كُنّا في درس سابق قد تحدثنا عن كيفية تخطيط صفحات الويب باستعمال CSS2 وكيف أنّ ذلك لم يكن بالأمر السهل، لذلك في هذا الدرس سوف نقوم بنفس التخطيط ولكن باستعمال تقنيات CSS3 الجديدة. تٌقدّم لنا CSS3 مجموعة من التقنيات والتحسينات لتساعدنا على تخطيط صفحات الويب بشكل أفضل وأسهل ودون الحاجة إلى الكثير من الأكواد كما كان الحال في CSS2. كما أنها مُصممة لتدعم السلوكات المتغيرة/الديناميكية وبالتالي يمكننا القول بأنها " لغة قابلة للبرمجة". دعونا إذًا نرى بعض الخصائص والتقنيات الجديدة التي توفرها هذه اللغة ونحاول استخدامها لدعم حالة الاستخدام التي كنّا قد بدأنا بها في الدرس السابق. دالة ()calc الخاصة بلغة CSS3تُستخدم دالة ()calc الجديدة لحساب القيم بشكل ديناميكي (ضع في الحسبان أن دعم هذه الدالة يختلف من متصفح لآخر). وفي داخل هذه الدالة يمكنك كتابة أي معادلة/تعبير (expression) باستخدام المعاملات الحسابية المعروفة (+، -، *، /). سوف يساعدنا استخدام هذه الدالة على التخلص من الكثير من الأكواد التي كان لا بد منها في CSS2، وفي حالتنا هذه فإنها سوف تساعدنا في تمدد العناصر بشكل أفضل (سوف يصبح استخدام تقنية CSS Expansion التي ذكرناها سابقًا أكثر سهولة). أنظر للكود الموجود في الأسفل: #nav, #subnan { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }لاحظ أننا استخدمنا الدالة ()calc في الخاصية height وهذا سوف يساعدنا بالحصول على نفس النتيجة التي حصلنا عليها باستخدام CSS2 عندما استخدمنا الخاصيتين top: 6em و bottom: 4em، وبهذا يمكن للأمور أن تصبح أكثر مرونة وسوف نحتاج إلى خاصية واحدة (height مع ()calc) بدل اثنتين (top وbottom). استخدام CSS3 Flexbox في تخطيط الصفحاتتُعتبر Flexbox من الخصائص والتقنيات الجديدة التي ظهرت في CSS3 وهي تجعل من تخطيط الصفحات وترتيب عناصرها أمرًا سهلًا ومتشابهًا في مختلف أحجام الشاشات والأجهزة، وبالتالي فهي مفيدة جدًا عند القيام بتصميم مواقع متجاوبة. وهذه بعض الخصائص والميزات التي تتمع بها Flexbox: تمكننا من موضعة العناصر الأبناء (child elements) بشكل أسهل ويصبح تخطيط الصفحات المعقدة أبسط وأسهل ودون الحاجة إلى الكثير من الأكواد فيصبح لدينا كود أنظف وقابل للقراءة بشكل أفضل.يمكن وضع العناصر الأبناء بأي إتجاه نريده وتصبح أبعاد تلك العناصر مرنة أكثر بحيث يمكنها التجاوب مع مساحة العرض.تستطيع العناصر الأبناء أن تتمدد وتتقلص تلقائيًا لتشغل المساحة الفارغة.كما أنّ Flexbox يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها: Flex container: العنصر الذي يحتوي على الخاصية display بالقيمة flex أو inline-flex بحيث يصبح هذا العنصر هو العنصر الحاوي (الأب) للعناصر التي نريد التعامل معها.Flex item: هو أي عنصر موجود في الـFlex container. (ملاحظة: أي نص موجود بشكل مباشر داخل الـFlex container سيتم احتواؤه داخل anonymous flex item).Axes: أي flexbox يجب أن يحتوي على الخاصية flex-direction بحيث تُحدد هذه الخاصية المحور الرئيسي (main axis) الذي سوف تتموضع حوله الـflex items. ويوجد أيضًا المحور العرضي (cross axis) ويكون هذا المحور عموديًا على المحور الرئيسي.Lines: يمكن للـflex items أن تصطف/تتموضع في خط واحد أو خطوط متعددة وذلك ما تحدده الخاصية flex-wrap.Dimensions: يحتوي flexbox على main size و cross size كبديل عن height وwidth بحيث تُحدد هاتين القيمتين حجم المحور الرئيسي (main axis) والعرضي (cross axis) على التوالي.بعد هذه المقدمة القصيرة عن flexbox يمكننا الآن استخدامها في تخطيط الصفحات. <body class="layout-flexbox"> <header id="header"></header> <div class="content-area"> <nav id="nav"></nav> <aside id="subnav"></aside> <main id="main"></main> </div> <footer id="footer"></footer> </body>نريد في حالة الاستخدام التي نعمل عليها أن تكون العناصر الرئيسية (header ،content ،footer) مصفوفة بشكل عمودي، وبالتالي سوف نستخدم القيمة column في الخاصية flex-direction كما يلي: .layout-flexbox { display: flex; flex-direction: column; }ومع أنّ العناصر الرئيسية يجب أن تكون مصفوفة بشكل عمودي إلّا أنّ العناصر في منطقة المحتوى (nav ،subnav ،main) نريدها مصفوفة بشكل أفقي. وبما أنّ كل flex container يمكن أن يحتوي على خاصية flex-direction واحدة فقط فإننا سنقوم بتعريف العديد من flex containers داخل بعضها البعض حتى يمكننا التحكم في تخطيط الصفحة كما نشاء (أي حتى يصبح بإمكاننا أن نجعل العناصر تصطف كما نريد وألّا نصبح مقيدين باتجاه واحد فقط). ولهذا السبب قمنا بإضافة حاوي (container) آخر (<div class="content-area">) ليحتوي على عناصر nav ،#subnav# و main#. وبهذا يمكن للعناصر الرئيسية أن تصطف بشكل عمودي بينما تصطف عناصر منطقة المحتوى بشكل أفقي. نريد الآن أن نقوم بموضعة الـflex items لذلك سوف نستخدم الخاصية flex وهي اختصار(shorthand) للخصائص flex-grow ،flex-shrink وflex-basis. وهذه الخصائص تُحدد كيف تقوم الـflex items بتوزيع المساحة الفارغة المتبقية بينها، وهذا تعريف بسيط بهذه الخصائص: flex-grow: تُحدد كم يمكن للعنصر (flex item) أن ينمو/يتمدد نسبة للعناصر الأخرى في نفس الحاوي.flex-shrink: تُحدد كم يمكن للعنصر (flex item) أن يتقلص نسبة للعناصر الأخرى في نفس الحاوي.flex-basis: يُحدد الحجم الافتراضي للعنصر (أي حجمه قبل أن ينمو أو يتقلص). عندما نقوم بإعطاء الخاصيتين flex-grow وflex-shrink القيمة "صفر" فإننا نقوم بمنع العنصر من أن يتقلص أو ينمو حتى لو كان هناك مساحة فارغة (أي أنّ حجم العنصر يبقى ثابتًا). وهذا ما سوف نقوم به للترويسة (header) والتذييل (footer) لأننا نريد أن يبقى حجمهما ثابتًا: #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }وإذا أردنا لعنصر أن يستغل أي مساحة ثابتة فإننا نعطي الخاصيتين flex-grow وflex-shrink القيمة "1" ونعطي الخاصية flex-basis القيمة auto. وهذا ما نريده بالنسبة لمنطقة المحتوى (نريدها أن تستغل أي مساحة فارغة). وكما ذكرنا سابقًا فإننا نريد للعناصر الموجودة داخل <div class="content-area"> أن تصطف بشكل أفقي، لذلك سوف نعطيها الخاصية display: flex حتى يصبح هذا العنصر عبارة عن flex container وسوف نعطيها أيضًا الخاصية flex-direction: row حتى نجعل العناصر الموجودة في داخله (nav ،#subnav# و main#) تصطف بشكل أفقي، وبالتالي نحصل على تنسيقات CSS التالية: .content-area { display: flex; flex-direction: row; flex: 1 1 auto; margin: 1em 0; min-height: 0; }في منطقة المحتوى نريد أن يكون حجم كلا العنصرين nav# وsubnav# ثابت وبالتالي سوف نعطيها الخاصية flex بقيم مناسبة: #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }لاحظ أنني استعملت الخاصية overflow-y: auto وذلك حتى نتعامل مع المحتوى إذا ما تجاوز ارتفاع الحاوي. متصفح Firefox هو من يحتاج لهذه الخاصية. سوف يأخذ العنصر main# المساحة الفارغة المتبقية: #main { flex: 1 1 auto; overflow-y: auto; }كل شيء يبدو جيدًا إلى الآن، لذلك دعونا نقوم بإضافة السلوك المتغير/الديناميكي ونرى ما يحصل. سوف تكون أكواد الجافاسكربت مشابهة لما استخدمناه سابقًا باستثناء أن اسم الـclass للعنصر الحاوي سيكون layout-flexbox بدلًا من layout-classic: $('.layout-flexbox #nav’).on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });سوف نضيف "class expanded" إلى تنسيقات CSS كما يلي: #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }لاحظ أننا هذه المرة لم نحتج إلى أن ندع العناصر الأخرى تعلم بشأن تغير العرض وذلك لأنّ flexbox تعالج الأمر دون تدخل منا. الشيء الوحيد المتبقي هو إخفاء القائمة الفرعية، ولكن احزر ماذا؟ لن نحتاج لكتابة أي أكواد إضافية لأن flexbox سيعلم بشأن المساحة الفارغة وسوف يتكفل بجعل كل شيء يعمل كما هو مطلوب. يوفر لنا flexbox أيضًا مجموعة من الطرق التي تمكننا من توسيط العناصر في الاتجاهين العمودي والأفقي. يمكننا الآن معرفة أهمية وجود مثل هذه التقنية في لغة CSS وكيف أنّها تساعد على جعل الكود أفضل وله القابلية للتطور والتوسع. ولكن على الناحية الأخرى فإنّ هذه التقنيات تحتاج إلى وقت أكثر لإتقانها مقارنة بخصائص CSS الأخرى. تخطيط الصفحات باستخدام CSS3 Gridإذا كنت تعتقد أن flexbox شيء جديد فأنت حتمًا لم تسمع عن CSS3 Grid، فهي ما زالت في مرحلة مبكرة (مرحلة draft) ودعم المتصفحات لها شبه معدوم (يمكنك تفعيلها في متصفح Google Chrome عن طريق الدخول إلى chrome://flags واختيار "experimental Web Platform features"). وفائدتها هي أنها تعمل في طبقة العرض (presentation layer) وبالتالي لن نحتاج إلى معرفة كيفية ظهور العناصر في التوصيف (markup) الخاص بملفات HTML (أي أنّ كل شيء سيتم باستخدام CSS بعض النظر عن ترتيب العناصر في HTML). الفكرة العامة هي أن يكون هناك شبكة تخطيط (grid) مرنة ومُعرّفة بشكل مسبق يمكن أن نستخدمها لموضعة العناصر بداخلها. وكما هو الحال في flexbox فإنها تعمل على مفهوم المساحات الفارغة وتسمح لنا بتعريف إتجاهين (عمودي وأفقي) في نفس العنصر مما يؤدي إلى تقليل حجم الكود وزيادة مرونته. يُقدّم لنا Grid Layout نوعين من الـgrids وهما explicit وimplicit، ولجعل الأمور بسيطة سوف نركز على explicit فقط. وكما هو الحال مع flexbox فإنّ Grid يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها: Grid container: هو أي عنصر يملك الخاصية display بالقيمة "grid" أو "inline-grid" بحيث تتموضع العناصر داخله ويتم محاذاتها بناءً على grid مُعرّف مسبقًا (explicit mode). والـgrid هو عبارة عن مجموعة من الخطوط العمودية والأفقية المتقاطعة والتي تفصل الـGrid container إلى مجموعة من الخلايا (cells). وهناك مجموعتين من الخطوط؛ الأولى لتعريف الأعمدة (columns) والثانية تكون عمودية على هذه الأعمدة لتعريف الصفوف (rows).Grid track: هي المسافة بين خطّين متجاورين، وكل Grid track يتم إعطاؤه دالة تحجيم (sizing function) للتحكم بكيفية نمو كل عمود أو صف وبالتالي التحكم في البعد بين الخطوط المحيطة بكل خط.Grid cell: هي المسافة بين صفّين متجاورين وعمودين متجاورين من خطوط الـgrid، وهو أصغر وحدة من الـgrid يمكن الرجوع والاستناد إليها عندما نقوم بموضعة عناصر الـgrid.Flexible length: هو بُعد يتم تحديده بوحدة fr وهو يُمثّل جزء من المساحة الفارغة في الـGrid container. إليك عناصر HTML التي سوف نستخدمها: <body class="layout-grid"> <header id="header"></header> <nav id="nav"></nav> <aside id="subnav"></aside> <main id="main"></main> <footer id="footer"></footer> </body>لاحظ بأننا في تخطيط الصفحة هذا لن نحتاج إلى عنصر إضافي يعمل كحاوٍ لمنطقة المحتوى كما كان الحال مع flexbox، وذلك لأنّ هذا النوع من تخطيط الصفحات (Grid layout) يسمح لنا بتعريف مساحة كل عنصر في كلا الإتجاهين وبنفس الـGrid container. لنبدأ الآن بإضافة تنسيقات CSS: .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }قمنا باستخدام الخاصية display: grid على الحاوي (Grid container)، وكذلك استخدمنا الخاصيتين grid-template-columns وgrid-template-rows وهما تمثلان المساحة بين الـGrid tracks. بمعنى آخر، فإنّ هاتين القيمتين لا تمثلان مكان تواجد خطوط الـgrid وإنّما تمثلان مقدار المساحة بين الـGrid tracks. ضع في الحسبان أنّ وحدات القياس يمكن أن تكون أي واحدة من التالية: وحدة طول (length).نسبة مئوية معينة من حجم الحاوي (Grid container).مساحة من المحتوى الذي يحتله العمود أو الصف.جزء من المساحة الفارغة في الـgrid.فعلى سبيل المثال، في الخاصية grid-template-column: auto 0 auto 1em 1fr سيكون لدينا التالي: track واحد لتعريف عمودين بعرض auto (مساحة القائمة الرئيسية nav#).gutter واحد بقيمة "صفر" (الـmargin الخاص بالعنصر subnav# موجود في مستوى العنصر، ويمكن أن يكون موجودًا أو لا وبهذه الطريقة نضمن أن لا يكون هناك gutter مزدوج).track واحد لتعريف عمودين بعرض auto (مساحة القائمة الفرعية subnav#).gutter واحد بقيمة 1em.track واحد بقيمة 1fr للعنصر main# (سوف يأخذ المساحة المتبقية).لاحظ أننا استخدمنا القيمة auto في الـtrack، وهذا يسمح لنا بالحصول على أعمدة ديناميكية بحيث يتم تعريف مكان وحجم خطوط الـgrid بناءً على المحتوى الخاص بها. (سوف نحتاج أيضًا إلى تعريف حجم العنصرين nav# وsubnav# وهذا ما سنفعله بعد قليل). وبطريقة مشابهة، سوف تملك الصفوف الخاصية grid-template-row: 5em 1em 1fr 1em 3em مما يجعل العنصرين header# و footer# ثابتين ويؤدي أيضًا إلى أنّ العناصر الموجودة بين هذين العنصرين سوف تستخدم المساحة الفارغة المتبقية في حين تكون قيمة الـgutters بقيمة 1em. لنرى الآن كيف سنقوم بموضعة العناصر داخل الـgrid الذي قمنا بتعريفه: #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }إنّ تنسيقات CSS الخاصة بالعنصر header# تُخبرنا بأننا نريد أن تكون الترويسة موجودة بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 1 و2 بالنسبة للصفوف. ونفس الشيء بالنسبة للعنصر footer# فنريده أن يكون موجودًا بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 5 و6 بالنسبة للصفوف. أمّا بالنسبة لمنطقة المحتوى فقد تمّ إعطاؤها الخصائص المناسبة حتى تشغل المساحة التي يفترض بها أن تشغلها. لاحظ أنّ الخاصية grid-column هي اختصار (shorthand) للخاصيتين grid-column-start وgrid-column-end و أنّ الخاصية grid-row هي اختصار للخاصيتين grid-row-start وgrid-row-end. لنعد الآن إلى العنصرين nav# وsubnav#. بما أننا قمنا مسبقًا بوضع هذين العنصرين داخل الـtrack بقيم auto فسوف نحتاج إلى تحديد مساحتهما (نفس الشيء سيكون بالنسبة لـ"expanded" فسوف نقوم فقط بتغيير عرضها وسوف يتكفل Grid بالباقي). #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; margin-left: 1em; }يمكننا الآن أن نقوم بتغيير وضع القائمة الرئيسية nav# وإخفاء أو إظهار القائمة الفرعية subnav# وكل شيء سيعمل بشكل جيد وملائم. كما أنّ Grid Layout تسمح لنا باستعمال أسماء مستعارة لتسمية الخطوط حتى نستطيع أن نُغير في الـgrid كما نريد دون أن يؤدي ذلك إلى خلل في الأكواد لأنّها ستكون مربوطة باسم معين وليس بأحد خطوط الـgrid. خاتمةحتى باستخدام تقنيات CSS القديمة فإنّ هناك الكثير مما يستطيع مطورو الويب فعله واستغلاله. ومع ذلك فقد يكون ذلك مهمة ليست سهلة وتحتاج إلى الكثير من الأكواد والتي قد تكون مكررة في كثير من الأحيان. ولكن كما شاهدنا فإنّ CSS3 بدأت تقدم طرق وتقنيات أفضل لتخطيط صفحات الويب والتي بدورها تُسهّل العمل على مطوري الويب. لذلك أعتقد أنه يجب على أي مطور ويب أن يتقن ويتعلم هذه التقنيات حتى يُحسّن من تجربة المستخدم وحتى يقوم بكتابة كود أنظف وأفضل. وهذه المقالة قدمت جزءًا صغيرًا فقط مما يمكن فعله باستخدام تقنيات CSS3 وهناك الكثير مما يجب عليك تعلمه. ترجمة -وبتصرّف- للمقال CSS Layout Tutorial: From Classic Approaches to the Latest Techniques لصاحبه Laureano Martin Arcanio.

يحتوي مشروع الملف الشخصي الخاص بنا على صفحة واحدة حتى الآن. من الواضح أنّ معظم مواقع الويب تمتلك أكثر من صفحة. سنُضيف في هذا الدرس صفحات إضافيّة. إنشاء صفحة جديدة سننشئ ثلاث صفحات جديدة، صفحة من أجل مدوّنة الموقع Blog، وصفحة من أجل المشاريع Projects وأخرى من أجل معلومات التواصل Contact. ستكون هذه الصفحات الرئيسيّة في الموقع. يجب أن نتذكّر دائمًا أنّه يمكن أن نضيف صفحات فرعيّة أخرى لاحقًا. فمثلًا سيكون هناك صفحة فرعيّة لكل تدوينة ضمن المدوّنة. لامتلاك بنية جيّدة ضمن الموقع من الأفضل إنشاء مجلّدات فرعيّة من أجل كلّ صفحة. سيكون لكل مجلّد فرعي ملف index.html خاص به يُعرَض افتراضيًّا عندما يفتح المتصفّح هذا المجلّد. يُعتبر إنشاء صفحة جديدة أمر سهلًا للغاية. من الأفضل نسخ ملف index.html الذي أنشأناه مسبقًا بحيث يكون لدينا البنية الأساسية جاهزة. بعد ذلك نُجري بالطبع بعض التعديلات المناسبة لكلّ صفحة جديدة. ملاحظة: يجب أن نتأكّد بأنّنا لا نستخدم أيّ رمز خاص أو فراغات عند تسمية أي مجلّد فرعي أو ملف. يجب أن نستخدم الأحرف القياسيّة ويُفضّل أن تكون بحالة صغيرة lower case، ومن الجيّد أيضًا فصل الكلمات عن بعضها باستخدام إشارة الناقص (-). صفحة المدونة أنشئ مجلّدًا فرعيًّا ضمن مجلّد portfolio وسمّه blog. انسخ الملف index.html إلى هذا المجلّد الفرعي الجديد. يجب الآن أن تبدو بنية الملفات لديك على الشكل التالي: افتح الملف المنسوخ blog/index.html في المتصفّح (إذا كنت تستخدم Brackets انقر زر Live Preview). ستلاحظ وجود أمرين لا يعملان بشكل صحيح: صور الصفحة لا تظهر. الألوان المعرّفة ضمن ملف css غير مُطبّقة في هذه الصفحة. يعود السبب في ذلك هو أنّنا ضمن مجلّد فرعي، فالمسار الخاص بملفات الصور لم يعد صحيحًا. لكي نسمح للصور بالظهور يجل أن نستخدم المسار marco.jpg/.. بدلًا من marco.jpg ضمن السمة src لعنصر الصورة img. ولكن من المؤكّد أنّنا لن نريد استخدام نفس الصور ضمن صفحة المدوّنة. لذلك يمكن إزالة العنصر img بشكل كامل. جرت العادة أن نعرّف قواعد css بحيث تكون شاملة لكل صفحات موقع الويب. وهكذا فإنّه من الضروري أن نشير إلى نفس ملف css الذي يحوي هذه القواعد وذلك ضمن ملف المدوّنة. يمكننا ذلك بتغيير عنوان URL من main.css إلى main.css/.. ضمن عنصر link. يوضّح السطر التالي شكل عنصر link بعد تعديل الملف blog/index.html: <link rel="stylesheet" href="../main.css"> سيؤدي تعديل عنوان ملف css ضمن عنصر link إلى تطبيق تنسيقات css الموجودة ضمن الملف main.css على صفحة المدوّنة. سنغيّر الآن عنوان ومحتوى صفحة المدوّنة. blog/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../main.css"> <title>Blog - Web Portfolio of Marco</title> </head> <body> <h1 class="title">Blog</h1> <p>I write about things I encounter while learning web programming.</p> <h2>Blog Entries</h2> <!-- Here will be a list of all the blog entries. --> </body> </html> يمكننا رؤية بعض الوسوم الجديدة في الشيفرة السابقة وهي <-- و --!> حيث يمكننا أن نكتب تعليق comment بين الرمزين السابقين. الهدف من التعليقات هو كتابة بعض الملاحظات التوضيحيّة لنا فقط، فهي لا تظهر لمستخدم الصفحة. التدوينة كصفحة فرعية تحتاج مدوّنتنا بالطبع إلى بعض المُدخلات (التدوينات). سننشئ صفحة HTML مستقلّة من أجل كل تدوينة. أنشئ مجلّدًا فرعيًّا ضمن المجلّد blog وسمّه first-entry ثمّ انسخ الملف blog/index.html إلى المجلّد الفرعي first-entry: افتح ملف التدوينة وغيّر محتوياته كما يلي: blog/first-entry/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../../main.css"> <title>First Entry - Web Portfolio of Marco</title> </head> <body> <h1 class="title">First Entry</h1> <p>April 7, 2015</p> <hr> <p>This is my very first blog entry.</p> </body> </html> لقد وضعت في الشيفرة السابقة عنصر HTML جديد وهو <hr> حاول أن تعرف وظيفته بمفردك، حاول مثلًا إزالته ومن ثمّ انظر إلى تأثير ذلك على الصفحة. أو يمكنك البحث عن معلومات عنه في الانترنت. لنبدأ بكتابة التدوينات أنصح دائمًا أن تبدأ فورًا بكتابة تدويناتك. يمكنك كتابة تدوينة قصيرة في كل مرّة تتعلّم شيئًا جديدًا حول البرمجة. يمكنك الاطلاع على بعض الأفكار التالية التي قد تساعدك في البدء بالتدوين: ماذا تعلّمت اليوم؟ أضف صور توضيحية. أضف روابط إلى مواقع مفيدة. ما هي المشاكل التي واجهتها؟ كيف حللت تلك المشاكل؟ ما العمل الذي يتوجّب عليّ إنجازه في المرّة القادمة؟ بمثل هذه التدوينات السابقة ستتقدّم سريعًا في احتراف البرمجة، وأسباب ذلك: ستكون ملّمًا بما تعلّمته بالتدريج. يمكنك أن تبحث عن المعلومات ضمن وثائقك الشخصيّة. ستتدرّب على HTML وCSS بينما تكتب هذه التدوينات. إذا نشرت موقعك على الانترنت يمكنك أن تجعل تدويناتك متاحة للآخرين. وهذا يساعد على مشاركة المعرفة التي اكتسبتها أو حتى أن تطلب من أحد الأشخاص أن يساعدك على حل مشكلة ما. إذا نشرت ملفّك الشخصي سيكون من الرائع مشاركته مع الآخرين للاطّلاع على إمكانيّاتك وأعمالك. التدوينة الثانية تلميح: أنشئ مجلّدًا فرعيًّا من أجل كل ملف تدوينة جديد. سيسمح لك هذا التنظيم بوضع الصور والملفات الأخرى لكل تدوينة بشكل منفصل عن ملفات التدوينات الأخرى. صفحة المشاريع من المفيد الاحتفاظ بصفحة خاصّة للمشاريع والمهام التي ننجزها. سنحضّر صفحة خاصّة لمثل هذه المشاريع على الرغم من عدم وجود أي محتوى بعد. لنكمل كما فعلنا من أجل صفحة المدوّنة ولننشئ مجلّدً فرعيً اسمه projects ضمن المجلّد الرئيسي portfolio ولننسخ الملف index.html إليه. projects/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../main.css"> <title>Projects - Web Portfolio of Marco</title> </head> <body> <h1 class="title">Projects</h1> <p>Here you will soon find my web projects.</p> </body> </html> صفحة التواصل سننشئ الآن الصفحة الأخيرة من الصفحات الرئيسيّة في الموقع وهي صفحة التواصل Contact. أنشئ مجلّدًا اسمه contact ضمن المجلّد الرئيسي portfolio وانسخ الصفحة index.html إليه. ملاحظة مهمّة: كُن حذرًا فيما يتعلّق بالمعلومات التي ترغب بنشرها للعموم. فمثلًا لا تنشر بريدك الإلكتروني الرئيسي، لأنّه من الممكن أن تستقبل بريدًا مزعجًا. contact/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../main.css"> <title>Contact - Web Portfolio of Marco</title> </head> <body> <h1 class="title">Contact</h1> <p> You can contact me by email: <a href="mailto:spammails@gmx.ch">spammails@gmx.ch</a> </p> <p> Marco Jakob<br> Switzerland </p> </body> </html> يمكننا أن نلاحظ وجود عنصر HTML جديد بجوار اسم Marco Jakob وهو العنصر <br>. يعمل هذا العنصر على الانتقال إلى سطر جديد ضمن الصفحة. نلاحظ أيضًا الرّابط الخاص mailto الذي يوجد على يسار البريد الإلكتروني (ضمن السمة href). سيعمل هذا الرّابط في حال نقره على فتح برنامج البريد الإلكتروني الافتراضي المثبّت على حاسوبك، مع فتح رسالة جديدة بعنوان البريد الإلكتروني المطلوب. لدينا الآن خمس صفحات HTML: سنزوّد موقعنا في الدرس السادس بوسيلة للتنقّل بين صفحاته. ترجمة -وبتصرّف- للمقال HTML & CSS Tutorial - Part 5: Blog and Other Pages لصاحبه Marco Jakob.

في الدروس السابقة تعرّفنا على OneNote وكيفية استخدامه لحفظ أنواع كثيرة من الملاحظات وكيفية تنظيمها في دفاتر الملاحظات، المقاطع، والصفحات. وبما أنّ الصفحات هي الجزء الأساسي الذي ستضيف ملاحظاتك عليه وترتّبها، تتوفر مجموعة من الأدوات والخصائص للتحكّم في طريقة عرض الصفحات وتغيير إعدادها لتسهيل قراءة المعلومات أو إضافتها. يمكن الوصول إلى جميع الأوامر الخاصة بطريقة عرض الصفحة أو إعدادها من تبويب View. الطريقة الافتراضية لعرض الصفحات هي طريقة العرض العادية Normal View وسنستعرض كيفية تغييرها إلى طرق العرض الأخرى وكيفية استخدام خيارات إعداد الصفحة. Full Page View يعمل هذا الخيار على توسيع أبعاد الصفحة إلى أقصى حدّ ممكن بجعلها تملأ الشاشة (أي وضع ملء الشاشة). ويمكنك استخدامه عندما تصبح الصفحة مزدحمة بالعناصر وترغب في توفير المزيد من المساحة لترتيبها. يتم تشغيل هذا الوضع بالنقر على أمر Full Page View من تبويب View (أو بطريقة مختصرة بواسطة النقر على زر السهمين المتعاكسين في زاوية الصفحة العليا اليمنى): عند تشغيل وضع ملء الشاشة يتم إخفاء كل ما حول حدود الصفحة، كتبويبات الأدوات، تبويبات المقاطع، جزء الصفحات، وغيرها، مع الإبقاء على قائمة منسدلة في الأعلى للتنقّل بين المقاطع ودفاتر الملاحظات: يمكنك إظهار تبويبات الأدوات أثناء تشغيل وضع ملء الشاشة بالنقر على النقاط الثلاثة في الأعلى. أمّا للعودة إلى طريقة العرض العادية فانقر على زر السهمين المتعاكسين من جديد: Dock to Desktop يعمل هذا الخيار على تصغير نافذة OneNote إلى حد معيّن وتثبيته على أحد جوانب سطح المكتب، مما يتيح لك إمكانية فتح برامج أخرى والعمل عليها واستعراض ملاحظاتك في نفس الوقت. وبهذه الطريقة أيضًا يمكنك إضافة محتوى إلى صفحات OneNote عن طريق السحب والإفلات. لتشغيل طريقة العرض هذه انقر على أمر Dock to Desktop من تبويب View: ستلاحظ أنّ نافذةOneNote المصغّرة ستبّقى مثبّتة في نفس المكان على الشاشة وبمستوى فوق جميع النوافذ التي ستفتحها. للعودة إلى طريقة العرض العادية، انقر على السهمين المتعاكسين في الجزء العلوي من نافذة OneNote المصغرة: ملاحظة: بإمكانك إضافة الخيار Dock to Desktop إلى شريط أدوات الوصول السريع بالنقر عليه بزر الفأرة الأيمن واختر Add to Quick Access Toolbar: تعديل إعدادات الصفحة في مجموعة Page Setup تتوفر المزيد من الخيارات للتحكم في تخطيط الصفحة ومظهرها. تغيير اللون اللون الافتراضي لخلفية صفحات OneNote هو الأبيض، لكن إذا كنت تفضّل لونًا ثانيًا، بإمكانك الاختيار من مجموعة الألوان في قائمة Page Color: انقر على اللون المرغوب لتطبيقه، وإذا أردت العودة إلى اللون الافتراضي انقر على No Color. تسطير الصفحة تسطير الصفحة وإظهار خطوط الشبكة من الخيارات المفيدة التي تساعدك على ترتيب العناصر ومحاذاتها في الصفحة. فإذا أردت إضافة سطور للصفحة، انقر على Rule Lines واختر التباعد المرغوب للسطور من مجموعة Rule Lines: أمّا لإظهار خطوط الشبكة فانقر على Rule Lines واختر حجم الشبكة المرغوب من مجموعة Grid Lines، علمًا أنّه لا يمكن تطبيق خياري التسطير وخطوط الشبكة معًا في نفس الوقت: إخفاء عنوان الصفحة إذا كنت تفضّل إزالة عنوان الصفحة وما يرافقه من معلومات الوقت والتاريخ واستغلال المساحة التي يشغلها لإضافة الملاحظات انقر على Hide Page Title: سيظهر لك مربّع حوار لتأكيد رغبتك في إزالة العنوان، انقر على Yes للمواصلة: للتراجع عن إزالة العنوان اضغط على مفتاحي Ctrl+ Z من لوحة المفاتيح، أو انقر مجددًا على أمر Hide Page Title ثم قم بإدخال العنوان. حجم الورقة يتضّمن أمر Paper Size خيارات أخرى للتحكّم في حجم الورقة، اتجاهها (أفقي أو عمودي)، اتجاه الصفحة (من اليمين إلى اليسار أو بالعكس)، الهوامش، وغيرها. ويمكن الوصول إلى هذه الخيارات من جزء Paper Size الذي يظهر عند النقر على أمر Paper Size: تتوفر في قائمة Size أغلب الأحجام القياسية، اختر الحجم المرغوب ثم حدّد اتجاه الورقة من قائمة Orientation. ومن الخيارات في قسم Print Margins يمكنك التحكّم في أبعاد هوامش الصفحة، وهذه تظهر عند الطباعة فقط. أما من قائمة Page body فيمكنك تحديد اتجاه الصفحة من اليمين إلى اليسار أو بالعكس. ملاحظة: عند إجراء أي تغيير على إعدادات الصفحة فإنّه سيُطبّق على الصفحة الحالية فقط. إلى هنا نصل إلى نهاية درسنا. في الدرس القادم سنتعلّم طريقة تصدير، مشاركة وطباعة ملاحظات OneNote.

عند تدخل إلى موقع Google Analytics (والذي أصبح أداء قياس الأداء القياسية في الآونة الأخيرة) ستُواجهك الكثير من الخيارات، الأزرار، القوائم المنسدلة ومئات البيانات. من السهل أن تضيع في الخيارات وتبدأ بقياس أشياء لا تقدم أي شيء ذي مغزى من الناحية الاستراتيجية. قد يكون الأشخاص الذين يستطيعون فهم كل هذه التّفاصيل واستخدامها بكفاءة عالية لرفع أدائهم هم قلّة قليلة، أما بالنسبة لباقي الأشخاص فيتوجب عليهم استخدام الوقت بفعالية أكبر. هناك أربعة مقاييس من شأنها أن تعطي لمحة بسيطة ولكن قوية عن أداء الجهود التسويقية التي تقوم بها. 1. الزوار Audience > Overview يظهر هذا المقياس عدد زوّار الموقع الإلكتروني. يستخدم جوجل ملفات cookies لتتبع عدد زوار المواقع. على سبيل المثال، إذا زارت 10 حواسيب موقعًا إلكترونيًا من نفس عنوانIP (ربما من نفس الـ router) فسوف تُسجَّل كعشرة زوار. هذا المقياس مهم لأنه يعطي فكرة عن حجم الجمهور. على سبيل المثال، إذا قررت مثلًا الاستعانة بـالتسويق بالمحتوى وقمت بالتّدوين على مدوّنتك بشكل أسبوعي وعلى مُدّونات مواقع أخرى (التّدوين الاستضافي) فإنّك ستلاحظ -من دون شك- زيادة في عدد الزّوّار. سيكون بإمكانك أيضًا معرفة ما لا يؤتي نتائج وتحسين جهودك التسويقية. على سبيل المثال، إذا أطلقت مجموعة إعلانات في الراديو في شهر أغسطس ولم يكن هناك زيادة ملحوظة في عدد الزوار في أغسطس أو سبتمبر فعليك أن تُعيد النظر في موضوع الإعلان على تلك المحطة. من جهة أخرى، عندما تُلاحظ أن عدد الزوار يزداد طردياً مع زيادة نشاطك على موقع لينكدإن فإن فكرة زيادة النّشاط والإعلان عليه ستكون فكرة صائبة. 2. أفضل 10 صفحات Content > Site Content > All Pages تمثّل هذه القائمة الصفحات الأكثر زيارة. إذا كانت لديك مدوّنة فستحتوي هذه القائمة على التّدوينات الأكثر زيارة، وإن كان موقعًا عاديًا فستتكوّن القائمة من الصّفحات الأكثر زيارة. إنّ تتبع الصفحات العشرة هذه كل شهر ستعطيك صورة عن أكثر المقالات والخدمات والمنتجات التي تشد الزوار. على سبيل المثال، صفحة "عن الموقع" على موقعي هي دائماً ضمن أفضل 10 صفحات وهذا قد يعني بأنه يجب علي أن أولي اهتمامًا بهذه الصّفحة ويجب علي تحسينها بشكل متواصل. إذا لاحظت أن إحدى المقالات تبقى دائماً ضمن أفضل 10 صفحات فهذا قد يكون مثالاً على محتوى ممتاز ومطلوب من الجمهور. يتوجب عليك أن تُراجع ذلك المقال وتحاول توفير مُحتوى مُشابه ومحاولة اكتشاف البُنية التي تجذب القُرّاء وذلك عن طريق اختبار العناوين، بنية المنشورات وعدد من المصادر والأساليب المشابهة لذلك المقال على سبيل المثال. 3. أفضل 10 إحالات (REFERRALS) Traffic Sources > Sources > Referrals يُعنى قسم الإحالات بتتبع الروابط الواردة من المدوّنات والمواقع الإلكترونية. على سبيل المثال، إذا أضفتُ في إحدى تدويناتي رابطًا إلى موقعك وقام أحد القرّاء بالنقر عليه فسوف يظهر لك اسم موقعي في هذه القائمة (لما تدخل إلى لوحة جوجل أناليتكس الخاصة بموقعك). ولو تم تشارك رابط لموقعك على الشّبكات الاجتماعية فستعرف أي شبكة أتت منها الزّيارات. إن مراجعة هذه القائمة هي طريقة بسيطة لمعرفة مدى فعالية جهودك على مواقع التواصل الاجتماعي وجهودك المُتعلّقة بالتدوين الاستضافي. يسمح لك ذلك بمعرفة أي التّحديثات تعطي نتائج جيّدة، إضافة إلى إعطائك لمحة عن أفضل الأيام والأوقات التي جلبت لك زيارات أكثر ، كما أنها تُلقي بالضّور على نوعية العناوين التي تجذب اهتمام جمهورك. في هذه الحالة، تستطيع معرفة متى وأين يُذكر موقعك (أو مُدوّنتك) في مدوّنات أخرى وعدد الزّوار الذي زاروا موقعك نتيجة لذلك لا يزال موقع جوجل يعطي قيمة كبيرة للروابط الدّاخلة. كلما زاد عدد الإحالات في الموقع زادت نسبة ظهور الموقع في نتائج محرك البحث. 4. أفضل 10 عمليات بحث طبيعية Traffic Sources > Sources > Search > Organic تتيح هذه القائمة الفرصة لمعرفة كيف يبحث الزّوار عن موقعك في محركات البحث. يرغب البعض بمعرفة العبارة التي كتبوها في مربع بحث جوجل للوصول إلى مواقعهم أو مدوّناتهم الإلكترونية. من المُحتمل جدًا أن تجد "not provided" ضمن هذه القائمة، والأمر راجع إلى رغبة جوجل في حماية خصوصية المُستخدمين إن هم سجّلوا الدّخول إلي أي من خدماتها على نفس المتصفح الذين يجرون فيه عملية البحث. بعبارة أخرى، إن كنت تستخدم حساب gmail على متصفّحك وقمت بعملية بحث على Google فلم يعد من الممكن للمواقع التي تزورها معرفة كلمات البحث التي أوصلتك إليها. وإلى جانب ذلك، توفر هذه القائمة معلومات لا تقدّر بثمن. ينبغي عليك تحليل مصطلحات البحث التي تجدها في هذه القائمة والتحّقق من مدى مُطابقتها لمُحتوى موقعك؟ هل فعلًا ترغب في أن يصل الزّوار إلى موقعك لدى البحث عن هذه الكلمات، على سبيل المثال إن كان موقعك تقنيا ولاحظت بأن هناك عدّة زيارات تصل إلى موقعك بعد البحث عن "قطط جميلة" فقد ترغب في التّساؤل عن سرّ ذلك، وما إذا كنت فعلًا ترغب في أن يرتبط اسم موقعك بالقطط فعلًا. إذا وجدت أن أغلب هذه المُصطلحات مُتعلّقة بشكل مباشر بعلامتك التّجارية (يعني يبحث النّاس عن علامتك التّجارية للوصول إلى موقعك) فمن المرجّح أن أغلب الزّيارات تأتي من أشخاص يعرفونك أو يعرفون شركتك من قبل. بمعنى، لا تصلك أيّة زيارات من أسواق وفئات لم تستهدفها بعد، وعليه يُفترض بك أن تستثمر بعض الوقت في التسويق بالمُحتوى لتصل إلى فئات لم تسمع عنك من قبل. وبحكم أن Google أصبحت تضيّق الخناق على الكلمات المُستخدمة في البحث للوصول إلى موقعك، فقد ترغب في استخدامWebmaster Toolsلمعرفة تلك الكلمات والتي يُمكنك أن تصل إليها بالنّقر على Traffic > Search Queries خلاصة إن هذه المقاييس الأربعة ستساعدك على اتخاذ قرارات استراتيجية ذكيّة دون إضاعة الوقت في الكم الكبير من البيانات التي توفّرها لك Google Analytics. بالرّغم من توفّر الكثير من الأدوات المُوجّهة للمسوّقين في هذا المجال، إلا أن كل ما تحتاجه في البداية هو ملف excel. حيث أن كل ما تحتاج إلى القيام به هو مراقبة هذه الأرقام بداية كل شهر وتدوينها وحينها سيكون بمقدورك مُتابعة أداء جهودك التّسويقية بكفاءة عالية. ترجمة -وبتصرّف- للمقال The Only 4 Website Metrics Worth Tracking لصاحبه Ernest Barbaric.