Articoli con Tag ‘UL’

WordPress: migliorare la lista dei commenti

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:

1
2
3
4
5
// file comments.php
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
[...]
/* Changes every other comment to a different class */
$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:

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

La riga $comment-&gt;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-&gt;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.

Continua...

Creare un pipe separatore tramite CSS

Capita spesso di vedere una serie di link distribuiti orizzontalmente separati dal carattere pipe “|”, il simbolo grafico dell’asticella verticale. Inoltre, se è presente una buona stesura HTML, ci si accorge che questa serie di link – apparentmente orizzontali – altro non sono che liste puntate UL o OL. Ne deriva che invece di scrivere:

1
2
3
<p>
    <a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#n">Link n</a>
</p>

Sarebbe meglio usare:

1
2
3
4
5
<ul>
    <li><a href="#1">Link 1</a></li>
    <li><a href="#2">Link 2</a></li>
    <li><a href="#n">Link n</a></li>
</ul>

Continua...


Stop SOPA