Cómo crear plantillas de página de WordPress personalizadas

Las plantillas de página en los temas de WordPress ayudan a determinar el diseño de las páginas dentro de un sitio web. Sin embargo, ajustar estas plantillas puede ser a veces intimidante, especialmente para los principiantes. Afortunadamente, WordPress ofrece bastante flexibilidad cuando se trata de plantillas de página al permitirle crear plantillas de página personalizadas en su tema.

La creación de plantillas de página personalizadas para su sitio le permite modificar fácilmente los diseños y diseños de su sitio según sus preferencias. También le permite agregar requisitos personalizados, como utilizar diferentes encabezados para diferentes páginas. Estos cambios se pueden aplicar en diferentes páginas o en una sola página.

En este artículo, veremos qué son las plantillas de página de WordPress personalizadas, la jerarquía de plantillas de página predeterminada y cómo crear plantillas de página de WordPress personalizadas en su tema.

Tabla de contenido

¿Qué es una plantilla de página personalizada de WordPress?

La jerarquía de plantillas de página de WordPress

Creación de una plantilla de página personalizada

• Cómo crear una plantilla personalizada global
• Creación de una sola plantilla de página

Conclusión

¿Qué es una plantilla de página personalizada de WordPress?

Una plantilla de página personalizada de WordPress es un archivo de plantilla que le permite tener un diseño y una apariencia separados de su sitio web.

Como ejemplo, si tiene un tema de blogs en su sitio, puede crear una plantilla personalizada para su sitio, que no muestra una barra lateral ni comentarios. También puede crear una plantilla para páginas en las que tiene una plantilla que presenta contenido en un diseño en caja y otra en un diseño de ancho completo. No hay limitaciones en la cantidad de plantillas de página que puede crear.

La representación de las páginas está controlada por el archivo page.php en WordPress. Por lo tanto, este archivo se forma como una base predeterminada para representar el contenido de su página y se encuentra dentro de la raíz de sus archivos de tema, como se ilustra a continuación.

Si hay plantillas de página más específicas, se activa la jerarquía de plantillas.

La jerarquía de plantillas de página de WordPress

La jerarquía de plantillas de página determina qué archivo de plantilla elige WordPress al mostrar una página, según la naturaleza de la solicitud realizada y su existencia dentro del tema.

La jerarquía de plantillas de WordPress predeterminada es la siguiente:

Plantilla de página : WordPress busca una plantilla asignada a la página y usa esta plantilla dentro de la página

page-{slug}.php : si no se asigna ninguna plantilla a la página, WordPress busca una plantilla con el slug en la página y la aplica si la encuentra.

Un slug es una parte dentro de la URL de la página después del nombre de dominio y se puede editar. A continuación se muestra una ilustración de muestra sobre esto.

page-{id}.php : WordPress comprobará la existencia de una plantilla de página con el ID de la página que se está procesando si no se encuentra ninguna plantilla con el slug.

page.php : si no se encuentra una plantilla con una identificación de página, WordPress utilizará la plantilla estándar de page.php para representar la página.

singular.php : en caso de que no se encuentre el archivo page.php, WordPress utilizará el archivo singular.php independientemente del tipo de publicación.

index.php : si ninguna de las plantillas anteriores está disponible, WordPress presenta de forma predeterminada las páginas utilizando el archivo index.php.

Por lo tanto, la representación de páginas dentro de su entorno de WordPress puede llevarse a cabo mediante cualquiera de las plantillas de página anteriores. Por lo tanto, depende de usted determinar el nivel de precedencia que desea tener.

Creación de una plantilla de página personalizada

La creación de plantillas de página personalizadas en su tema es bastante fácil. Sin embargo, debe determinar si las plantillas de página serán para una sola página o para cualquier página.

En esta guía, veremos cómo crear manualmente una plantilla de página global en el tema Stax, así como una plantilla de página única para una de nuestras páginas.

Cómo crear una plantilla personalizada global

A veces, desea crear una plantilla de página que se pueda usar globalmente en cualquier página dentro de su sitio web.

Para hacerlo, primero deberá identificar un editor de texto para usar, como Notepad, Notepad ++, texto sublime o cualquier otro editor de su preferencia.

Una vez hecho esto, puede comenzar a crear su archivo de plantilla realizando lo siguiente:

Paso 1: Cree un nuevo archivo y agregue el siguiente código :

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

Recomendamos usar un nombre de plantilla que no se use en ninguna otra plantilla de página que pueda tener dentro de su sitio web, así como un nombre que pueda identificar fácilmente y relacionar con las páginas de su sitio.

Una vez hecho esto, guarde su nueva plantilla de página con la extensión .php. En nuestro caso aquí, llamaremos al archivo de plantilla pagewithnofooter.php . Puede usar cualquier nombre de su preferencia pero es más recomendable usar un nombre similar al nombre de su plantilla.

Paso 2: Agregue su código deseado al archivo

En este paso, puede agregar su código preferido al archivo, ya sea en PHP o PHP y HTML.

