Diseño Web, Soporte - Martes, enero 5, 2010 8:10 - Etiquetas: macosx, wordpress, xampp

vhost con xampp en macosx

Esta es la típica entrada que escribo para no olvidarme de como solucioné el problema técnico.

Definición del problema: necesidad de crear un host virtual en mi mac para desarrollar una web en modo local teniendo instalada la distribución xampp para macosx.

Si no conoces xampp es una distribución open source que te permite instalar de forma muy fácil Apache, PHP, MySQL y otras aplicaciones en tu mac, convirtiendo este en un servidor web eficiente. Se instala por defecto en Aplicaciones/XAMPP y coge como carpetas raíz del servidor dos carpetas:

• /Applications/XAMPP/xamppfiles/htdocs
• Users/usuario/Sites/

El hecho de que coja la carpetas de sitios web de nuestro ordenador es una buena idea pero no lo es tanto que tome como raiz no cada una de las carpetas que contienen los sitios si no la ruta absoluta hasta cada uno de ellos, de modo que si tengo una carpeta para desarrollar templates de wordpress llamada así, en el navegador la va a cargar desde la url http://localhost/~usuario/wordpress/

Y aquí es donde comienza el problema ya que en el desarrollo de la plantilla tendremos que introducir llamadas desde el head a ficheros css o js como mínimo, y para realizar las mismas ¿que tipo de rutas utilizamos?, absolutas o relativas. Pues ninguna nos va a funcionar correctamente.
Imaginemos que estamos trabajando con la plantilla por defecto de wordpress: default, y queremos llamar a SpryEffects.js, un fichero javascript colocado en una carpeta llamada js, alojada dentro de la carpeta default.
Veamos que tipo de url utilizaríamos.

Relativas
Si queremos llamar desde header.php a SpryEffects.js colocado en una carpeta js dentro de la carpeta default la sintaxis de la url relativa sería: ../../../wp-content/themes/default/js/SpryEffects.js
AbsolutasPara utilizar una ruta absoluta utilizaríamos /wp-content/themes/default/js/SpryEffects.js
Bueno pues con la instalación por defecto ninguna de las dos sintaxis funcionará porque la raíz del sitio está dos niveles por encima.
Para solucionar esto utilizamos los vhost.

Pasos a dar para crear un vhost.

Primero debemos activar la opción de Hosts Virtuales en el XAMPP, esto se hace modificando el archivo en /Applications/XAMPP/etc/httpd.conf, lo abrimos con un editor de textos o dese consola:

$ vim /Applications/XAMPP/etc/httpd.conf

Descomentamos la línea que dice:

# Virtual hosts
Include /Applications/xampp/etc/extra/httpd-vhosts.conf

Luego para crear nuestros hosts virutales editamos el archivo

/Applications/xampp/etc/extra/httpd-vhosts.conf

Agregamos un virtual host para el ‘localhost’ de la siguiente manera.

<VirtualHost *:80>
ServerAdmin mail@dominio.com
DocumentRoot “/Users/usuario/Sites/wordpress/”
ServerName wordpress
    ErrorLog “logs/wordpress-error_log”
    CustomLog “logs/wordpress-access_log” common
</VirtualHost>

Por último debemos referenciar el nuevo vhost en nuestro sistema. Para ello debemos modificar el fichero hosts que encontramos en

/private/etc/hosts

Y añadirle la entrada

127.0.0.1 wordpress
El problema es que este es un fichero de sistema invisible de forma que el modo más simple para editarlo es accediendo a él mediante nuestro programa de FTP navegando en modo local.
Una vez editado reinicias el XAMPP y listo!