Como añadir css y js a tus plugins de wordpress

Realizando mi plugin de wordpress Test it Yourself descubrí que hay varios métodos para incluir css y javascript con tu plugin.

La diferencia principal de estos métodos es precisamente donde creo que algunos creadores de plugins se equivocan ya que añaden los archivos .css y .js aunque no se este ejecutando su plugin en concreto , ralentizando así la carga de la página y añadiendo código innecesario.

El método correcto casi correcto para inserción de css y js sería usar wp_enqueue_style() y wp_enqueue_script() en conjunto con wp_print_scripts y wp_print_styles. Lo usaríamos de la siguiente forma:

1
2
3
4
5
6

add_action( 'wp_print_scripts', 'enqueue_my_scripts' );
add_action( 'wp_print_styles', 'enqueue_my_styles' );
 
function enqueue_my_scripts(){
wp_enqueue_script( 'my_awesome_script', '/script.js', array( 'jquery' ));
}

Aunque con este método estaríamos insertando nuestros scripts en el header y el momento adecuado , aún no tendríamos la condicionalidad de solo insertarlo cuando nuestro plugin esta funcionando.

Parra ello debemos hacer algunos cambios y usar wp_enqueue_script y wp_enqueue_style de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

add_filter('the_posts', 'conditionally_add_scripts_and_styles'); // the_posts es lanzando antes que el header
 
function conditionally_add_scripts_and_styles($posts){
	if (empty($posts)) return $posts;
 
	$shortcode_found = false; // usamos shortcode_found para saber si nuestro plugin esta siendo utilizado
 
	foreach ($posts as $post) {
		if (stripos($post->post_content, '[testiy]')) { //cambiamos testiy por cualquier shortcode
			$shortcode_found = true; // bingo!
			break;
		}
	}
 
	if ($shortcode_found) {
		// enqueue
		wp_enqueue_style('test-it-style', plugins_url("test-it-yourself/").'test-it-style.css');//la ruta de nuestro css
		//wp_enqueue_script('my-script', '/script.js');//en caso de necesitar la ruta de nuestro script js
	}
 
	return $posts;
}

Ahora sí estaríamos añadiendo css y javascript siempre y cuando lo necesitemos sin cargar la página demasiado. Cuando descubrí me puse a mirar mi blog y la verdad que el 80% de los plugins que utilizo cargan todos sus archivos sea necesario o no :S

Con este método no detectamos [shortcodes] con atributos , para ello habría que usar expresiones regulares y ralentizaría un poco más el método. Para mi caso, mi plugin solo necesita atributos si voy a utilizar más de un shortcode por lo que me sirve perfectamente.

Espero que les haya aclarado un poco más el tema de como insertar correctamente estilos y javascript a sus plugins de wordpress. Si conocen otros métodos mejores por favor dejenlo en los comentarios y vamos actualizando el post. Saludos!!

Via | Beer planet