Personalizzazione dei Custom fields in WordPress

Recentemente ho lavorato su un sito wordpress che richiedeva una personalizzazione della pagina di aggiunta articolo per un custom post type, perciò è stato necessario aggiungere aggiungere del css e js all’head del pannello admin, applicare l’editor predefinito di wp (tinyMCE) ad alcune textarea aggiuntive ed eliminare alcuni pulsanti di formattazione per mantenerla semplice.

Partiamo dall’inclusione dei file necessari, in functions.php bisogna inserire:

function admin_register_head() {
    $siteurl = get_option('siteurl');
    $admin_css_url = $siteurl . '/wp-content/themes/' . basename(dirname(__FILE__)) . '/admin.css';
    ?>
        <link rel="stylesheet" type="text/css" href="<? echo $admin_css_url ?>" />
    <?
}

In pratica $siteurl va a prendere l’url del blog, poi nella variabile $admin_css_url viene inserito il percorso al file admin.css contenuto nella cartella del template corrente.

Una volta fatto questo bisogna aggiungere il codice javascript per applicare tinyMCE alla textarea addizionale, sotto al link al css inserire:

<script type="text/javascript">
            jQuery(document).ready(function() {    
                if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               
                    tinyMCE.execCommand("mceAddControl", false, "ingredienti");
                }
            });
</script>

Il codice non fa altro che inserire l’editor così come per il blocco content principale anche alla textarea, in questo caso con id “ingredienti”.

Ora però c’è bisogno, per evitare confusione o pasticci dal parte dell’utente, di limitare le scelte per la formattazione a quelle base (corsivo, grassetto, ecc.) perciò nel nostro file admin.css andremo ad aggiungere le classi dei suddenti pulsanti (ricavati usando tools come Firebug) e applicando un bel display:none, niente di più semplice.

.mce_justifyleft, .mce_justifycenter, .mce_justifyright,
.mce_wp_more, .mce_fullscreen,  .mce_wp_adv,
.mce_bullist, .mce_numlist, .mce_blockquote {display: none !important;}

Spero possa risultare di aiuto a chi come me vuole poter offrire non solo un buon lavoro per quando riguarda il front-end di un template ma anche una esperienza per i gestori del sito più naturale possibile.







4 Responses to “Personalizzazione dei Custom fields in WordPress”

speravo di aver trovato una soluzione, ma non funziona sicuramente sbaglio io … ho aggiunto il codice al file functions.php ma quando vado a creare un articolo il secondo editor non appare …. puoi aiutarmi ?

Fabio added these pithy words on Mar 23 11 at 10:02 pm

Ciao Fabio, hai modificato nel codice javascript l’id (in questo caso la mia textarea aveva id “ingredienti”) per farlo corrispondere alla textarea in cui vuoi che compaia l’editor?

Raffaele added these pithy words on Apr 14 11 at 4:16 pm

Anche io l’ho inserita ma non mi appare niente…

Matteo added these pithy words on Jul 22 11 at 4:09 pm

Forse non sono stato chiaro, nell’articolo si pressupone che si siano già stati creati dei custom fields e che li si voglia personalizzare, il solo codice in questa pagina non farà comparire dei custom fields.

Per crearli potete seguire questa stupenda guida che spiega passo passo tutti i passaggi: http://wp.tutsplus.com/tutorials/plugins/how-to-create-custom-wordpress-writemeta-boxes/

Raffaele added these pithy words on Jul 22 11 at 4:21 pm