Questo post è la continuazione di un post precedente. Se non lo hai ancora visto vai all’articolo per visionare la prima parte.

6. AGGIUNGERE MOLTEPLICI SIDEBARS

Il problema.
Le sidebars sono utili perché consentono di visualizzare un sacco di informazioni, come post, info autore, link, spazi pubblicitari 125 × 125 pixel e così via. Ma una sidebars può rapidamente diventare piena, e i lettori possono trovarsi in difficoltà nel trovare ciò che stanno cercando.

La soluzione.
Per applicare questo hack, bisogna duplicare il file sidebar.php e riempirlo con tutte le informazioni che desideri far visualizzare. Dopo salva il file come “sidebar-whatever.php”.

Una volta fatto, apri il file single.php e trova la riga con la funzione  get_sidebar () :

<?php get_sidebar(); ?>

Sostituiscila con:

1. <?php $sidebar = get_post_meta($post->ID, “sidebar”, true);
2. get_sidebar($sidebar);
3. ?>

Ora, quando si scrive un post, devi creare un campo personalizzato chiamato sidebar. Imposta il suo valore come il nome della barra laterale che vuoi includere. Se il suo valore è giusto, WordPress includerà automaticamente sidebar-right.php come una sidebar.

Se non si trova nessun campo sidebar personalizzato, WordPress include automaticamente la sidebar di default.

Spiegazione del codice.
Questo trucco è molto semplice. La prima cosa che abbiamo fatto è stata di cercare un campo personalizzato chiamato sidebar e ottenere il suo valore come variabile. Poi, la variabile viene usata come parametro per la funzione di Wordpress get_sidebar (), che ci permette di specificare un file particolare, da utilizzare come una barra laterale.

7. VISUALIZZARE I CONTENUTI SOLO AGLI UTENTI REGISTRATI

Il problema.
Come probabilmente saprai, WordPress permette di decidere ai lettori di creare un account e accedere al tuo blog. Se desideri aumentare i lettori registrati del tuo blog o vuoi solamente premiare i lettori più fedeli, perché non mantenere un po’ di contenuto privato solo per loro?

La soluzione.
Per raggiungere questo hack, useremo un shortcode. Il primo passo è quello di crearlo. Apri il file functions.php e incollare il seguente codice:

