الدرس الخامس - القوالب في Wordpress ومكوناتها القسم الثاني

مارأيكم بالشرح؟

  • جيد

    الأصوات: 0 0.0%
  • متوسط

    الأصوات: 0 0.0%
  • سيء

    الأصوات: 0 0.0%

  • مجموع المصوتين
    0

hosam.kyali

:: مسؤول :: , :: وملقى دورة احتراف الووردبريس ::
Coder/Designer
24 يناير 2013
33
4
0
41
سوريا - مصر
السلام عليكم ورحمة الله وبركاته

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

الآن ما هو المعتمد من قبل Wordpress للإضافة كملفات أساسية مع السابقة التي شرحناها في درسنا السابق:

1-
كود:
404.php
2-
كود:
Archive.php
3-
كود:
Page.php
4-
كود:
Search.php
5-
كود:
Single.php
6-
كود:
Header.php
7-
كود:
Footer.php
8-
كود:
Sidebar.php
طبعاً

مع تكرار ما سبق من الملفات للتذكر فقط بالنسبة لغير المعتمد والمستعمل عامة:

1-
كود:
attachment.php
2-
كود:
author.php
3-
كود:
category.php
4-
كود:
date.php
5-
كود:
editor-style.css
6-
كود:
image.php
7-
كود:
tag.php

الآن لن ندخل في كل هذه التفاصيل لكن ذكرتها لكي نعلم نوع الملفات التي يمكن أن نواجهها أثناء العمل مع أي قالب عامة سواء موسع أو افتراضي أو مخصص. لكن للتنويه يمكن إدراج أيضا ملفات أضافية حسب خصوصية البرمجة لمبرمج القالب. لكن مع كل ذلك شاهدوا الصورتين التاليتين لمزيد من التفاصيل عن طريقة عمل هذه الملفات حسب أرشيف موقع مطوروا wordpress الرئيسي:

Template_Hierarchy
attachment.php


الصورة السابقة توضح طريقة عمل القالب في النسخ الحالية

النسخ الاقدم
attachment.php


الصورة السابقة توضح طريقة عمل القالب في النسخ السابقة

على العموم ما هو القالب الذي سوف نقوم بالتعديل عليه كبداية؟
القالب هو twentyten المعتمد من Wordpress حيث سنعمل على إجراء بعض التعديلات البسيطة مع الأمثلة لكل تعديل ولماذا قمنا به لكي نأخذ فقط طريقة العمل بشكل عام بعدها في الجزء الثاني من الدورة سنتابع العمل ويمكن عندها تحميل القالب كاملاً بعد التعديلات لكل من يحب التطبيق العملي لدروسنا ضمن مدونته أو استعماله في تعديل لاحق لتوليد قالب مخصص حسب رغبة المستخدمين لهذا القالب.

قبل أن نبدأ العمل لنعاين الفقرة ضمن لوحة تحكم الإدارة الخاصة بالقوالب ونتعرف عليها بشكل أوسع:

لوحة تحكم قوالب 1
attachment.php


نشاهد حالياً القوالب المتوفرة لدينا وإدارة كل قالب وتخصيصه ضمن لوحة التحكم الخاصة بالإدارة لدينا بالإضافة لتنصيب القوالب.
حالياً لن أشرح تنصيب القوالب لأن الموضوع موجود سابقاً بالمنتدى لكن سأرفق الرابط الخاص به هنا ونعقب عليه قليلاً لمزيد من التفاصيل.
https://support-ar.net/forums/showthread.php?t=133681

التعقيب:
حول تركيب القالب ضمن الطرق السابقة لنعتمد طريقة رفع الملفات دون ضغط لكي نستطيع فيما بعد العمل على القالب لدينا وتعديله ضمن لوحة التحكم في المسار الذي قمنا باختياره حيث نسمي القالب كما نشاء وضمن الدرس سأعتمد الاسم الخاص Hosam-example حيث سيكون قالبنا الذي سنعدل عليه لاحقاً مع الملاحظة للأمور التالية:

