Acerca del autor

Nick Schäferhoff es un empresario, comercializador en línea y bloguero profesional de Alemania. Cuando no está construyendo sitios web, creando contenido o ayudando a sus clientes… Más acerca de Nick↬

Me gusta pensar en WordPress como la droga de entrada al desarrollo web. Muchas personas que comienzan a usar la plataforma inicialmente solo buscan una forma cómoda (y gratuita) de crear un sitio web simple, a menudo con la ayuda de una página de WordPress plugin constructor. Algo así como «Voy a probarlo una vez».

Sin embargo, una buena parte de los usuarios no se detiene ahí. En cambio, se enganchan. Piensa en más ideas. Experimentar. Pruebe nuevos complementos. Descubre Firebug. Auge. Pronto no habrá vuelta atrás. ¿Suena eso como tu historia? Como usuario de WordPress, es natural querer cada vez más control sobre su sitio web. Para anhelar el diseño personalizado, la funcionalidad personalizada, personalizar todo.

Lectura adicional sobre SmashingMag:

• Cómo crear y personalizar un tema hijo de WordPress
• Construir Una página de archivo personalizada para WordPress
• Personalización de archivos de WordPress

Afortunadamente, WordPress está diseñado exactamente para eso. Su estructura flexible y arquitectura compartimentada permite que cualquiera pueda cambiar prácticamente cualquier cosa en su sitio.

Entre las herramientas más importantes en la búsqueda del control completo del sitio web se encuentran las plantillas de página. Permiten a los usuarios modificar drásticamente el diseño y la funcionalidad de su sitio web. ¿Quieres un encabezado personalizado para tu página principal? Hecho. ¿Una barra lateral adicional solo para la página de tu blog? No hay problema. ¿Una página de error 404 única? Ser. Mi. Invitado.

Si quieres saber cómo las plantillas de página de WordPress pueden ayudarte a conseguirlo, sigue leyendo. Pero primero, un poco de información básica.

Archivos de plantilla en WordPress

¿De qué estamos hablando cuando hablamos de plantillas en el contexto de WordPress? La versión corta es que las plantillas son archivos que le dicen a WordPress cómo mostrar diferentes tipos de contenido.

La versión un poco más larga: cada vez que alguien envía una solicitud para ver parte de su sitio web, la plataforma de WordPress se dará cuenta qué contenido quieren ver y cómo se debe representar esa parte específica de su sitio web.

Para lo último, WordPress intentará utilizar el archivo de plantilla más apropiado que se encuentre dentro de su tema. Cuál se decide sobre la base de un orden establecido, la jerarquía de plantillas de WordPress. Puede ver cómo se ve en la captura de pantalla a continuación o en esta versión interactiva.

La jerarquía de plantillas es una lista de archivos de plantillas con los que WordPress está familiarizado y que están clasificados para determinar cuáles El archivo tiene prioridad sobre otro.

Puede considerarlo como un árbol de decisiones. Cuando WordPress intenta decidir cómo mostrar una página determinada, desciende por la jerarquía de plantillas hasta que encuentra el primer archivo de plantilla que se ajusta a la página solicitada. Por ejemplo, si alguien intenta acceder a la dirección http://yoursite.com/category/news, WordPress buscará el archivo de plantilla correcto en este orden:

En la parte inferior de la jerarquía está index .php. Se utilizará para mostrar cualquier contenido que no tenga un archivo de plantilla más específico adjunto a su nombre. Si un archivo de plantilla ocupa un lugar más alto en la jerarquía, WordPress usará automáticamente ese archivo para mostrar el contenido en cuestión.

Plantillas de página y su uso

Para las páginas, la plantilla estándar usualmente es el apropiadamente llamado page.php. A menos que haya un archivo de plantilla más específico disponible (como archive.php para una página de archivo), WordPress usará page.php para representar el contenido de todas las páginas de su sitio web.

Sin embargo, en muchos casos puede ser necesario cambiar el diseño, la apariencia o la funcionalidad de partes individuales de su sitio web. Aquí es donde entran en juego las plantillas de página.Las plantillas de página personalizadas le permiten individualizar cualquier parte de su sitio de WordPress sin afectar el resto.

Es posible que ya lo haya visto en funcionamiento. Por ejemplo, muchos temas de WordPress en la actualidad vienen con una opción para cambiar su página a ancho completo, agregar una segunda barra lateral o cambiar la ubicación de la barra lateral. Si ese es el caso del suyo, probablemente se hizo a través de archivos de plantilla. Hay varias formas de lograr esto y las repasaremos más adelante.

