Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Themes

Plantillas para Páginas Dinámicas en WordPress, Parte 1

by
Read Time:10 minsLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 2

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Las plantillas para páginas WordPress son una sensacional manera de alterar completamente qué tan particularmente son desplegadas las páginas web.

Sin embargo, si tienen la limitación de ser 'estáticas'. No puedes personalizarlas o afectar su comportamiento de ninguna manera. Puedes únicamente elegir si habilitar o no una plantilla para página. Por defecto, una plantilla para página simplemente llevará a cabo una función fija, por ejemplo mostrar un mapa del sitio, o eliminar la barra lateral para mostrar una página que abarque todo el ancho.

En ésta serie de tutoriales, estaré mostrando cómo puedes extender las plantillas para páginas para que sean más flexibles, mejorando su funcionalidad sensacionalmente. Comenzaré por introducir cómo crear una plantilla para página estándar vía un tema hijo, antes de pasar a un plnteamiento más flexible donde crearé una plantilla para página dinámica de propósito general.

Finalmente, te mostraré tres ejemplos del mundo real de plantillas para páginas dinámicas funcionando totalmente. También cubriré tópicos avanzados por ejemplo cómo asignar plantillas para páginas a tipos de entrada personalizados.

¿Quieres Continuar?

Para continuar con ésta serie de tutoriales, necesitarás un sitio de WordPress con acceso al panel de administración. Por mucho la manera más fácil de hacer ésto es usar un entorno de desarrollo local. Un editor de texto dedicado también es útil pero no esencial.

Si vas a estar desarrollando con WordPress vía un servidor remoto entonces necesitarás poder editar archivos de tema vía el panel de administrador de WordPress, o editar archivos localmente y usar software FTP para transferirlos de vuelta al servidor. Por simpleza, asumiré que estás trabajando con WordPress localmente por el resto de éste tutorial.

Para implementar nuestras plantillas para páginas, estaré usando un tema hijo basado en el tema padre Twenty Seventeen, que (al momento de escribir ésto) es el tema predeterminado de WordPress más reciente. Así que si vas a continuar, es una buena idea tener éste instalado antes de avanzar.

The default Twenty Seventeen ThemeThe default Twenty Seventeen ThemeThe default Twenty Seventeen Theme

Puedes usar un tema hijo basado en otro tema padre si lo prefieres, pero necesitarás modificar algo del código para hacerlo funcionar fluídamente con tu tema particular. Aunque el método básico, es casi el mismo para cualquier tema hijo.

Plantillas para Página WordPress

Antes de aprender cómo hacer más flexibles las plantillas para páginas, conozcamos algunos detalles básicos.

WordPress utiliza una jerarquía de plantilla para decidir qué plantilla renderiza la página actual. La plantilla utilizada en la mayoría de los escenarios para páginas es page.php pero puede ser diferente si estás viendo una página con un ID o indicación particular. Sin embargo, si seleccionas una plantilla para página para una página particular, ésta siempre tendrá la preferencia para ser usada, lo que hace muy fácil personalizar cualquier página usando una plantilla para página.

Aqui están algunos ejemplos típicos de plantillas de páginas WordPress comúnmente utilizadas:

  • Formulario de Contacto
  • Portafolios
  • Preguntas Frecuentemente Formuladas
  • Página 404 Personalizada
  • Página de Inicio de Sesión Personalizada
  • Mapa del Sitio
  • Página de Anchura Completa
  • Página de Posts de Blog
  • Página con Widgets
  • Y muchas más...

Podría continuar, pero tienes la idea. ¡Las plantillas para páginas son geniales! Puedes usarlas para casi cualquier cosa.

Si has usado WordPress por cualquier período entonces es altamente probable que ya hayas visto uno o más de los ejemplos de arriba. La mayoría de los temas incluyen plantillas para páginas para complementar la funcionalidad del tema, y puedes fácilmente agregar el tuyo vía un tema hijo. Estaré cubriendo cómo hacer ésto en breve.

