fabrizioortis.com

Categoria: Novità

  • Da Idea a Plugin WordPress: Creare una Modalità Manutenzione (con Traduzione!)

    Hai mai pensato di creare un tuo plugin per WordPress? Può sembrare complicato, ma con gli strumenti giusti e un approccio passo-passo, è più accessibile di quanto pensi. In questo post, vedremo come creare un plugin semplice ma utile: una modalità di manutenzione personalizzabile per il tuo sito. Seguiremo insieme l’intero processo, dalla scrittura del codice alla preparazione per la distribuzione, inclusa la traduzione multilingua e il controllo di conformità. Per esemplificare il processo utilizzeremo un caso reale: la creazione di un plugin di manutenzione per i miei clienti del mio brand OperWEB.

    Cosa creeremo: Un plugin “OperWEB Maintenance Mode” (ma voi chiamatelo come volete) che:

    • Mostra una pagina di manutenzione personalizzata ai visitatori.
    • Permette agli amministratori di vedere il sito normalmente.
    • Ha una pagina di impostazioni per attivare/disattivare, caricare un logo, inserire testo e scegliere colori.
    • È traducibile in diverse lingue (Italiano e Inglese inclusi).
    • È conforme agli standard di WordPress.org.

    Strumenti che useremo:

    • Un editor di codice (es. VS Code, Sublime Text, ecc.)
    • Una installazione locale o di test di WordPress
    • Il plugin Loco Translate (gratuito)
    • Il plugin Plugin Check (gratuito, da WordPress.org)

    1. La Struttura Base del Plugin

    Ogni plugin inizia con una cartella e un file PHP principale.

    1. Crea la Cartella: Dentro la tua cartella wp-content/plugins/, crea una nuova cartella. Chiamiamola operweb-maintenance-mode.
    2. Crea il File Principale: Dentro questa cartella, crea un file chiamato operweb-maintenance-mode.php.
    3. L’Intestazione (Header): Apri il file e inserisci l’intestazione PHP. Questa dice a WordPress tutto sul tuo plugin:
    <?php
/**
 * Plugin Name:       OperWEB Maintenance Mode
 * Description:       Attiva una pagina di manutenzione personalizzata con opzioni.
 * Version:           2.3.3
 * Author:            Fabrizio Ortis | OperWEB
 * Author URI:        https://www.operweb.com
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       operweb-maintenance-mode
 * Domain Path:       /languages
 */

