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]
<?php
/* Nombre de plantilla: Publicación de ancho completo * Tipo de publicación de plantilla: publicación*/ /*La plantilla para mostrar publicaciones individuales de ancho completo. */
obtener_encabezado();
?>
[/php]

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í.

 [php]

<div class="wrap">

<div id="principal" class="área de contenido">
        	<id principal="principal" class="sitio-principal" rol="principal">
              	<?php /* Iniciar el ciclo */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // Si los comentarios están abiertos o tenemos al menos un comentario, cargue la plantilla de comentarios. if (comentarios_abiertos() || obtener_comentarios_numero() ) : comentarios_plantilla(); terminara si; 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="texto-lector-de-pantalla">' . __('Próxima publicación', 'veintisiete') . '</span><span aria-hidden="true" class="navegación-subtítulo">' . __( 'Siguiente', 'veintisiete' ) . '</span> <span class="título-de-navegación">%title<span class="envoltorio-de-icono-de-título-de-navegación">' . twentyseventeen_get_svg( array( 'icono' => 'flecha derecha' ) ) . '</span></span>',
                    	) );
              	mientras tanto; // Fin del bucle.
              	?>
[/php]

Como puede ver, se refiere a una ruta:

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

Entonces, el archivo content.php se llama dentro 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. 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.

 [php]

<header class="encabezado-de-entrada">
        	<?php

        	si (es_soltero()) {
              	el título( '

<h1 class="título-de-entrada">', '</h1>

');
        	} elseif ( is_front_page() && is_home() ) {
              	el título( '

<h3 class="título-de-entrada"><a href="' . esc_url( get_permalink() ) . '" rel="marcador">', '</a></h3>

');
        	} demás {
              	el título( '

<h2 class="título-de-entrada"><a href="' . esc_url( get_permalink() ) . '" rel="marcador">', '</a></h2>

');
        	}

        	if ( 'publicar' === get_post_type() ) {

              	eco '

<div class="entrada-meta">';
                    	si (es_soltero()) {
                    	  	veintisiete_publicado_en();
                    	} demás {
                          	echo veintisiete_tiempo_enlace();
                          	veintisiete_editar_enlace();
                    	};
              	echo '</div>

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

<!-- .entry-header -->
[/php]

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.

 [css]
.post-template-full-width-post.has-sidebar:not(.error404) #primary{
flotante: ninguno;
ancho: automático;
}

.post-template-full-width-post .entry-header{
alineación de texto: centro;
margen inferior: 1,3 em;
}

.post-template-full-width-post .entry-meta{
borde superior: 1px sólido #ccc;
borde inferior: 1px sólido #ccc;
relleno: 15px 0;
}
[/css]

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 personalizada de publicación única, 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! Para obtener los mejores resultados para cada sitio que cree, elija la plataforma de alojamiento administrado de WP Engine como su única fuente de alojamiento de WordPress.