Tutorial sul tema WordPress per principianti – Parte 5: Accesso alle informazioni sui post

Last updated Nov 10, 2022

Contenuto

Tag di modelli più comuni da utilizzare nel ciclo dei post

Questa lezione del tutorial sul tema WordPress per principianti riguarderà il modo in cui possiamo accedere e produrre informazioni come link, titolo e altro da ogni post quando ci si trova all’interno del ciclo del post. Lo facciamo con i tag modello. Nel processo aggiungeremo anche i modelli di visualizzazione singola al nostro tema.

Nel passaggio precedente abbiamo aggiunto il post loop che include la the_post()funzione. Questa funzione imposta variabili globali e assicura che possiamo utilizzare chiamate di funzione semplici e intuitive, chiamate tag template, mentre siamo all’interno del whileciclo.

Tag di modelli più comuni da utilizzare nel ciclo dei post

Questo è un elenco dei tag modello più comuni che vorresti utilizzare per accedere alle informazioni di un post:

the_title()fa eco al titolo del post.
the_permalink()restituisce il permalink/URL del post.
the_content()restituisce il contenuto del post (dall’editor)
the_excerpt()fa eco all’estratto del post. Se il campo dell’estratto è vuoto, verranno visualizzate le prime 55 parole del contenuto del post insieme a "…"
the_ID()restituisce l’ID del post.
the_category()fa eco a tutte le categorie associate.
the_tags()emette tutti i tag associati.
the_date()fa eco alla data di pubblicazione del post.
the_time()restituisce l’ora di pubblicazione del post.
the_author()fa eco al nome visualizzato dell’autore del post
the_post_thumbnail()restituisce l’immagine in primo piano del post. Impareremo come aggiungere il supporto per le miniature in primo piano più avanti in questo tutorial.

Ce ne sono molti di più. Se sei interessato, dai un’occhiata alla documentazione di WordPress Codex di tutti i tag dei post. Dai un’occhiata anche al di fuori dell’intestazione "tag post" per ulteriori informazioni: sono un po’ sparsi in questa pagina.

Iniziamo a implementare alcuni di questi tag nel nostro index.php. Aggiungerò anche un codice HTML molto semplice solo per formattare meglio l’output. Ti incoraggio ad aggiungere il tuo HTML! Aggiungi div, span, sezioni, intestazioni e così via con qualsiasi classe desideri.

Rimpolpare il ciclo in index.php

All’interno del loop nel nostro index.phpvorrei aggiungere un link che va al permalink del post. All’interno del link vorrei fare eco al titolo del post. Poi vorrei anche riprendere l’estratto del post e le sue categorie.

