Tutorial: Cómo Personalizar tu Sitio de WordPress con el Personalizador

WordPress es una plataforma versátil que te permite crear y personalizar tu sitio de WordPress. Una de las herramientas más poderosas para personalizar la apariencia y configuración de tu sitio en tiempo real es el Personalizador (Customizer). En este tutorial, aprenderás cómo personalizar tu sitio de wordpress con el personalizador (Customizer). Para esto, seguiras los pasos para agregar múltiples secciones personalizadas dentro de un panel y organizarlas en archivos separados para simplificar la gestión.

Paso 1: Preparar tu sitio de WordPress

Antes de comenzar, asegúrate de tener WordPress instalado y un tema o un plugin donde puedas agregar tus personalizaciones. En mi caso voy a estar personalizando un tema. Si no tienes un tema, sigue estos pasos a continuacion:

Ante todo, la mejor forma de comenzar es instalando WordPress en tu maquina personal, asi podras crear y modificar lo que hagas sin perjudicar tu sitio una vez que ya este en linea.

Como base, vamos a installar un servidor en la maquina para poder trabajar con Apache, PHP, SQL. Para esto podemos instalar WAMP, o XAMPP, o en mi caso Laragon. Lo siguiente es ir a WordPress.org para descargarlo, y una vez descargado descomprimelo dentro de la carpeta www del servidor local. Este va a estar en C:\Wamp\www o C:\Xampp\www o C:\Laragon\www.

Luego activaremos nuestro servidor local y vamos a navegar a http://localhost. En el caso de WAMP y XAMPP tendras que agregar http://localhost/tusitiowordpress. En el caso de Laragon, este genera automaticamente un url .test para que tengas acceso directo al sitio creado.

Lo siguiente sera seguir los pasos para instalar WordPress. Una vez se instale, vamos a comenzar con lo pasos para crear un tema.

Primero: Vamos a crear una carpeta para tu tema, asi que navega hasta la carpeta «wp-content/themes» y crea una carpeta con el nombre que desees.

Segundo: Dentro de la carpeta, crea los ficheros style.css, index.php, y functions.php. Agrega a style.css y aingex los siguiente debajo:

Siguinedo los pasos de wordpress.org

style.css en su forma mas simple.

Agrega a index.php.

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h3><?php the_title(); ?></h3>

<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>

<?php endwhile; ?>

<?php
if ( get_next_posts_link() ) {
next_posts_link();
}
?>
<?php
if ( get_previous_posts_link() ) {
previous_posts_link();
}
?>

<?php else: ?>

