كيفية عرض البيانات الوصفية وتنسيقها في WordPress

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

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

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

ما هي بيانات Post Meta وكيف يمكن أن تساعد مدونتي؟

يحتوي قسم بيانات التعريف المنشور على معلومات ذات صلة بمنشور مدونة مثل تاريخ النشر واسم المؤلف والفئات والعلامات والتصنيفات المخصصة وما إلى ذلك.

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

ما مقدار البيانات الوصفية اللاحقة التي يجب عرضها؟

يختلف موقع البيانات الوصفية المنشورة من موضوع إلى آخر. قد يعرضه البعض قبل عنوان المنشور ، والبعض بعد العنوان والبعض بعد المحتوى مباشرة.

لكن الكثير من القطع الوصفية اللاحقة يمكن أن تفسد التصميم. الوضع المثالي هو الذي لا تعرض فيه سوى المعلومات التي تشعر أنها ضرورية.

الآن دعنا نرى كيف يمكنك تخصيص وإضافة التعريف المنشور.

تخصيص بيانات ما بعد التعريف

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

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

بشكل عام ، ستجد العلامات الوصفية المنشورة في صفحات index.php و single.php و archive.php وصفحات قوالب المحتوى .

سيبدو الرمز البسيط كما يلي:

نشر على

 <؟ php the_time ('F jS، Y')؛ ؟> بواسطة <؟ php the_author_posts_link () ؛ ؟> <؟ php edit_post_link () ؛ ؟>

سيعرض هذا الرمز شيئًا مثل هذا تاريخ النشر حسب اسم المؤلف مع زر التحرير (فقط إذا قمت بتسجيل الدخول إلى لوحة القيادة).

ولكن الآن تستخدم معظم السمات الحديثة صفحة علامات القالب للتعامل مع ما بعد النشر. دعونا نرى كيف يعمل.

أولاً ، يجب عليك إنشاء سمة فرعية قبل إجراء أي تغييرات.

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

لنفترض أننا نريد إضافة رمز مستخدم قبل اسم المؤلف ، للقيام بما يلي:

في نسق TwentySeventeen ، يتم استخدام قالب single.php لعرض منشور واحد. ابحث الآن عن get_template_part ولاحظ مسار القالب هناك ، في حالتنا يكون المسار:

 get_template_part ('template-parts / post / content'، get_post_format ()) ؛

الآن وفقًا للمسار ، افتح content.php وابحث عن قسم إدخال رأس .

 <header class = "entry-header">

<؟ php

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

صدى '<div class = "entry-meta">'؛

إذا (is_single ()) {

عشرون وعشرون () ؛

} آخر {

صدى العشرين والسبعين عشر_time_link () ؛

عشرون وعشرون_صورة_رابط () ،

} ؛

صدى '</div> <! - .entry-meta ->'؛

} ؛

 

إذا (is_single ()) {

the_title ('<h1 class = "entry-title">'، '</h1>')؛

} elseif (is_front_page () && is_home ()) {

the_title ('<h3 class = "entry-title"> <a href="'. esc_url( get_permalink()).'" rel="bookmark">'، '</a> </h3>')؛

} آخر {

the_title ('<h2 class = "entry-title"> <a href="'. esc_url( get_permalink()).'" rel="bookmark">'، '</a> </h2>')؛

}

؟>

</header>

<! - .entry-header ->

يمكننا أن نرى سبعة وعشرين عامًا () ؛ يتم استدعاء الوظيفة هنا لعرض meta post ، وعلينا تحرير هذه الوظيفة. ستجد هذه الوظيفة في ملف template-tags.php .

نصيحة: تحقق من ملف function.php السمة للحصول على اسم الملف والمسار.

ابحث عن twentyseventeen_posted_on () وانسخ والصق الوظيفة بأكملها في ملف function.php للقالب الخاص بك (إذا لم يكن لديك ملف function.php في القالب الفرعي الخاص بك ، فقم بإنشاء ملف فارغ بنفس الاسم).

سنستخدم أيقونات رائعة للخط هنا ، أبسط طريقة لاستخدام الخط الرائع في WordPress هي عن طريق تثبيت البرنامج المساعد Better Font Awesome.

 إذا (! function_exists ('twentyseventeen_posted_on')):

/ **

