15. Fondo y cabecera personalizados

(El artículo original y en inglés, fue publicado el 17 de noviembre de 2012)

ThemeShaper es el sitio del Equipo de Temas de Automattic, que, en junio de 2009, publicó una muy popular serie de 11 artículos de Ian Stewart, bajo el título: How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (Como crear un Tema de WordPress: el tutorial definitivo).
El año pasado, reflotó y actualizó ese tutorial. Esta vez con 16 artículos a cargo de Michelle Langston:  The ThemeShaper WordPress Theme Tutorial: 2nd Edition (Tutorial de Temas de WordPress de ThemeShaper. Segunda edición).
Me propongo traducir libremente esas 16 entradas (además de la introducción) e ir publicándolas a medida que las tenga listas.
Al final de cada entrada va el listado con todas las entradas de este tutorial.

Con las plantillas y todo el css ya en su lugar, completemos nuestro tema agregándole la posibilidad de darle un toque personal mediante fondos y cabeceras personalizadas (Custom Backgrounds y Custom Headers).

Recomiendo que el agregado de soporte para esta característica se haga después de haber completado todo el css de su Tema. Es más rápido de esta manera, porque puede previsualizar la cabecera personalizada (Custom Header) y ajustarla al diseño de su Tema. Además, es más sencillo revisar y corregir la implementación de los fondos y las cabeceras cuando su diseño está completo. ¡Piense en ellos como la cereza en la torta de su Tema!

Atención: Los ejemplos en esta lección están basados en el diseño de la hoja de estilo de ejemplo de la lección sobre css. Si quiere que los estilos de cabecera se vean como las capturas de pantalla que se muestran en esta lección, deberá remplazar los estilos de su actual style.css con los de la descarga que se proporciona en este párrafo.

Fondo personalizado (Custom Background)

La característica Custom Background de WordPress le permite al usuario definir su propio color o imagen de fondo. Para habilitarlo echaremos mano de nuestro viejo amigo, add_theme_support(). Abra functions.php, y agregue al final el siguiente código:

/**
 * Setup the WordPress core custom background feature.
 *
 * Use add_theme_support to register support for WordPress 3.4+
 * as well as provide backward compatibility for previous versions.
 * Use feature detection of wp_get_theme() which was introduced
 * in WordPress 3.4.
 *
 * Hooks into the after_setup_theme action.
 *
 */
function shape_register_custom_background() {
    $args = array(
        'default-color' => 'e9e0d1',
    );
 
    $args = apply_filters( 'shape_custom_background_args', $args );
 
    if ( function_exists( 'wp_get_theme' ) ) {
        add_theme_support( 'custom-background', $args );
    } else {
        define( 'BACKGROUND_COLOR', $args['default-color'] );
        define( 'BACKGROUND_IMAGE', $args['default-image'] );
        add_custom_background();
    }
}
add_action( 'after_setup_theme', 'shape_register_custom_background' );
 
