Plantillas de página dinámicas en WordPress, Parte 1

Las plantillas de página de WordPress son una excelente manera de modificar completamente cómo se muestran las páginas web particulares. Puede usarlos para agregar una amplia gama de funciones a su sitio.

Sin embargo, tienen una limitación en cuanto a que son plantillas 'estáticas'. No puedes personalizarlos o afectar su comportamiento de ninguna manera. Solo puede elegir si habilitar una plantilla de página o no. De forma predeterminada, una plantilla de página simplemente llevará a cabo una función fija, por ejemplo, mostrar un mapa del sitio, o quitar la barra lateral para mostrar una página de ancho completo.

En esta serie de tutoriales, veré cómo puede extender las plantillas de página para que sean más flexibles, mejorando enormemente su funcionalidad. Comenzaré presentando cómo crear una plantilla de página estándar a través de un tema secundario, antes de pasar a un enfoque más flexible donde crearé una plantilla de página dinámica de propósito general..

Finalmente, te mostraré tres ejemplos reales de plantillas de página dinámicas que funcionan completamente. También cubriré temas avanzados, como la forma de asignar plantillas de página a tipos de publicaciones personalizados..

Quiero seguir a lo largo?

Para seguir esta serie de tutoriales, necesitará un sitio de WordPress con acceso de administrador. De lejos, la forma más fácil de hacerlo es utilizar un entorno de desarrollo local. Un editor de texto dedicado también es útil pero no esencial.

Si está desarrollando con WordPress a través de un servidor remoto, deberá poder editar los archivos de temas a través del administrador de WordPress, o editar los archivos localmente y usar el software FTP para transferirlos de nuevo al servidor. Para simplificar, asumiré que está trabajando con WordPress localmente durante el resto de este tutorial..

Para implementar nuestras plantillas de página, usaré un tema secundario basado en el tema principal de Twenty Seventeen, que (en el momento de escribir este artículo) es el último tema predeterminado de WordPress. Por lo tanto, si lo está siguiendo, es una buena idea tener esto instalado antes de continuar..

Si lo prefiere, puede usar un tema secundario basado en otro tema principal, pero deberá modificar parte del código para que funcione sin problemas con su tema en particular. Sin embargo, el método básico es prácticamente el mismo para cualquier tema infantil..

Plantillas de página de WordPress

Antes de aprender cómo hacer que las plantillas de página sean más flexibles, repasemos algunos detalles básicos.

WordPress utiliza una jerarquía de plantillas para decidir qué plantilla representa 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 slug particular. Sin embargo, si selecciona una plantilla de página para una página en particular, esto siempre se utilizará con preferencia, lo que hace que sea muy fácil personalizar cualquier página utilizando una plantilla de página..

Aquí hay algunos ejemplos típicos de las plantillas de página de WordPress más utilizadas:

Formulario de contacto
Carteras
Preguntas frecuentes
Página 404 personalizada
Página de inicio de sesión personalizada
Mapa del sitio
todo el ancho de página
Publicaciones del blog
Página Widgetized
Y muchos más…

Podría seguir, pero entiendes la idea. ¡Las plantillas de página son geniales! Puedes usarlos para casi cualquier cosa..

Si ha utilizado WordPress durante un período de tiempo prolongado, es muy probable que ya haya encontrado uno o más de los ejemplos anteriores. La mayoría de los temas incluyen plantillas de página para complementar la funcionalidad del tema, y puede agregar fácilmente las suyas a través de un tema secundario. Estaré cubriendo cómo hacer esto en breve.

Las plantillas de página son muy útiles porque le dan un control completo sobre toda la página. Puede omitir el encabezado, el pie de página y / o las barras laterales si lo desea. Esta es una de las razones por las que las plantillas de página de ancho completo son tan comunes porque es muy fácil manipular las barras laterales a través de una plantilla de página.

Para ver todas las plantillas de página disponibles actualmente, vaya al editor de páginas de WordPress y acceda a Modelo bajar a través de la Plantillas de página cuadro de meta Simplemente seleccione la plantilla de página que desea y, una vez que la página se haya actualizado, estará visible la próxima vez que se vea la página..

Adición de plantillas de página a través de un tema infantil

Como se mencionó anteriormente, usaremos un tema secundario personalizado de WordPress para implementar todas las plantillas de página en este tutorial. Comenzaré con un tema infantil básico y una plantilla de página, y luego le agregaré más complejidad a medida que avanzamos.

Todo el proceso se cubrirá paso a paso, así que no se preocupe si no está familiarizado con los temas secundarios y / o las plantillas de página. Estarás al final del tutorial.!

La idea básica detrás de los temas secundarios es que le permiten personalizar la apariencia de su tema actual (llamado tema principal) de una manera que no se verá afectada cuando se actualice el tema principal.

Si el código se agrega directamente al tema principal, todas las personalizaciones se sobrescribirán y se perderán durante una actualización programada del tema. Este es un punto importante ya que cualquier tema bien mantenido será actualizado regularmente. Para obtener más información sobre temas infantiles, recomiendo echar un vistazo a la documentación oficial..

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

Empecemos!

Ok, suficiente teoría, creemos nuestra plantilla de página inicial! Se ubicará en un tema infantil personalizado de Twenty Seventeen que actuará como nuestro contenedor de plantillas de página, por lo que primero debemos crear el tema secundario..

