Cómo crear una plantilla de página personalizada en un tema de WordPress

Uno de los argumentos de venta más importantes de WordPress es su infinito potencial de personalización. Como usuario de WordPress, quieres tener más control sobre el diseño y la funcionalidad de tu sitio.

WordPress es genial en esto. Su flexibilidad permite que básicamente cualquiera pueda cambiar cualquier cosa de su sitio. Hablando de esto, las plantillas de página en WordPress te permiten personalizar el diseño de tu sitio, tal y como te gusta.

Cosas como añadir una cabecera a tu página de inicio o añadir/eliminar barras laterales de una página de blog se pueden hacer con plantillas de página.

Básicamente, si quieres que una página concreta tenga un aspecto diferente del resto de tu sitio, tendrás que utilizar plantillas de página. Muchos sitios web de WordPress utilizan plantillas de página personalizadas para sus páginas de destino y de ventas.

Así que… si quieres conseguir lo mismo para tu sitio web, esta guía es para ti. En este blog, echaremos un vistazo a varios métodos para crear una página personalizada en WordPress.

Empecemos.

¿Por qué utilizar una plantilla de página personalizada en WordPress?

Tener un único tema cohesionado añade un gran valor al diseño y la funcionalidad del sitio web. Sin embargo, algunos sitios web prefieren tener diseños diferentes para las distintas páginas.

Lamentablemente, varios temas de WordPress restringen a los usuarios la posibilidad de modificar el diseño y la funcionalidad de una página diferente en la jerarquía.

Una plantilla de página personalizada de WordPress permite a los usuarios integrar requisitos personalizados, como una barra lateral derecha/izquierda en una página concreta, funciones adicionales de llamada a la acción o un encabezado único para una página de destino concreta.

Una plantilla de página personalizada de WordPress puede utilizarse para varios fines. Por ejemplo, para:

• Mostrar entradas recientes de cada categoría
• Incrustar Google Maps o cualquier script
• Mostrar una lista de todos los autores
• Mostrar imágenes subidas recientemente
• Para crear una página de portafolio personalizada
• etc…

Un archivo de plantilla llamado page.php gestiona la apariencia de todas las páginas y entradas creadas en un sitio web WordPress. Crear o editar una plantilla de página personalizada en WordPress requiere conocimientos básicos de HTML, CSS y PHP, y esta base se vuelve aún más importante cuando se trabaja con configuraciones avanzadas como WordPress sin cabeza, donde el front-end y el back-end están desacoplados….

Jerarquía de plantillas de página de WordPress

WordPress determina cómo se muestra una página basándose en los archivos de plantilla de tu tema. Por defecto, utiliza page.php para todas las páginas a menos que se especifique una plantilla diferente.

Cuando se realiza una petición de página, WordPress sigue una jerarquía estructurada para seleccionar la plantilla más adecuada. El orden de selección es

1. Plantilla de página personalizada – Si se asigna una plantilla específica a la página en el editor, WordPress la utiliza.
2. page-{slug}.php – Si no se establece una plantilla personalizada, WordPress busca una plantilla que coincida con el slug de la página (por ejemplo, page-about.php).
3. page-{id}.php – Si no hay disponible una plantilla basada en slug, WordPress busca una plantilla con el ID numérico de la página (por ejemplo, page-10.php).
4. page.php – Si no existe una plantilla específica de ID, WordPress recurre al archivo page.php predeterminado del tema.
5. singular.php – Si falta page.php, WordPress utilizará singular.php, que es una plantilla genérica para páginas y entradas individuales.
6. index.php – Si no hay otras plantillas disponibles, WordPress utiliza por defecto index.php, la plantilla principal utilizada para mostrar el contenido.

Esta jerarquía garantiza que WordPress seleccione la plantilla más específica disponible para cada página, al tiempo que mantiene un sistema de reserva cuando no se proporcionan archivos específicos.

¡Acelera los tiempos de carga de WordPress en un 70% con el addon Cloudways Cloudflare!

¡Mejora el rendimiento de tu sitio web y puntúa más alto en Core Web Vitals con Edge Page Caching de Cloudflare para WordPress!

Saber más

Cómo crear una plantilla de página personalizada básica (3 métodos)

Ahora viene lo bueno. Ahora vamos a echar un vistazo a cuatro métodos diferentes para crear una plantilla de página personalizada en WordPress.

Método#1: Cómo crear una plantilla de página personalizada en WordPress utilizando código PHP (Método manual)

Para este método, necesitarás

