Cum să afișați și să stilați metadatele postării în WordPress

Ați observat vreodată o dată sau o categorie într-o postare de blog? Aceasta este ceea ce se numește „meta date post” – o parte importantă a unei postări de blog. Ajută la furnizarea de metadate succinte cu privire la conținutul blogului dvs.

Dacă este utilizat corect, meta meta poate îmbunătăți experiența utilizatorului; să spunem că un vizitator este interesat doar de un anumit subiect, atunci meta categorie îl poate ajuta cu postări scurte după categorie, astfel încât să poată vedea postările pe acel subiect anume, mai degrabă decât să vadă toate postările. Sau, dacă doriți să vizualizați numai postările unui anumit autor, meta postați vă poate ajuta să faceți asta.

În această postare, vă voi arăta cum să afișați și să stilați metadatele postării.

Ce sunt metadatele de postare și cum îmi pot ajuta blogul?

Secțiunea metadate ale postării conține informații relevante despre o postare de blog, cum ar fi data publicării, numele autorului, categoriile, etichetele și taxonomiile personalizate etc.

Dacă aveți un blog, ar trebui să vă asigurați că metadatele postării dvs. sunt corecte, deoarece aceste informații pot ajuta un vizitator să înțeleagă mai multe despre postare și, de asemenea, vă pot ajuta să vă creșteți vizualizările paginii, facilitând navigarea pe site.

Câte metadate de postare ar trebui să afișați?

Locația metadatelor postării variază de la temă la temă. Unii îl pot afișa înainte de titlul postării, alții după titlu și alții imediat după conținut.

Dar prea multe piese meta post pot da în eroare aspectul. Situația ideală este aceea în care ați afișa doar informațiile pe care le considerați necesare.

Acum să vedem cum puteți personaliza și adăuga meta postare.

Personalizarea post metadate

După cum am menționat, meta locația postării variază de la temă la temă. Aici vom lucra la o anumită temă – în acest caz tema implicită TwentySeventeen, așa că rețineți că codul și paginile pot fi diferite de tema dvs.

În temele moderne, meta postarea este definită în pagina de etichete șablon și apelată atunci când este necesar, dar în unele teme este posibil să găsiți meta postarea este plasată direct înainte sau după titlul postării.

În general, veți găsi metaetichete post în paginile index.php , single.php , archive.php și șablon de conținut .

Un cod simplu ar arăta astfel:

postat pe

 <?php the_time('F jS, Y'); ?> de la <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>

Acest cod va afișa ceva de genul acesta Postat la data după numele autorului cu butonul de editare (doar dacă sunteți autentificat în tabloul de bord).

Dar acum cele mai multe teme moderne folosesc pagina de etichete șablon pentru a gestiona meta postarea. Să vedem cum funcționează.

În primul rând, ar trebui să creați o temă copil înainte de a face orice modificări.

Vom lucra pe o singură pagină de postare și așa arată din front-end.

Să presupunem că vrem să adăugăm o pictogramă utilizator înaintea numelui autorului, pentru a face acest lucru:

În tema TwentySeventeen, șablonul single.php este folosit pentru a afișa o singură postare. Acum căutați get_template_part și observați calea șablonului acolo, în cazul nostru calea este:

 get_template_part('template-parts/post/content', get_post_format());

Acum, conform căii, deschideți content.php și căutați secțiunea de antet de intrare .

 <header class="entry-header">

<?php

if ( 'post' === get_post_type() ) {

echo '<div class="entry-meta">';

if ( este_single() ) {

twentyseventeen_posted_on();

} altfel {

echo twentyseventeen_time_link();

twentyseventeen_edit_link();

};

echo '</div><!-- .entry-meta -->';

};

 

if ( este_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>' );

} altfel {

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

}

?>

</header>

<!-- .entry-header -->

Putem vedea twentyseventeen_posted_on(); funcția este apelată aici pentru a afișa meta postare, trebuie să edităm această funcție. Veți găsi această funcție în fișierul template-tags.php .

Un sfat: verificați fișierul function.php al temei pentru a obține numele și calea fișierului.