<p>No posts found. :(</p>

<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>

Tercero: Abre el archivo functions.php de tu tema o plugin para comenzar a trabajar.

En functions.php, comienza con lo basico.


if ( ! isset( $content_width ) ) {
	$content_width = 1000; 
}


if ( ! function_exists( 'mitema_funct' ) ) :

	
	function mitema_funct() {

		
		load_theme_textdomain( 'mitema', get_template_directory() . '/languages' );

		add_theme_support( 'automatic-feed-links' );

		add_theme_support( 'post-thumbnails' );

		
		register_nav_menus( array(
			'primary'   => __( 'Primary Menu', 'myfirsttheme' ),
		) );

		
		add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote', 'image', 'video' ) );
	}
endif; 
add_action( 'after_setup_theme', 'mitema_funct' );

Paso 2: Como Crear un Panel Personalizado en customizer

Un panel es una forma de agrupar tus secciones y opciones de personalización. Para conocer mas sobre el customizer, puedes revisar la informacion en la pagina de desarrolladores de wordpress.

Una forma que puede hacerse es crear un una carpeta llamada customizer y dentro crear un fichero PHP con el mismo nombre. Luego podremos llamar a este fichero usando la opcion de include_once(). para esto solo agregamos debajo de add_action() el fichero de la siguiente manera.

include imagen agregando customizer a function.php

Otra forma de comenzar es continuando en el mismo fichero functions.php, continuaremos debajo de add_action( 'after_setup_theme', 'mitema_funct' );. Empezaremos agregando la funcion que inicia el customizer.

Luego de esto comenzaremos creando un panel personalizado.

function mi_personalizador_register( $wp_customize ) {

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

Dentro de la funcion, comenzaremos usando la variable $customize para agrega los paneles, secciones, controles y settings. La primera es agregar un panel con add_panel.

function mi_personalizador_register($wp_customize) {

    $wp_customize->add_panel('mi_panel', array(
        'title' => 'Mi Panel Personalizado',
        'description' => 'Descripción de mi panel personalizado.',
    ));
}

add_action('customize_register', 'mi_personalizador_register');

Paso 3: Como Agregar Secciones al Panel de customizer

Ahora, dentro de ese panel personalizado, vamos a agregar nuestras secciones. En este ejemplo, vamos a crear dos secciones diferentes. Para poder simplificar el codigo, vamos a crear ficheros separados para cada seccion. Esto ayuda a que todo este en su sitio, ayuda a corregir problemas sin perjudicar el resto del codigo, y es mas facil expandir nuestro tema o plugin.

Sección 1

Crea un archivo separado llamado seccion1.php y agrega el siguiente código:

$wp_customize->add_section('mi_seccion_1', array(
    'title' => 'Mi Sección 1',
    'description' => 'Esta es la primera sección en Mi Panel Personalizado.',
    'panel' => 'mi_panel', // Asocia esta sección al panel
));

$wp_customize->add_setting('mi_opcion_texto_1', array(
    'default' => '',
    'sanitize_callback' => 'sanitize_text_field',
));

$wp_customize->add_control('mi_opcion_texto_1', array(
    'label' => 'Texto de ejemplo para la Sección 1',
    'section' => 'mi_seccion_1',
    'type' => 'text',
));

Sección 2

Crea un archivo separado llamado seccion2.php y agrega el siguiente código:

$wp_customize->add_section('mi_seccion_2', array(
    'title' => 'Mi Sección 2',
    'description' => 'Esta es la segunda sección en Mi Panel Personalizado.',
    'panel' => 'mi_panel', // Asocia esta sección al panel
));

$wp_customize->add_setting('mi_opcion_texto_2', array(
    'default' => '',
    'sanitize_callback' => 'sanitize_text_field',
));

$wp_customize->add_control('mi_opcion_texto_2', array(
    'label' => 'Texto de ejemplo para la Sección 2',
    'section' => 'mi_seccion_2',
    'type' => 'text',
));

Paso 4: Incluir los Archivos de Sección en `functions.php`

Ahora, en tu archivo principal functions.php, incluye los archivos de las secciones utilizando include_once o include. Asegúrate de que se incluyan en el orden correcto. Aqui dejo el codigo y una imagen de ejemplo.

panel de control social para personalizar tu sitio wordpress

function mi_personalizador_register($wp_customize) {

    $wp_customize->add_panel('mi_panel', array(
        'title' => 'Mi Panel Personalizado',
        'description' => 'Descripción de mi panel personalizado.',
    ));


    include get_template_directory() .'seccion1.php';


    include get_template_directory() . 'seccion2.php';
}

add_action('customize_register', 'mi_personalizador_register');

Paso 5: Personaliza tu Sitio

¡Listo! Ahora, cuando vayas al Personalizador de WordPress, verás un nuevo panel llamado «Mi Panel Personalizado» que contiene las dos secciones que hemos creado. Puedes personalizar tu sitio web utilizando las opciones que has agregado en estas secciones.

Aqui te dejo un ejemplo que puedes usar para probar las personalizaciones. En este ejemplo podras mostrar/ocultar el autor de un articulo, asi como la fecha de creacion.

En una de las secciones que creaste en este tutorial, agrega lo siguiente:

<?php
$wp_customize->add_section('tema_post_section', array(
    'title' => __('Post Customizacion', 'tema-blog'),
    'panel' => 'mi_panel',
    'description' => __('Personaliza tus posts', 'tema-blog')
));

$wp_customize->add_setting('mostrar_author', array(
    'default' => true, 
    'sanitize_callback' => 'sanitize_text_field',
));
$wp_customize->add_control('mostrar_author', array(
    'label' => __('Mostrar Author', 'tema'),
    'section' => 'tema_post_section',
    'type' => 'checkbox',
));

$wp_customize->add_setting('mostrar_time', array(
    'default' => true, 
    'sanitize_callback' => 'sanitize_text_field',
));
$wp_customize->add_control('mostrar_time', array(
    'label' => __('Mostrar Fecha', 'tema'),
    'section' => 'tema_post_section',
    'type' => 'checkbox',
));
?>

Luego, vamos a index.php y cambiamos el loop justo donde esta el while: el nuevo codigo esta es negrita. Este codigo te permitira mostrar y/o ocultar tanto el autor como la fecha de creacion del articulo.

resto del codigo
...
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h3><?php the_title(); ?></h3>
<?php
                
                echo '<small>';
                $mostrarAuthor = get_theme_mod('mostrar_author', true);
                $mostrarTime = get_theme_mod('mostrar_time', true);                        
                if($mostrarAuthor) {
                    ?> 
                    <span>By 
                        <a href="">
                            <?php the_author(); ?>
                        </a>
                    </span>
                    <?php                            
                }
                if($mostrarAuthor && $mostrarTime){ 
                    echo ' | ';
                }
                
                if($mostrarTime) {
                    ?>
                    <span>
                        <?php the_time(); ?>
                    </span>
                    <?php                            
                } 
                echo '</small>';?>

<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>

<?php endwhile; ?>
...
resto del codigo

Guarda el codigo y ve al customizer y veras un nuevo panel en el que veras una o dos secciones, y la posibilidad de modificar el autor y la fecha de los articulos.

Este tutorial te proporciona una base sólida para comenzar a personalizar tu sitio WordPress utilizando el Personalizador. Puedes seguir agregando más secciones y opciones siguiendo este patrón para tener un control completo sobre la apariencia y funcionalidad de tu sitio. ¡Disfruta de la personalización!

Extra: En caso de errores

En caso de que te salgan errores en la implementacion de las secciones; como la posibilidad de que solo se vea una sola seccion, puedes chequear estas opciones aqui abajo. Es lo que yo personalmente he hecho cuando he tenido este tipo de problemas.

Nombres únicos para secciones y paneles: Asegúrate de que las secciones y los paneles tengan nombres únicos. No puedes tener dos secciones con el mismo nombre. Verifica que las funciones add_section y add_panel tengan nombres distintos en todos los archivos.
Verifica la inclusión de los archivos: Asegúrate de que estás incluyendo ambos archivos (seccion1.php y seccion2.php) en tu archivo principal functions.php. Verifica que no haya errores de sintaxis o problemas de inclusión en los archivos.
Orden de inclusión: Asegúrate de que los archivos se estén incluyendo en el orden correcto dentro de mi_personalizador_register. En el ejemplo que proporcioné anteriormente, primero se incluye seccion1.php y luego seccion2.php. Si cambias el orden de inclusión, podría afectar cuál de las secciones se muestra. Aunque si este no es el caso, puedes cambiar el orden lo que no afectara el resultado.
Configuración del tema o plugin: Verifica si tu tema o plugin tiene alguna configuración adicional que pueda estar afectando la visibilidad de las secciones en el Personalizador. A veces, otros archivos o configuraciones pueden interferir con la forma en que se muestran las opciones.

The Digital Mike