fbpx

Dios, chicos, entiendo que este tipo de guía para principiantes, pero en todos mis otros tutoriales hablo muy a menudo de incluir JavaScript y CSS, así que desde ahora puedo darles un enlace a este tutorial. Y para ser honesto, no encontré ningún tutorial bueno y nuevo sobre este tema.

Antes de continuar con la guía, quiero que sepa que nunca debe agregar CSS y JS externos directamente a los archivos de plantilla de WordPress como header.phpfooter.phpetc. En algunos casos, podría estar bien agregar algún código interno usando etiquetas <style><script>, pero tampoco es recomendable. .

CSS y JavaScript internos

Solo para que quede claro: CSS interno es lo que está entre la <style>etiqueta directamente en HTML y JS interno es lo que está entre las <script>etiquetas.

WordPress tiene 4 ganchos de acción que pueden ser útiles para CSS y JavaScript internos:

  • wp_head– usando este gancho puede agregar CSS / JS interno o cualquier cosa que desee antes de la </head>etiqueta de cierre ,
  • admin_head – lo mismo pero solo para el panel de administración de WordPress,
  • wp_footer– puede agregar algo antes de la </body>etiqueta de cierre ,
  • admin_footer – lo mismo pero solo para el panel de administración de WordPress;

1. Agregue CSS personalizado al panel de administración de WordPress usando el admin_headgancho de acción.

Déjame mostrarte un ejemplo rápido:

add_action( 'admin_head', 'misha_custom_internal_css' );
 
function misha_custom_internal_css(){
 
	echo '<style>
		#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
			background: #a73fe0;
		}
	</style>';
 
}

Por supuesto echoque no es necesario aquí, es mejor utilizar <?phpetiquetas de apertura y cierre en su lugar.

Y aquí está el resultado de este código:

Cómo agregar CSS personalizado al panel de administración de WordPress usando el gancho de acción admin_head.

Cabe mencionar en primer lugar que no es necesario usar admin_head(o wp_head) solo para CSS y admin_footer(o wp_footersolo para JavaScript).

Este código es muy similar al ejemplo anterior, el único cambio es que usamos JavaScript en lugar de CSS:

add_action( 'admin_footer', 'misha_custom_internal_javascript' );
 
