Categoria ‘Sviluppo’


Usare i Template WordPress per creare una Sitemap

Esiste una funzionalità in WordPress, a volte trascurata, che lo rende davvero molto versatile, soprattutto per chi crea temi: l’uso dei Template! Un Template non è altro che un file inserito nella cartella del tema. Per identificarlo come Template basta inserire all’inizio del file un particolare commento in PHP:

1
2
3
/*
Template Name: Sitemap
*/

Sfruttando questa caratteristica è possibile creare una pagina vuota, con il procedimento standard di WordPress, e collegarla al nostro template. Se create un file, ad esempio sitemap.php (aggiungendo quel commento indicato più sopra) e lo caricate all’interno della cartella del vostro tema, noterete che nell’editor WordPress durante la creazione di una pagina (non di un post) il menu Template (in basso) conterrà il nome del file template caricato. Come indicato nella sezione template:

Alcuni temi hanno dei template personalizzati da poter utilizzare per determinate pagine, che possono contenere funzionalità aggiuntive o una grafica personalizzata. [...]

Io, ad esempio, ho sfruttato questa caratteristica per creare una pagina dinamica (che esegue quindi codice PHP) in grado di mostrare una vera e propria sitemap del blog.

Creazione di una pagina Sitemap

Prima di tutto create una file sitemap.php e caricatelo all’interno della cartella del vostro tema. Dall’amministrazione di WordPress create una nuova pagina, dategli un nome e selezionate il Template dal menu che si trova sotto l’editor! Finito!

Il template, facendo parte del tema, contiene anche tutta la struttura del tema stesso ed è quindi importante saperlo scrive in modo corretto. Tuttavia ecco uno scheletro di una sitemap che potete modificare in base al tema che avete installato:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
/*
Template Name: Sitemap
*/
?>
<?php get_header(); ?>
  <div id="content">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><?php the_title(); ?></h2>
    <small class="date-time"><?php the_time('l j F, Y') ?></small>
      <div class="entry">  
        <p><strong><a href="<?php bloginfo('url'); ?>" alt="<?php bloginfo('name'); ?>">Home</a></strong></p>
        <h3>Pagine</h3>
        <ul>
          <?php wp_list_pages('title_li='); ?>
        </ul>
        <h3>Post</h3>
        <ul>
          <?php $archive_query = new WP_Query('showposts=1000');
            while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
          <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
          <?php endwhile; ?>
        </ul>
        <h3>Archivi mensili</h3>
        <ul>
          <?php wp_get_archives('type=monthly'); ?>
        </ul>
        <h3>Categorie</h3>
        <ul>
          <?php wp_list_categories('title_li=0'); ?>
        </ul>
        <h3>Feeds RSS/FeedBurner</h3>
        <ul>
          <li><a href="<?php bloginfo('rdf_url'); ?>" alt="RDF/RSS 1.0 feed"><acronym title="Resource Description Framework">RDF</acronym>/<acronym title="Really Simple Syndication">RSS</acronym> 1.0 feed</a></li>
          <li><a href="<?php bloginfo('rss_url'); ?>" alt="RSS 0.92 feed"><acronym title="Really Simple Syndication">RSS</acronym> 0.92 feed</a></li>
          <li><a href="<?php bloginfo('rss2_url'); ?>" alt="RSS 2.0 feed"><acronym title="Really Simple Syndication">RSS</acronym> 2.0 feed</a></li>
          <li><a href="<?php bloginfo('atom_url'); ?>" alt="Atom feed">Atom feed</a></li>
        </ul>
      </div>
    </div>
  <?php endwhile; endif; ?>
  </div>
  <?php get_sidebar(); get_footer(); ?>

Continua...

Safari, eliminare il blue border sui campi input

Safari, il browser Apple disponibile anche per Windows, produce un bordo blu (blue border) quando si clicca all’interno di un campo input. Se in alcuni casi può risultare piacevole, in altri diventa davvero fastidioso! Per eliminarlo basta inserire nel nostro foglio di stile:

1
2
/* ____________________________ remove blue border */
input { outline: 0 none }

O, in alternativa, direttamente come attributo nel tag input:

1
<input style="outline: 0 none" ... />

Continua...

Menu combo categorie in WordPress 2.5.1

Per creare un menu/combo (tag select) senza un bottone di submit e in grado di posizionarsi sulla categoria attualmente visualizzata, si può sfruttare il seguente codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">Seleziona una categoria</option>
<?php
$foo = ( (is_category())?(single_cat_title('', false)):"" );
$categories = get_categories('orderby=name&hierarchical=0'); $option = '';
foreach ($categories as $cat) {
   $option .= '<option '.( ($cat->cat_name == $foo)?"selected":"" ).' value="/category/'.$cat->category_nicename.'">';
    $option .= $cat->cat_name;
    $option .= ' ('.$cat->category_count.')';
    $option .= '</option>';
}
echo $option;
?>
</select>

L’evento onchange, nel tag select, permette di eliminare un eventuale bottone di submit. La funzione WordPress is_category(), invece, permette di stabilire se stiamo visualizzando un “archivio” categorie, così da ottenere il titolo/nome dell’attuale categoria visualizzata.

Continua...

Shadowbox 2.0: la release candidate 1