Las plantillas para páginas son tan útiles porque te dan completo control sobre toda la página. Puedes dejar el encabezado, el pie de página y/o las barras laterales si lo deseas. Ésta es una de las razones por la que las plantillas de páginas de anchura completa son tan comunes debido a que es muy fácil manipular las barras laterales vía una plantilla para página.

Para ver todas las plantillas para página actualmente disponibles, ve al editor de página de WordPress y accesa al menú desplegable Template (Plantilla) vía el meta box Page Templates. Simplemente selecciona la plantilla para página que quieres y, una vez que la página ha sido actualizada, será visible la próxima vez que la página sea vista.

Agregando Plantillas para Página vía un Tema Hijo

Como se mencionó arriba estaré usando un tema hijo de WordPress personalizable para implementar todas las plantillas para página durante todo éste tutorial. Comenzaré con un tema hijo básico y una plantilla para página, y luego agregaré más complejidad a ella mientras avanzamos.

Todo el proceso será cubierto paso a paso, así que no te preocupes si no estás familiarizado con hijos tema y/o plantillas para página. ¡Lo estarás para el final del tutorial!

La idea básica detrás de hijos tema es que te permiten personalizar la apariencia y sentido de tu tema actual (llamado un tema padre) de manera que no afectará cuando el tema padre se actualice.

Si el código es añadido directamente al tema padre entonces todas las personalizaciones será sobreescritas y perdidas durante una programada actualización del tema. Éste es un punto importante pues cualquier tema bien mantenido será actualizado regularmente. Para descubrir más sobre temas hijo, recomendaría ver la documentación oficial.

Es interesante notar que es técnicamente posible usar un plugin de WordPress para agregar plantillas para página, pero es mucho más sencillo usar un tema hijo. No quiero complicar las cosas innecesariamente con código extraño, así que me apegaré a temas hijo para nuestra implementación de plantilla para página.

¡Comencemos!

Ok, suficiente de teoría-¡creemos nuestra plantilla para página inicial! Estará localizada en un tema hijo Twenty Seventeen personalizado que actuará como nuestro contenedor de plantilla para página, así que necesitamos crear primero el tema hijo.

Abre el directorio de tu tema y crea un nuevo directorio para tu tema hijo. De acuerdo a las mejores prácticas de WordPress, se recomienda que nombres el directorio del tema hijo igual del tema padre en el que está basado, añadiéndola -'child'. Como el directorio de nuestro tema padre es llamado twentyseventeen, llama al directorio de tu tema hijo twentyseventeen-child. Dentro de éste nuevo directorio, crea un solo archivo llamado style.css y agrega el siguiente bloque de comentario en la parte superior.

Ahora necesitamos referenciar todos los estilos del tema padre Twenty Seventeen. Si alguna vez has trabajado con temas hijo antes, entonces podrías estar acostumbrado a agregar una declaración @import de CSS directamente debajo del bloque de comentario. Ésta ya no es considerada una mejor práctica de WordPress debido a las inquietudes de velocidad. Mejor, pondremos en cola a los estilos del tema padre, lo cual será más eficiente.

Dentro del directorio raíz del tema hijo, crea un archivo functions.php y agrega el siguiente código para establecer un contenedor de clase vacío.

Nota: La declaración PHP de cierre no es necesaria, pero puedes agregarla si lo prefieres.

Ahora agrega un hook y retrollamada para poner en cola a los estilos del tema padre Twenty Seventeen, en lugar de importarlos directamente dentro del archivo style.css. Haz ésto al agregar dos nuevos métodos de clase.

Guarda tus cambios y activa el tema hijo. Ahora tienes un hijo tema Twenty Seventeen, funcionando completamente, aunque simple. Para probar si está funcionando correctamente, agrega una línea de CSS personalizado a style.css.

Si todo está bien entonces deberías ver todo el texto de tu sitio ¡con un agradable y estridente color rojo!

Updated styles as per the child themeUpdated styles as per the child themeUpdated styles as per the child theme

No olvides eliminar el CSS de prueba antes de continuar. Ahora que el tema hijo está activo, podemos comenzar a implementar nuestra primer plantilla para página.

Agregando Nuestra Primera Plantilla para Página

