子テーマのHeader.phpにコードを追加するにはどうすればよいですか？

Question

子テーマのHeader.phpにコードを追加するにはどうすればよいですか？

- 21
- 68118 2012-02-27
初めて子テーマを作成していますが、ヘッダーに追加されたコードに関していくつか質問がありました.

子以外のテーマでは、Google Analytics、Googleウェブマスターツール、売買広告の購入、Facebookのオープングラフなど、header.phpファイルに追加する特定のコードがあります.

子テーマでこれをどのように行いますか?子テーマでheader.phpファイルを作成しますか?もしそうなら、これはどのように行われますか?cssで使用した@importと同じですか?

ありがとう.

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 回答

投票

- 5
- 2012-02-27
子テーマのヘッダーを変更するには、header.phpを親テーマから子テーマにコピーしてから変更します.WordPressは、子テーマにheader.phpがあることを確認し、親テーマのheader.phpの代わりにそれを使用します

子テーマに配置したテンプレートファイルは、WordPressから呼び出されたときに、親テーマの同じファイルよりも優先されます.

タグに含まれるものはすべて、Briansanswerの関数などを使用して実行する必要があります.テーマ固有の場合は、追加の手順を実行せずに、テーマフォルダー内のfunctions.phpというファイルに配置できます.

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.
- トム、ありがとう.したがって、header.phpに5つの異なるコードの断片をインストールする必要がある場合、1つのプラグインを作成してそれをインストールできますか?それでもheader.phpファイルを子テーマにコピーする必要がありますか?
  
  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
- はい、5つのプラグインを作成する理由はありません
  
  Yes there is no reason to make 5 plugins
  - 0
  - 2012-02-27
  - Tom J Nowell
- @RickSmithプラグインに抽象化する場合、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
- このソリューションの問題は、テーマが更新されると、作成者が行ったheader.phpの修正を見逃してしまうことです.
  
  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はファイル全体を上書きしますか、それとも親ファイルに新しいコンテンツを追加するだけですか?
  
  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

Brian Fegter に感謝します.この回答が役に立った場合は、上記のブライアンの回答を評価してください.

これは、独自のプラグインによって「ヘッダー」に物事を追加する方法の完全に機能する例です.この場合、[共有]ボタンと[いいね]ボタンにFacebook OpenGraphのプロパティを追加しています.

サンプルコードの冒頭にある「プラグインスクリプト」で指定された名前のPHPファイルを作成し、拡張子のない同じ名前のフォルダーに配置して、このフォルダーを宛先「/wp」にコピーするだけです. -コンテンツ/プラグイン」.

次に、「Wordpress」内で「プラグイン」を更新すると、新しいプラグインがインストールされていることがわかります.アクティベートするだけで、ページにOpen GraphFacebookとTwitterのメタデータが含まれるようになります.

ここに画像の説明を入力

非常に重要: PHPファイルはBOMなしでUTF-8でエンコードする必要があり、最後に文字を含めないでください.これを確認する必要があります.

 <?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
}
?>

プラグインの機能に興味のある人.

タイトルは、現在のページの名前を連結したものになりますとサイト名.
「metadescription」というカスタムフィールドが存在する場合、プラグインは試行しますこのフィールドから説明を取得します.それ以外の場合は、抜粋からの説明.
画像として、プラグインは注目のサムネイルを使用しようとしますページ上の画像.

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.

HTML属性の内容には `esc_attr()`を使用してください.

Please use `esc_attr()` for the HTML attribute contents.
- 2
- 2014-08-14
- fuxia
あなたが私に言ったように私はesc_attr()を使うように修正しました.ありがとうございました.

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

wp_headアクションにフックします.プレゼンテーション層から抽象化するために、これをプラグインに配置します.これにより、スケーラビリティとテーマの変更が可能になります.これにより、あるテーマから次のテーマへの移行でステップを逃した場合の分析の巻き添え被害も防止されます.

 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
}

ありがとう.プラグインを作成した経験がありません.ヘッダーに追加したいコードが約5つあります.それぞれにプラグインを作成する必要がありますか?

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
@RickSmith上記の投稿にプラグイン形式を追加しました

