El complemento WordPress Boilerplate 101

El complemento WordPress Boilerplate 101

Desde la creación de los complementos de WordPress hace unos 10 años, no ha cambiado mucho en la forma en que los escribimos. Hay un archivo de complemento principal con un encabezado seguido de Big Wild West. Aparte de usar ganchos, no existe un método estandarizado para crear complementos.

Esto no es necesariamente un problema. Hay muchos complementos simples que no necesitan un marco de gobierno y algunas personas pueden escribir un código de procedimiento perfectamente consistente. Dicho esto, la calidad del código en los complementos generalmente no es la mejor, un marco o metodología ayudaría mucho a mejorarlo.

En este artículo, analizaré una posible solución: Plantilla estándar del complemento de WordPress. Está destinado a ser un punto de partida para el desarrollo de complementos, una forma orientada a objetos de crear un complemento estandarizado. Como está codificado con principios de programación orientada a objetos, está destinado principalmente a codificadores intermedios, pero puede usarlo fácilmente incluso como principiante si sabe lo que va y dónde. Al final de este artículo, debe saber qué es qué y cómo puede comenzar, independientemente de su experiencia de codificación.

Estructura general de archivos

La clave maestra está diseñada para usarse como un repositorio de Github, por lo que el directorio principal contiene archivos que se encuentran comúnmente en los repositorios de Github. los README.md el archivo es un general Leeme y aparece en la página principal de su repositorio como descripción. los CHANGELOG.md es guardar los cambios entre la versión y .gitignore file se usa para definir archivos que git debe ignorar al usar archivos.

El archivo principal aquí plugin-name es donde se almacena el complemento. Su estructura sigue el repositorio de WordPress, y puede “archivar” esta carpeta en el repositorio de complementos de SVN. Por defecto, contiene el assets carpeta, que almacena imágenes y capturas de pantalla de su complemento, y la trunk carpeta, que contiene el código del complemento.

La carpeta del tronco es lo que contiene el complemento, puede pegar esta carpeta en una instalación de WordPress y activar su complemento. Examinaremos el contenido de esta carpeta en detalle un poco más adelante. Antes de hacer eso, configuremos nuestra tienda.

nuevo complemento

Prepara todo

Tener todas esas carpetas y todas las excelentes cosas de SVN / Git en un solo lugar está bien, pero ¿cómo puedes usar eso? No puede extraer toda la carpeta directamente a la carpeta de complementos, simplemente no funcionará. Extraer solo el directorio troncal es un problema y no tendrá acceso a archivos fuera de este directorio.

Déjame mostrarte mi forma favorita de configurar las cosas. Tengo una carpeta en mi computadora con la siguiente estructura:

  • github
    • Autores destacados
    • Imágenes fáciles de resaltar
    • Twitter-User-Timelines
  • html
    • wp-admin
    • contenido de wp
    • wp-entender
    • otros archivos de wordpress
  • wordpress
    • autores principales
    • imagenes simples
    • twitter-user-timelines

los html La carpeta es donde está instalado WordPress. los github La carpeta contiene todos mis complementos de WordPress de Github. los wordpress La carpeta contiene los mismos complementos extraídos a través de SVN del repositorio de WordPress.

Crea un enlace simbólico

El primer paso que hago es crear una versión básica de WordPress Plugin Boilerplate en Github. Luego reviso esto en mi carpeta github. Luego creo un enlace simbólico entre la carpeta del tronco en el wp-content/plugins directorio de mi instalación de WordPress.

Los enlaces simbólicos son una referencia a un archivo o carpeta que se resuelve en su destino como es de esperar. El resultado final es que si vincula simbólicamente un complemento desde cualquier lugar de su sistema a su directorio de WordPress, funcionará bien. Esto le brinda las siguientes ventajas:

  • Puede almacenar complementos en otro lugar.
  • Puede crear un enlace simbólico a una carpeta desde un repositorio más grande.
  • Puede vincular simbólicamente el mismo complemento en varias instalaciones.

