Как добавить код в Header.php в дочерней теме?

Question

Как добавить код в Header.php в дочерней теме?

27 февр. 2012 г., 17:40:36

Просмотры: 91.7K

Голосов: 27

Я впервые создаю дочернюю тему и у меня возникли вопросы относительно добавления кода в header.

В обычной теме я добавляю определенный код в файл header.php, такой как Google Analytics, инструменты Google Webmaster, Buy Sell Ads, Facebook Open Graph и т.д...

Как это сделать в дочерней теме? Нужно ли создавать файл header.php в дочерней теме? Если да, то как это делается? Это делается так же, как @import, который я использовал для CSS?

Спасибо.

Rick Smith

471

дочерняя тема заголовки open graph

Все ответы на вопрос

Комментарии

Спасибо. У меня нет опыта в создании плагинов. У меня есть около 5 фрагментов кода, которые я хотел бы добавить в заголовок. Нужно ли создавать отдельный плагин для каждого из них?

Rick Smith

27 февр. 2012 г. 18:26:16

@RickSmith Я добавил формат плагина в пост выше

Brian Fegter

27 февр. 2012 г. 18:35:25

Независимо от того, используете ли вы Родительскую Тему, Дочернюю Тему или любую другую Тему, правильный подход заключается в том, чтобы поместить такой код в колбэк, подключенный к соответствующему хуку действия. Вы можете поместить этот код в файл темы functions.php или, что еще лучше, как предложил Брайан, поместить его в сайт-специфичный Плагин.

Chip Bennett

27 февр. 2012 г. 19:33:44

@BrianFegter Большое спасибо. Работа с PHP / дочерними темами для меня в новинку, так что я учусь по ходу дела. Спасибо за ваше терпение. :) В моей старой теме я заходил в админку WordPress, затем в редактор и добавлял это в шапку: <meta property="fb:page_id" content="12345678" />. Будет ли правильнее добавить всё это в плагин?

Rick Smith

27 февр. 2012 г. 20:10:02

@RickSmith Без проблем. Именно для этого и существует этот форум. :)

Brian Fegter

27 февр. 2012 г. 20:10:52

Показать остальные 13 комментариев

Добавление фрагмента кода

HTML

Если вы хотите добавить фрагмент кода, например метатег и т.д., в <head>, то следует использовать действие wp_head:

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

Также существуют admin_head и wp_footer

Javascript & CSS

Вы можете использовать приведённый выше код для добавления JavaScript, но пользовательский JS должен быть добавлен в очередь как JS-файл или включён как встроенный JS через wp_add_inline_script, прикреплённый к существующему обработчику JS в очереди.

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

То же самое относится и к CSS, для которого существует wp_add_inline_style https://developer.wordpress.org/reference/functions/wp_add_inline_style/

Изменение заголовка сайта

Обратите внимание, что после этого вы не увидите изменений, внесённых в родительскую тему при её обновлении, для тех файлов, которые вы переопределили и изменили.

В блочной теме

Если ваша тема является блочной, то вы можете сделать это, перейдя в редактор сайта и внеся изменения в административной области.

В классической теме

Если ваш сайт использует классическую PHP-тему, то вы можете использовать дочернюю тему.

Чтобы изменить заголовок в дочерней теме, скопируйте файл header.php из родительской темы в дочернюю и затем измените его. WordPress увидит, что у вас есть header.php в дочерней теме, и будет использовать его вместо header.php родительской темы.

Любые файлы шаблонов, которые вы поместите в дочернюю тему, будут иметь приоритет над такими же файлами в родительской теме при вызове WordPress.

Всё, что должно находиться в теге <head>, должно быть сделано с использованием чего-то вроде функции в ответе Брайана. Если это относится к теме, вы можете поместить это в файл functions.php в папке вашей темы без дополнительных действий.

Tom J Nowell

60.7K

27 февр. 2012 г. 18:36:33

Комментарии

Том, спасибо. Если мне нужно установить 5 разных сниппетов кода в header.php, могу ли я просто создать один плагин и установить его? Нужно ли мне по-прежнему копировать файл header.php в дочернюю тему?

Rick Smith

27 февр. 2012 г. 19:58:53

Да, нет необходимости создавать 5 плагинов

Tom J Nowell

27 февр. 2012 г. 19:59:39

@RickSmith Если вы переносите функционал в плагин, нет необходимости копировать header.php. :)

Brian Fegter

27 февр. 2012 г. 20:16:10

Проблема этого решения в том, что при обновлении темы вы упустите исправления в файле header.php, сделанные автором.

Matthew S

24 февр. 2016 г. 09:32:42

WordPress заменяет весь файл целиком или просто добавляет новое содержимое к родительскому файлу?

Ooker

31 мая 2020 г. 11:44:10

Спасибо Брайану Фегтеру. Если этот ответ помог, пожалуйста, оцените ответ Брайана прямо здесь выше.

Это полностью рабочий пример того, как добавить элементы в "header" с помощью собственного плагина. В данном случае я добавляю свойства Facebook Open Graph для кнопок "Поделиться" и "Нравится".

Просто создайте PHP-файл с именем, указанным в "Plugin Script" в начале примера кода, поместите его в папку с таким же именем без расширения, очевидно, и скопируйте эту папку в место назначения "/wp-content/plugins".

Затем в "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: Добавляет протокол Facebook Open Graph в заголовок
    Author: Диего Сото (Спасибо Брайану Фегтеру)
    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 Диего Сото  (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;

    //Закрываем 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 //Открываем PHP-теги
}
?>

Для тех, кто заинтересован в функциональности плагина.

Заголовок будет объединением названия текущей страницы и имени сайта.
Если существует пользовательское поле с именем "metadescription", плагин пытается взять описание из этого поля. В противном случае берет описание из краткого содержания.
В качестве изображения плагин пытается использовать миниатюру избранного изображения на странице.

Diego Soto

121

14 авг. 2014 г. 02:12:12

Комментарии

Пожалуйста, используйте esc_attr() для содержимого HTML-атрибутов.

fuxia

14 авг. 2014 г. 03:27:38

Я изменил код для использования esc_attr(), как вы сказали. Спасибо.

Diego Soto

14 авг. 2014 г. 07:19:48

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

Я бы подключился к действию wp_head. Я бы разместил это в плагине, чтобы отделить от слоя представления. Это обеспечивает масштабируемость и возможность смены темы. Это также предотвращает любые побочные эффекты аналитики, если какой-то шаг пропущен при миграции с одной темы на другую.

add_action('wp_head', 'wpse_43672_wp_head');
function wpse_43672_wp_head(){
    //Закрываем PHP теги 
    ?>
    ДОБАВЬТЕ ВАШ ОБЫЧНЫЙ HTML КОД ЗДЕСЬ
    <?php //Открываем PHP теги
}

Brian Fegter

10K

27 февр. 2012 г. 17:47:21