Căutați twentyseventeen_posted_on() și copiați și lipiți întreaga funcție în fișierul function.php al temei copilului (dacă nu aveți fișierul function.php în tema copilului, atunci creați un fișier gol cu ​​același nume).

Vom folosi aici pictograme font awesome, cel mai simplu mod de a folosi font awesome în WordPress este prin instalarea pluginului Better Font Awesome.

 dacă ( ! function_exists( 'twentyseventeen_posted_on ' ) ):

/**

* Imprimă HTML cu metainformații pentru data/ora curente și autor.

*/

funcția twentyseventeen_posted_on() {

// Obține numele autorului; împachetează-l într-un link.

$byline = sprintf(

/* traducători: %s: autorul postării */

__( „de %s”, „douăzeci și șaptezeci”),

„<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>'

);

// În sfârșit, să scriem toate acestea pe pagină.

echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . „</span>”;

}

endif;

Acum puteți vedea o pictogramă de utilizator lângă numele autorului.

Un sfat: puteți face aceste modificări direct în fișierul content.php , dar este o practică bună să urmați structura temei.

Adăugarea metadatelor postării

Până acum am personalizat metaetichetele existente. Acum, pentru a îmbunătăți lucrurile – să presupunem că vrem să afișăm categoria și etichetele după titlul postării.

Pentru a face acest lucru, copiați fișierul content.php din tema părinte și inserați-l în tema copilului, păstrând același model de director.

twentyseventeen > template-parts > postare > content.php la twentyseventeen-child > template-parts > postare > content.php

Acum trebuie să scrieți o nouă funcție.

Crezi că e greu? De fapt, nu este, iată ce trebuie să faci.

Majoritatea temelor vor afișa categoria și etichetele undeva în postare, trebuie doar să localizați fișierul și să replicați codul în funcția dvs., asta este.

În cazul nostru, în categoria TwentySeventeen tematică și etichetele sunt plasate după conținut. Acum trebuie să ne urmăm fluxul de lucru anterior.

Deschide content.php și vezi ce funcție este folosită pentru categorie și etichete.

 <?php

if ( este_single() ) {

twentyseventeen_entry_footer();

}

?>

Aici este twentyseventeen_entry_footer().

Acum accesați fișierul template-tags.php și căutați twentyseventeen_entry_footer().

dacă ( ! function_exists( 'douăzeci și șaptezeci_subsol_întrare' ) ):

/**

* Imprimă HTML cu meta informații pentru categorii, etichete și comentarii.

*/

