Comment ajouter du code à Header.php dans un thème enfant?

Question

Comment ajouter du code à Header.php dans un thème enfant?

- 21
- 68118 2012-02-27
Je crée unthèmeenfantpour lapremièrefoiset j'avais quelques questions concernant le code ajouté à l'en-tête.

Dans unthèmenonenfant,il y a un certain code quej'ajoute àmonfichier header.phptel quegoogle analytics,outilsgoogle webmaster,annonces d'achat-vente,graphique ouvert Facebook,etc.

Commentfaites-vous cela dans unthèmeenfant?Créez-vous unfichier header.php dans votrethèmeenfant?Si oui,comment cela sefait-il?Est-ce lemême que le @import quej'ai utilisé sur le css?

Merci.

I'm creating a child theme for the first time and I had a few questions regarding code added to header.

In a non child theme there is certain code I add to my header.php file such as google analytics, google webmaster tools, buy sell ads, Facebook open graph, etc....

How do you do this in a child theme? Do you create a header.php file in your child theme? If so how is this done? Is it the same as the @import as I used on the css?

Thanks.

child-theme headers open-graph

3 réponses

votes

- 5
- 2012-02-27
Pourmodifier l'en-tête d'unthèmeenfant,copiez le header.php duthèmeparent dans lethèmeenfant,puismodifiez-le.WordPress verra que vous avez un header.php dans votrethèmeenfantet l'utilisera à laplace duthèmeparent header.php

Tous lesfichiers demodèle que vousplacez dans votrethèmeenfant auront lapriorité sur lemêmefichier dans lethèmeparent lorsqu'ils seront appeléspar WordPress.

Tout ce quientre dans labalise doit êtrefaiten utilisant quelque chose comme lafonction dans la réponse de Brians.S'il s'agit d'unthème spécifique,vouspouvez leplacer dans unfichier appeléfunctions.php dans votre dossier dethème sans aucune étape supplémentaire.

To modify the header in a child theme, copy the header.php from the parent theme into the child theme and then modify it. WordPress will see that you have a header.php in your child theme and use that instead of the parent theme header.php

Any template files you put in your child theme will take priority over the same file in the parent theme when called by WordPress.

Anything that goes in the tag should be done using something such as the function in Brians answer. If it's theme specific, you can put it in a file called functions.php in your theme folder without any extra steps.
- Tom,merci.Donc,sije doisinstaller 5extraits de code différents dans le header.php,pourrais-je simplement créer unpluginet l'installer?Aurais-jeencorebesoin de copier lefichier header.php dansmonthèmeenfant?
  
  Tom, thanks. So if I need to install 5 different snips of code in the header.php, could I just make one plugin and install that? Would I still need to copy the header.php file into my child theme?
  - 0
  - 2012-02-27
  - Rick Smith
- Oui,iln'y a aucune raison defaire 5plugins
  
  Yes there is no reason to make 5 plugins
  - 0
  - 2012-02-27
  - Tom J Nowell
- @RickSmith Si vousfaites un résumé vers unplugin,iln'y a aucune raison de copier sur header.php.:)
  
  @RickSmith If you are abstracting to a plugin, there's no reason to copy over header.php. :)
  - 0
  - 2012-02-27
  - Brian Fegter
- Leproblème avec cette solutionest que lorsque lethèmeestmis àjour,vousmanquerez les correctifs dans header.php apportéspar l'auteur.
  
  The problem with this solution is that when the theme is updated, you will miss out on fixes in header.php made by the author.
  - 2
  - 2016-02-24
  - Knocks X
- WordPress remplace-t-iltout lefichier ou ajoute-t-il simplement unnouveau contenu aufichierparent?
  
  does WordPress override the whole file, or is it just appending new content to the parent file?
  - 0
  - 2020-05-31
  - Ooker

2

2014-08-13

Merci à Brian Fegter . Si cette réponse vous aide,veuilleznoter la réponse de Brian ici ci-dessus.

