Cómo crear un complemento de WordPress personalizado

¿Está buscando formas de crear un complemento de WordPress personalizado? En este tutorial, le mostraremos cómo crear un complemento de WP desde cero que le permitirá eliminar algunos elementos de las páginas de productos de WooCommerce.

Antes de pasar por el proceso, veamos por qué es posible que primero necesite crear un complemento de WordPress personalizado.

¿Por qué crear un complemento personalizado en WordPress?

Todos sabemos que hay una gran cantidad de complementos gratuitos y de pago disponibles en WordPress. Todos ellos están desarrollados con varias características para aumentar la funcionalidad de su sitio web. Sin embargo, algunas de las características del complemento pueden ser innecesarias para su sitio web y pueden actuar como un peso adicional para su marco.

A veces, todo lo que necesitas es una herramienta con una característica muy específica. Pero algunos complementos están tan sobrecargados con funciones adicionales que no podrá usarlos en todo su potencial. En estos casos, puede crear su propio complemento de WordPress personalizado.

Por ejemplo, supongamos que desea eliminar elementos en la página de su producto o en cualquier otra página de WooCommerce utilizando un complemento dedicado. La mayoría de los complementos le proporcionarán algunas características adicionales además de eliminar los elementos. Esto aumentará el tamaño del complemento, así como el almacenamiento del sitio web, lo que también puede obstaculizar el rendimiento de su sitio web.

Por supuesto, también puede usar secuencias de comandos CSS o ganchos de WooCommerce para eliminar los elementos. Pero pueden traer algunos problemas a su sitio web si actualiza su tema de WordPress sin las ejecuciones adecuadas. Pero si crea un complemento personalizado, es menos probable que las modificaciones obstaculicen su sitio web bajo ninguna circunstancia.

¿Cómo crear un complemento personalizado de WordPress?

Todo el proceso para crear un complemento de WordPress personalizado es bastante más fácil de lo que piensas. Pero comencemos con algunas cosas que debemos tener en cuenta antes de crear un complemento personalizado.

1. Preparándose para empezar

Hay una serie de requisitos que debe cumplir para crear un complemento de WordPress personalizado. Ellos son:

• Instalación de WordPress en un servidor localhost

Si bien puede desarrollar un complemento en un servidor en vivo, es una muy mala práctica hacerlo mientras el sitio web está en línea. Si realiza cambios innecesarios en el sitio web, es posible que experimente algunos problemas graves. Entonces, para evitarlos, deberá configurar un entorno de prueba localhost para crear un complemento de WordPress personalizado si aún no tiene uno.

• Usar un editor de código

WordPress viene con un editor de complementos incorporado para agregar y modificar códigos para sus complementos. También puede trabajar con él para crear un WordPress personalizado. Pero sugerimos usar un editor de código (IDE) como Sublime Text, Visual Studio Code o cualquier editor similar.

Tienen múltiples herramientas y características necesarias para crear un complemento personalizado. Por lo tanto, es mucho más cómodo trabajar con un IDE ya que serán mucho mejores que usar el editor de código de WP.

• Algunos conocimientos básicos de desarrollo de WP.

Para crear un complemento de WordPress personalizado, usaremos ganchos de WP, funciones de PHP y definiremos nuestras propias funciones. Por lo que te recomendamos que continúes con este tutorial solo si tienes conocimientos básicos de desarrollo en WordPress. De lo contrario, podría ser muy difícil para usted desarrollar un complemento personalizado por su cuenta.

Estos son algunos de los requisitos y recursos básicos que necesita para crear un complemento personalizado. Asegúrese de que se cumplan todos estos requisitos antes de continuar con el tutorial.

2. Cree el archivo principal para el complemento personalizado de WordPress

El primer paso para crear un complemento de WordPress personalizado es crear un archivo principal del complemento. De hecho, solo se requiere un único archivo principal para crear un complemento. Debe tener un bloque comentado con el nombre del plugin.

Este es el único valor requerido por WP para que pueda reconocer que se trata de un complemento. Sin embargo, para seguir las buenas prácticas y evitar problemas, necesitamos ingresar otra información aquí.