1. function member_check_shortcode($atts, $content = null) {
2. if (is_user_logged_in() && !is_null($content) && !is_feed()) {
3. return $content;
4. } else {
5. return ‘Sorry, this part is only available to our members. Click here to become a member!’;
6. }
7. add_shortcode(‘member’, ‘member_check_shortcode’);

Una volta fatto ciò, è possibile aggiungere il seguente codice ai tuoi post, cosi da creare una sezione o un testo (o qualsiasi altro contenuto) che verrà visualizzato solo agli utenti registrati:

1. [member]
2. This text will be displayed only to registered users.
3. [/member]

Gli utenti registrati vedranno il testo contenuto nel shortcode, mentre gli utenti non registrati vedranno visualizzato un messaggio che chiede loro di registrarsi.

Spiegazione del codice.
La prima cosa che abbiamo fatto è creare una funzione denominata member_check_shortcode, che controlla se l’ utente corrente è connesso. Se lo è,  il testo contenuto nella sezione [membri] del shortcode viene visualizzato. In caso contrario, verà visualizzato il messaggio indicato sulla linea 5 del codice.

8. VISUALIZZARE I CONTENUTI PIU’ POPOLARI NELLA SIDEBAR

Il problema.
Se desideri far visualizzare i tuoi contenuti migliori e aiutare i lettori  a scoprire i migliori articoli del tuo blog, potresti voler visualizzare nella sidebar, un elenco dei tuoi post più popolari, in base al numero dei commenti che ha ricevuto.

La soluzione.
Questo codice è molto semplice da attuare. Basta incollarlo ovunque desideri far comparire i post. Per ottenere più o meno di cinque post, è sufficiente modificare il valore di limite  sulla linea 3 del codice.

1. <h2>Popular Posts</h2>
2. <ul>
3. <?php $result = $wpdb->get_results(“SELECT comment_count,ID,post_title FROM $wpdb->
4. posts ORDER BY comment_count DESC LIMIT 0 , 5″);
5. foreach ($result as $post) {
6. setup_postdata($post);
7. $postid = $post->ID;
8. $title = $post->post_title;
9. $commentcount = $post->comment_count;
10. if ($commentcount != 0) { ?>
11. <li><a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>”>
12. <?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
13. <?php } } ?>
14. </ul>

Spiegazione del codice.
In questo codice, si utilizza l’oggetto $wpdb per inviare una query SQL personalizzata al database WordPress. Poi abbiamo verificato che i risultati non sono vuoti (cioè post senza commenti), e infine abbiamo visualizzato l’elenco dei post.

9. CREARE UN SEMPLICE MENU PER NAVIGARE TRA I TAG

Il problema.
I tag sono cool, perché permettono di catalogare i contenuti usando dei termini precisi. Ma la visualizzazione della tag clouds è spesso un problema: sono brutti, non facili da usare e possono essere molto grandi.

Quindi, qual è la soluzione? Basta creare un menù a discesa per i tag. In questo modo, la gente avrà un facile accesso ai tag.

La soluzione.
Per creare il nostro menù a discesa delle etichette, dobbiamo prima di tutto,  incollare le due funzioni qui di seguito nel file “functions.php” del nostro tema Wordpress:

1. <?php
2. function dropdown_tag_cloud( $args = ” ) {
3. $defaults = array(
4. ’smallest’ => 8, ‘largest’ => 22, ‘unit’ => ‘pt’, ‘number’ => 45,
5. ‘format’ => ‘flat’, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’,
6. ‘exclude’ => ”, ‘include’ => ”
7. );
8. $args = wp_parse_args( $args, $defaults );
9. $tags = get_tags( array_merge($args, array(‘orderby’ => ‘count’, ‘order’ => ‘DESC’)) ); // Always query top tags
10. if ( emptyempty($tags) )
11. return;
12. $return = dropdown_generate_tag_cloud( $tags, $args ); // Here’s where those top tags get sorted according to $args
13. if ( is_wp_error( $return ) )
14. return false;
15. else
16. echo apply_filters( ‘dropdown_tag_cloud’, $return, $args );
17. }
18. function dropdown_generate_tag_cloud( $tags, $args = ” ) {
19. global $wp_rewrite;
20. $defaults = array(
21. ’smallest’ => 8, ‘largest’ => 22, ‘unit’ => ‘pt’, ‘number’ => 45,
22. ‘format’ => ‘flat’, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’
23. );
24. $args = wp_parse_args( $args, $defaults );
25. extract($args);
26. if ( !$tags )
27. return;
28. $counts = $tag_links = array();
29. foreach ( (array) $tags as $tag ) {
30. $counts[$tag->name] = $tag->count;
31. $tag_links[$tag->name] = get_tag_link( $tag->term_id );
32. if ( is_wp_error( $tag_links[$tag->name] ) )
33. return $tag_links[$tag->name];
34. $tag_ids[$tag->name] = $tag->term_id;
35. }
36. $min_count = min($counts);
37. $spread = max($counts) - $min_count;
38. if ( $spread <= 0 )
39. $spread = 1;
40. $font_spread = $largest – $smallest;
41. if ( $font_spread <= 0 )
42. $font_spread = 1;
43. $font_step = $font_spread / $spread;
44. // SQL cannot save you; this is a second (potentially different) sort on a subset of data.
45. if ( ‘name’ == $orderby )
46. uksort($counts, ’strnatcasecmp’);
47. else
48. asort($counts);
49. if ( ‘DESC’ == $order )
50. $counts = array_reverse( $counts, true );
51. $a = array();
52. $rel = ( is_object($wp_rewrite) && $wp_rewrite->using_permalinks() ) ? ‘ rel=”tag”‘ : ”;
53. foreach ( $counts as $tag => $count ) {
54. $tag_id = $tag_ids[$tag];
55. $tag_link = clean_url($tag_links[$tag]);
56. $tag = str_replace(‘ ’, ‘&nbsp;’, wp_specialchars( $tag ));
57. $a[] = “\t<option value=’$tag_link’>$tag ($count)</option>”;
58. }
59. switch ( $format ) :
60. case ‘array’ :
61. $return =& $a;
62. break;
63. case ‘list’ :
64. $return = “<ul class=’wp-tag-cloud’>\n\t<li>”;
65. $return .= join(“</li>\n\t<li>”, $a);
66. $return .= “</li>\n</ul>\n”;
67. break;
68. default :
69. $return = join(“\n”, $a);
70. break;
71. endswitch;
72. return apply_filters( ‘dropdown_generate_tag_cloud’, $return, $tags, $args );
73. }
74. ?>

Una volta che hai incollato questa funzione nel file functions.php, puoi utilizzarlo per creare il menu a discesa dei tag. Basta aprire il file in cui si desidera visualizzare l’elenco e incollare il seguente codice:

1. <select name=”tag-dropdown” onchange=”document.location.href=this.options[this.selectedIndex].value;”>
2. <option value=”#”>Liste d’auteurs</option>
3. <?php dropdown_tag_cloud(‘number=0&order=asc’); ?>
4. </select>

Spiegazione del codice.
Per raggiungere questo hack, si prendiamo la funzione di Wordpress “wp_tag_cloud ()”, e la si riscrive per farla visualizzare in un elemento HTML tag “Select”.

Poi, basta richiamare il dropdown_tag_cloud appena creato () nel nostro tema per visualizzare il menu a discesa.

10. RIDIMENSIONARE AUTOMATICAMENTE LE IMMAGINI USANDO TIMTHUMB E I CODICI BREVI DI WORDPRESS

Il problema.
Un buon post di un blog ha bisogno di immagini. I lettori preferiscono sempre articoli con belle fotografie rispetto al  normale testo.
Però le immagini possono essere un problema da affrontare, soprattutto a causa delle loro diverse dimensioni.

La soluzione.
La prima cosa da fare è creare il shortcode. Incolla il seguente codice nel file functions.php:

1. function imageresizer( $atts, $content = null ) {
2. return ‘<img src=”http://media1.smashingmagazine.com/wp-content/uploads/2009/10//timthumb/timthumb.php?src=’.$content.’&w=590″ alt=”" />’;
3. }
4. add_shortcode(‘img’, ‘imageresizer’);

Ora, è possibile utilizzare la seguente sintassi per aggiungere un’immagine ridimensionata automaticamente al tuo post del blog:

1. [img]http://www.yoursite.com/yourimage.jpg[/img]

Spiegazione del codice.
Probabilmente avrai già notato come i codici brevi di WordPress rendono la vita più facile al tuo blog. Questo codice crea semplicemente un shortcode che accetta un unico parametro: l’ URL dell’ immagine. Nota che non è una buona idea per ridimensionare le immagini di grandi dimensioni, in quanto aumenta inutilmente il carico del server.  In questi casi è meglio creare e caricare immagini più piccole.

TimThumb ridimensiona l’immagine a 590 pixel di larghezza, come specificato sulla linea 2 (w = 590). Naturalmente, è possibile cambiare questo valore o aggiungere un parametro di altezza (ad esempio h = 60).

Popularity: 14%

Dallo scorso anno, il mercato dei temi di Wordpress è cresciuto incredibilmente. Il motivo? Grandi progetti, naturalmente, ma anche un sacco di nuove funzionalità sorprendenti. Il Top degli sviluppatori di Wordpress cercano sempre di ottenere il massimo di WordPress, e utilizzano tutte le loro conoscenze per trovare i modi per rendere la loro piattaforma di blogging preferita ancora più potente.

In questo articolo, sono raccolti 10 frammenti di codice utili per WordPress; trucchi e consigli per aiutarti a creare un tema Wordpress, che si distingua dalla massa.

1. STILE PERSONALE PER I POST

Il problema.
Il tuo blog ha un sacco di post, ma i post non sono tutti dello stesso tipo. Per dare uno stile speciale a uno o più dei tuoi post, è possibile usufruire di entrambe le funzioni post_class () e dell’ id del post.

La soluzione.
Per applicare questo trucco, basta aprire il file single.php, trovare il loop e sostituirlo con il seguente codice:

Spiegazione del codice.
La parte importante è in gran parte la linea 3. Qui, è stata aggiunta la funzione PHP post_class () . Introdotta in WordPress 2.8, questa funzione aggiunge le classi CSS per il post. Per esempio, si può aggiungere:

*. Hentry
*. Sticky
*. Category-tutorial
*. Tag wordpress

Con queste classi CSS aggiunte ora, è possibile dare uno stile personalizzato a tutti i post che hanno tag o quelli che appartengono alla categoria “tutorial”.

L’altro pezzo importante di questo codice è id = “post-<? Php the_ID ();?>”. Visualizzando l’ID del post, si è in grado di dare uno stile ad un post particolare. Ecco un esempio:

1. #post-876{
2. background:#ccc;
3. }

