Carga y manejo de librerías en temas de WordPress

Contenido del curso

Comenzar con WordPress

Armar estructura del Theme

Contruir vistas

Personalizar el Loop de WordPress

Extra

Cierre del curso

31
Fundamentos de WordPress: Creación de Catálogo de Productos
02:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:00

Carga y manejo de librerías en temas de WordPress

Curso de WordPress Práctico

Clase 15 de 31

Clase 15 / 31

Recursos

¿Cómo integrar librerías en WordPress?

Integrar librerías en WordPress puede parecer una tarea desafiante, pero con el procedimiento correcto, es un proceso sencillo y ordenado. A lo largo de los siguientes pasos, te guiaremos por el camino para incorporar librerías como Bootstrap y Popper en tu tema de WordPress de manera efectiva.

¿Cómo configurar una función para cargar scripts?

Para cargar librerías en WordPress, comenzamos por registrar y encolar los scripts necesarios. Esto permite que tus librerías se gestionen correctamente dentro del entorno de WordPress, evitando conflictos y asegurando que se carguen solo cuando sea necesario.

Registro de Scripts: Utiliza la función wp_register_script para registrar el script que deseas usar. Por ejemplo, regístralo con la URL de la librería y especifica las dependencias requeridas.
Encolar Scripts: Usa la función wp_enqueue_script para encolar el script en el sitio. Esto asegura que se cargue de manera adecuada en el frontend del sitio.

Ejemplo de código para registrar y encolar scripts

function cargar_librerias() {
    // Registrar Popper
    wp_register_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js', array(), '1.16.0', true);

    // Registrar y encolar Bootstrap
    wp_enqueue_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery', 'popper'), '4.4.1', true);
}
add_action('wp_enqueue_scripts', 'cargar_librerias');

¿Cómo añadir un archivo JavaScript personalizado?

Agregar un archivo JavaScript personalizado puede elevar las funcionalidades de tu tema. Este script se crea localmente y se encola de manera dinámica para permitir futuras personalizaciones sin conflictos de ruta.

Estructura de Carpetas: Crea una carpeta llamada js dentro de tu tema y coloca el archivo JavaScript personalizado allí, por ejemplo, custom.js.
Uso de Funciones de WordPress: Emplea funciones de WordPress para obtener la ruta del tema y concatenar con el archivo js.

Ejemplo para encolar un archivo JavaScript personalizado

function cargar_scripts_personalizados() {
    // Obtener el directorio del tema
    $template_directory = get_template_directory_uri();

    // Encolar el script personalizado
    wp_enqueue_script('custom-js', $template_directory . '/js/custom.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'cargar_scripts_personalizados');

¿Cómo insertar un logo adecuadamente?

Incorporar un logo en tu tema de WordPress puede darle una identidad visual única a tu sitio web. Sigue los siguientes pasos para hacerlo con estilo y precisión usando Bootstrap.

Ubicación del Logo: Guarda tu archivo de logo (por ejemplo, logo.png) en una carpeta dedicada a imágenes dentro de tu tema, como images.
HTML y Bootstrap: Utiliza la estructura de contenedores y filas de Bootstrap para integrar el logo en el diseño del sitio.
CSS Personalizado: Asegúrate de que el logo se visualice correctamente ajustando estilos CSS, como el color de fondo, en caso de ser necesario.

Código HTML para insertar un logo

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" class="img-fluid">
        </div>
    </div>
</div>

Estas acciones no solo complementarán tu tema de WordPress, sino que también proporcionarán la flexibilidad necesaria para futuras personalizaciones sin enfrentarse a conflictos o tener que lidiar con errores. ¡Sigue adelante y pon en práctica este conocimiento para perfeccionar tu sitio web!

Fabian Rivera Restrepo

Hace 5 años

Me presenta este problema en la consola

y no me deja ver el header y mi código está así:

index.php

<?php wp_head(); ?>

<?php wp_footer(); ?>

functions.php

<?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/bootstrap@5.0.2/dist/css/bootstrap.min.css', '', 
        '5.0.2', '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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js','',
        '5.0.2',true);
    wp_enqueue_script( 'custom',get_template_directory_uri().'/assets/js/custom.js','','1.0',true );

}

add_action( 'wp_enqueue_scripts', 'assets' );

header.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <?php wp_head() ?>
        
    </head>
    <body>
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-4">
                        <img src="<?php echo get_template_directory_uri()?>/assets/img/screenshot.png" alt="logo">
                    </div>
                </div>
            </div>
        </header>

Carlos Daniel

Hace 5 años

Creo que tu error se encuentra en index.php en vez de wp_head(); intenta con:

<?php get_header(); ?>

<?php get_footer(); ?>

Comentarios (130)130 comentarios

Alexis Sebastian Ramos Caballero

Hace 7 años

Karla Farfan Davalos

Hace 6 años

CHRISTIAN AROS

Jose Maria Lopez Pacheco

Ramon Alejadro Ochoa Medez

Jan De Sousa

Néstor Danilo Rubiano Reyes

Hace 4 años

Gastón Konstantinides

Wilmer Luis Morales Rivera

Julio Aníbal Gallego Zapata

Gabriel Vega

Eduardo Tellez Serrano

VOLODIA MESA ALVAREZ

Jenny Aguilar

Cristian Ramanzin

Profesor

Axel David Espinosa Meneses

César Augusto Cortés Labrada

Kelly Alexandra Londoño Arango

Camilo Orozco

Hace 3 años

SHARON JAFTE CHACON REGAND

John Cogua

Jonathan Gonzalez Botero

Luciana Roberto

Julian David Alzate Cuervo

Thierno sadialiou Diallo

Yordy Leonardo Almonte Ruiz

Luis Angel Rojas Estevez

Michelle Osorio

Israel Orea

Omar Daniel Centeno

Adriana Guerrero

Fredy A. Yomayuza Colorado

Erick Ramon Mendoza Varela

Jonathan Martinez

Iara Cracco

Daniel Felipe Diaz Rodriguez

Pedro Abraham Gutiérrez Pérez

Sebastian Matias Pulido

Luz Maria Rojas

walter Jorge

Comenzar con WordPress

Curso Actualizado

Curso Profesional de WordPress: Profundiza en Taxonomías y Categorías

Gestión y Personalización de Sitios Web con WordPress

Funcionamiento y características principales de WordPress

Estructura de Archivos para Vistas Dinámicas en PHP

Manejo de Hooks y Filtros en PHP para Extender Funcionalidades

Manejo de Librerías y Dependencias en HTML con Funciones Personalizadas

Instalación de Apache y PHP en Windows para Entorno Local

Instalación de WordPress en entorno local paso a paso

Gestión de WordPress: Navegación y Personalización Básica

Gestión de Usuarios y Configuración en WordPress

Gestión de Roles y Permisos de Usuario en WordPress

Armar estructura del Theme

Creación de un Tema Personalizado en WordPress con Visual Studio Code

Integración de Librerías CSS en Proyectos Web

Carga y manejo de librerías en temas de WordPress

Instalación y Personalización de Themes en WordPress

Contruir vistas

Incorporación de Menús en Temas de WordPress

Uso de Widgets en WordPress para Personalizar Contenido

Creación de Widgets en WordPress y su Inserción en el Footer

Gestión de Contenidos Personalizados en WordPress

Uso de Open Golpes para Gestión de Contenido Web

Creación de vistas personalizadas en WordPress con PHP y Gutenberg

Creación de Vistas Personalizadas en WordPress con PHP

Creación de la Página Principal en WordPress

Personalizar el Loop de WordPress

Creación de Post Type Personalizado en WordPress

Creación de un Loop Personalizado en WordPress

Extra

Selección de Plugins en WordPress: Compatibilidad y Mantenimiento

Instalación de Plugins en WordPress: Métodos y Herramientas

Creación de un Plugin de Modo Oscuro en WordPress

Creación de Página 404 Personalizada en WordPress

Cierre del curso

Fundamentos de WordPress: Creación de Catálogo de Productos

Carga y manejo de librerías en temas de WordPress