/**

Hemos definido una función, shape_register_custom_background(), que:

1. Crea una matriz, $args, que almacena el color de fondo predefinido para nuestro Tema (línea 13). Este color es #e9e0d1 en la hoja de estilo de ejemplo de Shape (siéntase libre de definir su propio color para que combine con su diseño). Si lo desea, puede pasar otros valores en esta matriz.
2. Agrega la matriz $args a un filtro (línea 17).
3. Si existe la función wp_get_theme() (a partir de la versión 3.4 de WordPress), usamos add_theme_support() para habilitar los Custom Backgrounds, pasando $args como el parámetro con todas las opciones de nuestros fondos personalizados (línea 20).
4. Si la función wp_get_theme() no existe (en otras palabras, si estamos utilizando una versión de WordPress previa a la 3.4), habilita los Custom Backgrounds con el método que se usaba hasta WordPress 3.3 (líneas 22-24).
5. Cierra la función y la engancha a las acciones de after_setup_theme()(líneas 25-27).

¡Eso es todo lo que tiene que hacer para tener a los  Custom Backgrounds funcionando! WordPress se encarga del resto. Vaya a Apariencia → Background para verlo en acción.

Cabecera personalizada (Custom Headers)

Las Cabeceras Personalizadas (Custom Headers) han estado en la vuelta por mucho tiempo (desde la versión 2.1, para ser más exactos). Cuando le agrega soporte para Cabeceras Personalizadas a su Tema, le da a sus usuarios la capacidad de subir una imagen "título" para su sitio. Además, los usuarios también pueden elegir cambiar el color del texto de la Cabecera u ocultarlo completamente.

Desde WordPress 3.4, se puede agregar soporte para las Cabeceras Personalizadas usando la función add_theme_support(). Hay algunas opciones que podrá configurar para las Cabeceras Personalizadas, de manera de implementarlas de la forma que mejor funcionen para su Tema.
En este tutorial, nuestra implementación de las Cabeceras Personalizadas:

1. Estará basadas en el diseño visual del estilo de ejemplo Shape.
2. Permitirá a los usuarios subir una imagen de cabecera. El ancho de la imagen de cabecera estará limitado al ancho del contenedor (div) principal del sitio, pero no tendrá límite para su alto.
3. Permitirá a los usuarios cambiar el color del texto de la cabecera.
4. Permitirá a los usuarios ocultar el texto de la cabecera.

custom-header.php
Tradicionalmente, el código relacionado con las Cabeceras Personalizadas se aloja dentro de functions.php. A los efectos de mantener lo más limpio posible a nuestro functions.php, vamos a colocar todo el código de nuestras Cabeceras Personalizadas dentro de un archivo custom-header.php, y lo llamaremos desde nuestro functions.php.

Si todavía no tiene uno, muévase hasta el directorio inc y cree custom-header.php.

Continúe y agregue el siguiente código a custom-header.php. Se trata de la mayor parte del código necesario para hacer funcionar las Cabeceras Personalizadas. Vamos a analizarlo en un momento.

<?php
/**
 * Sample implementation of the Custom Header feature
 * http://codex.wordpress.org/Custom_Headers
 *
 * You can add an optional custom header image to header.php like so ...
 
    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) { ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
        </a>
    <?php } // if ( ! empty( $header_image ) ) ?>
 
 *
 * @package Shape
 * @since Shape 1.0
 */
 
/**
 * Setup the WordPress core custom header feature.
 *
 * Use add_theme_support to register support for WordPress 3.4+
 * as well as provide backward compatibility for previous versions.
 * Use feature detection of wp_get_theme() which was introduced
 * in WordPress 3.4.
 *
 * @uses shape_header_style()
 * @uses shape_admin_header_style()
 * @uses shape_admin_header_image()
 *
 * @package Shape
 */
function shape_custom_header_setup() {
    $args = array(
        'default-image'          => '',
        'default-text-color'     => 'e9e0e1',
        'width'                  => 1050,
        'height'                 => 250,
        'flex-height'            => true,
        'wp-head-callback'       => 'shape_header_style',
        'admin-head-callback'    => 'shape_admin_header_style',
        'admin-preview-callback' => 'shape_admin_header_image',
    );
 
    $args = apply_filters( 'shape_custom_header_args', $args );
 
    if ( function_exists( 'wp_get_theme' ) ) {
        add_theme_support( 'custom-header', $args );
    } else {
        // Compat: Versions of WordPress prior to 3.4.
        define( 'HEADER_TEXTCOLOR',    $args['default-text-color'] );
        define( 'HEADER_IMAGE',        $args['default-image'] );
        define( 'HEADER_IMAGE_WIDTH',  $args['width'] );
        define( 'HEADER_IMAGE_HEIGHT', $args['height'] );
        add_custom_image_header( $args['wp-head-callback'], $args['admin-head-callback'], $args['admin-preview-callback'] );
    }
}
add_action( 'after_setup_theme', 'shape_custom_header_setup' );
 
/**
 * Shiv for get_custom_header().
 *
 * get_custom_header() was introduced to WordPress
 * in version 3.4. To provide backward compatibility
 * with previous versions, we will define our own version
 * of this function.
 *
 * @todo Remove this function when WordPress 3.6 is released.
 * @return stdClass All properties represent attributes of the curent header image.
 *
 * @package Shape
 * @since Shape 1.1
 */
 
