¿Cómo agregar código a Header.php en un tema secundario?

18

Estoy creando un tema secundario por primera vez y tuve algunas preguntas sobre el código agregado al encabezado.

En un tema que no es para niños, agrego cierto código a mi archivo header.php, como google analytics, herramientas para webmasters de Google, anuncios de compra y venta, gráfico abierto de Facebook, etc.

¿Cómo se hace esto en un tema infantil? ¿Crea un archivo header.php en su tema hijo? ¿Si es así, cómo se hace? ¿Es lo mismo que el @import que usé en el CSS?

Gracias.

Rick Smith
fuente

Respuestas:

24

Me engancharía a la wp_headacción. Lo colocaría en un complemento para abstraerlo de su capa de presentación. Esto permite la escalabilidad y el cambio de temas. Esto también evita cualquier daño colateral analítico si se omite un paso en la migración de un tema a otro.

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
}
Brian Fegter
fuente
Gracias. No tengo ninguna experiencia en hacer un complemento. Tengo alrededor de 5 piezas de código que me gustaría agregar al encabezado. ¿Tendría que hacer un complemento para cada uno de ellos?
Rick Smith
@ RickSmith Agregué el formato del complemento a la publicación anterior
Brian Fegter,
44
Ya sea que use un tema principal, un tema secundario o cualquier otro tema, el enfoque correcto es colocar dicho código en una devolución de llamada, enganchado en el gancho de acción apropiado. Puede poner este código en el functions.phparchivo del tema o, mejor aún, y como Brian ha sugerido, ponerlo en un complemento específico del sitio .
Chip Bennett
1
@BrianFegter Gracias por tomarse el tiempo para ayudarme con esto. Aquí hay una papelera, creo que todavía estoy haciendo algo mal. :) pastebin.com/iT0bJjGE
Rick Smith
1
vamos a continuar esta discusión en el chat
Brian Fegter
4

Para modificar el encabezado en un tema secundario, copie el header.php del tema principal en el tema secundario y luego modifíquelo. WordPress verá que tienes un header.php en tu tema secundario y lo usarás en lugar del tema principal header.php

Cualquier archivo de plantilla que coloque en su tema secundario tendrá prioridad sobre el mismo archivo en el tema principal cuando WordPress lo llame.

Todo lo que vaya en la etiqueta debe hacerse usando algo como la función en la respuesta de Brians. Si es un tema específico, puede ponerlo en un archivo llamado functions.php en su carpeta de temas sin ningún paso adicional.

Tom J Nowell
fuente
Tom, gracias. Entonces, si necesito instalar 5 fragmentos de código diferentes en el header.php, ¿podría crear un complemento e instalarlo? ¿Seguiría necesitando copiar el archivo header.php en mi tema secundario?
Rick Smith
Sí, no hay razón para hacer 5 complementos
Tom J Nowell
@RickSmith Si está abstrayendo a un complemento, no hay razón para copiar header.php. :)
Brian Fegter
2
El problema con esta solución es que cuando se actualiza el tema, se perderán las correcciones en header.php hechas por el autor.
Golpea X
2

Gracias a Brian Fegter . Si esta respuesta es útil, califique la respuesta de Brian aquí arriba.

Este es un ejemplo completamente funcional de cómo agregar cosas al "encabezado" mediante su propio complemento. En este caso, estoy agregando las propiedades de Facebook Open Graph para los botones Compartir y Me gusta.

Simplemente cree un archivo PHP con el nombre especificado en "Plugin Script" al comienzo del código de muestra, colóquelo en una carpeta con el mismo nombre sin la extensión, obviamente, y copie esta carpeta en el destino "/ wp-content / complementos ".

Luego, dentro de "Wordpress", actualice "Complementos" y verá su nuevo complemento instalado. Simplemente actívelo y sus páginas comenzarán a contener los metadatos de Open Graph Facebook y Twitter.

ingrese la descripción de la imagen aquí

MUY IMPORTANTE: El archivo PHP debe estar codificado en UTF-8 sin BOM, y no debe tener absolutamente ningún carácter al final. Debo asegurar esto.

<?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: /wordpress/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
}
?>

Cualquier persona interesada en la funcionalidad del complemento.

  • El título será la concatenación del nombre de la página actual y el nombre del sitio.

  • Si existe un campo personalizado llamado "metadescripción", el complemento intenta tomar la descripción de este campo. De lo contrario, tome la descripción del extracto.

  • Como imagen, el complemento intenta usar la miniatura de la imagen presentada en la página.

DiegoSoto
fuente
2
Úselo esc_attr()para el contenido del atributo HTML.
fuxia
Modifiqué para usar esc_attr () como me dijiste. Gracias.
DiegoSoto