2.POST CORRELATI CON IMMAGINE

Il problema.
Dopo aver letto i tuoi post più recenti, che cosa fanno i tuoi lettori?  la maggior parte di essi lascia il tuo blog. Un ottimo modo per mantenere il loro interesse è quello di visualizzare un elenco di post correlati. Ci sono molti plug-in in grado di farlo, ma per coloro che vogliono sapere come funziona la cosa, ecco bel po’ di codice per ottenere post correlati e le miniature delle immagini.

La soluzione.
Basta incollare il codice dopo la funzione the_content () nel file single.php:

1. <?php
2. $original_post = $post;
3. $tags = wp_get_post_tags($post->ID);
4. if ($tags) {
5. echo ‘<h2>Related Posts</h2>’;
6. $first_tag = $tags[0]->term_id;
7. $args=array(
8. ‘tag__in’ => array($first_tag),
9. ‘post__not_in’ => array($post->ID),
10. ’showposts’=>4,
11. ‘caller_get_posts’=>1
12. );
13. $my_query = new WP_Query($args);
14. if( $my_query->have_posts() ) {
15. echo “<ul>”;
16. while ($my_query->have_posts()) : $my_query->the_post(); ?>
17. <li><img src=”<?php bloginfo(‘template_directory’); ?>/timthumb/timthumb.php?src=<?php echo get_post_meta($post->ID, ”post-img”, true); ?>&amp;h=40&amp;w=40&amp;zc=1″ alt=”" /><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>
18. <?php endwhile;
19. echo “</ul>”;
20. }
21. }
22. $post = $original_post;
23. wp_reset_query();

