Desarrollo de temas desde cero: agregar archivos CSS y JavaScript

Cuando se trata de crear un tema de WordPress desde cero, comprender cómo agregar correctamente archivos CSS y JavaScript es fundamental para garantizar que su sitio web se vea atractivo y funcione de manera eficiente. En este capítulo, exploraremos las mejores prácticas para incluir estilos y scripts en su tema personalizado de WordPress.

Comprender la estructura de un tema de WordPress

Antes de comenzar a agregar archivos CSS y JavaScript, es importante comprender la estructura básica de un tema de WordPress. Un tema típico contiene los siguientes archivos:

style.css: el archivo de estilo principal, que define la apariencia visual del tema.
functions.php: un archivo PHP que le permite agregar funcionalidades y características al tema.
index.php: el archivo de plantilla predeterminado que muestra el contenido del sitio.
header.php y footer.php: archivos que generalmente contienen el encabezado y pie de página del sitio web, respectivamente.
Otros archivos de plantilla específicos para páginas, publicaciones, categorías, etc.

Agregar archivos CSS

Para agregar archivos CSS a su tema, debe usar la función wp_enqueue_style(). Esta función gestiona las dependencias de estilo y garantiza que los archivos se carguen en el orden correcto. A continuación se muestra un ejemplo de cómo puede agregar su archivo CSS principal:

<?php
función my_theme_styles() {
  wp_enqueue_style('mi-estilo-principal', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_styles');
?>

En el ejemplo anterior, la función my_theme_styles() se crea y se adjunta al gancho wp_enqueue_scripts. La función get_stylesheet_uri() devuelve la URL del archivo style.css que se encuentra en el directorio raíz del tema.

También puedes agregar otros archivos CSS, como un archivo de reinicio o archivos de marco como Bootstrap, de la siguiente manera:

<?php
función my_theme_styles() {
  //Restablecer CSS
  wp_enqueue_style('my-reset', get_template_directory_uri() . '/css/reset.css');
  
  // Arranque CSS
  wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
  
  // estilo principal
  wp_enqueue_style('mi-estilo-principal', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_styles');
?>

Agregar archivos JavaScript

Al igual que los archivos CSS, la función wp_enqueue_script() se utiliza para agregar archivos JavaScript a su tema. Esta función gestiona las dependencias de scripts y ayuda a evitar conflictos entre diferentes bibliotecas de JavaScript. Vea un ejemplo de cómo agregar un archivo JavaScript:

<?php
función my_theme_scripts() {
  wp_enqueue_script('mi-script', get_template_directory_uri() . '/js/my-script.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>

En el código anterior, la función my_theme_scripts() incluye un archivo JavaScript llamado my-script.js ubicado en /js/ carpeta de su tema. Los parámetros adicionales especifican dependencias (en este caso ninguna), la versión del script (falsificada para no usar una versión específica) y si el script debe cargarse en el pie de página (true para el pie de página). , false para el encabezado).

Para agregar bibliotecas populares como jQuery o Bootstrap JavaScript, puedes hacer lo siguiente:

<?php
función my_theme_scripts() {
  // jQuery (ya incluido en WordPress)
  wp_enqueue_script('jquery');
  
  // Arranca JavaScript
  wp_enqueue_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), nulo, verdadero);
  
  // Tu script personalizado
  wp_enqueue_script('mi-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), falso, verdadero);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>

Gestión de dependencias

Un aspecto importante al agregar CSS y JavaScript es la gestión de dependencias. Por ejemplo, si su script personalizado depende de jQuery, debe indicarlo en la función wp_enqueue_script() para asegurarse de que jQuery se cargue antes que su script. Esto se hace pasando una serie de dependencias como tercer parámetro de la función, como se muestra en el ejemplo anterior.

Consideraciones finales

Agregar archivos CSS y JavaScript es una parte esencial del desarrollo de temas de WordPress. Al utilizar las funciones wp_enqueue_style() y wp_enqueue_script(), se asegura de que los archivos se carguen correctamente y que las dependencias seangestionado eficazmente. Recuerde siempre minimizar sus archivos CSS y JavaScript para mejorar el rendimiento de su sitio y seguir las mejores prácticas de desarrollo de WordPress para garantizar un tema sólido y confiable.

Ahora responde el ejercicio sobre el contenido: