Cómo crear plantillas personalizadas de publicación única en WordPress

¿Alguna vez has visto una página de detalles de una publicación con un diseño completamente diferente al de otras publicaciones en el mismo sitio? Probablemente se deba a que está usando una plantilla personalizada. Puede asignar una plantilla personalizada a publicaciones individuales, lo que le brinda una mayor flexibilidad sobre la apariencia de su sitio.

¿Está interesado en aprender a crear una plantilla personalizada de publicación única? ¡En esta publicación, te mostraré cómo puedes crear fácilmente el tuyo propio!

El beneficio de las plantillas personalizadas

Antes de comenzar a crear una, exploremos por qué podría necesitar una plantilla personalizada y qué hace.

Si desea que una publicación o tipo de publicación en particular se destaque del resto de su contenido, puede considerar crear una plantilla personalizada de una sola publicación. Esta plantilla solo se aplicará a las publicaciones a las que la asigne, lo que significa que puede tener un diseño completamente diferente al de sus publicaciones estándar. Un diseño y diseño únicos pueden aumentar la participación del usuario en esa publicación en particular.

¿Listo para desarrollar el tuyo propio? Crear y usar una plantilla de publicación personalizada es similar a una plantilla de página personalizada.

Cómo crear una plantilla de publicación personalizada

Usaré el tema Twenty Seventeen para mi ejemplo, pero el proceso será el mismo para cualquier tema.

Antes de crear una plantilla de publicación personalizada, primero crearé un tema secundario. Puede trabajar en el tema principal, pero dado que está creando una plantilla personalizada, si actualiza el tema principal, perderá su plantilla. Por este motivo, es una buena práctica mantener las plantillas personalizadas separadas del tema principal.

Para una plantilla personalizada, debe definir un Nombre de plantilla (el nombre de la plantilla) y un Tipo de publicación de plantilla (donde se utilizará esta plantilla). Se parece a esto:

<?php
/* Template Name: Full Width Post * Template Post Type: post*/ /*The template for displaying full width single posts. */
get_header( );
?>

Cuando guarde el archivo, mantenga el nombre del archivo relevante para el nombre de la plantilla, como full-width-post.php . Si ve una publicación desde el panel de administración, mostrará la nueva plantilla en un menú desplegable de la sección Atributos de la publicación.

Nuestra plantilla personalizada está lista, pero aún no es útil. ¡Hagámoslo un poco más beneficioso!

Nota: Trabajaremos en varios archivos, así que mantén un registro de los nombres de los archivos y las carpetas.

Este es el diseño actual de las páginas de publicaciones de blog en el tema Twenty Seventeen. Estoy contento con eso, así que lo dejaremos así.

Ahora, supongamos que desea un diseño de ancho completo para algunas publicaciones. Pondremos el título de la publicación sobre los metadatos. Los metadatos deben tener un borde en la parte superior e inferior, y tanto el título como los metadatos deben estar alineados al centro. Aquí está la estructura alámbrica:

Para hacer este diseño, debe encontrar qué archivo es responsable de mostrar las páginas de detalles de la publicación. En la mayoría de los temas, single.php es el archivo, a menos que haya ciertas plantillas predefinidas. La estructura del código varía de un tema a otro, por lo que puede tomar un poco de aprendizaje comprender cómo funciona su tema en particular.

Una vez que haya encontrado el archivo que muestra las páginas de detalles de la publicación, debe buscar si se usa una función para llamar a otro archivo o si la plantilla se crea directamente. En este ejemplo con el tema Twenty Seventeen, es la función get_template_part.

La ruta get_template_part es la parte más importante a seguir aquí.

<div class="wrap">

<div id="primary" class="content-area">
        	<main id="main" class="site-main" role="main">
              	<?php /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
                          	'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
                    	) );
              	endwhile; // End of the loop.
              	?>

Como puede ver, se refiere a una ruta:

get_template_part( 'template-parts/post/content', get_post_format()
);

Entonces, el archivo content.php se llama dentro de single.ph para generar la página de detalles de la publicación.

Ahora que sabe cómo funciona el archivo single.php , copiemos el código y péguelo en nuestro archivo full-width-post.php creado anteriormente en el tema secundario. Dado que será una plantilla de ancho completo, eliminaremos la barra lateral.