Primero, sin embargo, una advertencia: dado que trabajar con plantillas implica editar y cambiar archivos en su tema activo, siempre es bueno idea de ir con un tema hijo al realizar este tipo de personalizaciones. De esa manera, no corre el peligro de que sus cambios se sobrescriban cuando se actualice su tema principal.

Cómo personalizar cualquier página en WordPress

Hay tres formas básicas de usar la función personalizada plantillas de página en WordPress: agregar declaraciones condicionales a una plantilla existente; crear plantillas de página específicas que se clasifiquen más alto en la jerarquía; y asignar plantillas directamente a páginas específicas. Echaremos un vistazo a cada uno de estos a su vez.

Uso de etiquetas condicionales en plantillas predeterminadas

Una manera fácil de realizar cambios específicos de una página es agregar muchas etiquetas condicionales de WordPress a una plantilla ya en uso. Como sugiere su nombre, estas etiquetas se utilizan para crear funciones que solo se ejecutan si se cumple una determinada condición. En el contexto de las plantillas de página, esto sería algo así como «Realizar solo la acción X en la página Y».

Normalmente, agregaría etiquetas condicionales al archivo page.php de su tema (a menos que, de Por supuesto, desea personalizar una parte diferente de su sitio web). Le permiten realizar cambios limitados a la página de inicio, la página principal, la página del blog o cualquier otra página de su sitio.

A continuación, se muestran algunos Etiquetas condicionales:

Por ejemplo, cuando se agrega a su page.php en lugar de la etiqueta get_header(); estándar, el siguiente código cargará un archivo de encabezado personalizado llamado encabezado -shop.php cuando se muestra la página http://yoursite.com/products.

Un buen caso de uso para esto sería si tiene una tienda en su sitio y necesita mostrar una imagen de encabezado diferente o un menú personalizado en la página de la tienda. Luego, puede agregar esta personalización en header-shop.php y aparecerá en el lugar apropiado.

Sin embargo, las etiquetas condicionales no son li mited a una página. Puede hacer varias declaraciones seguidas de esta manera:

En este segundo ejemplo, dos condiciones cambiarán el comportamiento de diferentes páginas en su sitio. Además de cargar el archivo de encabezado específico de la tienda antes mencionado, ahora también cargaría un header-about.php en una página con el ID 42. Para todas las demás páginas se aplica el archivo de encabezado estándar.

Para obtener más información sobre el uso de etiquetas condicionales, se recomiendan los siguientes recursos:

• Códice de WordPress: etiquetas condicionales
• ThemeLab: la guía definitiva para etiquetas condicionales de WordPress

Creación de archivos específicos de página en la jerarquía de WordPress

Las etiquetas condicionales son una excelente manera de introducir cambios más pequeños en las plantillas de su página. Por supuesto, también puede crear personalizaciones más grandes utilizando muchas declaraciones condicionales una tras otra. Sin embargo, encuentro que esta es una solución muy engorrosa y optaría por archivos de plantilla designados.

Una forma de hacerlo es explotar la jerarquía de plantillas de WordPress. Como hemos visto, la jerarquía recorrerá una lista de posibles archivos de plantilla y elegirá el primero que encuentre que se ajuste. Para las páginas, la jerarquía se ve así:

• Plantilla de página personalizada
• página- {slug} .php
• página- {id} .php
• page.php
• index.php

En primer lugar, están las plantillas de página personalizadas que se han asignado directamente a una página en particular. Si existe uno de esos, WordPress lo usará sin importar qué otros archivos de plantilla estén presentes. Hablaremos más sobre las plantillas de página personalizadas en un momento.

Después de eso, WordPress buscará una plantilla de página que incluya el slug de la página en cuestión. Por ejemplo, si incluye un archivo llamado page-about.php en los archivos de su tema, WordPress usará este archivo para mostrar su página ‘Acerca de’ o cualquier página que se encuentre en http://www.yoursite.com/about .

Alternativamente, puede lograr lo mismo orientando el ID de su página. Entonces, si esa misma página tiene un ID de 5, WordPress usará el archivo de plantilla page-5.php antes de page.php si existe; es decir, solo si no hay una plantilla de página de clasificación más alta disponible.

(Por cierto, puede encontrar el ID de cada página colocando el cursor sobre su título debajo de ‘Todas las páginas’ en su parte posterior de WordPress -end. El ID aparecerá en el enlace que muestra su navegador.)

Asignación de plantillas de página personalizadas