* يطبع HTML بالمعلومات الوصفية للتاريخ / الوقت الحالي والمؤلف.

* /

الوظيفة عشرونًا وعشرون () {

// احصل على اسم المؤلف ؛ لفها في رابط.

$ byline = sprintf (

/ * المترجمون:٪ s: كاتب النشر * /

__ ('by٪ s'، 'twentyseventeen')،

'<span class = "author vcard"> <a class="url fn n" href="'. esc_url( get_author_posts_url( get_the_author_meta('ID'))).'"> <i class = "fa fa-user" aria-hidden = "true"> </i> '. get_the_author (). "</a> </span>"

) ؛

// أخيرًا ، دعنا نكتب كل هذا على الصفحة.

صدى '<span class = "منشور على">'. عشرين والسبعين عشر_الوقت_الرابط (). '</span> <span class = "byline">'. $ الخط الثانوي. "</span>" ؛

}

إنهاء إذا؛

يمكنك الآن رؤية رمز المستخدم بجانب اسم المؤلف.

نصيحة: يمكنك إجراء هذه التغييرات مباشرة في ملف content.php ولكن اتباع بنية السمة ممارسة جيدة.

إضافة بيانات التعريف اللاحقة

حتى الآن قمنا بتخصيص العلامات الوصفية الموجودة. الآن لتجميل الأمور - لنفترض أننا نريد عرض الفئة والعلامات بعد عنوان المنشور.

للقيام بذلك ، انسخ ملف content.php من السمة الرئيسية والصقه في القالب الفرعي الخاص بك ، مع الاحتفاظ بنمط الدليل نفسه.

twentyseventeen> template-parts> post> content.php إلى twentyseventeen-child> template-parts> post> content.php

الآن عليك كتابة وظيفة جديدة.

اعتقد انها صعبة؟ في الواقع ليس كذلك ، إليك ما عليك القيام به.

ستعرض معظم السمات الفئة والعلامات في مكان ما في المنشور ، ما عليك سوى تحديد موقع الملف وتكرار الكود في وظيفتك.

في مثالنا ، في فئة السمات والعلامات TwentySeventeen توضع بعد المحتوى. الآن نحن بحاجة إلى اتباع سير العمل السابق.

افتح content.php واطلع على الوظيفة المستخدمة للفئة والعلامات.

 <؟ php

إذا (is_single ()) {

عشرين والسبع عشر () ؛

}

؟>

ها هو اليوم السابع والعشرون ().

انتقل الآن إلى ملف template-tags.php وابحث عن twentyseventeen_entry_footer ().

إذا (! function_exists ('twentyseventeen_entry_footer')):

/ **

* يطبع HTML مع معلومات التعريف للفئات والعلامات والتعليقات.

* /

الوظيفة الحادي والعشرون () {

 

/ * المترجمون: تستخدم بين عناصر القائمة ، توجد مسافة بعد الفاصلة * /

$epar_meta = __ ('،'، 'twentyseventeen')؛

 

// احصل على فئات للوظائف.

$ categories_list = get_the_category_list ($epar_meta)؛

 

// احصل على علامات للوظائف.

$ tags_list = get_the_tag_list (''، $epar_meta) ؛

 

// لا نريد إخراج .entry-footer إذا كان سيكون فارغًا ، لذا تأكد من أنه ليس كذلك.

إذا (((twentyseventeen_categorized_blog () && $ categories_list) || $ tags_list) || get_edit_post_link ()) {

 

صدى '<footer class = "entry-footer">'؛

 

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

if (($ categories_list && twentyseventeen_categorized_blog ()) || $ tags_list) {

صدى '<span class = "cat-tags-links">'؛

 

// تأكد من وجود أكثر من فئة قبل العرض.

إذا ($ categories_list && twentyseventeen_categorized_blog ()) {

صدى '<span class = "cat-links">'. twentyseventeen_get_svg (المصفوفة ('icon' => 'folder-open')). '<span class = "screen-reader-text">'. __ ("الفئات" ، "السابع والعشرون"). "</span>". فئات_قائمة $. "</span>" ؛

}

 

إذا ($ tags_list) {

صدى '<span class = "tags-links">'. twentyseventeen_get_svg (المصفوفة ('icon' => 'hashtag')). '<span class = "screen-reader-text">'. __ ("العلامات" ، "السابع والعشرون"). "</span>". $ tags_list. "</span>" ؛

}

 

صدى "</ span>" ؛

}

}

 

عشرون وعشرون_صورة_رابط () ،

 

صدى '</footer> <! - .entry-footer ->'؛

}

}

