Cuando deseamos trabajar en un nuevo proyecto, o realizar pruebas sobre una página web ya existente, y no queremos que los cambios se publiquen o puedan romper lo que ya está online, lo mejor es convertir nuestro ordenador en un servidor local para trabajar sin riesgos ni contratiempos. Si decides seguir este tutorial hasta el final, aprenderás a instalar XAMPP en un ordenador Mac y tener una plataforma de pruebas gratuita para lo que quieras.
Pero, además, también aprenderás a instalar WordPress en local, corregir los problemas de subida de archivos (actualizaciones, temas, medios o plugins) y configurar una cuenta de email para que funcione de forma real en tu proyecto offline.
Antes de empezar, quiero que entiendas que XAMPP fue creado inicialmente para Windows, y más tarde crearon las versiones para Linux y Mac. Al ser sistemas muy diferentes en cuanto a la administración de la seguridad y gestión de los archivos, en macOS nos encontraremos con algún contratiempo que tendremos que solventar cuando aparezca.
Siempre podréis instalar otro paquete diferente para convertir vuestro ordenador en un servidor local con MAMP, es mucho más sencillo, pero con menores posibilidades de configuración.
Qué se necesita para instalar WordPress con XAMPP en un ordenador con Mac
Para empezar nuestro proyecto, o página web basada en WordPress, no necesitamos gastar nada, todo lo que necesitamos podemos conseguirlo de las páginas oficiales de forma gratuita y sin limitaciones. Vamos a descargar en el escritorio, o en una carpeta localizable de nuestro ordenador, los archivos de instalación de XAMPP y de WordPress.
Para hacer funcionar el envío de emails, instalaremos un plugin que permite conectar con un servicio externo. Así que tendremos que crearnos una cuenta gratuita en Brevo (antiguo Sendinblue).
Descargar WordPress en el ordenador
Accediendo a la página oficial de wordpress.org podemos ir a la descarga de los archivos de instalación de WordPress para guardarlos y reservarlos hasta que los necesitemos.
Debéis fijaros en la versión de PHP recomendado que aparece debajo del botón de descarga, en el siguiente punto lo necesitaremos para saber que versión de XAMPP tenemos que descargar.
Qué versión de XAMPP descargar en el ordenador
Abrimos la página oficial de XAMPP en el navegador y comprobamos que versiones son las más recientes para descargar. Si eres desarrollador te interesa disponer de la más nueva, pero para utilizar con WordPress no siempre es lo más aconsejable.
Con WordPress vamos a depender de complementos, temas y plugins de terceros que en muchos casos estarán programados con versiones de PHP más antiguas. Si trabajamos con la versión más nueva, probablemente tengamos problemas a la hora de configurar las opciones o de hacerlo funcionar correctamente.
Actualizar cualquier plugin o tema de WordPress requiere un esfuerzo adicional que los desarrolladores no aplican hasta el último momento, cuando la versión de PHP que han utilizado deja de tener soporte y actualizaciones.
Yo aconsejo elegir una versión por encima de la que recomienda WordPress, ya que las versiones de PHP suelen solaparse y antes de que llegue al final de su vida la versión antigua , convive una temporada con la versión que la sucederá.
Para elegir una versión diferente a la más nueva que aparece en la página principal para instalar XAMPP en un ordenador Mac, debemos acceder a la pestaña "Descargas" del menú superior o picar en el botón donde pone "Pulsa aquí para otras versiones".
Si deseamos una versión aún más antigua, podemos navegar a través de la página de "Más Descargas" desde el enlace que aparece en la parte inferior.
Pasos para instalar XAMPP en Mac
Con el archivo descargado, procedemos a iniciar la instalación picando dos veces sobre él. Se abrirá un disco virtual con el instalador que ejecutaremos y aceptaremos como "app descargada de internet" dando acceso con nuestra clave del ordenador.
Ahora procedemos a seguir las indicaciones que vayan apareciendo en las diferentes ventanas de la instalación. Basta con ir dando a "Siguiente" (Next), sin modificar nada, hasta que aparezca una barra de progreso que indica que está copiando los archivos en la ruta de instalación predeterminada.
Cuando termine la instalación de XAMPP en el ordenador Mac, nos pedirá aceptar las conexiones de red entrantes para los servicios del servidor local. Estos servicios son Apache (httpd), Base de datos (mysqld) y ProFTPD (proftpd).
Si no aparece el aviso al terminar la instalación, deberían aparecer la primera vez que se arranquen los servicios.
Estos permisos son importantes aceptarlos porque serán los que permitirán acceder a los temas y plugins del repositorio de WordPress para poder instalarlos en nuestra página web.
Si no aparecen estas ventanas para dar los permisos necesarios, en el siguiente punto os explico cómo hacerlo de forma manual.
Cuando arranquemos o lancemos el programa para empezar a utilizarlo se abrirá la ventana de configuración de opciones de XAMPP y una ventana del navegador con la página inicial de nuestro ya instalado servidor local.
XAMPP se ejecutará solo la primera vez que lo instalemos, pero luego tendremos que crear un acceso directo en el escritorio o arrancarlo desde "Aplicaciones/XAMPP/manager-osx.app".
Dar permisos para aceptar las conexiones de red entrantes en Mac
Una de las razones por las que puede que no se inicien los servicios o no funcionen correctamente es no haber aceptado los permisos de red entrantes. Si durante la instalación no los aceptamos o no salió la opción, tendremos que activarlos de forma manual.
En el escritorio de nuestro ordenador accedemos a la manzana y a la pestaña de "Ajustes del sistema".
Buscamos la opción "Firewall" dentro de las pestaña de "Red" y picamos en el botón "Opciones".
Ahora picamos en el símbolo "+" y añadimos los servicios que necesitan la conexión para que funcione XAMPP en un ordenador Mac. Para encontrarlos tenéis que seguir las siguientes rutas:
- httpd: Se encuentra en "Aplicaiones/XAMPP/xamppfiles/bin/httpd"
- mysqld: Puedes localizarlo en "Aplicaiones/XAMPP/xamppfiles/sbin/mysqld"
- proftpd: Está en "Aplicaiones/XAMPP/xamppfiles/sbin/proftpd"
Arrancar los servicios de Apache, Base de datos MySQL y ProFTPD
Aunque puede parecer que ya hemos terminado de instalar XAMPP en nuestro ordenador Mac, puede que tengamos algún problema con los puertos si utilizamos algún software o programa que también use los mismos puertos que necesita XAMPP para funcionar.
Son casos puntuales, pero tú puedes ser uno de ellos si, por ejemplo, utilizas Skype o una máquina virtual instalada en tu ordenador.
Antes de cambiar nada intentamos arrancar los servicios de XAMPP, en la pestaña "Manage Servers" picamos en "Start All" y si todo se pone verde no necesitaremos hacer nada más, solo tendremos que empezar a trabajar en el nuevo proyecto que tengamos en mente.
Cambiar los puertos de Apache y MySQL en caso de coincidir con otros programas
Si alguno de los servicios no consigue arrancar por culpa de los puertos mal configurados, debemos cambiarlos y poner unos puertos que no estén usados por el sistema operativo ni por otro programa.
Como ejemplo cambiaremos el puerto de Apache, pero de igual modo se cambiaría el de la base de datos MySQL. Marcamos el servicio y picamos en el botón de la derecha "Configure". Se abrirá un ventana con el número de puerto que se utiliza por defecto (80) y que cambiaremos por otro diferente, por ejemplo, con el 8888, 8080, 8081... un puerto que podamos recordar fácilmente.
Para acceder en el navegador al servidor local escribiremos "localhost" si el puerto es el que está configurado por defecto. Si lo hemos tenido que cambiar accederemos escribiendo "localhost: + nº de puerto elegido", por ejemplo, "localhost:8080".
Si el servicio que no arranca es el de la base de datos, podemos cambiar el número de puerto por defecto (3306), por otro diferente como el 33060, 33066, 33061...
Instalando WordPress en un servidor local con XAMPP en Mac
WordPress necesita un lugar donde almacenar los archivos y una base de datos que gestiona el contenido. Para que funcione correctamente tenemos que crear primero la base de datos y después conectarla con los archivos. Gracias al auto instalador de WordPress este proceso es muy sencillo.
Crear una base de datos en XAMPP
Para acceder al gestor de las bases de datos picamos en el botón "Go to Application" para acceder a la página principal de nuestro servidor local. También podemos hacerlo escribiendo directamente en el ordenador "localhost" (+ el puerto si lo hemos cambiado)
En el menú superior picamos en la pestaña "phpMyAdmin" para acceder a la aplicación encargada de las bases de datos de nuestro servidor local con XAMPP en Mac.
Una vez dentro, seleccionamos la pestaña "Bases de datos" y en el apartado de "Crear base de datos" rellenamos la casilla con el nombre que queramos asignar a la base de datos para nuestro primer proyecto, yo elegiré por ejemplo "proyectouno", todo seguido y sin espacios.
La codificación debe ser utf8 (estándar unicode), podemos dejar la que está seleccionada por defecto "utf8mb4_general_ci" o elegir "utf8_general_ci".
Picamos en "Crear" y se añadirá al listado de Bases de datos que tenemos en la columna de la izquierda. Esta base de datos estará vacía a la hora de crearla, pero se rellenará con las tablas necesarias automáticamente cuando empecemos la instalación de WordPress.
Una vez creada la base de datos podemos cerrar phpMyAdmin recordando el nombre que hemos elegido.
Colocar los archivos de WordPress en la carpeta "htdocs" del servidor local XAMPP
Ahora es el momento de realizar algunos cambios en el sistema para evitar problemas de permisos con los archivos y carpetas y organizar un poco las cosas para no confundirnos o borrar algo que no deseamos.
Modificar los permisos de lectura y escritura de "htdocs" en XAMPP
Para evitar problemas de acceso en esta carpeta "htdocs", vamos a modificar los permisos y conceder acceso total de lectura y escritura.
Seleccionamos la carpeta "htdocs" en la ruta "Aplicaciones/XAMPP/xamppfiles" y presionamos "cmdo.+i" para acceder a la información. También podemos picar con el botón derecho del ratón y seleccionar "Obtener información" o desde el menú superior buscar "Archivo > Obtener información". Todos los caminos llevan a Roma.
Abrimos el candado de la esquina inferior derecha y cambiamos los permisos de todos los usuarios que aparezcan en el listado para que puedan leer y escribir.
Antes de cerrar la ventana, picamos en el círculo con tres puntitos y aplicamos los cambios a todos los ítems que contenga la carpeta.
Organizar el contenido de la carpeta raíz "htdocs"
Es fácil eliminar algún archivo o contenido de esta carpeta una vez que empezamos a tener cierto volumen de proyectos acumulados. Para evitar perder la página principal de XAMPP, desde donde accedemos a la gestión de las bases de datos a través de phpMyAdmin, creamos una carpeta llamada "xampp" y colocamos todos los archivos dentro.
Luego accedemos a la carpeta y editamos "index.php" y "applications.html" para cambiar la ruta de acceso a la página principal de XAMPP para que se abra sin problemas. Donde ponga "/dasboard/" lo reemplazamos por "/xampp/dasboard/".
Preparar los archivos de WordPress en XAMPP
Es el momento de recuperar el archivo que descargamos con la instalación de WordPress. Primero lo movemos o copiamos dentro de "htdocs", lo descomprimimos y renombramos la carpeta descomprimida con el nombre de nuestro proyecto.
La ruta original de la carpeta principal es "Aplicaciones/XAMPP/xamppfiles/htdocs". También podemos crear un acceso directo en el escritorio si queremos tener esta carpeta más a mano.
Iniciar la instalación de WordPress
Abrimos la página principal de XAMPP en el navegador como ya hemos aprendido en los apartados anteriores, escribiendo "localhost" o desde el botón "Go to Application" de la ventana de XAMPP.
En la barra de navegación escribimos detrás de "localhost" el nombre de la carpeta de nuestro proyecto. En mi caso sería "localhost/minuevoproyecto". Y damos al Enter para iniciar los pasos de creación de nuestra primera página web con WordPress en XAMPP.
Iniciados los pasos de la instalación de WordPress solo tenemos que seguir las indicaciones, en la primera pantalla solo hay que picar en "¡Vamos a ello!".
En la siguiente pantalla configuramos la conexión con la base de datos que hemos creado en uno de los pasos anteriores, y rellenamos los campos de la siguiente manera:
- Nombre de la base de datos: La que escogiste en el momento de crearla (en mi caso "proyectouno").
- Nombre de usuario: XAMPP establece por defecto el usuario "root".
- Contraseña: No se requiere.
- Servidor de la base de datos: Es el mismo que el servidor de archivos, "localhost".
- Prefijo de tabla: Por defecto viene "wp_", pero recomiendo cambiarlo o modificarlo para mayor seguridad.
Rellenamos todos los campos y picamos en "Enviar". Si todo fue bien aparecerá un aviso dándonos la enhorabuena.
Lo siguiente a configurar son los datos de WordPress y el acceso a la administración de la web. Son unos datos iniciales que luego podremos modificar en cualquier momento desde la misma web si lo consideramos necesario.
- Título del sitio: El título de la página web
- Nombre de usuario: Tu nombre como usuario del sitio
- Contraseña: Para acceder a la administración
- Tu correo electrónico: para recibir alertas de WordPress (los envíos de correo en XAMPP hay que configurarlos aparte)
- Visibilidad en los motores de búsqueda: Da igual marcarla que no marcarla ya que trabajamos offline y los buscadores no tienen acceso.
Terminamos con una página final que nos indica que ya está instalado WordPress, pero para que podemos empezar a configurar y personalizar el sitio necesitamos configurar la conexión FTP del servidor local.
Solución al problema de acceso FTP de WordPress para instalar Temas y Plugins en XAMPP
Aunque XAMPP ya funciona y podemos ver nuestra nueva página web creada con WordPress, cuando intentamos cargar una imagen, actualizar, instalar un nuevo tema o un plugin, nos piden una conexión FTP (Protocolo de Transferencia de Ficheros - File Transfer Protocol) para poder instalar los nuevos archivos.
Es absurdo que trabajando offline tengamos este tipo de prevención con los archivos, así que vamos a saltarnos este protocolo para que podamos trabajar sin preocupaciones.
En la carpeta del proyecto localizamos el archivo "wp-config.php" y lo abrimos para editarlo. Al final del todo añadimos la siguiente línea y lo guardamos:
1 | define('FS_METHOD', 'direct'); |
Asegúrate de escribir todo bien, con los espacios y las comillas correspondientes para que el código no entre en conflicto. Revísalo dos o tres veces antes de guardar.
NOTA: Los pasos para configurar este proceso hay que hacerlos en cada proyecto de WordPress que empecemos en el servidor XAMPP.
Configurar el envío de emails en macOS con XAMPP
He probado de todo, buscado mil y una forma de hacer funcionar los correos electrónicos al instalar XAMPP en ordenadores Mac, pero las recomendaciones de instalar cosas a través del "Terminal" del sistema siempre han acabado fallando o dejado de funcionar por culpa de las actualizaciones del sistema.
La solución más sencilla y práctica es conectar con un servicio de mails como "Brevo", que dispone de una opción gratuita de registro, para activar los emails y poder realizar pruebas de envíos de formularios, o recibir avisos del sistema de administración de WordPress.
En la administración de WordPress accedemos a "Añadir nuevo plugin" y buscamos el correspondiente a Brevo. Cuando lo localicemos lo instalamos y activamos.
En la nueva pestaña del menú de la izquierda del plugin accedemos a la configuración desde el apartado "Home". Desde ahí seguiremos todo el proceso para crear una cuenta en Brevo.
Una vez creada la cuenta, volvemos a las opciones del plugin y picamos en el segundo punto "Get your API key from your account". De esta forma generamos una clave única que conecta nuestro sitio con los servicios de Brevo. La pegamos en la casilla y aceptamos.
Si todo ha ido bien, veremos nuestros datos y una ventana nueva con un apartado llamado "Transactional emails", que activaremos marcando la opción "Yes".
Tendremos dos únicas casillas a configurar, la primera es donde elegimos el correo que utilizaremos como remitente en los emails. En la plataforma de Brevo se pueden configurar varios remitentes, pero si es la primera vez que te registras solo tendrás uno.
En la segunda casilla puedes colocar cualquier dirección de correo para realizar una prueba de envío y comprobar que todo funciona.
Con esta última configuración estamos preparados para poder sacar el máximo partido a la instalación de XAMPP en Mac. Espero que te haya sido de ayuda y si tienes alguna duda déjamela en los comentarios.
En Windows no existen tantos problemas a la hora de instalar XAMPP, ya que no requiere de tantos permisos de archivos o carpetas como exige Mac.
Una vez que tengas tu web lista en el servidor local, te toca subirla a un servidor online. Mira aquí cómo se hace.
0 comentarios