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

Incluso una pequeña porción del poder y control te hace sentir en la cima del mundo. Lo mismo ocurre cuando creas sitios web. Empiezas a construir tu primer sitio web de WordPress y usas una plantilla sencilla gratuita. A continuación, te compras un tema premium profesional. Y este tema todavía no cumple con todos tus requisitos, por lo que comienzas a pensar en una personalización aún más profunda...

1. ¿Qué es una plantilla de página de WordPress?
2. Importancia de la jerarquía de plantilla
3. ¿Cómo crear una plantilla de página personalizada?
4. Plantillas de página personalizada de WordPress para diferentes propósitos
5. ¿Por qué son geniales etiquetas condicionales?
6. Funciones de plantillas de páginas
7. Páginas útiles que todo sitio de WordPress debe tener

Es que esa sensación del control completo sobre tu creación es demasiado dulce para abandonarla, por lo que harás más y más personalizaciones. No dejarás de pulir tu sitio web hasta la perfección.

Es realmente genial rediseñar tu sitio web con tus propias manos y es por eso que muchos de los principiantes van más allá y aprenden cómo hacer que una página sea realmente única. Si estás leyendo esta entrada, eres uno de ellos.

Pues, hoy vamos a aprender cómo crear una plantilla de página personalizada en WordPress.

¿Qué es una plantilla de página de WordPress?

Al principio existía la Palabra, por lo que primero vamos a definir el termíno. La apariencia de tu sitio web de WordPress se determina por plantillas. Los colores de sus botones, la colocación de barra lateral, los tipos de letra y la posición del formulario de búsqueda - todo se establece por una plantilla.

En dos palabras, una plantilla de página web es un archivo .php que describe cómo se ve tu página. Todos los archivos .php de toda plantilla de WordPress se almacenan en la carpeta "themes" del directorio "wp-content". Puedes aplicar plantillas de páginas a páginas específicas, secciones de página o una clase de páginas. Algunas de las páginas siempre se difieren de otras, por ejemplo, una página "sobre nosotros". Por lo general, casi todo tema WP ya tiene un conjunto de páginas prediseñadas que se aplican automáticamente.

Pero cómo WordPress "entiende" cuál plantilla .php usar en cada situación? Ahí es cuando la jerarquía de plantilla llega a la escena.

Importancia de la jerarquía de plantilla

Cuando un usuario navega por una de las páginas de tu sitio web, WordPress busca un archivo .php que le explica qué debería mostrar. El CMS siempre busca un archivo necesario en el orden estable específico. Este orden se llama jerarquía de plantilla. Déjanos mostrarte cómo funciona.

Por ejemplo, un visitante quiere leer una de tus entradas de blog y hace clic en el enlace http://tublog.com/blog/category-best/entrada. Lo primero que comprobará WordPress es si asignaste una plantilla de página personalizada específica a esta página en particular. Eres completamente libre de crear cualquier número de plantillas de página personalizada de WordPress y hacer que cada parte de tu sitio web sea única.

Si no hay ningún archivo asignado, WP buscará una plantilla de página de categoría. Se ve así: category-best.php. Esta plantilla de página determina la apariencia de toda la categoría de páginas y te permite establecer una apariencia específica para un grupo de entradas de la misma temática.

Si no te importa establecer una apariencia diferente para cada categoría y no hay archivo category1.php, WordPress comprobará el número ID de esa categoría. Supongamos que es 15. Pues, WP buscará un archivo category-15.php.

Y no habrá este archivo porque no te importan las categorías (eso es solo una suposición). Así que, ahora WordPress buscará el archivo básico page.php. Este archivo determina cómo deben verse todas las páginas, si no se modifican de alguna manera.

Puede ser que no encuentre ningún archivo page.php. Es una situación muy rara y probablemente nunca ocurra, si trabajas con plantillas prediseñadas. Pero si ocurre un problema de este tipo, WordPress encontrará el archivo index.php y mostrará al menos algo al usuario. Esta es una plantilla de sitio web predeterminada que define el aspecto básico de la página.

Cómo crear una plantilla de página personalizada

Finalmente, empecemos a practicar. En primer lugar, deberías crear un archivo .php en un editor de código de tu elección. Preferimos Windows Notepad, pero también puedes usar Notepad++, Sublime o cualquier otro que desees.

Dos cosas que cada página web necesita son una cabecera y un pie de página. Para mostrarlas en tu plantilla de página, añade el siguiente código al archivo .php que has creado.

<!--?php /** * Template Name: Custom Page Template */ get_header(); ?-->
 
<!--?php get_footer(); ?-->

Se verá así:

Ahora guarda los cambios y abre un administrador de archivos FTP o cPanel de tu sitio web.

