كيف تحوِّل قالب HTML إلى قالب ووردبريس متجاوب وسريع الاستجابة: الاستعداد للتحويل ونسخ الملفات وتنشيط القالب

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

هذا هو السبب الأكثر أهمية لضرورة تعلمك كيفية تحويل قوالب html و css الثابتة إلى قوالب WordPress التفاعلية.

الموارد المطلوبة لإكمال هذه الدورة:

قالب NeoBlog المصنوع باستخدام html و CSS.

المعرفة الأساسية بكود WordPress.

المعرف الوسيط بين PHP و jQuery.

ما سوف نحققه:

قوالب WordPress هي كيفية تغيير مظهر موقع الويب الخاص بك. يمكن أن يوفر لك النموذج واجهة رسومية من خلال ملفاته ، حتى يتمكن من تغيير المظهر العام لموقع الويب بشكل كبير.

عند إنشاء قالب WordPress ، يجب الانتباه إلى النقاط التالية:

- انتبه إلى اسم ملف القالب الذي تم إنشاؤه. بشكل افتراضي ، سيتعرف WordPress على أسماء ملفات القالب الافتراضية ، مثل single.php و page.php ، لذلك أقترح عليك التحقق من اسم سمة WordPress الافتراضية قبل البدء في تسمية ملفاتك الخاصة.

- يرجى مراجعة دليل WordPress للتعرف على بعض الوظائف أو العلامات أو بعض أكواد PHP التي يمكن استخدامها في ملف القالب ، والتي ستسمح لك دائمًا بالحصول على الوظيفة التي تريدها لتنفيذ القالب بشكل صحيح.

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

- تأكد من كتابة برنامج جيد التنظيم لتجنب أخطاء PHP والتحقق من صحة HTML.

- استخدم CSS خالص مصدق عليه.

- يرجى اتباع إرشادات التصميم الخاصة بتصميم وتسويق الموقع.

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

لماذا تدون الملاحظات حول PHP:

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

تمت كتابة WordPress بلغة PHP ، ومثلها ، تم اعتماد نصوص WordPress مفتوحة المصدر بواسطة البرنامج مفتوح المصدر.

بعض أجزاء WordPress المكتوبة بلغة PHP عامية ، لذلك يجب أن تكون لديك معرفة أساسية بلغة PHP.

على أي حال ، لست بحاجة إلى أن تكون مطور موقع PHP لإنشاء سمة WordPress ، كل ما تحتاجه هو أساس متين في HTML و CSS و JavaScript ومعرفة أساسية بـ PHP.

خطة عمل:

أولاً ، سوف نفهم الملفات المطلوبة لبناء قالب WordPress متكامل. ستبدأ الخطوة التالية في كتابة التعليمات البرمجية في كل ملف قالب.

على طول الطريق ، قد لا تبدو لك بعض الميزات واضحة. في هذه الحالة ، سيصبح دليل WordPress أفضل صديق لك.

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

لنبدأ

لبدء تحويل NeoBlog إلى WordPress ، دعنا أولاً ننشئ دليلًا في دليل المحتوى / السمات. يمكنك العثور عليه في الدليل حيث تم تثبيت WordPress.

لاحظ أن اسم المجلد يجب أن يكون هو نفسه اسم القالب الذي سيتم إنشاؤه. في هذه الدورة ، قمت بتسمية النموذج NeoBlog.

الجزء 1: 1. ملف قالب

بالمقارنة مع قوالب HTML و CSS الثابتة ، تحتوي قوالب WordPress على ملفات متعددة.

هذه هي الملفات التي تحتوي على الكود الذي يجعل سمة WordPress تعمل. للقيام بذلك ، قم بإنشاء الملفات التالية في مجلد قالب NeoBlog:

- مجلد CSS: سيحتوي هذا المجلد على جميع ملفات التخطيط ونسخها من مجلد قالب HTML و CSS NeoBlog.

- مجلد الخطوط: سيحتوي هذا المجلد على جميع الخطوط الخارجية المستخدمة في التصميم. يمكنك أيضًا نسخه من مجلد HTML & CSS NeoBlog Template.

- مجلد الصور: سيحتوي هذا المجلد على جميع الصور المستخدمة في التصميم ، مثل الشعارات والصور الأخرى. يمكنك أيضًا نسخه من مجلد HTML & CSS NeoBlog Template.

- دليل JavaScript: يحتوي على جميع ملفات JavaScript المستخدمة في القالب. انسخ المجلد أيضًا من مجلد HTML & CSS NeoBlog Template.

- header.php: سيحتوي هذا الملف على رمز رأس القالب.

- footer.php: سيحتوي هذا الملف على الكود الموجود أسفل القالب.

- index.php: هذا هو الملف الرئيسي للقالب ، وسيحتوي على كود المنطقة الرئيسي للقالب ويحدد مصدر الملفات الأخرى.

- function.php: يتصرف هذا الملف مثل ملحق ووردبريس ، لأنه يضيف وظائف وسمات إلى القالب.

- single.php: يحتوي على تخطيط صفحة عرض المقالة.

- page.php: سيحتوي هذا على تخطيط صفحة WordPress.