Crear un enlace simbólico es fácil desde la terminal o desde el símbolo del sistema en Windows. Sugiero abrir uno y navegar al directorio de complementos de su instalación de WordPress. Luego escriba el siguiente comando:

# For OSX or Linux
ln -s /absolute/path/to/github/My-Plugin-Name/my-plugin-name/trunk my-plugin-name

# For Windows
mklink /j C:absolutepathtogithubMy-Plugin-Name my-plugin-name

Esto crea un vínculo entre la primera ruta y la segunda. La primera ruta es la ruta absoluta al directorio troncal en su repositorio de Github. El segundo es solo el nombre de la carpeta a la que desea vincularlo cuando ya se encuentra en el directorio de complementos de su instalación de WordPress.

Cuando termine, debería ver aparecer su nuevo complemento, como en la imagen de arriba. Tendremos que personalizar las cosas, pero ahora tenemos nuestro complemento que se ejecuta desde el repositorio de Github, lo que hace que el desarrollo sea un terreno Más fácil.

Rebautizar

Hay muchas carpetas y archivos en el directorio troncal, ¡comencemos a renombrarlos! En primer lugar, le recomiendo que nombre su repositorio usando guiones y mayúsculas, algo como esto: My-Awesome-Plugin. La carpeta principal debería llamarse “my-awesome-plugin”. Recomiendo usar esta convención en todo el complemento.

Cambiar el nombre de los archivos es fácil en OSX. Abra todas las carpetas y seleccione todos los archivos que tienen la cadena plugin-name en ellos. Haga clic derecho para cambiar el nombre de los 14 archivos y cambiar el nombre del lote.

Rebautizar

Será un poco más difícil en Windows, eche un vistazo a esto HowToGeek artículo para obtener más información, o vaya uno por uno.

Términos como “nombre del complemento” y otras variaciones también se encuentran distribuidos por todo el contenido del archivo. Puedes usar Precioso, Atom.io u otros editores de texto capaces de realizar reemplazos masivos en varios archivos. Aquí hay una lista de lo que necesita reemplazar (asegúrese de realizar reemplazos de búsqueda sensibles a mayúsculas y minúsculas).

  • plugin_name debería convertirse en my_awesome_plugin
  • Plugin_Name debería convertirse en My_Awesome_Plugin
  • nombre del complemento debería convertirse en mi-impresionante-complemento

Una vez que haya terminado, asegúrese de completar el comentario del encabezado del archivo principal (my-awesome-plugin.php) para personalizarlo según sus necesidades.

Indice

Hay mucho contenido en WordPress Plugin Boilerplate. La idea es establecer pautas estrictas sobre dónde colocar las cosas. Hay un lugar específico para agregar sus ganchos, por ejemplo, un lugar estándar para agregar funciones de interfaz, etc. Echemos un vistazo a las partes principales del marco.

Tenga en cuenta que me referiré a los archivos como se les cambió el nombre, por ejemplo: includes/class-my-awesome-plugin.php. Si ha cambiado el nombre de su complemento por otro, deberá recordar que el my-awesome-plugin parte del nombre del archivo será diferente para usted.

Activación, desactivación y desinstalación

Cualquier código que desee ejecutar cuando el complemento está activado debe ingresar includes/my-awesome-plugin-name-activator.php. En este archivo, hay una clase llamada My_Awesome_Plugin_Activator en el que hay un activate() método que debe utilizar.

No se preocupe si aún no está familiarizado con los elementos, saber dónde colocarlos será suficiente para comenzar.

El código que necesita ejecutar durante la desactivación debe colocarse en includes/my-awesome-plugin-name-deactivator.php. los activate() método en el My_Awesome_Plugin_Deactivator es lo que necesitará utilizar.