shadowbox È stata rilasciata la release candidate 1 (rc1) della versione 2.0 della libreria Javascript Shadowbox, di Michael J. I. Jackson, utilissima per aprire finestre dedicate alla visualizzazioni di vari tipi di media, da Flash a QuickTime a pagine HTML. In questa nuova versione troviamo:

  • Il sito è più ricco di informazioni e include ora un wizard (sullo stile di mootools) per creare "al volo" un pacchetto della libreria personalizzato alle nostre esigenze
  • Possibilità di usare un modulo standalone base, senza includere necessariamente – gli adattatori per le – librerie esterne come prototype.js, jQuery, etc…
  • Miglioramenti alla gestione e realizzazione delle Skin
  • Localizzazione

La libreria è disponibile anche su SVN all’indirizzo:

http://michaeljackson.googlecode.com/svn/trunk/shadowbox

Continua...

Tecniche di Text Replacement in Flash

La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l’uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

  • Mantiene l’accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
  • Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
  • Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
  • Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
  • Il testo è selezionabile
  • Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Continua...

Tecniche di Text Replacement in HTML/CSS

Il modo corretto di inserire titoli in grafica in una pagina Web è quello per sostituizione tramite i fogli di stile (vedi Progressive Enhancement in Accessibilità e Usabilità: unobtrusive Javascript). Questa tecnica permette di rendere accessibile il contenuto del sito a prescindere dalla visualizzazione grafica imposta dai fogli di stili. Inoltre, crawler e spider, avranno una lettura corretta dell’HTML ignorando la sostituzione grafica offerta all’utente finale. Inserire direttamente un’immagine (TAG img), infatti, rende il testo del titolo inaccessibili ai normali lettori ASCII (crawler, spider, blog plugin, screen-reader, etc…).

Continua...

PicLens in Flash con Papervision3D 2.0: parte II

Questa volta (vedi Piclens in Flash con Papervision3D 2.0) pubblico il codice (PicLens.as), ho dovuto rivedere alcune parti di codice, allineandomi così agli ultimi rilasci di Papervision3D 2.0 Great White ed ho eseguito alcuni aggiustamenti e aggiunte.

Continua...

Creare un preloader generico in Actionscript 3.0

Potrebbe sembrare un argomento scontato e ormai esaurito, eppure con Flash CS3 e la nuova gestione della classi documento (package) permesse con Actionscript 3.0, non è del tutto immediato creare un preloader funzionante. L’ultima release di Flash, infatti, gestisce il caricamento del filmato in modo diverso dalle precedenti versioni. In rete potrete trovare diverse proposte e soluzioni per ricreare un preloader “vecchio stampo”. Tuttavia i vari esempi che ho trovato non mi soddisfano pienamente in quanto richiedono di alterare il filmato in modo da farlo funzionare come un preloader classico. In pratica quando si sviluppa bisogna sempre rammentare “questa cosa la devo fare così altrimenti il preload non funziona”! E per i filmati già compilati, poi?

Loader

La soluzione che ho adottato, almeno per adesso, è stata quella di creare un filmato esterno (il mio loader – vedi esempio) in grado di caricare qualsiasi altro filmato esterno, compresa un’immagine! Questa soluzione, nonostante richieda in pratica due filmati (il loader e il filamato vero e proprio), diventa economica solo se si riesce a creare un loader in grado di essere usato più e più volte; cioè in grado di caricare qualsiasi filmato, a qualsiasi risoluzione e a qualsiasi framerate.

Continua...

Buon compleanno: perchè mi chiamo Undolog?

A due anni di distanza dall’apertura ufficiale di questo blog, voglio svelare il motivo del nome. Nessuno me l’ha mai chiesto direttamente, o forse tutti se lo sono domandato. Quando scelsi il nome, per un blog dedicato allo sviluppo, ho pensato a qualcosa che non riguardasse la “programmazione” in senso stretto.
Undolog è composto da “undo” e “log”. Log in quanto “Weblog” e “Undo” perchè credo che l’informatica ha introdotto due strumenti imbattibili, che hanno davvero cambiato il modo di lavorare di tutti, nessuno escluso: il Copia & Incolla e l’Annulla, aka “Undo” appunto.
Control+Z o Mela+Z che si voglia, l’operazione di Undo “salva la vita” (si fa per dire) di molti ogni giorno! ;) Pensare (pensateci e provate a farlo) di eliminare il Copia & Incolla e l’Annulla per un solo giorno… sarebbe follia!! Alla fine, quindi, spero anch’io che qualche post su questo blog abbia “salvato la vita” a qualcuno.
Tanti auguri Undolog…

Continua...

Reflex e ReflexMe: da Classe base a Classe

Nel post Flash CS3: creare un effetto Reflex su qualsiasi MovieClip avevamo visto com’è possibile scrivere una classe, che estende un MovieClip, per collegarla a DesignTime ad un qualsiasi MovieClip in libreria. Ho scoperto, tuttavia, che può risultare più utile ed economico fare il percorso contrario. Ho creato una classe Reflex (Reflex.as), con l’intenzione di usarla esclusivamente da codice. Ho creato questa classe pensando di passare nel costruttore il puntatore ad un MovieClip. La nuova classe Reflex contiene in sostanza lo stesso codice prima inserito nella ReflexMe, ma leggermente modificato in modo da poter funzionare espressamente da codice:

1
2
3
4
//
import undolibrary.sfx.*;
//
var rx:Reflex = new Reflex( movieClipInstance );

Continua...



Stop SOPA