Como colocar este código JavaScript en mi sitio

henrym · 30 Nov 2023

Hola, estyo viendo en codepen.io unos codigos para implementar en mi sitio web y no entiendo como hacer que funcione todo. No se nada de programar (debo hacer un curso) pero ahora necesito utilizar esto:

El HTML se colocarlo en mi post sin problemas. El SCSS creo que en WordPress iria en el template verdad? Por ultimo el codigo java enteindo que debo crear un archivo que se llame como yo quiera, calculator.js y subirlo a mi sitio para indicarle al HTML que lo lea de mi servidor? Correcto? Si es asi alguien me puede ayudar?

Gracias

henrym · 30 Nov 2023

Ignorar el post ya lo resolvi. Mi ultima duda. El SCSS va en CSS Adicional de mi plantilla Wordpress?

Puko · 30 Nov 2023

henrym dijo:
El SCSS va en CSS Adicional de mi plantilla Wordpress?

Pues si toma el diseño, pues ahi va, sino pues no
o puedes ponerlo en un archivo .css
o todo en un archivo .html y lo pones como iframe

AdonisC · 30 Nov 2023

Comp

henrym dijo:
Ignorar el post ya lo resolvi. Mi ultima duda. El SCSS va en CSS Adicional de mi plantilla Wordpress?

Tienes que compilarlo primero (abajo sale un botón llamado (View compiled), ya q SCSS es un preprocesador y se necesita compilar para mostrar el CSS original.

Copias y lo pegas en el css adicional, o en un nuevo, o existente)

henrym · 30 Nov 2023

Súper ahí, pegue el CSS adicional en mi plantilla y va perfecto, no afecto otras cosas del sitio. Ahora mi duda es si al cargarlo en la plantilla realentece todo el sitio o solo se carga donde coloque la calculadora?

AdonisC · 30 Nov 2023

henrym dijo:
Súper ahí, pegue el CSS adicional en mi plantilla y va perfecto, no afecto otras cosas del sitio. Ahora mi duda es si al cargarlo en la plantilla realentece todo el sitio o solo se carga donde coloque la calculadora?

No es un código largo así q no te va afectar en nada. Si quieres minificalo y lo pegas. Solo reducirá unos pocos kb.

Si lo colocastes en el styles.css de la plantilla del tema. Se cargará en cada post, page, de wordpress.

henrym · 30 Nov 2023

Solo lo pegué aquí:

¿Cómo podría hacer para que solo se cargue en donde está la calculadora?

AdonisC · 30 Nov 2023

henrym dijo:
Solo lo pegué aquí:

¿Cómo podría hacer para que solo se cargue en donde está la calculadora?

Si es un post, añade lo siguiente al archivo functions.php, creando adicionalmente en esa misma raiz, un archivo .CSS llamado "calculator.css"

Insertar CODE, HTML o PHP:

function load_calculator_style() {
    if (is_single('calculadora')) { // cambia calculadora por el slug del post donde se encuentra calculadora
        wp_enqueue_style('calculator_style', get_template_directory_uri() . 'calculator.css');
    }
}
add_action('wp_enqueue_scripts', 'load_calculator_style');

p.d: recuerda cambiar "calculadora" por el slug del post donde cargas la calculadora.

henrym · 30 Nov 2023

Ok vere si lo hago que me da cosa tocar el functions.php

AdonisC · 30 Nov 2023

henrym dijo:
Ok vere si lo hago que me da cosa tocar el functions.php

Si igual no lo quieres crear, no importa, no va a afectar en el rendimiento teniendo ese pequeño codigo CSS en el archivo adicional CSS de wordpress.