Los tipos de publicaciones son una de las razones principales por las que los desarrolladores pueden extender WordPress de muchas maneras maravillosas. La versión principal de WordPress viene con cinco tipos de publicaciones: publicación, página, archivo adjunto, revisión y menú de navegación.
Las publicaciones y las páginas son los principales tipos de publicaciones a las que nos referimos, ya que se utilizan para almacenar el contenido de su sitio web. Hay algunas diferencias entre estos tipos de publicaciones.
Las publicaciones generalmente se muestran en orden cronológico inverso en una página de índice de blog , mientras que las páginas no tienen asignada ninguna fecha de publicación. Las categorías y etiquetas también se pueden asignar a las publicaciones, mientras que no se pueden asignar a las páginas (aunque es posible hacerlo mediante la personalización).
Las páginas se pueden colocar en una estructura jerárquica. Esto es útil para organizar el contenido para los propietarios de sitios web y para los visitantes.
El diseño de las páginas también se puede cambiar fácilmente asignándolas a diferentes plantillas de página . Esta es una forma práctica de cambiar el estilo de ciertas partes de su sitio web. También le permite mostrar información que normalmente no mostraría en una página.
Echemos un vistazo más de cerca a qué son las plantillas de página y cómo puede usarlas en su sitio web.
Los temas de WordPress suelen tener una plantilla titulada page.php que controla el estilo de sus páginas. La mayoría de los desarrolladores de temas estructuran la plantilla de página predeterminada de la misma manera. La plantilla muestra el contenido de su página y define qué elementos de diseño rodean ese contenido (es decir, encabezado, barra lateral, pie de página, etc.).
La plantilla de página predeterminada (page.php) se configura de esta manera, ya que eso es todo lo que se necesita para que el contenido se muestre en una página.
La creación de una plantilla de página única le permite ampliar WordPress y cambiar lo que se muestra. Por ejemplo, puede cambiar el diseño de su página eliminando la barra lateral de las páginas. También puede cambiar la fuente que se utiliza y mostrar un encabezado diferente al de su página de inicio.
La plantilla de página personalizada más conocida es la plantilla de archivos; que se incluye con la mayoría de los temas de WordPress. Los archivos enumeran todo el contenido de su sitio web. El contenido normalmente se clasifica por páginas, categorías, etiquetas, archivos de fecha y archivos de autor.
Muchas plantillas de archivo también muestran una lista completa de las publicaciones de su blog y una barra de búsqueda para buscar en todo su sitio web. Esencialmente, la plantilla de archivo es un mapa del sitio para ayudar a los lectores a encontrar lo que buscan.
La página de archivo de Darren Rowse ayuda a los lectores de ProBlogger a encontrar artículos rápidamente.
También es común encontrar otros tipos de plantillas de página en temas, como:
- Formulario de contacto
- Página sin barra lateral (ancho completo)
- Página de destino
- Índice de blogs
Las posibilidades con las plantillas de página son infinitas. Puede usar plantillas de página para mostrar una página de personal única para su empresa o algo más complejo, como un directorio de enlaces. Solo depende de cuánto quieras personalizar tu sitio web.
Cómo seleccionar una plantilla de página para su página
Asignar una plantilla de página para su página es simple. Cuando esté en el editor de páginas, verá un cuadro llamado Atributos de página que se muestra en la barra lateral derecha. Se muestra debajo del cuadro Publicar .
El cuadro de atributos de página le permite elegir una página principal para la página y asignar su orden en la jerarquía de páginas. La opción del medio le permite cambiar la plantilla. Todo lo que tiene que hacer es seleccionar la plantilla que desea que use su página y luego actualizar la página.
Elija su plantilla de página en el cuadro Atributos de página.
También puede cambiar la plantilla de una página a través de la página de lista de la página principal. Todo lo que tiene que hacer es hacer clic en el enlace Edición rápida .
El enlace de edición rápida
Luego, simplemente cambie la plantilla que desea que use la página a través de la opción de plantilla en el lado derecho del menú.
Las plantillas también se pueden asignar mediante el menú de edición rápida.
La opción de plantilla no se mostrará si su tema solo tiene la plantilla de página predeterminada.
Creación de una plantilla de página básica para su sitio web
Crear una nueva plantilla de página para su tema de WordPress es más fácil de lo que piensa. No es necesario tener experiencia en el desarrollo de temas o complementos.
Todo lo que tiene que hacer es usar el código de la plantilla page.php de su tema existente como base para su nueva plantilla de página. Por ejemplo, supongamos que está utilizando el tema de WordPress predeterminado más antiguo, Twenty Twelve , en su sitio web (que sigue siendo mi tema de WordPress predeterminado favorito).
El tema page.php tiene el siguiente código:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?php/** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --><?php get_sidebar(); ?><?php get_footer(); ?> |
Podemos usar este código para crear una nueva plantilla de página. Para crear una plantilla de página, todo lo que debemos hacer es asegurarnos de que se coloque un comentario en la parte superior de un archivo nuevo. Esto define el archivo como una plantilla de página.
|
01
02
03
|
/*Template Name: My Custom Page Template*/ |
Por lo tanto, las plantillas de su página se verán así:
|
01
02
03
04
05
06
|
<?php/*Template Name: My Custom Page Template*/Page Template Code Goes Here |
Veamos el proceso de creación de una plantilla de página básica. Para ser más específicos, creemos una plantilla de página de ancho completo sin barra lateral; una plantilla que la mayoría de los propietarios de sitios web encontrarán útil. Twenty Twelve incluye una plantilla de página de ancho completo, pero para el propósito de este tutorial, asumiremos que no la incluye
La plantilla de página estándar muestra una barra lateral en el lado derecho de la página.
La plantilla de página predeterminada de Twenty Twelve.
Crear una nueva plantilla de página personalizada sin barra lateral es simple. Lo primero que debe hacer es crear un nuevo archivo utilizando un editor como TextPad (Windows) o TextWrangler (MAC). Podemos llamarlo algo simple, como nosidebar-page.php o full-page.php (más información sobre el nombre de su archivo más adelante). A continuación, cargue el archivo en la carpeta de su tema. Para Twenty Twelve, la ubicación de su archivo sería www.sudominio.com/wp-content/themes/twentytwelve.
Nuestra plantilla es esencialmente solo la plantilla Twenty Twelve page.php con el código para la barra lateral <?php get_sidebar(); ?> eliminado.
Se parece a esto:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
<?php/*Template Name: Full Width Page with No Sidebar*/get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --><?php get_footer(); ?> |
Una vez que el archivo de plantilla se haya cargado en su carpeta de temas, estará disponible para su selección en todas las páginas. A continuación, puede asignar una página a esta plantilla para eliminar su barra lateral.
Se puede hacer referencia a la plantilla por el nombre definido en la parte superior de la plantilla.
Aún no hemos terminado. Todavía tenemos que hacer que el contenido abarque todo el ancho de la página. Hasta ahora, todo lo que hemos hecho es eliminar la barra lateral. El área de contenido principal aún ocupa dos tercios de la página.
Se eliminó nuestra barra lateral, pero el contenido no se muestra en todo el ancho de la página.
Este es un tema fácil de abordar. Si vuelve a mirar el código de nuestra plantilla, verá que el área de contenido principal tiene la siguiente división de CSS alrededor.
|
01
|
<div id="primary" class="site-content"> |
El CSS ID primario nos permite enlazar directamente con el área de contenido principal. Funciona de la misma manera que el atributo ID en HTML. La parte que le da estilo al área de contenido principal es class=”site-content” .
Si revisamos la hoja de estilo (stylesheet.css) de Twenty Twelve, podemos ver el contenido del sitio de clase ubicado cerca de la parte inferior del archivo.
|
01
02
03
04
|
.site-content { float: left; width: 65.104166667%; } |
Para expandir nuestro contenido en todo el ancho de la página, lo que tenemos que hacer es cambiar el ancho del área de contenido del 65% al 100%. Sin embargo, no debemos modificar el contenido del sitio de la clase ya que esa clase todavía se usa en otras plantillas, como la plantilla de página predeterminada page.php y la plantilla de publicaciones single.php. Cambiar el porcentaje de contenido del sitio daría como resultado que todas nuestras publicaciones y páginas abarquen todo el ancho de la página.
Lo que debemos hacer es crear una nueva clase CSS que se use específicamente para nuestras páginas de ancho completo:
|
01
02
03
04
|
.site-content-fullwidth { float: left; width: 100%; } |
Una vez que la plantilla stylesheet.css del tema se haya actualizado con la clase anterior, debemos modificar nuestra plantilla de página de ancho completo para asegurarnos de vincularnos a la clase CSS que tiene un ancho del 100 %:
|
01
|
<div id="primary" class="site-content-fullwidth"> |
Por lo tanto, nuestra plantilla final se vería así:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
<?php/*Template Name: Full Width Page with No Sidebar*/get_header(); ?> <div id="primary" class="site-content-fullwidth"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --><?php get_footer(); ?> |
Esta plantilla actualizada garantiza que nuestro contenido se muestre en toda la página.
Nuestro contenido ahora se extiende por todo el ancho de relleno de la página.
Los pasos anteriores se pueden reproducir con cualquier tema de WordPress, como nuestro popular tema Divi . Simplemente elimine la barra lateral de su plantilla de página predeterminada y asegúrese de diseñar el área de contenido principal usando una clase que expanda todo el ancho de la página.
Una nota rápida sobre cómo nombrar las plantillas de su página
La jerarquía de plantillas de WordPress establece que WordPress mostrará una plantilla para una página en el siguiente orden:
- Plantilla personalizada
- página-{slug}.php
- página-{id}.php
- página.php
- índice.php
Es bueno comprender la jerarquía de esta plantilla , ya que lo ayudará a comprender por qué una página tiene un estilo particular.
La jerarquía significa que WordPress siempre mostrará una plantilla de página para una página si se ha asignado. Si no se ha asignado ninguna plantilla de página a una página, buscará page-{slug}.php. Por ejemplo, si su página acerca de usó el permalink staff , buscaría una plantilla llamada page-staff.php.
Si no se encuentra ninguna plantilla page-{slug}.php, WordPress busca una plantilla con el ID de página . Por ejemplo, si la ID de su página fuera 15, WordPress buscaría una plantilla de página llamada page-15.php.
Si no se asignan plantillas de página a una página y ninguna plantilla coincide con el slug de la página o el ID de la página, entonces WordPress usará la plantilla de página predeterminada page.php. Y si no existe una plantilla page.php, usará index.php.
Muchos desarrolladores de temas nombran sus plantillas de página usando el formato page-name.php. Por ejemplo, nombrarían su plantilla de página de formulario de contacto como page-contact.php. No hay nada malo con esta política; sin embargo, como puede ver en la jerarquía de WordPress para las plantillas de página anteriores, existe una pequeña posibilidad de que esto provoque que se muestre la plantilla incorrecta.
Por ejemplo, considere un sitio web que tiene una plantilla de página llamada page-green.php para mostrar páginas con un estilo verde. Si una página tuviera el post slug verde, también usaría la plantilla page-green.php, incluso si no la hubieras asignado a la página.
Afortunadamente, este tipo de problema es muy raro. Lo suficientemente raro como para que no tengas que preocuparte por eso. Así que siéntase libre de usar la configuración de nombres que desee, ya sea page-name.php, name-page.php o name.php. No debería importar lo que use, siempre y cuando evite los nombres clave de las plantillas de WordPress; y siempre puede cambiar el slug de su página o el nombre de la plantilla más tarde si ve un conflicto.
Descripción general
Las plantillas de página son una excelente manera de personalizar el estilo y el contenido de las páginas de su sitio web. La mayoría de los temas de WordPress contienen al menos algunas plantillas de página únicas; sin embargo, como hemos visto, no es demasiado difícil crear plantillas de página básicas usted mismo.
La mejor manera de aprender a crear sus propias plantillas de página es crear una plantilla de página personalizada utilizando la plantilla page.php de su tema. Luego mire el código que se usa en ese tema y en otros temas de WordPress. Esto te ayudará a darte ideas de cómo puedes modificar tu plantilla a tu gusto. Asegúrese de realizar cualquier personalización en un sitio web de prueba inicialmente para que su sitio web en vivo no se vea afectado si comete un error con su código. Luego puede copiar el código y las plantillas en su sitio web en vivo.
Si este artículo te resultó útil, te animo a que te suscribas al blog de Elegant Themes para asegurarte de estar actualizado sobre nuestros futuros artículos.
Asegúrese de dejar un comentario a continuación si no está seguro acerca de alguna parte de este tutorial.
Imagen en miniatura del artículo de Everyday smiles / shutterstock.com