{"id":5661,"date":"2015-03-05T10:21:08","date_gmt":"2015-03-05T09:21:08","guid":{"rendered":"https:\/\/www.hostingvirtuale.com\/blog\/?p=5661"},"modified":"2015-03-31T00:56:38","modified_gmt":"2015-03-30T23:56:38","slug":"personalizzare-wordpress-con-options-framework-theme","status":"publish","type":"post","link":"https:\/\/www.hostingvirtuale.com\/blog\/personalizzare-wordpress-con-options-framework-theme-5661.html","title":{"rendered":"Personalizzare WordPress con Options Framework Theme"},"content":{"rendered":"

\"Personalizzare<\/p>\n

Quando si parla di personalizzare WordPress<\/strong> si possono intendere moltissime cose: a volte anche un semplice widget<\/em> o un plugin<\/em> personalizzato viene considerato parte di questa procedura, ma in realt\u00e0 in questo contesto faremo riferimento a qualcosa di molto pi\u00f9 specifico.<\/p>\n

Per quanto anche un plugin, configurato in pochi click, possa consentire a WordPress di attivare funzionalit\u00e0 extra<\/a> e farlo diventare un vero e proprio CMS, ci sono delle procedure legate principalmente 1) all\u2019estensione del codice del theme e 2) all\u2019installazione di nuove caratteristiche via FTP che prendono entrambi parte attiva del processo di personalizzazione<\/strong>.<\/p>\n

Options Framework Theme\u00a0(OFT)<\/h2>\n

Poniamo di essere al lavoro per modificare un theme child<\/em>: sappiamo che questo \u00e8 il modo pi\u00f9 corretto per effettuare modifiche ad un tema grafico di base<\/a>, in modo che le nostre modifiche non vengano sovrascritte al primo aggiornamento.<\/p>\n

Se desideriamo creare delle pagine di opzioni – ad esempio, dei campi di testo dinamici che vengono usati in alcune aree del sito – effettuare questa modifica a mano pu\u00f2 essere lungo e faticoso. Il framework Options Framework Theme<\/a>\u00a0(OFT) permette di snellire questo processo: \u00e8 free ed open source, ed \u00e8 decisamente potente e flessibile.<\/p>\n

Questo software<\/i> nella sua ultima versione \u00e8 a pagamento (30$), ma ne esiste una versione free<\/i> e open source<\/i> che permette di creare una pagina di opzioni personalizzata<\/b>.<\/p>\n

Come si usa OFT in WordPress<\/h2>\n