Abra su carpeta de temas y cree una nueva carpeta para el tema de su hijo. De acuerdo con las mejores prácticas de WordPress, se recomienda que nombre la carpeta del tema secundario del mismo modo que el tema principal en el que se basa, enmendada con '-child'. Como nuestra carpeta de tema principal se llama veintisiete, nombra la carpeta de temas de tu hijo veintisiete años. Dentro de esta nueva carpeta, crea un único archivo llamado style.css y agrega el siguiente bloque de comentarios en la parte superior.

/ * Nombre del tema: Twenty Seventeen Child Descripción: Twenty Seventeen Child Theme Autor: David Gwyer Plantilla: twentyseventeen Versión: 0.1 Licencia: GNU General Public License v2 o posterior Licencia URI: http://www.gnu.org/licenses/gpl- 2.0.html Dominio de texto: veintisiete-niño * /

Ahora necesitamos hacer referencia a todos los estilos del tema principal de Veinte Diecisiete. Si alguna vez ha trabajado con temas secundarios antes, entonces podría estar acostumbrado a agregar un CSS @importar Declaración directamente debajo del bloque de comentarios. Esto ya no se considera una buena práctica de WordPress debido a problemas de velocidad. En su lugar, pondremos en cola los estilos del tema principal, que serán más eficientes..

Dentro de la carpeta raíz del tema hijo, cree un funciones.php Archivo y agregue el siguiente código para configurar un contenedor de clase vacío. Usaremos esta clase para todos nuestros códigos de configuración..

en eso();

Nota: la declaración de PHP de cierre no es necesaria, pero puede agregarla si lo prefiere.

Ahora agregue un enlace y una devolución de llamada para poner en cola los estilos de los temas principales de Veintisiete y siete, en lugar de importarlos directamente dentro del archivo style.css. Haga esto agregando dos nuevos métodos de clase.

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

* color: rojo! importante;

Si todo está bien, entonces debería ver todo el texto de su sitio ahora en un color rojo chillón.!

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

Agregar nuestra plantilla de la primera página

Vale la pena mencionar una cosa sobre dónde almacena las plantillas de página dentro del tema de su hijo. Puede almacenar las plantillas de página directamente dentro de la carpeta de tema secundario raíz o en una carpeta de nivel superior. No importa cuál elijas; cualquiera de las dos ubicaciones está bien.

Sin embargo, si tiene varias plantillas de página, puede decidir almacenarlas en una carpeta para fines organizativos. El nombre de la carpeta no es importante, pero debe estar ubicado directamente dentro de la carpeta del tema secundario raíz, de lo contrario, WordPress no reconocerá sus plantillas de página. Para este tutorial, usaré una carpeta llamada plantillas de página.

Ahora agreguemos una nueva plantilla de página al tema secundario. La forma estándar de hacer esto es hacer una copia del tema principal page.php archivo de plantilla de tema y agregarlo a su tema hijo. Puede nombrar el archivo como desee, pero le recomiendo que incluya algo que lo haga reconocible como una plantilla de página. Voy a ir con test-page-template.php.

Una vez que haya copiado el page.php archivo (y renombrado) a la plantillas de página carpeta, la estructura del tema de su hijo ahora debería verse así:

Abrir test-page-template.php y reemplace el bloque de comentarios en la parte superior del archivo con el siguiente.

Este paso es muy importante ya que el bloque de comentarios le dice a WordPress que reconozca el archivo como una plantilla de página y lo agregue a la lista de plantillas de página disponibles en la pantalla del editor de páginas.

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

Vamos a probar nuestra plantilla de página. Vaya al administrador de WordPress y edite cualquier página existente, o cree una nueva. En la pantalla del editor de páginas, seleccione la Modelo desplegable de la Atributos de página meta box para asignar nuestra plantilla de página a la página actual.

Porque simplemente copiamos el tema padre page.php archivo de plantilla, nuestra plantilla de página personalizada no hace nada más que generar la página actual, lo que no es muy útil. Además, no necesitaremos mostrar el contenido del editor o los comentarios, así que elimínelos de la plantilla de la página. mientras bucle, y añadir un mensaje personalizado. Cambiar el contenido de la mientras bucle a la siguiente.

Esta es nuestra plantilla de página personalizada.!

"; endwhile; // Fin del bucle.

Guarde esto y vea la página en la parte delantera.

Nota: si no puede ver el mensaje personalizado, asegúrese de haber seleccionado la plantilla de página personalizada en el editor de la página y de guardarla en la configuración de actualización.

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

Mapa del sitio"; eco "". wp_list_pages (array ('title_li' =>")). "
"; endwhile; // Fin del bucle.

Esto dará lugar a la siguiente salida.

Es fácil ver cuán útiles pueden ser las plantillas de página. Pero podemos hacerlo aún mejor.!

Conclusión

Hasta ahora, hemos creado un tema secundario y lo hemos utilizado para implementar nuestra plantilla de página estándar. En el siguiente tutorial, le mostraré paso a paso cómo extender esto, demostrando cómo las plantillas de página pueden ser más flexibles..

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

WordPress tiene una economía increíblemente activa. Hay temas, complementos, bibliotecas y muchos otros productos que lo ayudan a desarrollar su sitio y proyecto. La naturaleza de código abierto de la plataforma también lo convierte en una excelente opción desde donde puede mejorar sus habilidades de programación. En cualquier caso, puede ver lo que tenemos disponible en Envato Marketplace..

Este es mi primer tutorial (¡sé suave!), Por lo que no dudes en dejar cualquier comentario que puedas tener en el feed de comentarios a continuación. Haré mi mejor esfuerzo para responder a cada pregunta.

Código