How to Enqueue Scripts and CSS in Oxygen (The Right Way)

¡Hola a todos! Hoy voy a explicaros la forma «correcta» de importar recursos en WordPress para sitios que utilizan Oxígeno. Normalmente pondríamos en cola nuestros recursos en el archivo functions.php de nuestro tema. Como probablemente sabes, Oxygen desactiva por completo el sistema normal de temas de WordPress, así que tenemos que ser un poco más creativos. La solución es crear un plugin propio muy básico que simplemente encaje tus archivos de recursos. ¡Esto es muy sencillo de hacer y te daré todo el código y los ejemplos que necesitas para hacer el trabajo!

1. Crear los archivos y directorios

Lo primero es lo primero, vamos a crear la estructura de archivos y directorios que necesitaremos. Crea una carpeta en tu escritorio (o donde prefieras) y llámala algo así como «resource-enqueuer». Dentro de esa carpeta, crea un archivo llamado «plugin.php» y otra carpeta llamada «assets». Dentro de la carpeta «assets», te recomiendo crear algunos subdirectorios más como «css», «js», etc. dependiendo del tipo de recursos con los que estés trabajando. No es totalmente necesario si sólo tienes unos pocos archivos, pero es la mejor práctica para mantener las cosas organizadas.

Crear archivos para el plugin Resource Enqueue

2. Añade recursos a tus directorios

Simplemente coloca los archivos JS y CSS que necesites en sus respectivos directorios en la carpeta del plugin

Coloca los recursos dentro de los subdirectorios del plugin resource enqueue

3. Añade el código básico de plugin.php

Muy bien, si nunca has codificado nada antes esta será la parte más complicada, pero confía en mí, ¡es muy sencillo! Voy a explicarlo todo de la forma más sencilla posible. Primero, copia y pega el código de abajo en tu nuevo plugin.php.

<?php
/*
Plugin Name:	Resource Enqueuer
Description:	Enqueues Resource Files
*/

//You can ignore this, but don't forget to include it. 
//It helps prevent people from directly executing your code.
if ( ! defined( 'WPINC' ) ) {
	die;
}

add_action( 'wp_enqueue_scripts', 'resource_enqueuer' );

function resource_enqueuer() {

	//Put your CSS enqueues under here



	//Put your JS enqueues under here


}

4. Añade tus colas

A continuación, vamos a añadir nuestras colas en el archivo plugin.php. Aquí es donde vas a tener que prestar un poco más de atención, ya que el caso de cada uno es ligeramente diferente y necesitas insertar los nombres correctos de tus archivos. A continuación he escrito algunos ejemplos de cómo deberían ser tus llamadas a la cola para los archivos CSS / JS y si tienes tus archivos guardados localmente o en un CDN.

//CSS enqueue from directory
wp_enqueue_style( 'YourCssSheetName', plugin_dir_url( __FILE__ ) . 'assets/css/yourfilename.css' );

//CSS enqueue from CDN link
wp_enqueue_style( 'YourCssSheetName', 'https://yourcdnlink.com/yourfile.css' );

//JS enqueue from directory
wp_enqueue_script( 'YourJsScriptName', plugin_dir_url( __FILE__ ) . 'assets/js/yourfilename.js', '', '', true );

//JS enqueue from CDN link
wp_enqueue_script( 'YourJsScriptName', 'https://yourcdnlink.com/yourfile.css', '', '', true );

Además, es posible que quieras poner en cola algunos recursos sólo en páginas específicas. A continuación te proporciono algunos ejemplos de declaraciones condicionales para ayudarte a hacerlo Sólo tienes que colocar tus colas de espera dentro de los elementos necesarios condicionales para hacer que tus recursos se carguen sólo en las páginas en las que los necesitas. Hay MUCHOS condicionales más disponibles en WordPress y sólo he enumerado algunos de los escenarios más comunes. Si quieres saber más o tienes un caso de uso diferente, consulta este enlace.

//On the front page ONLY
if ( is_front_page() ){

	//insert enqueues here

}
	
//On every page EXCEPT the front page
if ( ! is_front_page() ) {

	//insert enqueues here
		 
}

//On specified page (based on slug or ID)
if ( is_page('your-page-slug-or-id') ){

	//insert enqueues here

}

//On several specified pages (based on slugs or IDs)
if ( is_page( array('first-slug', 'second-slug', 'etc...') ) ){

	//insert enqueues here

}

//On all posts of a specified type
if ( get_post_type() == 'yourposttype' ){

	//insert enqueues here

}

¡No olvides guardar tu archivo!

Este es un ejemplo de cómo podría ser un simple plugin.php completo (nota: puedes añadir colas adicionales fácilmente en cualquier momento y hablaré de ello más adelante)

<?php
/*
Plugin Name:	Resource Enqueuer
Description:	Enqueues Resource Files
*/

//You can ignore this, but don't forget to include it. 
//It helps keep your plugin safe from being tampered with!
if ( ! defined( 'WPINC' ) ) {
	die;
}

add_action( 'wp_enqueue_scripts', 'resource_enqueuer' );

function resource_enqueuer() {

	//Put your CSS enqueues under here

	//Enqueues morphtext.css everywhere
	wp_enqueue_style( 'morphtext', 'https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.css' );


	//Put your JS enqueues under here

	//Enqueues particles.js on the front page only
	if (is_front_page()){
		wp_enqueue_script( 'particlesjs', 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js', '', '', true );
	}

	//Enqueues morphtext.js everywhere
	wp_enqueue_script( 'morphtextjs', 'https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js', '', '', true );

}

5. Instala tu plugin

¡Por fin estamos listos para ver algunos resultados! A continuación, haz clic con el botón derecho en la carpeta de tu plugin y selecciona Enviar a > Carpeta comprimida (zip).

Comprimir el plugin de cola de recursos

Ahora sólo tenemos que subir y activar el plugin como haríamos con cualquier otro plugin Ve a Plugins > Añadir Nuevo > Subir Plugin y luego selecciona y sube tu nuevo archivo zip. Una vez hecho esto, activa el plugin.

¡Ya hemos terminado! ¡Enhorabuena! ¡Has creado tu propio plugin para poner en cola tus archivos de recursos (y quizás tu primer plugin en general)!

Cómo editar el plugin para añadir más cosas después

Puedes añadir fácilmente colas adicionales en cualquier momento editando los archivos de tu plugin en el servidor. Si necesitas ayuda para ello, sólo tienes que seguir los siguientes pasos

En primer lugar, tenemos que conectarnos a nuestro servidor con FTP / SFTP. Si por alguna razón no puedes hacerlo o no estás familiarizado con su uso, puedes utilizar el plugin Administrador de archivos de WP para hacerlo, pero por favor, desactívalo y elimínalo cuando hayas terminado de usarlo por motivos de seguridad. Una vez que navegues con éxito por tu servidor, deberías poder encontrar el plugin en /public_html/wp-content/plugins/nombre-del-plugin. Desde ahí, simplemente añade los recursos a la carpeta assets y edita tu archivo plugins.php con las nuevas colas que quieras añadir.



Source by [author_name]

Deja un comentario