قم بإنشاء سمة WordPress الخاصة بك

نشرت: 2021-12-21

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

اليوم ، سنلقي نظرة على كيفية إنشاء قالب WordPress الخاص بك. هيا بنا نذهب!

لماذا تبني ثيم WordPress الخاص بك؟

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

المتطلبات قبل إنشاء موضوع

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

مطلوب أيضًا معرفة عملية وفهم CSS و PHP و HTML.

قم بإنشاء السمة

سنقوم بتسمية موضوعنا "موضوعي الأول". تتمثل الخطوة الأولى في إنشاء الملفات الضرورية للسمة لتكون مرئية في منطقة الإدارة. للقيام بذلك سننشئ ملف style.css و index.php.

نقوم بإنشاء مجلد فرعي لموضوعنا ، ضمن wp-content / theme / folder الذي نطلق عليه اسم "my-first-theme" ونضيف هذين الملفين إلى هذا المجلد.

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

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

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

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

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

إذا كنت تريد عرض صورة شعار ، فأدخل ملف screenshot.png في نفس المساحة التي توجد بها ملفات style.css و index.php.

الآن إذا قمت بتنشيط المظهر الخاص بك في شاشة مسؤول السمات ، فسترى شيئًا مثل هذا:

وإذا قمت بالنقر فوق "تفاصيل الموضوع" ، يجب أن ترى هذا:

ملفات السمات

حان الوقت الآن لكتابة بعض التعليمات البرمجية في ملف index.php. كاختبار ، افتح الملف باستخدام المحرر المفضل لديك وأدخل أي نوع من عناصر HTML ، على سبيل المثال

 <h1>My First Theme's Content</h1>

احفظ الملف وانتقل إلى الواجهة الأمامية. يجب أن ترى فقط العنوان "محتوى موضوعي الأول"

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

تخطيط الموضوع

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

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

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

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

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

إذا أردنا تقسيم هذا الرمز واستخدام ملفات منفصلة header.php و footer.php ، فيجب عليك إنشاء الملفات ضمن مجلد السمة.

وقسم الكود على النحو التالي:

الفهرس. php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

تذييل. php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

وهذا كل شيء! لقد قمت بإنشاء موضوعك الأول!

ثيمات المبتدئين

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

رائع ، أليس كذلك؟

استنتاج

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