Cómo usar div-ids en la URL para saltar a una publicación específica... ¿Es la barra diagonal final la culpable?

Question

Cómo usar div-ids en la URL para saltar a una publicación específica... ¿Es la barra diagonal final la culpable?

14 sept 2010, 19:26:50

Vistas: 23.1K

Votos: 1

Algunos enlaces en mi sitio llevan al usuario a una publicación específica en contexto en una página de categoría.

En sitios que no son WP, esto se logra fácilmente incluyendo #example-div-id en la url así:

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

Pero en un entorno WP, esta url no funciona:

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

Esto (incorrectamente) hace que la ventana del navegador salte al final de la página.

Pero esto sí funciona... eliminando manualmente la barra diagonal final después de cargar la página y recargándola. La ventana del navegador salta al div o publicación apropiada.

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

¿Alguien sabe por qué sucede esto? ¿O cómo hacer que WP elimine la barra diagonal final? ¿Es seguro eliminar la barra diagonal final?

Actualización

Intenté usar la solución de EAMann de abajo, implementando enlaces permanentes amigables para facilitar el salto de ancla. Los resultados obtenidos rompen completamente mi orden de publicaciones y la exclusión de categorías hijas. Mi navegación está basada en categorías. No uso páginas, sino nombres de categorías en la navegación. Cada 'página' es realmente un archivo de categoría mostrando publicaciones de la categoría. Lo que he leído sobre enlaces permanentes que comienzan con %category% me lleva a evitar los enlaces permanentes por completo. Ciertamente no quiero comenzar el enlace permanente con el año o el ID de la publicación tampoco. No tiene sentido en mi sitio.

http://www.example.com/category/mi-categoria se ve más profesional y "normal" que http://www.example.com/2009/mi-categoria cuando la ilusión pretendida es que los nombres de categorías son realmente páginas en este sitio de negocios.

Así que agradecería cualquier otra explicación de por qué el salto de ancla no está funcionando.

Actualización #2

(en respuesta al comentario de EAMann directamente en la pregunta original) Mi sitio es un sitio web de negocios que en su mayoría muestra contenido estático. Algunas áreas tienen trabajo de portafolio destacado y hay una sección de blog. El sitio usa una navegación basada en categorías. Todo el contenido del sitio está escrito como publicaciones. Cada publicación está asociada con una categoría que determina dónde se muestra la publicación. El menú de navegación del sitio se crea con wp_list_categories(). Al hacer clic en una categoría se abre un archivo de categoría que presenta todas las publicaciones de la categoría.

Actualmente estoy usando la estructura de enlaces permanentes predeterminada.
http://www.example.com/?cat=15 muestra una página de categoría.

Actualización #3

Después de más investigación, parece que el plugin jQuery "innerfade" que estoy usando para mostrar una presentación de diapositivas en la parte superior de la página es el culpable. No tiene nada que ver con la barra diagonal final. Perdón por ir por el camino equivocado.

Si comento el php que incluye el archivo js del plugin, el salto de ancla funciona perfectamente. Me imagino que alguna manipulación javascript del contenido de la página está arruinando el salto. He solucionado el problema usando $(window).scrollTo();.

Agradezco el tiempo de todos.

kevtrout

1.23K

javascript urls

Comentarios

¿Qué navegador estás usando? Tengo problemas para reproducir lo que describes, así que asumo que hay algún tipo de efecto secundario. Las URLs de ejemplo me parecen válidas en ambos casos, con o sin barra.

hakre

15 sept 2010 01:07:11

Estoy usando Firefox. El salto al ancla estaba funcionando en un momento dado y parece haber dejado de funcionar. Supongo que esto no me ayuda aquí, lo que significa que probablemente hice algo estúpido durante el desarrollo que lo rompió. Busco ideas sobre por qué el salto al ancla no funcionaría con la URL anterior. Gracias.

kevtrout

15 sept 2010 02:59:37

¿Puedes explicar un poco más cómo está construida tu estructura de enlaces permanentes y navegación? De lo contrario, todas las soluciones que obtengas y que funcionan en instalaciones estándar de WP podrían no funcionar en la tuya...

EAMann

15 sept 2010 17:14:53

Te recomiendo publicar tu solución completa como una "respuesta" y marcarla con una palomita para que cualquier otra persona que llegue a esta página sepa lo que hiciste para resolver el problema.

EAMann

17 sept 2010 22:21:20

Todas las respuestas a la pregunta

Primero, recomendaría usar "enlaces permanentes bonitos" en lugar de la estructura predeterminada de cadena de consulta. Esto eliminará la mayoría de sus problemas desde el principio. Convertirá sus URLs como http://www.example.com/?cat=15#post-170 en http://www.example.com/category/categoria-slug/#post-170 y el navegador se moverá correctamente a la posición de la publicación en la página.

Dicho esto... Sí, puedes eliminar la barra diagonal final. El truco es agregar una regla a tu archivo .htaccess:

#eliminar barras diagonales finales
RewriteCond %{HTTP_HOST} ^(www.)?tudominio\.com$ [NC]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]

(Esto está tomado de un tutorial de Drupal que hace lo mismo...)

EAMann

32.2K

14 sept 2010 19:47:50

Comentarios

gracias EAMann. He tenido problemas antes con los enlaces permanentes bonitos, pero intenté implementarlos siguiendo tu sugerencia. Logré que funcionaran bien una vez que di permisos 777 al .htaccess. Antes de probar completamente tu solución (no la parte de reescritura), necesito modificar algún código condicional dependiente de categorías para que se muestren las publicaciones correctas. Te mantendré informado...

kevtrout

15 sept 2010 03:01:31

Gracias por las reglas de .htaccess, pero no eliminaron la barra diagonal. Seguí el enlace al tutorial de drupal, y parece que el autor indica que las reglas que sugeriste no funcionan, y que se deben usar un segundo conjunto que él publica. También probé esas sin obtener resultados. No sé si soy yo o WP.

kevtrout

15 sept 2010 16:13:20

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

Como mencioné en las actualizaciones de mi pregunta... otro código JavaScript en la página entra en conflicto con el salto de anclaje. Implementé más JavaScript para solucionar el conflicto. La URL se ve casi igual que antes, pero con un nombre de parámetro insertado antes del símbolo de libra,

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

pero utilizo el 'plugin' de jQuery-Howto para obtener parámetros de 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 el número de publicación asignado al parámetro de URL 'hi' y me desplazo a 20px por encima de la publicación con el mismo id.

 //'hi' var utilizado para saltar al anclaje          
    var hi = $.getUrlVar('hi');

    if  ( hi ) {
        //desplazarse al enlace o resultados de búsqueda si la variable de URL 'hi' está presente
        $(window).scrollTop($(hi).position().top-20);

El código del plugin jQuery y mi código personalizado anterior van en mi archivo JavaScript que se incluye en header.php