Very short snippet: Wordpress, separare le categorie in due colonne

Mercoledì 19 Novembre, 2008

Prendendo spunto da Wordpress Hack #2 - Separare le categorie in colonne nella sidebar può tornare utile "spezzare" in due colonne la lista delle categorie di Wordpress. Se la sequenza che vogliamo ottenere è da sinistra a destra, cioè cat1 | cat2 (a capo) cat3 | cat4 (a capo) etc... non è necessario usare un codice PHP, ma basta giocare con gli stili impostando il tag li a float:left e "chiudendo" con l'opportuna width il tag ul, in modo a mandare "a capo" il successivo li. Nei casi invece dove il css non arriva, ad esempio nella sequenza cat1 | cat3 (a capo) cat2 | cat4, possiamo usare questo semplice codice:

PLAIN TEXT
PHP:
  1. $cats       = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
  2. $middle     = round( (sizeof($cats)-1)/2 );
  3. $cats_left  = array_slice( $cats, 0, $middle );
  4. $cats_right = array_slice( $cats, $middle, -1 );
  5. echo '<ul class="left"><li>'.implode( '</li><li>', $cats_left ).'</li></ul>'.
  6.      '<ul class="right"><li>'.implode( '</li><li>', $cats_right ).'</li></ul>';

Post correlati

Tags: , , , , , ,
Pubblicato in CSS, Internet, PHP, Sviluppo, WordPress | 1 commento »

jQuery: bordi rotondi sulle immagini per sovrapposizione

