إذا كنت تريد أن تعدل في مظهر موقعك سواء باستخدام القوالب الجاهزة وتخصيصها كما تريد، أو باستخدام إضافات بناء الصفحات (Page Builders) مثل Elementor أو Beaver Builder أو غيرهم، فمن الضروري معرفة المصطلحات المستخدمة لكل جزء من أجزاء صفحة الموقع ومكان كل منها. وإذا كنت تريد أكثر من ذلك، فربما يجب أيضاً أن تعرف أسماء الملفات المسؤولة عن كل جزء منها لتعديله إذا كنت تعرف كيف تتعامل مع الأكواد البرمجية.
الصورة التالية تحتوي على الأجزاء الأكثر استخداماً في صفحات المواقع التي تزورها يومياً. قد تحتوي بعض الصفحات على كل هذه الأجزاء أو بعض منها أو ربما تحتوي على أجزاء أخرى غير موجودة في هذه الصورة.
الأجزاء الرئيسية لصفحة الموقع
Header
كما يوحي الاسم، الرأس (Header) هو ما يوجد في الجزء العلوي من الصفحة. قد تختلف رؤوس الصفحات الموجودة في الصفحة الرئيسية عن باقي صفحات الموقع ولكن عادةً ما يتضمن الرأس بعض الأجزاء مثل الـ Logo والـ Menu.
Logo
شعار الموقع (Logo) كما تعلم هي الصورة التي تمثل موقعك/شركتك ويمكن وضعها في أي مكان في رأس الصفحة سواء في الجانب الأيمن أو الأيسر أو في الوسط. عادة عندما يتم النقر على شعار الموقع، يتم الذهاب إلى الصفحة الرئيسية للموقع.
أحياناً يتم وضع اسم الموقع بجانب الشعار وربما وصف موجز (Tagline) يمنح القارئ معلومات أكثر قليلاً حول ما يمكن توقعه على الموقع. مثلا، الـ Tagline في الصورة التالية هي: Broadcast Yourself وهي التي تقع تحت شعار اليوتوب
Menu
القائمة (Menu) هي خريطة الموقع حيث توضح للزائرين كيفية العثور على ما يبحثون عنه على الموقع. توجد القائمة عادةً أعلى أو أسفل الرأس مباشرةً – وأحياناً كلاهما.
يجب أن تكون القائمة نظيفة ومرتبة مما يتطلب الكثير من التفكير والتخطيط في بعض الأحيان. غالباً ما يتم وضع التصنيفات و/أو الصفحات في القائمة. كما قد تجد روابط أخرى في القائمة مثل روابط لحسابات التواصل الاجتماعي الخاصة بالموقع وربما زر البحث.
يريد زوار الموقع العثور على أي شيء يبحثون عنه بثلاث نقرات أو أقل. أحد المواقع التي تقوم بعمل رائع في التنقل هو Amazon.com. على الرغم من تقديم عشرات الآلاف من العناصر للبيع ، إلا أنها تجعل من السهل جدًا العثور على الأشياء.
للحفاظ على التنقل في القائمة نظيفًا ، يمكنك استخدام القوائم المنسدلة. عندما يمرر القارئ الماوس فوق عنصر القائمة، تظهر قائمة جديدة كاملة له.
Main Content
المحتوى الرئيسي (Main content) للصفحة هو أكبر جزء في الصفحة وهو أيضاً يسمى بجسم الصفحة (Body). هذا هو أكثر جزء يهم زائر الصفحة لأنه يحتوي على ما يريده.
يعتمد محتوى هذا الجزء على الصفحة نفسها التي قد تكون مقالة مثل هذه التي تقرأها الآن والتي تحتوي على كلمات وصور وربما مقاطع فيديو، وقد تكون صفحة تعريفية بالشركة، أو تحتوي فقط على نموذج اتصال، أو صفحة تحتوي على قائمة المقالات، أو صفحة الأرشيف، أو صفحة تحتوي على قائمة المنتجات، أو صفحة خاصة بمنتج ما، أو صفحة الدفع، وغيرها الكثير من المحتوى.
Sidebar
كما يوحي اسمه، الشريط الجانبي (Sidebar) هو عمود يمتد بطول الجانب الأيمن أو الأيسر من الصفحة – وأحيانًا كلاهما. بعض المواقع تقوم بوضع أكثر من شريط جانبي معاً على اليمين أو اليسار.
بشكل عام ، يستخدم الشريط الجانبي للعناصر أو الودجات (Widgets) التي تريد عرضها في كل صفحة. مثلاً يتم عرض الإعلانات ونموذج الاشتراك في النشرة البريدية وقوائم تنقل إضافية في الشريط الجانبي.
تضع بعض مواقع الويب أيضًا روابط إلى حسابات الشبكات الاجتماعية في الشريط الجانبي، أو تعرض أحدث تغريداتها، أو تحديثات حالة Facebook ، أو Pinterest.
اعتمادًا على جمهورك ، يمكنك التخلص من الشريط الجانبي تماماً هذا لأنه على جهاز جوّال، لن يراه المشاهدون إلا بعد التمرير لأسفل بعد منطقة المحتوى الرئيسية على أي حال. لذلك إذا كان غالبية المشاهدين يأتون إلى موقعك على كمبيوتر محمول أو كمبيوتر مكتبي ، فلا بأس من وجود شريط جانبي. ولكن إذا كان أكثر من نصف المستخدمين لديك يستخدمون أجهزة محمولة، ففكر في تصميم صفحاتك بدون الشريط الجانبي.
لست بحاجة إلى شريط جانبي في كل صفحة من صفحات موقعك – غالبًا لا تحتوي الصفحة الرئيسية على شريط جانبي، كما تتجاهل أنواع معينة من صفحات المبيعات الشريط الجانبي أيضًا.
لحسن الحظ ، فإن قوالب WordPress الجيدة ستجعل من السهل اختيار الصفحات التي يجب أن تظهر الشريط الجانبي ، وبعضها يتيح لك اختيار إظهار أشرطة جانبية مختلفة على صفحات مختلفة.
تمامًا مثل الرأس الموجود أعلى الصفحة ، يكون التذييل (Footer) في الأسفل.
مثل الشريط الجانبي، يتم استخدام التذييل للأشياء التي تريد عرضها في كل صفحة. إنه مكان جيد لوضع معلومات الاتصال الخاصة بك، على سبيل المثال والصفحات التي لا يتم زيارتها كثيراً مثل صفحة سياسة الخصوصية أو صفحة شروط الاستخدام.
أجزاء أخرى لصفحة الموقع
كانت تلك هي الأجزاء الرئيسية الأكثر استخداماً في صفحات المواقع. توجد أجزاء أخرى أيضاً يتم استخدامها ولكن بشكل أقل مثل:
Slider
يتم استخدام الـ Slider لعرض الشرائح (slideshows) المضافة إلى صفحة الويب. غالباً ما يتم وضع الـ Slider أسفل رأس الصفحة مباشرة ولكن يمكن وضعه في مكان آخر، مثلاً بداخل المحتوى الرئيسي.
يمكن استخدام الـ Slider على جميع أنواع مواقع الويب. تتمثل إحدى المزايا الواضحة لاستخدام الـ Slider في أنه يمكن لمالكي مواقع الويب وضع جميع محتوياتهم المهمة في عرض شرائح تفاعلي وجذاب بصريًا في أعلى الصفحة قبل المحتوى الرئيسي الخاص بهم.
Comments
التعليقات (Comments) هي ردود فعل مكتوبة يمكن للقراء إضافتها إلى مقالات مدونتك. يعد ترك تعليق على المقالة طريقة سهلة للزوار للتواصل معك ومع القراء الآخرين.
تظهر التعليقات عادةً على موقعك بعد محتوى المقالة مباشرةً، جنبًا إلى جنب مع اسم المعلق وتاريخ ووقت ترك التعليق.
يمكن أن تكون منطقة التعليق الحيوية طريقة رائعة لك ولقرائك لبناء مجتمع حول مدونتك. يمكن للزوار تقديم تعليقاتهم وطرح الأسئلة وتقديم وجهة نظرهم الخاصة حول الموضوع والمزيد.
Popups
بعض المواقع تستخدم النوافذ المنبثقة (Popups) من أجل حث الزائر على القيام بشيء ما مثل التسجيل في النشرة البريدية، أو عرض إعلان، أو الطلب منه الذهاب إلى صفحة أخرى، أو عرض منتج مقارب لما هو موجود في الصفحة، وغيرها من الأسباب.
تختلف أماكن ظهور النوافذ المنبثقة بحسب ما يراه صاحب الموقع. مثلاً قد تظهر أمام الزائر وتخفي باقي الموقع أو تظلله، أو قد تكون أقل إزعاجاً وذلك بالظهور في الزاوية السفلية مثلاً أو أعلى أو أسفل الصفحة.
ماهي الملفات المسؤولة عن هذه الأجزاء؟
يتم عرض موقع أي ووردبريس باستخدام القالب الذي يتكون من ملفات php الرئيسية الموجودة في الصوة التالية بالإضافة إلى ملف style.css المسؤول عن تصميم القالب مثل الألوان ونوع الخط والمسافات، وغيره.
نظرياً يمكن للقالب أن يعمل فقط باستخدام ملفين فقط هما index.php و style.css ولكن لن تجد قالباً يعمل بهذين القالبين فقط حالياً. توجد في كل قالب الكثير من الملفات من أبرزها:
- index.php – يتحكم ملف index.php في شكل الصفحة الرئيسية لقالب WordPress الخاص بك. بشكل افتراضي، يكوّن هذا الملف حلقة (loop) تستعلم عن أحدث مقالات المدونة ثم تعرضها ، مع وجود رابط في الأسفل لعرض المقالات السابقة. كما يمكنك أيضاً في لوحة تحكم موقع الووردبريس الذهاب إلى Settings ثم Reading لجعل الصفحة الرئيسية هي الصفحة التي أنشأتها بنفسك في WordPress.
- style.css – هذا هو ملف CSS الرئيسي المسؤول عن شكل قالبك. يحتوي هذا الملف أيضًا على نص في الجزء العلوي يخبر WordPress باسم قالب WordPress الخاص بك ، ومن هو المؤلف وعنوان URL لموقعك.
- header.php – يُنشئ رأس الصفحة، والذي يتكون عادةً من الشعار وقائمة تنقل.
- footer.php – يقوم بإنشاء تذييل يحتوي عادةً على عناصر وروابط ومعلومات اتصال كما هو مشروح أعلاه.
- sidebar.php – يقوم بإنشاء الأشرطة الجانبية المشروحة أعلاه.
- functions.php – تضيف وظائف إلى موقعك تتعلق بالقالب/ إطار العمل. إنه يعمل مثل الـ Plugin.
- screenshot.png – هذه صورة مصغرة تمثل القالب. سترى هذه الصورة في لوحة التحكم إذا انتقلت إلى Appearance ثم Themes.
- single.php – لإنشاء مقالة.
- page.php – تنشئ صفحة ثابتة.
- archive.php – تنشئ صفحة تعرض المنشورات مرتبة حسب التاريخ (مثل المقالات أو المنتجات وغيرها)
- category.php – تنشئ صفحة تعرض المنشورات مرتبة حسب التصنيف..
- tag.php – يقوم بإنشاء صفحة مرتبة حسب الوسوم.
- comments.php – الملف المسؤول عن عرض التعليقات.
- 404.php – تنشئ صفحة 404 عندما لا تكون الصفحة أو المنشور المطلوب موجودًا.
- front-page.php – يعرض صفحة ثابتة كصفحة رئيسية. يمكنك تغيير هذا الخيار بالانتقال إلى Settings ثم Reading في لوحة التحكم.
كما توجد أيضاً ملفات أخرى كثيرة بحسب تصميم القالب ووظائفه ولكن كانت تلك هي أبرزها.