if ( ! function_exists( 'get_custom_header' ) ) {
    function get_custom_header() {
        return (object) array(
            'url'           => get_header_image(),
            'thumbnail_url' => get_header_image(),
            'width'         => HEADER_IMAGE_WIDTH,
            'height'        => HEADER_IMAGE_HEIGHT,
        );
    }
}
 
if ( ! function_exists( 'shape_header_style' ) ) :
/**
 * Styles the header image and text displayed on the blog
 *
 * @see shape_custom_header_setup().
 *
 * @since Shape 1.0
 */
function shape_header_style() {
 
    // If no custom options for text are set, let's bail
    // get_header_textcolor() options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value
    if ( HEADER_TEXTCOLOR == get_header_textcolor() && '' == get_header_image() )
        return;
    // If we get this far, we have custom styles. Let's do this.
    ?>
    <style type="text/css">
    <?php
        // Do we have a custom header image?
        if ( '' != get_header_image() ) :
    ?>
        .site-header img {
            display: block;
            margin: 1.5em auto 0;
        }
    <?php endif;
 
        // Has the text been hidden?
        if ( 'blank' == get_header_textcolor() ) :
    ?>
        .site-title,
        .site-description {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px, 1px, 1px, 1px);
        }
        .site-header hgroup {
            background: none;
            padding: 0;
        }
    <?php
        // If the user has set a custom color for the text use that
        else :
    ?>
        .site-title a,
        .site-description {
            color: #<?php echo get_header_textcolor(); ?> !important;
        }
    <?php endif; ?>
    </style>
    <?php
}
endif; // shape_header_style
 
if ( ! function_exists( 'shape_admin_header_style' ) ) :
/**
 * Styles the header image displayed on the Appearance > Header admin panel.
 *
 * @see shape_custom_header_setup().
 *
 * @since Shape 1.0
 */
function shape_admin_header_style() {
?>
    <style type="text/css">
    .appearance_page_custom-header #headimg { /* This is the container for the Custom Header preview. */
        background: #33605a;
        border: none;
        min-height: 0 !important
    }
    #headimg h1 { /* This is the site title displayed in the preview */
        font-size: 45px;
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
        font-weight: normal;
        padding: 0.8em 0.5em 0;
    }
    #desc { /* This is the site description (tagline) displayed in the preview */
        padding: 0 2em 2em;
    }
    #headimg h1 a,
    #desc {
        color: #e9e0d1;
        text-decoration: none;
    }
    </style>
<?php
}
endif; // shape_admin_header_style
 
if ( ! function_exists( 'shape_admin_header_image' ) ) :
/**
 * Custom header image markup displayed on the Appearance > Header admin panel.
 *
 * @see shape_custom_header_setup().
 *
 * @since Shape 1.0
 */
function shape_admin_header_image() { ?>
    <div id="headimg">
        <?php
        if ( 'blank' == get_header_textcolor() || '' == get_header_textcolor() )
            $style = ' style="display:none;"';
        else
            $style = ' style="color:#' . get_header_textcolor() . ';"';
        ?>
        <h1><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <div id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div>
        <?php $header_image = get_header_image();
        if ( ! empty( $header_image ) ) : ?>
            <img src="<?php echo esc_url( $header_image ); ?>" alt="" />
        <?php endif; ?>
    </div>
<?php }
endif; // shape_admin_header_image

Ya con el código de nuestras Cabeceras Personalizadas en su lugar, ahora necesitamos decirle a WordPress que cargue nuestro archivo de Cabeceras Personalizadas. Al final de functions.php, agregue lo siguiente:

/**
 * Implement the Custom Header feature
 */
require( get_template_directory() . '/inc/custom-header.php' );

Vaya al Escritorio de WordPress y revise el menú Apariencia. Ahora debería tener una opción “Header”. Si está utilizando el estilo de ejemplo Shape, debería ver algo como lo que sigue:




Analicemos, función por función, el código de inc/custom-header.php.