Ahora copie el archivo content.php de la ruta mencionada anteriormente. Puede pegarlo en el mismo directorio donde existe su archivo de plantilla, pero le sugiero que siga la misma estructura de carpetas que el tema principal.

Puede mantener el nombre del archivo como está, pero si alguna vez desea cambiar algo en la plantilla predeterminada, causará un conflicto, por lo que para evitar problemas, sugiero cambiar el nombre del archivo y mantenerlo relevante para el nombre de la plantilla. , como content-full-width.php .

Los archivos están en su lugar, así que ahora modifiquemos el código para intercambiar el título de la publicación y los metadatos de la publicación.

<header class="entry-header">
        	<?php

        	if ( is_single() ) {
              	the_title( '

<h1 class="entry-title">', '</h1>

' );
        	} elseif ( is_front_page() && is_home() ) {
              	the_title( '

<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>

' );
        	} else {
              	the_title( '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>

' );
        	}

        	if ( 'post' === get_post_type() ) {

              	echo '

<div class="entry-meta">';
                    	if ( is_single() ) {
                    	  	twentyseventeen_posted_on();
                    	} else {
                          	echo twentyseventeen_time_link();
                          	twentyseventeen_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</header>

<!-- .entry-header -->

Para usar esta plantilla, edite la publicación deseada desde el administrador de WordPress y asigne la plantilla desde el menú desplegable.

Si revisa la publicación en la parte frontal, todavía no tiene el ancho completo, pero el título y los metadatos han cambiado de lugar, por lo que sabemos que la publicación está usando nuestra plantilla personalizada.

Tenemos que agregar algo de CSS para que sea de ancho completo. WordPress genera automáticamente una clase según el nombre de la plantilla en la sección del cuerpo.

Use esa clase para apuntar a esta plantilla en particular. Puede agregar el CSS al archivo style.css del tema secundario.

.post-template-full-width-post.has-sidebar:not(.error404) #primary{
float:none;
width:auto;
}

.post-template-full-width-post .entry-header{
text-align:center;
margin-bottom:1.3em;
}

.post-template-full-width-post .entry-meta{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:15px 0;
}

Ahora tenemos el diseño como queríamos. Cualquier publicación que use esta plantilla tendrá exactamente el mismo estilo.

Puede crear tantas plantillas personalizadas como desee para ajustarse a sus requisitos. Incluso puede crear plantillas basadas en categorías de publicaciones.

¿Puedo usar un complemento para esto?

Si no se siente cómodo con los códigos PHP, puede usar algunos complementos, pero debo admitir que hay muy pocos complementos disponibles para crear plantillas de publicaciones personalizadas y la mayoría de ellos no son muy útiles porque tiene que crear manualmente la plantilla de todos modos.

He encontrado que el complemento Post Custom Templates Lite es muy útil. Es un complemento gratuito que le permite crear plantillas de publicación sin ningún tipo de codificación en una agradable interfaz de arrastrar y soltar. Tiene muchas opciones de personalización, por lo que si desea personalizar una plantilla de publicación, en general, este complemento puede ayudarlo.

Nota: La versión gratuita solo le permite personalizar plantillas de publicaciones normales. Debe usar la versión pro para poder crear plantillas de publicaciones personalizadas y obtener algunas funciones adicionales.

Conclusión

Ya sea que trabaje manualmente o use un complemento para crear una plantilla de publicación única personalizada, permite que sus publicaciones más importantes se destaquen del resto. Para inspirarte, visita el sitio de Brian Dean; él usa una plantilla particular para sus publicaciones de guía definitivas para que se vean únicas del resto de sus publicaciones.

Entonces, pruébalo y crea tu propia plantilla única de publicación única.

Todas las fotografías de este artículo se tomaron internamente en Flywheel.

¿Aún necesitas convencer a tus clientes?

Convencer a sus clientes de que el alojamiento administrado de WordPress es adecuado para su negocio no es tarea fácil. Para ayudarlo en su misión, hemos empaquetado un par de breves que explican el valor del alojamiento administrado que puede transmitir directamente a su cliente. ¡Descárgalo aquí!

¿Qué vas a aprender a continuación? ¡Prueba uno de estos tutoriales!

• Cómo elegir las mejores unidades de CSS para crear mejores diseños de sitios
• Cómo agregar un mapa de Google receptivo en WordPress
• Cómo migrar eficientemente sus sitios de Adobe Business Catalyst a WordPress (+ ¡más de 20 recursos!)