Código Genesis

Tutoriales de WordPress y Genesis Framework

Sácale partido al personalizador de WordPress

Descubre en este megatutorial cómo eliminar o añadir opciones al personalizador de WordPress mediante código.

Si quieres ver la presentación de este tutorial en la WordCamp Irún 2019, aquí tienes la grabación:

¿Prefieres leer (y copiar el código)?

Aquí lo tienes:

Beneficios de utilizar el personalizador de WordPress

¿Te has dado cuenta de que WordPress cada vez le da más peso al personalizador?

Lo hace con el objetivo de mejorar la experiencia de usuario, ya que el personalizador cuenta con 2 grandes ventajas:

  1. Resulta muy fácil de usar.
  2. Permite visualizar los cambios a tiempo real.

Por eso es el candidato ideal para agrupar las funcionalidades principales con las que el cliente necesita «jugar» dentro de su WordPress.

¿Y qué puedes cambiar en el personalizador de WordPress para ponérselo fácil a tu cliente?

Muy fácil:

✔︎ Elimina todo aquello que resulta innecesario y le despiste.
✔︎ Añade esas funciones que le permitan hacer modificaciones con comodidad.

¿Cómo?

Gracias a la API (fantástica API). 😉

La API del personalizador de WordPress

Está orientada a objetos, de los cuales, los 4 principales son:

  • Panels (Paneles).
  • Sections (Secciones).
  • Settings (Ajustes).
  • Controls (Controles).

Y estos, a su vez, dan la estructura al personalizador:

Estructura de los elementos del personalizador de WordPress.

Cada objeto tiene una clase de PHP propia y están gestionados por el Customizer manager, al que puedes acceder mediante el hook customize_register.

Aquí puedes usar los métodos:

  • add_
  • get_
  • remove_

para añadir, modificar o eliminar los objetos del personalizador.

¿Alguna duda?

Con los ejemplos que vienen a continuación todo quedará mucho más claro, no te preocupes. 😉

En cualquier caso, si quieres ver más información sobre la API del personalizador de WordPress puedes visitar el Handbook oficial.

¿Vamos al lío? 🙂

Elimina las opciones innecesarias del personalizador de WordPress

Lo primero y más sencillo que puedes hacer es quitar todas las funciones que tu cliente no necesita ver.

Incluso, a veces es mejor que no las vea para evitar que la «líe parda» sin querer. 😉

Por supuesto, esto depende al 100% del perfil de tu cliente (experiencia, tipo de cambios que realizará, etc.) y de las opciones que quieras dejarle.

A pesar de eso, el siguiente snippet puede servirte como punto de partida. Añádelo al final del fichero functions.php o a tu plugin de funcionalidades:

/* Quitar opciones del personalizador de WordPress */
function remove_options_customizer( $wp_customize ) {
    $wp_customize->remove_section( 'static_front_page' ); // Ajustes de portada
    $wp_customize->remove_section( 'header_image' ); // Imagen de cabecera
    $wp_customize->remove_section( 'background_image' ); // Imagen de fondo
    $wp_customize->remove_section( 'themes' ); // Temas
    $wp_customize->remove_section( 'featured_content' ); // Contenido destacado
    $wp_customize->remove_control( 'blogdescription' ); // Descripción del blog
    $wp_customize->remove_control( 'custom_css' ); // CSS personalizado 
    
    // Secciones específicas de Genesis
	$wp_customize->remove_section( 'genesis_updates' ); // Sección de Actualizaciones
    $wp_customize->remove_section( 'genesis_adsense' ); // Sección de Google Adsense	
    $wp_customize->remove_section( 'genesis_breadcrumbs' ); // Sección Migas de pan
    $wp_customize->remove_section( 'genesis_comments' ); // Sección Comentarios y Referencias
    $wp_customize->remove_section( 'genesis_scripts' ); // Sección Header/Footer Scripts
    $wp_customize->remove_panel( 'genesis-seo' ); // Panel de SEO
}
add_action( 'customize_register', 'remove_options_customizer', 30);

Aquí utilizas el hook customize_register para enganchar tu función y el método «remove_» para eliminar paneles, secciones y controles.

¿Quieres ir de radical?

El siguiente snippet es un ejemplo de cómo ocultar todas las opciones para que comentes o elimines las líneas que sí quieres se muestren:

/* Quitar opciones del personalizador de WordPress */
function remove_options_customizer( $wp_customize ) {
    $wp_customize->remove_section( 'title_tagline' ); // Identidad del sitio
    $wp_customize->remove_section( 'colors' ); // Colores
    $wp_customize->remove_panel( 'nav_menus'); // Menús
    $wp_customize->remove_panel( 'widgets' ); // Widgets
    $wp_customize->remove_section( 'static_front_page' ); // Ajustes de portada
    $wp_customize->remove_section( 'header_image' ); // Imagen de cabecera
    $wp_customize->remove_section( 'background_image' ); // Imagen de fondo
    $wp_customize->remove_section( 'themes' ); // Temas
    $wp_customize->remove_section( 'featured_content' ); // Contenido destacado
    $wp_customize->remove_control( 'blogdescription' ); // Descripción del blog
    $wp_customize->remove_control( 'custom_css' ); // CSS personalizado 
    
    // Secciones específicas de Genesis
	$wp_customize->remove_section( 'genesis_updates' ); // Sección de Actualizaciones
    $wp_customize->remove_section( 'genesis_adsense' ); // Sección de Google Adsense
    $wp_customize->remove_section( 'genesis_layout' ); // Sección Diseño del sitio	
    $wp_customize->remove_section( 'genesis_breadcrumbs' ); // Sección Migas de pan
    $wp_customize->remove_section( 'genesis_comments' ); // Sección Comentarios y Referencias
    $wp_customize->remove_section( 'genesis_archives'); // Sección Archivos de contenido
    $wp_customize->remove_section( 'genesis_scripts' ); // Sección Header/Footer Scripts
    $wp_customize->remove_panel( 'genesis-seo' ); // Panel de SEO
    
}
add_action( 'customize_register', 'remove_options_customizer', 30);

Repito: el código superior contiene todas las secciones del personalizador de WordPress.

Ahora solo tienes que decidir cuál será tu propio combo de «nominados».

¿Ya has terminado con la limpieza? Pues toca amueblar la casa. 😉

Agrega opciones al personalizador de WordPress

El límite de elementos a añadir está en tu imaginación (o casi).

Siguiendo el ejemplo que aparece en este tutorial serás capaz de introducir en el personalizador las opciones de:

  • Insertar la imagen de cabecera.
  • Elegir su encuadre.
  • Insertar el texto del título.
  • Añadir una descripcion.
  • Incluir un botón (CTA) con el texto y URL que desees.

Y no solo eso, sino que también podrás seleccionar el color de ambos textos de forma independiente.

En resumen:

Vas a tener un control total sobre la cabecera.

Suena bien ¿verdad?

Este es el resultado final:

Aunque estos snippets están diseñados para Genesis Sample, puedes aplicarlos en cualquier otro child theme de WordPress tras realizar pequeños cambios en el código. 

Vamos allá. 

1. Crea una plantilla para la página principal

Genesis Sample carece de una plantilla front-page, así que el primer paso es crear un fichero front-page.php en la carpeta raíz del tema que contenga el siguiente código:

<?php
/**
 * Página principal (front-page) personalizada que añade una cabecera estilo Hero con CTA.
 */


// Forzar ancho completo de página
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );


// Crear zona de imagen, título y descripción
add_action( 'genesis_after_header', 'genesis_sample_front_page_hero' );

function genesis_sample_front_page_hero() {
	?>
    <header class="hero"> 
	    <div class= "hero-wrap"> 
			<h1 class= "hero-title"><?php echo get_theme_mod('header_title');?></h1>
			<div class= "hero-description"><p><?php echo get_theme_mod( 'header_description'); ?></p></div>
			<div class= "hero-button">
                <a class="button" href="<?php echo get_theme_mod( 'header_button_link') ?>">
                    <?php echo get_theme_mod( 'header_button_text') ?>
                </a>
			</div>
	    </div>			
	</header>
	<?php
}
?>


<?php
// Iniciar Genesis.
genesis();

Con esto generas la plantilla que se mostrará en la página principal y le introduces una sección de cabecera en formato Hero con los siguientes elementos:

  • Título.
  • Descripción.
  • Botón con una llamada a la acción (CTA).

Además, este bloque fuerza el diseño de ancho completo.

Si prefieres dejar la sidebar, elimina la línea responsable en el código anterior y listo. 😉

¿No estás utilizando un child theme de Genesis?