• Editor de texto – Utilizaré el bloc de notas
• Cliente FTP o panel de control del alojamiento – yo utilizaré FileZilla
• Acceso al panel de administración de WordPress
• Conocimientos básicos de PHP y de la estructura de archivos de WordPress

Empecemos…

Paso 1: Añade el código de la plantilla

• Simplemente abre cualquier editor de texto y pega en él el siguiente código.

<?php /* Template Name: PageWithoutSidebar */ ?>

• La línea de código le dirá a WordPress que se trata de un archivo de plantilla llamado PageWithoutSidebar, cuandolo utilicemos. Puedes utilizar el nombre que quieras. Ahora guarda este archivo como PageWithoutSidebar.php. De nuevo puedes utilizar cualquier otro nombre para el archivo. Pero no olvides mantener la extensión como.php.

Paso 2: Sube el archivo de plantilla

• Ahora, vamos a probar nuestro archivo de plantilla recién creado.
• Accede al panel de tu alojamiento. En este ejemplo, estoy utilizando el alojamiento WordPress de Cloudways. Si quieres probar Cloudways, consulta esta guía sobre cómo añadir una aplicación en la plataforma Cloudways.
• A continuación, utilizaré FileZilla para establecer una conexión SFTP con mi servidor y navegar hasta la carpeta /wp-content/themes.
• Abre la carpeta de tu tema actual y sube allí el archivo PageWithoutSidebar.php. En mi caso, el tema es Veintidós.

Paso 3: Seleccionar la plantilla en WordPress

• Ve al Panel de Administración de WordPress > Páginas > Añadir nueva. A continuación, en la sección de atributos de página, deberías ver listada la nueva plantilla de página personalizada.

• Crea una nueva página y configura su plantilla como PageWithoutSidebar. Una vez hecho esto, Publícala.

• Abre la página recién creada. Como todavía no hay elementos de diseño en la plantilla, aparecerá una página en blanco como la de la imagen siguiente.

• Esto muestra que la plantilla de página personalizada de WordPress se ha implementado correctamente, por lo que ya puedes crear un tema personalizado de WordPress adaptable.

Paso 4: Añadir contenido a tu plantilla personalizada

• Ahora es el momento de añadir unas líneas de código para mostrar contenido en la página.
• Para ello, edita el archivo PageWithoutSidebar.php . Ahora utilizaré FileZilla para añadir el código que aparece a continuación a mi archivo.

<?php
/* Template Name: CustomLoginPage */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post(); ?>
        
            <div class="login-page-intro">
                <h2>Welcome to Our Site</h2>
                <p>Please log in to access your account. If you don’t have an account, you can register to become a part of our community.</p>
            </div>

            <div class="login-form-container">
                <?php
                // WordPress login form
                wp_login_form(array(
                    'redirect' => home_url(), // Redirect after login
                    'label_username' => __('Username'),
                    'label_password' => __('Password'),
                    'label_remember' => __('Remember Me'),
                    'label_log_in' => __('Log In'),
                    'remember' => true
                ));
                ?>
            </div>

        <?php
        // End the loop.
        endwhile;
        ?>
    </main><!-- .site-main -->

    <aside id="custom-sidebar" class="sidebar-area">
        <?php if ( is_active_sidebar( 'custom-sidebar' ) ) : ?>
            <ul class="sidebar-menu">
                <?php dynamic_sidebar( 'custom-sidebar' ); ?>
            </ul>
        <?php else : ?>
            <ul class="sidebar-menu">
                <li><a href="#">Pages</a></li>
                <li><a href="#">Account</a></li>
                <li><a href="#">Custom Page Template</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Password Reset</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Restricted Content</a></li>
            </ul>
        <?php endif; ?>
    </aside>

</div><!-- .content-area -->

<?php get_footer(); ?>

• Pega este código en PageWithoutSidebar.php justo debajo de esta línea de código y guárdalo :
• Tu archivo PageWithoutSidebar.php completo tendrá el siguiente aspecto.

<?php /* Template Name: PageWithoutSidebar */ ?>

