How to Add Custom PHP or JavaScript for WPForms

Ver Markdown

¿Te gustaría añadir fragmentos personalizados de JavaScript o PHP a tu sitio? Este tutorial te ofrecerá múltiples opciones sobre cómo añadir estos fragmentos a tu sitio con instrucciones paso a paso para cada forma opcional que elijas. Añadir fragmentos de código personalizados a tu sitio con PHP o JavaScript puede ampliar la funcionalidad de tu sitio para tus necesidades específicas. Ya sea para ampliar la funcionalidad de tu tema de WordPress o la funcionalidad de cualquier plugin.

Con esta útil guía, podrás elegir fácilmente la forma en que deseas añadir los fragmentos a tu sitio. Una vez que hayas seleccionado tu método de implementación, podrás empezar a explorar la documentación para desarrolladores para elegir qué fragmentos te gustaría empezar a añadir a tu sitio.

Para echar un vistazo a la gran cantidad de fragmentos disponibles, explora nuestra documentación para desarrolladores.

Consulta nuestro videotutorial para una visión más práctica de cómo añadir PHP o Javascript personalizados a tu sitio.

Opciones de Implementación

Existen varios enfoques disponibles para añadir PHP o Javascript y personalizar tus necesidades específicas, no solo para WPForms sino para cualquier código personalizado que desees añadir.

Usando el plugin WPCode (recomendado)

Usar el plugin WPCode es súper rápido y fácil para añadir fragmentos a tu sitio.

Una de las muchas razones por las que recomendamos encarecidamente usar este plugin para añadir fragmentos personalizados a tu sitio es que tiene una comprobación integrada antes de guardar tu fragmento. Si falta un punto y coma o se añade un corchete extra, el fragmento no se guardará. Esto evita que puedan ocurrir problemas como errores de JavaScript o incluso errores fatales de PHP en tu sitio debido a un fragmento copiado y pegado incorrectamente. Y sí, incluso con la versión gratuita, recibirás esta auditoría adicional antes de que tu fragmento se active.

Nota: Para saber más sobre este plugin, consulta el sitio para obtener más información, incluida la documentación dedicada.

Una vez instalado el plugin, navega al menú Fragmentos de código desde el menú lateral izquierdo de tu panel de WordPress y selecciona + Añadir fragmento.

A continuación, simplemente haz clic en Añadir tu código personalizado (Nuevo fragmento), y luego haz clic en el botón azul Usar fragmento para crear un nuevo fragmento.

desde el menú de WPCode, haz clic en + Agregar fragmento

Cuando aparezca la pantalla de tu nuevo fragmento, dale un nombre que tenga sentido para ti, de modo que tú y los administradores de tu sitio entendáis su propósito. En el menú desplegable Tipo de código, selecciona PHP.

Nota: Todos los fragmentos de WPForms que se encuentran en nuestra documentación para desarrolladores se añadirían como un fragmento PHP, incluso los fragmentos que usan JavaScript, con la excepción de fragmentos CSS específicos. Esto es para asegurar que si no hay un formulario de WPForms en la página, el fragmento no cargaría el script. Esto ayuda a reducir la necesidad de cargar scripts que no se aplican a todas las páginas.

Para el propósito de este tutorial, vamos a añadir el siguiente fragmento.

En la sección Vista previa del código, agregue su fragmento justo debajo de <?php. Aquí tiene un ejemplo para usar con el propósito de esta documentación.

/**
 * Trigger submit from checkbox click
 *
 * @link https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/
 */
function wpf_dev_automatic_submit_form() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
        var event = jQuery.Event("submit");
        jQuery("input:checkbox").change(
            function()
            {
                // when any checkbox is checked, trigger this function
                if( jQuery(this).is(":checked") )
                {
                    // only run this function for the form ID 3046
                    jQuery("#wpforms-form-3046").submit();
                }
            }
        );
    });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_submit_form', 30);

A continuación, verá la sección Inserción. Solo para este fragmento en particular, seleccionaremos Inserción automática para el Método de inserción y Solo frontend para la Ubicación.

Nota: La configuración de Ubicación depende de lo que necesite hacer su código. Elija Solo frontend si su código solo cambia la apariencia o el funcionamiento de los formularios en las páginas públicas de su sitio web.

Si su código necesita funcionar en todas partes, como para la validación o el procesamiento de formularios, elija Ejecutar en todas partes. Por ejemplo, los ganchos como wpforms_process_validate necesitan Ejecutar en todas partes para funcionar correctamente.

Una vez que hayas agregado tu fragmento, haz clic en Guardar fragmento. Esto guardará el fragmento, pero no lo activará automáticamente. Una vez que hayas guardado inicialmente, notarás que el estado del fragmento se establece en Inactivo por defecto. Simplemente cambia el interruptor de Inactivo a Activo y haz clic en Actualizar para establecer el fragmento como Activo.

WPCode te ofrece una forma muy sencilla y fácil de agregar fragmentos a tu sitio

Creación de un plugin específico del sitio