In questi termini quindi, lavoreremo su una personalizzazione di WordPress che mira a creare un pannello di opzioni gestibili <\/strong>dall\u2019amministratore del sito il quale potr\u00e0 definire\u00a0delle etichette di testo (label<\/em>) modificabili a piacere, che possono servire per creare:<\/p>\n

    \n
  1. campi di testo personalizzati<\/strong> (ad esempio una sorta di \u201cavviso del giorno\u201d visibile in tutte le pagine del sito);<\/li>\n
  2. testi dinamici<\/strong> (che sostituiscano una dicitura statica all\u2019interno del theme);<\/li>\n
  3. selezioni tipo radio button;<\/em><\/li>\n
  4. form di upload di un\u2019immagine (ad esempio un logo);<\/li>\n
  5. modifiche ai colori ed altro ancora.<\/li>\n<\/ol>\n

    Come installare ed utilizzare OFT<\/h2>\n

    Specifichiamo che ci sono tre versioni di OFT:<\/p>\n

      \n
    1. il codice di base<\/b>, che useremo solo in parte e che potete installare con la procedura descritta (permanente, e non richieder\u00e0 ulteriori interventi da parte dell\u2019amministratore del sito);<\/li>\n
    2. la versione a pagamento<\/b>, che offre esempi, funzioni extra e documentazione estesa;<\/li>\n
    3. il plugin per WordPress<\/b>, che pu\u00f2 sembrare comodo in certe circostanze, ma che crea una dipendenza nel codice del sito la quale, in futuro, pu\u00f2 creare complicazioni ed errori imprevisti.<\/li>\n<\/ol>\n

      Per installare OFT nel primo caso \u00e8 molto semplice: si scarica il file ZIP<\/a> del pacchetto cliccando su \u201cDownload ZIP<\/em>\u201d sulla destra della pagina GitHub, si scompatta il file in una cartella del proprio PC e poi si va ad uploadare via FTP<\/a>:<\/p>\n

        \n
      1. il file options.php\u00a0<\/strong>in\u00a0\/wp-content\/theme\/miotheme-child\/options.php;<\/em><\/li>\n
      2. tutta la cartella \/inc <\/strong>all\u2019interno della root del theme child in\u00a0\/wp-content\/theme\/miotheme-child\/inc<\/em>.<\/li>\n<\/ol>\n

        Poi, occorre\u00a0inserire questo frammento di codice all\u2019inizio del file functions.php<\/em> per abilitare il framework<\/em>:<\/p>\n

        define( ‘OPTIONS_FRAMEWORK_DIRECTORY’, get_template_directory_uri() . ‘\/inc\/’ );
        \nrequire_once dirname( __FILE__ ) . ‘\/inc\/options-framework.php’;
        \n$optionsfile = locate_template( ‘options.php’ );
        \nload_template( $optionsfile );<\/p>\n

        A questo punto, dovrebbe apparire all\u2019interno del nostro backend di WordPress una nuova pagina di opzioni <\/strong>all\u2019indirizzo \/wp-admin\/themes.php?page=options-framework<\/em>, nella quale troveremo vari campi da modificare.<\/p>\n

        Per personalizzare questa pagina sar\u00e0 necessario intervenire sul codice del file options.php<\/em>, in particolare nella funzione optionsframework_options()<\/em>.<\/p>\n

        Come creare un campo di testo editabile<\/strong><\/h2>\n

        Per creare un campo di testo editabile dall\u2019amministratore del sito, possiamo inserire nel file options.php<\/em> qualcosa tipo:<\/p>\n

        $options[] = array(
        \n‘name’ => __( ‘Input Text Mini’, ‘theme-textdomain’ ),
        \n‘desc’ => __( ‘Il tuo testo di prova’, ‘theme-textdomain’ ),
        \n‘id’ => ‘example_text_mini’,
        \n‘std’ => ‘Default’,
        \n‘class’ => ‘mini’,
        \n‘type’ => ‘text’
        \n);<\/p>\n

        Questo far\u00e0 apparire nell\u2019editor un campo di testo con etichetta \u201cIl tuo testo di prova<\/em>\u201d ed id pari a ‘example_text_mini’. Poi potremo stamparlo e farlo vedere dove vogliamo, nel theme<\/em>, mediante l\u2019id univoco che abbiamo definito, e la pratica funzione of_get_option<\/em>:<\/p>\n

        if ( of_get_option( ‘example_text_mini’) !=””)
        \necho of_get_option( ‘example_text_mini’);<\/p>\n

        Questo esempio rende l\u2019idea della praticit\u00e0\u00a0con cui possiamo personalizzare WordPress<\/strong>: del resto la procedura \u00e8 analoga per qualsiasi altro campo, tra cui la definizione di un campo select<\/em>, di un font, di un\u2019immagine e cos\u00ec via.<\/p>\n

        Le opportuntit\u00e0 sono quindi moltissime e sono illustrate per esteso nella pagina ufficiale<\/a> di questo framework<\/em>.<\/p>\n

        Video presentazione di\u00a0Options Framework Theme<\/h2>\n

        Di seguito pubblichiamo la presentazione in video realizzata dall’autore. Si tratta di una panoramica di Options Framework Theme e delle informazioni principali su come integrarlo in un\u00a0proprio progetto. Buona visione!<\/p>\n