Spiegazione del Codice.

In primo luogo, questo codice fa uso di TimbThumb, uno script PHP per il ridimensionamento dell’ immagine.

Una volta che questo codice viene incollato nel tema, usa il primo tag del post per richiamare i post correlati. In questo esempio, vengono visualizzati quattro post correlati. È possibile modificare questo numero nella linea 10.

3. STILE DEI POST ALTERNATI IN HOME PAGE

Il problema.
Molti temi nuovi di Wordpress  hanno un fantastico modo di visualizzare i messaggi sulla home page. Per esempio, sono in grado di visualizzare i primi tre post più grandi rispetto ai restanti, con immagini e testo esteso,  e post rimanenti vengono mostrati in modo più semplice.

La soluzione.
Ecco un ciclo personalizzato che visualizza i primi tre post diversi rispetto al resto. È possibile sostituire il loop esistente nel file index.php con questo codice:

1. <?php
2. $postnum = 0;
3. while (have_posts()) : the_post(); ?>
4. <?php if ($postnum <= 3){ ?>
5. <div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
6. <div class=”date”><span><?php the_time(‘M j’) ?></span></div>
7. <h2>(<?php echo $postnum;?>)<a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>
8. <div class=”post-image” style=”text-align:center;”>
9. <a href=”<?php the_permalink() ?>”><img src=”<?php bloginfo(‘template_directory’ ); ?>
10. /timthumb.php?src=<?php  echo catch_that_image(); ?>&amp;amp;w=500&amp;amp;h=200&amp;amp;zc=1″ alt=”<?php the_title(); ?>” /></a>
11. </div>
12. <p><?php the_content(‘Read the rest of this entry &amp;raquo;’); ?></p>
13. <p class=”more”><a href=”#”>Read More</a></p>
14. </div>
15. </div>
16. <?php } else {
17. <div <?php post_class( ’single ’ . $end ); ?> id=”post-<?php the_ID(); ?>”>
18. <div class=”post-content”>
19. <h3><a href=”<?php the_permalink() ?>”>(<?php echo $postnum; ?>)<?php the_title(); ?></a> <?php edit_post_link(‘_’, ”, ”); ?></h3>
20. <p><?php the_excerpt( ” ); ?></p>
21. <p class=”more”><a href=”#”>Read More ?</a></p>
22. </div>
23. </div><!– End post –>
24. <?php }
25. endwhile;
26. ?>

Spiegazione del codice.
Nulla è molto difficile! E’ stata appena creata una variabile PHP, chiamata $postnum, che viene richiamato alla fine del ciclo. Se $postnum è inferiore o uguale a 3, il post viene visualizzato completo. In caso contrario, esso viene visualizzato nella sua forma più compatta.

4. UTILIZZO DI PIU’ LOOPS

Il problema.
Quando si codificano pagine Wordpress complesse con più di un loop, può accadere che uno dei loop non si comporta come previsto: per esempio, scritte indesiderate, post ripetuti, ecc… Fortunatamente, con un po’di conoscenza e con qualche molto utile, tutto questo si può evitare.

La soluzione.
L’esempio seguente è dotato di due loop distinti. Fai attenzione a rewind_posts () la funzione sulla linea 8. Questo esempio può essere utilizzato su qualsiasi file di Wordpress come ad esempio index.php, single.php, ecc

