18Sep 2010 3 Comments */?>

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

Categorías: Tutoriales - Tags: ,

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

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Bitacoras.com()

  • a ver si traduces el ejemplo tambien 

  • Patricia Mancilla

    Hola! mi problema no es insertar css a mi plugin (aún no he creado ninguno) tan sólo quiero modificar propiedades css de un plugin que estoy utilizando, ya que funciona muy bien, pero tiene algunos fallitos en el responsive, y no consigo modificar los estilos… sigue cogiendo los del plugin! Estoy con un tema hijo, pero no quiero tocar el código del plugin, y evitar problemas con las actualizaciones… Graciaaas!