<?php
/* Template Name: CustomLoginPage */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post(); ?>
        
            <div class="login-page-intro">
                <h2>Welcome to Our Site</h2>
                <p>Please log in to access your account. If you don’t have an account, you can register to become a part of our community.</p>
            </div>

            <div class="login-form-container">
                <?php
                // WordPress login form
                wp_login_form(array(
                    'redirect' => home_url(), // Redirect after login
                    'label_username' => __('Username'),
                    'label_password' => __('Password'),
                    'label_remember' => __('Remember Me'),
                    'label_log_in' => __('Log In'),
                    'remember' => true
                ));
                ?>
            </div>

        <?php
        // End the loop.
        endwhile;
        ?>
    </main><!-- .site-main -->

    <aside id="custom-sidebar" class="sidebar-area">
        <?php if ( is_active_sidebar( 'custom-sidebar' ) ) : ?>
            <ul class="sidebar-menu">
                <?php dynamic_sidebar( 'custom-sidebar' ); ?>
            </ul>
        <?php else : ?>
            <ul class="sidebar-menu">
                <li><a href="#">Pages</a></li>
                <li><a href="#">Account</a></li>
                <li><a href="#">Custom Page Template</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Password Reset</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Restricted Content</a></li>
            </ul>
        <?php endif; ?>
    </aside>

</div><!-- .content-area -->

<?php get_footer(); ?>

• Vuelve a tu página y actualízala. Ahora deberías ver una nueva plantilla de página personalizada como ésta:

Así que, de una página en blanco a una página con algo de contenido, tú, amigo mío, acabas de crear una plantilla de página personalizada. Sé que ahora mismo no tiene el mejor aspecto. Pero créeme, cuando la personalices a tu gusto, tu página tendrá un aspecto estupendo.

¿Las plantillas personalizadas rompen tu tema?

Comparte fragmentos de código y soluciona problemas con desarrolladores de WordPress en nuestra Comunidad Reddit.

👉 Únete a nosotros en Reddit

Método#2. Cómo crear una página personalizada con el editor de bloques

Este método es una alternativa más sencilla y ágil a la creación de una plantilla personalizada con acceso SFTP. Aquí utilizarás el editor de bloques integrado de WordPress para diseñar una plantilla de página personalizada sin necesidad de herramientas externas. Esto es ideal si quieres un diseño rápido y reutilizable para varias páginas.

• Empieza abriendo cualquier página o entrada en el editor. En el menú de la derecha, ve a la pestaña «Página» y busca la opción «Plantilla» .

• Haz clic en el texto situado junto a «Plantilla«. En la ventana emergente que aparece, selecciona la opción «Crear nueva plantilla» .

• En la ventana emergente, dale a tu plantilla un nombre que sea fácil de reconocer, como «Plantilla de página personalizada», y luego haz clic en «Crear«.

• Ahora, entrarás en el editor de plantillas, donde puedes añadir bloques de contenido haciendo clic en el botón azul «+«. Arrastra y suelta bloques como encabezados, texto, imágenes u otros elementos que necesites

• Añadamos el widget de calendario como ejemplo

• Cuando estés satisfecho con el diseño, haz clic en «Guardar».

• Para utilizar tu plantilla, abre la página donde quieras aplicarla. Haz clic junto a «Plantilla» y luego en la opción Intercambiar plantilla

• A continuación, elige la plantilla que acabas de crear

Alternativa: Utiliza bloques reutilizables

Otra forma de crear una plantilla de página personalizada es utilizar bloques reutilizables en WordPress. Esto te permite guardar y reutilizar un conjunto de bloques en diferentes páginas o entradas, haciendo que el proceso sea más eficiente.

Por ejemplo, podemos utilizar los bloques que usamos antes para crear la página con el editor de bloques y guardarlos como un bloque reutilizable. De esta forma, en lugar de recrear manualmente el mismo diseño cada vez, podemos insertar rápidamente el bloque guardado.

He aquí cómo hacerlo:

1. Haz clic dentro de cualquier bloque y pulsa CTRL + A (o CMD + A en Mac) para seleccionar todos los bloques.
2. Haz clic en «Añadir a Bloques Reutilizables».
   
   
3. Dale un nombre al bloque reutilizable y haz clic en Guardar.
   
   

Ahora, siempre que necesitemos aplicar el mismo diseño a una página nueva, sólo tenemos que buscar el bloque reutilizable en el editor de bloques e insertarlo.

Método#3. Cómo crear una página personalizada utilizando un plugin (Elemantor)

Crear plantillas de página personalizadas en WordPress puede mejorar significativamente la funcionalidad y el aspecto de tu sitio.Elemantor, con su funcionalidad de constructor de temas, proporciona una forma eficaz de crear y gestionar estas plantillas personalizadas.

A continuación te explicamos cómo puedes crear una plantilla de página personalizada con Elemantor:

• Tras instalar Elementor en tu sitio web, ve a Plantillas en el panel de control de WordPress y haz clic en Añadir nuevo.

• Ahora, Elementor te pedirá que elijas un tipo de plantilla: Contenedor, Página, Sección. Si usas la versión pro, tendrás más opciones para elegir. Yo elegiré página para este ejemplo. A continuación, también tendré que nombrar mi plantilla.