1- القالب يمكن أن يكون له أكثر من نسخة لدينا، كل نسخة معدلة حسب الرغبة الخاصة لدينا حيث لو كان لدينا قالب twentyten في مجلده الافتراضي يمكننا نسخ المحتوى الخاص بالمجلد وإعادة تسميته فيصبح لدينا نسخة إضافة جاهزة للعمل دون أن يعتبر القالب نفسه عرضة للتعديل لأن Wordpress سيعتبر النسخة بغض النظر عن أنها موجودة سابقاً هي نسخة جديدة وقالب جديد ولا يتدخل في المحتوى أو اسم القالب نفسه.
2- يجب أن نعتمد النظام التالي للوصول لكل الملفات لدينا حيث ستكون ضرورة لحماية القالب لدينا كملفات ولعدم فتح ثغرة للتسلل للمدونة لدينا عن طريق القالب:
حيث الصلاحيات المعتمدة لكل الملفات تكون عادة 664 للملفات و 750 للمجلدات لمزيد من التفاصيل الخاصة يرجى زيارة الرابط المقدم من wordpress:
http://codex.wordpress.org/Changing_File_Permissions


الآن ما العناصر التي تعرفنا عليها سابقاً في الصورة التي تفسر شكل القالب في لوحة الإدارة ضمن المدونة لدينا؟
تشمل الصورة:
1- المظهر وكل ما يتحكم في المظهر العام الخاص بقالب المدونة لدينا
2- بعض إجراءات التعديل الخاصة بكل قالب حيث يتم التعديل بشكل أساسي فقط (مثل خلفية المدونة القوائم الجانبية ...)
3- تفعيل قالب مراد استخدامه ضمن المدونة دون استخدام باقي القوالب الموجودة
4- عرض جميع القوالب التي تم تنصيبها لدينا على المدونة
5- خيار تنصيب جديد لتنصيب قالب جديد كما في الدرس الذي وضع رابطه في أول الموضوع حول تنصيب القوالب.
6- يوجد خيار تخصيص يأخذنا على مدير التحكم بالقالب البسيط الذي سأعرض استخدامه ضمن هذا الدرس لكن لن نستمر في العمل عليه لضعف التفاصيل التي يمكن التعديل عليها ضمن القالب.


بعد هذه المقدمة البسيطة نسبياً لنعد لطريقة تعديل القالب لدينا:
سنقوم بعدة خطوات من أهمها العمل المباشر على أجزاء القالب حيث سنعدل 3 أمور عامة ضمن القالب لكي يتناسب مع مدونتنا كما نريد:
أولاً: نقوم بعمل مستند صورة لكي نحصل على تصور عام على كيفية ظهور شكل القالب الجديد لدينا ثم نتخذ الأجراء المناسب للتعديل على القالب حتى يتناسب مع الصورة لدينا طبعاً هذه الخطوة صعبة في أول الأمر لكن ستصبح سهلة جداً بعد الاعتياد عليها بعد فترة من العمل. حالياً لن نعمل هذا الشكل الخاص بالصورة بشكل معقد بل مبسط حتى نحصل على الفكرة الأساسية وراء الصورة وكيفية الحصول على المطلوب منها بدقة.
ثانياً: نحفظ المخطط التالي لدينا على الجهاز الذي نعمل عليه التعديلات الخاصة بالقالب حيث يهمنا فهم آلية عمل Wordpress على قراءة الملفات وتطبيق محتواه لنلاحظ شكل الصورة وفائدتها سنشرحها فيما بعد أثناء عملنا على تعديل القالب.

آلية عمل الملفات ضمن القالب (صورة النسخ القديمة)

attachment.php



آلية عمل الملفات ضمن القالب (صورة النسخة الحالية)

attachment.php


ثالثاً:
محاولة تطبيق التغيرات بدقة وبحسب النظم المتعارف عليها في التعامل مع كل من التالي (PHP – CSS – Javascript) ولا نحاول التعديل إلا بما يتوافق مع ما ذكرته سابقاً حتى لا نقع في جدل لغة البرمجة أو أخطاء تؤدي لفشل كامل للقالب لدينا.