1. // First loop (get the last 3 posts in the ”featured” category)
2. <?php query_posts(‘category_name=featured&amp;showposts=3′); ?>
3. <?php while (have_posts()) : the_post(); ?>
4. <!– Do stuff… –>
5. <?php endwhile;?>
6. //loop reset
7. <?php rewind_posts(); ?>
8. //Second loop (Get all posts)
9. <?php while (have_posts()) : the_post(); ?>
10. <!– Do stuff… –>
11. <?php endwhile; ?>

Spiegazione del codice.
Questo pezzo di codice non utilizza alcun hack; rewind_posts () è una funzione standard di WordPress.

Lo scopo di rewind_posts () è quello di “pulire” un loop che è stato utilizzato in precedenza , che consente di utilizzare un secondo loop che non è influenzato dai risultati del primo.

5. SOVRASCRIVERE FACILMENTE I TITOLI DEI POST

Il problema.
the_title () è una funzione di WordPress di base, ma molto utile: visualizza il post o il titolo di una pagina. Né più né meno. Ma hai mai desiderato essere in grado di visualizzare il titolo completo nella tua lista di post e un titolo personalizzato sulla pagina del post? Se è così, scopri come fare.

La soluzione.
Nel tuo file single.php, trova la stringa  “the_title ()” e sostituiscilo con il seguente codice:

1. <?php $title = get_post_meta($post->ID, “custom-title”, true);
2. if ($title != “”) {
3. echo “<h1>”.$title.”</h1>”;
4. } else { ?>
5. <h1><?php the_title(); ?></h1>
6. <?php } ?>

Una volta fatto, si può riscrivere il titolo del post, creando un campo denominato  titolo personalizzato. Il suo valore sarà il tuo titolo personalizzato per quel post.

Spiegazione del codice.
Quando questo codice carica, si recupera il campo denominato custom-title. Se questo campo esiste e non è vuoto, viene visualizzato come titolo del post. In caso contrario, la funzione  the_title () viene chiamata e regolerà il titolo del post  visualizzato.

Vai Alla Seconda Parte…

Popularity: 27%

Firefox dispone di eccellenti componenti aggiuntivi, che rendono il lavoro dei progettisti e sviluppatori web molto più facile. Ecco la nostra lista dei migliori componenti per Firefox che tutti gli sviluppatori e web designers dovrebbero conoscere.

CSS

- Aardvark: Un’estensione sorprendente per gli sviluppatori web e designers. Permette loro di visualizzare gli attributi CSS, ID, Class, mettendo in evidenza gli elementi della pagina in modo individuale.

- ChromEdit: Con questa estensione puoi modificare l’aspetto di qualsiasi pagina modificando i file CSS e Javascript.

- SSMate: Estensione per Firefox per modificare i file CSS.

- CSS validator: Utilizzando questa estensione puoi verificare la validità della tua pagina web.

- CSSViewer: Con questo componente puoi vedere la proprietà CSS degli elementi della pagina.

- IE Tab: Designer e sviluppatori possono visualizzare i loro progetti di CSS in Internet Explorer.

- Style Sheet Chooser II: Gli utenti possono selezionare e scegliere dei fogli di stile alternativi per un sito web.

CONTROLLO & ANALISI

- Firebug: Una console per controllare JavaScript, HTML, e frammenti di codice Ajax.

- HTML Validator: Estensione interessante per convalidare le pagine web con gli standard HTML del W3C.

- JavaScript Debugger: Estensione per controllare lo JavaScript.

- Link Checker: Controlla la validità dei link in una pagina web. (Non compatibile con l’ultima versione di Firefox)

- Load Time Analyzer: Puoi visualizzare i grafici dettagliati dei tempi di caricamento delle pagine web in Firefox.

- View Dependencies: Scopri tutti i file che sono stati caricati in una pagina web.

ALTRO

- Clipmarks: Con questo componente puoi facilmente salvare porzioni di pagine web.

- Codetech: Ottima estensione per i progettisti di pagine web. Codetech è un editor di pagine web con il look di Dreamweaver.

- ColorZilla:  ColorZilla aiuta gli utenti a selezionare i colori che possono essere regolati e messi in qualsiasi altro programma.

- MeasureIt: Gli utenti possono calcolare le specifiche misure di tabelle e paragrafi.

- Professor X: Puoi verificare il contenuto dell’ head di una pagina, senza entrare nel codice sorgente.

- Screen Grab: Puoi catturare degli screenshot di qualsiasi pagina web e salvarli come file di immagine con questa estensione.

- View Source Chart: Visualizza il codice sorgente di qualsiasi pagina web

Conosci altre estensioni interessanti per designers e web developer? Inseriscile nei commenti!

Popularity: 12%