• Haz clic en Crear plantilla cuando hayas terminado. Esto abre el editor de Elementor donde puedes empezar a construir tu plantilla.
• Para utilizar una plantilla prediseñada, haz clic en el icono Carpeta.

• Si empiezas desde cero, arrastra y suelta los elementos que necesites en la página. En aras de la simplicidad, utilizaré una plantilla prediseñada. Para ello, elige cualquier plantilla y haz clic en «Insertar».

• Pulsa Aplicar cuando aparezca una ventana emergente. Esto anulará el diseño, la disposición y otros ajustes de la Página en la que estés trabajando.

• Personaliza la plantilla arrastrando y soltando widgets como encabezados, imágenes, botones o formularios en la página. Yo simplemente hice algunos retoques añadiendo un par de imágenes a mi plantilla.

• Cuando estés satisfecho con el diseño, haz clic en la flecha hacia abajo situada junto al botón Publicar y selecciona Guardar como plantilla.

• Pon un nombre a tu plantilla y haz clic en Guardar. Ahora tu plantilla está guardada y puedes utilizarla donde quieras.

• Para utilizar la plantilla que acabas de crear, ve a Páginas > Añadir nueva y haz clic en Editar con Elementor.

• Haz clic en el icono Carpeta, busca tu plantilla guardada en Mis plantillas y haz clic en Insertar.

• Una vez insertada, este es el aspecto que tendrá mi plantilla cuando la previsualice.

• Esto es todo. Así de fácil es crear plantillas de página personalizadas en WordPress con un plugin constructor de sitios web como Elementor.

Problemas y soluciones comunes al utilizar plantillas de página personalizadas

A continuación se indican algunos de los problemas más comunes con las plantillas de página personalizadas, pero dependiendo de tu tema y configuración, puedes encontrarte con otros.

1. La plantilla de página personalizada no se muestra en WordPress

Si tu plantilla de página personalizada no aparece en el editor de páginas en «Plantilla», asegúrate de que:

• El archivo se guarda en la raíz de tu tema o en la carpeta «templates».
• El archivo comienza con el comentario de cabecera correcto, así:

<?php
/*
Template Name: Custom Template
*/
?>

• Has actualizado el panel de administración de WordPress recargando la página.

2. Los cambios en la plantilla personalizada no se reflejan en la página

Si no se muestran las actualizaciones de tu plantilla personalizada:

• Borra la caché de tu navegador o utiliza una ventana de incógnito.
• Elimina y reasigna la plantilla a la página en el editor.
• Asegúrate de que WordPress no está sirviendo una versión en caché desde un plugin de caché.

3. Se aplica una plantilla incorrecta

Si WordPress está cargando una plantilla diferente a la esperada:

• Comprueba si otro archivo de plantilla (como page-{slug}.php o page.php) lo está anulando.
• Utiliza get_page_template() en modo depuración para ver qué plantilla se está cargando.

4. Plantilla de página personalizada Romper el diseño

Si tu plantilla personalizada causa problemas de diseño:

• Asegúrate de que incluye get_header() y get_footer() para que los estilos y scripts se carguen correctamente.
• Asegúrate de que la estructura de tu plantilla coincide con el diseño existente del tema.

5. Plantilla personalizada que no funciona con etiquetas condicionales

Si las etiquetas condicionales no se comportan como se espera:

• Asegúrate de que los utilizas dentro del «Bucle» cuando sea necesario.
• Comprueba dos veces las condiciones; por ejemplo, is_page(‘about’) debe estar dentro del gancho wp_head o del archivo de plantilla.

El alojamiento gestionado de WordPress más rápido por sólo 11 ¤ al mes*.

Experimenta velocidades de servidor ul trarrápidas con la pila híbrida Cloudways LAMP + NGINX. Mejora tu Core Web Vitals hoy mismo.

PRUEBA AHORA

Conclusión

Crear una plantilla de página personalizada en WordPress es una forma estupenda de crear páginas específicas con un aspecto único y diferente del resto del diseño de tu sitio web. Otra ventaja de crear plantillas de página es que se pueden reutilizar. Puedes diseñar una página una vez con la funcionalidad deseada y luego aplicar esa plantilla a tantas páginas como necesites.

En este blog, cubrí en detalle las plantillas de página personalizadas de WordPress, mostrándote tres métodos diferentes para crear plantillas personalizadas: manual, editor de bloques y basado en plugins (Elementor).

Si crees que me he dejado algo, no dudes en decírmelo en los comentarios.