SummArg | Cursos y recursos para webmasters

23/10/2011

Mostrar información de tu sitio web WordPress utilizando gráficos con jQuery

wp-tuts elaboró un tutorial muy completo para poder mostrar información de nuestro WordPress con gráficos utilizando jqPlot para jQuery. Puede utilizarse para mostrar la cantidad de entradas por categoría, entradas por mes, las entradas mas comentadas y la velocidad de tu blog.

Primero requiere de descargar jQuery y jqPlot y vincularlos a tu theme. En el functions.php se coloca el siguiente código:

    function myscripts ()      {      wp_deregister_script('jquery');      wp_register_script( 'jquery',get_bloginfo('wpurl') . "/wp-content/plugins/infograph/jquery-1.3.2.min.js");      wp_enqueue_script('jquery');
    wp_register_script( 'jqplot',get_bloginfo('wpurl') . "/wp-content/plugins/infograph/src/jquery.jqplot.js");      wp_enqueue_script( 'jqplot' );
    wp_register_script( 'bar', get_bloginfo('wpurl') . "/wp-content/plugins/infograph/src/plugins/jqplot.barRenderer.js");      wp_enqueue_script( 'bar' );
    wp_register_script( 'cax', get_bloginfo('wpurl') . "/wp-content/plugins/infograph/src/plugins/jqplot.categoryAxisRenderer.js");      wp_enqueue_script( 'cax' );
    wp_register_script( 'pol', get_bloginfo('wpurl') . "/wp-content/plugins/infograph/src/plugins/jqplot.pointLabels.js");      wp_enqueue_script( 'pol' );
    wp_register_script( 'fun', get_bloginfo('wpurl') . "/wp-content/plugins/infograph/src/plugins/jqplot.funnelRenderer.js");      wp_enqueue_script( 'fun' );
    wp_register_script( 'pie', get_bloginfo('wpurl') . "/wp-content/plugins/infograph/src/plugins/jqplot.pieRenderer.js");      wp_enqueue_script( 'pie' );
    wp_register_script( 'meg', get_bloginfo('wpurl') . "/wp-content/plugins/infograph/src/plugins/jqplot.meterGaugeRenderer.js");      wp_enqueue_script( 'meg' );
    }
    function add_css () {           echo '          <link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/infograph/src/jquery.jqplot.css" />' ;           echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/infograph/examples.css" />' ;      }
    add_action('wp_enqueue_scripts', 'myscripts');      add_action('wp_head', 'add_css');  

Y ahora crearemos el shortcode [ mycategories ] para poder colocarlo en cualquier entrada o página y mostrar el porcentaje de entradas por categoría de nuestro blog. El siguiente código debe ir en el functions.php

    function categories($atts,$content = '') {      $ch_cats = get_categories(array('orderby'=>'count','order'=>'desc') );      $sayy= count($ch_cats);      $chl='';      for ($i=1;$i<=5;$i++)        {          $chl=$chl.'[''.$ch_cats[$i-1]->name.'','.$ch_cats[$i-1]->count.'],';  //[[['a',25],['b',14],['c',7]]]           }
    $chl='[['.substr($chl,0,-1).']]';
    return '<script>      $(document).ready(function(){      plot1 = $.jqplot('chart1', '.$chl.', {     title: 'Categorias populares ',     seriesDefaults:{renderer:$.jqplot.PieRenderer,rendererOptions: { padding: 8, showDataLabels: true}},legend:{show:true,placement: 'outside',rendererOptions: {numberRows: 1}},     legend:{show:true,             placement: 'outside',             rendererOptions: {             numberRows: 1                          },             location:'s',             marginTop: '15px'                       }       });     });       </script>       <div id="chart1" style="margin-top:30px;margin-bottom:30px; margin-left:20px; width:500px; height:300px;"></div>  ';       }      add_shortcode('mycategories', 'categories');  

Hay mas recursos para descargar en la web del autor.

Descargar códigos | Demos

Dejar un comentario