Share
En este tutorial para principiantes, aprenderá a crear sus propios temas de ProcessWire CMS. Crearemos un sitio súper simple, que cubra plantillas, campos, estructura de temas y variables de PHP..
No se olvide de ponerse al día siguiendo el primero de nuestros tutoriales Cómo instalar y configurar ProcessWire CMS.
A diferencia de otros CMS como WordPress, ProcessWire no tiene un proceso de selección de temas como parte de su administrador, donde puede cambiar de tema con solo presionar un botón bien etiquetado. Sin embargo, esto no es necesariamente algo malo. ProcessWire tiene su propio sistema: la carpeta "sitio / plantillas" que contiene todos los archivos asociados con su tema.
La mejor manera de crear un tema en blanco, es seleccionando la sitio en blanco perfil al instalar ProcessWire (PW). El espacio en blanco del sitio contiene la estructura más básica del sitio dentro de su carpeta de "sitio / plantillas" - esto incluye carpetas y archivos
Puede crear una nueva carpeta de "sitio / plantillas" con sus propios archivos después de la instalación si lo desea, en lugar de comenzar con el perfil en blanco del sitio, pero asegúrese de tener al menos los archivos mencionados anteriormente..
Aprender cómo PW enruta sus páginas nos ayudará a construir nuestras plantillas personalizadas más adelante..
Cuando se solicita una página de PW (por ejemplo, www.benbyford.com/about), PW mira la página dentro del CMS y verifica qué plantilla está asignada; en este caso he asignado la plantilla “página básica”; el archivo "basic-page.php" dentro del "sitio / plantillas /" se procesa y el HTML solicitado se envía al usuario (PW también permite el uso fácil de otros formatos como JSON o XML).
Propina: de forma predeterminada, se hace referencia a las plantillas dentro de PW con el mismo nombre que su archivo de plantilla PHP, sin embargo, puede cambiar el nombre de la plantilla y el archivo asociado en cualquier momento después de la creación dentro de la administración de PW.
Por ejemplo, agreguemos algo de HTML y PHP a nuestro archivo "home.php":
<?php echo $page->título; ?> título; ?>
Ahora vaya a la URL de su sitio en el navegador y observe la título y h1 Ahora debe estar lleno con el título de su página de inicio (por defecto: Casa).
Hacer muchos archivos de plantillas con HTML muy similar no es muy eficiente, así que hagamos un par de archivos .inc PHP que puedan incluirse en cada plantilla. Un patrón de estructura común dentro de la temática es crear archivos "head.inc" y "foot.inc" que se usan para construir código HTML común como nuestro , Navegación, logo, pie de página y scripts..
Vamos a editar nuestro archivo "home.php" de nuevo para implementar lo anterior:
título; ?>
Añadir nuestra cabeza.inc:
<?php echo $page->título; ?>
Y pie.inc:
¿Por qué usar el tipo de archivo .inc que oigo preguntar? Bueno, al agregar una nueva plantilla en el administrador de PW, el sistema busca en el sitio / plantillas / carpeta cualquier nuevo archivo .php que aún no haya sido utilizado por una plantilla. Al utilizar el tipo de archivo .inc en lugar de .php, no se confundirá entre los archivos de plantilla y los archivos que desea incluir en tu plantilla.
Puede hacer tantas plantillas como desee para las páginas dentro de su sitio PW, enloquecer! Por ejemplo, hagamos una nueva plantilla para una nueva página llamada "Contacto". Empiezo por
El CMS ahora conoce su nuevo archivo de plantilla y ahora se mostrará como una opción de plantilla al crear una nueva página. Intenta crear una nueva página debajo de tu casa.página, llámelo "Contacto" y seleccione nuestra nueva plantilla de página de contacto. Ahora tiene al menos dos plantillas activas en su sitio: "inicio", y "pagina de contacto".
¡Increíble! Ahora sabemos cómo crear archivos de plantilla, agregarlos a PW y crear páginas con nuestras nuevas plantillas.
Por último, queremos saber cómo representar el contenido agregado al administrador de PW en nuestras plantillas, e incluso usar PHP vainilla en nuestro sitio. Una de mis cosas favoritas sobre PW es que le da al codificador de temas acceso instantáneo al contenido a través de variables y un conjunto de funciones útiles para la funcionalidad más simple. Cualquier cosa que no tenga, puede escribir en PHP usted mismo sin preocuparse por lo que el sistema podría hacer con su código. Tampoco debes seguir estructuras de clase estrictas o ganchos (te estoy mirando, Drupal). En otras palabras: te da un conjunto de herramientas, luego se sale de tu camino.
Para obtener una lista resumida de todas las variables y funciones dentro de PW, consulte la hoja de referencia de la API de Processwire y, para una explicación más detallada, consulte la documentación de la variable de PW.
Veamos rápidamente algunas de las principales variables para hacer que nuestras plantillas sean más funcionales..
Editando nuestro home.php nuevamente, agreguemos el título de la página, el cuerpo y el contenido de la barra lateral usando $ página variable. $ páginale da acceso a todo el contenido subido a esa página dentro del administrador de PW.
". $ page-> título.""; // output body copy echo $ page-> body;?>barra lateral ?>
También agreguemos una navegación simple a nuestra cabeza. $ paginas variable. $ paginas le da acceso a otras páginas con su sitio, que luego puede consultar por contenido.
<?php echo $page->título; ?>
Ahora que conoce algunos de los aspectos básicos de la temática en PW, le insto a que consulte algunos de los otros perfiles del sitio contenidos en la descarga de PW para ver cómo están estructurados. En mi opinión, experimentar y obtener comentarios de la comunidad también puede ser muy beneficioso..
Propina: encontrará una gran cantidad de módulos que pueden ayudarlo a construir su sitio en la página de módulos. Si eres un amante de la reducción de LESS y scripts, recomiendo el módulo AIOM.
Y, por supuesto, busque futuros tutoriales aquí en Envato Tuts+.
Accentsconagua