Entonces, comencemos a trabajar en ello y creemos este archivo.

Abra su carpeta pública localhost y diríjase a la instalación de WP en la que va a trabajar. Luego, navegue a la carpeta " wp-content/plugins " y verá todos los complementos instalados allí

Simplemente vamos a agregar nuestro nuevo archivo de complemento personalizado aquí.

Cree una nueva carpeta en la carpeta wp-content/plugins de su instalación de WP. Para una fácil comprensión, hemos llamado al complemento QuadLayers_custom_products en este tutorial.

Dentro de esta carpeta, se ubicarán todos los archivos de su complemento. Entonces, creemos nuestro archivo principal directamente en la carpeta que acabamos de crear. Debe estar en un formato de archivo .php

Este archivo principal, al que llamamos QuadLayers_cp.php , donde todo comienza. Es la puerta de entrada del plugin. Puede usar el editor de código para crear el archivo, pero asegúrese de que tenga la extensión PHP y que esté formateado correctamente como un archivo PHP.

Copia y pega este código en el archivo:

 <?php

/**
 * @enlace https://quadlayers.com/
 * @desde 0.0.1
 * @package Productos personalizados de QuadLayers
 * Nombre del complemento: Productos personalizados de QuadLayers  
 * URI del complemento: https://quadlayers.com/
 * Descripción: personalice la página única del producto eliminando elementos
 * Versión: 0.0.1
 * Autor: QuadLayers
 * Dominio de texto: qlcp
 */
 
if(!definido('ABSPATH')){die('-1');}

inicio de función(){ 		
        si(es_admin()==verdadero){
        requiere plugin_dir_path( __FILE__ ).'includes/Backend/QuadLayers-backend-init.php';
        }
        requiere plugin_dir_path( __FILE__ ).'includes/Frontend/QuadLayers-frontend-init.php';
 }  
función ejecutar(){
    add_action('inicio','inicio');
}
ejecutarlo();

Como puede ver, simplemente llamamos a dos archivos más desde aquí: QuadLayers-frontend-init.php y QuadLayers-backend-init.php . Obviamente, uno funcionará en el frontend y el otro en el backend respectivamente. Puede deducirlo claramente con sus nombres de archivo.

Fuera de ellos, podemos asegurarnos de que el archivo de backend funcionará solo en el backend porque estamos usando un condicional con la función is_admin() . Esto significa que se activará solo cuando el administrador esté en el panel de administración de WP.

En este momento, tendrá algunos errores en su sitio web porque los archivos frontend y backend aún no existen. Así que sigamos adelante y creémoslos.

Cree una nueva carpeta dentro del directorio de complementos llamada includes . Luego, agregue dos carpetas más dentro: backend y frontend .

Para deshacerse de los errores de ruta incorrecta, cree dos archivos vacíos, cada uno dentro de cada una de estas carpetas: QuadLayers-backend-init.php dentro de la carpeta backend y QuadLayers-frontend-init.php en la carpeta frontend.

Entonces, esta sería nuestra estructura de archivo de complemento final:

 QuadLayers_productos_personalizados
    __QuadLayers_cp.php
    __incluye
       __Backend
          __QuadLayers-backend-init.php
       __Frontal
          __QuadLayers-frontend-init.php

3. Opciones de back-end

Una vez que haya agregado el archivo principal, podemos comenzar a agregar las opciones de back-end del complemento. Aquí, vamos a crear una pestaña de menú de complementos en el panel de administración de WP. Esto permitirá a los usuarios elegir algunas opciones para ocultar o mostrar los elementos en la interfaz.

Usaremos la API de configuración proporcionada por WP para esta demostración. No se preocupe si aún no entiende esto porque no es tan difícil de aprender y hay mucha documentación al respecto.

Si desea obtener más información sobre esto, aquí hay una guía completa de la API de configuración de WP

Por ahora, simplemente copie y pegue el siguiente código en el QuadLayers-backend-init.php

 <?php 
