التعامل مع واجهة المستخدم وصفحات الموقع في دروبال Drupal – دروبال

101

[ad_1]

سنشرح في هذا المقال كيف يجب التعامل مع واجهة المستخدم وصفحات الموقع في دروبال drupal. وبناءً على ما سبق ذكره في مقالنا السابق من خطوات، فبعد إكمال عملية التنصيب، سيبدو موقع دروبال الذي تم إنشاؤه حالًا بالشكل التالي:

016الواجهة.jpg

بعد تسجيل الدخول (ويمكنك تسجيل الدخول في أي وقت من خلال الرابط http://yourdomain.com/user/login، حيث تستبدل yourdomain باسم النطاق الخاص بك)، ويوجد في أعلى الشاشة كل الروابط التي تقود إلى التحكم في الأكواد الخلفية Back End، والتي من خلالها يمكن تغيير كل ما يخص الموقع ومحتوياته. وسيتم دراسة العديد منها خلال هذا الدرس العملي. ولكن لتسهيل فهمها، إليك فكرةً سريعةً عن هذه الروابط وما تحتويه:

  • Content: أي محتويات الموقع، ويوجد في هذا القسم كل ما يتعلق بالمحتوى، مثل الصفحات والمنشورات أو مواضيع المدونة. كذلك مراجعة تعليقات الزوار ومكتبة الوسائط.
  • Structure: أي الهيكل، وهذا القسم المسئول عن هيكلة الموقع وأجزائه، مثل كتل التصميمات blocks، نماذج إدخال البيانات forms، أنواع البيانات المخزنة content-types، قوائم الانتقال menus، وكذلك التصنيفات taxonomies.
  • Appearance: أي المظهر، ومن خلال هذا القسم يتم التحكم في إعدادات السمات themes وكل الخيارات التي تخص شكل الموقع؛ بالإضافة إلى تحديثات الموقع.
  • Extend: وتعنى الإضافات، التي من خلالها يمكن إضافة او تعديل أو حذف الوحدات البرمجية Modules الخاصة بموقع دروبال.
  • Configuration: أي الضبط، حيث يمكن التحكم في إعدادات الموقع من خلال هذا القسم.
  • People: تعني المستخدمين، وفيها يتم التحكم في المستخدمين Users، ومجموعات الصلاحيات Roles، ومنح الصلاحيات أو منعها عن المستخدمين والمجموعات.
  • Reports: التقارير، مجموعة من التقارير عن الموقع، مثل حركات تسجيل الدخول وحالة الموقع والأخطاء التي يسجلها الموقع وكلمات البحث والمعلومات الأخرى.
  • Help: أي قسم المساعدة، وفيه معلومات قيمة عن إدارة الموقع، وكذلك الوحدات البرمجية modules.

وبالمناسبة، تلاحظ وجود قائمة Shortcuts، وفيها يمكن إضافة اختصارات أو روابط للأقسام الأكثر استخدامًا لسهولة الوصول إليها.

017اختصارات.jpg

تمنح هذه الإمكانية سرعة الوصول للأقسام المختلفة، وبالتالي إنجاز العمل بسرعة أكبر عند تغيير خصائص الموقع والتحكم فيه.

هل كل ما سبق واضح؟ إذًا، آن الأوان للاستفادة من المعارف السابقة بالتطبيق والاستخدام.

4.تغيير سمة المظهر theme

في أسفل الشاشة، ستجد شكل الواجهة front end الخاصة بموقعك، وهذا هو الشكل الذي سيراه زوار الموقع. حتى هذه اللحظة، المعلومات مازالت بسيطة، لذلك فأول شيء ربما تريد تجربته هو تغيير سمة المظهر الافتراضي الذي يُطبَّق عند إنشاء الموقع بأي واحد آخر. ويمكن فعل هذا من خلال الاختيار الموجود تحت القائمة Appearance > Install new theme.

018نمط_جديد.jpg

البحث عن سمة theme من داخل الفهرس

في دروبال، وعلى عكس أنظمة إدارة المحتوى الأخرى، لا يمكن العثور على سمات من داخل لوحة تحكم دروبال. لذلك، يتطلب الأمر الذهاب إلى دليل سمات دروبال الرسمي، ويوجد له رابط في الجزء العلوي من صفحة تثبيت السمات.

اقتباس

حتى وقت كتابة هذا المقال، تتوافر أكثر من 2900 سمة theme يمكن الاختيار منها. ويوفر الدليل عدة طرق لتصفيتها حتى يسهل العثور على السمة التي تبحث عنها.

019أنماط_دروبال.jpg

قد تصاب بالإرهاق بسبب العدد الهائل من السمات المتوافرة. وفي هذه الحالة، من الجيد أن تبدأ بواحدة من القوائم المصنفة على أنها “أفضل قائمة” والمتوفرة بكثرة على الويب. لاحظ أن مراجعة السمات themes والتعامل معها، من الأمور المتقدمة التي لا تُشرح في العادة للمبتدئين.

نصيحة هامة عند اختيار سمة معينة theme، تأكد من أنها تتناسب مع مستوى قدرتك التقنية، وأنها تستطيع التعامل معها لتتمكن من إنشاء رؤية التصميم التي ترغبها. وكأمر آخر هام جدًا، يجب التأكد أن السمة المختارة متجاوبة Responsive، أي أن تكون قادرة على التجاوب مع كل أحجام الشاشات، وخصوصًا الجوّال (وهو أمر لا بد منه هذه الأيام). جميع السمات الموجودة في الدليل أيضًا لديها صفحات خاصة بها، حيث يمكنك قراءة تفاصيلها وتجربة نسخة فعلية live demo منها.

020اختيار_نمط.jpg

تثبيت السمة theme على موقع دروبال

عندما تستقر على اختيار معين، ستكون خطوة التثبيت على موقعك أمر غاية في السهولة. نزّل السمة من الموقع (تجد الخيارات في الأسفل) أو انقر بزر الفأرة الأيمن على رابط التنزيل وانسخ الرابط.

021التنزيلات.jpg

بعدها، يمكنك استخدام إما الملف الذي نزّله، أو الرابط المنسوخ، لرفع السمة إلى موقعك.

022تثبيت_نمط.jpg

لم ينته الأمر بعدُ، حيث لابد من خطوة تثبيت السمة على الموقع، ويتم ذلك من خلال صفحة التبويب Appearance، ثم تنشيط السمة، والتنشيط ما هو إلا جعل السمة هي الافتراضية Install and set as default

023افتراضي.jpg

بعد إتمام الخطوات السابقة، عندما تعود إلى موقعك (يوجد زر في الزاوية اليسرى العليا يمكنك النقر عليه)، ستتمكن من رؤية المظهر الجديد قيد التشغيل.

024تشغيل.jpg

5.ضبط المظهر

بمجرد إكمال الخطوات وتثبيت السمة الجديدة على موقع الويب، ستلاحظ ظهورها كأول سمة في قائمة السمات التي تُعرَض عندما تفتح صفحة التبويب Appearance.

معظم السمات يأتي معها اختيار الضبط، حيث ستجد كلمة Settings على هيئة رابط بجانب السمة، وعند النقر عليه ينتقل إلى صفحة الإعدادات الخاصة بهذه السمة. وهناك طريقة أخرى أيضًا للوصول للإعدادات، ألا وهي صفحة التبويب Settings بالأعلى ومنها يمكن اختيار السمة المطلوب تعديلها.

025_أ_الأنماط.jpg

كلا الطريقتين تقود إلى صفحة الإعدادات التالية:

025_ب_إعدادات_النمط.jpg

يمكن من خلال هذه الصفحة تغيير أي خاصية من الخصائص التي توفرها السمة، وهذه الخصائص تختلف من سمة لأخرى، حتى خاصية المعاينة السريعة. قد تكون الخصائص موجهةً لتغيير نظام الألوان، أو إظهار/إخفاء صور المستخدمين في التعليقات والمنشورات، أو تغيير الشعار (اللوجو) والأيقونة المصغرة التي تظهر بجانب اسم الموقع في المتصفح، أوتعيين الخلفيات والفلاتر، وباقي الإعدادات.

عند إنشاء موقع ويب باستخدام دروبال، تأكد من الدخول لصفحة الإعدادات من وقت لآخر حتى تتمكن من الاستفادة من كل تقدمة السمة.

أثناء تواجدك بصفحة الإعدادات غير سمة المستخدم الرئيسي أيضا

إضافةً إلى أن دروبال يسمح بتغيير الواجهة الأمامية لموقعك عن طريق تغيير السمة، فإنه يوفر أيضًا نفس الإمكانية للواجهة الخلفية. شيء واحد يمكن تجربته هو المظهر الافتراضي التجريبي الجديد للوحة التحكم المسمى كلارو Claro والذي يأتي مع دروبال 9. يمكنك العثور عليه ضمن السمات الغير مثبتة في صفحة التبويب Appearance.

026كلارو.jpg

تُطبَّق هذه السمة عن طريق النقر على الرابط Install فيؤدي إلى الانتقال إلى لوحة التحكم (ويتطلب الأمر تأكيد هذا الاختيار حيث أنه مازال في مرحلة التجارب)، ثم الانتظار لحين الانتهاء من التثبيت، بعدها ستظهر هذه السمة في القائمة المنسدلة التي تعرض سمات الواجهة الخلفية (تجدها في المقطع سمة الإدارة Administration theme).

027نمط_الإدارة.jpg

بعد الحفظ، ستبدو الواجهة الخلفية بمظهر أحدث وأكثر أناقة.

028الواجهة_الخلفية.jpg

6.إنشاء صفحة رئيسية

سيظهر الآن موقعك بشكل أجمل، إلا أنه لا يزال فارغًا، والخطوة التالية هي تغيير هذا الفراغ.

إنشاء صفحة وكتابة المحتوى

كمبتدئ، المطلوب الآن هو إنشاء صفحة رئيسية حتى يتمكن الزوار من رؤية شيء ما عندما يدخلون على موقعك. يتم ذلك من خلال الانتقال إلى المحتوى> إضافة محتوى> الصفحة الأساسية Content > Add content > Basic page. سينقلك إلى هذه الشاشة الموالية:

029تصميم_الصفحة_الرئيسية.jpg

هنا، يمكنك كتابة المحتوى باستخدام محرر ذي إمكانيات أساسية. وفي الجزء العلوي، لديك خيار تحديد عنوان الصفحة الذي سيظهر أيضًا على موقعك؛ أما أسفل ذلك فستجد رابطًا Edit summary، بحيث عند النقر عليه، ستكون قادرًا على كتابة ملخص لمنشورك أو صفحتك. هذا يشبه نوعًا ما النبذة أو المقتطف الذي سيظهر في أجزاء معينة من موقعك.

أسفل ذلك، يوجد خيار لإدخال وتنسيق النص الذي سيظهر بالصفحة. على سبيل المثال، يمكنك جعل النص غامقًا ومائلًا، وإضافة الروابط وإزالتها وإنشاء قوائم وتحديد مقاطع الاقتباس وإدراج الصور، ويتم استخدام القائمة المنسدلة لتحديد العناوين؛ أما الخيارات الإضافية مثل إدخال الجداول أو الفواصل الأفقية، فتتطلب التبديل إلى وضع التحرير الكامل Full HTML الذي يتم اختياره من الجزء السفلي.

030محرر_كامل.jpg

إذا سبق لك العمل على أحد برامج معالجة النصوص مثل ميكروسوفت وورد، أو أي نظام إدارة محتوى آخر، فستتعرف على الأشياء سريعًا، وستكون قادرًا على كتابة وتنسيق المحتوى الذي تريده بسلاسة.

بمجرد الانتهاء من ذلك، يجب كتابة اسم مستعار للصفحة URL Alias، وهو المقطع الذي يُكتب بعد عنوان الموقع حتى يمكن الوصول لهذه الصفحة، وذلك من خلال الخانة الموجودة على الجانب الأيمن، على سبيل المثال الصفحة الأول يمكن كتابة “front-page/” أو “home/”. لاحظ وجود شرطة مائلة قبل الاسم. لذلك يُتوقع أن يكون رابط الصفحة الرئيسية مثل https://domain.com/front-page

031مستعار.jpg

بعد ذلك، وفي آخر الصفحة، يُنقر على حفظ Save، ويجب التأكد من اختيار مربع الاختيار Published.

تعيين كصفحة رئيسية

حتى يمكن تعيين الصفحة المنشأة حديثًا كصفحة رئيسية، يجب الذهاب إلى Configuration>System>Basic site settings، وفي القسم Default front page اكتب نفس الاسم المستعار الخاص بالصفحة، في حالتنا front-page/.

032الافتراضية.jpg

بعد فعل هذا والحفظ، ستظهر المحتويات على الصفحة الرئيسية للموقع.

033الرئيسية.jpg

7.إنشاء صفحة أخرى وإظهارها بقائمة التنقل

الخطوة التالية، هي إنشاء صفحة “من نحن” About us وإضافتها إلى قائمة التنقل. ولفعل ذلك نتَّبع نفس الخطوات السابقة. أنشئ صفحةً أساسية، وعبّئها بالمحتوى، مع تعيين الاسم المستعار وليكن “about/”. ستختلف الخطوات التالية عن الصفحة الأولى، فالمطلوب هنا إضافة هذه الصفحة إلى قائمة التصفح، وذلك بالنقر على إعدادات القائمة Menu Settings واختيار المربع Provide a menu link.

034من_نحن.jpg

وإليك شرحًا للإعدادات الظاهرة بالجانب الأيمن:

  • Menu link title: أي النص الظاهر بالقائمة، ومن المفضل أن يكون النص ذا معنى يوضحه، في حالتنا هذه ربما يكون “من نحن” اختيارًا جيدًا.
  • Description: خانة اختيارية وتعبر عن الوصف، وهذا عبارة عن نص يظهر للمستخدم إذا طاف بمؤشر الفأرة فوق هذا العنصر بالقائمة، لذلك يُفضل كتابة وصفًا سريعًا لما سيجده المستخدم، على سبيل المثال “تعرف علينا وعلى خدماتنا”.
  • Parent item: أي العنصر الرئيسي، ويكون مفيدًا في حالة أردنا إضافة هذه الصفحة تحت عنصر معين بالقائمة، إذ لن تكون هي عنصرًا رئيسيًا، وإنما عنصرًا فرعيًا يظهر عند فتح العنصر الرئيسي.
  • ًWeight: وتعني هنا الترتيب وليس الوزن، فكلما كانت القيمة أكبر، كان العنصر في المقدمة.

بمجرد ملء البيانات كما يجب، اضغط على حفظ وحدّد المربع Published. بفعل هذا، يفترض أن يقودك دروبال تلقائيًا إلى لوحة تحكم واجهة الموقع، وسيُلاحظ ظهور كلٍ من الصفحة الجديدة التي أُضيفت حالًا، وكذلك عنصر “من نحن” بالقائمة.

035_أ_إضافة_من_نحن.jpg

ضبط قائمة التنقل

ماذا لو أن العناصر بالقائمة ليست بالترتيب المطلوب؟ لا مشكلة إطلاقًا، الحل ببساطة شديدة، حوّم بمؤشر الفأرة على القائمة، ثم انقر على أيقونة القلم (أيقونة التعديل) التي ستظهر. بعد النقر تظهر قائمة تحتوي على خيار التعديل Edit menu.

035_ب_تعديل_القائمة.jpg

يقودنا هذا الفعل إلى الشاشة التالية:

036شاشة_التعديل.jpg

تستطيع في هذه الشاشة سحب أي عنصر من الأيقونة التي على اليسار وتحريكه إلى الموضع الذي ترغبه، احفظه بعد الانتهاء لترى نتيجة التعديلات.

037بعد_الترتيب.jpg

ملاحظة أخيرة: يمكن استخدام الزر Add link الموجود بالأعلى لإضافة صفحات إلى القائمة، ويمكنك أيضًا الوصول إلى هذه القائمة عن طريق Structure > Menus.

ترجمة -وبتصرّف- للمقال Beginners’ Guide to Drupal (How to Build a Website) لصاحبه Nick Schäferhoff.

اقرأ أيضًا

[ad_2]

المصدر