Share
În acest tutorial vom folosi pluginul jQuery Charts Plotting, JQplot, pentru a crea un nou plugin WordPress care poate afișa o parte din traficul blogului tău, categorii populare și multe altele cu niște grafice vizuale frumoase. Căutați o modalitate de a umfla un tablou de bord al unui client (sau propriul dvs.!) Cu câteva infografice utile? Nu mai căuta? vă vom arăta cum sa procedat chiar aici.
Ca bibliotecă de jQuery diagramă alegem JQplot care este ușor de utilizat și open-source sub licenta GPL, MIT. Vom da 4 diagrame diferite în acest post, dar apoi, folosind fantezia noastră, puteți face mai multe diagrame legate de datele site-ului dvs. WordPress. Vom numi pluginul nostru Infograph. Puteți descărca și instala plugin-ul gata de descărcare link-ul dat în acest post. Acum, să arătăm structura pluginului pas cu pas: pluginul conține 6 funcții (1 pentru JS script enque, unul pentru CSS și 4 pentru grafice), 4 coduri scurte pentru diagrame și 2 cârlige de acțiune. Sper că știți cu toții ce este shortcode și acțiune, deci hai să mergem mai departe.
Mai întâi adăugăm două funcții pentru adăugarea suportului JS și CSS:
Accentsconagua
funcția 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 ("distracție"); wp_register_script ('pie', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.pieRenderer.js"); wp_enqueue_script ("plăcintă"); wp_register_script ('meg', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.meterGaugeRenderer.js"); wp_enqueue_script ("meg"); funcția add_css () echo ' "; echo ""; add_action ('wp_enqueue_scripts', 'myscripts'); add_action ('wp_head', 'add_css'); Această diagramă este o plăcintă care prezintă cele mai populare categorii ale blogului tău. Puteți să-l plasați pe orice pagină sau post. Doar puneți [mycategories] shortcode la orice post:
($ ch_cats); $ chl = "; pentru ($ i = 1; $ i<=5;$i++) $chl=$chl.'[\".$ch_cats[$i-1]->. Numele '\', '$ ch_cats [$ i-1] -> count.'], '; // [\ 'a \', 25], [\ 'b \', 14], [\ 'c \', 7]] $ chl = '[ , -1) ']].'; întoarcere ' „; add_shortcode ("mycategories", "categories"); Această diagramă poate afișa activitatea pe ultimele 12 luni pe blogul dvs. Afișează numărul de postări pe care le-ai postat pe ultimele 12 luni după lună.
funcția postsbymonth ($ atts, $ content = ") // Număr de posturi pe lună global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (selectați * din (selectați MONTH (post_date) ) ca si voi, numarati (ID) ca co din $ wpdb-> posturi unde post_status = "publicati" grupul dupa MONTH (post_date), YEAR (post_date) comanda by post_date desc limita 12) ; $ labels = "; $ postcounts ="; foreach ($ postcountbymonth ca $ pc) $ labels = $ etichete. \ ". $ pc-> mo. '/'. $ pc-> ye. ' \ ''; . $ Postcounts = $ postcounts $ PC-> co ''.; $ postcounts = '['. substr ($ postcounts, 0, -1). ';'; $ etichete = '[' substr ($ etichete, 0, -1).. ']'; întoarcere ' „; add_shortcode ('de luni', 'postsbymonth'); Al treilea grafic este, de asemenea, despre date interesante, vă arată cele mai comentate postări.
funcția cea mai comentată ($ atts, $ content = ") global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" select post_title as pt, comment_count ca co din $ wpdb-> posts where post_status = ($ postcountbymonth ca $ pc) $ titles = $ titles. "[\". $ pc-> pt. " ('. $ pc-> pt.') \ ','. $ pc-> co. '],'; $ titles = '['. substr ($ titluri, 0, -1). '' '; întoarcere ' „; add_shortcode ('mypopularposts', 'mostcommented'); Ultimul nostru grafic pentru acest tutorial arată viteza blogului tău. Acesta arată numărul mediu de postări pe luna.
viteza de funcționare ($ atts, $ content = ") global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" select post_title as pt, comment_count ca co din $ wpdb-> posts where post_status = ); $ postcountresult = rotund ($ wpdb-> num_rows / 12); $ maxvel = pow (10, strlen ((string) $ postcountresult)); $ intervale = "; pentru ($ i = 1; $ i<=6;$i++) $ticks=$ticks.($maxvel*($i-1)/5).','; if($i % 2 != 0) $intervals=$intervals.($maxvel*($i-1)/5).','; $ticks='['.substr($ticks,0,-1).']'; $intervals='['.substr($intervals,0,-1).']'; return ' „; add_shortcode ('viteza', 'viteza'); Folosind graficele WordPress API și jQuery puteți prelungi această listă de diagrame, aceste 4 diagrame au fost doar exemple pentru dezvoltatorii interesați.