- page-about.php: هذا الملف هو قالب مقال خاص مدمج في WordPress ، وعادة ما يستخدم لإنشاء صفحة أو مجموعة من الصفحات تُعرض بشكل مختلف عن تخطيط الصفحة في القالب. في حالتنا ، سننشئ نموذجًا خاصًا لصفحة "حول الموقع".

- page-contact.php: نموذج آخر مضمن في WordPress. سيتم استخدام هذا النموذج لعرض نموذج "اتصل بنا" للصفحة المحددة.

content-search.php: يحتوي هذا الملف على حلقة تعرض نتائج البحث.

search.php: هذا الملف مسئول عن عرض صفحة نتائج البحث.

searchform.php: سيحتوي هذا الملف على تنسيق نموذج البحث.

comments.php: سيحتوي هذا الملف على الكود المسؤول عن عرض التعليقات.

sidebar.php: سيحتوي هذا الملف على الشريط الجانبي.

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

style.css: سيحتوي هذا الملف على تخطيط ومعلومات قالب NeoBlog.

لقطة الشاشة: صورة بتنسيق png توضح تصميم القالب أو العنوان.

في هذه الدورة ، سنضيف رمزًا إلى هذه الملفات ، بما في ذلك القوائم والتعليقات والحلقات والأدوات.

الخطوة 1.1 - انسخ الملفات الضرورية إلى سمة NeoBlog WordPress

أولاً ، انسخ مجلدات css والخطوط والصور ومجلدات js من دليل HTML و CSS NeoBlog ، ثم الصقها في قالب NeoBlog WordPress.

الخطوة 2.1 - قم بتسمية قالب WordPress الخاص بك باستخدام style.css

dsense -->

قبل معالجة ملف القالب ، قمنا أولاً بتضمين تنسيق قالب HTML وملف CSS NeoBlog في ملف قالب NeoBlog for WordPress الخاص بنا. أولاً ، قم بإنشاء ملف style.css ، ثم الصق الكود التالي فيه.

/* Theme Name: NeoBlog Theme URI: https://1stwebdesigner.com/ Author: Sam Norton Author URI: https://1stwebdesigner.com/ Description: A Simple Blog Theme for 1stwebdesigner.com Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ @import url("css/reset.css"); @import url("css/bootstrap.css"); @import url("css/style.css");

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

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

الخطوة 3.1- إنشاء صورة مصغرة للقالب

الآن بعد أن حددنا اسمًا للقالب من خلال style.css ، دعنا نضيف صورة تعريفية إلى القالب. أولاً ، قم بإنشاء صورة بحجم 880 × 660 بكسل في Photoshop ، ثم قم بإضافة العنوان والمقدمة واسم مؤلف النموذج.

في الواقع ، سيتم عرض الصورة في لوحة تحكم الإدارة بحجم 387 × 290 بكسل ، لكننا أنشأناها عن قصد لتكون ضعف الحجم من أجل عرضها بشكل أكثر وضوحًا على شاشة HiDPI عالية الدقة.

بعد ذلك ، احفظ الصورة بامتداد png إلى الدليل الرئيسي لقالب NeoBlog في WordPress.

الخطوة 4.1-تنشيط القالب

بعد إضافة الصورة ، دعنا ننشط القالب.

ولكن قبل تنشيط القالب ، للتحقق مما إذا كان صالحًا ، دعنا ننشئ ملف index.php فارغًا في الدليل الرئيسي لقالب NeoBlog في WordPress (لا تقلق ، سنضيف الكود المناسب لهذه الصفحة لاحقًا).

الآن ، قم بتنشيط النموذج من لوحة تحكم الإدارة عن طريق تحديد "المظهر"> "القالب" ثم النقر فوق الزر "تنشيط".

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

أهم الأسئلة التي قد تواجهها في هذه الدورة

عند تجربة هذه الدورة ، قد تواجه مشكلة دمج كود PHP مع كود HTML.

يجب عليك دائمًا التحقق من الكود مرتين ، وقد تنسى أحيانًا إغلاق حلقة "while" أو إغلاق شرط "if". على سبيل المثال ، في الكود أدناه ، يوجد خطأ لأننا نسينا إيقاف تشغيل شرط "if".

<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } end while; } // end if supposed to be here ?>

لكننا أصلحناه هنا:

<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } end while; } // end if supposed to be here ?>

يجب أيضًا الانتباه إلى استخدام علامة الإغلاق الموجودة في نهاية كود PHP لإغلاقها. إذا نسيت هذا ، فقد لا تعمل التعليمات البرمجية الخاصة بك عندما تتداخل مع كود HTML.

إذا كنت تريد تعلم إضافة ميزات أخرى إلى موقع الويب الخاص بك ، فيجب عليك الرجوع إلى دليل WordPress.

ما هي حدود هذه السلسلة؟

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

ملخص الجزء الأول

محبوب! لقد أكملنا الجزء الأول من هذه الدورة. لقد تعلمت كيفية تكوين ملفات القوالب ، وما يجب تجنبه ، وما يجب الانتباه إليه ، وخطوات إنشاء قالب WordPress.

يمكن الآن البدء في تحويل ملف HTML إلى مجموعة من الملفات التي ستشكل سمة WordPress. في الدرس التالي ، سنقوم بمعالجة هذه الملفات وإضافة بعض الميزات إليها لجعل نموذجنا يدعم ميزات معينة.
المرجع :من هنا