<?php
/**
 * Sample implementation of the Custom Header feature
 * http://codex.wordpress.org/Custom_Headers
 *
 * You can add an optional custom header image to header.php like so ...
 
    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) { ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
        </a>
    <?php } // if ( ! empty( $header_image ) ) ?>
 
 *
 * @package Shape
 * @since Shape 1.0

Aquí tenemos la habitual información del documento. Además, le explica cómo puede agregar imágenes a su archivo header.php para hacer que se muestren. Técnicamente, podría agregar este código en cualquier lugar donde quisiera que se mostrara la imagen, pero header.php es la ubicación más lógica para esto. Agreguémoslo ahora mismo. Abra header.php y peque lo siguiente, justo antes de la etiqueta <nav> de apertura:

<?php $header_image = get_header_image();
        if ( ! empty( $header_image ) ) { ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
            </a>
<?php } // if ( ! empty( $header_image ) )
?>

Guarde header.php, y vuelva a custom-header.php. Vamos a continuar analizando el código.

/**
 * Setup the WordPress core custom header feature.
 *
 * Use add_theme_support to register support for WordPress 3.4+
 * as well as provide backward compatibility for previous versions.
 * Use feature detection of wp_get_theme() which was introduced
 * in WordPress 3.4.
 *
 * @uses shape_header_style()
 * @uses shape_admin_header_style()
 * @uses shape_admin_header_image()
 *
 * @package Shape
 */
function shape_custom_header_setup() {
    $args = array(
        'default-image'          => '',
        'default-text-color'     => 'e9e0e1',
        'width'                  => 1050,
        'height'                 => 250,
        'flex-height'            => true,
        'wp-head-callback'       => 'shape_header_style',
        'admin-head-callback'    => 'shape_admin_header_style',
        'admin-preview-callback' => 'shape_admin_header_image',
    );
 
    $args = apply_filters( 'shape_custom_header_args', $args );
 
    if ( function_exists( 'wp_get_theme' ) ) {
        add_theme_support( 'custom-header', $args );
    } else {
        // Compat: Versions of WordPress prior to 3.4.
        define( 'HEADER_TEXTCOLOR',    $args['default-text-color'] );
        define( 'HEADER_IMAGE',        $args['default-image'] );
        define( 'HEADER_IMAGE_WIDTH',  $args['width'] );
        define( 'HEADER_IMAGE_HEIGHT', $args['height'] );
        add_custom_image_header( $args['wp-head-callback'], $args['admin-head-callback'], $args['admin-preview-callback'] );
    }
}
add_action( 'after_setup_theme', 'shape_custom_header_setup' );
 
/**
 * Shiv for get_custom_header().
 *
 * get_custom_header() was introduced to WordPress
 * in version 3.4. To provide backward compatibility
 * with previous versions, we will define our own version
 * of this function.
 *
 * @return stdClass All properties represent attributes of the curent header image.
 *
 * @package Shape
 * @since Shape 1.1
 */
 
if ( ! function_exists( 'get_custom_header' ) ) {
    function get_custom_header() {
        return (object) array(
            'url'           => get_header_image(),
            'thumbnail_url' => get_header_image(),
            'width'         => HEADER_IMAGE_WIDTH,
            'height'        => HEADER_IMAGE_HEIGHT,
        );
    }
}

Aquí estamos usando add_theme_support() para agregarle al Tema la característica de Cabeceras Personalizadas. Del mismo modo que hicimos para los fondeados, también le estamos agregando compatibilidad para con las versiones previas a la 3.4.

Démosle una mirada a la matriz $args, que empieza en la línea 16 en el bloque de código de arriba, y que se extiende hasta la ĺínea 25. Aquí es donde estamos definiendo los parámetros para nuestra Cabecera Personalizada. Estos valores cambiarán basado en su Tema.

