Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Agregando JavaScript a nuestro tema

15/34
Recursos

Aportes 69

Preguntas 32

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

En caso de que a alguien mas le pase, si no puedes modificar el color del header intenta cambiando la version del wp_enqueue_style
de tal forma que quede de la siguiente manera.

wp_enqueue_style( 'estilos', get_stylesheet_uri(), array('bootstrap', 'montserrat'), '1.1', 'all');```

chicos les comparto el codigo para la nueva version de Bootstrap sin JQuery

<?php 


function init_template(){
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');
}

add_action('after_setup_theme','init_template');

function assets(){
    wp_register_style('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css','','5.0.0','all');
    wp_register_style('montserrat','https://fonts.googleapis.com/css2?family=Montserrat&display=swap','','1.0','all');

    wp_enqueue_style('estilos',get_stylesheet_uri(), array('bootstrap','montserrat'),'1.0','all'); 
    

    wp_enqueue_script('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js','','5.0.0',true);

    //para traer mis propios scrips
    wp_enqueue_script('custom',get_template_directory_uri().'/assets/js/custom.js','','1.0',true);
    
}

add_action('wp_enqueue_scripts','assets');

Para los que quieran probar con Boostrap 5, lo tengo configurado de la siguiente manera:

function assets(){
    wp_register_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '5.0.0-beta1', 'all' );
    wp_register_style('montserrat', 'https://fonts.googleapis.com/css2?family=Montserrat&display=swap','','1.0','all');

    wp_enqueue_style( 'styles', get_stylesheet_uri(), array('bootstrap', 'montserrat'), '1.0', 'all' );

    wp_enqueue_script( 'bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('jquery'), '5.0.0-beta1', true );
}

add_action( 'wp_enqueue_scripts', 'assets' );

Espero les sirva.

Bien bueno el curso, se supone que solo vería la introducción pero no he parado de seguirlo. No se para de aprender nuevas formas. Buen ritmo profe… se agradece.

Estuve como 2 días dandole vueltas y hasta volvi a hacer todo desde cero porque no me estaba agarrando el tema y me aparecia asi:

intente con un par de cosas que mencionaron aqui, que era revisar si el footer y el header tenian sus correspondientes funciones y probe con el modo debug, desafortunadamente no me sirvio y segui picandole, resulta que era una tonteria jajajaja, el tema no estaba activado, si les pasa el mismo problema prueben activando el tema aqui:

Para quienes vienen del futuro como yo en este curso, y no se desanimen al no poder usar la versión de bootstrap 5 aquí les dejo mi solución.

<?php 

function init_template(){

    add_theme_support('post-thumbnails');
    add_theme_support( 'title-tag');


}


function assets(){
    wp_register_style('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '5.0.0','all');
    wp_register_style('montserrat', 'https://fonts.googleapis.com/css?family=Montserrat&display=swap','','1.0', 'all');
    wp_enqueue_style('estilos', get_stylesheet_uri(), array('bootstrap','montserrat'),'1.0', 'all');
   
    wp_enqueue_script('boostraps', 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js', '','5.0.0', true);

}

add_action('wp_enqueue_scripts','assets');```

Para los que hacen el curso en 2021, bootstrap ya no usa jquery y lo solucionamos con esta linea. [solucionado por otros compañeros]

wp_enqueue_script('bootstrap','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js','','5.0.2',true)

Me paso que no cargaba los cambios en el navegador, si es que les llega a pasar, borren la cache desde las configuraciones de Chrome ya que, en mi caso, probé con ctrl + r y seguía igual hasta que lo borre manualmente.

Esto se esta poniendo muy bueno, me encanta.

Agregar a archivo functions.php:

wp_register_script('popper','https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js','','1.16.0', true);
    wp_enqueue_script('boostraps', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery','popper'),'4.4.1', true);

    wp_enqueue_script('custom', get_template_directory_uri().'/assets/js/custom.js', '', '1.0', true);

Crear en la carpeta assets>js el archivo custom.js

console.log('Hola WordPress');

Agregar una imagen en la carpeta img

Ir al header.php y agregar:

<header>
    <div class="container">
        <div class="row">
            <div class="col-4">
                 <img src="<?php echo get_template_directory_uri()?>/assets/img/logo.png" alt="logo">
            </div>
        </div>
    </div>
</header>

Para los que sufren con la cache en el inspeccionador>red puede activar esta opcion de Desactivar caché, asi cada vez que refrescan la pagina se carga todo de cero.

los archivos de bootstrap en el inspector no me aparecen como .js sino como .scss, es lo mismo? Tampoco me aparece la carpeta js/src

get_template_directory_uri() => va a ser clave para traer nuestros scripts.
Me muero por crear animaciones en javascript hehehe

Para darle un padding al logo y se muestre mejor espaciado agregue class=‘pt-3 pb-2’ que significa pt: padding-top y pb: padding-bottom

Pequeño update: la nueva ubicacion para la nueva version de bootstrap 5.0.0 es dentro de cdn.jsdelivr,net/npm/… ahi encontraran tanto a popper como a bootstrap (:

Este curso me ha tocado bajarle la velocidad a 0.5X, para poder seguir el ritmo, parece que el profesor tenía algo de afán en terminarlo.

Hasta ahora todo bien, a pesar de algunos errores de sintaxis pero he logrado avanzar. Se ve en un principio un tanto complejo, sin embargo esa sensación se desvanece al practicarlo.

Gracias por la clase. Todo clarísimo.

https://gwst.eu

Justo tenia esta duda ¿Cuándo usar enqueue y cuándo register? Con anterioridad tome un curso de Wordpress y para cargar todos los scripts y estilos el instructor siempre uso wp_enqueue_script o style nunca register. Ahora se para que es cada función 😁

Tengo una duda con respecto al Hooks que se debe agregar en la función add_action();

add_action( $hook, $functionName );

en donde los puedo obtener, estuve buscando en la documentación de wordpress pero no las encontré, si alguien me puede ayudar por favor.

es necesario poner siempre la versión del js? incluso cuando es un script propio?

Hola en el título de la clase hay un typo dice “Agragando” en vez de “Agregando”

Hola, quisiera saber porque en los wp_enqueue_script en el ultimo argumento de cargarlo en header o footer, porque siempre escogemos cargarlo en el footer (true). Esto es por un orden para cargar los archivos? o a que se debe?

yo tuve muchos prolemas yaque soy del futuro an actualizado muchas cosas, hasta el momento voy bien, el mayor consejo es revisar el codigo leer los aportes de otras personas te ayuda con la logica de algun error parecido al tuyo, síganle echando ganas

yo sugiero tomar el curso de bootstrap para mayor claridad, la verdad me fue muy útil.

Resumen del capitulo en Notion
https://n9.cl/22bl0

A los que no les funcione el popper.js del bootstrap, aqui les dejo el enlace de la página oficial: https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.js

Si no se actualiza el color del header, trata de recargar sin cache o tambien puedes decirela a tu archivo qeu ha cambiado la version de tu hoja de estilos: en la carpeta de functions.php:

   wp_enqueue_style('estilos',get_stylesheet_uri(), array('bootstrap','montserrat'),'1.1','all');    

aporte super importante, mil gracias por compartir tus conocimientos

Para que descarguen el logo desde terminal:

curl https://static.platzi.com/media/tmp/class-files/github/platzigift/platzigift-master/assets/img/logo.png -o assets/img/logo.png

que buena clase! ❤️

el orden como carga Wordpress las dependencias(librerías) es de acuerdo al orden de los register o en el orden como se pongan dentro del enqueue?

Asi va quedando mi proyecto

tengo un inconveniente con el logo que coloco, agregué un logo pero tenia mala proporsion entonces cree un logo ya con las medidas exactas y ahora agrego la imagen y no se me cambia en la pagina como tal, que puedo hacer en ese caso? les agradecedia un monton la ayuda

Para los que anden de “intrépidos” con otro proyecto, las medidas para el logo son:
Dimensiones: 200x80
Resolución: 72x72

Tengo un error 500 pero se que es del theme porque he probado a poner el twentytwenty y si que va pero no consigo localizar el error. Adjunto mi código de functions por si sirviera de algo, gracias de antemano.


<?php
function init_template() {

    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'title-tag');
}

add_action( 'after_setup_theme', 'init_template' );




add_action('after_setup_theme', 'init_template');




function assets(){

    wp_register_style('bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css','','4.4.1', 'all');
    wp_register_style('montserrat', 'https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap', '','1.0','all');

    wp_enqueue_style( 'estilos', get_stylesheet_uri(), array('bootstrap','montserrat'),'1.0', 'all');

    wp_register_script( 'popper', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', '', '1.16.0', true);
    wp_enqueue_scripts( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery', 'popper'),'4.4.1', true);

    wp_enqueue_scripts('custom', get_template_directory_uri().'/assets/js/custom.js', '', '1.0', true);

}

add_action('wp_enqueue_scripts','assets');


?>```

get_template_directory_uri es lo mismo que escribir “./” ?

el primer parámetros de add_action, es un string cuyo nombre es random?, o es un nombre propio de wordpress??

No lo veo tal como el de Cristian

![](

Hola, no me carga la página, ya hice lo de vaciar el cache pero aún así no me funciona

Tengo un Internal Server Error 500 que no puedo solucionar ni cambiando el: WP_MEMORY_LIMIT ni con el htaccess. Alguien sabe algún otro método o cómo se puede solucionar?

excelente!

me quede sin memoria RAM 😦

Hola
Muchachos ya tengo la plantilla de BeTheme pero al momento de subir unos de los temas me sale este error.

hola buenos días chicos estoy intentando en la pagina al inspeccionar encontrar la carpeta de bootstrap pero no me sale, ya compare y tengo todo igual incluso intente borrando la cache del navegador pero aun así no me aparece

buenas, tengoeste problema :
Error establishing a database connection
al parecer no se conecta con la base de datos

Si tienen problemas con XAMPP en mac con la memory y cache pueden usar https://localwp.com ademas que se usara en el curso de wordpress profesional

Hola profe, muchas gracias y excelente curso! Tengo una pregunta con respecto al estilo propio: custom.js, por que sólo se usa el enqueue en vez del register?

ME SALE ESTE ERROR, COMO PODRIA SOLUCIONARLO GRACIAS
<br />
<b>Fatal error</b>: Uncaught Error: Call to undefined function get_header() in C:\xampp\htdocs\pasteblock\wp-content\themes\pasteblock\index.php:1
Stack trace:
#0 {main}
thrown in <b>C:\xampp\htdocs\pasteblock\wp-content\themes\pasteblock\index.php</b> on line <b>1</b><br />

Hola a todos, es importante poner atención en el nombre de las funciones. Me pasó que había hecho el cambio pero no me funcionaba. Lo que me ayudó es inspeccionar el código y afortunadamente imprime los errores:

<img src="<br />

<b>Fatal error</b>: Uncaught Error: Call to undefined function get_template_uri() in C:\xampp\htdocs

Cómo pueden ver, estaba llamando a la función equivocada.

En conclusión, si tienen un error, pueden verificarlo viendo el código fuente de la página.

Hasta ahora el código funciona bien. Sino funciona revisa las lineas y compara con los ejemplo. Yo estoy usando la ultima version de bootstrap 5.0.0 y carga correcto. Sobre esta clase, todo ok. Solo tengo un mensaje en la consola de advertencia:

JQMIGRATE: Migrate is installed, version 3.3.2
(index):1 Refused to execute script from

Salvo ese mensaje todo ok. Estoy revisando el motivo del mensaje si alguien lo sabes, agradeceré sus comentarios.

En caso de que a alguien mas le pase, si no puedes modificar el color del header intenta cambiando la version del wp_enqueue_style
de tal forma que quede de la siguiente manera.

wp_enqueue_style( ‘estilos’, get_stylesheet_uri(), array(‘bootstrap’, ‘montserrat’), ‘1.1’, ‘all’);`

¿ Por qué no hemos usado do_action hasta el momento ?

como le hago si yo quiero utilizar en lugar de bootstrap un archivo que ya maquete anteriormente el cual me fue dado con adobe xd ya lo pase a html y css pero ahora no se como integrarlo y crear mi tema con eso.