Una cosa que vale la pena mencionar es sobre donde guardas las plantillas para página dentro de tu tema hijo. Puedes guardar las plantillas para página directamente dentro del directorio raíz del tema hijo o en un directorio de nivel alto. No importa el que elijas; cualquier locación es buena.

Sin embargo, si tienes múltiples plantillas para página, podrías decidir guardarlas en un directorio para fines organizacionales. El nombre del directorio no es importante, pero debe estar localizado directamente dentro del directorio raíz del tema hijo, de otra manera WordPress no reconocerá tus plantillas para página. Para éste tutorial, estaré usando un directorio llamado page-templates.

Ahora agreguemos una nueva plantilla para página al tema hijo. La manera estándar de hacer ésto es realizar una copia del archivo   page.php de la plantilla del tema padre y agregarlo a tu tema hijo. Puedes nombrar el archivo como quieras, pero recomendaría incluir algo que lo haga reconocible como una plantilla para página. Me decidiré por test-page-template.php.

Una vez que hayas copiado el archivo page.php (y renombrarlo) al directorio page-templates, la estructura de tu tema hijo debería ahora lucir así:

Adding the first page templateAdding the first page templateAdding the first page template

Abre test-page-template.php y reemplaza el bloque de comentario en la parte superior del archivo con lo siguiente.

Éste paso es muy importante pues el bloque de comentario le dice a WordPress que reconozca el archivo como una plantlla para página y la agregue a la lista de plantillas para página disponibles en la pantalla del editor de página.

El código de la plantilla de página completa ahora debería verse así:

Probemos nuestra plantilla para página. Ve al panel de administración de WordPress y edita cualquier página existente, o crea una nueva. El la pantalla del editor de la página, selecciona el desplegable Template (Plantilla) del meta box Page Attributes para asignar nuestra plantilla para página a la página actual.

The Page AttributesThe Page AttributesThe Page Attributes

Porque simplemente copiamos el tema el archivo de la plantilla page.php del tema padre, nuestra plantilla para página personalizada no está haciendo nada más que desplegar en pantalla la página actual, lo cual no es muy útil. También, no necesitaremos deplegar en pantalla el contenido del editor o comentarios, así que eliminamos éstos del bucle while de la plantilla para página, y agregamos un mensaje personalizado. Cambia el contenido del bucle while a lo siguiente.

Guarda ésto y ve la página en el front end.

Viewing the page template on the front-endViewing the page template on the front-endViewing the page template on the front-end

Nota: si no puedes ver el mensaje personalizado entonces asegúrate de haber seleccionado la plantilla para página personalizada en el editor de página y guardarlo para actualizar la configuración.

Ahora hagamos nuestra plantilla para página personalizada un poco más útil. Reemplaza el mensaje que agregamos arriba con el siguiente código para desplegar en pantalla un mapa del sitio de todas las páginas publicadas.

Ésto resultará en el siguiente despliegue en pantalla.

Viewing the sitemapViewing the sitemapViewing the sitemap

Es fácil ver qué tan úitl pueden ser las plantillas para página. ¡Pero podemos hacerlo todavía mejor!

Conclusión

Hasta ahora, hemos creado un tema hijo y lo usamos para implementar nuestra plantilla para página estándar. En el próximo tutorial, te mostraré paso a paso cómo extender ésto, demostrando cómo las plantillas para págna pueden ser más flexibles.

Específicamente, crearemos una plantilla para página dinámica de propósito general al agregar controles personalizados a la pantalla del editor de página. Entonces se agregará lógica de control a la plantilla para página para permitirnos directamente personalizar cómo se renderice la plantilla para página.

WordPress tiene una economía increíblemente activa. Hay temas, plugins, librerías y muchos otros productos que te ayudan a crear tu sitio y proyecto. La naturaleza de código abierto de la plataforma también la hace una gran opción para mejorar tus habilidades de programación. Cualquiera que sea el caso, puedes ver lo que tienes disponible en el Mercado Envato.

Éste es mi primer tutorial (¡se amable!) así que por favor con toda confianza deja cualquier retroalimentación que pudieras tener en la sección de comentarios abajo. Haré mi mejor esfuerzo para responder cada pregunta.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.