• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal
  • Saltar al pie de página

Diseñador web WordPress Freelance

Diseño web, WordPress y Marketing Online

  • Inicio
  • Portfolio
  • Blog
  • Contacto

Wordpress · 18 febrero, 2016

Insertar JavaScript en WordPress

En la entrada de hoy vamos a ver cómo insertar JavaScript en WordPress.

Hace unos días, un cliente me comentó una necesidad específica que tenía: necesitaba insertar pequeños scripts de JavaScript en determinadas entradas y/o páginas.

Por defecto, si copias y pegas el código en la pestaña «Texto» de la entrada/página, el código Javascript no se ejecuta, así que vamos a ver cómo insertar javscript en entradas y/o páginas de WordPress.

Volviendo al caso de mi cliente, necesitaba insertar entre otras cosas, una calculadora de hipotecas, copiaba y pegaba el código, le salía la calculadora, pero al darle al botón «calcular» no hacía nada.

Bien, vamos a ver cómo hacer que funcione.

1. Instalar el plugin Code Embed.

Code Embed

Instalamos y activamos el plugin Code Embed. Podemos dejar su configuración tal cual. Simplemente nos fijamos que por defecto viene con la keyword «CODE».

2. Activar los campos personalizados.

Entramos en la entrada o página donde queramos insertar el código javascript y lo primero que tenemos que hacer es activar los campos personalizados.

Para ello desplegamos la opción «Opciones de pantalla«, en la parte superior derecha de la pantalla y activamos la casilla «Campos personalizados«.

Activar campos personalizados en WordPress

3. Insertar el código JavaScript

Creamos un nuevo campo personalizado, y nos pide un nombre y un valor.

En nombre, le voy a poner, por ejemplo, CODEcalculadora. Lo importante es que empiece por «CODE«, que es como viene la configuración por defecto del plugin.

En el campo valor pegamos el código que queramos que se ejecute. Puede estar embebido dentro del HTML, no hay problema.

Insertar código javascript en WordPress

4. Insertar el shortcode

Ya tenemos el código pegado, así que ahora lo único que tenemos que hacer es insertar el nombre del campo personalizado entre símbolos de % , que es como viene la configuración por defecto de Code Embed.

En éste caso hay que poner: %CODEcalculadora%

Shortcode

Y ya está, ahora la calculadora funciona perfectamente.

Calculadora

Como véis, es un método muy sencillo que os puede sacar de un apuro en alguna ocasión.

¿Necesitas más ayuda?

Si quieres seguir aprendiendo o necesitas mi ayuda, puedes:

  • Contactar para ver cómo puedo ayudarte.
  • Suscribirte para no perderte ninguna de mis publicaciones.
  • Si quieres comentar, adelante, te responderé encantado.

Muchas gracias por leerme 😉

 

Comparte si crees que le puede servir de ayuda alguien.

Publicado en: Wordpress

Diego Fresno

Diego Fresno López

Diseñador web freelance especializado en WordPress y Genesis.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

diegofresno.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Diego Fresno López como responsable de esta web.
La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud.

  • Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Raiola (proveedor de hosting de diegofresno.com) dentro de la UE. Ver política de privacidad de Raiola.
  • Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@diegofresno.com así como el derecho a presentar una reclamación ante una autoridad de control.
    Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://diegofresno.com, así como consultar mi política de privacidad.

Barra lateral principal

Últimas Entradas

Filtrar spam en Analytics

Cómo filtrar el spam de Analytics

Crear custom post types

Crear custom post types en WordPress

Pasar WordPress a SSL

Añadir áreas de widget personalizadas en WordPress

Añadir un nuevo área de widgets personalizado en WordPress

Importar y exportar widgets en WordPress

Importar y exportar widgets en WordPress

Suscríbete al blog

Footer

diegofresno.com Diseño web y Marketing Online Av. Argentina, 132. Oficina 239 33213 Gijón Asturias

  • Inicio
  • Portfolio
  • Blog
  • Contacto
  • Facebook
  • LinkedIn
  • Aviso Legal
  • Políticas de privacidad
Google ârtner Diego Fresno
DMCA.com Protection Status