Crear una plantilla de página personalizada en un tema de WordPress

Uno de los puntos de venta más importantes de WordPress es la idea de temas. Un solo tema agrega un gran valor al diseño y la funcionalidad del sitio web. Sin embargo, hay sitios web que tienen diferentes diseños en diferentes páginas.

Desafortunadamente, varios temas de WordPress impiden que los usuarios modifiquen los diseños y la funcionalidad de una página diferente en la jerarquía. La plantilla de página personalizada de WordPress permite a los usuarios integrar requisitos personalizados, como la barra lateral derecha / izquierda en una página en particular, una funcionalidad adicional de llamada a la acción o tal vez un encabezado único para una página de destino en particular. Profundicemos más para ver cómo la plantilla de página personalizada de WordPress muestra diferentes tipos de contenido.

Una plantilla de página de WordPress personalizada podría usarse para varios propósitos. Algunas ideas incluyen:

• Mostrar publicaciones recientes de cada categoría
• Incrustar Google Map o cualquier script
• Lista de todos los autores.
• Imágenes subidas recientemente
• Página de diseño personalizado para la cartera.
• Pagina de contacto

La apariencia de todas las páginas y publicaciones que se crean en un sitio web de WordPress se maneja mediante un archivo de plantilla llamado page.php . Crear o editar una plantilla de página personalizada en WordPress requiere conocimientos básicos de HTML, CSS y PHP.

Simplemente abra cualquier editor de texto y pegue el siguiente código en él.

 <? php / * Nombre de plantilla: PageWithoutSidebar * /?>

La línea de código anterior le dice a WordPress que es un archivo de plantilla llamado PageWithoutSidebar . Puede utilizar el nombre que desee. Ahora guarde este archivo como PageWithoutSidebar.php . Nuevamente, puede usar cualquier otro nombre para el archivo. Pero no olvide mantener la extensión como .php

Ahora, vamos a probar nuestro archivo de plantilla recién creado.

Inicie sesión en su panel de alojamiento. En este ejemplo, estoy usando Cloudways, un alojamiento de WordPress administrado más rápido. Cloudways admite aplicaciones de WordPress con las opciones de proveedor para AWS, DigitalOcean, GCP, Linode y Vultr. Navegue a la carpeta / wp-content / themes . Abra su carpeta de temas actual y cargue el archivo PageWithoutSidebar.php allí.

Vaya al Panel de administración de WordPress > Páginas> Agregar nuevo . Puede ver la nueva plantilla de página personalizada en el lado derecho.

Cree una nueva página y establezca su plantilla en PageWithoutSidebar. Una vez hecho esto, publícalo .

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

Esto muestra que la plantilla de página personalizada en WordPress se implementó con éxito, por lo tanto, puede crear un tema de WordPress adaptable personalizado

Ahora es el momento de agregar algunas líneas de código para mostrar el contenido de la página.

Para esta demostración, discutiré cómo puede personalizar la plantilla de página Twenty Sixteen predeterminada.

La apariencia predeterminada de las páginas es generada por el archivo page.php ubicado en la carpeta / wp-contents / themes / YOUR THEME / . Abra page.php y copie este código.

 <? php get_header (); ?>

<div class = "área de contenido">
                <main class = "site-main" role = "main">
                                <? php
                                // Inicia el ciclo.
                                while (have_posts ()): the_post ();

                                                // Incluya la plantilla de contenido de la página.
                                                get_template_part ('partes de plantilla / contenido', 'página');

                                                // Si los comentarios están abiertos o tenemos al menos un comentario, cargue la plantilla de comentarios.
                                                if (comments_open () || get_comments_number ()) {
                                                                comments_template ();
                                                }

                                                // Fin del ciclo.
                                end while;
                                ?>

                </main> <! - .site-main ->

                <? php get_sidebar ('contenido inferior'); ?>

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

<? php get_sidebar (); ?>
<? php get_footer (); ?>

Pegue este código en PageWithoutSidebar.php justo debajo de esta línea de código.

 <? php / * Nombre de plantilla: PageWithoutSidebar * /?>

¡Guárdalo!

Su archivo PageWithoutSidebar.php completo se verá a continuación.

 <? php / * Nombre de plantilla: PageWithoutSidebar * /?>

<? php get_header (); ?>

<div class = "área de contenido">

                <main class = "site-main" role = "main">

                                <? php

                                // Inicia el ciclo.
                                while (have_posts ()): the_post ();

                                                // Incluya la plantilla de contenido de la página.
                                                get_template_part ('partes de plantilla / contenido', 'página');

                                                // Si los comentarios están abiertos o tenemos al menos un comentario, cargue la plantilla de comentarios.
                                                if (comments_open () || get_comments_number ()) {

                                                                comments_template ();

                                                }

                                                // Fin del ciclo.
                                end while;

                                ?>

                </main> <! - .site-main ->

                <? php get_sidebar ('contenido inferior'); ?>

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

<? php get_sidebar (); ?>

<? php get_footer (); ?>

Vuelve a tu página y actualízala. Observará que todo funciona de la forma en que lo hace en el tema predeterminado de WordPress Twenty Sixteen.

Ahora permítanos personalizarlo. Como puede ver, hay una barra lateral en el lado derecho. Lo eliminaré solo de esta página. Todas las demás páginas tendrán la apariencia predeterminada del tema Twenty Sixteen.

Abra el archivo PageWithoutSidebar.php . Desplácese hacia abajo hasta el final del archivo y elimine :

 <? php get_sidebar (); ?>

Esta es la línea de código que aparece en la barra lateral de la página. Después de eliminar la línea, guárdela . ¡Abra la URL de la página y la barra lateral ya no existe!

Como puede ver, la barra lateral se ha eliminado correctamente de esta página. Sin embargo, la alineación del texto no es buena. Hay un espacio en blanco en el lado derecho. La solución es justificar y extender el texto para que llene la pantalla.

Regrese a PageWithoutSidebar.php y busque:

 <div class = "área de contenido">

Simplemente cambie " área de contenido " a " sitio-contenido-ancho completo " y listo. Actualice la página y el contenido es de ancho completo.

¿Todavía tienes curiosidad por saber por qué he creado una plantilla de página personalizada cuando podría haber editado fácilmente el archivo page.php ? Es bastante obvio que si se edita el archivo page.php , todas las páginas del sitio web mostrarán los cambios. Para aplicar una apariencia personalizada en páginas específicas, la plantilla de página personalizada en WordPress es útil. También puede definir un rol de usuario personalizado en WordPress para asignar diferentes privilegios a los usuarios.

Si tiene alguna pregunta, no dude en hacerla publicando en la sección de comentarios a continuación.