jQuery: creare un tour del sito per WordPress

Creare un tour del sito per WordPress con jQuery è semplice se si risolve il problema principale del reperimento dei dati del sito. Nel nostro esempio tali dati vengono presi dai menu di navigazione principali e riorganizzati come un diagramma ad albero. Ovviamente questa soluzione può essere enormemente superata dall'utilizzo di AJAX in combinazione con XML o JSON. Quello che vorrei sottolineare da un punto di vista dell'usabilità è che un tour del sito non dovrebbe essere automatico, ma si dovrebbe lasciare all'utente la possibilità di decidere. Vediamone insieme i dettagli.

Struttura del DOM

jQuery andrà a creare la seguente struttura:

<div id="overlay"></div>
<div id="site-tour">
	<!--contenuto dei menu-->
	<a href="#" id="close-tour">Chiudi</a>
</div>
<a href="#" id="tour-button">Tour del sito</a>
</body>
</html>

Andremo infatti a creare un effetto lightbox associando le azioni di apertura e chiusura sui due link.

Codice CSS

Ecco il codice CSS del demo:

/*= Site tour */

#site-tour {
	width: 800px;
	background: #fff;
	padding: 1em;
	border: 0.6em double #ccc;
	border-radius: 6px;
	position: absolute;
	z-index: 2;
	display: none;
}

#tour-button {
	width: 50px;
	height: 250px;
	display: block;
	text-indent: -1000em;
	background: url(images/tour.png) no-repeat;
	position: fixed;
	left: 0;
	top: 50%;
	margin-top: -125px;
}

#site-tour #close-tour {

	width: 100px;
	background: #c30;
	color: #fff;
	text-decoration: none;
	border: none;
	padding: 4px 0;
	text-align: center;
	position: absolute;
	top: -2.1em;
	right: -0.5em;
	border-radius: 4px 4px 0 0;
	font-weight: bold;

}

#site-tour #main {
	float: left;
	width: 40%;
	padding-left: 2em;
	padding-top: 1em;
}

#site-tour #categories {
	float: right;
	width: 40%;
	padding-right: 2em;
	padding-top: 1em;
}

#site-tour ul ul {
	padding-left: 2.5em;
}

#site-tour #main li,
#site-tour #categories li {
	margin-bottom: 0.5em;
	padding-left: 35px;
	background: url(images/doc.png) no-repeat 0 0;
	font-size: 1.2em;
	font-family: Palatino, Georgia, serif;
	min-height: 26px;
}

#site-tour #main > li:first-child {
	background: url(images/home.png) no-repeat 0 0;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	background: #333;
	display: none;
}		

main e categories sono i due menu di navigazione che andranno clonati e inseriti nel contenitore principale del lightbox.

Codice jQuery

Ho parlato di menu al plurale, ma è logico che se il vostro sito ha un solo menu o i dati delle pagine sono contenuti in altri elementi dovrete utilizzare gli elementi messi a disposizione dal vostro tema.

Ecco il codice:

(function($) {

	$(function() {
	
		var SiteTour = new function() {
		
			var mainMenu = $('#menu-main'),
				secMenu = $('#menu-utility-navigation'),
				wrapper = $('<div id="site-tour"/>').html('<a href="#" id="close-tour">Chiudi</a>'),
				layer = $('<div id="overlay"/>'),
				button = $('<a href="#" id="tour-button"/>').text('Tour del sito');
				
			var _populate = function() {
			
				button.appendTo('body');
			
				layer.css({
					width: $(document).width(),
					height: $(document).height(),
					opacity: 0.6
				}).appendTo('body');
				
				wrapper.css({
					top: ($(document).height() / 2) - 900,
					left: ($(document).width() / 2) - 450
				}).insertAfter('#overlay');
				
				var copyMainMenu = mainMenu.clone();
				var copySecMenu = secMenu.clone();
				
				copyMainMenu.attr({id: 'main', 'class': ''});
				copySecMenu.attr({id: 'categories', 'class': ''});
				
				copyMainMenu.appendTo('#site-tour');
				copySecMenu.appendTo('#site-tour');
			
			
			};
			
			var _handle = function() {
			
				$('#tour-button').click(function(event) {
				
					$('#overlay, #site-tour').slideDown(500);
				
					event.preventDefault();
				
				});
				
				$('#close-tour').click(function(event) {
				
					$('#overlay, #site-tour').slideUp(500);
				
					event.preventDefault();
				
				});

				
			
			
			};
			
			this.init = function() {
			
				_populate();
				_handle();
			
			};
				
		
		
		}();
	
		SiteTour.init();
	
	});



})(jQuery);

Abbiamo clonato i due menu e abbiamo resettato i loro attributi id e class. Questa operazione è fondamentale per evitare che gli stili del nostro tema si vadano a sovrapporre a quelli del nostro esempio. Quindi abbiamo inserito le copie nel contenitore del lightbox.