1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer>

Sábado, 19 Noviembre 2011

PDFImprimirE-mail

Usar jQuery en WordPress


Con la cantidad de plugins jQuery que existen y con la excelente funcionalidad de la mayoría de ellos, probablemente te hayas decidido a incluirlo en tu WordPress.
Puedes buscar como hacerlo en Google, pero hay algunas maneras que por experiencia te digo que no funcionan. La forma que os voy a indicar a continuación es la que me ha funcionado siempre al 100%.
WordPress incluye jQuery por defecto, así que no tendremos que preocuparnos de descargárnoslo y subirlo a nuestro server.
En primer lugar has de saber que si tu fichero header.php de tu theme tiene la función{code lang:php showtitle:false lines:false hidden:false} wp_head();{/code}tendrás que poner todo el código que te indico justo antes. Dicha función debe ser lo último del <head>.

Incluimos la librería jquery.js que trae WordPres.{code lang:javascript showtitle:false lines:false hidden:false}<script type="text/javascript" src="http://tuweb.com/wp-includes/js/jquery/jquery.js></script>{/code}Evidentemente tienes que poner la dirección de tu web.
A continuación ya puedes usar la función jQuery que desees. Para no entrar en conflicto con otras librerías javascript, definimos una nueva instancia de jQuery, en nuestro caso la llamaremos $j.
{code lang:javascript showtitle:false lines:false hidden:false}var $j = jQuery.noConflict();
$j(function(){
...
});{/code} De esta forma podremos usar cualquier función jQuery. Si queremos usar algún plugin, podemos subirlo dentro del directorio de nuestro theme, a la carpeta js. Tendremos que incluir dicho plugin en nuestro header.php de la misma manera que lo hicimos con la librería jquery.js original.

A continuación vamos a ver un ejemplo de uso del plugin vgrid para que veáis el funcionamiento completo.
{code lang:javascript showtitle:false lines:false hidden:false}<?php $url = get_template_directory_uri() ?>
<script type="text/javascript" src="http://tuweb.com/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/<?php echo $url; ?>/js/jquery.vgrid.0.1.7.min.js"></script>
<script type="text/javascript" src="/<?php echo $url; ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

var $j = jQuery.noConflict();
$j(function(){
    $j("#grid-content").vgrid({
        easeing: "easeOutQuint",
        time: 400,
        delay: 20,
        fadeIn: {
            time: 500,
            delay: 100
        }
    });

    var hsort_flg = false;
    $j("#hsort").click(function(e){
        hsort_flg = !hsort_flg;
        $j("#grid-content").vgsort(function(a, b){
            var _a = $j(a).find('h3').text();
            var _b = $j(b).find('h3').text();
            var _c = hsort_flg ? 1 : -1 ;
            return (_a > _b) ? _c * -1 : _c ;
        }, "easeInOutExpo", 300, 0);
        return false;
    });

    $j("#rsort").click(function(e){
        $j("#grid-content").vgsort(function(a, b){
            return Math.random() > 0.5 ? 1 : -1 ;
        }, "easeInOutExpo", 300, 20);
        return false;
    });
});
</script>{/code}  
Podéis ver el ejemplo en funcionamiento AQUÍ