// Impedisci l'accesso diretto
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// ... il resto del codice del plugin andrà qui ...

    Plugin Name, Description, Author, etc.: Informazioni mostrate nella bacheca.

    License: Fondamentale per la distribuzione (GPLv2 or later è lo standard).

    Text Domain & Domain Path: Cruciali per le traduzioni (ne parleremo dopo).

    2. La Logica Principale: Mostrare la Pagina

    Vogliamo che il nostro plugin controlli ogni caricamento di pagina sul frontend e, se necessario, mostri la pagina di manutenzione. Usiamo l’hook template_redirect.

    function owm_maintenance_mode_check() {
    $options = get_option( 'owm_options' ); // Legge le impostazioni (che creeremo dopo)

    // 1. Manutenzione attiva dalle impostazioni?
    if ( empty( $options['enable'] ) || $options['enable'] != 1 ) {
        return; // No, non fare nulla.
    }

    // 2. L'utente è un admin?
    if ( current_user_can( 'manage_options' ) ) {
        return; // Sì, mostra il sito normale.
    }

    // 3. Per tutti gli altri: mostra la pagina di manutenzione
    $maintenance_file = plugin_dir_path( __FILE__ ) . 'maintenance.php'; // Il nostro file template
    if ( file_exists( $maintenance_file ) ) {
        // Invia header HTTP 503 (importante per SEO)
        if ( ! headers_sent() ) {
            header( 'HTTP/1.1 503 Service Unavailable', true, 503 );
            header( 'Content-Type: text/html; charset=utf-8' );
            header( 'Retry-After: 3600' ); // Riprova tra 1 ora
        }
        // Carica il template e ferma WordPress
        include( $maintenance_file );
        die();
    }
}
add_action( 'template_redirect', 'owm_maintenance_mode_check' );

    Avremo bisogno anche di un file maintenance.php nella stessa cartella, che conterrà l’HTML e il CSS della nostra pagina (lo vedremo dopo).

    3. Creare una Pagina di Impostazioni (Settings API)

    Per permettere all’utente di configurare il plugin, usiamo la Settings API di WordPress. È un po’ “verbosa” ma potente.

    1. Aggiungere la Pagina: Usiamo add_options_page() per aggiungere una voce sotto “Impostazioni” nel menu admin.
    2. Registrare le Impostazioni: Con register_setting(), diciamo a WordPress quale opzione salvare nel database (es. owm_options) e quale funzione usare per “pulire” i dati (owm_sanitize_options).
    3. Definire Sezioni e Campi: Usiamo add_settings_section() e add_settings_field() per definire la struttura della pagina e i singoli campi (checkbox, uploader logo, editor testo, color picker).
    4. Funzioni Callback: Ogni campo ha bisogno di una funzione PHP che stampa il suo HTML (es. owm_field_enable_cb() per la checkbox).
    5. Render Pagina: Una funzione (owm_options_page_html()) stampa l’HTML base della pagina, il tag <form> e usa settings_fields() e do_settings_sections() per far apparire tutto.

    (Nota: Il codice completo per la Settings API è abbastanza lungo, lo trovi nel file finale del plugin che trovi in fondo al post e potrai modificare liberamente. Qui ci concentriamo sui concetti).

    Per campi avanzati come l’uploader media e il color picker, dobbiamo anche “accodare” gli script e gli stili necessari usando wp_enqueue_media(), wp_enqueue_style('wp-color-picker') e wp_enqueue_script().

    4. Internazionalizzazione (i18n): Preparare per la Traduzione

    Per rendere il plugin multilingua:

    1. Text Domain & Domain Path: Assicurati che siano definiti nell’header del plugin. Text Domain è un identificatore unico (es. operweb-maintenance-mode), Domain Path dice a WordPress dove trovare i file di lingua (es. /languages).
    2. Marcare le Stringhe: Ogni stringa di testo visibile all’utente (nel backend o nel frontend) deve essere “avvolta” in una funzione di traduzione:
      • __( 'Stringa da tradurre', 'operweb-maintenance-mode' ): Restituisce la stringa tradotta (per usarla in variabili o funzioni).
      • _e( 'Stringa da tradurre', 'operweb-maintenance-mode' ): Stampa direttamente la stringa tradotta (echo).
      • esc_html__(...), esc_attr__(...), esc_html_e(...), esc_attr_e(...): Come sopra, ma fanno anche l’escape per sicurezza prima di restituire/stampare.
      • printf() / sprintf(): Se hai variabili dentro una stringa, usa queste funzioni con commenti /* translators: ... */ per spiegare i segnaposto.
      Esempio:
    // Prima:
echo '<h1>Sito in Manutenzione</h1>';
// Dopo:
echo '<h1>' . esc_html__( 'Sito in Manutenzione', 'operweb-maintenance-mode' ) . '</h1>';

    5. Tradurre con Loco Translate

    Ora che il codice è pronto, usiamo Loco Translate per creare i file di lingua:

    1. Installa e Attiva: Aggiungi il plugin Loco Translate al tuo sito di test.
    2. Vai su Loco Translate > Plugins: Trova “OperWEB Maintenance Mode” e cliccaci.
    3. Crea Modello (.pot): Clicca “Crea modello”. Conferma per salvarlo in languages/operweb-maintenance-mode.pot. Questo file contiene l’elenco di tutte le stringhe originali.
    4. Crea Traduzione Italiana (it_IT):
      • Clicca “Nuova lingua”.
      • Scegli “Italiano (Italia)”.
      • Importante: Scegli la posizione “File dell’autore” (salverà in wp-content/plugins/operweb-maintenance-mode/languages/).
      • Clicca “Inizia a tradurre”.
      • Copia ogni stringa sorgente nella casella di traduzione.
      • Clicca “Salva”. Verranno creati it_IT.po (modificabile) e it_IT.mo (compilato).
    5. Crea Traduzione Inglese (en_US):
      • Clicca di nuovo “Nuova lingua”.
      • Scegli “Inglese (Stati Uniti)”.
      • Scegli la posizione “File dell’autore”.
      • Clicca “Inizia a tradurre”.
      • Traduci ogni stringa italiana in inglese.
      • Clicca “Salva”. Verranno creati en_US.po e en_US.mo.

    6. Recuperare i File di Traduzione

    I file .pot, .po e .mo sono stati creati da Loco Translate direttamente sul tuo server, nella cartella /wp-content/plugins/operweb-maintenance-mode/languages/.

    Se non hai lavorato su un server locale devi scaricare questi file (usando FTP, SFTP o il File Manager del tuo hosting) e includerli nella cartella /languages del tuo plugin quando lo distribuisci (es. nello ZIP che caricherai su WordPress.org).

    (Dopo aver recuperato i file, puoi anche disattivare Loco Translate dal tuo sito di test).

    7. Controllo di Conformità con “Plugin Check”

    Prima di pensare alla pubblicazione su WordPress.org, è fondamentale controllare che il tuo plugin rispetti gli standard.

    1. Installa e Attiva: Aggiungi il plugin Plugin Check al tuo sito di test.
    2. Vai su Strumenti > Plugin Check.
    3. Seleziona il tuo plugin (“OperWEB Maintenance Mode”) dal menu a tendina.
    4. Clicca “Check it!”.
    5. Il plugin analizzerà il codice e riporterà eventuali Errori (Errors) e Avvisi (Warnings).
      • Errori: Vanno corretti obbligatoriamente (es. problemi di sicurezza, funzioni deprecate, output non “escapato”).
      • Avvisi: È fortemente consigliato correggerli (es. standard di codice, commenti mancanti per i traduttori).

    Abbiamo visto durante lo sviluppo che questo strumento è molto pignolo. Correggi tutto ciò che riporta, seguendo i link “Approfondisci” che fornisce per capire il problema. Riesegui il check finché non ci sono più errori critici.

    Prossimi Passi: Verso la Pubblicazione

    Con un plugin funzionante, traducibile e controllato, sei pronto per gli ultimi passi prima della distribuzione:

    1. Creare un readme.txt: Questo file (in un formato specifico, non Markdown) è la “vetrina” del tuo plugin su WordPress.org. Deve essere in inglese e descrivere il plugin, l’installazione, le FAQ, ecc. Leggi le linee guida qui.
    2. Preparare lo ZIP: Assicurati che la cartella del tuo plugin contenga tutti i file necessari (PHP, JS, CSS, assets, la cartella languages con i file .pot, .po, .mo, e il readme.txt). Crea un file .zip di questa cartella.
    3. Inviare per la Revisione: Carica il tuo .zip tramite la pagina Add Your Plugin su WordPress.org e attendi la revisione manuale.

    Conclusione

    Creare un plugin per WordPress, anche semplice, tocca molti aspetti dello sviluppo: PHP, API di WordPress, sicurezza, internazionalizzazione. Seguendo questi passaggi e usando strumenti come Loco Translate e Plugin Check, puoi trasformare la tua idea in un plugin robusto e pronto per essere condiviso con la community. Buon coding!

    operweb-maintenance-modeDownload

  • Riparte il blog

    Dopo una pausa di 4 anni e mezzo ricomincio a parlare di Web, mi concentrerò sugli e-commerce e sul web marketing, senza tralasciare gli impatti sociali che Internet e il Web hanno sulle nostre vite.

    Quello che invece tralascerò è la grafica fatta di template tutti uguali e foto tutte “ugualissime” :).

    Less is more.