Giovedì 30 Ottobre, 2008

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del "disastro" prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere "effetti" (effetti che esonerano dall'HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc...) con patch sui fogli di stili, particolari trucchi con l'uso di div innestati, librerie Javascript, uso delle canvas, etc...
A titolo puramente didattico vorrei illustrare un'ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Javascript, Sviluppo, Tutorials, jQuery | Nessun commento »

Wordpress: scrivere un logout personale

Lunedì 27 Ottobre, 2008

Partendo dal post Wordpress: come creare passo passo un proprio login, eseguita la procedura di login potrebbe essere utile indicare all'interno del nostro blog un link per effettuare la disconnessione, ovvero il logout. Non useremo anche in questo caso le procedure standard di Wordpress, ma vedremo come eseguire il logout a basso livello. Prima di tutto dobbiamo capire se un utente è loggato o meno. Questo è possibile interrogando semplicemente la variabile $user_ID di Wordpress. Ad esempio:

PLAIN TEXT
PHP:
  1. if( $user_ID != '' ) { // oppure if( is_user_logged_in() ) {
  2.     // un utente risulta "loggato" ...
  3. }

Una volta che sappiamo che un utente è "loggato" nel sistema, possiamo inserire un semplice link ad una nostra pagina di logout. Creiamo quindi una pagina, ad esempio logout.php, e inserendo il seguende codice:

PLAIN TEXT
PHP:
  1. /**
  2. * Esegue il logout
  3. *
  4. * @author            Giovambattista Fazioli
  5. * @email             g.fazioli@undolog.com
  6. * @web               http://www.undolog.com
  7. */
  8.  // Invoke WordPress bootstrap
  9. @require_once('wp-config.php');
  10. @require_once('wp-includes/pluggable.php');
  11. // wp logout
  12. wp_logout();
  13. // carico qualsiasi altra pagina
  14. header( "Location: /" );

E sufficiente quindi "linkare" alla nostra pagina per fornire una procedure di logout:

PLAIN TEXT
PHP:
  1. if( $user_ID != '' ) {
  2.     echo 'Esegui il <a href="logout.php">logout</a>';
  3. }

Post correlati

Tags: , , , , , , , ,
Pubblicato in Internet, PHP, Sviluppo, WordPress | 1 commento »

Wordpress: migliorare la lista dei commenti

Mercoledì 22 Ottobre, 2008

Il template standard di Wordpress (come altri) normalmente preve un layout alternato per la lista dei commenti. Nel template standard di esempio è impostata una classe css alt, secondo la logica:

PLAIN TEXT
PHP:
  1. // file comments.php
  2. <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
  3. [...]
  4. /* Changes every other comment to a different class */
  5. $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Questo fa si che nel tag li $oddcomment sia impostato una volta a vuoto ("") e una volta a class="alt". Una modifica utile potrebbe essere quella di introdurre un ulteriore classe quando è l'autore del blog a commentare un post:

image

Io, ad esempio, ho usato il seguente codice nel file comments.php:

PLAIN TEXT
PHP:
  1. <?php
  2.     $authcomment = ($comment->user_id==3)?' authcomment':'';
  3.     $classcomment = ( empty( $classcomment ) ) ? ( ($authcomment=='')?' alt':'' ) : ''; 
  4. ?>
  5. <li class="<?=$classcomment?><?=$authcomment?>" id="comment-<?php comment_ID() ?>">

La riga $comment->user_id==3 può variare in base all'ID del vostro utente. Io, ad esempio, non uso l'amministratore per rispondere sul blog, ma ho un mio utente con ID=3. Normalmente l'ID dell'amministratore è 1, se usate questa utenza potete scrivere: $comment->user_id==1. In questo modo oltre ad avere l'alternanza di layout sui commenti lasciati dai visitatori, risulta immediatamente riconoscibile la risposta dell'autore del blog.

Post correlati

Tags: , , , , , , , ,
Pubblicato in CSS, Internet, PHP, Sviluppo, Tutorials, WordPress | 2 commenti »

Wordpress: modifcare AdminBigWidth per gli sviluppatori

Venerdì 17 Ottobre, 2008

AdminBigWidth è un Plugin per Wordpress in grado di impostare l'area di lavoro dell'amministrazione a tutto schermo. È un plugin davvero semplice e banale, infatti il suo codice non fa altro che modificare la classe CSS .wrap:

PLAIN TEXT
PHP:
  1. function AdminBigWidth () {
  2.     echo '<style type="text/css">.wrap{max-width:none}</style>';
  3. }
  4. add_action('admin_head','AdminBigWidth');

Per chi come me usa l'editor di Wordpress in modalità HTML potrebbe risultare utile impostare dei caratteri a spaziatura fissa, come il Courier, invece del font proposto di default. In questo modo, almeno per gli sviluppatori, risulta più facile allineare codici sorgenti. Per fare questo basta aggiungere, sullo stile di AdminBigWidth, una nuova impostazione CSS che si rifletta sull'editor quando è in modalità HTML. Si potrebbe scrivere un Plugin (di due righe) per fare questo, tuttavia è meglio sfruttare proprio il codice di AdminBigWidth, così da evitare un ulteriore carico dovuto all'ennesimo Plugin:

PLAIN TEXT
PHP:
  1. function AdminBigWidth () {
  2.   echo '<style type="text/css">.wrap{max-width:none}#editorcontainer #content{font-family:"Courier New", Courier, monospace}</style>';
  3. }
  4. add_action('admin_head','AdminBigWidth');

Post correlati

Tags: , , , , , , , , , , ,
Pubblicato in CSS, Sviluppo, WordPress | 1 commento »

jQuery: animate backgroundColor

Mercoledì 15 Ottobre, 2008

Non ho capito bene se è un bug o una cosa voluta, comunque sia rimane il fatto che il metodo animate() di jQuery non funziona con alcuni attributi CSS, tra cui background-color (che nella versione camelize è backgroundColor). Ad esempio il seguente codice non produce nessun effetto:

PLAIN TEXT
HTML:
  1. <style type="text/css">
  2. div#box { background-color: #eee; width:100px; height:100px }
  3. </style>
  4. <!-- .... -->
  5. <div id="box"></div>

PLAIN TEXT
JavaScript:
  1. $('div#box').animate( {backgroundColor: "#f90"} );

Per risolvere il problema è necessario installare un'estensione: jQuery Color Animations. Questa permette di eseguire "animazioni" sull'attributo backgroundColor e non solo:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo, jQuery | 4 commenti »

Wordpress: come scrivere un reply to comment usando jQuery

Venerdì 3 Ottobre, 2008

Recentemente Cristiano Fino ha rilasciato un utile Plugin per Wordpress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di Wordpress.org ne ho travati un paio, tuttavia essendo un software italiano sarebbe il caso di onorare l'ottimo lavoro fatto da Cristiano). Questi Link (reply & quote) permettono di rispondere e/o quotare l'autore di un commento, eseguendo quella noiosa operazione di inserire il carattere at (@) per indicare a chi ci si rivolge. In questo tutorial voglio illustrare - per gli utenti medio-esperti - il modo di aggiugere queste due funzionalità "a mano", senza ricorrere all'istallazione di nessun Plugin. Inoltre sfrutterò le capacità di jQuery per la parte in Javascript. La tecnica che espongo è la medesima che ho usato per introdurre questa funzionalità in questo blog.

Nota: l'uso di un plugin è la miglior soluzione per chi tende a modificare spesso il proprio template Wordpress o, al limite, ha in previsione di farlo. Questo tutorial vuole solo mostrare come eseguire interventi mirati all'interno del codice Wordpress ed è dedicato ai più curiosi.

Modifica del file comments.php

La prima modifica che apportiamo è quella di inserire i link "reply" e "quote" all'interno di ogni commento. Per fare questo editiamo il file comments.php situato nella cartella del nostro tema. Questo file contiene tutte le istruzioni che consentono di visualizzare i commenti alla fine di un post. La sezione che ci interessa (che può variare leggermente da tema a tema) è il loop di creazione dei vari commenti, riconoscibile da:

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in CSS, Javascript, PHP, Sviluppo, Tutorials, WordPress, jQuery | 13 commenti »

L’arte di commentare: consigli utili

Martedì 29 Aprile, 2008

Se un "esempio" può valere più di mille parole, per un programmatore un "commento" può valere ore e ore di lavoro! Commentare il codice è spesso un'operazione noiosa e, nel momento della stesura del codice, sembra sempre un'attività inutile. Al contrario, soprattutto quando si riprendono vecchi codici, l'aver inserito i giusti commenti può risultare infinitamente utile per ricostruire percorsi mentali ormai dimenticati. Fortunatamente, per chi come me sviluppa sul Web, si ha l'enorme vatanggio di poter commentare quasi tutto il codice allo stesso modo! Il doppio slash (//) o il contenimento tramite slash asterisco e asterisco slash (/* e */) è supportato praticamente da tutti i lunguaggi di sviluppo di uso comune, derivati in pratica tutti dal C: Javascript, Actionscript, PHP, ...
Continua a leggere... »

Post correlati

Tags: , ,
Pubblicato in Sviluppo | 2 commenti »

Snipplr code 2.0: frammenti (snipp) di codice utile

Sabato 26 Aprile, 2008

Snipplr Era da tempo che volevo segnalare questo utilissimo servizio dedicato al mondo della programmazione. Snipplr (code 2.0) è un vero e proprio aggregatore o repository di frammenti di codice utili. È possibile registrarsi gratuitamente ed inviare le proprio porzioni di codice e, soprattutto, usufruire dei tantissimi snipp già presenti su sito. I linguaggi trattati sono tantissimi (Actionscript, ASP, C#, MatLab, PHP, Rails, SVN, etc...), tutti ben ordinati e catalogati. È possibile anche installare un comodo plugin per Wordpress in grado di visualizzare sul nostro blog un snipp-code tramite il suo id univoco.

Post correlati

Tags: , , , , , , , , ,
Pubblicato in ActionScript, Actionscript 3.0, Ajax, CSS, Flash, Flash CS3, Internet, Javascript, PHP, Sviluppo, WordPress | Nessun commento »