Как использовать div-идентификаторы в URL-адресе для перехода к определенному сообщению…Является ли трейлинг Слэш виновником?
Некоторые ссылки на моем сайте приводят пользователя к определенному сообщению в контексте на странице категории .
На сайтах, не относящихся к WP, это легко достигается путем включения #example-div-id
в URL-адрес следующим образом:
http://www.example.com#example-div-id
Но в среде WP этот URL-адрес не работает:
http://www.example.com/?cat=15#post-170
Это (неправильно) переводит окно браузера в конец страницы.
Но это действительно работает...вручную удаляя завершающая косая черта после загрузки страницы и перезагрузки страницы. Окно браузера переходит к соответствующему div или сообщению.
http://www.example.com?cat=15#post-170
.
Кто-нибудь знает, почему это так? Или как заставить WP устранить косую черту в конце? Безопасно ли устранять завершающую косую черту?
Обновление
Я попытался использовать решение EAMann ниже, реализовав довольно постоянные ссылки для облегчения перехода на якорь. Достигнутые результаты полностью нарушают мой почтовый порядок и исключают категории детей. Мой навигация основана на категориях. Я не использую страницы, но использую названия категорий в навигации. Каждая "страница" на самом деле представляет собой архив категорий, показывающий сообщения из категории. То, что я читал о постоянных ссылках, начинающихся с % категории%, заставляет меня избегать постоянных ссылок все вместе. Я, конечно, тоже не хочу начинать постоянную ссылку с идентификатора года или публикации. Это не имеет смысла на моем сайте.
http://www.example.com/category/my-category
выглядит более профессионально и "нормально", чем http://www.example.com/2009/my-category
, когда предполагаемая иллюзия состоит в том, что названия категорий на самом деле являются страницами этого бизнес-сайта.
Поэтому я был бы признателен за любые другие объяснения, почему прыжок с якоря не работает.
Обновление #2
(в ответ на комментарий ЭМАнна непосредственно к ОП)
Мой сайт - это бизнес-сайт, который по большей части отображает статический контент. В нескольких областях представлены работы с портфолио, и есть раздел блога. Сайт использует навигацию на основе категорий. Весь контент сайта написан в виде постов. Каждый пост является связан с категорией, которая определяет, где отображается запись. Меню навигации по сайту создается с помощью wp_list_categories()
. При нажатии на категорию открывается архив категорий, в котором представлены все записи из этой категории.
В настоящее время я использую структуру постоянных ссылок по умолчанию.http://www.example.com/?cat=15
показывает страницу категории.
Обновление #3
После дополнительного исследования выясняется, что плагин jQuery "innerfade", который я использую для отображения слайд-шоу в верхней части страницы, является преступник. Это не имеет никакого отношения к задней косой черте. Извините, что пошел по неверному пути.
Если я закомментирую php, который включает js-файл плагина, и переход по якорю будет работать просто отлично. Я бы предположил, что некоторые манипуляции javascript с содержимым страницы портят переход. Я решил проблему, используя $(window).scrollTo();
.
Я ценю время каждого.
2 answers
Во-первых, я бы рекомендовал использовать "довольно постоянные ссылки" поверх структуры строки запроса по умолчанию. Это устранит большинство ваших проблем с самого начала. Это превратит ваши URL-адреса http://www.example.com/?cat=15#post-170
в http://www.example.com/category/category-slug/#post-170
, и браузер правильно переместится на позицию сообщения на странице.
Тем не менее... Да, вы можете удалить завершающую косую черту. Хитрость заключается в том, чтобы добавить правило в ваш файл .htaccess
:
#remove trailing slashes
RewriteCond %{HTTP_HOST} ^(www.)?yourdomain\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]
(Это взято из учебника по Drupal, который делает то же самое...)
Как я уже говорил в обновлениях к моему вопросу... другой 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 "привет", и прокручиваю до 20 пикселей над сообщение с тем же идентификатором.
//'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);
Код плагина jquery и мой пользовательский код выше находятся в моем файле javascript, который включен в header.php