Cum să folosești div-ids în URL pentru a sări la postări specifice... Este slash-ul la sfârșit problema?

Question

Cum să folosești div-ids în URL pentru a sări la postări specifice... Este slash-ul la sfârșit problema?

14 sept. 2010, 19:26:50

Vizualizări: 23.1K

Voturi: 1

Unele link-uri de pe site-ul meu duc utilizatorul la o postare specifică în contextul unei pagini de categorie.

Pe site-urile non-WP, acest lucru se realizează ușor incluzând #example-div-id în URL astfel:

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

Dar într-un mediu WordPress, acest URL nu funcționează:

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

Aceasta face (incorect) ca fereastra browserului să sară la sfârșitul paginii.

Dar aceasta funcționează... eliminând manual slash-ul final după încărcarea paginii și reîncărcând pagina. Fereastra browserului sare la div-ul sau postarea corespunzătoare.

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

Știe cineva de ce se întâmplă asta? Sau cum să faci WordPress să elimine slash-ul final? Este sigur să elimini slash-ul final?

Actualizare

Am încercat să folosesc soluția lui EAMann de mai jos, implementând permalink-uri frumoase pentru a facilita saltul ancorei. Rezultatele obținute îmi strică complet ordinea postărilor și excluderea categoriilor copil. Navigarea mea este bazată pe categorii. Nu folosesc pagini, ci folosesc nume de categorii în navigare. Fiecare 'pagină' este de fapt o arhivă de categorie care arată postări din categoria respectivă. Din ce am citit despre permalink-uri care încep cu %category%, ajung să evit complet permalink-urile. Cu siguranță nu vreau să încep permalink-ul cu anul sau ID-ul postării. Nu are sens pe site-ul meu.

http://www.example.com/category/my-category arată mai profesional și mai "normal" decât http://www.example.com/2009/my-category când iluzia intenționată este că numele categoriilor sunt de fapt pagini pe acest site de business.

Așa că aș aprecia orice alte explicații despre de ce nu funcționează saltul ancorei.

Actualizare #2

(ca răspuns la comentariul lui EAMann direct pe OP) Site-ul meu este un website de business care în mare parte afișează conținut static. Câteva zone au lucrări de portofoliu prezentate și există o secțiune de blog. Site-ul folosește o navigare bazată pe categorii. Tot conținutul site-ului este scris ca postări. Fiecare postare este asociată cu o categorie care determină unde este afișată postarea. Meniul de navigare al site-ului este creat cu wp_list_categories(). Când dai click pe o categorie se deschide o arhivă de categorie care prezintă toate postările din categoria respectivă.

În prezent folosesc structura de permalink implicită.
http://www.example.com/?cat=15 arată o pagină de categorie.

Actualizare #3

După mai multă investigație, se pare că plugin-ul jQuery "innerfade" pe care îl folosesc pentru a afișa un slideshow în partea de sus a paginii este de vină. Nu are nimic de-a face cu slash-ul final. Îmi cer scuze că am mers pe o pistă greșită.

Dacă comentez php-ul care include fișierul js al plugin-ului, saltul ancorei funcționează perfect. Aș presupune că o manipulare JavaScript a conținutului paginii strică saltul. Am rezolvat problema folosind $(window).scrollTo();.

Apreciez timpul tuturor.

kevtrout

1.23K

javascript url uri

Comentarii

Ce browser folosești? Am probleme să reproduc ce descrii, așa că presupun că există un fel de efect secundar. URL-urile exemple par valide în ambele cazuri, cu sau fără slash.

hakre

15 sept. 2010 01:07:11

Folosesc Firefox. Saltul la ancoră funcționa la un moment dat și se pare că a încetat. Cred că asta nu mă ajută prea mult aici, ceea ce înseamnă că probabil am făcut ceva greșit în timpul dezvoltării care a stricat funcționalitatea. Caut idei despre de ce saltul la ancoră nu ar funcționa cu URL-ul de mai sus. Mulțumesc.

kevtrout

15 sept. 2010 02:59:37

Poți să explici puțin mai detaliat cum este structurat sistemul tău de permalinkuri și navigare? Altfel, toate soluțiile pe care le primești și care funcționează pe instalări standard de WordPress s-ar putea să nu funcționeze pe a ta...

EAMann

15 sept. 2010 17:14:53

Recomand să postezi soluția ta completă ca un "răspuns" și să o marchezi cu o bifă, astfel încât oricine altcineva care va da peste această pagină să știe ce ai făcut pentru a rezolva problema.

EAMann

17 sept. 2010 22:21:20

Toate răspunsurile la întrebare

În primul rând, aș recomanda utilizarea "pretty permalinks" în locul structurii implicite bazate pe query-string. Acest lucru va elimina majoritatea problemelor dvs. de la bun început. Va transforma URL-urile de tipul http://www.example.com/?cat=15#post-170 în http://www.example.com/category/category-slug/#post-170, iar browserul se va deplasa corect la poziția postării în pagină.

Cu toate acestea... Da, puteți elimina slash-ul de la sfârșit. Trucul constă în adăugarea unei reguli în fișierul .htaccess:

# elimină slash-urile de la sfârșit
RewriteCond %{HTTP_HOST} ^(www.)?yourdomain\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

(Această regulă este preluată dintr-un tutorial Drupal care face același lucru...)

EAMann

32.2K

14 sept. 2010 19:47:50

Comentarii

mulțumesc EAMann. Am avut probleme ciudate înainte cu permalink-urile frumoase, dar am încercat să le implementez la sugestia ta. Le-am făcut să funcționeze bine odată ce am setat .htaccess la 777. Înainte de a testa pe deplin soluția ta, (nu partea de rescriere) trebuie să modific niște cod condițional dependent de categorie, astfel încât postările corecte să fie afișate. O să te anunț...

kevtrout

15 sept. 2010 03:01:31

Mulțumesc pentru regulile .htaccess, dar nu au eliminat slash-ul. Am urmat link-ul către tutorialul Drupal, și se pare că autorul menționează că regulile sugerate de tine nu funcționează și să folosești un al doilea set pe care le postează. Le-am încercat și pe acelea fără rezultate. Nu știu dacă e de la mine sau de la WP.

kevtrout

15 sept. 2010 16:13:20

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

După cum am menționat în actualizările la întrebarea mea... alte scripturi JavaScript care funcționează pe pagină intră în conflict cu saltul la ancoră. Am implementat mai mult JavaScript pentru a rezolva conflictul. URL-ul arată aproape la fel ca înainte, dar cu un nume de parametru inserat înainte de simbolul diez,

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

dar folosesc 'plugin-ul' de la jQuery-Howto pentru a obține parametrii din 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];
        }
});

Prelucrez numărul postului atribuit parametrului URL 'hi' și derulez la 20px deasupra postului cu același id.

 //variabila 'hi' folosită pentru a sări la ancoră          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //derulează la link sau la rezultatele căutării dacă variabila URL 'hi' este prezentă
        $(window).scrollTop($(hi).position().top-20);

codul plugin-ului jQuery și codul meu personalizat de mai sus se află în fișierul meu JavaScript care este inclus în header.php