كيفية إنشاء قالب صفحة WordPress مخصص

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

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

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

1. نموذج للصفحات العادية
2. نموذج لصفحات المنشور الفردي

لماذا ستحتاج إلى قالب WordPress مخصص للصفحات العادية

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

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

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

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

الطريقتان اللتان يمكنك من خلالهما إنشاء قالب صفحة WordPress مخصص

هناك طريقتان يمكنك من خلالهما إنشاء قالب صفحة WordPress مخصص:

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

أدناه سأريك الطريق السهل.

أولاً ، سوف أقوم بإنشاء نموذج للصفحات العادية يحتوي على دعوة للعمل على الجانب الأيمن.

ثانيًا ، سأقوم بإنشاء نموذج لنوع المنشور المخصص لوصفاتي.

كيفية إنشاء قالب صفحة WordPress مخصص للصفحات العادية

الخطوة 1: إنشاء هيكل قالب المحتوى

تحتاج أولاً إلى إنشاء قالب المحتوى لصفحاتك. مع تثبيت Toolset ، يمكنك فتح قالب محتوى جديد والبدء في إضافة كتلك.

أولاً ، أرتب هيكل النموذج. يمكنك أن ترى أدناه أنني أضفت كتلة الشبكة الخاصة بـ Toolset والتي تسمح لي بتقسيم القالب إلى أقسام. لقد قسمت القالب إلى قسمين وقمت بتوسيع القسم الموجود على اليسار بحيث يشغل 75٪ من الصفحة.

الخطوة 2: أضف محتوى إلى القالب الخاص بك

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

أدناه ، حدد محتوى المنشور على الجانب الأيمن كمصدر الكتلة.

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

الخطوة 3: تصميم الكتل

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

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

ضمن "أسلوب الطباعة" يمكنك تغيير ما يلي:

• الخط
• حجم الخط
• تباعد
• أسلوب
• لون الخط

هذا ليس كل شئ. ضمن "إعدادات النمط" ، يمكنك أيضًا تغيير ما يلي:

• لون الخلفية
• الهامش / الحشو
• الحدود
• ظل الصندوق

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

الخطوة 4: اضبط النموذج وفقًا لأحجام الشاشات المختلفة

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

لذلك ، قد تحتاج إلى ضبط القالب لكل حجم شاشة. من السهل القيام بذلك باستخدام Toolset و WordPress.

على الشريط الجانبي الأيمن بجوار كل عنصر نمط ، يوجد خيار للتبديل بين سطح المكتب والجهاز اللوحي والجوال.

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

الخطوة 5: تعيين القالب لصفحاتك

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

كل ما علي فعله هو تحرير كل صفحة واختيار قالب المحتوى الصحيح.

في الواجهة الأمامية ، سأرى الآن القالب في أي صفحة أقوم بتعيينه إليها.

لماذا ستحتاج إلى قالب صفحة WordPress مخصص لمنشورات فردية

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

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

لم أقم بعد بتعيين قالب لوصفاتي. تعرف على ما يحدث عندما نلقي نظرة على الوصفة بدون قالب في الواجهة الأمامية.

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

أدناه يمكنك رؤية اثنين من وصفاتي في الواجهة الأمامية. يمكنك الآن رؤية الحقول المخصصة لأنني قمت بتعيين قالب لها.

سأوضح لك أدناه كيف أنشأت هذا النموذج لوصفاتي.

الخطوة 1: إنشاء النموذج

أول شيء علي فعله هو إنشاء القالب الذي سأضيف فيه المحتوى الخاص بي. يمكنني القيام بذلك من لوحة معلومات Toolset في نهاية WordPress الخلفية.

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

الخطوة 2: إضافة المحتوى إلى القالب

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

مرة أخرى ، يمكنني إضافة كتلة Toolset Grid لإنشاء هيكل القالب.

يمكنني الآن البدء في إضافة كتلتي للمحتوى الخاص بي. على سبيل المثال ، في وصفاتي ، لدي صورة في العمود الأيسر. من مجموعة كتل Gutenberg يمكنني إضافة كتلة صورة Toolset. أحتاج إلى إصدار كتلة Toolset لأنه يسمح لي بإضافة محتوى ديناميكي.

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

باستخدام Toolset و WordPress ، يمكنني تحديد المصدر الديناميكي لكل من الكتل الخاصة بي لإخباره بما يجب عرضه.

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

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

الخطوة 3: تصميم الكتل الخاصة بك

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

الخطوة 4: اضبط النموذج وفقًا لأحجام الشاشات المختلفة

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

الخطوة 5: تحقق من كيف يبدو النموذج مع كل من مشاركاتك

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

بمجرد أن تصبح جاهزًا ، يمكنك التحقق من القالب الخاص بك في الواجهة الأمامية.

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

ابدأ في بناء قالب صفحة WordPress المخصص الخاص بك اليوم

حان دورك الآن لترى مدى سهولة إنشاء قالب صفحة WordPress خاص بك. كل ما عليك فعله هو تنزيل Toolset ثم التحقق من وثائقه لمعرفة مدى السرعة التي يمكنك من خلالها إنشاء قالب لمشاركاتك بدون تشفير.