Come utilizzare gli ID dei div nell'URL per saltare a specifici post... È lo slash finale il colpevole?

Question

Come utilizzare gli ID dei div nell'URL per saltare a specifici post... È lo slash finale il colpevole?

14 set 2010, 19:26:50

Visualizzazioni: 23.1K

Voti: 1

Alcuni link nel mio sito portano l'utente a un post specifico nel contesto di una pagina categoria.

Su siti non-WP, questo si ottiene facilmente includendo #example-div-id nell'URL in questo modo:

http://www.example.com#example-div-id

Ma in un ambiente WordPress, questo URL non funziona:

http://www.example.com/?cat=15#post-170

Questo fa saltare (erroneamente) la finestra del browser alla fine della pagina.

Ma questo funziona... rimuovendo manualmente lo slash finale dopo il caricamento della pagina e ricaricandola. La finestra del browser salta al div o post appropriato.

http://www.example.com?cat=15#post-170.

Qualcuno sa perché succede questo? O come fare in modo che WordPress elimini lo slash finale? È sicuro eliminare lo slash finale?

Aggiornamento

Ho provato a utilizzare la soluzione di EAMann qui sotto, implementando i permalink "carini" per facilitare il salto dell'ancora. I risultati ottenuti hanno completamente rotto l'ordine dei miei post e l'esclusione delle categorie figlie. La mia navigazione è basata sulle categorie. Non uso pagine, ma uso i nomi delle categorie nella navigazione. Ogni 'pagina' è in realtà un archivio di categoria che mostra i post della categoria. Da quanto ho letto sui permalink che iniziano con %category% mi porta a evitare del tutto i permalink. Certamente non voglio iniziare il permalink con l'anno o l'ID del post. Non ha senso sul mio sito.

http://www.example.com/category/my-category sembra più professionale e "normale" di http://www.example.com/2009/my-category quando l'illusione voluta è che i nomi delle categorie siano in realtà pagine su questo sito aziendale.

Quindi apprezzerei qualsiasi altra spiegazione sul perché il salto dell'ancora non funziona.

Aggiornamento #2

(in risposta al commento di EAMann direttamente sulla domanda originale) Il mio sito è un sito web aziendale che per la maggior parte mostra contenuti statici. Alcune aree hanno lavori di portfolio in evidenza e c'è una sezione blog. Il sito utilizza una navigazione basata sulle categorie. Tutti i contenuti del sito sono scritti come post. Ogni post è associato a una categoria che determina dove viene visualizzato il post. Il menu di navigazione del sito è creato con wp_list_categories(). Cliccando su una categoria si apre un archivio di categoria che presenta tutti i post della categoria.

Attualmente sto utilizzando la struttura permalink predefinita.
http://www.example.com/?cat=15 mostra una pagina di categoria.

Aggiornamento #3

Dopo ulteriori indagini, sembra che il plugin jQuery "innerfade" che sto utilizzando per visualizzare una slideshow in cima alla pagina sia il colpevole. Non ha nulla a che fare con lo slash finale. Scusate per aver seguito la strada sbagliata.

Se commento il php che include il file js del plugin, il salto dell'ancora funziona perfettamente. Immagino che qualche manipolazione javascript del contenuto della pagina stia interferendo con il salto. Ho aggirato il problema utilizzando $(window).scrollTo();.

Apprezzo il tempo di tutti.

kevtrout

1.23K

javascript urls

Commenti

Quale browser stai utilizzando? Ho problemi a riprodurre ciò che descrivi, quindi presumo che ci sia qualche tipo di effetto collaterale. Gli URL di esempio mi sembrano entrambi validi, con o senza barra.

hakre

15 set 2010 01:07:11

Sto usando Firefox. Il salto all'ancora funzionava in un certo momento e sembra essersi interrotto. Immagino che questo non mi aiuti qui, significa che probabilmente ho fatto qualcosa di stupido durante lo sviluppo per romperlo. Sto cercando idee sul perché il salto all'ancora non funzionerebbe con l'URL sopra. Grazie

kevtrout

15 set 2010 02:59:37

Puoi spiegare un po' meglio come è strutturato il tuo permalink e la navigazione? Altrimenti tutte le soluzioni che ottieni e che funzionano su installazioni standard di WP potrebbero non funzionare sulla tua...

EAMann

15 set 2010 17:14:53

Consiglio di pubblicare la tua soluzione completa come "risposta" e contrassegnarla con un segno di spunta in modo che chiunque altro si imbatta in questa pagina sappia cosa hai fatto per risolvere il problema.

EAMann

17 set 2010 22:21:20

Tutte le risposte alla domanda

Innanzitutto, consiglierei di utilizzare "permalink ottimizzati" invece della struttura predefinita con query-string. Questo eliminerà gran parte dei tuoi problemi fin dall'inizio. Trasformerà i tuoi URL come http://www.example.com/?cat=15#post-170 in http://www.example.com/categoria/slug-categoria/#post-170 e il browser si sposterà correttamente alla posizione del post nella pagina.

Detto questo... Sì, puoi rimuovere la barra finale. Il trucco è aggiungere una regola al tuo file .htaccess:

#rimuove le barre finali
RewriteCond %{HTTP_HOST} ^(www.)?tuodominio\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

(Questo è preso da un tutorial di Drupal che fa la stessa cosa...)

EAMann

32.2K

14 set 2010 19:47:50

Commenti

grazie EAMann. In passato ho avuto problemi con i pretty permalink, ma ho provato a implementarli seguendo il tuo suggerimento. Sono riuscito a farli funzionare dopo aver impostato i permessi 777 su .htaccess. Prima di testare completamente la tua soluzione (non la parte di rewrite), devo modificare del codice condizionale dipendente dalle categorie in modo che vengano recuperati i post corretti. Ti farò sapere...

kevtrout

15 set 2010 03:01:31

Grazie per le regole di .htaccess, ma non hanno rimosso lo slash. Ho seguito il link al tutorial di drupal, e sembra che l'autore affermi che le regole da te suggerite non funzionano, e di usarne un secondo set che lui pubblica. Ho provato anche quelle senza risultati. Non so se dipenda da me o da WP.

kevtrout

15 set 2010 16:13:20

kevtrout 1.23K · Accepted Answer · 2010-09-20T16:02:46Z

Come ho affermato negli aggiornamenti alla mia domanda... altri JavaScript funzionanti nella pagina sono in conflitto con il salto all'ancora. Ho implementato ulteriore codice JavaScript per aggirare il conflitto. L'URL appare quasi uguale a prima, ma con un nome di parametro inserito prima del simbolo del cancelletto,

http://www.example.com/?cat=15&hi=#post-170

ma utilizzo il 'plugin' di jQuery-Howto per ottenere i parametri dell'URL.

$.extend({
    getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
},
getUrlVar: function(name){
            return $.getUrlVars()[name];
        }
});

Recupero il numero del post assegnato al parametro URL 'hi' e scorro a 20px sopra il post con lo stesso ID.

 //var 'hi' utilizzata per saltare all'ancora          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //scorri al link o ai risultati di ricerca se è presente la var URL 'hi'
        $(window).scrollTop($(hi).position().top-20);

Il codice del plugin jQuery e il mio codice personalizzato sopra vanno nel mio file JavaScript che è incluso in header.php