Stai cercando un foglio di trucchi per temi WordPress per modificare rapidamente il tuo tema o crearne uno nuovo personalizzato? WordPress è dotato di molti tag di modello integrati che puoi utilizzare per iniziare. In questo articolo, condivideremo un foglio di trucchi per temi WordPress per principianti.
Prima di iniziare
WordPress è dotato di un potente motore di templating che consente agli sviluppatori di temi di creare bellissimi design per siti Web basati su WordPress. Esistono sia temi WordPress premium che gratuiti che puoi installare sul tuo sito Web.
Ogni tema WordPress è dotato di una serie di opzioni di personalizzazione. Queste opzioni ti consentono di cambiare colori, aggiungere immagini di intestazione, impostare menu di navigazione e altro ancora.
Tuttavia, sei ancora limitato a ciò che le funzionalità supportate dal tuo tema. A volte potresti voler apportare piccole modifiche al tuo tema WordPress che richiedono un po' di codifica. Per farlo, dovrai conoscere alcune basi di PHP, HTML e CSS.
La prima cosa che vorresti fare è familiarizzare con come funziona WordPress dietro le quinte e modelli di temi WordPress.
Dopo di che ci sono alcune best practice che potresti voler seguire. Ad esempio, creare un tema child invece di apportare modifiche direttamente ai file del tuo tema.
Puoi anche fare pratica sul tuo tema installando WordPress sul tuo computer.
Detto questo, tuffiamoci nel nostro cheat sheet per temi WordPress per principianti.
Modelli di base per temi WordPress
Ogni tema WordPress è composto da diversi file chiamati modelli. Tutti i temi WordPress devono avere un foglio di stile e un file index, ma di solito vengono forniti con molti altri file.
Di seguito è riportato l'elenco dei file di base che ogni tema ha:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
Se stai creando il tuo tema, puoi iniziare con uno dei temi starter per WordPress. Questi temi sono dotati di file modello WordPress pronti all'uso e CSS che ti forniscono un framework su cui costruire.
Tag modello nell'intestazione
WordPress viene fornito con molte funzioni utili che possono essere utilizzate per generare diverse cose in tutto il tuo tema. Queste funzioni sono chiamate tag modello.
La prima e probabilmente la funzione più importante richiesta in tutti i temi WordPress conformi agli standard si chiama wp_head, e si presenta così:
<?php wp_head(); ?>
Questo codice recupera tutti gli elementi HTML importanti che WordPress deve aggiungere nella sezione <head> di ogni pagina del tuo sito web. È anche essenziale affinché molti plugin di WordPress funzionino correttamente sul tuo sito web.
Di seguito è riportato un elenco di tag di modello che troverai e utilizzerai comunemente nel file header.php del tuo tema. Tuttavia, possono anche essere utilizzati altrove nel tuo tema quando ne hai bisogno.
// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?>
// Title of a Specific Page
<?php wp_title(); ?>
// Exact URL for the site
<?php bloginfo('url'); ?>
// Site's Description
<?php bloginfo('description'); ?>
// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>
// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>
// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?>
// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>
// WordPress version number
<?php bloginfo('version'); ?>
Tag di modello utilizzati in altri file del tema
Ora diamo un'occhiata ad altri tag di modello comunemente usati e a cosa fanno.
I seguenti tag di modello vengono utilizzati per chiamare e includere altri modelli. Ad esempio, il file index.php del tuo tema li utilizzerà per includere i modelli di intestazione, piè di pagina, contenuto, commenti e barra laterale.
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
I seguenti tag di modello vengono utilizzati all'interno del loop di WordPress per visualizzare contenuto, estratto e metadati dai tuoi post.
// Displays the Content of the Post
<?php the_content(); ?>
// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>
// Title of the Specific Post
<?php the_title(); ?>
// Link of the Specific Post
<?php the_permalink() ?>
// Category of a Specific Post
<?php the_category(', ') ?>
// Author of the Specific Post
<?php the_author(); ?>
//ID of a Specific Post
<?php the_ID(); ?>
// Edit link for a Post
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>
// URL of the next page
<?php next_post_link(' %link ') ?>
// URL of the previous page
<?php previous_post_link('%link') ?>
I temi di WordPress sono dotati di aree pronte per i widget chiamate Barre laterali. Queste sono posizioni nei file del tuo tema in cui gli utenti possono trascinare e rilasciare widget di WordPress. Spesso un tema ha più posizioni in cui gli utenti possono aggiungere widget.
Tuttavia, più comunemente queste aree widget si trovano nella barra laterale destra o sinistra del layout del tema. Per saperne di più, consulta la nostra guida su come aggiungere barre laterali dinamiche pronte per i widget nel tuo tema WordPress.
Ecco il codice utilizzato per visualizzare una barra laterale nel tuo tema.
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
Dovrai sostituire sidebar-1 con il nome definito dal tuo tema per quella particolare area pronta per i widget o la barra laterale.
Tag di modello per visualizzare menu di navigazione
WordPress è dotato di un potente sistema di gestione dei menu che consente agli utenti di creare menu di navigazione per il proprio sito web. Un tema WordPress può avere più di una posizione per i menu di navigazione.
Consulta la nostra guida su come creare i tuoi menu di navigazione personalizzati in un tema WordPress.
Di seguito è riportato il codice che verrà utilizzato nel tuo tema per visualizzare un menu di navigazione.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
La posizione del tema dipende dal nome utilizzato dal tuo tema per registrare il menu di navigazione. La classe del contenitore CSS può essere chiamata come preferisci. Circonderà il tuo menu di navigazione, in modo che tu possa stilizzarlo di conseguenza.
Tag di modello vari
Di seguito sono riportati alcuni dei tag che utilizzerai comunemente nel tuo tema WordPress.
// Displays the date current post was written
<?php echo get_the_date(); ?>
// Displays the last time a post was modified
get_the_modified_time
// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>
// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>
// Displays monthly archives
<?php wp_get_archives( ); ?>
// Displays the list of categories
<?php wp_list_categories(); ?>
// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( 'email@example.com', 32 ); ?>
// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
Tag condizionali nei temi WordPress
I tag condizionali sono funzioni che restituiscono risultati Vero o Falso. Questi tag condizionali possono essere utilizzati nel tuo tema o plugin per verificare se determinate condizioni sono soddisfatte e quindi eseguire un'azione di conseguenza.
Ad esempio, se il post corrente ha un'immagine in evidenza o meno. Se non ha un'immagine in evidenza, puoi mostrare invece un immagine in evidenza predefinita.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
Di seguito sono riportati alcuni altri tag condizionali che puoi utilizzare.
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
Ci sono molti altri tag condizionali che puoi utilizzare. L'elenco completo dei tag condizionali si trova nella pagina del codex di WordPress sui tag condizionali.
Il Loop di WordPress
Il Loop o il loop di WordPress è il codice utilizzato per recuperare e visualizzare i post in WordPress. Molti tag di template di WordPress potrebbero funzionare solo all'interno del loop poiché sono associati agli oggetti post o post_type.
Di seguito è riportato un esempio di un semplice loop di WordPress.
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
Per saperne di più sul loop, consulta Cos'è un Loop in WordPress (Infografica).
Speriamo che questo articolo ti sia d'aiuto come foglio di riferimento di base per i temi WordPress per principianti. Potresti anche voler consultare il nostro elenco di i trucchi più utili per il file functions di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Mrteesurez
Ottimo post, infatti questo è uno dei post che mi ha spiegato chiaramente i tag dei template, categorizzandoli in base all'uso e alle funzioni.
Anche i file WordPress di base che hai condiviso sono utili per iniziare il mio tema. È essenziale comprendere questi tag dei template e i file di base per poter modificare o creare un tema personalizzato.
Grazie per questo, non vedo l'ora di vedere questo tipo di post.
Fajri
bel tutorial
A volte abbiamo davvero bisogno di modificare il contenuto di alcuni dei file PHP sopra menzionati, specialmente se ci sono personalizzazioni non fornite dal tema.
per semplici inserimenti di codice, un plugin che aiuta molto è WPCode Lite
Mrteesurez
Sono d'accordo con te. È vero che personalizzare i file PHP è a volte necessario per requisiti unici non coperti dal tema. WPCode è stato un salvavita per me in queste situazioni. Permette semplici inserimenti di codice senza il fastidio di modificare direttamente i file del tema, rendendo più facile e sicuro implementare modifiche personalizzate. L'ho usato sulla maggior parte dei miei siti web perché è molto utile.
Marco
Questo è un ottimo articolo.
Ma è ancora rilevante nel 2022 con l'editor a blocchi Gutenberg?
WPBeginner, siete i migliori!
Supporto WPBeginner
Quello che condividiamo in questo articolo è ancora attualmente rilevante.
Amministratore
Fajri
Ehi amico
Sì, è corretto, questo tutorial è ancora rilevante per la versione attuale di WordPress, anche se il tuo sito web utilizza un editor a blocchi o anche l'editor classico.
devi provarlo amico
Henry Obilor
Vorrei chiedere quando si crea un nuovo tema. Posso creare il mio header.php e usare il footer.php di un tema premium?
Mescolare il tuo con un modello già pronto. Funzionerà?
Supporto WPBeginner
Dipenderebbe molto dal contenuto di footer.php e da come è codificato il tuo tema. Se hai il footer, il metodo migliore sarebbe testare su un'installazione locale.
Amministratore
Biplob
È una cosa fantastica. È molto utile
Zaki
Questo certamente non è per principianti. Temo di finire per pasticciare il mio sito web. La parte di codifica è completamente poco chiara. Apprezzerei se potessi fornire alcuni ottimi screenshot per illustrare "Come aggiungere una pagina personalizzata".
Sanam
Amico, dove incollo quel codice in functions.php?
Supporto WPBeginner
In fondo. Se hai il tag ?> come ultima riga, allora devi incollare il codice prima di quella riga.
Amministratore
Shahbaz Ahmed Bhatti
Lavoro molto bello e fantastico, continua così, informazioni molto buone per i principianti
Solomon
Grazie mille, lo apprezzo molto.
Pali Madra
Grazie per l'ottimo tutorial. Raccomando il tutorial a chiunque cerchi di imparare WordPress.
Continua così!
Ben
Grazie per un articolo molto utile. Proprio quello che stavo cercando.
Grazie.
Ben
madalinignisca
cos'è – Descrizione del sito
Penso che sia
madalinignisca
cos'è “<?php bloginfo(%u2019description%u2019); ?> – Descrizione del sito”? Penso che sia “<?php bloginfo(‘description’); ?>”
mirzayasir4
Ottimo foglio di trucchi utile quando si apportano modifiche ai temi. Grazie
John
Fantastico, stavo cercando un foglio di trucchi WordPress facile da un po', grazie per averlo fatto, rende la vita molto più facile e posso essere un po' più creativo. WordPress ha così tanta potenza sotto il cofano.
mark
questo è fantastico per i principianti
Russell Poulter
Questo è ASSOLUTAMENTE bookmarkato!
Grazie.
asif eminov
Grazie per questi dettagli.
Ersatzknochen
Sì, molto utile. Grazie.
Delighted
Grazie per la parte Codici in Header.php, Molto facile da capire e MOLTO utile! grazie per questo.
SleepY
Wow... era quello che cercavo da giorni.
Grazie mille!
Victor Duwon Jackson
È fantastico, grazie.
Manoj
Great info! bookmarked
Obed Ward
Ottimo foglio di riferimento per temi WP, lo metterò tra i preferiti (e ovviamente lo twitto). Grazie!
Naeem Noor
Molto utile, l'ho appena stampato.
Blog2Life
Questi shortcode sono proprio quello che cercavo per iniziare a lavorare su nuovi temi.. grazie per il post e continuate così!
Hami
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K.
Questo è molto utile, grazie.
Jon Rawlins
L'ho ritwittato per te. Sto per configurare un blog per me stesso, quindi questo sito è stato molto utile.
Angad Sodhi
Aah! Lo sto salvando subito nei preferiti..
Riferirsi al tema predefinito per questi piccoli dettagli è ormai storia!
Grazie mille.
DaveK
Cool, Thanks for sharing, consider it tweeted