funcția twentyseventeen_entry_footer() {

 

/* traducători: folosit între elementele listei, există un spațiu după virgulă */

$separate_meta = __( ', ', 'douăzeci şi şaptezeci' );

 

// Obțineți categorii pentru postări.

$listă_categorii = get_the_category_list( $separate_meta );

 

// Obțineți etichete pentru postări.

$tags_list = get_the_tag_list( '', $separate_meta );

 

// Nu dorim să scoatem .entry-footer dacă va fi gol, așa că asigurați-vă că nu este.

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

 

echo '<footer class="entry-footer">';

 

if ( 'post' === get_post_type() ) {

if ( ( $listă_categorii && twentyseventeen_categorized_blog() ) || $listă_etichete ) {

echo '<span class="cat-tags-links">';

 

// Asigurați-vă că există mai multe categorii înainte de afișare.

if ( $listă_categorii && twentyseventeen_categorized_blog() ) {

echo '<span class="cat-links">' . twentyseventeen_get_svg( array( 'icon' => 'folder-deschide' ) ) . „<span class="screen-reader-text">' . __( 'Categorii', 'douăzeci şi şaptezeci' ) . „</span>” . $categories_list . „</span>”;

}

 

dacă ( $listă_etichete ) {

echo '<span class="tags-links">' . twentyseventeen_get_svg( array( 'icon' => 'hashtag' ) ) . „<span class="screen-reader-text">' . __( „Etichete”, „douăzeci și șaptezeci” ) . „</span>” . $tags_list . „</span>”;

}

 

ecou '</span>';

}

}

 

twentyseventeen_edit_link();

 

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

Găsiți codul pentru categorie și etichete, apoi copiați și inserați codul în fișierul function.php al temei copilului dvs. într-o funcție nouă, ca aceasta -

dacă ( ! function_exists( 'twentyseventeen_post_meta' ) ):

/**

* Imprimă HTML cu metainformații pentru data/ora curente și autor.

*/

funcția twentyseventeen_post_meta() {

/* traducători: folosit între elementele listei, există un spațiu după virgulă */

$separate_meta = __( ', ', 'douăzeci şi şaptezeci' );

// Obțineți categorii pentru postări.

$listă_categorii = get_the_category_list( $separate_meta );

// Obțineți etichete pentru postări.

$tags_list = get_the_tag_list( '', $separate_meta );

echo '<span class="cat-tags-links">';

// Asigurați-vă că există mai multe categorii înainte de afișare.

if ( $listă_categorii && twentyseventeen_categorized_blog() ) {

echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Categorii', 'douăzeci şi şaptezeci' ) . „</span>” . $categories_list . „</span>”;

}

dacă ( $listă_etichete ) {

echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( „Etichete”, „douăzeci și șaptezeci” ) . „</span>” . $tags_list . „</span>”;

}

ecou '</span>';

};

endif;

Puteți vedea că am folosit pictograme minunate cu fonturi atât pentru categorii, cât și pentru etichete.

Stilizarea meta postării tale

Deoarece ne-am plasat metaetichetele în locația dorită, este timpul să ne adaptăm stilul.

Este foarte simplu dacă cunoașteți elementele de bază ale CSS. Să ne adaptăm categoria și secțiunea de etichete.

 .entry-header .cat-tags-links {

dimensiunea fontului: 14px;

}

.entry-header .cat-links {

padding-dreapta: 5px;

}

Acum arată diferit.

Dar dacă doriți să afișați propria pictogramă personalizată în loc de font minunat sau oricare altul, atunci vă puteți folosi imaginea ca imagine de fundal în CSS astfel:

 .entry-header .cat-links {

fundal: url(category-img.jpg) centru stânga fără repetare;

padding-stânga: 5px;

padding-dreapta: 5px;

}

.entry-header .tags-links {

fundal: url(tag-img.jpg) centru stânga fără repetare;

padding-stânga: 5px;

padding-dreapta: 5px;

}

Odată ce ați terminat, nu uitați să eliminați codul fantastic de font din fișierul function.php .

Eliminați orice meta postare

Eliminarea oricărei postări meta este foarte simplă, doar găsiți codul și ștergeți-l.

De exemplu, dacă vedeți pagina noastră cu o singură postare acum, categoriile și etichetele apar acum în două secțiuni. Dacă nu doriți să îl afișați după conținut, atunci pur și simplu ștergeți categoria și codul etichetei din funcția twentyseventeen_entry_footer().

Deci noul cod ar arăta așa în tema copilului tău.

 dacă ( ! function_exists( 'douăzeci și șaptezeci_subsol_întrare' ) ):

/**

* Imprimă HTML cu meta informații pentru categorii, etichete și comentarii.

*/

funcția twentyseventeen_entry_footer() {

// Nu dorim să scoatem .entry-footer dacă va fi gol, așa că asigurați-vă că nu este.

dacă ( get_edit_post_link() ) {

echo '<footer class="entry-footer">';

twentyseventeen_edit_link();

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

Concluzie

După cum puteți vedea, metadatele postate pot fi afișate în mai multe moduri, dar cel mai bine este să obțineți mai întâi o înțelegere de bază a structurii temei și numai apoi, dacă este posibil, să faceți ajustări în consecință. Acest lucru reduce la minimum posibilitatea ca tema să se defecteze. PS nu uitați să creați o copie de rezervă.

Sper că această postare v-a ajutat să înțelegeți cum funcționează metadatele postării, dar dacă aveți întrebări relevante, postați comentariile mai jos.