Quieres crear un Plugin de WordPress ? Este tutorial te enseñará cómo hacerlo.
Los complementos contribuyen a la popularidad de WordPress porque permiten a los usuarios sin conocimientos de codificación crear sitios web increíbles.
Hay más de 50 complementos en el rdirectorio de WordPress diseñado para varios propósitos. Usted encontrará plugins de WordPress para suscripción al boletín , la seguridad et Comercio electrónico . Solo nómbrelo.
Sin ellos, un sitio web de WordPress es sólo una colección de imágenes estáticas y bloques de texto. Con los complementos, el sistema de gestión de contenidos puede alcanzar un nivel increíble de personalización.
Ya sea que necesite un complemento personalizado para su sitio web o desee crear un Plugin de WordPress y monetizarlo, vamos.
Preguntas frecuentes
¿Los plugins de WordPress ganan dinero?
Sí. EL plugins de WordPress traer dinero Puede vender el complemento en su sitio web o en un mercado de terceros.
CodeCanyon, ThemeForest y mojo mercado son los 3 mejores sitios web para vender complementos.
También puede agregar una versión gratuita de su complemento al repositorio de WordPress y ofrecer una versión premium con características adicionales.
¿Es difícil crear complementos de WordPress?
La creación de un Plugin de WordPress Es relativamente fácil y difícil, dependiendo de las funciones que desee.
Crear un complemento es fácil si ya está familiarizado con los conceptos básicos del desarrollo de WordPress y la programación PHP. Si no lo eres, puede ser muy difícil. Es mejor comenzar con un complemento simple, como se muestra en esta guía.
¿Cuánto ganan los desarrolladores de complementos?
Según Zip Recruiter, la tarifa media por hora de los desarrolladores plugins de WordPress en Estados Unidos cuesta 35 dólares la hora. Esto equivale a aproximadamente $72 por año y $000 por mes.
Si vende su complemento, puede ganar hasta $ 5 por mes, según la cantidad de ventas. Ofrecer servicios de personalización de complementos puede generarle entre $ 000 y $ 20 por hora.
Lo que necesitará para crear un complemento de WordPress
Para crear un complemento, no necesita ser un desarrollador experto de WordPress. Solo necesita algunos conocimientos básicos de codificación para comenzar.
- Conocimientos básicos en programación PHP: Los complementos de WordPress están escritos en PHP, por lo que debe comprender el idioma y su sintaxis antes de comenzar.
- HTML y CSS básicos: HTML y CSS le permiten controlar la visualización y apariencia de sus complementos. Por lo tanto, es crucial comprender sus conceptos básicos para crear un complemento de WordPress.
- Familiaridad con WordPress: es útil familiarizarse con la plataforma WordPress y sus funciones principales, así como con el Codex de WordPress (el manual en línea para el desarrollo de WordPress).
- Un entorno de desarrollo: Para desarrollar y probar su complemento, debe instalar WordPress en su máquina local o en un sitio de desarrollo. Esto le permitirá probar su complemento sin afectar un sitio web en vivo. Le mostraremos cómo hacer esto en la siguiente sección.
- Un editor de texto: Necesitará un editor de texto para escribir el código de su complemento. Hay muchas opciones disponibles, como Stexto sublime, Atom et Visual Studio Code.
Cómo crear un complemento de WordPress en 7 pasos
Paso 1: Comprenda cómo funcionan los complementos de WordPress
Debido a que WordPress está escrito en un lenguaje de programación, cualquier persona con conocimientos de codificación puede acceder y modificar el código de WordPress.
Así es exactamente como funcionan los complementos. Le permiten modificar y ampliar la funcionalidad de WordPress interactuando directamente con su WordPress usando ciertas funciones de PHP.
Crear su complemento de WordPress y agregar código solo hará algo si llama a la función PHP usando un gancho. Los ganchos son los que permiten que su complemento interactúe con WordPress sin tener que editar archivos principales.
Veamos la relación entre corchetes y funciones para comprender los conceptos básicos de los complementos de WordPress.
Funciones de WordPress:
El código de WordPress se basa en funciones que permiten que cualquier código de terceros interactúe con WordPress. Es por eso que encontrará muchas funciones en complementos y temas. Cada función tiene su nombre, seguido de llaves y el código dentro de la llave.
Voici exemple de la ONU:
function sticky_header() {
?>
<script>
// Select the header element
var header = document.querySelector(‘header’);
// Get the offset position of the header
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position
function addSticky() {
if (window.pageYOffset > sticky) {
header.classList.add(“sticky”);
} else {
header.classList.remove(“sticky”);
}
}
// Add the sticky class to the header when you scroll the page
window.onscroll = function() {
addSticky();
};
</script>
<?php
}
add_action( ‘wp_footer’, ‘sticky_header’ );Puede llamar a esta función directamente en su complemento de WordPress escribiendo sticky_header() donde desea que se ejecute el código. Pero es una mala práctica porque puede encontrar problemas. Aquí hay dos razones más por las que no debe llamar funciones directamente en su código.
Primero, la llamada directa solo funciona para funciones básicas, como agregar contenido a un archivo de tema. Además, con este enfoque, tendrá que llamar a las funciones varias veces para usarlas en varios lugares, lo que lleva mucho tiempo y es engorroso en los archivos de código.
Llamar a una función manualmente también puede ser complicado si eres nuevo en la codificación. Al crear complementos, la mejor práctica es adjuntarlos a un gancho. Esto le evitará tener que recuperar la función en varios lugares.
Ganchos de WordPress:
Un gancho es un punto específico en el código de WordPress donde puede realizar sus propias funciones personalizadas. Hay dos tipos de ganchos: ganchos de acción y ganchos de filtro.
Ganchos de acción
Los ganchos de acción le permiten ejecutar funciones personalizadas en un momento específico en el ciclo de ejecución de WordPress. Así es como se ve la sintaxis de un gancho de acción.
add_action('hook_name', 'my_custom_function');Le gancho_nombre es el nombre del gancho de acción que desea utilizar.
Hay varios ganchos de acción en WordPress. Puedes encontrarlos en el cWordPress.
mi_función_personalizada es la función que contiene el código que desea ejecutar. Esta función debe definirse antes que la función add_action.
La sintaxis se verá así para adjuntar la función de encabezado adhesivo anterior a un gancho.
add_action( 'wp_footer', 'sticky_header' );Esta función ejecuta la función sticky_header() cuando se llama al gancho de acción wp_footer. También puede adjuntar la función a un enlace específico reemplazando wp_footer con el nombre del enlace de su elección.
Por ejemplo:
add_action( 'init', 'sticky_header' );Esto ejecutará la función de encabezado fijo cuando se llame a la acción de inicio de WordPress.
Ganchos de filtro
Los ganchos de filtro le permiten modificar los datos antes de que se muestren o se guarden en la base de datos. Aquí hay un ejemplo de un gancho de filtro que cambia el título de una publicación de blog a mayúsculas.
add_filter( ‘the_title’, ‘uppercase_title’ );
function uppercase_title( $title ) {
return strtoupper( $title );
}Esta función acepta un solo argumento, $título, que es el título original de la publicación del blog.
La función luego usa la función strtoupper () para convertir el título a mayúsculas y devuelve el valor modificado.
La diferencia entre ganchos de acción y de filtro
Los ganchos de acción le permiten ejecutar funciones personalizadas en un momento específico en el ciclo de ejecución de WordPress. En el ejemplo anterior, el gancho de acción wp_footer se llama justo antes de la etiqueta.
Los ganchos de filtro, por otro lado, le permiten modificar los datos a medida que pasan a través de la base de código de WordPress.
Como en el ejemplo anterior, el gancho de filtro el título le permite editar el título de una publicación de blog antes de que se muestre en el sitio web.
Paso 2: configurar un entorno de prueba
El segundo paso para crear un complemento de WordPress es configurar un entorno de prueba o desarrollo. El objetivo es evitar experimentar en un sitio real.
La creación de un complemento a veces requiere de ida y vuelta. También puede cometer errores que dañarán su sitio web.
Puede usar su computadora como un servidor local para alojar un sitio de prueba de WordPress donde puede crear y probar su complemento.
Si tu planalojamiento admite la creación de un sitio de prueba, también puede usarlo. Usaremos la primera solución aquí.
Para configurar un entorno de prueba, haremos descargar locales , una herramienta de desarrollo para alojar localmente sitios web de WordPress.
Una vez que se complete la descarga, inicie el software en su computadora y haga clic en + icono en la parte inferior izquierda para crear un nuevo sitio local.
Escoge de Crea un nuevo sitio y haga clic en el botón Continúar.
A continuación, siga las instrucciones en pantalla para agregar el nombre de su sitio, configurar el entorno y crear los detalles de inicio de sesión de WordPress.
Una vez que haya terminado. Haga clic en el botón Agregar sitio. Después de agregar su sitio, seleccione su sitio web en el panel local e inicie su panel de administración de WordPress.
Una vez que se abra la página de inicio de sesión del administrador, use el nombre del usuario y el Contraseña de WordPress que creó anteriormente para acceder a su tablero.
Está hecho. Su entorno de prueba está listo. Comencemos a crear su complemento de WordPress.
Paso 3: crea tu carpeta de complementos
Una vez que su entorno de prueba esté en su lugar, lo primero que debe hacer es crear un archivo de complemento en el directorio de su sitio. De forma predeterminada, WordPress almacena todos los complementos en el directorio wp-content/plugin.
Cada complemento instalado en un sitio de WordPress tendrá una carpeta en este directorio. Para su complemento, deberá crear una carpeta dentro de este directorio y darle un nombre.
Para este tutorial, navegaremos a la carpeta wp-content/plugin en nuestro directorio de sitios locales. Así es cómo.
Nota: El proceso es el mismo si está utilizando un sitio intermedio.
En su tablero local, haga clic en el Ir a la carpeta del sitio . Se le redirigirá al directorio de su sitio local.
seleccionar aplicaciones en las opciones, haga clic en público entonces wp-content. Verá diferentes carpetas en este directorio.
Abre la carpeta Plugins y una nueva subcarpeta con el nombre de tu complemento. Usaremos aquí Cabecera pegajosa ya que es el nombre del plugin que queremos crear.
Paso 4: Cree el archivo PHP principal para su complemento
Después de crear su carpeta de complementos, el siguiente paso es agregar un archivo PHP a esta carpeta. Aquí es donde estarán disponibles los códigos y la funcionalidad de su complemento.
Para este tutorial, solo necesitamos un archivo PHP para un complemento simple que crea un encabezado fijo en WordPress.
Para complementos más complejos con funcionalidad avanzada, puede haber diferentes tipos de archivos en la carpeta del complemento, como CSS y javascript. En nuestro caso, un solo archivo PHP será suficiente.
Para hacer esto, cree un archivo PHP en la carpeta del complemento, como se muestra en la captura de pantalla a continuación.
Una vez que el archivo está listo, es hora de agregar información a su complemento.
Paso 5: Configure la información de su complemento
También conocido como encabezado de archivo de complemento, la información de su complemento es un bloque de comentarios de PHP que incluye detalles sobre su complemento, como el nombre del complemento, la versión, la URL, el nombre del autor y su sitio web, licencia, etc.
Esta es la información que ve en la página del complemento de WordPress después de instalar un complemento.
Puedes encontrar el encabezado del archivo de complemento en el códice de WordPress . Se parece a esto.
Simplemente copie y pegue este código en el archivo PHP de su complemento, luego edite los detalles para que se adapten a su complemento. En nuestro caso, el lector de archivos del complemento de encabezado fijo se verá así.
<?php
/*
Plugin Name: Sticky Header
Plugin URI: https://wordpress.org/plugins/sticky-header/
Description: Make your website header sticks to the top of every page on your website as users scroll.
Author: The Team
Author URI: https://blogpascher.com/sticky-header
Text Domain: Sticky Header
Domain Path: /languages
*/Una vez que guarde este archivo, habrá creado un nuevo complemento y podrá encontrarlo en la lista de complementos ya instalados en su sitio.
Inicie sesión en el panel de control de WordPress de su sitio de prueba y vaya a Plugins>Plugins installés.
Verá el complemento Sticky Header con detalles. Aquí lo tienes.
Ahora puede activar el complemento, pero no hará nada porque aún no le hemos agregado ninguna funcionalidad. Así que hagamos que nuestro complemento haga algo.
Paso 6: agregue código a su complemento
Para hacer esto, agregaremos el código de encabezado fijo que usamos cuando aprendimos las funciones de WordPress y los ganchos anteriores. Así es cómo.
Abra el archivo PHP de su complemento. Debajo de los detalles del encabezado, copie y pegue estos fragmentos de código en el archivo PHP principal de su complemento y guárdelo.
function sticky_header() {
?>
<script>
// Select the header element
var header = document.querySelector(‘header’);
// Get the offset position of the header
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position
function addSticky() {
if (window.pageYOffset > sticky) {
header.classList.add(“sticky”);
} else {
header.classList.remove(“sticky”);
}
}
// Add the sticky class to the header when you scroll the page
window.onscroll = function() {
addSticky();
};
</script>
<?php
}
add_action( ‘wp_footer’, ‘sticky_header’ );Este código hace dos cosas esenciales,
La fonction encabezado_adhesivo se activa cuando el usuario se desplaza por la página y se detiene cuando se detiene el desplazamiento.
En segundo lugar, la acción add_action('wp_footer', 'sticky_header'); usa la dirección…..
Guarda el código y listo. Ha creado con éxito un complemento de WordPress que hace que el encabezado de su sitio web sea fijo cuando los usuarios se desplazan por él.
Paso 7: activa el complemento. En acción.
Regrese a su sitio y active el complemento.
Cuando se desplaza por la versión en vivo del sitio, el encabezado de su sitio permanecerá en la parte superior de la página.
Una vez que haya visto el efecto del nuevo complemento en su sitio de demostración, es hora de probarlo en su sitio real.
Antes de eso, asegúrese de haber probado el complemento en busca de errores y vulnerabilidades. Resolverlos, en su caso. Como precaucion, hacer una copia de seguridad de su sitio de WordPress antes de implementar su nuevo complemento.
Si está satisfecho con el rendimiento del complemento en su sitio, puede cargarlo en el repositorio de complementos de WordPress. Como los propietarios de sitios web lo usan de forma gratuita, recibirá comentarios sobre qué mejorar y cómo hacerlo.
Y si desea ganar dinero con su complemento, puede venderlo en uno de los sitios web que enumeramos anteriormente.
Conclusión
Si ha llegado hasta aquí, estará de acuerdo en que crear un complemento de WordPress es relativamente simple. Siguiendo las instrucciones de esta guía, podrá crear un complemento básico de WordPress. Puede experimentar con tantas funciones como desee y mejorar la funcionalidad de su complemento.
La creación de complementos complejos sigue el mismo método. Más funcionalidad significa más funciones en su archivo de complemento.
¿Alguna vez has intentado crear un complemento de WordPress? Hablemos de su experiencia en la sección de comentarios a continuación.
