Archivi tag: Html

Custom Sidebars in WordPress & Articoli singoli

3 Repliche

Ci sono decine di plugin che permettono di gestire le sidebar di WordPress, in maniera dinamica associandole alle categorie, o alle pagine , altri tramite logica configurabile, altri banalmente tramite un custom tag nella pagina.

Il problema fondamentale è che nei template standard non c’e’ supporto per le sidebar sulla visualizzazione di un singolo articolo.

Per sbloccare questa cosa bisogna apportare delle modifiche ai files del nostro tema.

Innanzitutto bisogna abilitare la sidebar nella pagina singola.

Apriamo il file single.php e aggiungiamo la funzione get_sidebar() prima della get_footer()

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
<?php
/**
* The Template for displaying all single posts.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">

<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<nav id="nav-single">

<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>

<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>

<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>

</nav><!-- #nav-single -->

<?php get_template_part( 'content', 'single' ); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

</div><!-- #content -->

</div><!-- #primary -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Ora anche gli articoli quando visualizzati da soli (quindi non in modalità archivio, ricerca o homepage), avranno accesso alle sidebar.

Bisogna a questo punto aggiungere una funzione di decorazione del dom di pagina affinche vengano impostate le classi giuste del css altrimenti la sidebar verrà mostrata sotto l’articolo.

Apriamo quindi il file functions.php del nostro tema e in coda, aggiungiamo questa funzione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
add_filter('body_class', 'fix_body_class_for_sidebar', 20, 2);

function fix_body_class_for_sidebar($wp_classes, $extra_classes) {

if( is_single() || is_page() ){

if (in_array('singular',$wp_classes)){

foreach($wp_classes as $key => $value) {

if ($value == 'singular')

unset($wp_classes[$key]);

}

}

}

return array_merge($wp_classes, (array) $extra_classes);

}

Fatto questo, il gioco è fatto.

Consiglio di usare poi, Content Aware Sidebar o Dynamics Sidebar come plugin per la gestione delle sidebar.

 

 

Multiple marker e Multiple infoWindow con Google Maps

Lascia una risposta

Tempo fa mi sono imbattuto in un problema che poi come sempre si è risolto in maniera abbastanza ovvia (basta studiare), e che si è riproposto ultimamente a degli amici, per cui pubblico qui la soluzione.

Le Api di google maps, permettono l’uso (nel caso delle mappe dinamiche), di markers che direttamente in javascript ci fanno aggiungere i segnaposti sulle mappe.

Ora ogni segnaposto è previsto di una property text per mostrare ad esempio l’indirizzo passando sopra un marker. Se vogliamo invece mostrare una finestra con markup html all’interno allora dobbiamo utilizzare la InfoWindow, messa sempre a disposizione da google maps.

Per far in modo che questa infowindow sia posizionata e aperta al click di un marker dobbiamo registrare l’evento per ogni marker.

La documentazione di esempio di google maps fa l’esempio con un solo marker quindi erroneamente indica questo:

1
2
3
4
5
6
7
8
9
10
11
google.maps.event.addListener(marker, 'click', function() {

infowindow.close();

infowindow.setContent("markup html");

infowindow.setPosition(marker.position);

infowindow.open(map, marker);

});

Il problema è che se marker è l’istanza corrente di un marker creato all’interno di un ciclo, quando andiamo a registrare il listener per l’evento “onclick” non dobbiamo riferirci a lui in questo modo “marker.position” per passare la posizione, perche cosi facendo passiamo la posizione dell’ultimo marker del ciclo.. Dobbiamo usare il this.. in modo che ogni listener abbia il riferimento alla sua istanza di marker.

(Si questa cavolata ha fatto perdere diverse ore a piu persone)

Praticamente quando andiamo a creare i nostri marker da mostrare, creiamo l’evento onClick per questo marker in questo modo:

1
2
3
4
5
6
7
8
9
10
11
12
13
//dopo aver creato un marker

google.maps.event.addListener(marker, 'click', function() {

infowindow.close();

infowindow.setContent(this.html);

infowindow.setPosition(this.position);

infowindow.open(map, this);

});

la property html sul marker non esiste. La uso io (in javascript gli oggetti non sono altro che degli insiemi di property che possono essere manipolati dinamicamente) in genere durante la generazione dei markers per passare il markup che deve essere contenuto nella infowindow, cosi da non settare la property text e disabilitare il baloon standard.

 

Esempio di marker con la InfoWindow:

That’s All Folks..

 

 

 

Ottenere le coordinate GPS dal browser con HTML5

Lascia una risposta

Un modo semplice e veloce per ottenere le coordinate gps ,in una pagina html, mediante html5 .

La funziona javascript getCurrentPosition interroga ,se disponibile ,il nostro dispositivo gps (previa richiesta di autorizzazione)  . Se non riesce ad ottenerla da gps può comunque derivarla dall’indirizzo ip, ma il comportamento e le regole sono completamente a carico dell’implementazione del browser.

Questa è la funzione che va usata:

1
2
3
4
5
6
7
8
9
10
11
12
13
if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(successCallback,

errorCallback,

{timeout:60000});

}else{

alert("Il browser non ha un dispositivo GPS");

}

Come vedete la funzione ha due callback, uno che viene invocato in caso di successo e l’altro di errore. Nei parametri e’ possibile impostare il timeout, cioè il tempo di attesa di synch con il gps prima di andare in errore di timeout. Da notare che questo tempo scatta da prima che appaia la popup di richiesta autorizzazione, quindi influisce molto nell’usabilità dell’interfaccia utente. 60 secondi in genere sono un valore sufficiente.

Ora descriviamo cosa deve fare la nostra pagina con i due callback:

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
//callback in caso di successo

function successCallback(position){

alert("Posizione:[lat="+position.coords.latitude+"][long="+position.coords.longitude+"]");

}

//callback in caso di errore

function errorCallback(error){

switch(error.code){

case error.PERMISSION_DENIED: alert('accesso negato');break;

case error.POSITION_UNAVAILABLE:alert('impossibile ottenere posizione');break;

case error.TIMEOUT:alert('timeout');break;

default: alert('errore generico');break;

}

}

Alcuni browser memorizzano l’autorizzazione con durata giornaliera, altri richiedono l’autorizzazione ogni volta.

Una cosa a cui prestare attenzione è il fatto che la funzione è asincrona, quindi difficile da gestire all’interno di un evento di button pressed o cose simili.

Consigli:

Meglio sfruttarlo nell’onload del document , magari facendo una pagina adHoc che aspetti il timeout della funzione mostrando l’icona di loadinprogress, in modo da far capire all’utente che la lettura dei dati dal gps è in corso.

Qui troverete una documentazione accurata, anche se solo in draft, ma vi consiglio di testare le vostre pagine con tutti i browser in quanto hanno comportamenti molto differenti.

http://dev.w3.org/geo/api/spec-source.html