Con fines ilustrativos, en nuestro caso aquí, usaremos el contenido del archivo right-sidebar.php predeterminado dentro del archivo pagewithnofooter.php, pero lo personalizaremos y agregaremos el código para generar un texto de bienvenida HTML personalizado y deshabilitaremos el pie de página. Si está utilizando otro tema de WordPress, también puede copiar el contenido de page.php dentro del tema o cualquier otra plantilla de página definida por el tema que su tema pueda tener.

Por lo tanto, nuestro código será el siguiente:

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

Paso 3: Cargue la plantilla de la página en sus archivos de tema .

Con la ayuda de un programa FTP como Filezilla o a través de su panel de alojamiento, cargue su archivo personalizado a la raíz de sus archivos de temas. En nuestro caso aquí, esto estará dentro de las siguientes rutas de directorio:

i) wp-content > Temas > Stax

ii) Recomendado: wp-content > Temas > stax-child

Esto es aplicable al usar un tema secundario dentro de su sitio, y stax-child es su tema secundario.

Recomendamos usar el tema secundario al personalizar las plantillas de página o cualquier otra personalización de archivo dentro de su tema para evitar perder las personalizaciones durante las actualizaciones del tema.

Paso 4: Cree una nueva página y asígnele la plantilla "PageWithNoFooter"

Para lograr esto, navegue a la sección Páginas> Agregar nuevo dentro de su tablero de WordPress y cree su página.

Una vez que haya creado la página, asígnele la plantilla "PageWithNoFooter" y guarde los cambios.

A continuación se muestra una ilustración de muestra de esto:

Ahora, al obtener una vista previa de la página en el front-end, nuestra página no tendrá un pie de página dentro de su página. También tendrá el HTML personalizado que agregamos.

A continuación se muestra una captura de pantalla sobre esto:

Puede usar la plantilla en cualquier página en la que le gustaría que se aplicara su diseño o en cualquier página que no pretenda tener un pie de página.

Creación de una sola plantilla de página

Las plantillas de página personalizadas para páginas individuales son más específicas de la página. Como se mencionó anteriormente, estas plantillas se consideran para la selección si no se asigna una "plantilla de página" a una página.

En cuanto a estas plantillas, puede orientar la página por slug o ID de página. También es importante tener en cuenta las perspectivas futuras de su sitio web al determinar si usar un slug de página o una identificación. Por ejemplo, si tiene la intención de migrar su sitio a otro dominio, entonces usar una ID de página no sería apropiado al crear su archivo de plantilla. En cambio, usar la babosa se consideraría una mejor opción. Si, por otro lado, su sitio está siendo administrado por varias personas y cree que existe la posibilidad de que puedan alterar el slug de la página, entonces sería mucho más preferible usar una ID de página al crear la plantilla de la página.

En nuestro caso aquí, crearemos una plantilla de página personalizada para nuestra página de contacto y deshabilitaremos el pie de página de la página. Para crear una plantilla de este tipo, deberá realizar lo siguiente:

Paso 1: Copie el contenido de la página.php

En este paso, primero deberá ubicar page.php dentro de los archivos de su tema.

Una vez que haya localizado el archivo, seleccione editarlo y copiar su contenido.

Paso 2: crea una nueva plantilla para la página

Dentro de la raíz de sus archivos de tema, cree la plantilla de página para la página de contacto. Puedes usar el archivo page-{id}.php o page-{slug}.php. En nuestro caso aquí, usaremos el slug, por lo que nombraremos nuestra plantilla como page-contact.php ya que “contacto” es nuestro slug de página como se ve a continuación:

A continuación también se muestra una ilustración de la ubicación del archivo:

Paso 3: Pegue el contenido del archivo page.php

Ahora deberá pegar el contenido del archivo page.php que copiamos en el paso 1 anterior en nuestro nuevo archivo page-contact.php. Al hacer esto, puede personalizar el archivo para incorporar los cambios de código deseados y guardar los cambios. En nuestro caso, deshabilitaremos el pie de página en la página de contacto para que nuestro código final se lea como:

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

Al ver una vista previa de su página de contacto, se dará cuenta de que la página no incorpora un pie de página.

A continuación se muestra una comparación de capturas de pantalla en la página inicialmente y después de aplicar la nueva plantilla.

Página de contacto con pie de página

Página de contacto sin pie de página

Conclusión

Crear plantillas de página personalizadas para su sitio web es relativamente fácil. Dentro de esta guía, hemos analizado específicamente cómo crear manualmente plantillas personalizadas dentro de su tema de WordPress. Hemos utilizado el tema Stax gratuito como caso de uso aquí. Sin embargo, puede aplicar la misma técnica en todos los demás temas de WordPress que siguen los estándares de codificación de WordPress. Sin embargo, también hay otras formas en que puede crear plantillas de página personalizadas, como usar creadores de páginas como Elementor.

Esperamos que este artículo proporcione la información necesaria sobre cómo puede crear manualmente plantillas de página personalizadas. Siéntase libre de comentar a continuación en caso de cualquier pregunta o sugerencia.