¿Le gustaría añadir fragmentos personalizados de JavaScript o PHP a su sitio? Este tutorial le dará múltiples opciones sobre cómo añadir estos fragmentos a su sitio con instrucciones paso a paso para cada forma opcional que elija para añadir su fragmento. Añadir fragmentos de código personalizados a su sitio con PHP o JavaScript puede ampliar la funcionalidad de su sitio para sus necesidades específicas. Ya sea para ampliar la funcionalidad de su tema de WordPress o ampliar 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 seleccionado el método de implementación, puedes empezar a explorar la documentación para desarrolladores y elegir los fragmentos que te gustaría añadir a tu sitio.
Para echar un vistazo a la gran cantidad de fragmentos disponibles, explore nuestra documentación para desarrolladores.
Por favor, vea nuestro video tutorial para una visión más práctica de cómo lograr la adición de PHP personalizado o Javascript a su sitio.
Opciones de aplicación
Hay una serie de enfoques disponibles para la adición de PHP o Javascript para personalizar sus necesidades específicas, no sólo para WPForms pero para cualquier código personalizado que desea agregar.
Uso del plugin WPCode (recomendado)
Usando el plugin WPCode es super rápido y fácil añadir snippets a tu sitio.
Una de las muchas razones por las que recomendamos encarecidamente el uso de este complemento para añadir fragmentos personalizados a su sitio es que incorpora una comprobación antes de guardar el fragmento. Si se omite un punto y coma o se añade un corchete de más, el fragmento no se guardará. Esto evita que cualquier problema que pueda experimentar, como un error de JavaScript o incluso errores fatales de PHP, puedan ocurrir en su sitio debido a un fragmento copiado y pegado incorrecto. Y sí, incluso con la versión gratuita, recibirá esta auditoría adicional antes de que su fragmento se active.
Nota: Para obtener más información sobre este complemento, consulte el sitio web, que incluye documentación específica.
Una vez instalado el plugin, vaya al menú Fragmentos de código en el menú de la izquierda de su panel de control de WordPress y seleccione + Añadir fragmento.
A continuación, simplemente haga clic en Añadir su código personalizado (Nuevo fragmento) y, a continuación, haga clic en el botón azul Utilizar fragmento para crear un nuevo fragmento.
Cuando aparezca la pantalla de su nuevo fragmento, asígnele un nombre que tenga sentido para usted, de modo que usted y los administradores de su sitio entiendan su propósito. En el menú desplegable Tipo de código, seleccione PHP.
Nota: Todos los fragmentos de WPForms que se encuentran en nuestra documentación para desarrolladores se agregarán como fragmentos 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 WPForms en la página, el fragmento no cargue 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.
In the Code Preview section, add your snippet just under the <?php. Here is an example to use for the purpose of this documentation.
/**
* 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. Sólo para este fragmento en particular, seleccionaremos Auto-Insertar para el Método de Inserción y Sólo Frontend para la Ubicación.
Una vez que haya añadido el fragmento, haga clic en Guardar fragmento. Esto guardará el fragmento, pero no lo activará automáticamente. Una vez guardado, observará que el estado del fragmento es Inactivo por defecto. Simplemente cambie el interruptor de Inactivo a Activo y haga clic en Actualizar para establecer el fragmento como Activo.
Creación de un plugin específico del sitio
Nota: El uso de este método en particular sólo se recomienda si usted se siente cómodo con la edición de archivos PHP y subir directamente a su servidor oa través de su programa favorito de FTP.
Si usted 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 para almacenar estos fragmentos.
Si desea más información sobre cómo crear un plugin específico para un sitio, consulte este tutorial.
Para crear un plugin, tendrás que seguir estos pasos.
- 1. Utilizando su editor de texto favorito, cree un nuevo archivo. A continuación, añada las siguientes líneas al principio 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. Comprimir o comprimir el archivo.
- 4. Accede al administrador de WordPress y, en Plugins, haz 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 desde el Editor" Plugins.
Nota: WordPress nunca recomienda realizar 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: El uso de este método en particular sólo se recomienda si usted se siente cómodo con la edición de archivos PHP y subir directamente a su servidor oa través de su programa favorito de FTP.
Crear un tema hijo es (de nuevo) más para usuarios avanzados. Esta es una solución alternativa para sus archivos de 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 elaborado un excelente artículo sobre cómo crear un tema hijo. Este tutorial incluye incluso un vídeo para que puedas seguirlo.
Nota: Nunca recomendamos editar directamente los archivos del tema. Si el autor del tema lanzara una actualización del mismo, se perderían todas y cada una de las ediciones que hubieras realizado. El uso de un tema hijo reducirá esta posibilidad de mantener tu tema actualizado sin perder ninguna personalización que puedas hacer por el camino.
Para este ejemplo, vamos a crear un tema hijo a partir del tema de WordPress Twenty Twenty. Para ello, siga los pasos que se indican a continuación.
- 1. Crea una nueva carpeta en tu escritorio llamada twentytwenty-child
- 2. Crear un documento de texto y 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 en la carpeta twentytwenty-child y llámelo style.css.
- 4. Dentro de esta misma carpeta, crea un nuevo documento y nómbralo funciones.php. Lo único que tendrá que ser este archivo es la etiqueta open PHP:
<?php.
- 5. Comprimir o comprimir la carpeta twentytwenty-child.
- 6. Inicia sesión en el administrador de WordPress y, en Apariencias " Temas, haz clic en Añadir nuevo para cargar el archivo twentytwenty-child.zip que acabas de crear. Cuando se te solicite, activa también este tema.
- 7. Ahora verás en tu admin de WordPress que has activado el tema Twenty Twenty Child.
Una vez completados estos pasos, verás que tienes un tema hijo de Twenty Twenty en funcionamiento y un archivo functions.php en blanco al que añadir fragmentos, así como una hoja de estilos en blanco a la que puedes añadir tu propio 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á al archivo functions.php del tema hijo y personalizará los formularios basándose en los fragmentos que añada.
Y eso es sólo algunas maneras diferentes que usted puede agregar fácilmente PHP personalizado o JavaScript a su sitio.
Notas
Cuando añades cualquier tipo de código personalizado a tu sitio, es importante preservar tu código de eventos inesperados. Así que, independientemente del enfoque que elijas, es una buena idea hacer siempre una copia de seguridad de tu sitio. De ese modo, tendrás acceso a versiones anteriores de los archivos de código en caso necesario.
PREGUNTAS FRECUENTES
P: ¿Cómo me ayuda esto a añadir código personalizado a WPForms?
R: Este tutorial no es específicamente para fragmentos de código WPForms sino para cualquier fragmento de código. Simplemente encuentre la opción de arriba que sea más fácil para usted para agregar cualquier fragmento de código, incluyendo los fragmentos de código WPForms mencionados en la sección Tutoriales y fragmentos.