Cómo crear plantillas personalizadas de WordPress manualmente: una guía

Si no está satisfecho con el diseño de su sitio web y el tema elegido no ofrece el nivel de opciones de personalización requerido, ¡entonces podría ser el momento de considerar crear su propia plantilla personalizada! Según sus necesidades, esta plantilla de WordPress puede ser una plantilla de publicación personalizada, una plantilla de página o una vista de categoría.

Una de las cosas emocionantes de WordPress es que, sin importar cómo se haya creado su sitio web de WordPress, siempre puede modificar el diseño o el diseño en cualquier momento. Esto se puede hacer anulando una plantilla prefabricada o creando una propia. WordPress ofrece una gran cantidad de flexibilidad y le brinda la posibilidad de crear su propia plantilla para cualquier cosa.

A pesar del hecho de que crear su propia plantilla abre una gran cantidad de posibilidades de diseño, la mayoría de los usuarios de WordPress probablemente evitarían el desafío porque les preocupa que crear su propia plantilla personalizada de WordPress sea demasiado complejo. En esta serie de dos artículos, analizaremos las dos opciones que tiene abiertas. En primer lugar, en este artículo veremos cómo puede codificar una plantilla de WordPress personalizada manualmente (que ofrece lo último en flexibilidad) y luego examinaremos cómo puede usar los creadores de páginas populares para asumir parte del trabajo pesado necesario. al crear una plantilla personalizada de WordPress.

En este artículo, veremos formas de crear plantillas personalizadas para páginas, publicaciones e incluso categorías de publicaciones. Empecemos analizando primero por qué es posible que desee una plantilla personalizada.

Nota: este artículo asume un conocimiento práctico de HTML, CSS y PHP.

¿Cuándo necesitas una plantilla de WordPress personalizada?

Quizás aún no esté seguro de por qué necesitaría usar una plantilla personalizada de WordPress. La forma más fácil de explicar esto es con un ejemplo.

Imaginemos que tienes un sitio web para tu negocio. El tema 'Twenty Twenty' está activado y todas las páginas y publicaciones necesarias ya están creadas y llenas de contenido (texto e imágenes), un extracto y una imagen destacada.

La configuración general también está configurada y ha realizado una serie de cambios a través del Personalizador (como colores de enlace, color de superposición de plantilla de portada, etc.)

También se ha creado un menú con 5 elementos: Página de inicio – Perfil de la empresa – Servicios – Acerca de nosotros – Contáctenos

En la sección Servicios hay un submenú: Servicio 1 – Servicio 2 – Servicio 3.

Entonces, desde la perspectiva de un desarrollador de WordPress, esencialmente tienes:

• Cuatro páginas estándar (Página de inicio – Perfil de la empresa – Acerca de nosotros – Contáctenos)
• Una página de archivo (Servicios)
• Tres páginas de publicación (Servicio 1 – Servicio 2 – Servicio 3)

De forma predeterminada, las 3 páginas de Service Post tendrán el mismo diseño. La única opción que tiene actualmente es diferenciar los diseños individuales de estas publicaciones seleccionando una de las tres plantillas proporcionadas a través de la configuración Atributos de la publicación.

Si seleccionamos cada una de las diferentes plantillas veremos que quedan así:

Plantilla predeterminada

Plantilla de ancho completo

Plantilla de portada

Si tiene suerte, uno de estos estilos funcionará para usted y puede elegir usarlos para su sitio web. Sin embargo, si no es así, y te sientes frustrado porque ciertos elementos no se ven "justo como quieres", entonces no te preocupes... aquí es donde entra en juego la creación manual de tu propia plantilla personalizada de WordPress.

Prosigamos y veamos qué se puede lograr con una plantilla personalizada.

Cómo crear manualmente una plantilla de publicación de WordPress personalizada

Lo que haremos en el siguiente tutorial es crear una vista de publicación única que esté completamente personalizada y se especificará dentro de su propio archivo PHP. También agregaremos una opción llamada 'Mi plantilla de publicación personalizada' al menú desplegable de plantillas en los atributos de la publicación que se corresponderá con el diseño de la publicación personalizada y presentará nuestra estructura única.

Paso uno: Introducción de nuestra plantilla a WordPress

Para comenzar, debemos crear un archivo PHP llamado algo así como: "my-custom-post.php" en la carpeta raíz de su tema de WordPress (en nuestro ejemplo, se encuentra en /themes/twentytwenty/).

Abra el archivo con su editor de texto favorito (como Sublime) y agregue el contenido a continuación:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

Esta línea * Template Name: My custom post template define el nombre que se mostrará en el menú desplegable de la plantilla. Eche un vistazo a la captura de pantalla a continuación y verá cómo aparecería.

El * Template Post Type: post es opcional y define el tipo de publicación para la que aparecerá la plantilla como una opción. Como hemos definido esto como 'publicación', esta plantilla no aparecerá en el menú de opciones de plantilla para una página, como se puede ver en el siguiente ejemplo.

