مرحبا بك في أكوا ويب، ودرس جديد من الدروس التي نقدمها في قسم الأكاديمية التي نطمح من خلالها إلى تعليمك بعض الأشياء المتميزة بين الحين والآخر في مختلف المجالات. تعتبر منصة إدارة المحتوى (CMS) منصة ووردبريس شهيرة بين كل المنافسين، ومطلوبة في السوق بشكل كبير، وذلك لتشعبها وإمكانية تقريبا صناعة أي صنف من مواقع الويب من خلالها.
اليوم سنساعدك في البدء في مجال تطوير قوالب الووردبريس عبر هذا المقال، وربما مقالات أخرى أيضا قادمة تشرح لك بشكل أساسي كيف يمكنك صناعة قالب أو ثيم ووردبريس باحترافية. في هذا المقال سنتحدث فقط عن كيف يمكنك تهيئة مشروع صناعة قالب ووردبريس، مشروع سنستخدمه كثيراً في الأيام القادمة أيضا لتطوير قالب ووردبريس بسيط فقط من أجل مساعدتك في البدء في هذا المجال، فهيا بنا لنبدأ.
أول الأشياء أولا، ما هو الـ Root/Sage؟
إن كنت لأول مرة تسمع بالـ Root/Sage، فهو عبارة عن Theme Starter، أو إطار يمكنك من تهيئة مشروع قالب ووردبريس بأحدث التقنيات وبشكل سهل وصحيح. ففي الغالب، إن أردت البدء في تطوير ثيم ووردبريس، كل ما تحتاجه هو بعض الملفات مثل: index.php, style.css, functions.php ...، لكن هذه الطريقة سيئة من أجل تطوير قالب ووردبريس، فلاحقا ستحتاج لمكتبات وخصائص و إطارات، كما أن المشروع لا يبدو مهيكلا بشكل صحيح وينقصه الكثير ومن الصعب إدارته وهلم وجر في كثرة المشاكل التي ستصادفها بإنشاء الملفات واحداً بالواحد.
لهذا استخدام Starter Theme يعتبر أمراً جيدا، فهو يوفر لك كل الملفات الخاصة بالقالب، وإمكانية التحكم في الموارد والمكتبات وتنصيبها فقط عبر سطر الأوامر، إلى جانب تحديث مشروعك حسب الحاجة وإضافة أي تقنيات جديدة بكل سهولة، كما يمكنك تطوير قوالب الووردبريس بأحدث التقنيات في الويب، مثل استخدام الـ SCSS مثلا بدل الـ CSS أو أي نوع آخر من الـ Preprocessors، إلى جانب استخدام الـ Blade في إدارة هيكلة الموقع، وحتى إمكانية إدراج مكتبات مختلفة في الجافاسكربت وحتى إطارات كالـ Vuejs او React.
الخطوة الأولى: تهيئة الووردبريس على الحاسوب
- تنصيب خادم محلي (Localhost) من أجل تنصيب الووردبريس عليه
- تحميل وتهيئة الووردبريس على الرابط المحلي
أول الأشياء التي تحتاج فعلها قبل كل شيئ، هو تهيئة الووردبريس على حاسوبك في خادم محلي، سيكون من الأفضل أولا تجربة كل شيئ على الخادم المحلي، وترك التجربة الفعلية على الخادم الذي ستقوم بحجزه مع الإستضافة حتى الأخيرة.
نبدأ أولا بتحميل أحد البرمجيات التي تسمح لنا بتوفير خادم محلي في الجهاز، وهي: Xampp, Wamp, Laragon, MAMP، بالنسبة لي شخصيا أستخدام Xampp لأنه أفضل وسهل في الإستخدام، نقوم بتحميله من هنا، ثم نقوم بتنصيبه على الجهاز بشكل عادي.
ثانيا، سنحتاج لتحميل الووردبريس، وهي عبارة عن مجموعة ملفات توفرها لنا شركة Wordpress.org من أجل استخدام الووردبريس في الإستضافة، نقوم بتحميلها من هنا .
من أجل تهيئة الووردبريس على الخادم، نتوجه إلى المسار التالي في برمجية XAMPP:
Local Disk C - > XAMPP -> htdocs
ثم نقوم بإنشاء ملف جديد، يمكنك تسميته بما تريد، نفضل استخدام اسم wordpress كإسم للمجلد الجديد.
ثم بعدها نقوم بنسخ محتوى ملف Wordpress الذي قمنا بتحميله سابقا، ولصقه في المجلد الجديد بإسم Wordpress، سنحصل في الأخير على النتيجة التالية:
دعونا نقوم الآن بفتح برنامج Xampp، ونقوم بتفعيل كل من خياري : Apache و MySQL بالشكل التالي:
ثم نتوجه إلى المتصفح، ونلج للرابط: localhost، قم ننقر على خيار PhpMyAdmin من أجل صناعة قاعدة بيانات خاصة بنظام الووردبريس، فور ولوجك للصفحة ستظهر لك على الشكل التالي:
ثم مباشرة خيار New لإنشاء قاعدة بيانات، ستجد الخيار في الجانب :
ستظهر لنا خيار إدخال إسم قاعدة البيانات، لك الحرية في اختيار أي إسم أيضا، ودعونا نجعلها في هذا الدرس إسم Wordpress، ونقوم بالنقر على زر " تكوين " او Genereate / Create حسب اللغة وقاعدة البيانات لديك.
حتى الآن كل شيئ جيد، حان الوقت لتنصيب نظام إدارة المحتوى ووردبريس في هذه قاعدة البيانات التي قمنا بإنشائها للتو، نقوم بذلك بالتوجه للرابط التالي: localhost/wordpress ، وهو اسم المجلد الذي قمنا بصناعته سابقا وأدرجنا داخله ملفات الووردبريس التي قمنا بتحميلها، مباشرة ستظهر لك الصفحة التالية:
نقوم باختيار اللغة التي نريد، في حالتي سأستخدم اللغة الإنجليزية، وسنقوم بالإستمرار في إدخال المعلومات المطلوبة، الخيار الثاني سيطلب منك إدخال معلومات الإتصال مع قاعدة البيانات، بما أنك تستخدم خادم داخلي (Localhost)، فالمعلومات ستكون كالتالي:
- اسم قاعدة البيانات (Database ): ضع اسم Wordpress ( التي قمنا بإنشائها سابقا في PhpMyAdmin )
- اسم المستخدم (Username): ضع Root ( وهو الإسم الإفتراضي الموجود في MySQL )
- كلمة السر (Password): اتركه فارغا
- استضافة قاعدة البيانات (DB Host): ضع Localhost
- إضافة الجدول (Table Prefix): اتركها كما هي _wp
في حالة كنت تستخدم سيرفر حقيقي، فهذه المعلومات يتم توفيرها من طرف شركة الإستضافة، ويمكنك استخدامها بشكل صحيح حينها.
نكمل التنصيب عبر ملأ المعلومات المطلوبة مثل اسم المستخدم وكلمة السر الخاصة بالولوج للوحة إدارة الووردبريس وكذا الإيميل وباقي الخصائص، ننتظر قليلا حتى يتم التنصيب ومبروك عليك تنصيب الووردبريس في استضافتك الداخلية.
ننقر على زر Login، ونقوم بالولوج بإسم الأدمن وكلمة السر التي قمنا بتسجيلها، ومبروك عليك تنصيب الووردبريس في جهازك.
للوصول إلى موقع الووردبريس، يمكنك التوجه إلى الرابط localhost/wordpress، أما للوصول إلى لوحة التحكم فيمكنك الولوج إليها عبر الرابط: localhost/wordpress/wp-admin .
الخطو الثانية: تنصيب مستلزمات Root/Sage
- تنصيب الـ Composer
- تنصيب الـ Nodejs
- تنصيب الـ Yarn
من أجل التعامل معا لـ Root/Sage، أنت بحاجة للبعض التقنيات في جهازك حتى تستطيع تشغيله بكفاءة، أولاً أنت بحاجة إلى الووردبريس نسخة 4.7 على الأقل، والـ PHP نسخة 7.1.3 على الأقل. إن اتبعت شرحنا السابق وقمت بتنصيب كل من Xampp و Wordpress من موقعهما الرسمي، فأنت تملك النسخ الأخيرة والتي تتجاوز النسخ المطلوبة في Root/Sage، فلا خوف عليك من هذه الناحية.
ثانيا، ستحتاج إلى الـ Composer، و الـ Composer هو مدير الحزم الخاص بمشاريع الـ Php، وهو الذي سيساعدنا في إدارة أي حزم متعلقة بالـ Php كما أنه مدعوم من طرف الـ Root/Sage، يمكنك تحميله وتنصيبه من هنا .
ثالثا، ستحتاج إلى الـ Nodejs بالطبع، وهو ضروري من أجل التعامل مع الـ NPM ومكتباته، قم بتحميله وتنصيبه من هنا.
وأخيراً، ستحتاج إلى الـ Yarn، وهو مدير حزم آخر أيضا، أكثر سلاسة وسهولة، يعتمد عليه الـ Root/Sage بدل الـ NPM، قم بتحميله وتنصيبه من هنا .
بتنصيب كل هذه البرمجيات في حاسوبك، نحن مستعدون الآن لإنشاء قالب ووردبريس بإستخدام الـ Root/Sage.
الخطوة الثالثة: إنشاء قالب ووردبريس بإستخدام Root/Sage
- تنفيذ أوامر إنشاء القالب
- تفعيل القالب في لوحة ووردبريس
بعد ان قمنا بتهيئة الكل، حان الوقت لإنشاء بداية قالب و ثيم ووردبريس بإستخدام Root/Sage، لفعل ذلك، نتوجه مباشرة إلى المسار التالي : C:\xampp\htdocs\wordpress\wp-content\themes ، وهو المسار الذي يتم تخزين فيه كل ثيمات الووردبريس، ستجد بعض الثيمات موجودة هناك بشكل أساسي وتابعة لمنصة الووردبريس.
بعد التوجه للمسار السابق، افتح إحدى برمجيات الـ Command Line، مثل Git إن كنت تتوفر عليها، أو CMD في وسط المسار السابق، أو أسهل الأشياء هو فتح محرر أكواد مثل VS Code او PhpStorm، ثم التوجه للمسار من خلال المحرر وفتح الكونسول الخاص بالمحرر، تختلف الطرق لكن الهدف واحد: افتح برمجية سطر أوامر في المسار السابق.
ثم نقوم بتنفيذ الأمر التالي: composer create-project roots/sage your-theme-name بحيث يكون Your-theme-name هو اسم القالب الخاص بك، سأختار اسم AquaTemplate .
بعد الإنتهاء ستلاحظ تكون مجلد AquaTemplate ( او الإسم الذي اخترته لقالبك )، نقوم بالولوج إلى وسط المجلد ( يمكنك تنفيذ أمر cd AquaTemplate مباشرة من سطر الأوامر )، ثم ننفذ أمر: Yarn
بعد الإنتهاء ستلاحظ تكون مجلدك من العديد من الملفات ( لا تقلق فالأمر ليس بذلك التعقيد )، وقبل أن نستكشف ما في داخل الملفات، يمكنك الآن تفعيل القالب من خلال لوحة التحكم ووردبريس.
قم بالتوجه إلى متصفحك الخاص ، ثم إلى الرابط http://localhost/wordpress/wp-admin/ ثم في لوحة التحكم الخاصة بالووردبريس، ثم إلى Appearance وبعدها Themes:
ستجد أنه تم إضافة قالب جديد بإسم Sage Starter Theme، قم بتفعيله كثيم رئيسي في موقع الووردبريس الخاص بك:
بعد تفعيل القالب، يمكنك التوجه إلى الموقع الداخلي عبر http://localhost/wordpress/ ستجد أن القالب قد تم تفعيله، وحصلت على النتيجة التالية:
وأنت جاهز الآن لبدء تصميم قالبك الخاص على ووردبريس على هواك وبالشكل الذي تريده، وبتقنيات رفيعة المستوى وهيكلة احترافية قابلة للتعديل والتجديد والمزيد، ناهيك على الحماية المتميزة التي يوفرها لك هذا الـ Theme Starter.
استكشاف ملفات مجلد القالب
- استكشاف الملفات في المجلد
- كيفية بدء العمل على القالب
- تعطيل الـ Eslint
إن قمت بفتح المجلد الخاص بالقالب في محرر أكواد مدعوم، فستحصل على النتيجة التالية:
جل عملك سيكون على مجلد Resources، فهو يتضمن تقريبا كل ما تحتاجه للتعديل على القالب، من واجهة وهيكلة وستايل وكل شيئ، باقي المجلدات مهمة أيضا، منها ما يقوم بإدارة المكتبات والإطارات وكل ما هو مستخدم في المشروع. لكن بشكل عام، كل ما تحتاج التعديل عليه ستجده في ملف Resources.
العمل على القالب مختلف قليلا، فالأمر ليس تعديل على ملف ثم النقر على Save وإعادة تحميل القالب، بل عليك إثارة عمليات التخزين والتعميل و الـ Processing بشكل عام.
قبل كل شيئ، علينا أن نقوم بتعديل رابط التطوير الذي سيسمح لنا من التعديل على القالب بشكل حي، في وسط مجلد القالب ( كل عملنا الآن سيكون وسط هذا المجلد الموجود في صورة وفي وسط المحرر أيضا) توج إلى الملف: resources/config.json ، ثم ستجد إرشادات تهيئة السيرفر، قم بتغييرها على الشكل التالي:
بما يفيدنا هذا؟ هذا ما ستكتشفه في الخطوة التالية، قم بفتح سطر الأوامر مجددا، بما أنني استخدام Visual Studio Code سأقوم بفتح الـ Terminal الموجود مسبقا في البرنامج، ثم قم بتطبيق أمر: Yarn start
هذا الأمر هو الأساسي، في كل مرة تريد العمل على القالب، تقوم بفتح المشروع وتطبيق الأمر السابق، الأمر سيوفر لك رابط سيمكنك من خلاله تطوير القالب بشكل حي أي في كل مرة تقوم بحفظ التعديلات ستجد أن القالب أضافها دون تحديث للصفحة أو أي شيئ (Real time).
أما أخيراً، فستجد بعض المشاكل لاحقا في التعامل مع الـ Eslint، ما هي الـ Eslint؟ هو منظم للأكواد بحيث تتبع نمطاً محدد، فأثناء التطوير إن كتبت على سبيل المثال: color : red ككود CSS، سيخبرك الـ Eslint أنه خاطئ ولن يتم حفظه وسيفشل تحميل القالب و كل شيئ، وذلك لأن الأصح هو color: red ( النقطيتين ملتقصتين مع الـ Attribute ) ( إنه الـ Eslint اللعين ).
من أجل تعطيله، توجه للملف : resources/assets/build/webpack.config.js ، ستجد الكثيرمن أكواد الـ Eslint التي يجب عليك حذفها، لنسهل عليك الأمر، قم بالولوج لهذا الملف مباشرة ثم قم بنسخه وتعويضه في مكان الـ Webpack.config.js، وسيتم تعطيل الـ Eslint وسيمكنك التطوير أخيراً بكل راحة.
وختاماً
هذه مجرد البداية صديقي، ما هذا الشرح إلى تهيئة لكيفية تطوير قوالب وثيمات الووردبريس مثل المحترفين وبتقنيات عالية، إن أعجبك المقال اترك لنا تعليقاً بسيطا مشجعا، وسنقوم في المقالات القادمة بتطوير قالب ووردبريس بالكامل بإستخدام هذا الـ Starter وشرح كل شيئ يتعلق به.