35,99 €
Mehr erfahren.
- Herausgeber: Marcombo
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Spanisch
- Veröffentlichungsjahr: 2023
Si tienes conocimientos básicos en los lenguajes web como PHP, JavaScript, HTML, CSS, MySQL y jQuery, y has interactuado previamente con WordPress a nivel básico pero quieres ir más allá, has llegado al libro indicado. Este manual desarrolla un material que va desde lo más básico hasta lo más avanzado, y explica todas las funciones indispensables para el desarrollo de temas en WordPress. Al finalizar la lectura, sabrás: "Desarrollar temas avanzados y escalables en WordPress, e identificar cada archivo de plantilla durante el desarrollo. "Trabajar con una arquitectura MVC para el desarrollo de sus plantillas. "Desarrollar todo un sistema de reservas y pagos personalizados con su propio código. "Crear un sistema de pagos TPV con tarjeta utilizando Redsys, la plataforma de pago virtual que admite pagos desde tarjetas de crédito y débito. "Crear consultas AJAX y SQL en la base de datos de WordPress. Asimismo, el libro incluye gratis el acceso al curso online sobre desarrollo de temas avanzados con Wordpress para ayudarte de forma práctica en tu perfeccionamiento como desarrollador web. Ahora, adquirir conocimientos avanzados en el mundo de WordPress y sus temas es más fácil que nunca. Con este libro estarás al día en todo lo relativo a este potente sistema de gestión de contenidos y serás capaz de construir tus propios temas basados en cualquier diseño web o PSD Photoshop.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 275
Ähnliche
Esta obra ha recibido una ayuda a la edición del Ministerio de Cultura y Deporte del Gobierno de España, por el Plan de Recuperación, Transformación y Resiliencia, Financiado por la Unión Europea (NextGenerationEU)
Aprende a desarrollar temas avanzados con WordPress
Primera edición: 2023
©2023 Jhon Jairo Rincón
© 2023 MARCOMBO, S. L.
www.marcombo.com
Diseño de la cubierta: ENEDENÚ DISEÑO GRÁFICO
Correctora: Anna Alberola Banasco
Revisor técnico: Pablo Martínez Izurzu
Directora de producción: M.a Rosa Castillo Hidalgo
Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra
ISBN del libro en papel: 978-84-267-3510-2
ISBN del libro electrónico: 978-84-267-3643-7
Producción del ePub: booqlab
Índice
Introducción
Lo que aprenderás con este libro
Instalar el servidor local wampserver
Instalar la última versión de WordPress
Estructura de un tema
¿Qué es un tema?
Estructura de archivos para el desarrollo de un template
Requisitos de cabecera, título y descripción de un template
Jerarquía de plantilla de WordPress
Crear la estructura de archivos
Crear los directorios y archivos principales
La carpeta admin
La carpeta helpers
La carpeta public
La carpeta includes
Crear el header y el footer de nuestro template
Funciones de encolamiento y ganchos de acción
Añadir archivos css de Bootstrap y normalizar el encolamiento
Encolar los archivos js
Crear el header y el footer de nuestro tema
Crear el menú de navegación del header
Crear el footer
Modularizar el código
Modularizar el código para el encolamiento de archivos (parte I)
Modularizar el código para el encolamiento de archivos (parte II)
Modularizar el código para el encolamiento de archivos (parte III)
Modularizar el código para el encolamiento de archivos (parte IV)
Modularizar el código para el encolamiento de archivos (parte V)
Modularizar el código para el encolamiento de archivos (parte VI)
Maquetar el frontend y añadir funcionalidades
Instalar sass para los estilos css
Configurar el header y añadiendo metaetiquetas
Metaetiquetas para ver nuestra web como una app de Android y Apple
Crear y configurar las páginas en nuestro panel de administración
Programar el menú de navegación de nuestro tema
Añadir el código para el logo y organizando el menú nav
Subir el logo
Poner el menú de redes sociales en el footer
Crear menús y submenús en nuestro panel de administración
Crear el menú Opciones
Crear la función callback del menú
Creando el submenú
Modularizar el código para crear los menús y submenús I
Modularizar el código para crear los menús y submenús II
Modularizar el código para crear los menús y submenús III
Encolar archivos css y js en el admin para las páginas de menú y submenú I
Encolar archivos css y js en el admin para las páginas de menú y submenú II
Crear las páginas para el template y mostrar el contenido
Jerarquía de los archivos de plantilla
Crear las páginas de nuestro menú I
Crear las páginas de nuestro menú II
Crear las páginas de nuestro menú III
Crear el contenido de nuestras páginas
Añadir la opción thumbnails o imagen destacada
Funciones de contenido, programar el blog
Crear la página de publicación única para las entradas del blog
Crear widgets y sidebar
Crear el widget I
Crear el widget II
Creación de sidebar
Creación de múltiples sidebars
Custom Post Types
¿Qué es un Custom Post Type?
Crear el Custom Post Type
Crear el contenido para el CPT
Habilitar la REST API de WordPress para nuestro CPT
Mostrar el contenido de nuestro CPT en el frontend
Crear los directorios y archivos principales
Paginación de entradas del CPT
Modularizar el código de paginación
Taxonomías en WordPress
¿Qué son las taxonomías?
Crear una taxonomía
Funciones para obtener los términos de una taxonomía I
Funciones para obtener los términos de una taxonomía II
Metacampos y metaboxes
Metadatos I
Metadatos II
Metadatos III
Custom fields
Metaboxes personalizados
Añadir editor TinyMCE
Interactuar con la base de datos de WordPress
Consultas a la base de datos de WordPress I
Consultas a la base de datos de WordPress II
Consultas predefinidas I (funciones)
Consultas predefinidas II (funciones)
Consultas predefinidas III (funciones)
Consultas generales o específicas
Preparar consultas contra inyección sql
Mostrar errores en la consulta
Crear el template Hotel
Descargar los archivos para el proyecto
Ajustar archivos para la maquetación
Maquetar la página de inicio o frontpage I
Maquetar la página de inicio o frontpage II
Maquetar la página de inicio o frontpage III
Crear el bloque sobre nosotros del frontend
Crear el bloque galería de nuestro frontend
Crear el bloque Experiencias
Añadir metacampos al template Experiencias
Crear un bloque parallax para reservar
Crear el bloque de localización en nuestro frontend
Crear los metacampos para el bloque de localización
Crear el bloque Newsletter
Desarrollar el método Ajax para el formulario
Crear las funciones php para recibir los datos del método Ajax
Crear la cabecera de las páginas
Editar la página de habitaciones
Añadir el calendario a la página habitaciones
Programar función para puntuar las habitaciones
Crear los campos de información para las habitaciones
Crear el metacampo para el precio de las habitaciones
Maquetar la página de una habitación
Maquetar la página blog
Crear la página de servicios
Crear la página de contacto
Crear el método ajax para el formulario de contacto
Crear el sidebar para la página de contacto
Añadir el mapa de ubicación a la página de contacto
Maquetar la página de reservas
Añadir la librería para el calendario de reservas
Crear la página de aviso legal y política de privacidad
Crear el modal de política de privacidad del formulario
Preparar ajustes en el formulario y creando el ajax para las reservas
Activar el datepicker y crear la consulta ajax
Cambiar formato de fechas para guardar en la base de datos
Añadir las fechas del calendario al widget
Acceder a campos del formulario y guardar datos de la reserva
Crear el email para avisar al cliente de la reserva
Crear la función para enviar los emails
Optimizar la consulta SQL para evitar errores al importar la base de datos
Crear el email del formulario de contacto
Crear el administrador de reservas para nuestro proyecto
Crear la función para eliminar una reserva
Crear la función para eliminar la solicitud de contacto
Añadir nuestro propio sistema de pago (Redsys) y descargar la librería
Crear el submenú para gestionar los pagos de la tpv
Crear las páginas para realizar el pago con la tpv
Crear la página pago tpv para realizar el pago de la reserva
Crear el método ajax para enviar el enlace de pago al cliente
Crear el email HTML y el método php para enviar el email
Programar la pasarela de pago Redsys y la notificación para la tpv
Recibir la respuesta de Redsys en el archivo page-notification-tpv.php
Crear los métodos para enviar los emails de confirmación del pago
Crear la página 404
Editar el calendario datepicker
Introducción
Lo que aprenderás con este libro
En este libro conocerás todas las funciones necesarias para el desarrollo de temas en WordPress, y también aprenderás a trabajar con una estructura MVC para desarrollar temas avanzados y escalables.
He desarrollado un temario con el que adquirirás conocimientos acerca del funcionamiento de WordPress, desde lo más básico hasta lo más avanzado.
Si eres de los que siempre ha querido ir un poco más allá, si has intentado crear una funcionalidad en WordPress para realizar algo en específico, pero se te hecho difícil porque no has encontrado casi material que te pueda guiar, este libro es para ti.
Este libro se ha creado pensando en aquellos que tienen algún conocimiento básico de los lenguajes de la web (como PHP, JavaScript, HTML, CSS, MySQL o jQuery) y para quienes han interactuado un poco con WordPress (creación de blogs, sitios web, etc.).
Con este libro también aprenderás a desarrollar todo un sistema de reservas y pagos que tú mismo podrás personalizar con tu código. Aprenderás a crear tu propio sistema de pagos TPV con tarjeta utilizando Redsys, la plataforma de pago virtual que admite pagos desde tarjetas de crédito y débito.
Al final, adquirirás conocimientos avanzados que te servirán en tu profesión como desarrollador web.
Una vez termines:
•Conocerás todas las funciones de WordPress para poder desarrollar tus propios temas.
•Aprenderás cómo funciona todo el sistema de WordPress que permite identificar cada archivo de plantilla que se crea durante el desarrollo.
•Aprenderás a crear tu propio sistema de pago utilizando un TPV virtual para realizar pagos con tarjeta de crédito mediante Redsys.
•Aprenderás a crear una arquitectura MVC para el desarrollo de tus plantillas.
•Aprenderás a crear consultas Ajax con WordPress.
•Con el proyecto final, aprenderás a construir un sitio web de un hotel con su propio motor de reservas.
•Aprenderás a construir tu propio sistema de pago personalizado parea realizar pagos con tarjeta.
•Aprenderás a crear consultas SQL a la base de datos de WordPress.
Instalar el servidor local wampserver
Empezaremos instalando nuestro servidor local, que nos permitirá iniciar nuestro WordPress. Para ello, vamos a visualizar en Youtube un vídeo que he preparado. Copiaremos en nuestro navegador el enlace que os dejo debajo de la imagen.
https://youtu.be/g8eVLuygezo
Instalar la última versión de WordPress
Para comenzar nuestro libro, vamos a instalar la última versión de WordPress. Dejo un vídeo bastante ilustrativo, donde se puede seguir paso a paso el proceso de instalación. Es importante que previamente se haya instalado el servidor local.
https://youtu.be/XzzagXyX_T0
NOTA:
Accede a www.marcombo.info con el código WORDPRESS23 para obtener gratis las credenciales de acceso a los más de 200 vídeos que componen el Curso avanzado de Wordpress. Desarrollo de temas.
Estructura de un tema
¿Qué es un tema?
Un tema, también llamado «theme», es la estructura y la apariencia en la que se basa una página web construida con WordPress.
Normalmente, al instalar WordPress podemos observar que, en nuestro panel de administración, vienen algunos themes o temas de demostración ya preparados que podemos seleccionar. Por lo tanto, lo único que tenemos que hacer es escoger un diseño que se adapte al resultado que queremos conseguir; basta con sustituir las fotos y los textos de prueba por los nuestros. Esto hace que crear una página web sea bastante sencillo, aunque nunca antes hayas trabajado con WordPress.
Hoy día puedes encontrar millones de plantillas gratis y de pago que puedes utilizar para tus proyectos. Template Monster y Theme Forest son sitios donde puedes adquirir estas plantillas.
Imagen de Template Monster.
Imagen de Theme Forest.
Estructura de archivos para el desarrollo de un template
Los temas de WordPress viven en subdirectorios del directorio «themes» de WordPress, que se encuentra en la ruta:
wp-content / themes /
Dentro de la carpeta «themes», creamos nuestra carpeta o subdirectorio del tema que construimos. Dentro, pondremos todos los archivos de hojas de estilo del tema, archivos de plantilla y archivos de funciones opcionales. Por ejemplo, un tema llamado «prueba» residiría en el directorio:
wp-content / themes / prueba /
Debemos evitar usar números para el nombre del tema, ya que esto hace que no se muestre en la lista de temas disponibles. A continuación, veremos una imagen de la estructura de archivos de un template:
Esta sería la vista de los archivos de la plantilla Twenty Twenty de WordPress.
Lista de archivos de plantilla:
Aquí está la lista de archivos de temas reconocidos por WordPress. Por supuesto, nuestro tema puede contener otras hojas de estilo, imágenes o archivos. Solo debemos tener en cuenta el significado que tienen estos archivos para WordPress.
style.css
La hoja de estilo principal. Debe incluirse con su tema y debe contener el encabezado de información de su tema.
rtl.css
La hoja de estilo rtl. Se incluirá automáticamente si la dirección del texto del sitio web es de derecha a izquierda. Esto se puede generar usando el complemento RTL.
index.php
La plantilla principal. Si su tema proporciona sus propias plantillas, index. php debe estar presente.
functions.php
En este archivo escribiremos todas las funciones con sus respectivos hooks o ganchos que interactúan con el core de WordPress. También crearemos nuestras propias funciones y hooks.
comments.php
La plantilla de comentarios.
front-page.php
La plantilla de portada.
home.php
La plantilla de la página de inicio, que es la página principal por defecto. Si usa una página principal estática, esta es la plantilla para la página con las últimas publicaciones.
single.php
La plantilla de publicación única. Se utiliza cuando se consulta una sola publicación. Para esta y todas las demás plantillas de consulta, se usa index.php si la plantilla de consulta no está presente.
single- {post-type} .php
La plantilla de publicación única que se utiliza cuando se consulta una publicación única de un tipo de publicación personalizada. Por ejemplo, single-book.php se usaría para mostrar publicaciones individuales del tipo de publicación personalizada «libro». index.php se usa si la plantilla de consulta para el tipo de publicación personalizada no está presente.
page.php
La plantilla de página. Se utiliza cuando se consulta una página individual.
category.php
La plantilla de categoría. Se utiliza cuando se consulta una categoría.
tag.php
La plantilla de etiqueta. Se utiliza cuando se consulta una etiqueta.
taxonomy.php
Se utiliza cuando se consulta un término de una taxonomía personalizada.
author.php
La plantilla de autor. Se utiliza cuando se consulta a un autor.
date.php
La plantilla de fecha/hora. Se utiliza cuando se consulta una fecha o una hora (año, mes, día, hora, minuto, segundo).
archive.php
La plantilla de archivo. Se utiliza cuando se consulta una categoría, un autor o una fecha. Tenga en cuenta que esta plantilla será anulada por category. php, author.php y date.php para sus respectivos tipos de consulta.
search.php
La plantilla de resultados de búsqueda. Se utiliza cuando se realiza una búsqueda.
attachment.php
Plantilla de adjunto. Se usa al ver un solo archivo adjunto.
image.php
Plantilla de imagen adjunta. Se utiliza cuando se visualiza un archivo adjunto de una sola imagen. Si no está presente, se utilizará attach.php.
404.php
Plantilla 404 Not Found. Se usa cuando WordPress no puede encontrar una publicación o página que coincida con la consulta.
Estos archivos tienen un significado especial con respecto a WordPress porque se utilizan como reemplazo del index.php, cuando están disponibles, de acuerdo con la jerarquía de plantillas.
WordPress también nos permite crear diferentes plantillas de página dentro de su tema de WordPress para diferentes tipos de páginas. Para crear una plantilla de página, simplemente copiamos el código de nuestra page.php y cambiamos el nombre del archivo.
Por ejemplo, si queremos construir una página donde poner un formulario de contacto, podremos crear un archivo en la raíz de nuestro template, al que llamaremos page-form-contacto.php. Luego, agregaremos este código en la parte superior:
Así identificaremos el archivo de plantilla; esto es bastante beneficioso para la construcción de nuestros templates.
Requisitos de cabecera, título y descripción de un template
El archivo principal de un template es el archivo style.css. En este archivo se debe incluir un comentario de encabezado que le diga a WordPress cómo se llamará el tema que estamos construyendo, y que proporcione información sobre el mismo.
Como mínimo, el comentario de encabezado debe contener el nombre del tema que vamos a construir:
Además de esto, debe haber un archivo index.php.
Vamos a crear una estructura básica de un template. Para ello, vamos a nuestro wampserver y entramos en nuestro proyecto _pruebas, donde veremos la carpeta o directorio wp-content y, dentro, la carpeta o directorio themes.
_pruebas/wp-content/themes/
Aquí, crearemos una carpeta que llamaremos «pruebas». Dentro de esta carpeta, se construirá nuestro template básico. Vamos a crear un archivo style. css y un archivo index.php.
Para ello, vamos a abrir nuestro editor de código Visual Studio Code y vamos a arrastrar la carpeta o directorio pruebas que hemos creado al área de trabajo de nuestro editor de código, que se encuentra a la izquierda, como podemos ver en la imagen de más abajo.
Ahora añadiremos los dos archivos style.css e index.php. Para ello, hacemos clic derecho sobre la carpeta que acabamos de añadir al área de trabajo de nuestro editor Visual Studio Code y clicamos en nuevo archivo para añadir los archivos style.css e index.php en la carpeta. Ahora se vería algo así:
Después, en nuestro editor, seleccionamos el archivo style.css. Basta con escribir en la cabecera de este archivo la línea de la que hablamos anteriormente. Puede verlo en la imagen siguiente.
Después, guardamos los cambios y entramos en el panel de administración de nuestro WordPress. Entramos en apariencia > temas, donde veremos nuestro template Pruebas.
Ahora, si nos ponemos sobre nuestro template y hacemos clic en activar, veremos que nuestro sitio web está todo en blanco.
Para volver al panel de administración, solo debes poner en la url del navegador /admin:
http://localhost/_pruebas/admin
También puedes hacer clic en la flecha izquierda del navegador para volver atrás.
A partir de aquí, empezamos a construir nuestros templates. Veamos ahora todos los campos que podemos poner en la cabecera de nuestro archivo style.css.
Campos de encabezado disponibles
Theme Name:
Aquí pondremos el nombre que llevará nuestro template.
Theme URI:
Aquí pondremos la ruta de nuestro sitio web, donde tenemos información acerca del template que estamos construyendo.
Author:
Se escribe el nombre del autor o de nuestro sitio web como referencia del autor creador del template.
Author URI:
Aquí escribiremos la url del sitio web del author del template.
Description:
Aquí haremos un breve resumen o descripción de nuestro template.
Version:
Aquí pondremos la versión de nuestro template. Por lo general, al ser el primer tema, siempre será la versión 1.0
License:
Por lo general es GNU v2, pero ahora debería actualizarse a la versión 3.0 GNU, que pertenece al movimiento de software libre creado por terceros. El sitio web de GNU es: https://www.gnu.org/home.es.html.
License URI:
Normalmente, aquí incluimos la url de la GNU, que estipula un contrato de licencia de software libre para nuestro software. En este caso, el template que desarrollaremos está en la Versión 3.0 de este tipo de licencia. En este campo debemos poner esta url: https://www.gnu.org/licenses/gpl-3.0.html.
Tags:
Aquí pondremos las etiquetas que mejor describan el tipo de plantilla que estamos construyendo o sus funcionalidades.
Text Domain:
Aquí pondremos el mismo nombre de nuestra plantilla. Es la palabra clave que utilizaremos para realizar las traducciones de nuestros templates.
Domain Path:
Aquí pondremos la ubicación de la carpeta o directorio donde alojaremos el archivo de traducción de nuestro template.
Ahora, si volvemos a nuestro panel de administración, en Apariencia > temas veremos que, al hacer clic sobre nuestro tema pruebas, aparecerá toda la información de la cabecera:
Jerarquía de plantilla de WordPress
La jerarquía de archivos para crear una plantilla en WordPress está compuesta por tres directorios que, a su vez, alojan otros subdirectorios donde se alojan otros archivos. En la raíz principal de nuestro template, además de tener estos directorios, tenemos otros archivos que son los que vimos en el tema anterior «Estructura de archivos para el desarrollo de un template».
En la siguiente imagen tenemos la estructura de los archivos:
Ahora, veamos la jerarquía de estas carpetas o directorios:
En la carpeta assets tenemos los archivos css, js e imágenes que utilizaremos para nuestro template. También podemos incluir librerías que podemos utilizar en el desarrollo de nuestro tema, como por ejemplo bootstrap 5.0, sweet alert, fontawesome, etc.
En la carpeta inc encontramos archivos de configuración de bloques y personalización del tema.
En la carpeta template-parts encontramos archivos html que complementan otras páginas. Esta es una buena práctica, y se utiliza para modularizar el código y encontrar más fácilmente algún error o algo en específico, ya sea un formulario o un menú de navegación.
Ahora que tenemos una idea de cómo es la jerarquía de archivos de WordPress, podemos construir nuestra propia jerarquía.
Nuestra propia jerarquía
Para nuestra propia jerarquía podemos construir una arquitectura MVC, que nos permitirá tener un mejor control sobre el desarrollo de nuestros temas.
Como podemos ver en la imagen anterior, tenemos un directorio admin, helpers, includes, lang y public.
Estos directorios, a su vez, tienen otros subdirectorios:
admin:
Aquí podemos construir páginas para el menú de nuestro panel de administración, que servirán como complementos para nuestro tema. Dentro, tendremos las carpetas css, img, js y partials (en esta última carpeta crearemos partes de código para nuestras páginas).
Por último, tenemos el archivo principal class-atr-admin.php, donde gestionaremos todas las funciones y ganchos para interactuar con WordPress.
helpers:
Dentro de la carpeta helpers alojaremos las librerías que utilizaremos para el desarrollo de nuestro tema.
includes:
Dentro de la carpeta includes crearemos distintos archivos: un archivo class-atr-build-menupage.php para gestionar la creación de menús y submenús de nuestro template, un archivo class-atr-cargador.php donde crearemos un motor de carga para los ganchos de nuestras funciones, un archivo class-atr-i18n.php para gestionar la carga de nuestros archivos de traducción, y un archivo class-atr-master.php desde donde arrancaremos la funcionalidad de los archivos mencionados anteriormente y de futuros archivos que vayamos creando a medida que desarrollemos un tema más complejo.
lang:
Aquí subiremos los archivos de traducción de nuestro template.
public:
Aquí encontraremos las carpetas css, img, js, partials y sass. En la carpeta sass crearemos un archivo .scss para escribir código css anidado con el lenguaje sass.
Después de compilar el código escrito en el lenguaje sass, se generará la carpeta .sass-cache. Por último, tenemos el archivo class-atr-public.php, en el que escribiremos todas las funciones que interactuarán con WordPress en la parte del frontend de nuestro tema.
Crear la estructura de archivos
Crear los directorios y archivos principales
Para empezar, nos dirigiremos a la raíz de nuestra carpeta pruebas, que creamos al inicio. Dentro, tenemos los archivos syle.css e index.php.
Ahora vamos a crear los archivos:
•header.php
•footer.php
•front-page.php
•functions.php
Podemos crear estos archivos directamente desde nuestro editor de código Visual Studio. Situamos el cursor sobre el directorio Pruebas que tenemos en el área de trabajo y hacemos clic derecho; nos aparecerán las opciones Nuevo archivo o Nueva carpeta. Elegimos Nuevo archivo y creamos los archivos que hemos mencionado.
Una vez creados los archivos, nuestro directorio Pruebas debería ser así:
Ahora creamos los directorios:
•admin
•helpers
•includes
•lang
•public
Para crear los directorios, debemos seguir los mismos pasos que realizamos para crear los archivos pero, en vez de seleccionar Nuevo archivo, seleccionaremos Nueva carpeta.
Una vez creadas las carpetas o directorios, la raíz de nuestro tema Pruebas debería de quedar así:
El área de trabajo que visualizamos en nuestro editor Visual Studio Code debería verse tal y como se muestra en la siguiente imagen:
La carpeta admin
Recordemos que desde esta carpeta controlaremos todo lo que construyamos en nuestro panel de administración.
Aquí crearemos un archivo:
•class-atr-admin.php
Ahora crearemos las carpetas:
•css
•img
•js
•partials
Después de crear el archivo y los directorios o carpetas, debería verse así:
Ahora, dentro del directorio css crearemos un archivo atr-admin.css y, dentro del directorio js, crearemos un archivo atr-admin.js.
Todas las funciones que programemos en el panel de administración de nuestra plantilla se gestionarán en esta parte. Para ello, vamos a crear una clase ATR_Admin dentro de nuestro archivo class-atr-admin.php.
Abrimos el archivo y creamos la clase. Dentro, crearemos dos propiedades:
•private $theme_name
•private $version
Debería verse así:
Dentro de la clase, y justo debajo de las propiedades, crearemos el método constructor:
Este método que acabamos de crear recibe dos parámetros; el primero es el nombre del tema y el segundo es la versión.
Continuaremos construyendo la estructura de nuestro tema e iremos viendo cómo se van conectando las clases y los archivos que estamos construyendo.
La carpeta helpers
En esta carpeta pondremos las librerías que utilizaremos para el desarrollo de nuestros templates.
De momento añadiremos tres librerías:
•bootstrap
•fontawesome
•sweetalert
Vamos con la primera. Para ello, vamos al sitio web oficial de Bootstrap y hacemos clic en Download; nos aparecerá un listado en el que veremos todas las versiones. Buscamos la última versión estable, en este caso la versión 5.0.
En la parte derecha, veremos una lista de la documentación. Seleccionamos Download, y aparece una página y varias opciones de descarga. Seleccionaremos la primera:
Se descargará un archivo .zip. Lo descomprimimos y esa carpeta la arrastramos al directorio Helpers de nuestro tema. Una vez allí, le cambiamos el nombre a bootstrap-5.0.
Dentro, tiene que haber dos carpetas: css y js. En caso de haber algún problema con la librería, puede descargar el zip en la url siguiente:
https://newtheme.eu/archivos/libs/bootstrap/bootstrap-5.0.zip
Ahora vamos a descargar la librería de fontawesome. Para ello, vamos al sitio web:
https://fontawesome.com/download
Veremos dos opciones de descarga:
Elegimos la opción Free for web. Se empezará a descargar un zip, que puede encontrar también en el siguiente enlace:
https://newtheme.eu/archivos/libs/fontawesome/fontawesome-5.15.4.zip
Una vez descargado el .zip, lo descomprimimos, y solo dejamos las carpetas:
•css
•js
•webfonts
El resto lo eliminamos, y este archivo lo arrastramos a nuestra carpeta helpers. Posteriormente, le cambiamos el nombre a la carpeta de la librería fontawesome, que pasará a llamarse fontawesome-5.15.4.
Ahora vamos a descargar la librería sweetalert2. Para ello, vamos al sitio web:
https://sweetalert.js.org/guides/#installation
En la parte donde pone cdn, veremos un único enlace a un archivo .js, que es el archivo que necesitaremos. Dejo la url de la carpeta con el archivo .js comprimido en zip en la siguiente url:
https://newtheme.eu/archivos/libs/sweetalert/sweetalert2.zip
Aquí solo tenemos que descomprimir el zip y arrastrarlo a la carpeta helpers.
Con esto ya tendríamos los archivos principales de nuestra librería.
La carpeta public
En esta carpeta gestionaremos los archivos y funciones que afectan al frontend de nuestro tema.
Dentro, crearemos el archivo class-atr-public.php y las carpetas o directorios:
•css
•img
•js
•partials
•sass
El directorio Public quedaría así:
Dentro de nuestra carpeta css crearemos un archivo atr-public.css, dentro de la carpeta js crearemos el archivo atr-public.js y, por último, dentro de la carpeta sass crearemos el archivo atr-public.scss.
Veamos cómo se ve en nuestro editor de código:
Ahora vamos a crear una clase para gestionar las funciones y ganchos que utilizaremos para interactuar con WordPress. Para ello, abrimos nuestro archivo class-atr-public.php y escribimos lo siguiente:
Observemos que hemos hecho lo mismo que en el archivo class-atr-admin. php. La diferencia es que esta clase la hemos llamado ATR_Public y que gestiona el frontend de nuestro tema.
La carpeta includes
En esta carpeta crearemos los archivos que nos permitirán conectar con la carpeta public y con la carpeta admin. También gestionaremos la creación de menús y la carga de funciones con los distintos ganchos de WordPress. De este modo tendremos mejor organizado el código.
Dentro de la carpeta includes crearemos los siguientes archivos:
•class-atr-build-menupage.php
•class-atr-cargador.php
•class-atr-i18n.php
•class-atr-master.php
Una vez creados estos archivos, nuestro directorio Includes debería verse así:
Ahora abriremos el archivo class-atr-master.php y crearemos una clase, que será la clase principal donde vincularemos todos los archivos. Escribiremos lo siguiente:
Podemos ver que hemos creado unas propiedades. Debajo de estas propiedades crearemos el método constructor y un método donde añadiremos la ruta de los archivos que queremos conectar con la clase master. A este método lo llamaremos «cargar_dependencias()».
Ahora nuestro archivo master debería estar así:
IMPORTANTE:
Una vez tenemos toda la estructura, crearemos las partes más básicas de un tema, que son el header y el footer. A medida que vayamos creando estas partes, iremos conectando los directorios admin y public con los archivos que tenemos en la carpeta includes.
Crear el header y el footer de nuestro template
Funciones de encolamiento y ganchos de acción
Para empezar a construir nuestro header y nuestra barra de navegación, empezaremos por entender algunos principios básicos en el desarrollo de temas de WordPress. Por ejemplo, que el archivo functions.php, que va en la raíz de nuestro tema, es el archivo principal donde se deben escribir todas las funciones y ganchos que conectan con WordPress.
Ahora que sabemos esto, debemos tener cuenta que para crear un sitio web responsive es indispensable utilizar una librería como Bootstrap, y que para personalizar este sitio web debemos utilizar archivos js y css.
Para ello, en WordPress utilizamos la función wp_enqueue_style():
Esta funcion registra el estilo si se proporciona la fuente (NO se sobrescribe) y se pone en cola.
Parámetros:
$handle
( cadena ) (Obligatorio) Nombre de la hoja de estilo. Debería ser único.
$src
( cadena ) (Opcional) URL completa de la hoja de estilo, o ruta de la hoja de estilo relativa al directorio raíz de WordPress.
$deps
( cadena [] ) (Opcional) Una matriz de hoja de estilo registrada maneja esta hoja de estilo.
$ver
( cadena | bool | nulo ) (Opcional) Cadena que especifica el número de versión de la hoja de estilo, si tiene una, que se agrega a la URL como una cadena de consulta para fines de prevención de caché.
$media
( cadena ) (Opcional) El medio para el que se ha definido esta hoja de estilo. Acepta tipos de medios como ‘all’, ‘print’ y ‘screen’.
Valor predeterminado: ‘all’
Ahora que sabemos lo que hace esta función y qué es cada uno de sus parámetros, vamos a nuestro archivo functions.php, que se encuentra en la raíz de nuestro template pruebas. Abrimos etiqueta de php y escribimos lo siguiente:
Observamos varias cosas. La primera es que hemos creado una función a la que hemos llamado enqueue_styles(), y dentro hemos encolado nuestro primer archivo, que es el css de la parte pública de nuestro tema.
En la función wp_enqueue_style() hemos puesto, en el primer parámetro, el nombre que queremos darle a este archivo y, en el segundo parámetro, la ruta donde se encuentra el archivo. Para obtener la ruta de la raíz de nuestro tema, hemos utilizado la función de WordPress get_template_directory_uri(). A partir de esta ruta, trazamos la ruta del archivo que queremos encolar.
Los siguientes parámetros son un array vacío; la versión de nuestro archivo css, que viene a ser la misma que la de nuestro tema; y el último parámetro, donde indicamos que esta hoja de estilos se adapte a todos los medios.
Para más información sobre los encolamientos de archivo, podemos ver la documentación que nos aporta WordPress en la siguiente url:
https://developer.wordpress.org/themes/basics/including-css-javascript/
Observemos también que, debajo de la función, tenemos nuestro primer gancho de acción.
Las acciones son los ganchos que el núcleo de WordPress lanza en puntos específicos durante la ejecución, o cuando ocurren eventos específicos. Los complementos pueden especificar que una o más de sus funciones PHP se ejecuten en estos puntos, utilizando la API de acción.
Resumiendo, podemos decir que los ganchos de acción nos permiten añadir código a ciertos puntos donde se ejecutan acciones.
La función add_action() recibe cuatro parámetros:
Parámetros
$hook
( cadena ) (Obligatorio) El nombre de la acción a la que agregar la devolución de llamada.
$callback
( invocable ) (Obligatorio) La devolución de llamada que se ejecutará cuando se llame a la acción.
$priority
( int ) (Opcional) Se utiliza para especificar el orden en el que se ejecutan las funciones asociadas con una acción en particular. Los números más bajos se corresponden con la ejecución anterior, y las funciones con la misma prioridad se ejecutan en el orden en que se agregaron a la acción.
Valor predeterminado: 10.
$acepted_args
( int ) (Opcional) El número de argumentos que acepta la función.
Valor predeterminado: 1.
Añadir archivos css de Bootstrap y normalizar el encolamiento
Ahora vamos a volver a nuestro archivo functions.php y vamos a encolar el archivo css principal de Bootstrap que tenemos en nuestra carpeta helpers. Al terminar de encolar este archivo, el código debería quedar así:
Por último, añadiremos un archivo más al encolamiento: el normalize.css. Este archivo es un fichero css que apenas ocupa 8 KB, cuyo principal objetivo es mantener los estilos similares en los navegadores, ya que cada uno agrega sus propios estilos por defecto (por ejemplo, se suelen agregar distintos paddings, margins, font-sizes, etc.).
Para descargarlo, iremos al sitio web:
https://necolas.github.io/normalize.css/
Una vez descargado, lo pondremos dentro de la carpeta css de nuestro directorio public y lo encolaremos justo antes de nuestro archivo atr-public.css:
Encolar los archivos js
Ahora que ya tenemos encolados los archivos css, vamos a proceder a encolar nuestros archivos js. Para ello, vamos a utilizar la función de WordPress wp_enqueue_script():
Esta función es muy parecida a la funcion que utilizamos para encolar los archivos js.
Parámetros
$handle
( cadena ) (Obligatorio) Nombre del script. Debería ser único.
$src
( cadena ) (Opcional) URL completa del script, o ruta del script relativa al directorio raíz de WordPress.
$deps
( cadena [] ) (Opcional) Una matriz de secuencias de comandos registradas maneja esta secuencia de comandos.
$ver