Ceciest unexempleentièrementfonctionnel de lafaçon d'ajouter des choses à "l'en-tête"par sonpropreplugin. Dans ce cas,j'ajoute lespropriétés de Facebook Open Graphpour lesboutons Partageret J'aime.

Créez simplement unfichier PHP avec lenom spécifié dans "Plugin Script" au début de l'exemple de code,placez-le dans un dossier dumêmenom sans l'extension,évidemment,et copiez ce dossier vers la destination "/wp -contenu/plugins ".

Ensuite,dans "Wordpress",actualisez "Plugins"et vous verrez votrenouveauplugininstallé. Activez-le simplementet vospages commenceront à contenir lesmétadonnées d'Open Graph Facebooket Twitter.

entrez la description de l'imageici

TRÈS IMPORTANT: Lefichier PHP doit êtreencodéen UTF-8 sans BOM,et ne doit avoir absolument aucun caractère à lafin. Doitgarantir cela.

 <?php
/*
    Plugin Name: My Facebook Open Graph Protocol
    Plugin Script: my-facebook-open-graph-protocol.php
    Plugin URI: 
    Description: Add Facebook Open Graph Protocol to header
    Author: Diego Soto (Thanks to 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/)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the 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;

    //Close PHP tags 
    ?>    
    <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 //Open PHP tags
}
?>

Toutepersonneintéresséepar lesfonctionnalités duplugin.

Letitre sera la concaténation dunom de lapage courante et lenom du site.
Si un champpersonnalisé appelé "métadescription"existe,lepluginessaie pourprendre la description de ce champ. Sinon,prenez le description de l'extrait.
Entant qu'image,lepluginessaie d'utiliser la vignette de la vedette image sur lapage.

Thanks to Brian Fegter. If this answer helps, please rate for Brian's answer right here above.

This is a fully functional example of how to add things to the "header" by its own plugin. In this case, I am adding the properties of Facebook Open Graph for the Share and Like buttons.

Just create a PHP file with the name specified in "Plugin Script" at the beginning of the sample code, place it in a folder with the same name without the extension, obviously, and copy this folder to the destination "/ wp-content / plugins".

Then within "Wordpress", refresh "Plugins" and you'll see your new plugin installed. Just Activate it, and your pages will begin to contain the metadata of Open Graph Facebook and Twitter.

enter image description here

VERY IMPORTANT: The PHP file must be encoded in UTF-8 without BOM, and should have absolutely no character at the end. Must ensure this.

<?php
/*
    Plugin Name: My Facebook Open Graph Protocol
    Plugin Script: my-facebook-open-graph-protocol.php
    Plugin URI: 
    Description: Add Facebook Open Graph Protocol to header
    Author: Diego Soto (Thanks to 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/)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the 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;

    //Close PHP tags 
    ?>    
    <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 //Open PHP tags
}
?>

Anyone who is interested in the functionality of the plugin.

The title will be the concatenation of the name of the current page and the site name.
If a custom field called "metadescription" exists, the plugin tries to take the description from this field. Otherwise, take the description from the excerpt.
As the image, the plugin tries to use the thumbnail of the featured image on the page.

Veuillez utiliser `esc_attr ()`pour le contenu des attributs HTML.

Please use `esc_attr()` for the HTML attribute contents.
- 2
- 2014-08-14
- fuxia
J'aimodifiépour utiliseresc_attr () comme vousme l'avez dit.Je vous remercie.

I modified to use esc_attr() as you told me. Thank you.
- 0
- 2014-08-14
- DiegoSoto

Brian Fegter · Accepted Answer · 2012-02-27

26

2012-02-27

Jem'accrocherais à l'action wp_head.Jeplacerais ceci dans unplugin afin de l'abstraire de votre couche deprésentation.Celapermet l'évolutivitéet le changement dethèmes.Cela évite égalementtout dommage collatéral d'analyse si une étapeestmanquée dans lamigration d'unthème à l'autre.

 add_action('wp_head', 'wpse_43672_wp_head');
function wpse_43672_wp_head(){
    //Close PHP tags 
    ?>
    ADD YOUR PLAIN HTML CODE HERE
    <?php //Open PHP tags
}

I would hook into the wp_head action. I would place this in a plugin so as to abstract it from your presentation layer. This allows for scalability and changing of themes. This also prevents any analytics collateral damage if a step is missed in migration from one theme to the next.

add_action('wp_head', 'wpse_43672_wp_head');
function wpse_43672_wp_head(){
    //Close PHP tags 
    ?>
    ADD YOUR PLAIN HTML CODE HERE
    <?php //Open PHP tags
}

Merci.Jen'ai aucuneexpérience dans la création d'unplug-in. J'aienviron 5morceaux de code quej'aimerais ajouter dans l'en-tête.Aurais-jebesoin defaire unplug-inpour chacun d'eux?

Thanks. I don't have any experience in making a plug in. I have about 5 pieces of code I'd like to add into the header. Would I need to make a plug in for each of them?
- 0
- 2012-02-27
- Rick Smith
@RickSmithj'ai ajouté leformat duplugin aupost ci-dessus

@RickSmith I added the plugin format to the post above
- 0
- 2012-02-27
- Brian Fegter
Que vous utilisiez unthèmeparent,unthèmeenfant oun'importe quelthème,l'approche * correcte * consiste àplacer ce code dans un rappel,accroché au crochet d'action approprié.Vouspouvezmettre ce code dans lefichier `functions.php` duthème,ou,mieuxencoreet comme Brian l'a suggéré,lemettre dans [un **plugin spécifique au site **] (http://ottopress.com/2011/création-d'un-plug-in-d'extraits-de-site-spécifique/).

Whether using a Parent Theme, Child Theme, or any Theme whatsoever, the *correct* approach is to put such code in a callback, hooked into the appropriate action hook. You could put this code in the Theme's `functions.php` file, or, even better and as Brian has suggested, put it in [a **site-specific Plugin**](http://ottopress.com/2011/creating-a-site-specific-snippets-plugin/).
- 4
- 2012-02-27
- Chip Bennett
@BrianFegter Mercibeaucoup.Travailler avec desthèmes Php/enfantsestnouveaupourmoi,doncj'apprends aufuret àmesure. Mercipour votrepatience. :) Dansmon ancienthème,je suis allé dans wordpress admin,puis dans l'éditeuret j'ai ajouté ceci à l'en-tête. Lameilleurefaçon d'ajoutertout cela auplug-in?

@BrianFegter Thanks so much. Working with Php / child themes is new to me, so I"m learning as I go. Thanks for your patience. :) In my old theme, I went into wordpress admin, than to the editor and added this to the header. Is the better way to add all of that to the plug in?
- 0
- 2012-02-27
- Rick Smith
@RickSmith Pas deproblème.C'estpourquoi ceforumexiste.:)

@RickSmith No problem. That's why this forum exists. :)
- 0
- 2012-02-27
- Brian Fegter
@BrianFegter Ok,doncje viens deplacer le codementionné ci-dessus dans ceplugin,et quandilessaie de s'activer,j'obtiens cetteerreur.Quepensez-vous queje fais demal?Erreur d'analyse:erreur de syntaxe,'<'inattendu dans/home/downsynd/public_html/wpdallas.com/test/wp-content/plugins/Ricks-Code/Rick-Widget.phpen ligne 22

@BrianFegter Ok, so I just placed the above mentioned code into that plugin, and when it tries to active I get this error. What do you think I'm doing wrong? Parse error: syntax error, unexpected '<' in /home/downsynd/public_html/wpdallas.com/test/wp-content/plugins/Ricks-Code/Rick-Widget.php on line 22
- 0
- 2012-02-27
- Rick Smith
@RickSmithpouvez-vouspublier *tout * de `Rick-Widget.php` dans un [PasteBin] (http://pastebin.com),et le lier?

@RickSmith can you post *all* of `Rick-Widget.php` into a [PasteBin](http://pastebin.com), and link it?
- 0
- 2012-02-27
- Chip Bennett
@RickSmith comme Chipposté,tout ce quiest spécifique au site devrait aller dans ceplugin.

@RickSmith like Chip posted, anything site specific should go in that one plugin.
- 0
- 2012-02-27
- Brian Fegter
@BrianFegter Voilà.http://pastebin.com/cLLkdiDv

@BrianFegter Here ya go. http://pastebin.com/cLLkdiDv
- 0
- 2012-02-27
- Rick Smith
@BrianFegter Cepastbin aexpiré.en voici unnouveau.http://pastebin.com/kmmKkSDS

@BrianFegter That pastbin expired. here is a new one. http://pastebin.com/kmmKkSDS
- 0
- 2012-02-27
- Rick Smith
@RickSmith Voirma dernièremodification.Votre syntaxe PHPestincorrecte.Vous devez utiliserecho oufermer vosbalisesphp si vous souhaitezpublier du HTMLbrut dans unefonction.`?> VOTRE HTML
@RickSmith See my latest edit. Your PHP syntax is wrong. You have to use echo or close out your php tags if you want to post raw HTML in a function. `?> YOUR HTML

0

2012-02-27

Brian Fegter
@BrianFegter Mercimec!J? ai compris!Ça amarché.Encore unepetite question.Dansmon ancienthème,j'avais un scriptjava d'achat-vente quej'ai ajouté à la section depied depage duthème (onm'a dit de lefairepour quemonthème soit chargéen premier.) Serait-il correct d'ajouter ce codeici,ou devrais-je l'ajouter àlepied depage?)

@BrianFegter Thanks man! I got it! That worked. One more quick question. In my old theme I had some buy sell java script that I added to the footer section of theme (I was told to do that so my theme loaded first.) Would it be ok to add that code here, or should I add it to the footer? )
- 0
- 2012-02-27
- Rick Smith
Vouspouvez simplement ajouter une autre actionet un rappelpour wp_footer

You can just add another action and callback for wp_footer
- 0
- 2012-02-27
- Brian Fegter
@BrianFegter ok,suggérez-vous demettretout cela dans lepied depage?Comme lafourmigoogle.outilspour les webmasters,etc ...?Jene saispas quelleest lameilleurepratique ...

@BrianFegter ok, Do you suggest putting all of this stuff in the footer? Like the google ant. webmaster tools, etc...? Not sure what the best practice is....
- 0
- 2012-02-27
- Rick Smith
@RickSmith C'est hors demon salaire.lol

@RickSmith That's out of my pay grade. lol
- 0
- 2012-02-27
- Brian Fegter
@BrianFegter Ha,ha..merci!:) Construisez-vous des sites wordpress?

@BrianFegter Ha,ha..thanks! :) Do you build wordpress sites?
- 0
- 2012-02-27
- Rick Smith
@BrianFegter Ok,alorsmaintenantj'essaie d'ajouter un scriptjava à ceplug-in. En suivant l'exemple ci-dessus,commentpuis-je y ajouter un scriptjava?

@BrianFegter Ok, so now I'm trying to add some java script to that plug in. Going on your above example, how do I add java script to it?
- 0
- 2012-02-27
- Rick Smith
Veuillez voirma dernièremodification.:)

Please see my latest edit. :)
- 0
- 2012-02-27
- Brian Fegter
@BrianFegter Merci d'avoirpris letemps dem'aider avec ça.Voici unbac àpâte,je pense queje faistoujours quelque chose demal.:) http://pastebin.com/iT0bJjGE

@BrianFegter Thanks for taking the time to help me with this. Here is a paste bin, I think I'm still doing something wrong. :) http://pastebin.com/iT0bJjGE
- 1
- 2012-02-27
- Rick Smith
laissez-nous [continuer cette discussion dans le chat] (http://chat.stackexchange.com/rooms/2630/discussion-between-brian-fegter-and-rick-smith)

let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/2630/discussion-between-brian-fegter-and-rick-smith)
- 1
- 2012-02-27
- Brian Fegter