• default-image' => '', – Si su Tema tiene una imagen de cabecera predefinida, aquí deberá especificar el camino a esa imagen. Debería verse algo como esto: 'default-image' => get_template_directory_uri() . '/images/header.jpg',. El estilo de ejemplo Shape no tiene una imagen de cabecera predefinida, así que vamos a dejar esto en blanco.
• 'default-text-color' => 'e9e0e1', – Este es el color predefinido del texto del título de su sitio. En el caso del Estilo de ejemplo Shape se trata del color #e9e0e1.
• 'width' => 1050, y 'height' => 250, – Especifica, en píxeles, el ancho y alto que se quiere que tenga la imagen de cabecera. Los usuarios contarán con la opción de recortar las imágenes que tengan dimensiones mayores. Normalmente, el ancho y alto que defina aquí debería ajustarse al área donde planea colocar la imagen de cabecera en su Tema. En este caso, estamos usando 1050px como el ancho porque ese es el ancho máximo del contenedor en el estilo de ejemplo Shape.
• 'flex-height' => true, – Esto permite que la altura de la imagen de cabecera sea flexible. Ya hemos especificado que la altura de la imagen de cabecera es de 250px. Dado que estamos habilitando altos flexibles, esos 250px se convierten meramente en una “altura recomendada”. Todavía estamos restringiendo el ancho a 1050px, pero si desea un ancho flexible, simplemente debería agregar: 'flex-width' => true,
• 'wp-head-callback' => 'shape_header_style',, 'admin-head-callback' => 'shape_admin_header_style',, y 'admin-preview-callback' => 'shape_admin_header_image', – Estas funciones son conocidas como funciones callback (o de retrollamada). Las llamaremos para: 1) controlar la apariencia de la Cabecera Personalizada cuando se vea en el Tema; 2) controlar la previsualización de la Cabecera Personalizada que se ve al ir a  Escritorio → Header; y 3) controlar el codificado de la imagen de la Cabecera Personalizada en la previsualización de la Cabecera Personalizada en Escritorio → Header, respectivamente.

Hay más parámetros que se pueden agregar a esta matriz $args. Por un listado de las mismas, visite el Codex de WordPress.

The Shiv for get_custom_header() (que comienza en la línea 42 en el bloque de código de más arriba) está allí para darle compatibilidad con versiones más antiquas de WordPress. Resumiendo, toma los valores que especificó en la matriz $args y los asigna al método “viejo” de agregar Cabeceras Personalizadas, de forma que las versiones previas de WordPress lo puedan entender. Si no desea que su Tema cuente con esta retrocompatibilidad (o compatibilidad regresiva), lo puede quitar. Sin embargo, si planea distribuir su Tema, podría ser una buena idea que lo mantenga.

Seguimos avanzando. Ahora tenemos:

if ( ! function_exists( 'shape_header_style' ) ) :
/**
 * Styles the header image and text displayed on the blog
 *
 * @see shape_custom_header_setup().
 *
 * @since Shape 1.0
 */
function shape_header_style() {
 
    // If no custom options for text are set, let's bail
    // get_header_textcolor() options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value
    if ( HEADER_TEXTCOLOR == get_header_textcolor() && '' == get_header_image() )
        return;
    // If we get this far, we have custom styles. Let's do this.
    ?>
    <style type="text/css">
    <?php
        // Do we have a custom header image?
        if ( '' != get_header_image() ) :
    ?>
        .site-header img {
            display: block;
            margin: 1.5em auto 0;
        }
    <?php endif;
 
        // Has the text been hidden?
        if ( 'blank' == get_header_textcolor() ) :
    ?>
        .site-title,
        .site-description {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px, 1px, 1px, 1px);
        }
        .site-header hgroup {
            background: none;
            padding: 0;
        }
    <?php
        // If the user has set a custom color for the text use that
        else :
    ?>
        .site-title a,
        .site-description {
            color: #<?php echo get_header_textcolor(); ?> !important;
        }
    <?php endif; ?>
    </style>
    <?php
}
endif; // shape_header_style

Esta es la función de retrollamada que controla como aparecerá en su Tema la Cabecera Personalizada. Los comentarios en el código deberían explicarle qué es lo que está haciendo, pero, en resumidas cuentas: si el usuario ha subido una imagen de cabecera o ha definido un color para el texto de la cabecera personalizada, esta función agrega un bloque de css dentro de su etiqueta <head>. Este bloque contiene las reglas de presentación para la imagen o el texto de la cabecera.

Ya hemos agregado el código para la imagen de cabecera a header.php. Arriba, en la línea 22, si es necesario, podemos estilizar la imagen. ¡Simplemente asegúrese que .site-header img es el nombre correcto del selector para su Tema!

Queremos ocultar el texto de la cabecera, si el usuario opta por ocultar el texto (arriba, líneas 28 a 40).

Finalmente, queremos que el título y la descripción del sitio tengan el color de texto de la cabecera personalizado por el usuario (arriba, líneas 42 a 48). No tiene por qué aplicar el color de texto de la cabecera a la descripción del sitio, esa parte depende de usted.

Si seguimos avanzando, a continuación tenemos esto:

if ( ! function_exists( 'shape_admin_header_style' ) ) :
/**
 * Styles the header image displayed on the Appearance > Header admin panel.
 *
 * @see shape_custom_header_setup().
 *
 * @since Shape 1.0
 */
function shape_admin_header_style() {
?>
    <style type="text/css">
    .appearance_page_custom-header #headimg { /* This is the container for the Custom Header preview. Notice how the min-height value on this element matches the "height" value we specified earlier in the Custom Header $args array. */
        background: #33605a;
        border: none;
    }
    #headimg h1 { /* This is the site title displayed in the preview */
        font-size: 45px;
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
        font-weight: normal;
        padding: 0.8em 0.5em 0;
    }
    #desc { /* This is the site description (tagline) displayed in the preview */
        padding: 0 2em 2em;
    }
    #headimg h1 a,
    #desc {
        color: #e9e0d1;
        text-decoration: none;
    }
    </style>
<?php
}
endif; // shape_admin_header_style

Esta función de retrollamada controla el estilizado de la Cabecera Personalizada en la previsualización que se ve en Escritorio → Apariencia → Header. El objetivo es hacer que se ajuste lo más posible a la apariencia general de su Tema. Esto quiere decir que debería estilizar estos elementos con las mismas fuentes, colores y fondos que utilizó en la hoja de estilos principal de su Tema.  Podría necesitar hacer ajustes a esos estilos, así que siga trabajando en ellos hasta que quede bien.

Finalmente, tenemos una función que controla el codificado para la imagen de la Cabecera Personalizada en la previsualización de la Cabecera Personalizada. Siéntase libre de modificarla para que se ajuste a su Tema.

if ( ! function_exists( 'shape_admin_header_image' ) ) :
/**
 * Custom header image markup displayed on the Appearance > Header admin panel.
 *
 * @see shape_custom_header_setup().
 *
 * @since Shape 1.0
 */
function shape_admin_header_image() { ?>
    <div id="headimg">
        <?php
        if ( 'blank' == get_header_textcolor() || '' == get_header_textcolor() )
            $style = ' style="display:none;"';
        else
            $style = ' style="color:#' . get_header_textcolor() . ';"';
        ?>
        <h1><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <div id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div>
    </div>
    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
        <img src="<?php echo esc_url( $header_image ); ?>" alt="" />
    <?php endif; ?>
<?php }
endif; // shape_admin_header_image

Y ahí la tiene: ¡una implementación funcional de las Cabeceras Personalizadas! La mejor manera de aprender como trabajan esas funciones es haciendo pequeños ajustes en cada una y luego recargar la sección Cabeceras Personalizadas del Escritorio de WordPress para ver qué es lo que cambia. ¡Ensayo y error es una de las mejores formas de aprender! Las siguientes capturas de pantallas con anotaciones le ayudarán a ver que función cambia qué parte de la cabecera.

Custom Header Admin Preview

Custom Header Front-End

Sumario de entradas

0. Introducción.
1. El desarrollo de su "sentido temático".
2. Herramientas para el desarrollo de Temas de WordPress.
3. Creación de una estructura html para su Tema de Wordpress.
4. Plantillas y estructura de directorios de un Tema de WordPress.
5. Configuración de las funciones de su Tema.
6. Asegure su Tema de WordPress.
7. La plantilla cabecera del tema de WordPress: header.php.
8. La plantilla Index de su Tema de WordPress.
9. Las plantillas Entrada Individual, Entrada de Adjuntos y error 404 del Tema de WordPress.
10. La plantilla de comentarios de un Tema de WordPress.
11. La plantilla de búsqueda (search) y la plantilla página (page) del Tema de WordPress.
12. La plantilla Archivo.
13. Las plantillas "sidebar" (barra lateral) y "footer" (pie de página) del Tema de WordPress.
14. Como resetear y reconstruir los CSS de su Tema de WordPress y definir su diseño.
15. Fondo y cabecera personalizados.
16. Distribuir su Tema de WordPress.