Как использовать div-идентификаторы в URL для перехода к конкретной записи... Является ли слеш в конце проблемой?

Question

Как использовать div-идентификаторы в URL для перехода к конкретной записи... Является ли слеш в конце проблемой?

14 сент. 2010 г., 19:26:50

Просмотры: 23.1K

Голосов: 1

Некоторые ссылки на моем сайте перенаправляют пользователя к определенной записи в контексте страницы категории.

На сайтах без WordPress это легко достигается путем добавления #example-div-id в URL, например так:

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

Но в среде WordPress этот URL не работает:

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

Это (неправильно) прокручивает окно браузера в конец страницы.

Но это работает... при ручном удалении завершающего слеша после загрузки страницы и её перезагрузки. Окно браузера переходит к соответствующему div или записи.

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

Кто-нибудь знает, почему это происходит? Или как заставить WordPress убрать завершающий слеш? Безопасно ли удалять завершающий слеш?

Обновление

Я попробовал использовать решение EAMann ниже, реализуя красивые постоянные ссылки для облегчения перехода по якорю. Полученные результаты полностью нарушили порядок моих записей и исключение дочерних категорий. Моя навигация основана на категориях. Я не использую страницы, а использую названия категорий в навигации. Каждая 'страница' на самом деле является архивом категории, показывающим записи из категории. То, что я прочитал о постоянных ссылках, начинающихся с %category%, привело меня к полному отказу от постоянных ссылок. Я определенно не хочу начинать постоянную ссылку с года или ID записи. Это не имеет смысла на моем сайте.

http://www.example.com/category/my-category выглядит более профессионально и "нормально", чем http://www.example.com/2009/my-category, когда предполагаемая иллюзия заключается в том, что названия категорий на самом деле являются страницами на этом бизнес-сайте.

Поэтому я был бы признателен за любые другие объяснения, почему не работает переход по якорю.

Обновление #2

(в ответ на комментарий EAMann непосредственно к вопросу) Мой сайт - это бизнес-сайт, который в основном отображает статический контент. В некоторых областях есть избранные работы портфолио и есть раздел блога. Сайт использует навигацию на основе категорий. Весь контент сайта написан как записи. Каждая запись связана с категорией, которая определяет, где запись отображается. Меню навигации сайта создается с помощью wp_list_categories(). При клике на категорию открывается архив категории, который представляет все записи из категории.

В настоящее время я использую структуру постоянных ссылок по умолчанию.
http://www.example.com/?cat=15 показывает страницу категории.

Обновление #3

После дополнительного исследования выяснилось, что плагин jQuery "innerfade", который я использую для отображения слайдшоу в верхней части страницы, является причиной проблемы. Это не имеет ничего общего с завершающим слешем. Извините, что пошел по неверному пути.

Если я закомментирую php-код, который подключает js-файл плагина, переход по якорю работает отлично. Я предполагаю, что какая-то javascript-манипуляция с содержимым страницы нарушает переход. Я обошел проблему, используя $(window).scrollTo();.

Спасибо всем за уделенное время.

kevtrout

1.23K

javascript urls

Комментарии

Каким браузером вы пользуетесь? У меня не получается воспроизвести описанную вами проблему, поэтому предполагаю, что это какой-то побочный эффект. Оба примера URL выглядят валидными для меня, как с косой чертой, так и без.

hakre

15 сент. 2010 г. 01:07:11

Использую Firefox. Переход по якорю работал в какой-то момент, но потом перестал. Полагаю, это мне не помогает, значит я, вероятно, сделал что-то глупое во время разработки, что сломало эту функциональность. Ищу идеи, почему переход по якорю может не работать с указанным URL. Спасибо.

kevtrout

15 сент. 2010 г. 02:59:37

Не могли бы вы подробнее объяснить, как устроена ваша структура постоянных ссылок и навигации? Иначе все решения, которые работают на стандартных установках WP, могут не сработать в вашем случае...

EAMann

15 сент. 2010 г. 17:14:53

Я рекомендую опубликовать ваше полное решение в качестве "ответа" и отметить его галочкой, чтобы любой, кто наткнётся на эту страницу, знал, как вы решили проблему.

EAMann

17 сент. 2010 г. 22:21:20

Все ответы на вопрос

Во-первых, я рекомендую использовать "человеко-понятные постоянные ссылки" вместо стандартной структуры с query-строками. Это устранит большинство ваших проблем сразу. Это превратит ваши URL вида http://www.example.com/?cat=15#post-170 в http://www.example.com/category/category-slug/#post-170, и браузер будет корректно перемещаться к позиции поста на странице.

Тем не менее... Да, вы можете убрать завершающий слэш. Для этого нужно добавить правило в ваш файл .htaccess:

#удаление завершающих слэшей
RewriteCond %{HTTP_HOST} ^(www.)?yourdomain\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

(Это взято из руководства по Drupal, где делается то же самое...)

EAMann

32.2K

14 сент. 2010 г. 19:47:50

Комментарии

спасибо, EAMann. У меня раньше были странности с красивыми постоянными ссылками, но по твоему совету я попробовал их реализовать. Они заработали нормально после того, как я выставил права 777 на .htaccess. Перед тем как полностью протестировать твоё решение (не часть с перезаписью), мне нужно доработать условный код, зависящий от категорий, чтобы правильно выбирались записи. Я дам тебе знать...

kevtrout

15 сент. 2010 г. 03:01:31

Спасибо за правила для .htaccess, но они не убрали слеш. Я перешёл по ссылке на руководство по Drupal, и там автор пишет, что предложенные тобой правила не работают, и рекомендует использовать второй набор правил, который он приводит. Я тоже попробовал их, но безрезультатно. Не знаю, проблема во мне или в WP.

kevtrout

15 сент. 2010 г. 16:13:20

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

Как я уже упоминал в обновлениях к своему вопросу... другой JavaScript на странице конфликтует с переходом по якорю. Я реализовал дополнительный JS, чтобы обойти этот конфликт. URL теперь выглядит почти так же, как раньше, но с добавлением имени параметра перед символом решётки:

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

Но я использую 'плагин' от jQuery-Howto для получения параметров 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];
        }
});

Я получаю номер поста, присвоенный параметру URL 'hi', и прокручиваю страницу на 20px выше элемента с тем же ID.

 //переменная 'hi' используется для перехода к якорю          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //прокрутить к ссылке или результатам поиска, если присутствует переменная URL 'hi'
        $(window).scrollTop($(hi).position().top-20);

Код плагина jQuery и мой пользовательский код выше размещаются в моём JavaScript-файле, который подключается в header.php