La última línea: get_header(); ?> get_header(); ?> recupera el contenido del encabezado.

En este punto, si elige "Mi plantilla de publicación personalizada" como plantilla activa para, digamos, nuestra publicación 'Servicio 1', la salida estará en blanco. Esto es lo que esperaríamos, ya que aún no hemos agregado ninguna estructura a la página. Verías algo como esto:

Agregar estructura a nuestra plantilla personalizada de WordPress

Si bien es completamente posible crear la estructura de nuestra página completamente desde cero, a veces puede ser más fácil tomar la estructura de publicación existente que se usa en nuestra plantilla de tema y luego modificarla.

Si echamos un vistazo a la jerarquía de plantillas de WordPress, podemos ver que, según el tema, la plantilla de publicación única proviene del archivo singular.php o single.php ubicado dentro de la carpeta del tema.

Para aclarar aún más: cuando las publicaciones y las páginas usan la misma estructura, se usa el archivo singular.php; de lo contrario (como en el popular tema Astra, por ejemplo), verá archivos single.php, page.php, archive.php que son codificado para proporcionar diferentes estructuras para publicaciones, páginas y diseños de blog, respectivamente.

En este caso, usando el tema Twenty Twenty, podemos ver que el archivo singular.php usa la función get_template_part para recuperar el diseño solicitado de la carpeta template-parts.

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

Lo que hace inteligentemente el código anterior es verificar si hay contenido en la publicación y, de ser así, imprime el contenido usando la estructura especificada por la plantilla seleccionada. Esto se aplica en todos los casos, independientemente de si se está utilizando una publicación, una página o un archivo.

Ahora podemos ver cómo nuestro tema extrae datos de diseño de las plantillas existentes. Ahora estamos listos para comenzar a crear nuestra propia plantilla. Para definir cómo se ve nuestra plantilla, primero debemos diseñarla. Es posible que desee que la página de su publicación se presente en el siguiente formato:

Una vez que haya decidido un diseño de diseño, deberá codificarlo usando HTML, CSS y PHP. Este artículo asume que tiene un conocimiento práctico de estos idiomas y puede crear el diseño requerido. Tomando el diseño anterior, escribiríamos un código inicial que, agregado a su archivo my-custom-post.php, se vería así:

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

Hay funciones de acceso directo que nuestro tema Twenty Twenty proporciona para metadatos de publicaciones y otros datos que tal vez queramos publicar. Sin embargo, en lugar de usar estos, vamos a usar las funciones predeterminadas de WordPress para que su plantilla funcione en cualquier tema. Uno con el que trabajaremos es el siguiente:

• the_title() – repite el título de la publicación
• the_excerpt() – repite el extracto de la publicación
• the_post_thumbnail() : muestra el tamaño predeterminado de la miniatura de la publicación. Puede usar las opciones the_post_thumbnail() para generar un tamaño de imagen destacado específico
• the_content() – Muestra el contenido de la publicación

Si guardamos nuestras actualizaciones y ahora echamos un vistazo a la publicación 'Servicio 1', veremos el diseño de plantilla personalizado aplicado.

Cómo crear una plantilla de categoría de publicación personalizada de WordPress

Ahora que hemos visto lo relativamente fácil que es crear nuestro propio diseño de plantilla de publicación, podemos continuar y aplicar principios similares para crear nuestro propio diseño de vista de categoría.

Una forma sencilla de hacerlo es editar directamente el archivo index.php (ubicado en nuestra carpeta raíz /themes/twentytwenty/). Si bien editar este archivo directamente está bien para fines de tutoriales, si el sitio web está activo, es posible que desee utilizar un tema secundario para asegurarse de que las actualizaciones no se sobrescriban la próxima vez que actualice su tema.

Si observamos el código index.php, notaremos que en su mayoría está lleno de condiciones "si" de PHP que especifican las salidas disponibles según el tipo de contenido. Por ejemplo, el siguiente código verifica si el contenido incluye publicaciones (es una publicación, página o archivo) o es una página de resultados de búsqueda y muestra el contenido correcto en consecuencia.

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

Si está siguiendo este tutorial usando el tema Twenty Twenty, busque el siguiente código en su archivo index.php:

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

En template-parts/content.php podemos ver que el contenido se recupera usando la función 'get_template_part'.

En lugar de usar estas funciones específicas del tema para especificar el diseño de nuestra página de categoría de publicación, usaremos las funciones predeterminadas de WordPress para cada elemento. Esto significará que cambiaremos el código anterior a lo siguiente:

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