إنهاء إذا؛

ابحث عن الكود الخاص بالفئة والعلامات ثم انسخ الكود والصقه في ملف function.php الخاص بالقالب الخاص بك ضمن وظيفة جديدة ، مثل هذه -

إذا (! function_exists ('twentyseventeen_post_meta')):

/ **

* يطبع HTML بالمعلومات الوصفية للتاريخ / الوقت الحالي والمؤلف.

* /

الوظيفة العشرون والسبع والعشرون () {

/ * المترجمون: تستخدم بين عناصر القائمة ، توجد مسافة بعد الفاصلة * /

$epar_meta = __ ('،'، 'twentyseventeen')؛

// احصل على فئات للوظائف.

$ categories_list = get_the_category_list ($epar_meta)؛

// احصل على علامات للوظائف.

$ tags_list = get_the_tag_list (''، $epar_meta) ؛

صدى '<span class = "cat-tags-links">'؛

// تأكد من وجود أكثر من فئة قبل العرض.

إذا ($ categories_list && twentyseventeen_categorized_blog ()) {

echo '<span class = "cat-links"> <i class = "fa fa-folder-open" aria-hidden = "true"> </i> <span class = "screen-reader-text">'. __ ("الفئات" ، "السابع والعشرون"). "</span>". فئات_قائمة $. "</span>" ؛

}

إذا ($ tags_list) {

echo '<span class = "tags-links"> <i class = "fa fa-tags" aria-hidden = "true"> </i> <span class = "screen-reader-text">'. __ ("العلامات" ، "السابع والعشرون"). "</span>". $ tags_list. "</span>" ؛

}

صدى "</ span>" ؛

} ؛

إنهاء إذا؛

يمكنك أن ترى أنني استخدمت رموزًا رائعة للخط لكل من الفئات والعلامات.

تصميم ملف التعريف الخاص بك

نظرًا لأننا وضعنا العلامات الوصفية الخاصة بنا في الموقع المطلوب ، فقد حان الوقت لضبط بعض الأنماط.

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

 .entry-header .cat-tags-links {

حجم الخط: 14 بكسل ؛

}

.entry-header .cat-links {

المساحة المتروكة لليمين: 5 بكسل ؛

}

الآن تبدو مختلفة.

ولكن إذا كنت تريد إظهار الرمز المخصص الخاص بك بدلاً من الخط الرائع أو أي رمز آخر ، فيمكنك استخدام صورتك كصورة خلفية في CSS مثل هذا:

 .entry-header .cat-links {

الخلفية: url (category-img.jpg) في الوسط الأيسر بدون تكرار ؛

المساحة المتروكة: 5 بكسل ؛

المساحة المتروكة لليمين: 5 بكسل ؛

}

.entry-header .tags-links {

الخلفية: url (tag-img.jpg) المركز الأيسر بدون تكرار ؛

المساحة المتروكة: 5 بكسل ؛

المساحة المتروكة لليمين: 5 بكسل ؛

}

بمجرد الانتهاء من ذلك ، لا تنس إزالة كود الخط الرائع من ملف function.php الخاص بك.

قم بإزالة أي Meta Post

تعد إزالة أي بيانات تعريفية عملية بسيطة للغاية ، ما عليك سوى العثور على الكود وحذفه.

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

لذا فإن الكود الجديد سيبدو هكذا في موضوع طفلك.

 إذا (! function_exists ('twentyseventeen_entry_footer')):

/ **

* يطبع HTML مع معلومات التعريف للفئات والعلامات والتعليقات.

* /

الوظيفة الحادي والعشرون () {

// لا نريد إخراج .entry-footer إذا كان سيكون فارغًا ، لذا تأكد من أنه ليس كذلك.

إذا (get_edit_post_link ()) {

صدى '<footer class = "entry-footer">'؛

عشرون وعشرون_صورة_رابط () ،

صدى '</footer> <! - .entry-footer ->'؛

}

}

إنهاء إذا؛

استنتاج

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

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