web-dev-qa-db-fra.com

Comment utiliser div -ids dans l'URL pour sauter à un poste spécifique ... Est-ce que trailing slash est le coupable?

Certains liens sur mon site amènent l'utilisateur à un message spécifique en contexte sur une page de catégorie .

Sur les sites non-WP, ceci est facilement accompli en incluant #example-div-id dans l'URL comme ceci:

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

Mais dans un environnement WP, cette URL ne fonctionne pas :

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

Ceci (incorrectement) fait passer la fenêtre du navigateur à la fin de la page.

Mais cela fonctionne ... en supprimant manuellement la barre oblique après le chargement de la page et en rechargeant la page. La fenêtre du navigateur passe au div approprié ou à la publication.

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

Quelqu'un sait pourquoi c'est comme cela? Ou comment obtenir WP pour éliminer le slash final? Est-il prudent d’éliminer le slash final?

Mettre à jour

J'ai essayé d'utiliser la solution EAMann ci-dessous, en implémentant de jolis permaliens pour faciliter le saut d'ancrage. Les résultats obtenus cassent complètement ma commande de poste et l'exclusion de catégories d'enfants. Ma navigation est basée sur les catégories. Je n'utilise pas de pages, mais utilise des noms de catégorie dans la navigation. Chaque 'page' est en réalité une archive de catégorie montrant les publications de cette catégorie. Ce que j'ai lu sur les permaliens commençant par% category% m'amène à les éviter tous ensemble. Je ne veux certainement pas commencer le lien permanent avec l'année ou le post id non plus. Cela n'a pas de sens sur mon site.

http://www.example.com/category/my-category est plus professionnel et "normal" que http://www.example.com/2009/my-category lorsque l’illusion voulue est que les noms de catégorie sont réellement des pages de ce site professionnel.

Alors, j'apprécierais toutes les autres explications pour lesquelles le saut d'ancre ne fonctionne pas.

Mise à jour # 2

(en réponse au commentaire d'EAMann directement sur l'OP) Mon site est un site Web professionnel qui, pour la plupart, affiche un contenu statique. Des travaux de portfolio ont été présentés dans quelques domaines et une section blog est disponible. Le site utilise une navigation par catégorie. Tout le contenu du site est écrit sous forme de messages. Chaque publication est associée à une catégorie qui détermine où la publication est affichée. Le menu de navigation du site est créé avec wp_list_categories(). En cliquant sur une catégorie ouvre une archive de catégorie qui présente tous les articles de cette catégorie.

J'utilise actuellement la structure permalien par défaut.
http://www.example.com/?cat=15 affiche une page de catégorie.

Mise à jour # 3

Après plus d’investigation, il apparaît que le plugin jQuery "innerfade" que j’utilise pour afficher un diaporama en haut de la page est le coupable. Cela n'a rien à voir avec le slash final. Désolé de se tromper de chemin.

Si je commente le php qui inclut le fichier js du plugin, et le saut d'ancrage fonctionne très bien. Je suppose que certaines manipulations javascript du contenu de la page gâchent le saut. J'ai travaillé sur le problème en utilisant $(window).scrollTo();.

J'apprécie le temps de chacun.

javascripturls
1
kevtrout

Comme je l'ai dit dans les mises à jour de ma question ... d'autres javascript travaillant sur la page sont en conflit avec le saut d'ancrage. J'ai implémenté more js pour contourner le conflit. L’URL a presque la même apparence qu’avant, mais avec un nom de paramètre inséré avant le symbole dièse,

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

mais j'utilise le plugin de jQuery-Howto pour obtenir les paramètres d'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];
        }
});

Je récupère le numéro de message attribué au paramètre "hi" et fais défiler jusqu'à 20 pixels au-dessus du message avec le même identifiant.

 //'hi' var used to jump to anchor          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //scroll to link or search results if url var 'hi' is present
        $(window).scrollTop($(hi).position().top-20);

le code du plugin jquery et mon code personnalisé ci-dessus vont dans mon fichier javascript qui est inclus dans header.php

0
kevtrout

Premièrement, je recommanderais d'utiliser " pretty permalinks " sur la structure de chaîne de requête par défaut. Cela éliminera la plupart de vos problèmes du getgo. Il transformera vos URL http://www.example.com/?cat=15#post-170 en http://www.example.com/category/category-slug/#post-170 et le navigateur se déplacera correctement vers la position de l'article dans la page.

Cela dit ... Oui, vous pouvez supprimer la barre oblique finale. L'astuce consiste à ajouter une règle à votre fichier .htaccess:

#remove trailing slashes
RewriteCond %{HTTP_Host} ^(www.)?yourdomain\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_Host}/$1 [R=301,L]

(Ceci est tiré de un tutoriel Drupal qui fait la même chose ...)

2
EAMann