Además de proporcionar plantillas en un formulario que WordPress usará automáticamente, también posible asignar manualmente plantillas personalizadas a páginas específicas.Como puede ver en la jerarquía de plantillas, estos prevalecerán sobre cualquier otro archivo de plantilla presente en la carpeta del tema.

Al igual que crear plantillas específicas de página para la jerarquía de WordPress, esto requiere que proporcione un archivo de plantilla y luego vincúlelo a la página para la que desee usarlo. Esto último se puede hacer de dos formas diferentes con las que quizás ya esté familiarizado. En caso de que no lo esté, aquí se explica cómo hacerlo.

1. Asignar plantillas de página personalizadas desde el editor de WordPress

En el editor de WordPress, encontrará un campo de opción llamado ‘Atributos de página’ con un menú desplegable debajo de ‘Plantilla’.

Al hacer clic en él, obtendrá una lista de plantillas de página disponibles en su sitio web de WordPress. Elija el que desee, guarde o actualice su página y listo.

2. Configuración de una plantilla personalizada mediante la edición rápida

Lo mismo también se puede lograr sin ingresar al editor de WordPress. Vaya a «Todas las páginas» y coloque el cursor sobre cualquier elemento de la lista. Aparecerá un menú que incluye el elemento «Edición rápida».

Haga clic en él para editar la configuración de la página directamente desde la lista. Verá el mismo menú desplegable para elegir una plantilla de página diferente. Elija uno, actualice la página y listo.

No es tan difícil después de todo, ¿verdad? Pero, ¿qué sucede si aún no tiene una plantilla de página personalizada? ¿Cómo lo crea para que su sitio web se vea exactamente como lo desea? No se preocupe, de eso se trata la siguiente parte.

Una guía paso a paso para crear plantillas de página personalizadas

La creación de archivos de plantilla personalizados para sus páginas no es así de difícil, pero aquí hay algunos detalles a los que debe prestar atención. Por lo tanto, repasemos el proceso poco a poco.

1. Encuentre la plantilla predeterminada

Una buena forma es comenzar copiando la plantilla que está utilizando actualmente la página que desea modificar. Es más fácil modificar el código existente que escribir una página completa desde cero. En la mayoría de los casos, será el archivo page.php.

(Si no sabe cómo averiguar qué archivo de plantilla se está utilizando en la página que desea editar, el complemento What The File resultar útil.)

Utilizaré el tema Twenty Twelve para la demostración. Así es como se ve su plantilla de página estándar:

Como puede ver, aquí no hay nada demasiado sofisticado: las llamadas habituales para el encabezado y pie de página, y el bucle en el medio. La página en cuestión se ve así:

2. Copiar y cambiar el nombre del archivo de plantilla

Después de identificar el archivo de plantilla predeterminado, es el momento de hacer una copia. Usaremos el archivo duplicado para realizar los cambios deseados en nuestra página. Para eso también tendremos que renombrarlo. No se pueden tener dos archivos con el mismo nombre, eso es confuso para todos.

Eres libre de darle al archivo el nombre que quieras siempre que no comience con ninguno de los nombres de archivo de tema reservados. . Así que no lo nombre page-something.php o cualquier otra cosa que haga pensar a WordPress que es un archivo de plantilla dedicado.

Tiene sentido usar un nombre que identifique fácilmente para qué se usa este archivo de plantilla. para, como my-custom-template.php. En mi caso, iré con custom-full-width.php.

3. Personalizar el encabezado del archivo de plantilla

A continuación, tenemos que decirle a WordPress que este nuevo archivo es una plantilla de página personalizada. Para eso, tendremos que ajustar el encabezado del archivo de la siguiente manera:

El nombre debajo de ‘Nombre de plantilla’ es lo que se mostrará debajo de ‘Página Atributos ‘en el editor de WordPress. Asegúrese de ajustarlo al nombre de su plantilla.

4. Personaliza el código

Ahora es el momento de llegar al meollo de la plantilla de la página: el código. En mi ejemplo, simplemente quiero eliminar la barra lateral de mi página de demostración.

Esto es relativamente fácil, ya que todo lo que tengo que hacer es eliminar <?php get_sidebar(); ?> de mi plantilla de página ya que eso es lo que se llama la barra lateral. Como consecuencia, mi plantilla personalizada termina luciendo así:

5. Subir la plantilla de página

Después de guardar mi archivo personalizado, es el momento de subirlo a mi sitio web. Las plantillas de página personalizadas se pueden guardar en varios lugares para que WordPress las reconozca:

• La carpeta de su tema activo (secundario)
• La carpeta de su tema principal principal
• Una subcarpeta dentro de cualquiera de estos

Personalmente, me gusta crear una carpeta llamada page_templates en mi tema hijo y colocar las plantillas personalizadas allí.Me resulta más fácil retener una descripción general de mis archivos y personalizaciones.

6. Activar la plantilla

Como último paso, debe activar la plantilla de la página. Como se mencionó anteriormente, esto se hace en Atributos de página → Plantillas en el editor de WordPress. Guarda, mira la página y ¡voilà! Aquí está mi página personalizada sin barra lateral:

No es tan difícil, ¿verdad? No se preocupe, lo dominará rápidamente. Para darle una mejor impresión de para qué usar estas plantillas de página, demostraré casos de uso adicionales (incluido el código) para el resto del artículo.

Cinco formas diferentes de usar las plantillas de página

Como ya se mencionó, las plantillas de página se pueden emplear para muchos propósitos diferentes. Puedes personalizar prácticamente cualquier cosa en cualquier página con su ayuda. Solo su imaginación (y habilidades de codificación) se interponen en su camino.

1. Plantilla de página de ancho completo

El primer caso que veremos es una versión avanzada de la plantilla de demostración que creamos anteriormente. Allí arriba, ya eliminamos la barra lateral eliminando <?php get_sidebar(); ?> del código. Sin embargo, como ha visto en la captura de pantalla, esto en realidad no da como resultado un diseño de ancho completo, ya que la sección de contenido permanece a la izquierda.

Para abordar esto, debemos ocuparnos del CSS, en particular esta parte:

El atributo width limita el elemento que contiene nuestro contenido al 65.1042% del espacio disponible . Queremos aumentar esto.

Sin embargo, si lo cambiamos al 100%, esto afectará a todas las demás páginas de nuestro sitio, lo cual está lejos de ser lo que queremos. Por lo tanto, el primer orden aquí es cambiar la clase principal de div en nuestra plantilla personalizada por otra, como class="site-content-fullwidth”. El resultado:

Ahora podemos ajustar el CSS para nuestra nueva clase personalizada:

Como resultado, el contenido ahora extiende todo el camino a través de la pantalla.

2. Página de error 404 dinámica con áreas de widgets

La página de error 404 es donde aterriza toda persona que intenta acceder a una página de su sitio web que no existe, ya sea a través de un error tipográfico, un enlace defectuoso o porque el El enlace permanente de la página ha cambiado.

A pesar del hecho de que obtener un 404 no es del agrado de todos en Internet, si está ejecutando un sitio web, la página de error 404 no tiene poca importancia. Su contenido puede ser el factor decisivo para que alguien abandone inmediatamente su sitio o se quede y revise su otro contenido.

Codificar una página de error personalizada desde cero es engorroso, especialmente si no confía en sus habilidades. . Una mejor manera es crear áreas de widgets en su plantilla para que pueda cambiar de manera flexible lo que se muestra allí al arrastrar y soltar.

Para esto, tomaremos y editaremos el archivo 404.php que se envía con Twenty Twelve ( jerarquía de plantillas, ¿recuerdas?). Sin embargo, antes de cambiar algo allí, primero crearemos un nuevo widget insertando el siguiente código en nuestro archivo functions.php:

Esto debería mostrar el widget recién creado en su back-end de WordPress. Para asegurarse de que realmente aparezca en el sitio, debe agregar la siguiente línea de código a su página 404 en el lugar apropiado:

Después Subiendo la plantilla a mi sitio, es hora de completar mi nueva área de widgets:

Si ahora miro la página de error 404, mis widgets recién creados aparecen allí:

3. Plantilla de página para mostrar tipos de publicaciones personalizadas

Los tipos de publicaciones personalizadas son una excelente manera de presentar contenido que tiene su propio conjunto de puntos de datos, diseño y otras personalizaciones. Un caso de uso favorito para estos tipos de publicaciones son los elementos de reseña, como libros y películas. En nuestro caso, queremos crear una plantilla de página que muestre los elementos de la cartera.

Primero debemos crear nuestro tipo de publicación personalizada (CPT). Esto se puede hacer manualmente o mediante un complemento. Una opción de complemento que puedo recomendar de todo corazón es Tipos. Te permite crear fácilmente tipos de publicaciones y campos personalizados.

Instalar y activar Tipos, agregar una publicación personalizada, asegurarse de que su slug sea ‘cartera’, personalizar cualquier campo que necesite (como agregar una imagen destacada ), ajuste cualquier otra opción y guarde.

