Insertar javascript en wordpress con shortcode

WordPress ejecutar shortcode onclick

Aquí puede empezar a escribir estilos personalizados. Los estilos escritos en el editor de CSS personalizado tendrán prioridad y anularán los estilos por defecto de los shortcodes. A continuación se dan algunos consejos para escribir código CSS personalizado. Por favor, léalos para facilitar su trabajo.

El inspector es una herramienta para desarrolladores proporcionada con los navegadores web, que permite ver el código fuente de la página. Los inspectores pueden tener un aspecto un poco diferente en los distintos navegadores, pero la función principal se ve y funciona de forma similar.

Cuando se escriben estilos personalizados se recomienda utilizar clases CSS adicionales. La mayoría de los shortcodes de los plugins permiten utilizar clases CSS adicionales. Se puede añadir una clase CSS adicional con la ayuda de un atributo de clase especial. El siguiente shortcode debe ser insertado en el editor de posts:

WordPress añadir script al cuerpo

Sin embargo, si no puedes molestarte en hacer eso por alguna razón, puedes simplemente eliminar el retorno de tu shortcode, y en su lugar utilizar add_action('wp_footer', '...');. Esto es en realidad similar a la forma en que la cola de scripts/estilos registrados sólo cuando un determinado shortcode se utiliza en las páginas.

Puedes envolver todo tu código con él si no necesitas nada en la colocación del shortcode, de lo contrario tendrás que pasar la salida a la función, ya sea nombrando y pasando la función o usando un Closure con use(). Aquí está esta última versión:

Ten en cuenta que si tienes este shortcode en una página más de una vez, obtendrás la salida del script más de una vez. Si ese es el caso, tendrá que incluir una bandera de algún tipo (como una variable global que comienza en 0, se incrementa a 1 después de la primera ejecución, y si es > 0, no se emite la secuencia de comandos) de modo que sólo se emite la primera vez que se ejecuta - o si en lugar de ello se pone en cola el archivo, no sería un problema.

Plugin javascript de WordPress

Un tema hijo es un duplicado de tu tema actual que puedes personalizar sin afectar al código original. Puedes simplemente activar el tema original para revertir cualquier cambio si cometes un error. Esto también le permite actualizar su tema principal sin perder los cambios de código que hizo.

Una acción es una función PHP que se activa en puntos específicos durante la carga de una página. Por ejemplo, el gancho de acción wp_head se activa antes de la etiqueta </head> en el archivo header.php de tu tema. Puedes utilizar este gancho para añadir código o scripts personalizados a tu cabecera.

Añade una nueva carpeta en tu directorio de WordPress para crear un tema hijo. A continuación, crea un archivo style.css que contendrá los estilos de tu tema hijo. A continuación, tendrá que añadir el siguiente código a su archivo style.css:

Ahora que has creado tu tema hijo, puedes activarlo yendo a Apariencia → Editor de archivos de temas desde tu panel de control de WordPress. Navega hasta el archivo functions.php y añade el siguiente código:

Tendrás que cambiar el "1" del código anterior por el ID de la entrada o página. Puede encontrar este número abriendo la entrada desde su panel de control y encontrando la URL en la barra del navegador. El número de identificación estará al lado de "post=":

WordPress gutenberg añadir javascript

Una vez que hagas clic en los botones Instalar ahora y Activar, puedes localizar la configuración del plugin yendo a Herramientas → Código de cabecera y pie de página. En esta pantalla, hay tres casillas para las secciones de cabecera, pie de página y cuerpo:

La principal ventaja de utilizar un plugin es que se trata de una opción apta para principiantes. No tienes que preocuparte de editar los archivos de tu tema. El plugin Head & Footer Code también puede ser útil si buscas una forma sencilla de añadir otros tipos de código y CSS personalizado.

Antes de empezar, recomendamos crear un tema hijo. Este paso ayuda a garantizar que podrás actualizar el tema principal de forma segura. También deberías hacer una copia de seguridad de tu sitio por si algo va mal.

Tenga en cuenta que tendrá que sustituir el 3 en el ejemplo anterior por el número de identificación de la entrada a la que desea añadir el código. Para localizar ese número, navega hasta la entrada desde tu panel de administración y haz clic en Editar. En la URL de la barra del navegador, el número de identificación es el número que aparece junto a "post=":

Este método, que también puedes utilizar para el pie de página, utiliza el gancho de acción para añadir scripts en línea a tu sitio. Mientras que la función wp_enqueue_script pone en cola los scripts personalizados, el método wp_head imprime los scripts en su plantilla de cabecera (y pie de página, si utiliza el gancho wp_footer).