Entonces olvídate de los hooks y añade solo la parte de código relacionada con la cabecera que contiene la imagen y el texto. 

    <header class="hero"> 
	    <div class= "hero-wrap"> 
			<h1 class= "hero-title"><?php echo get_theme_mod('header_title');?></h1>
			<div class= "hero-description"><p><?php echo get_theme_mod( 'header_description'); ?></p></div>
			<div class= "hero-button">
                <a class="button" href="<?php echo get_theme_mod( 'header_button_link') ?>">
                    <?php echo get_theme_mod( 'header_button_text') ?>
                </a>
			</div>
	    </div>			
	</header>

Recuerda colocarla en la parte superior del fichero front-page.php de tu tema hijo.

2. Modifica el archivo customize.php

Para agregar las opciones en el personalizador de WordPress debes editar el fichero customize.php situado en la carpeta /lib/.

En concreto, introduce el siguiente código al final del mismo:

// Añadir al personalizador de WordPress una sección para la cabecera de la página principal (front-page) con CTA
function genesis_sample_front_page_header_customize($wp_customize){

	//Añadir la sección
	$wp_customize->add_section('genesis_sample_header_section',
		array(
		'title' => __('Cabecera de la página principal', 'genesis-sample'),
		'description' => __('Personaliza la cabecera de la página principal (front-page)', 'genesis-sample'),
		'priority' => 200
	));

	// Imagen de fondo
	$wp_customize->add_setting('load_header_image');
	$wp_customize->add_control(new WP_Customize_Image_Control(
		$wp_customize,
		'load_header_image',
		array(
			'default' => get_stylesheet_directory_uri() . '/images/hero-blog.jpg',
			'label' => __('Imagen de fondo: mínimo recomendado de 1600px de ancho','genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'load_header_image'
			
		)
	));

	// Posición de la imagen
	$wp_customize->add_setting('background_position', 
		array(
		'default' => 'center-center'
	));
	$wp_customize->add_control(new WP_Customize_Control(
		$wp_customize,
		'background_position',
		array(
			'label' => __('Posición de la imagen de fondo','genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'background_position',
			'type' => 'select',
			'choices' => array(
				'left-top' => __('Izquierda Superior','genesis-sample'),
				'left-center' => __('Izquierda Centrado','genesis-sample'),
				'left-bottom' => __('Izquierda Inferior','genesis-sample'),
				'right-top' => __('Derecha Superior','genesis-sample'),
				'right-center' => __('Derecha Centrado','genesis-sample'),
				'right-bottom' => __('Derecha Inferior','genesis-sample'),
				'center-top' => __('Centrado Superior','genesis-sample'),
				'center-center' => __('Centrado Centrado','genesis-sample'),
				'center-bottom' => __('Centrado Inferior','genesis-sample')
			)
		)
	));
	
	//* Texto de la descripción
	$wp_customize->add_setting('header_title',
		array(
		'default' => __('Título', 'genesis-sample')
		)
	);
	
	$wp_customize->add_control(new WP_Customize_Color_Control(
		$wp_customize,
		'header_title',
		array(
			'label' => __('Texto del título', 'genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'header_title',
			'type' => 'text',
			'sanitize_callback' => 'sanitize_text'
		)
	));
	
	
	// Color del texto del encabezado
	$wp_customize->add_setting('header_title_color',
		array(
		'default' => '#000',
		'sanitize_callback' => 'sanitize_hex_color'
	));
	
	$wp_customize->add_control(new WP_Customize_Color_Control(
		$wp_customize,
		'header_title_color',
		array(
			'label' => __('Color del texto de cabecera', 'genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'header_title_color'
		)
	));
	
	//* Texto de la descripción
	$wp_customize->add_setting('header_description',
		array(
		'default' => __('Aquí va una buena descripción', 'genesis-sample')
		)
	);
	
	$wp_customize->add_control(new WP_Customize_Color_Control(
		$wp_customize,
		'header_description',
		array(
			'label' => __('Texto de la descripción', 'genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'header_description',
			'type' => 'text',
			'sanitize_callback' => 'sanitize_text'
		)
	));
	
	// Color del texto de la descripción
	$wp_customize->add_setting('header_description_color',
		array(
		'default' => '#000',
		'sanitize_callback' => 'sanitize_hex_color'
	));
	
	$wp_customize->add_control(new WP_Customize_Color_Control(
		$wp_customize,
		'header_description_color',
		array(
			'label' => __('Color de la descripción de la cabecera', 'genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'header_description_color'
		)
	));
	
	//* Texto del CTA
    $wp_customize->add_setting(
    	'header_button_text', 
    	array(
        	'default' => __('Contacto', 'genesis-sample'),
			'type' => 'theme_mod'
    ));
    $wp_customize->add_control(
    	'header_button_text',
		array(
        	'label' => __('Texto del CTA', 'genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'header_button_text',
			'type' => 'text',
			'sanitize_callback' => 'sanitize_text'
    ));

    //* Link del CTA
    $wp_customize->add_setting(
    	'header_button_link',
    	array(
        	'default' => home_url('/contacto'),
			'type' => 'theme_mod'
    ));
    $wp_customize->add_control(
    	'header_button_link', 
    	array(
        	'label' => __('Enlace del CTA', 'genesis-sample'),
			'section' => 'genesis_sample_header_section',
			'settings' => 'header_button_link',
			'type' => 'text',
			'sanitize_callback' => 'sanitize_text'
    ));

}

add_action('customize_register','genesis_sample_front_page_header_customize');

// Aplicar personalizaciones
function genesis_sample_front_page_header_customize_css(){
 $header_image = get_theme_mod('load_header_image');
 $background_position = get_theme_mod('background_position');
 $background_position = str_replace('-',' ',$background_position);
 $header_title = get_theme_mod('header_title');
 $header_title_color = get_theme_mod('header_title_color');
 $header_description = get_theme_mod( 'header_description');
 $header_description_color = get_theme_mod('header_description_color');
 $button_text = get_theme_mod('header_button_text');
 $button_link = get_theme_mod('header_button_link');

?>
<style type="text/css">
	.hero {
		<?php if($header_image != ""): ?>
		background-image: url(<?php echo $header_image; ?>);
		<?php endif; ?>
		background-position: <?php echo $background_position; ?>;
	}
	.hero .hero-title {
		color: <?php echo $header_title_color; ?>;
	}
	
	.hero .hero-description {
		color: <?php echo $header_description_color; ?>;
	}
</style>
<?php
}
add_action('wp_head','genesis_sample_front_page_header_customize_css');

Con este bloque incluyes una nueva sección en el personalizador de WordPress llamada «Cabecera de la página principal» dentro de la cual se encuentran las opciones de añadir y posicionar la imagen, así como los apartados para insertar el título y la descripción.

También podrás elegir el color de ambos textos de forma independiente desde aquí.

Por defecto, el botón de la llamada a la acción llevará el texto «Contacto» y la url a «https://tuweb/contacto», pero puedes modificarlo con el CTA que te interese.

3. Personaliza el CSS de la cabecera

Una vez configurada la plantilla para la nueva home y el fichero del personalizador, solo te falta asignar los estilos para que luzca tal y como deseas.

Para ello pega este bloque al final de style.css:

/* Dar estilo a la sección Hero de la página principal (front-page) */
.hero {
	min-height: 400px;
	background: #222 url(images/hero-blog.jpg) no-repeat center;
	background-size: cover;
	margin: 70px 0 -70px;
}

.hero-wrap {
	padding: 125px 175px;
	background-clip: content-box, padding-box;
	background-color: rgba(255,255,255,.9);
}

.hero .hero-title {
	font-size: 5rem;
	text-align: center;
	color: #000;
	padding: 20px;
}

.hero .hero-description {
	font-size: 2rem;
	text-align: center;
	color: #000;
}

.hero-button {
	text-align: center;
	padding: 20px;
}

@media only screen and (max-width: 780px){
	.hero {
		margin: 0;
	}
	
	.hero-wrap {
		padding: 125px 15px;
	}
	.hero .hero-title {
	        font-size: 3rem;
	}
}

Al introducir estas líneas de CSS te aseguras de que la cabecera se visualice correctamente.

Ya solo te falta el último detalle.

4. Añade la imagen de fondo desde el personalizador

Elige la fotografía que deseas usar como fondo directamente desde el personalizador de WordPress.

Tal y como te indica esta sección, procura que la imagen tenga un ancho generoso (1600-2000px) para que se adapte a los dispositivos de alta resolución.

Conclusiones

Ahora que ya sabes cómo modificar el personalizador de WordPress, solo me queda pedirte un favor: dale un poco de amor en tu siguiente trabajo, ya sea para un cliente concreto o para vender tu propia plantilla.

¿Quieres más?

Aquí tienes otros ejemplos para añadir al personalizador de WordPress:

Espero que te sirva de inspiración.

Y si quieres algo que no esté ahí… ¿Te has enterado ya de que si te suscribes a Código Genesis puedes dejar tus sugerencias para próximos tutoriales?

Tan fácil con como darte de alta y dejarme un comentario aquí mismo. 😉

Pase de diapositivas

Tutoriales relacionados

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.