<?php get_header(); ?>
<?php 
if (have_posts()) {
    while (have_posts()): the_post();
        <article <?php post_class(); ?>>
            <h2>
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            </h2>
            <?php the_excerpt(); ?>
            <?php the_category(); ?>
        </article>
    endwhile;
    the_posts_pagination();
} else {
    ?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Quello che fa il codice sopra è;

La riga #5 aggiunge il <article>tag HTML con una chiamata a post_class()cui genera utili classi di post, proprio come body_class()abbiamo usato in un passaggio precedente.
Alla riga #6-8 aggiungiamo un <h2>tag per il titolo, con un link che va al permalink del post (vista singola).
La riga n. 9 fa eco all’estratto del post.
E alla riga n. 10 facciamo eco alle categorie del post. Poiché non passo alcun argomento a questa chiamata, il valore predefinito è un <ul>elenco.

Ciò si traduce nel seguente output durante l’aggiornamento della prima pagina:

Stiamo arrivando da qualche parte! Ti incoraggio a guardare la documentazione per ciascuna funzione di tag per i quali i parametri accettano. Puoi modificare l’output di un bel po’! E decidi tu stesso quali tag modello utilizzare.

Prova a fare clic sul link di un post e vedrai che arrivi a quella singola pagina del post. Ora puoi vedere che il ciclo mostra solo quel post. Tuttavia, poiché al momento disponiamo di un solo modello, index.phpanche la visualizzazione singola utilizza questo modello. Quindi la visione unica non ha molto senso. Non abbiamo bisogno che si colleghi a se stesso e vogliamo vedere il contenuto completo del post! Risolviamo questo problema creando il nostro secondo modello nel nostro tema.

Creazione di modelli a vista singola

Se ricordi nella lezione 1 del tutorial sul tema WordPress per principianti abbiamo esaminato la gerarchia dei modelli? Quando siamo in un singolo post o pagina, WordPress cerca single.phpi post e le page.phppagine. Se uno di questi non è stato trovato, WordPress ricade su singular.phpcui è condiviso indipendentemente dal tipo di post. Tuttavia, i temi generalmente vengono implementati single.phpea page.phpcausa delle differenze tra post e pagine. Le pagine non hanno categorie e tag e, poiché le pagine vengono solitamente utilizzate per contenuti statici, normalmente non mostrano la data di pubblicazione né i commenti. Questo dipende interamente da te però.

Creeremo single.phpe page.phpper il nostro tema. Cominciamo prima con i post.

Modello di post singolo

Nella cartella del tema, crea una copia index.phpe rinominala in single.php. In single.phprimuoveremo il permalink (che si collega a se stesso) e sostituiremo l’estratto con il contenuto completo del post. E infine non abbiamo bisogno della navigazione nell’archivio qui.

<?php get_header(); ?>
<?php 
if (have_posts()) {
    while (have_posts()): the_post();
        <article <?php post_class(); ?>>
            <h2><php the_title(); ?></h2>
            <?php the_content(); ?>
            <?php the_category(); ?>
        </article>
    endwhile;
} else {
    ?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Aggiungiamo alcune informazioni più utili; come la data del post e il nome dell’autore. Ancora una volta, ti incoraggio ad aggiungere tag HTML insieme per creare una struttura HTML molto più piacevole.

<?php get_header(); ?>
<?php 
if (have_posts()) {
    while (have_posts()): the_post();
        <article <?php post_class(); ?>>
            <h2><php the_title(); ?></h2>
            <?php the_content(); ?>
            <?php the_category(); ?>
            <p>Posted: <?php the_date(); ?> at <?php the_time(); ?></p>
            <p>Author: <?php the_author(); ?></p>
        </article>
    endwhile;
} else {
    ?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Le funzioni the_time()e the_date()faranno eco alla data e all’ora nel formato che hai definito nel pannello di amministrazione > Impostazioni. Tuttavia, puoi ignorarlo fornendo un formato di data diverso come parametro per questi metodi.

La funzione the_author()riprende il "nome visualizzato" dell’autore. Se l’utente non ha fornito nessun altro nome nel suo profilo, questo farà eco al nome utente.

Ti incoraggio vivamente a non stampare mai nomi utente in quanto ciò può rappresentare una minaccia per la sicurezza. Assicurati sempre che tutti gli autori abbiano fornito un nome proprio o non utilizzino the_author().

Ecco come mi sembra un singolo post ora. Stupendo! Realizziamo il modello a pagina singola.

Modello a pagina singola

Crea una copia del tuo single.phpe rinominalo in page.php. Tutto quello che ho fatto page.phpè stato rimuovere tutto ciò che non riguardava le pagine. L’eco delle categorie per le pagine non funzionerà e ho anche rimosso la data, l’ora e l’autore. Questo è ciò che otteniamo page.php:

<?php get_header(); ?>
<?php 
if (have_posts()) {
    while (have_posts()): the_post();
        <article <?php post_class(); ?>>
            <h2><php the_title(); ?></h2>
            <?php the_content(); ?>
        </article>
    endwhile;
} else {
    ?><p>No posts, sorry.</p><?php
}
?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Stiamo finalmente iniziando ad arrivare da qualche parte con i nostri modelli! Tuttavia non posso ripeterlo abbastanza; Ti incoraggio a modificare i modelli e i parametri per le funzioni a tuo piacimento. Soprattutto aggiungendo più wrapper HTML per rendere più facile lo stile in un secondo momento.

Nel passaggio successivo ci allontaniamo un po’ dai modelli e approfondiamo ulteriormente la codifica di back-end dei temi WordPress.

Documentazione sui metodi utilizzati

Fonte di registrazione: awhitepixel.com