Cambiar la ruta visible de archivos CSS y JS en WordPress

Question

Cambiar la ruta visible de archivos CSS y JS en WordPress

10 sept 2010, 00:40:19

Vistas: 17.9K

Votos: 4

¿Alguien sabe cómo puedo convertir automáticamente:

http://www.example.com/wp-content/themes/theme-name/css/stylesheeet.css

en

http://www.example.com/css/stylesheet.css

Naturalmente podría crear la carpeta correspondiente en la raíz del sitio, colocar los archivos allí y referenciarlos, pero no es lo que busco.

Estoy buscando una forma de mantener todos los archivos CSS y JavaScript dentro de la carpeta del tema, pero me gustaría que WordPress muestre la ruta de URL descrita anteriormente al ver el código fuente de la página.

En una situación ideal, busco un fragmento de código que pueda agregarse y que haga esto automáticamente para todos los archivos referenciados dentro de mi carpeta del tema, incluyendo cualquier imagen.

NetConstructor.com

4.41K

temas desarrollo de temas reescritura de url referencias

Todas las respuestas a la pregunta

Comentarios

@gabrielk Esta parece una gran solución, pero por alguna razón no está funcionando para mí. He añadido las reglas de reescritura aplicables, añadido el archivo functions.php correspondiente y me aseguré de que en ambos casos las rutas a las ubicaciones originales fueran válidas. Luego reinicié apache pero al actualizar el navegador no veo ningún cambio. También debo señalar que todos mis archivos de tema hacen referencia al directorio de plantillas con <?php bloginfo('template_directory'); ?>. ¿Podrías revisar este código en tu sistema para ver qué podría necesitar cambiarse para que funcione correctamente?

NetConstructor.com

10 sept 2010 09:13:21

Mmm, a mí me funciona. Acabo de probarlo usando el tema twentyten, ligeramente modificado ya que ese tema no tiene un subdirectorio css/js.

gabrielk

10 sept 2010 20:37:29

¿Podrías verificar de nuevo? No logro entender por qué no funciona para mí.

NetConstructor.com

11 sept 2010 12:39:34

Disculpa la demora en responder, estuve fuera durante el fin de semana. Dos preguntas: 1) ¿Los enlaces permanentes de las publicaciones ya funcionan en tu sitio? 2) Si tienes una copia limpia y funcional de WP 3.0.1 con el tema Twentyten activado y los enlaces permanentes habilitados, ¿funciona para ti el segundo fragmento de código que publiqué?

gabrielk

13 sept 2010 21:40:57

1) Sí, están habilitados y funcionando. 2) No estoy usando el tema twentyten, he creado mi propio tema PERO dentro de los archivos de plantilla de este tema siempre usé <?php bloginfo('template_directory'); ?> cuando se hace referencia a un enlace de una imagen o archivo. Al agregar mi propio tema y los archivos de plantilla correspondientes, ¿no es esta la forma correcta de hacer las cosas? Si es correcto, entonces ¿es posible que me falte algo que evitaría que <?php bloginfo('template_directory'); ?> cambie la ruta URL para lograr el resultado deseado?

NetConstructor.com

14 sept 2010 05:33:40

Mostrar los 4 comentarios restantes

En una situación ideal, estoy buscando un fragmento de código que se pueda agregar y que automáticamente haga esto para todos los archivos referenciados dentro de mi carpeta de tema, incluyendo cualquier imagen.

Voy a proponer una solución alternativa que resolverá el problema.

Crear un enlace simbólico desde wp-content/themes/tu-tema hasta tu directorio raíz/css

Para crear un enlace simbólico en Linux usa el comando #ln -s. Por ejemplo:

#ln -s /home/nombre-de-usuario/public_html/wp-content/themes/nombre_de_tu_tema /home/nombre-de-usuario/public_html/css

Ahora cualquier archivo en http://ejemplo.com/wp-content/themes/tu_tema/ puede ser accedido usando la URL:

http://ejemplo.com/css/

Para que esto funcione, debes permitir la directiva FollowSymLinks en tu archivo httpd.conf. También puedes colocarlo en un archivo .htaccess que sobrescribirá la configuración en httpd.conf

En httpd.conf la configuración sería:

<Directory />
Options Indexes FollowSymLinks
</Directory>

Antes de que el cambio surta efecto, tendrás que reiniciar Apache:

#/etc/init.d/apache2 restart

Puedes leer más sobre SymLinks en Maxi-Pedia y en la Documentación de Apache

Chris_O

20.6K

10 sept 2010 02:32:00

Comentarios

+1 El único problema que puedo ver es que el enlace simbólico necesitará ser creado para cualquier tema que sea cargado y activado. De lo contrario, ¡una solución excelente!

Grant Palin

10 sept 2010 06:49:22

otro problema - esto significa que realmente necesitas reemplazar manualmente las llamadas al header

hannit cohen

10 sept 2010 07:54:15

muchas gracias por esta respuesta. De hecho también estaba pensando en hacer esto pero esperaba que pudiera haber alguna forma de agregar código al archivo functions.php que le diga automáticamente a WordPress que cambie la ubicación de todas las solicitudes que van a la ubicación real a estas nuevas ubicaciones "virtuales"... ¿Alguien sabe si hay alguna forma de hacer esto?

NetConstructor.com

10 sept 2010 08:54:36

gabrielk 1.05K · Accepted Answer · 2010-09-10T01:58:58Z

De entrada, creo que necesitarías dos cosas:

Primero, una regla de reescritura en tu archivo .htaccess como esta:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*) /wp-content/themes/theme-name/css/$1 [L]
RewriteRule ^js/(.*) /wp-content/themes/theme-name/js/$1 [L]

Segundo, añade un filtro al functions.php de tu tema de la siguiente manera:

function change_css_js_url($content) {
    $current_path = '/wp-content/themes/theme-name/';
    $new_path = '/'; // No es necesario añadir /css o /js aquí ya que estás mapeando los subdirectorios 1 a 1
    $content = str_replace($current_path, $new_path, $content);
    return $content;
}
add_filter('bloginfo_url', 'change_css_js_url');
add_filter('bloginfo', 'change_css_js_url');

Un par de advertencias: - Si un plugin o algo no usa bloginfo() o get_bloginfo() no activará el filtro. Puedes solucionar esto enganchando tu función a otros filtros según sea necesario. - Algunos plugins/temas/etc usan rutas hard-coded. No hay mucho que puedas hacer al respecto excepto modificar el código para usar una de las funciones de WP para obtener la ruta.

Aquí está el mismo ejemplo usando el tema twentyten (sin subdirectorios css/js, pero la idea es la misma).

.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^twentyten/(.*) /wp-content/themes/twentyten/$1 [L]
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

functions.php

function change_css_js_url($content) {
    $current_path = '/wp-content/themes/';
    $new_path = '/'; // No es necesario añadir /css o /js aquí ya que estás mapeando los subdirectorios 1 a 1
    $content = str_replace($current_path, $new_path, $content);
    return $content;
}
add_filter('bloginfo_url', 'change_css_js_url');
add_filter('bloginfo', 'change_css_js_url');