Si tiene ojo de águila, verá que estamos haciendo referencia a un archivo llamado my-custom-category-view.php que ahora necesitamos crear y agregar a la carpeta de nuestro tema (un enfoque alternativo sería agregar esta información directamente a nuestro archivo index.php , pero tenerlo guardado como un archivo separado es mucho más ordenado.

Cree un archivo my-custom-category-view.php y agregue el siguiente código:

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

Verá que hemos podido usar el formato más avanzado de la función the_title() para especificar el título de la publicación. El enlace a la página de publicación única se ha generado utilizando la función get_permalink().

Para terminar, ahora deberá agregar un estilo adicional a su archivo style.css:

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

Veamos lo que hemos logrado hasta ahora:

¡Agradable!

Como puede ver, todavía hay algunos problemas con respecto al ajuste de las imágenes, ya que tienen una proporción diferente. Podemos arreglar esto fácilmente agregando algunas líneas más a nuestro CSS para recortar las imágenes en el centro y dar dimensiones fijas:

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

De esta manera, por supuesto, todavía estamos usando las imágenes originales, lo que no es necesariamente óptimo desde una perspectiva de rendimiento. La mejor práctica aquí es usar tamaños de imagen de WordPress. Si desea que su nuevo diseño de página responda, también eche un vistazo a esta guía completa para obtener más información.

Y eso es todo, ¡bien hecho! Ahora ha logrado crear con éxito su propio diseño y diseño personalizados para la vista de categoría de publicación.

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

Hasta ahora, hemos creado un diseño personalizado para nuestra página de publicaciones y también un diseño personalizado para los resultados de las categorías. Podrá aplicar los métodos utilizados al crear una plantilla personalizada para páginas, así como aplicar exactamente los mismos principios.

Sin embargo, antes de terminar este artículo, echemos un vistazo rápido a una plantilla de página un poco más compleja. En este ejemplo, incluiremos nuestras páginas de publicaciones en nuestra plantilla para que podamos mostrarlas de la forma en que se verían en una página de categoría, pero con el beneficio adicional de la capacidad de edición que ofrece una página (en lugar de una página de categoría). .

Nuestro objetivo será crear una página general de 'Servicios' que enumere nuestros tres servicios comerciales (en este ejemplo, Servicio 1, Servicio 2 y Servicio 3). En lugar de tener que agregarlos manualmente a nuestra página, se arrastrarán dinámicamente a la página. Si bien en la práctica es posible que no deba preocuparse por esto, los principios de codificación son útiles para comprender y demostrar aún más la flexibilidad que ofrece WordPress.

Para comenzar, cree un nuevo archivo dentro de la carpeta de su tema y asígnele un nombre como my-services-template.php . Una vez hecho esto, ahora agregaremos algunos comentarios de declaración necesarios como lo hicimos antes con la plantilla de publicación única. También vamos a usar la función get_template_part().

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

La función get_template_part() es básicamente un mecanismo que nos permite cargar piezas de código reutilizables. En este caso, tomará el contenido de template-parts/content-cat_services.php . Es en este archivo donde insertaremos un código que generará las publicaciones de la categoría 'Servicios'.

En resumen, lo que hará el código en este archivo es:

• Asigne un título a la página de categoría.
• Consulta las publicaciones de la categoría especificada desde la base de datos.
• Recorra las publicaciones y muestre un diseño para cada una.

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

Examinaremos las consultas más a fondo en un artículo futuro. Lo que necesita saber para los propósitos de este artículo es que $args = array( 'cat'=>4, 'orderby' => 'title' ); está recuperando la categoría de publicación con el número de identificación de 4 (ID = 4). Este número de categoría que se relaciona con nuestra categoría 'Servicios'.

Entonces, ¿cómo puedes ver el ID de cada categoría? Es bastante simple en realidad. Vaya a Publicaciones de menú > Categorías y abra cualquier categoría para editar. El ID está en la URL de la página de edición de categoría como se muestra a continuación:

Para ver nuestra nueva plantilla, debemos ir a Páginas y crear una nueva página. En el área de edición de la página no necesita ingresar ningún contenido. En su lugar, simplemente seleccione la opción 'Mi plantilla de categoría de publicación' en el menú desplegable de plantilla Atributos de página.

Por último, vaya al menú y agregue un elemento de "Servicios" para nuestra nueva página para reemplazar el elemento de categoría de Servicios actual. El menú ahora debería verse así

Veamos lo que hicimos:

El método anterior muestra cómo crear una plantilla de página personalizada de WordPress que atrae una categoría específica (en este ejemplo, nuestros 'Servicios'). Si selecciona la misma plantilla para otra página de categoría, volverá a ver las publicaciones de la categoría Servicios, ya que lo solicitamos específicamente con el ID de categoría (ID=4). Por lo tanto, si quisiera una nueva plantilla de página que incluyera una categoría diferente, necesitaría crear un archivo de plantilla separado para hacerlo (y actualizar la ID de categoría en consecuencia).

Conclusión

Ser capaz de crear su propia plantilla personalizada para su sitio web de WordPress le brinda el máximo control sobre el aspecto de su sitio web. Vale la pena el esfuerzo de crear plantillas personalizadas para la vista individual o de categoría de sus tipos de publicación. Por supuesto, no solo permite un control total sobre los elementos de diseño de su sitio, sino que también le permite replicar rápidamente un determinado diseño para páginas futuras.

Ver también

• Cómo crear plantillas personalizadas de WordPress usando Page Builders – Una guía