programmazione Plugin programmare wordpress
E’ buona cosa definire tutte le variabili con le path e i percorsi interessati usando il comando define e includere i file interessati se esistono, con il comando include, ad esempio definendo url del nostro sito e includendo i file php dove abbiamo definito i nostri css e i nostri menu, come ad esempio:
|
1 2 3 4 5 |
define( 'MIOPLUGIN_URL', plugin_dir_url( __FILE__ ) ); include( plugin_dir_path( __FILE__ ) . 'includes/mioplugin-styles.php'); include( plugin_dir_path( __FILE__ ) . 'includes/mioplugin-menus.php'); |
Nel file mioplugin-styles.php caricheremo i nostri css con la funzione wordpress wp_enqueue_style aggiungendolo con la funzione add_action. A esempio se volessimo modificare lo stile di pagina admin e del frontend il file sarebbè così composto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php // Load CSS on all admin pages function mioplugin_admin_styles() { wp_enqueue_style( 'mioplugin-admin', MIOPLUGIN_URL . 'admin/css/mioplugin-admin-style.css', [], time() ); } add_action( 'admin_enqueue_scripts', 'mioplugin_admin_styles' ); // Load CSS on the frontend function mioplugin_frontend_styles() { wp_enqueue_style( 'mioplugin-frontend', MIOPLUGIN_URL . 'frontend/css/mioplugin-frontend-style.css', [], time() ); } add_action( 'wp_enqueue_scripts', 'mioplugin_frontend_styles', 100 ); |
La funzione wp_enqueue_style vengono passati dei parametri:
- nome univoco
- URL completo del foglio di stile o percorso del foglio di stile relativo alla directory principale di WordPress.
- Array di handle di fogli di stile registrati da cui dipende questo foglio di stile.
- Il supporto per il quale è stato definito questo foglio di stile. Accetta tipi di media come “tutti”, “stampa” e “schermo” o query multimediali come “(orientamento: ritratto)” e “(larghezza massima: 640px)”. Valore predefinito: ‘tutti’.
Nelle funzioni abbiamo 2 fogli di stile: mioplugin-admin-style.css per la pagina admin che si trova nel percorso admin/css e mioplugin-frontend-style.css per il frontend che si trova nel percorso frontend/css.
Al primo comando add_action viene passato l’hook admin_enqueue_scripts serve per accodare gli script per tutte le pagine di amministrazione.
Al secondo comando add_acction passiamo l’hook wp_enqueue_scripts usato quando si accodano script e stili che dovrebbero apparire sul front-end.
In caso si voglia registrare un css e avviarlo solo in determinate pagine si usa la funzione wp_register_style all’interno di una funzione alla quale viene passata una variabile con la quale si può controllare in quale pagina ci troviamo nel caso di pagine admin, per controllare in quale pagina siamo durante la navigazione del sito stesso, basta fare un controllo con i tag condizionali di wordpress.
Esempio:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php // Conditionally load CSS on plugin settings pages only function mioplugin_admin_styles( $hook ) { wp_register_style( 'mioplugin-admin', MIOPLUGIN_URL . 'admin/css/mioplugin-admin-style.css', [], time() ); if( 'toplevel_page_mioplugin' == $hook ) { wp_enqueue_style( 'mioplugin-admin' ); } } add_action( 'admin_enqueue_scripts', 'mioplugin_admin_styles' ); // Load CSS on the frontend function mioplugin_frontend_styles() { wp_register_style( 'mioplugin-frontend', MIOPLUGIN_URL . 'frontend/css/mioplugin-frontend-style.css', [], time() ); if( is_single() ) { wp_enqueue_style( 'mioplugin-frontend' ); } } add_action( 'wp_enqueue_scripts', 'mioplugin_frontend_styles', 100 ); |
Il parametro $hook verrà riempito da una stringa toplevel_page_ seguito dal nome assegnato al menu descritto al capitolo 2.
Riporto il codice in esame:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<sup>function wpplugin_settings_page() { add_menu_page( 'Plugin Name', //titolo pagina 'Plugin Menu', //titolo menu 'manage_options', //permessi di visualizzazione <mark style="background-color:#7bdcb5" class="has-inline-color">'mioplugin', //nome slug</mark> 'mioplugin_settings_page_markup', //callback 'dashicons-wordpress-alt', //icona 100 //posizione nel menu ); } add_action( 'admin_menu', 'wpplugin_settings_page' );</sup> |
Una risposta a “Capitolo 5 CSS pagine di settaggio”
[…] wp_enqueue_script e wp_enqueue_script e aggingerle a wordpress con add_action, come visto nel capitolo 5, utilizzati anche in questo caso per le pagine admin e […]