add_action('admin_init', 'QuadLayers_display_options'); 
add_action('admin_menu', 'QuadLAyers_cp_AdminMenu'); 
función QuadLAyers_cp_AdminMenu(){ 
    add_menu_page( __('QuadLayers Custom Products', 'qlcp'), __('QuadLayers Custom Products', 'qlcp'), 'manage_options', 'qlcp', 'QuadLayersOptionsPage' ); 
} 
función QuadLayersOptionsPage() { 
    ?> <formulario acción="opciones.php" método="post"> <?php 
    settings_fields('plugin_QL_Page'); 
    do_settings_sections('plugin_QL_Page'); 
    botón de enviar(); 
    </formulario><?php
}

función QuadLayers_display_options(){
        
    register_setting('plugin_QL_Page', 'qlcp_options', 'callbackValidation');

    add_settings_section(
        'QuadLayers_pluginPage_section',
        __('Opciones de back-end de cuatro capas', 'qlcp'),
        'QuadLayersSettingsSectionCallback',
        'plugin_QL_Page'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_1',
        esc_attr__('Título', 'qlcp'),
       'QuadLayersCheckboxRender_1',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_2',
        esc_attr__('Cantidad', 'qlcp'),
       'QuadLayersCheckboxRender_2',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_3',
        esc_attr__('SKU', 'qlcp'),
       'QuadLayersCheckboxRender_3',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_4',
        esc_attr__('Meta', 'qlcp'),
       'QuadLayersCheckboxRender_4',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_5',
        esc_attr__('Pestaña Descripción', 'qlcp'),
       'QuadLayersCheckboxRender_5',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_6',
        esc_attr__('Precio', 'qlcp'),
       'QuadLayersCheckboxRender_6',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
}

función QuadLayersSettingsSectionCallback(){
    echo wp_kses_post('Una página de configuración para el complemento personalizado QuadLAyers');
}

función QuadLayersCheckboxRender_1(){
    $opciones = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_1]" type="checkbox" /> 
    comprobado <?php } ?>valor = "1">    
}

función QuadLayersCheckboxRender_2(){
    $opciones = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_2]" type="checkbox" /> 
    comprobado <?php } ?>valor = "1">    
}

función QuadLayersCheckboxRender_3(){
    $opciones = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_3]" type="checkbox" /> 
    comprobado <?php } ?>valor = "1">    
}

función QuadLayersCheckboxRender_4(){
    $opciones = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_4]" type="checkbox" /> 
    comprobado <?php } ?>valor = "1">    
}

función QuadLayersCheckboxRender_5(){
    $opciones = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_5]" type="checkbox" /> 
    comprobado <?php } ?>valor = "1">    
}

función QuadLayersCheckboxRender_6(){
    $opciones = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_6]" type="checkbox" /> 
    comprobado <?php } ?>valor = "1">    
}

Ahora, vuelva a cargar la pantalla del backend o active su complemento y verá una nueva pestaña en la barra lateral del menú del tablero.

La API de configuración de WP almacenará una matriz con todas estas opciones en la tabla de la base de datos wp_options . Puede verificarlo abriendo PHPMyAdmin en su host local y buscándolo en la tabla.

Debido a que se trata de datos recién creados, debe encontrarse al final de la tabla.

Por supuesto, la matriz qlcp_options está vacía en la base de datos de la captura de pantalla anterior. Esto se debe a que todas las casillas de verificación están desmarcadas en este momento. Puede intentar verificar algunos de ellos y volver a PHPMyAdmin para ver cómo la API de configuración de WP almacena los datos.

Ahora que podemos almacenar la matriz de opciones en la base de datos, debemos tomar estas opciones y usarlas en la interfaz. Estas opciones permitirán a los usuarios ocultar o mostrar varios elementos de su sitio web.

4. Opciones de interfaz

Para agregar las opciones de interfaz, simplemente copie y pegue el siguiente código en el QuadLayers-frontend-init.php .

Esto tomará los datos de la base de datos, que fue almacenado por el archivo backend allí en una matriz.