function misha_custom_internal_javascript(){
 
	echo '<script>
		jQuery( function( $ ) {
			alert( \'hello\' );
		} );
	</script>';
 
}

Por cierto, los atributos type="text/css"de la <style>etiqueta y type="text/javascript"de la <script>etiqueta están obsoletos.

Archivos CSS y JavaScript externos

CSS / JS externo es cuando hay un archivo .js.cssno está necesariamente en su dominio.

Cuando tenga que incluir algunos archivos CSS o JavaScript externos, debe usar estos ganchos de acción, siempre:

  • wp_enqueue_scripts
  • admin_enqueue_scripts – para el panel de administración de WordPress

¡Pero esto no es todo! No puede simplemente imprimir <script><link>etiquetas dentro de estos ganchos, debe usar funciones especiales, aquí está la lista que personalmente uso con bastante frecuencia:

  • wp_register_script() / wp_register_style()
  • wp_deregister_script() / wp_deregister_style()
  • wp_enqueue_script() / wp_enqueue_style()
  • wp_localize_script()
  • wp_add_inline_script()

Hay más funciones. ¡Pero usar estas funciones suele ser más que suficiente! Te mostraré cómo lidiar con ellos en los siguientes ejemplos:

Pero, ¿cómo se agregan los archivos a las plantillas HTML de un tema? Se hará automáticamente a través de las funciones wp_head()wp_footer(), por supuesto, que deben estar en sus archivos de plantilla antes de cerrar </head>y las </body>etiquetas en consecuencia.

1. Incluyendo el tema principal style.css

Tan simple como esto:

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css' );
 
function misha_main_theme_css() {
 
	wp_enqueue_script( 'misha-css', get_stylesheet_uri() );
 
}

En realidad, hay 3 formas de obtener la URL style.cssde un tema:

  • get_stylesheet_uri(),
  • get_stylesheet_directory_uri() . '/style.css',
  • get_template_directory_uri() . '/style.css' – este es un poco diferente, si lo va a usar dentro de un tema secundario, devolverá la style.cssURL del archivo de uno principal.

Ok, pero ¿cuál es el primer parámetro que configuro misha-css? En este mismo ejemplo, es bastante inútil, pero lo necesita cuando usa las funciones wp_register_script()wp_register_style()y cuando configura las dependencias de archivos, sobre las dependencias, en el siguiente ejemplo.

El segundo parámetro también puede contener la URL completa de un archivo en otro dominio, como por ejemplo Google Fonts.

2. Uso de scripts registrados previamente

Abra el wp-includes/jsdirectorio. Ves, hay muchos archivos ahí. Puede encontrar jQuery allí y también algunos complementos JS similares. ¿Qué significa todo eso?

Significa que la mayoría de los scripts ya están registrados y si los vas a usar, puedes hacerlo de esta manera:

add_action( 'wp_enqueue_scripts', 'misha_include_jquery' );
 
function misha_include_jquery() {
 
	wp_enqueue_script( 'jquery' ); // you just have to know a script handle
 
}

Puede encontrar la lista completa de scripts registrados previamente en la documentación oficial de WordPress o en wp-includes/script-loader.php.

También es posible que registres previamente tus propios scripts y estilos, por ejemplo, en algunos temas o complementos puedes encontrar esta implementación:

add_action (  'wp_enqueue_scripts' , 'misha_register_and_enqueue'  ) ;
 
function misha_register_and_enqueue ( )  {
 
	wp_register_script (  'some-script' , $ url  ) ;
	wp_enqueue_script (  'some-script'  ) ;
 
}

La función wp_register_script()tiene los mismos parámetros que, wp_enqueue_script()por cierto.

3. Dependencias

¿Sabes que el orden de los estilos y especialmente los guiones importa? Espero que si. Entonces, si está usando la biblioteca jQuery, debe incluir sus .jsarchivos después de ella. A veces, el orden de los archivos CSS también es importante.

Quiero dejar en claro que si está utilizando el único gancho wp_enqueue_scriptsy todos los scripts se enumeran allí, puede omitir el parámetro de dependencia. Pero si crea un complemento personalizado y este complemento requiere la biblioteca jQuery, es imprescindible.

add_action (  'wp_enqueue_scripts' , 'misha_custom_js_with_dependency'  ) ;
 
function misha_custom_js_with_dependency ( )  {
 
	wp_enqueue_script (  
		'misha-script-2' ,
		plugin_dir_url (  __FILE__  ) . 'assets / script.js' ,
		 array (  'jquery' , 'misha-script-1'  ) 
	) ;
 
}

Por lo tanto, no importa cuál sea la prioridad del enlace y en qué archivo de un complemento o tema usará este código; en todos los casos misha-script-2, se agregará al documento HTML solo después de jquerymisha-script-1.

4. Evite que los archivos CSS y JavaScript se almacenen en caché

Esto es lo que el cuarto parámetro de wp_register_script()wp_register_style()wp_enqueue_script()wp_enqueue_style()es para.

Hace siglos usé la time()función allí, permite evitar que los archivos se almacenen en caché por completo. ¿Pero no es mejor actualizar la caché solo si se han cambiado los archivos?

Aquí es cómo:

add_action( 'wp_enqueue_scripts', 'misha_main_theme_css_cache_refresh' );
 
function misha_main_theme_css_cache_refresh() {
 
	wp_enqueue_style( 
		'misha-css',
		get_stylesheet_uri(),
		array(),
		filemtime( dirname( __FILE__ ) . '/style.css' )
	);
 
}

La función PHP filemtime()es bastante interesante, porque tiene que pasarle la ruta absoluta del servidor, lo que se puede hacer fácilmente dirname(), lo que agrega una capa más de complejidad aquí, porque la ruta devuelta por dirname()es relativa al archivo donde se usa. En este ejemplo, el archivo style.cssdebe estar en el mismo directorio.

Echemos un vistazo a otro ejemplo de complementos personalizados. Tenemos un archivo de complemento misha-plugin.php, directorio assets/script.jsen él.

add_action( 'wp_enqueue_scripts', 'misha_plugin_javascript_cache_refresh' );
 
function misha_plugin_javascript_cache_refresh() {
 
	wp_enqueue_script( 
		'misha-plugin-js',
		plugin_dir_url( __FILE__ ) . 'assets/script.js', // no slashes
		array( 'jquery' ),
		filemtime( dirname( __FILE__ ) . '/assets/script.js )
	);
 
}

Línea de fondo:

Tenemos dos enfoques para evitar que los archivos CSS y JavaScript incluidos se almacenen en caché como para siempre:

  • time() : Devuelve la hora actual en segundos desde 1970. Por lo tanto, cada segundo tiene un valor diferente,
  • filemtime() – devuelve el tiempo en segundos cuando este archivo fue modificado por última vez.

¡Podemos configurar este parámetro para nulleliminar la cadena de consulta porque de forma predeterminada muestra la versión actual de la instalación de WordPress!

Si alguna vez ha escaneado su sitio web con Google PageSpeed, sabe que siempre recomienda mover todos sus archivos JavaScript e incluso CSS al pie de página del sitio web, antes de la </body>etiqueta de cierre . En mi experiencia, puedo decir que no es un gran problema para el rendimiento del sitio web. Pero a veces, mover jQuery y su .js archivo pesado personalizado al pie de página del sitio web puede ser una buena idea.

add_action( 'wp_enqueue_scripts', 'misha_jquery_in_footer' );
 
function misha_jquery_in_footer() {
 
	wp_deregister_script( 'jquery' );
	wp_register_script( 
		'jquery', 
		includes_url( '/js/jquery/jquery.js' ), 
		false, // no dependencies
		NULL, // no version to show
		true // in footer? yes
	);
	wp_enqueue_script( 'jquery' );
 
}

El parámetro en la línea 11 le permite controlar dónde va a mostrar el script – en el encabezado del sitio web – false(predeterminado) o pie de página – true. Funciona wp_register_style()wp_enqueue_style()no tiene este parámetro.

6. Pasar parámetros PHP a JS

En esta parte del tutorial, me gustaría hablar principalmente sobre la wp_localize_script()función, pero puede usar para este propósito lo nuevo wp_add_inline_script()que apareció en WP 4.5.

La idea clave es que a veces tienes que pasar algunos valores generados dinámicamente a tu código JavaScript sin crear llamadas AJAX adicionales o usar JS interno . También puede adivinar por el nombre de la función «localizar script» que se creó para traducir cadenas en JavaScript. No más palabras, echemos un vistazo a los ejemplos:

add_action('wp_enqueue_scripts', 'misha_pass_php_args_to_js');
 
function misha_pass_php_args_to_js(){
 
	wp_register_script( 'misha-js', $script_url );
	wp_localize_script( 
		'misha-js',
		'mishaParams', // it is the name of JavaScript variable (object)
		array(
			'parameter_1' => site_url(), // for example
			'translated_string' => __( 'Settings saved' ), 
		)
	);
	wp_enqueue_script( 'misha-js' );
 
}

Entonces, la función wp_localize_script()tiene 3 parámetros:

  • misha-js – el primer parámetro es el identificador del script que va a utilizar los parámetros,
  • mishaParams – es la variable JavaScript (objeto) que contendrá nuestros datos
  • Y el tercer parámetro es la matriz con los datos.

Como resultado, la función imprimirá algo como esto antes de su javascript externo misha-js:

<script type='text/javascript'>
/* <![CDATA[ */
var mishaParams = {"parameter_1":"https://rudrastyh.com", 'translated_string' => 'Inställningar Sparade'};
/* ]]> */
</script>

Puede utilizar cualquiera de estos parámetros de esta manera:

console.log( mishaParams.parameter_1 );

7. Anule el registro de guiones y hojas de estilo que no necesite

Un buen ejemplo aquí es un complemento Contact Form 7 que agrega su propia hoja de estilo en su sitio web. En algunos casos, es posible que no lo necesite, así que permítame mostrarle cómo desactivarlo fácilmente:

add_action( 'wp_enqueue_scripts', 'misha_remove_contact_form_7_css', 9999 );
 
function misha_remove_contact_form_7_css() {
	wp_deregister_style( 'contact-form-7' );
}

Puede preguntarse: ¿cómo adiviné el identificador del archivo css, que está contact-form-7en la línea 4. En realidad, es fácil de obtener, simplemente abra el código fuente de su página en el navegador, busque un script o una hoja de estilo que le gustaría eliminar y mira su idatributo de etiqueta. En este ejemplo lo fue contact-form-7-css, en otras palabras {HANDLE}-css. Pero … ¡las etiquetas de script no tienen idatributos! Bueno, esto tiene que resolverlo usted mismo. Recomiendo realizar una búsqueda en archivos.

8. Cómo agregar secuencias de comandos solo en páginas específicas

El uso de etiquetas condicionales está bien. La lista de etiquetas se puede encontrar aquí , en la documentación oficial de WordPress.

add_action( 'wp_enqueue_scripts', 'misha_js_for_homepage_only' );
 
function misha_js_for_homepage_only() {
 
	if( is_front_page() ) { // if on a website homepage
		wp_enqueue_script( 'homepage-js', $url, 'jquery', null, true );
	}
 
}

La situación con los scripts de administración es diferente, porque el admin_enqueue_scripts gancho de acción acepta el $hook_suffixparámetro que es un identificador de una página de administración:

add_action( 'admin_enqueue_scripts', 'misha_admin_js_for_certain_pages' );
 
function misha_admin_js_for_certain_pages( $hook_suffix ) {
 
	// Dashboard, Posts, Pages pages
	if( $hook_suffix == 'index.php' || $hook_suffix == 'edit.php' ) {
		wp_enqueue_script( 'admin-js', $url, false, null, true );
	}
 
}

Si desea verificar qué es una $hook_suffixdeterminada página de administración, puede hacerlo echo $hook_suffixdirectamente desde el gancho cuando esté en esa página.

Eso es todo por este tutorial básico.

Menú