Añadiendo funcionalidades

Empezamos a crear algo mejor, más robusto con mayores funcionalidades a los usuarios de wordpress. Esto utilizando PHP y las funcionalidades de WordPress.

Quería darle un nuevo encabezado al sitio web uno que fuera más interactivo que el anterior, así que cree el diseño de un encabezado llamado «Big» que sería un poco diferente al anterior y tendría nuevas capacidades. Este podría contraerse de ser necesario para facilitar la lectura, al mismo tiempo tendría la capacidad de poner una imagen o un video de fondo en el encabezado. Esto será controlado desde las funciones del tema.

El código para añadir funcionalidades al tema es muy sencillo, gracias a la buena gente de Automattic, esto se puede hacer fácilmente desde el archivo functions del tema de la siguiente manera.

function ngbt_customize_register($wp_customize){
    $wp_customize->add_panel( 'ngbt_header_panel', array(
        'title' => "Header Options",
        'description' => "Select your header type and other properties",
        'capability' => 'edit_theme_options',
        'priority' => 160,
    ) );

    $wp_customize->add_section( 'ngbt_header_section', array(
        'title' => "Header Options",
        'description' => "This could be either a small header or a big one",
        'panel' => 'ngbt_header_panel',
    ) );

    $wp_customize->add_setting('ngbt_header_setting',array(
        'title' => "Header Options",
        'description' => "Select your header type",
        'default' => 'Option 1'

    ));


    $wp_customize->add_control( 'ngbt_header_control', array(
        'label' => "Header Control",
        'section' => 'ngbt_header_section',
        'settings'=>'ngbt_header_setting',
        'type' => 'select',
        'choices' => array(
            'small' => 'Small',
            'big' => 'Big'
            ),
    ) );


    $wp_customize->add_setting('ngbt_big_header_bg_setting',array(
        'default' => '',
        'type'    => 'theme_mod',

    ));

    $wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'ngbt_big_header_bg_setting', array(
        'label'       => 'Big Header Background Option',
        'description' => 'Select the media to add',
        'section'     => 'ngbt_header_section',
        'mime_type'   => 'image/video',
        'active_callback' => function() use ( $wp_customize ) {
            return $wp_customize->get_setting( 'ngbt_header_setting' )->value() === 'big';
        },
    ) ) );


}
add_action( 'customize_register', 'ngbt_customize_register' );

Se usa «add_panel» para agregar una opción nueva en el menú principal del tema, y «add_section» para agregar una sección dentro de esa opción. Luego «add_setting» para guardar la opción que se eligió, finalmente add_control para agregar el tipo de control a usar, este puede ser texto, radio, checkboxes o dropdowns dependiendo de lo que se necesite.

• 

• 

• 

Obtener las opciones del tema.

Aparte cree una funcion para obtener las opciones que se necesitan. La función te regresa un arreglo el cual puede utilizarse para diversos propositos.

function ngbt_get_header_info(){

    $defaults = [
        'header-type' => 'small',
        'header-mime' => '',
        'header-mimetype' => '',
        'header-scr' => ''

    ];

    $found_mimetype;
    $header_type = get_theme_mod('ngbt_header_setting')?get_theme_mod('ngbt_header_setting'):'';
    $header_id = get_theme_mod('ngbt_big_header_bg_setting');
    $header_link = wp_get_attachment_url($header_id);
    $header_meta = wp_get_attachment_metadata($header_id)?wp_get_attachment_metadata($header_id):[];
    if($header_meta){
        array_walk_recursive($header_meta,function ($value,$key) use(&$found_mimetype){
            if($key == 'mime_type' || $key == 'mime-type'){
                $found_mimetype= $value;
             }
        },$found_mimetype);
    
    } 

    $header_mime = isset($found_mimetype)?strtok($found_mimetype,'/'):"";
    
    $defaults['header-type'] = $header_type;
    $defaults['header-mime'] = $header_mime;
    $defaults['header-mimetype'] = $found_mimetype??'';
    $defaults['header-src'] = $header_link?$header_link:'';

        return $defaults;
    }

El «get_theme_mod» es mi caballito de batalla, obtiene el valor de la opcion del tema y este lo agrupo dentro de un arreglo.

Modificando la plantilla header.

La plantilla header ahora puede renderizar ambos con un cambio en la logica del codigo bastante sencillo. Aparte agrego un codigo css personalizado basado en las opciones del tema. Utilizo «get_template_part» para obtener el contenido de los encabezados. Lo mas genial es que al «big header» le paso las opciones por paramentro, la cual muestro como se ocupa anteriormente.

<!DOCTYPE html>
<html <?php language_attributes();?>>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="<?php bloginfo("charset");?>">
    <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
    <?php wp_head();?>
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <?php 
        $header_options = ngbt_get_header_info(); 
        if($header_options['header-type']!='small' && $header_options['header-mime'] =='image'){
            echo '<style>
                    #shrink-header{
                    background-image: url("'.$header_options['header-src'].'")
                    }
            </style>';
        }
    ?>
</head>
<body>
    <?php 
   
        if($header_options['header-type']=='small'){
            get_template_part( '/template-parts/content', 'small-header');

        } else{
            get_template_part( '/template-parts/content', 'big-header',$header_options);
        } 
        
    ?>
    <main>

Así fue como cree el nuevo encabezado del tema, casi lo olvido, pero acá está el video de cómo queda el encabezado con el diseño de video de fondo. Si deseas ver el post anterior puedes encontrarlo aquí y el código puedes encontrarlo aquí