Ahora que tenemos el tipo de publicación de nuestro portafolio, queremos que aparezca en nuestro sitio. Lo primero que haremos es crear la página en cuestión.Tenga en cuenta que si elige «cartera» como slug de su CPT, la página no puede tener el mismo slug. Fui con mi clients-portfolio y también agregué un texto de ejemplo.

Después de agregar algunos elementos en la sección de tipo de publicación ‘portafolio’, queremos que aparezcan en nuestra página justo debajo de contenido de la página.

Para lograr esto, usaremos nuevamente un derivado del archivo page.php. Cópialo, llámalo portfolio-template.php y cambia el encabezado a este:

Sin embargo, en este caso tendremos que hacer algunos cambios en la plantilla original. Cuando eche un vistazo al código de page.php, verá que llama a otro archivo de plantilla en el medio, llamado content-page.php (donde dice <?php get_template_part( ‘content’, ‘page’ ); ?>). En ese archivo encontramos el siguiente código:

Como puede ver, es aquí donde se llama al título y al contenido de la página. Dado que definitivamente los queremos en nuestro sitio de cartera, tendremos que copiar las partes necesarias de esta plantilla en nuestro archivo page.php. El resultado se ve así:

Para obtener los elementos de la cartera en nuestra página, agregaremos el siguiente código justo debajo de la llamada the_content().

Esto hará que el CPT aparezca en la página:

Estoy seguro de que todos estamos de acuerdo en que se ve menos que estelar, por lo que algunos estilos están en orden.

Mucho mejor, ¿no crees?

Y aquí está el código completo para la plantilla de la página del portafolio:

4. Página de colaborador con imágenes de avatar

El siguiente paso en los casos de uso de nuestra plantilla de página es una página de colaborador. Queremos crear una lista de autores en nuestro sitio web, incluidas sus imágenes y la cantidad de publicaciones que han publicado con su nombre. El resultado final se verá así:

Comenzaremos nuevamente con nuestro archivo híbrido de antes y agregaremos el código para la lista de contribuyentes. Pero, ¿y si no sabes cómo crear algo así? No te preocupes, puedes arreglártelas con el robo inteligente.

Verás, el tema predeterminado Twenty Fourteen viene con una página de colaborador por defecto. Puede encontrar su plantilla en la carpeta page-templates con el nombre contributors.php.

Sin embargo, cuando busque en el archivo, solo encontrará la siguiente llamada allí: twentyfourteen_list_authors();. Afortunadamente, como un ávido usuario de WordPress, ahora concluye que esto probablemente se refiere a una función en el archivo function.php de Twenty Fourteen y estaría en lo cierto.

Por lo que encontramos allí, la parte que nos interesa es esto:

Lo agregaremos nuevamente debajo de la llamada para the_content() con el siguiente resultado:

Ahora un poco de estilo:

Y eso debería ser todo. ¡Gracias Twenty Fourteen!

5. Página de archivo personalizada

Twenty Twelve viene con su propia plantilla para páginas de archivo. Entrará en acción, por ejemplo, cuando intente ver todas las publicaciones anteriores de una determinada categoría.

Sin embargo, quiero algo un poco más parecido a lo que ha hecho Problogger: una página que permita a las personas descubrir más contenido en mi sitio de varias formas diferentes. Eso, nuevamente, se hace con una plantilla de página.

Siguiendo con nuestra plantilla mixta de antes, agregaremos lo siguiente debajo de la llamada the_content():

Además, un poco de estilo para la barra de búsqueda:

Y el resultado debería verse un poco así:

Para completar, aquí está el archivo completo:

No olvide asignarlo a un página!

Plantillas de página de WordPress en pocas palabras

En su camino hacia el dominio de WordPress, aprender a usar las plantillas de página es un paso importante. Pueden hacer que la personalización de su sitio web sea muy, muy fácil y le permiten asignar una funcionalidad y un diseño únicos a tantas o pocas páginas como desee. Desde agregar áreas de widgets hasta mostrar tipos de publicaciones personalizadas y mostrar una lista de los contribuyentes de su sitio web, las posibilidades son prácticamente infinitas.

Ya sea que use etiquetas condicionales, explote la jerarquía de plantillas de WordPress o cree archivos de plantilla específicos de la página, depende completamente de usted y de lo que está tratando de lograr. Empiece poco a poco y vaya avanzando hacia cosas más complicadas. No pasará mucho tiempo antes de que cada parte de su sitio web de WordPress responda a todas sus llamadas.