Come aggiungere codice al file Header.php in un tema child?

Question

Come aggiungere codice al file Header.php in un tema child?

27 feb 2012, 17:40:36

Visualizzazioni: 91.7K

Voti: 27

Sto creando un tema child per la prima volta e ho alcune domande riguardo il codice da aggiungere nell'header.

In un tema non-child c'è del codice specifico che aggiungo al file header.php come Google Analytics, Google Webmaster Tools, Buy Sell Ads, Facebook Open Graph, ecc...

Come si fa questo in un tema child? Devo creare un file header.php nel tema child? Se sì, come si fa? È lo stesso processo dell'@import che ho usato per il CSS?

Grazie.

Rick Smith

471

child theme intestazioni open graph

Tutte le risposte alla domanda

Commenti

Grazie. Non ho alcuna esperienza nella creazione di un plugin. Ho circa 5 pezzi di codice che vorrei aggiungere nell'header. Dovrei creare un plugin per ognuno di essi?

Rick Smith

27 feb 2012 18:26:16

@RickSmith Ho aggiunto il formato del plugin al post sopra

Brian Fegter

27 feb 2012 18:35:25

Sia che si utilizzi un Parent Theme, un Child Theme o qualsiasi tipo di Theme, l'approccio corretto è inserire tale codice in un callback, agganciato all'appropriato action hook. Potresti inserire questo codice nel file functions.php del Theme, o, ancora meglio e come suggerito da Brian, inserirlo in un Plugin specifico per il sito.

Chip Bennett

27 feb 2012 19:33:44

@BrianFegter Grazie mille. Lavorare con Php / child themes è una novità per me, quindi sto imparando strada facendo. Grazie per la tua pazienza. :) Nel mio vecchio tema, sono andato nell'admin di WordPress, poi nell'editor e ho aggiunto questo all'header. <meta property="fb:page_id" content="12345678" /> È meglio aggiungere tutto questo al plugin?

Rick Smith

27 feb 2012 20:10:02

@RickSmith Nessun problema. È proprio per questo che esiste questo forum. :)

Brian Fegter

27 feb 2012 20:10:52

Mostra i restanti 13 commenti

Aggiungere uno Snippet di Codice

HTML

Se vuoi aggiungere uno snippet di codice, ad esempio un meta tag, all'interno del tag <head>, dovresti usare l'azione wp_head:

add_action( 'wp_head', 'wpse_43672_wp_head' );
function wpse_43672_wp_head() : void {
    ?>
    <meta ..... />
    <?php
}

Esistono anche admin_head e wp_footer

Javascript & CSS

Potresti usare il codice sopra per aggiungere anche Javascript, ma invece il JS personalizzato dovrebbe essere accodato come file JS, oppure incluso come JS inline tramite wp_add_inline_script collegato a un handle JS già accodato.

https://developer.wordpress.org/reference/functions/wp_add_inline_script/

Lo stesso vale per il CSS, che ha wp_add_inline_style https://developer.wordpress.org/reference/functions/wp_add_inline_style/

Modificare l'Header del Sito

Nota che una volta fatto questo, non vedrai le modifiche apportate nel tema genitore quando si aggiorna per quei file che hai sovrascritto e modificato.

In un Tema a Blocchi

Se il tuo tema è un tema a blocchi, puoi farlo andando nell'editor del sito e apportando modifiche nell'area di amministrazione.

In un Tema Classico

Se il tuo sito utilizza un tema PHP classico, puoi usare un child theme.

Per modificare l'header in un child theme, copia il file header.php dal tema genitore nel child theme e poi modificarlo. WordPress vedrà che hai un header.php nel tuo child theme e lo userà al posto di quello del tema genitore.

Qualsiasi file template che inserisci nel tuo child theme avrà la priorità sullo stesso file nel tema genitore quando viene chiamato da WordPress.

Qualsiasi elemento che va nel tag <head> dovrebbe essere fatto usando qualcosa come la funzione nella risposta di Brian. Se è specifico del tema, puoi inserirlo in un file chiamato functions.php nella cartella del tuo tema senza passaggi aggiuntivi.

Tom J Nowell

60.7K

27 feb 2012 18:36:33

Commenti

Tom, grazie. Quindi se ho bisogno di installare 5 diversi snippet di codice nel header.php, potrei semplicemente creare un unico plugin e installare quello? Dovrei comunque copiare il file header.php nel mio child theme?

Rick Smith

27 feb 2012 19:58:53

Sì, non c'è motivo di creare 5 plugin

Tom J Nowell

27 feb 2012 19:59:39

@RickSmith Se stai astrattando in un plugin, non c'è motivo di copiare header.php. :)

Brian Fegter

27 feb 2012 20:16:10

Il problema con questa soluzione è che quando il tema viene aggiornato, perderai le correzioni apportate dall'autore nel file header.php.

Matthew S

24 feb 2016 09:32:42

WordPress sovrascrive l'intero file o si limita ad aggiungere nuovi contenuti al file genitore?

Ooker

31 mag 2020 11:44:10