@RickSmith I added the plugin format to the post above
- 0
- 2012-02-27
- Brian Fegter
親テーマ、子テーマ、またはその他のテーマを使用するかどうかにかかわらず、*正しい*アプローチは、適切なアクションフックにフックされたコールバックにそのようなコードを配置することです.このコードをテーマの `functions.php`ファイルに入れるか、さらに良いことに、ブライアンが提案したように、[**サイト固有のプラグイン**](http://ottopress.com/2011/作成-サイト固有のスニペット-プラグイン/).

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どうもありがとう.PHP/子のテーマでの作業は私にとって新しいので、私は進むにつれて学習しています.あなたの忍耐に感謝します.:)私の古いテーマでは、エディターではなくワードプレスの管理者になり、これをヘッダーに追加しました.これらすべてをプラグインに追加するためのより良い方法はありますか?

@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問題ありません.それがこのフォーラムが存在する理由です.:)

@RickSmith No problem. That's why this forum exists. :)
- 0
- 2012-02-27
- Brian Fegter
@BrianFegterわかりました.上記のコードをプラグインに配置したところ、アクティブにしようとするとこのエラーが発生します.私が間違っていることは何だと思いますか?解析エラー:構文エラー、22行目の/home/downsynd/public_html/wpdallas.com/test/wp-content/plugins/Ricks-Code/Rick-Widget.phpの予期しない「<」

@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
@RickSmith `Rick-Widget.php`の*すべて*を[PasteBin](http://pastebin.com)に投稿してリンクできますか?

@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は、サイト固有のものはすべてその1つのプラグインに入れる必要があります.

@RickSmith like Chip posted, anything site specific should go in that one plugin.
- 0
- 2012-02-27
- Brian Fegter
@BrianFegterここに行きます.http://pastebin.com/cLLkdiDv

@BrianFegter Here ya go. http://pastebin.com/cLLkdiDv
- 0
- 2012-02-27
- Rick Smith
@BrianFegterそのパストビンが期限切れになりました.こちらが新しいものです.http://pastebin.com/kmmKkSDS

@BrianFegter That pastbin expired. here is a new one. http://pastebin.com/kmmKkSDS
- 0
- 2012-02-27
- Rick Smith
@RickSmith私の最新の編集を参照してください.PHP構文が間違っています.関数に生のHTMLを投稿する場合は、echoを使用するか、phpタグを閉じる必要があります.`?>あなたの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ありがとうございます！わかった！それはうまくいった.もう1つの簡単な質問.以前のテーマでは、テーマのフッターセクションに追加した売買Javaスクリプトがありました(テーマが最初に読み込まれるように指示されました).ここにそのコードを追加しても大丈夫ですか、それともに追加する必要がありますか?フッター?)

@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
wp_footerに別のアクションとコールバックを追加するだけです

You can just add another action and callback for wp_footer
- 0
- 2012-02-27
- Brian Fegter
@BrianFegterわかりました、これらすべてをフッターに入れることをお勧めしますか?グーグルアリのように.ウェブマスターツールなど...?ベストプラクティスが何であるかわからない....

@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それは私の賃金等級から外れています.笑

@RickSmith That's out of my pay grade. lol
- 0
- 2012-02-27
- Brian Fegter
@BrianFegter Ha、ha ..ありがとう！:)ワードプレスサイトを構築していますか?

@BrianFegter Ha,ha..thanks! :) Do you build wordpress sites?
- 0
- 2012-02-27
- Rick Smith
@BrianFegterわかりました.では、そのプラグインにJavaスクリプトを追加しようとしています.上記の例に進むと、Javaスクリプトをプラグインに追加するにはどうすればよいですか.

@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
私の最新の編集をご覧ください.:)

Please see my latest edit. :)
- 0
- 2012-02-27
- Brian Fegter
@BrianFegterこれを手伝ってくれてありがとう.これがペーストビンです、私はまだ何か間違ったことをしていると思います.:) 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
[チャットでこのディスカッションを続けましょう](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