Wordpress

Problema degli anchor-link in sito con home-page OnePage

Un problema che mi si è posto durante la realizzazione di un sito in WordPress è stato il seguente:

1) L’Home-Page era in stile sito One-Page, quindi ogni voce del menu principale era un anchor-link strutturato come nell’esempio qui di seguito

<a href="#nameSection"></a>

ognuno dei quali rimandava all’elemento html con

<div id="nameSection">

2) Nelle pagine interne del sito il menu con gli anchor-link naturalmente non funzionava, facendo essi riferimento alle sezioni della Home.

3) Utilizzare l’url completo del sito unito all’anchor link bypassava si il problema, ma così scritti i link del menu avevano come effetto collaterale di ricaricare la pagina senza più scrolling.

La soluzione trovata alla fine è stata la seguente


jQuery( document ).ready(function() {
	var url = window.location.href;
	var sensor = url.indexOf("#");
	if(!((url == "http://www.feedback.it/") || (sensor > 0))) {
		var links = jQuery("#menu-primary-1 a");
		jQuery.each(links, function( index, value ) {
			jQuery("#menu-primary-1 a:nth-child(" + index + ")").attr("href", function() {
				console.log("href: " + this.href);
				var link = this.href;
				return "http://www.feedback.it/" + link.substr(link.indexOf('#'));
			});;
		});			
	}
});

Spiegazione:

Alla fine del caricamento della pagina (riga 1) assegno alla variabile “url” l’url della pagina corrente (riga 2) e alla variabile “sensor” l’esito della funzione “indexOf” alla stringa ottenuta nella variabile “url” sul carattere “#” (riga 3). Così facendo posso eseguire un controllo accurato sulla pagina attualmente caricata verificando se si tratti della home page contenente gli anchor-link o di una pagina interna (riga 4). Nel caso la pagina attuale sia una pagina interna procedo a cambiare i link nell’attributo href dei tag anchor di ogni voce del menu principale (riga 5-13). Alla variabie “links” assegno il numero di link da modificare (riga 5), tramite ciclo “each” (riga 6) cambio in progressione l’href di ogni link del menu (riga 7) assegnandogliene uno riferito all’home page seguito dall’anchor-link della relativa sezione.

Utilizzare Ajax in WordPress

Per la recente creazione di un gestionale ho utilizzato come piattaforma di base WordPress in sinergia con un nuovo framework CRUD chiamato XCRUD. In fase di sviluppo ad un certo punto ho avuto la necessità di implementare un interfaccia grafica che generasse dei box interattivi. Al trascinamento di un box all’interno di un altro box principale, l’azione avrebbe dovuto essere memorizzata al volo nel database MySql, per tenere traccia di quale box “figlio” era stato spostato in quale box “padre”. Sapendo di dover utilizzare Ajax ma non sapendo bene come utilizzarlo in WordPress mi sono documentato un pò in rete. Le guide trovate non sono state il massimo della chiarezza, con la conseguenza che alcune cose ho dovuto intuirle da me. Scrivo quindi questo articolo per guidarvi (e ricordarmi) il procedimento da seguire.