Forma estándar de incluir JavaScript y CSS en WordPress

Si es un desarrollador de WordPress, ha oído hablar de palabras como wp_enqueue_script, wp_enqueue_style y wp_enqueue_scripts. Estos son los métodos que deberíamos utilizar para incluir JavaScript y CSS en WordPress.

Cuando se trata de WordPress, no se deben usar etiquetas de script y enlace para agregar archivos JavaScript y CSS.

Beneficios de usar métodos estándar

Para un sitio web, es común utilizar diferentes tipos de efectos, animaciones para mejorar la experiencia del usuario. Hay muchos complementos listos para usar disponibles en Internet que nos permiten agregar controles deslizantes, formularios de contacto, carrusel, etc.en su sitio web. Cuando usamos estos recursos externos, necesitamos usar archivos JS y CSS proporcionados por ellos. Al usar los métodos proporcionados por WordPress, podemos controlar las páginas en las que dichos complementos solo pueden usar. Por ejemplo, si mostramos el control deslizante en la página de inicio, no es necesario incluir los archivos JS y CSS del control deslizante en otra página. Siempre es una buena práctica incluir JS y CSS solo cuando sea necesario. Esta es una buena práctica que se utiliza para mejorar el rendimiento del sitio y hacer que nuestro sitio se cargue más rápido.

Código real para incluir JavaScript y CSS

Supongamos que tenemos archivos custom.js y custom.css que deben agregarse a nuestro sitio. Para esto, necesitamos colocar el código debajo.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Nota: El tercer parámetro de la función wp_register_script. Pasamos array (‘jquery’) lo que significa que nuestro custom.js depende del archivo jquery.js. Puede crear una matriz emapy aquí si su secuencia de comandos no tiene dependencias.

El último parámetro se establece en verdadero, lo que significa incluir el archivo custom.js en un pie de página (antes del final de la etiqueta del cuerpo).

Explicación de los parámetros de la función wp_register_script ()

$ handle (obligatorio): nombre del script. Debería ser único.
$ src (obligatorio): URL completa del script o ruta del script relativa al directorio raíz de WordPress.
$ deps (Opcional): una matriz de secuencias de comandos registradas maneja esta secuencia de comandos.
Valor predeterminado: array ()
$ ver (Opcional): Cadena que especifica el número de versión del script, si tiene uno, que se agrega a la URL como una cadena de consulta para fines de prevención de caché. Si la versión se establece en falso, se agrega automáticamente un número de versión igual a la versión actual de WordPress instalada. Si se establece en nulo, no se agrega ninguna versión. El valor predeterminado es falso
$ in_footer (Opcional): si se debe poner en cola el script antes del cierre de la etiqueta del cuerpo en lugar de en el encabezado. Por defecto ‘falso’.

Explicación de los parámetros de la función wp_register_style ()

$ handle (obligatorio): nombre de la hoja de estilo. Debería ser único.
$ src (obligatorio): URL completa de la hoja de estilo o ruta de la hoja de estilo relativa al directorio raíz de WordPress.
$ deps (Opcional): una matriz de hojas de estilo registradas maneja esta hoja de estilo depende.
Valor predeterminado: array ()
$ ver (Opcional): Cadena que especifica el número de versión de la hoja de estilo, si tiene una, que se agrega a la URL como una cadena de consulta para fines de prevención de caché. Si la versión se establece en falso, se agrega automáticamente un número de versión igual a la versión actual de WordPress instalada. Si se establece en nulo, no se agrega ninguna versión. Valor predeterminado: false
$ media(Opcional): el medio para el que se ha definido esta hoja de estilo. Acepta tipos de medios como ‘todos’, ‘imprimir’ y ‘pantalla’, o consultas de medios como ‘(orientación: retrato)’ y ‘(ancho máximo: 640 px)’. Valor predeterminado: ‘todos’.

Se trata de cómo incluir JavaScript y CSS en WordPress. Si tiene alguna pregunta o sugerencia, deje sus comentarios a continuación.