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

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

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

فائدة القوالب المخصصة

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

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

على استعداد لتطوير الخاص بك؟ يشبه إنشاء قالب منشور مخصص واستخدامه قالب صفحة مخصص.

كيفية إنشاء قالب منشور مخصص

سأستخدم قالب Twenty Seventeen على سبيل المثال ، لكن العملية ستكون هي نفسها لأي موضوع.

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

بالنسبة للقالب المخصص ، يجب عليك تحديد اسم القالب (اسم القالب) ونوع منشور القالب (حيث سيتم استخدام هذا القالب). تبدو هكذا:

 [بي أتش بي]
& amp؛ amp؛ lt؛؟ php
/ * اسم القالب: منشور العرض الكامل * نوع منشور القالب: post * / / * القالب الخاص بعرض المشاركات المفردة ذات العرض الكامل. * /
get_header () ،
؟ & أمبير ؛ أمبير ؛ GT.
[/بي أتش بي]

عند حفظ الملف ، احتفظ باسم الملف ذي الصلة باسم القالب ، مثل full-width-post.php . إذا قمت بعرض منشور من لوحة الإدارة ، فسيتم عرض القالب الجديد في القائمة المنسدلة لقسم سمات النشر.

قالبنا المخصص جاهز ، لكنه ليس مفيدًا بعد. لنجعلها أكثر إفادة!

ملاحظة: سنعمل على ملفات متعددة ، لذا تابع أسماء الملفات والمجلدات.

إليك التخطيط الحالي لصفحات نشر المدونة في موضوع Twenty Seventeen. أنا سعيد بذلك ، لذا سنترك الأمر كذلك.

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

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

بمجرد العثور على الملف الذي يعرض صفحات تفاصيل المنشور ، يجب أن تجد ما إذا تم استخدام وظيفة لاستدعاء ملف آخر أو تم إنشاء القالب مباشرة. في هذا المثال مع موضوع Twenty Seventeen ، إنها دالة get_template_part.

يعد مسار get_template_part أهم جزء يجب اتباعه هنا.

 [بي أتش بي]

& amp؛ amp؛ lt؛ div class = & quot؛ التفاف & quot؛ & amp؛ amp؛ gt؛

& amp؛ amp؛ lt؛ div id = & quot؛ ابتدائي & quot؛ class = & quot؛ منطقة المحتوى & quot؛ & amp؛ amp؛ GT؛
        	& amp؛ amp؛ lt؛ المعرف الرئيسي = & quot؛ الرئيسي & quot؛ class = & quot؛ الموقع الرئيسي & quot؛ الدور = & quot؛ main & quot؛ & amp؛ amp؛ gt؛
              	& amp؛ amp؛ lt؛؟ php / * بدء الحلقة * / while (have_posts ()): the_post ()؛ get_template_part ('template-parts / post / content'، get_post_format ()) ؛ // إذا كانت التعليقات مفتوحة أو كان لدينا تعليق واحد على الأقل ، فقم بتحميل قالب التعليق. if (comments_open () || get_comments_number ()): comments_template ()؛ إنهاء إذا؛ the_post_navigation (array ('prev_text' = & amp؛ amp؛ gt؛ '& amp؛ amp؛ lt؛ span class = & quot؛ screen-reader-text & quot؛ & amp؛ amp؛ gt؛'. __ ('المنشور السابق'، 'twentyseventeen' ). '& amp؛ amp؛ lt؛ / span & amp؛ amp؛ gt؛ & amp؛ amp؛ lt؛ span aria-hidden = & quot؛ true & quot؛ class = & quot؛ nav-subtitle & quot؛ & amp؛ amp؛ gt؛'. __ (' السابق '،' twentyseventeen ').' & amp؛ amp؛ lt؛ / span & amp؛ amp؛ gt؛ & amp؛ lt؛ span class = & quot؛ nav-title & quot؛ & amp؛ gt؛ & amp؛ amp؛ lt؛ span class = & quot؛ nav-title-icon-wrapper & quot؛ & amp؛ amp؛ gt؛ '. twentyseventeen_get_svg (array (' icon '= & amp؛ amp؛ gt؛' arrow-left ')).' & amp؛ amp؛ lt؛ / تمتد & amp؛ amp؛ gt؛٪ title & amp؛ amp؛ lt؛ / span & amp؛ amp؛ gt؛ '،
                          	'next_text' = & amp؛ amp؛ gt؛ "& amp؛ amp؛ lt؛ span class = & quot؛ قارئ الشاشة-النص & quot؛ & amp؛ amp؛ gt؛ ' . __ ("المنشور التالي" ، "السابع والعشرون"). '& amp؛ amp؛ lt؛ / span & amp؛ amp؛ gt؛ & amp؛ lt؛ span aria-hidden = & quot؛ true & quot؛ class = & quot؛ nav-subtitle & quot؛ & amp؛ amp؛ gt؛ ' . __ ("التالي" ، "السابع والعشرون"). & amp؛ amp؛ lt؛ / امتداد & amp؛ amp؛ gt؛ & amp؛ amp؛ lt؛ span class = & quot؛ nav-title & quot؛ & amp؛ amp؛ gt؛٪ title & amp؛ amp؛ lt؛ span class = & quot؛ nav-title-icon-wrapper & quot؛ & amp؛ amp؛ gt؛ ' . twentyseventeen_get_svg (المصفوفة ('icon' = & amp؛ amp؛ gt؛ 'arrow-right')). '& amp؛ amp؛ lt؛ / span & amp؛ amp؛ gt؛ & amp؛ amp؛ lt؛ / span & amp؛ amp؛ gt؛'،
                    	)) ؛
              	في غضون ذلك // نهاية الحلقة.
              	؟ & أمبير ؛ أمبير ؛ GT.
[/بي أتش بي]

كما ترى ، فهو يشير إلى مسار:

 [بي أتش بي]
get_template_part ("template-parts / post / content"، get_post_format ()
) ؛
[/بي أتش بي] 

لذلك يتم استدعاء ملف content.php داخل single.ph لإخراج صفحة تفاصيل المنشور.

الآن بعد أن عرفت كيف يعمل ملف single.php ، دعنا ننسخ الكود منه ولصقه في ملف full-width-post.php الذي تم إنشاؤه مسبقًا في القالب الفرعي. نظرًا لأنه سيكون قالبًا كامل العرض ، فسنزيل الشريط الجانبي.

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

يمكنك الاحتفاظ باسم الملف كما هو ، ولكن إذا كنت ترغب في تغيير شيء ما في القالب الافتراضي ، فسوف يتسبب ذلك في حدوث تعارض. لتجنب أي مشاكل ، أقترح إعادة تسمية الملف وإبقائه وثيق الصلة باسم القالب ، مثل content-full-width.php .

الملفات في مكانها الصحيح ، لذلك دعونا الآن نعدل الكود لتبديل عنوان المنشور ونشر البيانات الوصفية.

 [بي أتش بي]

& amp؛ amp؛ lt؛ header class = & quot؛ رأس الإدخال & quot؛ & amp؛ amp؛ gt؛
        	& amp؛ amp؛ lt؛؟ php

        	إذا (is_single ()) {
              	العنوان( '

& amp؛ amp؛ lt؛ h1 class = & quot؛ عنوان الإدخال & quot؛ & amp؛ amp؛ gt؛ '،' & amp؛ lt؛ / h1 & amp؛ amp؛ gt؛

') ؛
        	} elseif (is_front_page () & amp؛ amp؛ amp؛ & amp؛ amp؛ amp؛ is_home ()) {
              	العنوان( '

& amp؛ amp؛ lt؛ h3 class = & quot؛ عنوان الإدخال & quot؛ & amp؛ amp؛ gt؛ & amp؛ amp؛ lt؛ a href = & quot؛ ' . esc_url (get_permalink ()). '& quot؛ rel = & quot؛ إشارة مرجعية & quot؛ & amp؛ amp؛ gt؛ '،' & amp؛ lt؛ / a & amp؛ amp؛ gt؛ & amp؛ amp؛ lt؛ / h3 & amp؛ amp؛ gt؛

') ؛
        	} آخر {
              	العنوان( '

& amp؛ amp؛ lt؛ h2 class = & quot؛ عنوان الإدخال & quot؛ & amp؛ amp؛ gt؛ & amp؛ amp؛ lt؛ a href = & quot؛ ' . esc_url (get_permalink ()). '& quot؛ rel = & quot؛ إشارة مرجعية & quot؛ & amp؛ amp؛ GT؛ '،' & amp؛ amp؛ lt؛ / a & amp؛ amp؛ gt؛ & amp؛ amp؛ lt؛ / h2 & amp؛ amp؛ gt؛

') ؛
        	}

        	إذا ('post' === get_post_type ()) {

              	صدى صوت '

& amp؛ amp؛ lt؛ div class = & quot؛ إدخال-تعريف & quot؛ & amp؛ gt؛ '؛
                    	إذا (is_single ()) {
                    	  	عشرون وعشرون () ؛
                    	} آخر {
                          	صدى العشرين والسبعين عشر_time_link () ؛
                          	عشرون وعشرون_صورة_رابط () ،
                    	} ؛
              	صدى '& amp؛ amp؛ lt؛ / div & amp؛ amp؛ gt؛

& amp؛ amp؛ lt؛! - .entry-meta - & amp؛ amp؛ gt؛ '؛
        	} ؛
        	؟ & أمبير ؛ أمبير ؛ GT.
  	& amp؛ amp؛ lt؛ / header & amp؛ amp؛ gt؛

& amp؛ amp؛ lt؛! - .entry-header - & amp؛ amp؛ GT؛
[/بي أتش بي]

لاستخدام هذا النموذج ، قم بتحرير المنشور المطلوب من مسؤول WordPress وقم بتعيين القالب من القائمة المنسدلة.

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

يتعين علينا إضافة بعض CSS لجعلها كاملة العرض. يقوم WordPress تلقائيًا بإنشاء فئة وفقًا لاسم القالب في قسم النص.

استخدم هذه الفئة لاستهداف هذا القالب المعين. يمكنك إضافة CSS إلى ملف style.css للسمة الفرعية.

 [المغلق]
.post-template-full-width-post.has-sidebar: not (.error404) #primary {
تعويم: لا شيء ؛
العرض: تلقائي ؛
}

.post-template-full-width-post .entry-header {
محاذاة النص: مركز ؛
الهامش السفلي: 1.3em ؛
}

.post-template-full-width-post .entry-meta {
أعلى الحدود: 1px صلب #ccc ؛
الحد السفلي: 1px صلب #ccc ؛
الحشو: 15 بكسل 0 ؛
}
[/ css]

الآن لدينا التصميم كما أردنا. أي منشور يستخدم هذا القالب سيكون له نفس النمط بالضبط.

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

هل يمكنني استخدام البرنامج المساعد لهذا؟

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

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

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

خاتمة

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

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