Come visualizzare e definire lo stile dei metadati dei post in WordPress
Pubblicato: 2017-10-26
Hai mai notato una data o una categoria in un post del blog? Questo è ciò che viene chiamato "metadati del post", una parte importante di un post sul blog. Aiuta a fornire metadati succinti relativi ai contenuti del tuo blog.
Se usato correttamente, i post meta possono migliorare l'esperienza dell'utente; supponiamo che un visitatore sia interessato solo a un determinato argomento, quindi la categoria meta può aiutarli a scrivere post per categoria in modo che possano visualizzare i post su quel particolare argomento piuttosto che vedere tutti i post. Oppure, se desideri visualizzare solo i post di un determinato autore, post meta può aiutarti a farlo.
In questo post, ti mostrerò come visualizzare e definire lo stile dei metadati dei post.
Che cosa sono i post metadati e come possono aiutare il mio blog?
La sezione dei metadati del post contiene informazioni rilevanti di un post del blog come data di pubblicazione, nome dell'autore, categorie, tag e tassonomie personalizzate ecc.
Se hai un blog, dovresti assicurarti che i metadati del tuo post siano corretti, poiché queste informazioni possono aiutare un visitatore a capire di più sul post e possono anche aiutare ad aumentare le visualizzazioni della tua pagina semplificando la navigazione del tuo sito.
Quanti metadati postali dovresti visualizzare?
La posizione dei metadati dei post varia da tema a tema. Alcuni potrebbero visualizzarlo prima del titolo del post, altri dopo il titolo e altri subito dopo il contenuto.
Ma troppi meta pezzi post possono rovinare il layout. La situazione ideale è quella in cui visualizzeresti solo le informazioni che ritieni necessarie.
Ora vediamo come personalizzare e aggiungere meta post.
Personalizzazione dei metadati dei post
Come accennato, la meta posizione del post varia da tema a tema. Qui lavoreremo su un tema particolare, in questo caso il tema predefinito TwentySeventeen, quindi tieni presente che il codice e le pagine potrebbero essere diversi dal tuo tema.
Nei temi moderni i meta meta sono definiti nella pagina dei tag del modello e richiamati quando richiesto, ma in alcuni temi potresti scoprire che i meta meta sono posizionati direttamente prima o dopo il titolo del post.
In genere, troverai i meta tag dei post nelle pagine index.php , single.php , archive.php e dei modelli di contenuto .
Un semplice codice sarebbe simile a questo:
postato su
<?php the_time('F jS, Y'); ?> di <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>Questo codice visualizzerà qualcosa del genere Inserito in data per nome dell'autore con il pulsante di modifica (solo se sei loggato nella dashboard).
Ma ora la maggior parte dei temi moderni utilizza la pagina dei tag modello per gestire i meta post. Vediamo come funziona.
Innanzitutto, dovresti creare un tema figlio prima di apportare modifiche.
Lavoreremo su una singola pagina di post ed ecco come appare dal front-end.
Diciamo che vogliamo aggiungere un'icona utente prima del nome dell'autore, per farlo procedi come segue:
Nel tema TwentySeventeen, il modello single.php viene utilizzato per visualizzare un singolo post. Ora cerca get_template_part e nota il percorso del modello lì, nel nostro caso il percorso è:
get_template_part( 'parti-modello/post/contenuto', get_post_format() );
Ora, secondo il percorso, apri content.php e cerca la sezione entry-header .
<header class="entry-header">
<?php
if ( 'post' === get_post_type() ) {
echo '<div class="entry-meta">';
se ( è_single() ) {
ventidiciassette_posted_on();
} altro {
echo ventidiciassette_tempo_link();
ventidiciassette_modifica_link();
};
echo '</div><!-- .entry-meta -->';
};
se ( è_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>' );
} altro {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ). '" rel="bookmark">', '</a></h2>' );
}
?>
</intestazione>
<!-- .entry-header -->
Possiamo vedere ventisetteteen_posted_on(); la funzione è chiamata qui per visualizzare il meta del post, dobbiamo modificare questa funzione. Troverai questa funzione nel file template-tags.php .
Un consiglio: controlla il file function.php del tema per ottenere il nome e il percorso del file.
Cerca ventiseventeen_posted_on() e copia incolla l'intera funzione nel file function.php del tuo tema figlio (se non hai il file function.php nel tuo tema figlio, crea un file vuoto con lo stesso nome).
Utilizzeremo le icone dei font fantastici qui, il modo più semplice per utilizzare i font fantastici in WordPress è installare il plug-in Better Font Awesome.
if ( ! function_exists( 'twentyseventeen_posted_on' ) ) :
/**
* Stampa HTML con meta informazioni per la data/ora e l'autore correnti.
*/
funzione ventidiciassette_posted_on() {
// Ottieni il nome dell'autore; avvolgerlo in un collegamento.
$sottolinea = sprintf(
/* traduttori: %s: autore del post */
__( 'di %s', 'ventidiciassette' ),
'<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>'
);
// Infine, scriviamo tutto questo nella pagina.
echo '<span class="posted-on">' . ventidiciassette_tempo_link() . '</span><span class="byline"> ' . $sottolinea. '</span>';
}
finisci se;
Ora puoi vedere un'icona utente accanto al nome dell'autore.
Un consiglio: puoi apportare queste modifiche direttamente nel file content.php ma è buona norma seguire la struttura del tema.
Aggiunta di metadati post
Finora abbiamo personalizzato i meta tag esistenti. Ora per abbellire le cose: supponiamo di voler visualizzare la categoria e i tag dopo il titolo del post.
Per fare ciò, copia il file content.php dal tema principale e incollalo nel tuo tema figlio, mantenendo lo stesso schema di directory.
twoseventeen > template-parts > post > content.php a ventiseventeen-child > template-parts > post > content.php
Ora devi scrivere una nuova funzione.
Pensi che sia dura? In realtà non lo è, ecco cosa devi fare.
La maggior parte dei temi mostrerà la categoria e i tag da qualche parte nel post, devi solo individuare il file e replicare il codice nella tua funzione, il gioco è fatto.
Nel nostro caso, in TwentySeventeen la categoria del tema e i tag sono posizionati dopo il contenuto. Ora dobbiamo seguire il nostro flusso di lavoro precedente.
Apri content.php e guarda quale funzione viene utilizzata per categoria e tag.
<?php
se ( è_single() ) {
ventidiciassette_entry_footer();
}
?>
Eccolo ventiseventeen_entry_footer().
Ora vai al file template-tags.php e cerca ventiseventeen_entry_footer().
if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :
/**
* Stampa HTML con meta informazioni per le categorie, tag e commenti.
*/
funzione ventidiciassette_entry_footer() {
/* traduttori: usati tra le voci dell'elenco, c'è uno spazio dopo la virgola */
$meta_separate = __( ', ', 'ventidiciassette' );
// Ottieni categorie per i post.
$lista_categorie = ottieni_lista_categoria ($meta_separate);
// Ottieni tag per i post.
$lista_tag = get_the_tag_list( '', $meta_separate );
// Non vogliamo produrre .entry-footer se sarà vuoto, quindi assicurati che non lo sia.
if ( ( ( ventisettecento_blog_categorizzato() && $lista_categorie ) || $lista_tags ) || get_edit_post_link() ) {
echo '<footer class="entry-footer">';
if ( 'post' === get_post_type() ) {
if ( ( $categories_list && ventiseventeen_categorized_blog() ) || $tags_list ) {
echo '<span class="cat-tags-links">';
// Assicurati che ci sia più di una categoria prima di visualizzarla.
if ( $categories_list && ventiseventeen_categorized_blog() ) {
echo '<span class="cat-links">' . twentyseventeen_get_svg( array( 'icon' => 'folder-open' ) ) . '<span class="screen-reader-text">' . __( 'Categorie', 'ventidiciassette' ) . '</span>' . $lista_categorie . '</span>';
}
se ($lista_tag) {
echo '<span class="tags-links">' . twentyseventeen_get_svg( array( 'icon' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __( 'Tag', 'ventidiciassette' ) . '</span>' . $lista_tag. '</span>';
}
eco '</span>';
}
}
ventidiciassette_modifica_link();
echo '</footer> <!-- .entry-footer -->';
}
}
finisci se;
Trova il codice per la categoria e i tag, quindi copia e incolla il codice nel file function.php del tuo tema figlio all'interno di una nuova funzione, come questa -
if ( ! function_exists( 'twentyseventeen_post_meta' ) ) :
/**
* Stampa HTML con meta informazioni per la data/ora e l'autore correnti.
*/
funzione ventidiciassette_post_meta() {
/* traduttori: usati tra le voci dell'elenco, c'è uno spazio dopo la virgola */
$meta_separate = __( ', ', 'ventidiciassette' );
// Ottieni categorie per i post.
$lista_categorie = ottieni_lista_categoria ($meta_separate);
// Ottieni tag per i post.
$lista_tag = get_the_tag_list( '', $meta_separate );
echo '<span class="cat-tags-links">';
// Assicurati che ci sia più di una categoria prima di visualizzarla.
if ( $categories_list && ventiseventeen_categorized_blog() ) {
echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Categorie', 'ventidiciassette' ) . '</span>' . $lista_categorie . '</span>';
}
se ($lista_tag) {
echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Tag', 'ventidiciassette' ) . '</span>' . $lista_tag. '</span>';
}
eco '</span>';
};
finisci se;
Puoi vedere che ho usato icone fantastiche di font sia per le categorie che per i tag.
Stile del tuo post Meta
Dal momento che abbiamo posizionato i nostri meta tag nella posizione desiderata, è ora di modificare un po' di stile.
È molto semplice se conosci le basi dei CSS. Regoliamo la nostra sezione di categoria e tag.
.entry-header .cat-tags-link {
dimensione del carattere: 14px;
}
.entry-header .cat-link {
riempimento a destra: 5px;
}
Ora sembra diverso.
Ma se vuoi mostrare la tua icona personalizzata invece del carattere fantastico o qualsiasi altro, puoi usare la tua immagine come immagine di sfondo in CSS in questo modo:
.entry-header .cat-link {
sfondo: url(categoria-img.jpg) centro sinistra no-repeat;
riempimento a sinistra: 5px;
riempimento a destra: 5px;
}
.entry-header .tag-links {
sfondo: url(tag-img.jpg) centro sinistra no-repeat;
riempimento a sinistra: 5px;
riempimento a destra: 5px;
}
Una volta fatto, non dimenticare di rimuovere il codice fantastico del carattere dal tuo file function.php .
Rimuovi qualsiasi meta di post
Rimuovere qualsiasi meta meta è molto semplice, basta trovare il codice ed eliminarlo.
Ad esempio, se ora vedi la nostra singola pagina di post, le categorie e i tag ora vengono visualizzati in due sezioni. Se non si desidera visualizzarlo dopo il contenuto, è sufficiente eliminare la categoria e il codice del tag dalla funzione ventisetteceen_entry_footer().
Quindi il nuovo codice sarebbe simile a questo nel tuo tema figlio.
if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :
/**
* Stampa HTML con meta informazioni per le categorie, tag e commenti.
*/
funzione ventidiciassette_entry_footer() {
// Non vogliamo produrre .entry-footer se sarà vuoto, quindi assicurati che non lo sia.
se ( get_edit_post_link() ) {
echo '<footer class="entry-footer">';
ventidiciassette_modifica_link();
echo '</footer> <!-- .entry-footer -->';
}
}
finisci se;Conclusione
Come puoi vedere, i metadati dei post possono essere visualizzati in molti modi, ma è meglio se prima acquisisci una comprensione di base della struttura del tuo tema e solo dopo, se possibile, apporta le modifiche di conseguenza. Questo riduce al minimo la possibilità che il tuo tema si rompa. PS non dimenticare di creare un backup.
Spero che questo post ti abbia aiutato a capire come funzionano i metadati dei post, ma se hai domande pertinenti pubblica i tuoi commenti qui sotto.