No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Agregando JavaScript a nuestro tema

15/35
Recursos

Aportes 81

Preguntas 42

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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.

Sugerencia para platzi, por favor actualizan el contenido del curso ya que las librer铆as y dem谩s herramientas usadas en el mismo se actualizan constantemente a lo cual muchos quedamos perdidos ya que los resultados mostrados en el video no se aplican en la pr谩ctica, esto debido a los cambios en los c贸digos de las librer铆as y dem谩s usados, gracias

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');```

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:

Hola, siendo 2022, no est谩 dem谩s poner el c贸digo que me ha hasta el momento funcionado. Los recursos de bootstrap ahora aparecen en la carpeta cdn.delivr.ne-t.(sin el guion antes de la t) cuando vas a inspeccionar y no en stackpath.bootstrap ya que ahora cambio en la versi贸n 5 en adelante. Gracias a la comunidad he podido seguir el ritmo hasta aqu铆.

<?php 
function init_template(){
    add_theme_support('post-thumbnails');
    add_theme_support('title-tag');

}

//Hook que ejecuta la funci贸n init_template, sin retornar valores. 
add_action('after_setup_theme','init_template');

function assets(){
    wp_register_style('bootstrap','https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css','','5.2.0','all');
    wp_register_style('montserrat','https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap','','1.0','all');

    wp_register_script('popper','https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js','','2.11.6',true);

    wp_enqueue_script('bootstraps','https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js',array('popper'),'5.2.1',true);

    wp_enqueue_style('estilos', get_template_directory_uri() . '/style.css', array('bootstrap', 'montserrat'),'1.0.0','all' );

    //cargar los archivos de Js
    wp_enqueue_script('custom',get_template_directory_uri().'/assets/js/custom.js','1.0.0',true);

} 
//Hook que ejecuta la funci贸n assets, sin retornar valores. 
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.

no me funciona nada de nada 鈥 que frustraci贸n , este curso necesita una actualizaci贸n urgente

Si eres como yo que necesito tomar este curso en 2023 sera por algo valioso y no por una tonter铆a, es claro que el curso esta desfasado pero la invitaci贸n que te desea hacer es a que veas esto como un reto adicional y que no te limites ni te detengas porque hay una info desfasada. Googlea e indaga todo lo que sea necesario pero no te limites ni te cierres, recuerda que las cosas no siempre se te ser谩n dadas en bandeja de plata

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

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.

Quiero hacer el curso pero al estar tan desactualizado, no anda nada. Al final uno paga, y vez videos mas actualizados en youtube gratis鈥 Platzi media pila con esto!!!

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 est谩 muy desactualizado, tengo que buscar un tutorial por cada cosa que no me sale bien .-.

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

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

Dejo este curso hasta este momento, creo que este curso necesita actualizaciones!!

Ya llevo 3 videos sin que me funcione correctamente lo que indica el profesor, creo que se deber铆a volver a reestructurar el curso y actualizarlo, revisando los comentarios se aprecia la ayuda que dan los mas avanzados pero el profesor va super r谩pido y no se detiene a explicar el por que de lo que hace, solo da un comentario y listo.
Pd: No es mi primer curso, ya llevo 4 aproximadamente y es primer curso en el que me pasa esto, no entender y que no funcione lo indicado por el profesor.

mucho que desear en cuanto a actualizaci贸n de como utilizar las cosas. casi nada se hace como lo pone el profesor

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

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 鈥淎gragando鈥 en vez de 鈥淎gregando鈥

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?

Siempre que usemos los handels dentro de los scripts no debemos repetir los nombres, pero s铆 podemos usar el mismo si solo est谩 en style, podemos tener bootstrap en style y en script y en este caso no har谩n conflictos. Si usamos dentro de los scripts el mismo handel no nos va a funcionar.

SI

wp_enqueue_style(鈥檅ootstrap鈥)

wp_enqueue_script(鈥檅ootstrap鈥)

NO

wp_enqueue_tyle(鈥檅ootstrap鈥)

wp_enqueue_style(鈥檅ootstrap鈥)

wp_enqueue_script(鈥檅ootstrap鈥)

wp_enqueue_script(鈥檅ootstrap鈥)

llevo todo el curso y nada funciona y veo que a muchos les pasa lo mismo si todos reportamos el problema de este curso llamaremos la atenci贸n para que se solucione esto

驴Para usar bootstrap, mejor usamos los temas que est谩n por defecto en Wordpress ?

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/core@2/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 鈥渋ntr茅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:ital@1&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( 鈥榚stilos鈥, get_stylesheet_uri(), array(鈥榖ootstrap鈥, 鈥榤ontserrat鈥), 鈥1.1鈥, 鈥榓ll鈥);`

驴 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.