Grazie a Brian Fegter. Se questa risposta ti è stata utile, valuta la risposta di Brian qui sopra.

Questo è un esempio completamente funzionante di come aggiungere elementi all'"header" tramite un proprio plugin. In questo caso, sto aggiungendo le proprietà di Facebook Open Graph per i pulsanti Condividi e Mi Piace.

Basta creare un file PHP con il nome specificato in "Plugin Script" all'inizio del codice di esempio, posizionarlo in una cartella con lo stesso nome senza l'estensione, ovviamente, e copiare questa cartella nella destinazione "/wp-content/plugins".

Poi, all'interno di "WordPress", aggiorna la sezione "Plugin" e vedrai il tuo nuovo plugin installato. Attivalo semplicemente e le tue pagine inizieranno a contenere i metadati di Open Graph Facebook e Twitter.

Descrizione immagine qui

MOLTO IMPORTANTE: Il file PHP deve essere codificato in UTF-8 senza BOM e non deve assolutamente avere alcun carattere alla fine. Assicurati di questo.

<?php
/*
    Plugin Name: My Facebook Open Graph Protocol
    Plugin Script: my-facebook-open-graph-protocol.php
    Plugin URI: 
    Description: Aggiunge il protocollo Open Graph di Facebook all'header
    Author: Diego Soto (Grazie a Brian Fegter)
    Donate Link: 
    License: GPL    
    Version: 0.1-alpha
    Author URI: https://wordpress.stackexchange.com/questions/43672/how-to-add-code-to-header-php-in-a-child-theme
    Text Domain: myfogp
    Domain Path: languages/
*/

/*  Copyright 2014 Diego Soto  (http://disientoconusted.blogspot.com.ar/)

    Questo programma è software libero; puoi redistribuirlo e/o modificarlo
    secondo i termini della GNU General Public License, versione 2, come
    pubblicato dalla Free Software Foundation.

    Questo programma è distribuito nella speranza che sia utile,
    ma SENZA ALCUNA GARANZIA; senza nemmeno la garanzia implicita di
    COMMERCIABILITÀ o IDONEITÀ PER UN PARTICOLARE SCOPO. Vedere la
    GNU General Public License per maggiori dettagli.

    Dovresti aver ricevuto una copia della GNU General Public License
    insieme a questo programma; in caso contrario, scrivi alla Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

add_action('wp_head', 'wpse_43672_wp_head');

function wpse_43672_wp_head(){
    $title = get_the_title() ." &lsaquo; ". get_bloginfo( "name", "display" );

    $src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), array( 90,55 ), false, "" ); 

    $face_metad = get_post_meta(get_the_ID(), "metadescription", true);

    $twitter_metad = get_post_meta(get_the_ID(), "metadescription140", true);
    if (empty($twitter_metad)) 
        $twitter_metad = $face_metad;

    //Chiudi i tag PHP 
    ?>    
    <meta property="og:title" content="<?php echo esc_attr($title); ?>" />
    <meta property="og:image" content="<?php echo esc_attr($src[0]); ?>" />
    <meta property="og:url" content="<?php the_permalink(); ?>" />
    <meta property="og:description" content="<?php if (!empty($face_metad)) echo esc_attr($face_metad); else the_excerpt(); ?>" />

    <meta name="twitter:title" content="<?php echo esc_attr($title); ?>" />
    <meta name="twitter:image" content="<?php echo esc_attr($src[0]); ?>" />    
    <meta name="twitter:url" content="<?php the_permalink(); ?>" />
    <meta name="twitter:description" content="<?php if (!empty($twitter_metad)) echo esc_attr($twitter_metad); else the_excerpt(); ?>" />
    <?php //Apri i tag PHP
}
?>

Per chi è interessato alla funzionalità del plugin.

Il titolo sarà la concatenazione del nome della pagina corrente e del nome del sito.
Se esiste un campo personalizzato chiamato "metadescription", il plugin tenta di prendere la descrizione da questo campo. Altrimenti, prende la descrizione dall'estratto.
Come immagine, il plugin tenta di utilizzare la miniatura dell'immagine in evidenza della pagina.

Diego Soto

121

14 ago 2014 02:12:12

Commenti

Per favore, usa esc_attr() per il contenuto degli attributi HTML.

fuxia

14 ago 2014 03:27:38

Ho modificato per utilizzare esc_attr() come mi hai detto. Grazie.

Diego Soto

14 ago 2014 07:19:48

Brian Fegter 10K · Accepted Answer · 2012-02-27T17:47:21Z

Mi collegherei all'azione wp_head. Metterei questo codice in un plugin per separarlo dal livello di presentazione. Questo permette scalabilità e cambiamenti di tema. Previene anche danni collaterali alle analisi se un passaggio viene saltato durante la migrazione da un tema all'altro.

add_action('wp_head', 'wpse_43672_wp_head');
function wpse_43672_wp_head(){
    //Chiudi i tag PHP
    ?>
    AGGIUNGI QUI IL TUO CODICE HTML
    <?php //Apri i tag PHP
}

Brian Fegter

10K

27 feb 2012 17:47:21