الآن لنبدأ لكن مع التحقق من وجود كافة الأدوات اللازمة التالية:
1- محرر نصوص متقدم أو برنامج يتوافق مع فهم لغة PHP مثل Notepad ++
2- محرر صور يمكن العمل على الرسام مبدئيا لكن أنصح باستخدام برامج اقوى في حال المراد الحصول على صور بدقة عالية الجودة مثل Photoshop.
3- فهم آلية العمل على HTML وذلك لضمان فهم كيفية العمل مع القالب نفسه كتوضع الحاويات (الكتل Div) أو عمل جدول حسب المطلوب. وذلك لضمان عمل القالب بنفس الشكل الديناميكي مع كل المستعرضات دون مشاكل عدم توافق. يمكن استخدام الرابط التالي وحذف كود PHP أثناء التحقق من الملف المراد الحصول به على توافق مع كل المستعرضات
(http://validator.w3.org/nu/( للتحقق من HTML5 وللتحقق من CSS (http://validator.w3.org/)
4- العمل دوماً مع مبدأ النسخة الاحتياطية آخر مكان كان يعمل فيه القالب قبل عمل التعديلات المعقدة حتى لا نضطر للعودة لبداية العمل وتكرار التغيرات إن لم ننسى كيفية خطة العمل بسبب خطأ حاصل في جزء من العملية ولنستوعب ما نقوم به بشكل كامل دون الحاجة لخبرة عالية لملاحظة المشاكل.

العمل الأول الذي سنقوم به بعد الخطوات السابقة هو تغيير صورة الخلفية المستعملة للقالب:

الطريقة الأولى ( باستعمال تخصيص وعناصر لوحة الإدارة)

لنلاحظ الصورة التالية

لوحة التحكم 1
attachment.php


سنجد ضمن لوحة التحكم الخاصة بالقوالب عدة خيارات لنقم بداية بالتعرف على الموضوع مع الأمثلة حيث نتابع الخطوات السابقة مع معلومات التعديل الحالية حيث نجد أنفسنا أمام التعديل البدائي قبل الغوص بالتعديلات التي تعتبر أكثر تخصيصاً:

1- تخصيص: لنشاهد الصورة

لوحة التخصيص
attachment.php


ما هي هذه اللوحة تظهر لدينا بعد الضغط على تخصيص للقالب المراد التعديل عليه حيث سنجد الخيارات التالية:
- اسم الموقع وسطر الوصف: الجزء الخاص بوصف الموقع حيث يكون في المنطقة التي في أعلى الصفحة الخاصة بالمدونة عندنا
- الألوان: هنا يمكننا تعديل لون الخلفية حسب اللون المناسب (طبعاً غير مفيد غالباً بدون تخصيص)
- صورة الترويسة: هي الصورة التي تستعمل تحت الوصف واسم الموقع في العنوان العلوي للصفحة يمكننا من هنا تغيير هذه الصورة لكن ينصح باستخدام صورة تحمل نفس ابعاد الصورة السابقة لكن المحتوى لنا حرية اختياره, على العموم مفيد للتغير السريع فقط التعديل الكامل يحتاج للعمل مع الملف header.php
- صورة الخلفية هي اختيار إضافي يمكن العمل عليه بدلاً من الألوان التي شرحناها سابقاً وهنا الفائدة تعديل الخلفية كاملة لكن أيضاً لا انصح به إلا في حال اعتماد دقة عالية جداً بسبب توسع المدونة وصغرها حسب دقة الشاشة في مستعرض الزائر. كمثال لدينا صورة 1300×768 يمكن أن تظهر على الشاشات 15-16-17 بوضوح لكن الشاشات يجب أن تكون تعمل بنظام wide screen وإلا ستظهر مشكلة ضغط الصورة عرضياً ونقصها طولياً وهكذا دواليك مع باقي الشاشات الأكبر في الدقة حيث نفس المشكلة ستظهر مع قص العرض والارتفاع.
- التنقل: يعتبر الخيار الأكثر فائدة ضمن تخصيص حيث يمكننا لدى عمل قائمة تحديدها من هنا على أنها قائمة الوصول الافتراضية لدينا ويمكن للزائر عندها أن يصل ضمن المسار الذي حددناه ضمن هذه القائمة لو كانت رابط أو صفحة أو حتى رابط خارجي ويتيح لنا التنقل بعمل قائمة واحدة افتراضية تظهر تحت الترويسة مباشرة.
- محتوى الرئيسية: حيث يمكننا تخصيص عرض الصفحة الرئيسية لدى دخول الزائر للموقع يمكن عرض صفحة خاصة لدينا أو آخر تدوين أو موضوع حالياً الأفضل اختيار الخيار الافتراضي حيث لم ننشى صفحات مخصصة بعد. لكن للتجربة يمكنا ضغط صفحة ثابتة ثم اختيار الصفحة الرئيسية والصفحة التي سيتم عرضها لدى استعراض التدوينات على المدونة لدينا ثم تطبيق المختار ثم الذهاب وتحديث المدونة لنشاهد التعديلات الحاصلة.

2- لوحة مربعات جانبية (side bar):
هذه المربعات هي عبارة عن عناصر يمكن وضعها جانبياً ضمن الموقع أو ضمن مكان مخصص حيث كل مربع يحتوي على محتوى مخصص لدينا يمكننا نشره ضمن منطقة معينة ضمن الصفحة وليست محددة كما هو واضح حيث نجد المربعات التي سيسمح بها قالبنا بإضافتها لكن كيف يمكننا تحديد مكان كل مربع؟

الجواب بسيط اقرأ مكان كل مربع من خلال عنوانه مثال (المربع الجانبي في الفوتر) لكن يقول البعض بعضها غير واضح مثال (المربع الجانبي الثانوي) أقول الموضوع بسيط جداً اختر أي من المربعات الجانبية المتوفرة واسحبه لهذا المربع ثم أحفظ التغيرات ستلاحظ مكان المربع الجانبي الثانوي وأيضاً ضمن أي مربع تختارونه لمزيد من التجارب على العموم سأعطي مثال في الصورة ونشرح ماذا فعلنا بالضبط ضمن هذه الخطوات:

لوحة تحكم مربعات جانبية

attachment.php


بعدها نلاحظ التعديلات ضمن المربع الجانبي قبل ضغط حفظ ثم بعد الضغط ستظهر اسم القائمة الجانبية (المربع الجانبي) جانب كلمة الأرشيف لنتأكد أن التعديلات تمت نذهب الآن لصفحة المدونة ونلاحظ التغييرات:

مربعات أرشيف
attachment.php


3-
قوائم (كما في درس القوائم)
تعرفنا على درس القوائم في الدرس الثالث لذا لن نعيد الشرح هنا أنما للتنويه عن استعمال القوائم نلاحظ أننا نستعملها ضمن القالب المختار الحالي أي ستكون لها ميزات تتبع لسياسة ميزات القالب وعند اختيار قالب مخصص سنلاحظ سلوك مختلف يعتمد على طريقة تخصيص القالب حيث يمكن للمبرمج اعتماد سياسة قوائم مختلفة تماماً عما نشاهده لدى العمل على هذه القوائم لنشاهد الصورة على قالب فيه هذه الميزة (لكن دون الدخول في تفاصيلها فقط للمعاينة للمثال):


قوائم مخصصة

attachment.php


نلاحظ في الصورة وجود عناصر تابعة للقالب وليست ضمن الطريقة الاعتيادية لظهور القوائم لدينا وهنا نستعمل هذه القوائم مع ميزات القالب المثبت (خصيصاً لهذا القالب) وليست عامة لذا لن ندخل في شرحها حيث يكون القالب عامة مشروح ضمن موقع القالب نفسه مع الأمثلة حول كل تخصيص لهذه القوائم.

4- ترويسة(ملف الرأس header.php):
نلاحظ هنا الاختلاف بين تخصيص وبين الإعدادات لهذه الترويسة هنا حيث نجد المزيد من الاختيارات الأكثر قوة وتخصيص من تخصيص نفسه حيث يمكننا الاختيار من عدة اختيارات محددة ضمن برمجة القالب ويمكننا أيضا تعديل هذه الصور كما ذكرت سابقاً بتغير الصورة لكن مع اعتماد نفس الأبعاد وهنا لنأخذ مثال بسيط عن كيفية التعديل مع استبدال الصورة بشكل مخصص. نجد أن wordpress يقترح علينا الأبعاد التي يفضل استعمالها لاحظوا الصورة:


ترويسة ابعاد

attachment.php


كما في الصورة نشاهد الأبعاد التي هي عرض 940 بكسل وارتفاع 198 وهنا تجدر الملاحظة أننا لو خصصنا القالب يمكننا تحديد أبعاد أخرى لكن أيضاً لن ادخل في تفاصيلها هنا لكن إنشاء الله في الدورة التالية حيث سندخل في كل التفاصيل الأكثر تعقيداً وقتها لأننا نكون قد تدربنا سابقاً على هذه الأمور ولن نجد صعوبة في فهم التعديل في وقتها.
على العموم سأقوم برفع ترويسة جديدة من جهازي يمكنكم تحميلها من المرفقات (اسم الصورة t.png) لنشاهد كيفية تعديل الترويسة بشكل غير مدرج ضمن القالب:


تعديل ترويسة رفع

attachment.php


بعد اختيار الملف المراد رفعه نضغط على زر رفع ونلاحظ ظهور الصورة نقوم بحفظ التغيرات دون قص حيث أننا نعتمد نفس الأبعاد المحددة لكن يمكن استخدام ميزة القص بواسطة تحديد المربع المراد قصه من الصورة في حال كانت أكبر من الحجم المطلوب وتطبيق القص على الجزء المطلوب بكلا الحالتين يمكن حفظ التعديلات ونشاهد بعدها ظهور الرسالة:


تعديل ترويسة رفع1

attachment.php


بعدها نقوم بحفظ التعديلات ونعمل تحديث لصفحة المدونة الرئيسية فنشاهد الشكل:


بعد تعديل الترويسة

attachment.php


5-
تعديل الخلفية:
الأمر بسيط إما أن نختار لون ثابت للخلفية أو نختار صورة في كلا الحالتين نضغط حفظ عند اكتمال التغيرات لكن لا انصح بالصورة إلا في حال التأكد من أنها تعتمد على أبعاد كبيرة نسبياً مثال 2400×2400
لسبب بسيط شرحناه سابقاً أن الصورة لا يجب أن تصغر وتكبر على شاشات أصغر أو أكبر بالدقة وإنما تظهر بشكل واضح على جميع الشاشات.
6- المحرر:
وهو أقوى أداة للتعديل المباشر على ملفات القالب دون الخوف من حدوث خطأ في الترميز أثناء التعديل حيث يمكننا العمل به بكل أمان وجودة لكن سوف نلاحظ صعوبة التعامل مع الأسطر بسبب استعمال لون وحيد لكل النص بالإضافة عند ضغط تحديث الملف لا يمكن الرجوع للنسخة السابقة وهذا قد يؤدي لخسارة كبيرة عند عمل كثير من التعديلات ضمن هذه الملفات دون التحقق كل مرة من التعديل ولدى اكتشاف الخطأ يصعب تذكر ما هو السطر الذي تم التعديل عليه أو حتى مراجعة مكان الخطأ وعمل نسخة احتياطية لهذا الملف يعتبر من الصعوبة بحيث عدم إمكانية عمل هذه الوظيفة لكن مع كل هذا يبقى هذا المحرر من الأدوات القوية نسبياً والآمنة لدى التعديل المباشر البسيط لأحد الأسطر ضمن ملفات القالب لا أكثر. بالإضافة لما سبق عدم جدوى العثور على سطر بشكل مباشر أي لا نرى رقم السطر عند التعديل عليه مما يزيد الموضوع تعقيداً.
لكن نصيحتي استعملوا الأدوات التي ذكرتها في السابق في بداية الدرس أثناء التعديل واتركوا نسخة عن أي ملف تقومون بالتعديل عليه حتى يمكنكم استعادة القالب دون العودة لنقطة الصفر بعد التعديل الخاطئ

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

المرفقات

  • t.png
    t.png
    131.1 KB · المشاهدات: 329
  • المربعات الجانبية.jpg
    المربعات الجانبية.jpg
    142.9 KB · المشاهدات: 353
  • النسخ الاقدم.png
    النسخ الاقدم.png
    92.9 KB · المشاهدات: 1,025
  • بعد تعديل الترويسة.jpg
    بعد تعديل الترويسة.jpg
    111 KB · المشاهدات: 928
  • تعديل الترويسة رفع.jpg
    تعديل الترويسة رفع.jpg
    119.6 KB · المشاهدات: 1,052
  • تعديل الترويسة رفع1.jpg
    تعديل الترويسة رفع1.jpg
    132.1 KB · المشاهدات: 1,053
  • قوائم مخصصة.jpg
    قوائم مخصصة.jpg
    94.6 KB · المشاهدات: 940
  • لوحة التحكم1.jpg
    لوحة التحكم1.jpg
    153.5 KB · المشاهدات: 1,066
  • لوحة تحكم مربعات جانبية.jpg
    لوحة تحكم مربعات جانبية.jpg
    133 KB · المشاهدات: 956
  • لوحة تخصيص.jpg
    لوحة تخصيص.jpg
    140.8 KB · المشاهدات: 922
  • مربعات أرشيف.jpg
    مربعات أرشيف.jpg
    94.1 KB · المشاهدات: 1,006
  • Template_Hierarchy.png
    Template_Hierarchy.png
    178.4 KB · المشاهدات: 1,393
التعديل الأخير:

c0der

:: Coder & Designer ::
طاقم الإدارة
Coder/Designer
17 فبراير 2009
68
1
8
جزاك الله كل خير

وجاري متابعة الدرس فى اوقات الفراغ نظرا لضيق الوقت
 

swaedpal

عضو جديد
السلام عليكم

شرح تمام وانا متابع والله بس شوي مشغول


وبطبق كل شي والله


تم تطبيق ماشرحت في هذا الدرس




ويعطيك العافية على الابداع المتواصل