如何在子主题中将代码添加到Header.php？

Question

如何在子主题中将代码添加到Header.php？

- 21
- 68118 2012-02-27
我第一次创建子主题,并且我对添加到标头中的代码有一些疑问.

在非子主题中,我添加了某些代码到我的header.php文件中,例如Google Analytics(分析),Google网站站长工具,买卖广告,Facebook开放图等.

您如何在儿童主题中做到这一点?您是否在子主题中创建了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调用时都将优先于父主题中的同一文件.

标签中的所有内容均应使用Brians Answer中的函数来完成.如果是特定于主题的,则可以将其放在主题文件夹中的名为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个不同的代码片段,我可以只制作一个插件并安装它吗?我仍然需要将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 .如果此答案有帮助,请在上方为 Brian的答案进行评分.

这是一个功能齐全的示例,说明如何通过自己的插件将内容添加到"标头"中.在这种情况下,我将为"共享"和"喜欢"按钮添加Facebook Open Graph的属性.

只需在示例代码的开头创建一个名称为" Plugin Script"中指定的PHP文件,然后将其放在具有相同名称但不带扩展名的文件夹中,然后将此文件夹复制到目标位置"/wp" -内容/插件".

然后在" Wordpress"中刷新"插件",您将看到已安装新插件.只要激活它,您的页面就会开始包含Open Graph Facebook和Twitter的元数据.

在此处输入图片描述

非常重要::PHP文件必须使用UTF-8编码,且不带BOM,并且末尾绝对没有字符.必须确保这一点.

 <?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
无论使用父主题,子主题还是任何主题,* correct *方法都是将此类代码放入回调中,并挂接到适当的动作挂钩中.您可以将此代码放在主题的`functions.php`文件中,或者甚至更好,如Brian所建议的那样,将其放在[**特定于站点的插件**](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/child主题对我来说是新手,因此我正在学习.感谢您的耐心等待.:)在我的旧主题中,我进入wordpress admin,而不是编辑器,并将其添加到标题中.metaproperty="fb:page_id" content=" 12345678"/>是将所有这些添加到插件中的更好方法吗?

@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好,所以我只是将上面提到的代码放入该插件中,当它尝试激活时,我得到了这个错误.您认为我做错了什么?解析错误:语法错误,/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就像Chip发布的一样,任何特定于站点的内容都应该放在该插件中.

@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谢谢你！我知道了！那行得通.再快一个问题.在我的旧主题中,我在主题的页脚部分添加了一些买卖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哈,哈..谢谢！:)您建立wordpress网站吗?

@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