¿Crees que es demasiado complejo? ¡No te culpo! Cuando empiece a utilizar conceptos orientados a objetos, verá la ventaja de esto sobre el código de procedimiento. Al menos, proporciona un lugar muy obvio para colocar su código, lo que en sí mismo es de gran ayuda.

Para la desinstalación, el método recomendado es utilizar uninstall.php eso es lo que hace WordPress Plugin Boilerplate. Su código debe colocarse al final de este archivo.

Agregar ganchos

Los ganchos son sorprendentemente manejados por WordPress Plugin Boilerplate, pero puede parecer un poco difícil al principio. Todos tus ganchos deben colocarse dentro includes/class-my-awesome-plugin.php. Más precisamente, dentro del My_Awesome_Plugin clase, en dos métodos:

  • define_public_hooks() al agregar un gancho utilizado en la parte delantera
  • define_admin_hooks() al agregar un gancho usado en la parte trasera

En lugar de usar add_action() o add_filter() como de costumbre, tendrás que hacer las cosas de forma un poco diferente. Así es como se edita el contenido del artículo, por ejemplo.

$this->loader->add_action( 'the_content', $plugin_public, 'modify_post_content' );

El primer parámetro es el nombre del gancho, el segundo es una referencia al objeto público o administrador. Para los ganchos públicos, esto debería ser $plugin_public, para los ganchos de administración debe ser $plugin_admin. El tercer parámetro es la función enganchada.

Si bien suena más complicado, normaliza completamente la adición de ganchos, dividiéndolos en dos grupos separados en el proceso.

Contenido público y administrativo

WordPress Plugin Boilerplate divide los ganchos en grupos de administración / públicos, pero eso no es todo. Divide todo su código de la misma manera pidiéndole que escriba código público en el public carpeta y código de administrador en el admin carpetas.

Ambas carpetas contienen css, js y partials Registros. Debe colocar los recursos CSS / JS usados ​​en estas carpetas y escribir plantillas y otros elementos HTML reutilizables en la carpeta de parciales. Está bien crear nuevos archivos en la carpeta parcial, de hecho, ¡para eso está!

También debe escribir sus funciones enganchadas en estas carpetas, dentro de la clase en los directorios respectivos. Cuando colgamos el modify_post_content función para the_content arriba, le dijimos a WordPress Plugin Boilerplate dónde buscarlo también. Dado que lo agregamos al lado público, WordPress Plugin Boilerplate espera que se defina en el My_Awesome_Plugin_Public clase que está en la carpeta pública. Simplemente cree esta función en la clase y escriba todo lo demás como de costumbre.

Recursos y dependencias

Si desea utilizar recursos externos, como Activación del complemento TGM, debe agregarlo a la carpeta incluye. TGM es un solo archivo llamado class-tgm-plugin-activation.php que debe incluirse en el class-my-awesome-plugin.php archivo, en el load_dependencies() método:

require_once plugin_dir_path( dirname( __FILE__ ) ) . 'includes/class-tgm-plugin-activation.php';

Visión general

¿Está confundido por todos los nombres de archivos y funciones? No se preocupe, lo resolverá bastante rápido. De hecho, normalmente solo editará tres archivos:

  • includes/class-my-awesome-plugin.php es donde agrega todos sus ganchos y dependencias.
  • public/class-my-awesome-plugin-public.php es donde se agregan todas las funciones públicas.
  • admin/class-my-awesome-plugin-admin.php Aquí es donde van todas las funciones administrativas.

Al principio, usar WordPress Plugin Boilerplate puede parecer un problema, pero al final dará sus frutos. Volverá un año después y sabrá dónde está todo, el desarrollo de su complemento se estandarizará para todos los productos y otros desarrolladores también podrán averiguar qué está sucediendo.

Finalmente, tenga en cuenta que un complemento que proporcione un widget simple puede no necesitar dicho marco. Si bien el uso de WordPress Plugin Boilerplate no ralentizará su complemento, obstruirá la vista si solo necesita unas pocas líneas simples de código.

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. ¡Únete a él ahora es gratis!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba