Aggiungere codice Javascript ai plugin WordPress
Quando si realizza un plugin per il pannello di amministrazione del nostro blog, molto spesso abbiamo bisogno di caricare all’interno delle pagine del codice javascript.
Immaginiamo un ambito di applicazione dove ci serve una sotto pagina in Articoli, che chiameremo Overview nella quale visualizziamo una tabella contenente gli ultimi 20 post pubblicati e che questa tabella sia ordinabile in base ai campi Titolo, Autore, Data.
L’HTML della tabella lo creiamo tramite una semplice query al database (di cui non ci occupiamo in questo post), mentre per l’ordinamento ci serviremo del plugin jQuery Tablesorter.
Tablesorter va incluso nella nostra pagina Overview assieme alla libreria jQuery, quindi scarichiamo il file jquery.tablesorter.js (assieme a tutto l’occorrente) dal sito appena indicato e copiamo il tutto nella cartella del nostro plugin: wp-content/plugins/overview/.
Per non appesantire il caricamento delle altre pagine amministrative con script non necessari, caricheremo il file jquery.tablesorter.js solo nella pagina Articoli » Overview.
Il codice che segue va inserito nel plugin PHP ed è basato sugli esempi mostrati nella documentazione ufficiale.
add_action('admin_init', 'overview_admin_init');
add_action('admin_menu', 'overview_admin_menu');
function overview_admin_init(){
// registriamo lo script come dipendente da jQuery
wp_register_script('overviewJS', WP_PLUGIN_URL . '/overview/jquery.tablesorter.js', array('jquery'));
}
function overview_admin_menu(){
// creiamo la pagina
$page = add_submenu_page('edit.php', 'Overview', 'Overview', 9, __FILE__, 'overview_page');
// e facciamo caricare gli script solo nella nostra pagina
add_action('admin_print_scripts-'.$page, 'overview_admin_styles');
}
function overview_admin_styles(){
// richiamiamo gli script
wp_enqueue_script('overviewJS');
}
function overview_page(){
// in questa funzione facciamo la query
// al database per costruire la tabella
// con i post
}
Per caricare tutto il codice javascript senza ulteriori passaggi, conviene aggiungere al file jquery.tablesorter.js queste righe:
jQuery(document).ready(function() {
jQuery("#myTable").tablesorter();
}
);
Queste righe “dicono” al plugin di applicare l’ordinamento alla tabella con id myTable subito dopo il caricamento completo della pagina.
Link correlati
10 Best Libraries for generating PDF Files
Le 10 migliori librerie PHP per la creazione di documenti PDF.
10 Essential HTML5 Frameworks
Here are 10 essential HTML5 frameworks you should have in your designer arsenal right now if you are serious about adopting HTML5 development into your daily workflow.
10 Impressive Techniques to Spice up your WordPress Theme
This article will share 10 great practices, examples & Plugins for using the most popular Javascript frameworks out there to spice up your WordPress theme.
13 Free and Premium JavaScript/jQuery Calendars
When the website users or customers need to put any date or include months or years in a particular form, these JavaScript calendars really come handy for them.
20 Useful jQuery Plugins for Responsive Web Design
Responsive layouts allow the website designers to offer specific and optimized screen size based on a wide range of devices, PC, mobile phones, tablet and iPhone. jQuery can help you to optimize the layouts of a website on different devices.
38 Useful and Effective jQuery Plugins for Responsive Web Design
In today’s post we have gathered jQuery plugins for responsive web design.
40 Free and Premium Creative WordPress Themes
Whether you are an artist, graphic designer, photographer or a magazine or newspaper owner, you would require some real catchy and awesome creative WordPress themes to display your work.
7 Image Sliders with Responsive Fluid Layout Support
In this post, we have 7 image sliders with responsive layout support.
Add From Server
“Add From Server” is a quick plugin which allows you to import media & files into the WordPress uploads manager from the Webservers file
Basics Of WordPress Theme Design
In this post we’ll look at the different aspects of WordPress theme development, starting with the fundamentals and then moving swiftly onto the basics, template tags and the more advanced files.
CSS3 Exciting Functions and Features: 30+ Useful Tutorials
30 tutorial per sfruttare le nuove caratteristiche di CSS3.
Display your Favorite Tweets using PHP and jQuery
Display your latest tweets on your website or blog with a jQuery plugin and a PHP class.
Everything You Need to Build A CSS3 Responsive Fluid Layout
Responsive layout is a very good solution to taking care of users with different screen resolutions and mobile platforms.
FeatPlug
Featplug is a standalone script / wordpress plugin that can mine your WordPress posts or any other data and look for images suiting a given dimension and generates ‘featured’ section for your site using the found items.
Five Tools to Increase the RSS Subscribers for your WordPress Blog
5 plugin per WordPress per aumentare gli iscritti al feed RSS.
Get to Know the WordPress Hierarchy
I have put together this post that examines the WordPress template hierarchy and the use of conditional statements. Technically you only need two files for a WordPress theme to work, index.php and style.css.
How to display your latest Google+ update on your WordPress blog
How you can easily display your latest Google+ update on your WordPress blog.
JavaScript to Footer
WordPress default behavior is to load JavaScript in the <head> page.
This plugin will move all javascript code to the footer if the plugins have declared JavaScript properly.
MTR Podcast Recorder
MTR Podcast Recorder offers real-time recording (via a Java applet) that is saved into MP3 format on the same server where WordPress is installed.
Page Links To
This plugin allows you to make a WordPress page or post link to a URL of your choosing, instead of its WordPress page or post URL. It also will redirect people who go to the old (or “normal”) URL to the new one you’ve chosen.
Search Everything
Plugin che permette di estendere la ricerca di default di WordPress anche alle Pagine, alle Categorie e ai Tag, ai Commenti (con possibilità di escludere o includere quelli approvati), alle Bozze, gli estratti e gli allegati e ai Campi personalizzati. E’ possibile inoltre, escludere dalla ricerca gli Articoli e le Categorie, a scelta.
Speed up your blog by caching custom queries
An useful snippet to cache custom queries in WordPress. Don’t forget to update the query on line 5!
Top WordPress Responsive Themes
As WordPress is the most popular and secure platform today, it is obvious that there is plethora of great responsive WordPress themes out there. Here are some of the best available.
WP Equal Columns
Plugin per WordPress che rende uguale l’altezza delle colonne del tema usato, ad esempio la barra laterale e la colonna principale.
WP FancyZoom WordPress Plugin
A simple way to add the FancyZoom image overlay script to your blog. In short, FancyZoom is a nice, modern way of making popup images.