Sube el archivo que has creado a wp-content -> themes-> carpeta del tema actual de tu sitio web.

Ahora haz clic en Páginas > Añadir nueva en tu panel de WP, llena la página nueva con contenidos y echa un vistazo a la derecha. Habrá un panel de "Atributos de página". Haz clic en la barra "Plantillas" y selecciona la plantilla de página personalizada que has creado en el menú desplegable.

Después de hacer clic en el botón "Publicar" y llegar al sitio web, verás una estructura de página muy sencilla. Tendrá una cabecera y un pie de página, pero eso es todo. Parece muy aburrido, ¿no?

Estamos seguro de que no te gustará este diseño básico, así que, hagámoslo más interesante. Es fácil, solo tienes que copiar y pegar un poco. Casi cualquier tema de WordPress tiene páginas adicionales prediseñadas. Por ejemplo, nuestro tema (usamos FreeBook de TemplateMonster) tiene una página de aterrizaje y una plantilla de página personalizada sin cabecera y pie de página. El tema Twenty Twelve (uno de los temas predeterminados gratuitos de WP) tiene una página 404 y una página de archivo. El tema Twenty Fourteen (otro tema gratuito) puede proporcionarte una página de Colaboradores. Además, cada tema tiene algunas partes de página precodificadas que se almacenan en wp-content/themes/carpeta de tu tema. Puedes descargar dicho archivo de parte de página a tu computadora, abrirlo y simplemente copiarlo y pegarlo en tu nueva plantilla de página personalizada de WordPress. Así es como se ve la plantilla de barra lateral de nuestro tema:

Simplemente copiamos y pegamos este código en nuestro archivo .php. Mira, ¡ahora tiene una barra lateral!

Plantillas de página personalizada de WordPress para diferentes propósitos

Como probablemente hayas entendido ya al ver la jerarquía de plantilla de WordPress, puedes crear una plantilla de página .php no solo para una sola página, sino también para un grupo de páginas. Se trata de una categoría o un tipo al que se aplicará automáticamente una plantilla de página específica.

Plantilla de página personalizada universal

Supongamos que necesitas un archivo .php de plantilla de WordPress que estará disponible para cualquier página que crees. En primer lugar, presta atención a su nombre. Si el nombre de tu .php comienza con "page-", WordPress lo interpretará como una plantilla especializada que se debe aplicar a una página específica. Además, trata de elegir un nombre comprensible para que puedas recordar qué hay dentro del archivo en cualquier momento.

Después de crear una plantilla de página personalizada, debes subirla a la carpeta wp-content/themes/carpeta de tu tema a través de FileZilla o cPanel. Ahora, esta opción está disponible para tí en el menú desplegable "Atributos de página" del panel de control administrativo cada vez que creas o editas una nueva página.

Plantilla de página personalizada para una sola página

Puede ser que desees que una de tus páginas estáticas se vea diferente de otras. La situación en la que todas tus páginas estáticas son únicas también es posible.

Crea una plantilla de página .php y dále un nombre page-{slug}.php o page-{número de ID de la página}.php, y sube este archivo a la carpeta del tema actual. En este caso, WordPress utilizará automáticamente esta plantilla solo para una página específica que coincida con el número ID o el slug en su nombre. Por ejemplo, quieres crear una página de Contactos y supongamos que tiene el número ID 9. Crea una plantilla de página personalizada de WordPress page-contacts.php o page-9.php, y se aplicará sólo a la página de Contactos.

Plantilla de página personalizada para entradas

Has creado ya una plantilla de página personalizada, pero quieres que las páginas de tus entradas sean iguales. En este caso, el cambio del nombre no ayudará, como debes añadir una línea adicional de código a esa plantilla. Escribe “Template Post Type: post, page“ justo debajo de la fila Template Name. Se verá así:

De esta forma también puedes añadir eventos y otros tipos de contenido que tienes en tu sitio web. Debemos mencionar, sin embargo, que este método funcionará solo si tu WordPress es de la versión 4.7 o más nueva. Las versiones anteriores simplemente ignoran la fila Template Post Type.

¿Por qué son geniales etiquetas condicionales?

Anteriormente hemos descrito cómo crear plantillas de páginas completamente nuevas, pero ¿qué ocurre si deseas hacer algunos cambios en una plantilla existente? Hay situaciones en las que necesitas que se muestre algo solo si se cumple una condición, por lo que no deseas crear una página que difiera de otras solo en un pequeño detalle o que se muestre solo en una situación particular.

Es por eso que las etiquetas condicionales son tan geniales. Se utilizan en una línea de código que verifica si se cumple alguna condición o no. Si se cumple, la primera parte del código sigue ejecutándose y si no, se ejecuta la parte después de "else". Por ejemplo, quieres que se muestre un tipo específico de barra lateral a los usuarios que abren Archivo. El código para hacer esto será:

Aquí está una lista de las etiquetas condicionales más frecuentemente utilizadas:

• is_home() Tiene una condición "verdadera" cuando se muestra la página de inicio (aquella que definiste como página de inicio)
• is_front_page() Tiene una condición "verdadera" cuando se muestra la página principal (front page) del sitio web (aquella que fue configurada como página principal)
• is_single() Tiene una condición "verdadera" cuando se muestra una entrada y será "falsa" cuando un usuario está en una página. Esta etiqueta condicional podría ser más específica, si escribes el título o la identificación de la entrada particular entre corchetes. Puede ser una sola entrada en particular  (is_single( `21` ) o is_single( `batman` )) o un grupo de entradas (is_single ( `3, 15, 47` ) o is_single( `batman, superman, ironman` )
• is_page() Tiene una condición "verdadera" cuando se muestra una página. Esta etiqueta condicional tiene todas las mismas opciones que is_single (). Puedes mencionar el nombre o la identificación de alguna página entre corchetes, y este fragmento de código rastreará una sola página o un grupo de páginas
• is_page_template() Tiene una condición "verdadera" cuando se usa una plantilla de página particular en esa página. Debes escribir el nombre de esa plantilla de página personalizada entre corchetes en la forma de "template_name.php" 
• is_category() Tiene una condición "verdadera" cuando se muestra una página de categoría de archivo. Esta condición se podría especificar igual que is_single() y is_page() - al escribir el nombre de la categoría específica del archivo o su ID entre corchetes
• is_tag() Tiene una condición "verdadera" cuando se muestra una página de archivo de etiqueta. Podrías mencionar una etiqueta determinada entre corchetes o rastrear todas las páginas de etiquetas. Si deseas saber, si hay alguna etiqueta en la página particular, puedes usar have_tag() dentro del Loop.
• is_archive() Tiene una condición "verdadera" cuando un usuario va a cualquier página de Archivo
• is_author() Tiene una condición "verdadera" cuando se muestra la página de autor. Se podría rastrear a un autor concreto (por su nombre o ID) y un grupo de autores
• is_date() Tiene una condición "verdadera" cuando se muestra una página de archivo de una fecha determinada. También hay condiciones más precisas: is_year() (cuando se muestra una página de archivo del año determinado), is_month() (rastrea todas las páginas mensuales), is_day() (se hace lo mismo con el día especificado) e is_time() ( puedes hacer que rastree una página que se publicó el momento preciso)
• is_search() Tiene una condición "verdadera" cuando un usuario se llega a una página como resultado de búsqueda
• is_404() Tiene una condición "verdadera" cuando la página "Error 404" predeterminada (o ingeniosamente diseñada) se muestra al visitante
• is_attachment() Tiene una condición "verdadera" cuando un usuario va a la "propia" página del archivo adjunto (los archivos adjuntos son imágenes o videos que se añade a entradas a través de la biblioteca multimedia o el editor)
• comments_open() Tiene una condición "verdadera", si el creador de página marcó que los comentarios se permiten en esa página

Funciones de plantillas de páginas

Copiar y pegar el código de una plantilla de página ya hecha es una forma fácil y rápida de crear una apariencia única, pero ¿qué significa todo ese código? Por supuesto, los desarrolladores web aprenden todo lo relacionado con PHP y saben exactamente qué funciones usar, cómo usarlas y cuándo. Sin embargo, si todavía estás leyendo esto, no eres desarrollador web, o, al menos, no tienes mucha experiencia. Ya que estamos hablando del control total sobre tu sitio web, no podemos olvidar de las etiquetas de plantilla.

WordPress usa muchas funciones de PHP diferentes y aquellas que se usan solo para temas se llaman Template tags o Etiquetas de plantilla. Ya has visto ellas al crear tu primera plantilla de página .php: get_header() y get_footer() son etiquetas de plantilla. No hablaremos sobre todas las etiquetas existentes, como hay demasiadas, pero vamos a mencionar aquellas que definitivamente encontrarás mientras diseñas tu sitio web.

get_header(), get_footer(), get_sidebar()

Estas tres etiquetas de plantilla añaden una cabecera, un pie de página o una barra lateral a tu plantilla de página personalizada de WordPress. Esas partes se toman del tema que usas actualmente. Si deseas que se aplique una cabecera, un pie de página o una barra lateral determinada a esa página, escribe su nombre entre corchetes. Por ejemplo, para usar un archivo header-superstar.php, necesitarás una etiqueta de plantilla get_header(`superstar`).

get_template_part()

Esta también añade una cierta parte de una plantilla ya hecha a tu tema .php. La diferencia es que si los corchetes permanecen vacíos, no se añadirá nada. Debes definir qué añadir. Por lo general, esta etiqueta de plantilla se usa para mover una parte del código del tema principal al secundario.

get_search_form()

Necesitarás esta para añadir un formulario de búsqueda a la barra lateral. Los widgets de búsqueda también suelen usar esta etiqueta de plantilla. Localiza search_form.php en la carpeta de tema y luego lo añade a una plantilla de página personalizada.

get_page_template()

Esta función recupera el pase a la plantilla actualmente utilizada de acuerdo con la jerarquía de la plantilla.

wp_login_form()

Si no hay nada entre corchetes, esta función añade un formulario de inicio de sesión sencillo de WordPress a la plantilla de página personalizada. Si deseas utilizar algún formulario en particular, debes escribir su nombre entre corchetes de la misma manera que lo haces para la etiqueta de plantilla get_header().

get_calendar()

Muestra un calendario en la página. Se diseñará de acuerdo con el tema actual. También puedes añadir un calendario modificado según tu gusto; simplemente escribe su nombre entre corchetes de la misma forma que lo haces para barra lateral o pie de página.

Eso será suficiente para ti, si el aprendizaje de PHP no es tu deseo. Hay más de un centenar de etiquetas de plantilla en WordPress, así que, creemos que incluso los gurús de desarrollo web usan hojas de trucos. Si estás realmente interesado en seguir aprendiendo, visita  WordPress Codex

Páginas útiles que todo sitio de WordPress debe tener

Ahora tienes el poder de personalizar cada parte de tu sitio web. Puedes crear plantillas de página para cada página y hacer que sea tan única y compleja como sea posible. Sin embargo, puede ser que ya tienes otra pregunta: ¿qué páginas serían realmente útiles para mi sitio web? Así que, permítenos darte algunos ejemplos.

Página 404 genial

A nadie le gusta esta página, porque te hace sentir un idiota. Sin embargo, su diseño podría hacer que un usuario se vaya o vuelva a buscar una vez más. Toda página "404" debe contener un enlace a tu página de inicio y un formulario de búsqueda que motive al usuario a quedarse en tu sitio web.

Página “Sobre nosotros” con tu equipo

La página "Acerca de nosotros" es una de las más visitadas en tu sitio web. A la gente le encanta saber con quién se está comunicando. Es una parte muy importante de tu sitio web y una plantilla de página personalizada única es obligatoria para ella. Sería realmente genial si todos los miembros del equipo se presenten en una tabla. No es difícil crear una función de este tipo: puedes copiarla de la página similar de la plantilla gratuita de WP Twenty Fourteen.

Página personalizada del archivo

Tu objetivo es hacer que todo usuario visite la mayor cantidad posible de páginas. Es por eso que tu tipo de página de archivo de WordPress debe contener enlaces a las publicaciones más recientes de diferentes categorías y atraer la atención de los visitantes. No solo debería mostrar las categorías y etiquetas disponibles, como eso es aburrido. Una buena idea sería mostrar tus 5 entradas más populares o algunos artículos al azar. Se requieren algunos esfuerzos de tu parte, pero seguramente afecta bien las tasas de tráfico de tu sitio web.

Página de contacto con formulario de contacto

Es obvio que un usuario que busca tus datos de contacto quiere comunicarse con tigo. Hacer que el cumplimiento de ese deseo sea fácil para el visitante no es solo una buena idea, sino debe ser obligatorio para ti, si quieres tener éxito. Asegúrate de que tu página de contactos no solo tiene tu número de teléfono y dirección de correo electrónico, sino integra un formulario de contacto y el mapa de Google con el puntero de tu ubicación.

Mapa del sitio alfabético

Si hay muchos artículos en tu blog, debes crear un mapa del sitio. Esta es una página que enumera todas las entradas que has escrito y publicado. Sería realmente conveniente que todas esas publicaciones se organicen en un cierto orden (alfabético, por ejemplo). En este caso los temas gratuitos de WordPress te ayudarán una vez más. Twenty Fourteen tiene una plantilla de página personalizada de WordPress “alphabetical posts”, por lo que puedes simplemente replicarla.

Pues, te hemos brindado un conjunto de herramientas que te ayudarán a alcanzar los niveles más altos de dominio de WordPress. Esperamos que tu plantilla de página personalizada sea increíble.

También te recomendamos leer

¿Cómo insertar PDF en WordPress?
Las 30 mejores plantillas WordPress Elementor de 2020
Cómo cambiar colores y tipos de letra predeterminados en cualquier tema de WordPress

Fuente: "How to Create a WordPress Custom Page Template: Gaining Ultimate Control" por Elizabeth Thistle