Después de esto, ocultará los elementos específicos de la página del producto, según las opciones que sean verdaderas en la matriz de opciones.

 <?php

$opciones = get_option('qlcp_options');

if(!is_string($opciones)):
    // Título
    if(isset($opciones['QuadLayers_checkbox_field_1'])){       
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    }

    // Cantidad
    if(isset($opciones['QuadLayers_checkbox_field_2'])){        
        add_filter('woocommerce_is_sold_individualmente',
            función ( $retorno, $producto ) {
                devolver verdadero;
            }, 10, 2 
        );
    }

    // SKU
    if(isset($opciones['QuadLayers_checkbox_field_3'])){        
        add_filter('wc_product_sku_enabled', 
            función ($ habilitada) {          
                devolver $habilitado;
            } 
    );
    }
    
    // Meta
    if(isset($opciones['QuadLayers_checkbox_field_4'])){
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
    }
    
    // Pestaña Descripción
    if(isset($opciones['QuadLayers_checkbox_field_5'])){
        add_filter('woocommerce_product_tabs', 
        función ($pestañas) {
            unset( $tabs['descripción'] );
            devolver $pestañas;
            }, 11 
        );         
    }

    // Precio
    if(isset($opciones['QuadLayers_checkbox_field_6'])){
        add_filter('woocommerce_get_price_html', 
        función ($precio){         
            devolver ;
            }
        );        
    }
terminara si;

Estamos encerrando todo el código dentro de un if(is_string($options)) . Por lo tanto, podemos verificar si no hay casillas de verificación marcadas, en cuyo caso el valor de la base de datos será una cadena. Entonces, no necesitamos ejecutar este código en absoluto.

Además, tenga en cuenta que estamos utilizando funciones anónimas. Funciona exactamente igual que con las funciones con nombre. Pero acabamos de crear un código más breve para esta guía para principiantes.

Entonces, si hay algunos valores almacenados en la base de datos, cada una de las funciones de este código eliminará un elemento específico según el índice específico de la matriz de la base de datos que esté presente.

Es importante que usted, como principiante, entienda cómo hemos interactuado con la base de datos. Nuestros dos archivos interactúan con él, pero estos archivos no están conectados de ninguna manera entre ellos. Incluso puede eliminar un archivo y el otro seguirá funcionando porque la base de datos seguirá teniendo los valores necesarios.

Y eso es todo. En este punto, debería poder crear un complemento personalizado de WordPress para seleccionar qué elementos ocultar o mostrar en la página del producto.

back-end

Interfaz

Conclusión

Esta es nuestra guía sobre cómo crear un complemento de WordPress personalizado. Los complementos personalizados son muy útiles si desea tener funciones muy específicas para su sitio web y no desea saturar su sitio con funciones abrumadoras de complementos WP dedicados.

Para resumir, estos son los pasos principales para crear un complemento personalizado:

1. Crear el archivo de complemento principal
2. Agregar opciones de back-end
3. Agregar opciones de interfaz

El archivo del complemento principal debe contener los archivos de backend y frontend para el complemento personalizado. Luego, puede agregar aún más las opciones de backend del complemento seguidas de sus opciones de frontend. Hemos creado un complemento personalizado para ocultar elementos de la página del producto. Pero puede modificar aún más estos archivos para crear el complemento con las características particulares que necesita.

No obstante, si aún desea utilizar un complemento dedicado, también puede hacerlo. Pero en el caso de un complemento pago, deberá instalar el complemento manualmente. Incluso puede usar complementos como WooCommerce Direct Checkout y WooCommerce Checkout Manager para ocultar elementos en otras páginas como la página de pago.

Mientras tanto, aquí hay algunas más de nuestras publicaciones que podrían interesarle:

• Los mejores complementos de pago de WooCommerce
• Cómo crear un enlace de pago directo de WooCommerce
• Los mejores complementos para autocompletar pedidos de WooCommerce

Esperamos que pueda desarrollar un complemento personalizado en WooCommerce sin ningún problema ahora. Por favor, cuéntanos tu experiencia en los comentarios.