Nota: Solo se recomienda usar este método en particular si se siente cómodo editando archivos PHP y cargando directamente en su servidor o a través de su programa FTP favorito.

Si es un usuario avanzado y desea mantener todos sus scripts personalizados en un solo archivo en su sitio, puede crear fácilmente su propio plugin único para almacenar estos fragmentos.

Si desea más información sobre cómo crear un plugin específico del sitio, consulte este tutorial.

Para crear un plugin, deberá seguir estos pasos.

1. Usando su editor de texto favorito, cree un archivo nuevo. Luego, agregue las siguientes líneas en la parte superior del archivo:
<?php /* Plugin Name: WPForms Custom Code Snippets Plugin URI: https://wpforms.com/ Description: Plugin for adding custom code snippets Author: WPForms Team Version: 1.0 Author URI: https://wpforms.com/ */
2. Guarde el archivo como wpforms-custom-snippets.php.
3. Comprima o empaquete el archivo.
4. Inicie sesión en su administrador de WordPress y, en Plugins, haga clic en Añadir nuevo. Siga las instrucciones en pantalla para cargar y activar el archivo .zip que acaba de crear.
5. Una vez que haya activado el plugin, ahora puede ver el archivo en Plugins » Editor.

Nota: WordPress nunca recomienda hacer cambios en vivo en ninguno de sus archivos, incluidos los archivos de plugins y temas.

Uso de functions.php dentro de un tema hijo

Nota: Solo se recomienda usar este método en particular si se siente cómodo editando archivos PHP y cargando directamente en su servidor o a través de su programa FTP favorito.

La creación de un tema hijo es (de nuevo) más para usuarios avanzados. Esta es una solución alternativa a los archivos de su tema, su hoja de estilos incluida con el tema, pero también para cualquier función personalizada que desee utilizar, como las descritas en los tutoriales y fragmentos para desarrolladores de WPForms.

Nuestros amigos de WPBeginner han preparado un excelente artículo sobre cómo crear un tema hijo. Este tutorial incluye incluso un video para que lo siga.

Nota: Nunca recomendamos editar directamente los archivos de su tema. Si el autor del tema publicara una actualización, todas las ediciones que hubiera realizado se perderían. Usar un tema hijo reducirá la posibilidad de mantener su tema actualizado sin perder ninguna personalización que realice en el camino.

Para este ejemplo, vamos a crear un tema hijo del tema de WordPress Twenty Twenty. Para ello, siga los pasos a continuación.

1. Cree una nueva carpeta en su escritorio llamada twentytwenty-child
2. Cree un documento de texto con estas líneas:
<?php /* Theme Name: Twenty Twenty Child Theme URI: http://yoursite.com/twenty-twenty-child/ Description: Twenty Twenty Child Theme Author: Your name Author URI: http://yoursite.com Template: twentytwenty Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentychild */
3. Guarde este archivo dentro de su carpeta twentytwenty-child y nómbrelo style.css.
4. Dentro de esta misma carpeta, cree un nuevo documento y nómbrelo functions.php. Lo único que tendrá este archivo será la etiqueta PHP de apertura: <?php.

5. Comprima o comprima en zip la carpeta twentytwenty-child.
6. Inicie sesión en su administrador de WordPress y, en Apariencia » Temas, haga clic en Añadir nuevo para cargar el archivo twentytwenty-child.zip que acaba de crear. Cuando se le solicite, active también este tema.
7. Ahora verá en su administrador de WordPress que ha activado el tema Twenty Twenty Child.

ahora puedes agregar PHP o JavaScript personalizados usando un tema secundario

Una vez completados estos pasos, verá que tiene un tema hijo funcional de Twenty Twenty y un archivo functions.php vacío para añadir fragmentos, así como una hoja de estilos vacía a la que puede añadir su CSS personalizado.

Su tema seguirá funcionando como antes, cargando primero todos los archivos y estilos necesarios. Sin embargo, cualquier fragmento personalizado que utilice de la documentación para desarrolladores de WPForms se añadiría al functions.php del tema hijo y personalizaría los formularios basándose en los fragmentos que añada.

Y esas son solo algunas formas diferentes en las que puede añadir fácilmente PHP o JavaScript personalizados a su sitio.

Notas

Al añadir cualquier tipo de código personalizado a su sitio, es importante proteger su código de eventos inesperados. Por lo tanto, independientemente del enfoque que elija, es una buena idea hacer una copia de seguridad de su sitio. De esa manera, tendrá acceso a versiones anteriores de los archivos de código si es necesario.

Preguntas frecuentes

¿P: ¿Cómo me ayuda esto a añadir código personalizado a WPForms?

A: Este tutorial no es específico para fragmentos de código de WPForms, sino para cualquier fragmento de código. Simplemente encuentra qué opción de arriba te resulta más fácil para agregar cualquier fragmento de código, incluidos los fragmentos de código de WPForms mencionados en la sección Tutoriales y Fragmentos.

Cómo añadir PHP o JavaScript personalizado para WPForms

Resumen de IA