Spanish (Español) translation by Carlos (you can also view the original English article)
Tener un entorno local de pruebas para WordPress es esencial para el desarrollo de temas, plugins y para actualizar los sitios. Lo menos recomendable es actualizar un sitio en vivo o instalar un plugin que lo pueda hacer fallar por completo. En este tutorial, te explicaré los pasos que se requieren para tener un entorno local que te permita desarrollar en WordPress de manera segura y eficiente.
Lo que necesitas
- Xampp
- Una versión actual de WordPress
- Un navegador web
- Tu editor de texto favorito
Xampp es un excelente paquete de servidor web creado por un grupo llamado Apache Friends. Xampp combina Apache, MySQL, PHP 5.3.8 (versión actual), OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System, FileZilla FTP Server y Tomcat. Xampp es una excelente herramienta para desarrollar de forma local en Windows.
Aquí puedes descargar la última versión de Xampp.
Paso 1. Instalar Xampp
Una vez que hayas descargado Xampp. Continúa y empieza la instalación.
La primera pantalla se verá así.
Haz clic en Next (Siguiente) para iniciar el proceso de instalación.
Elige el directorio en el que quieras instalar Xampp. Recomiendo crear un nuevo directorio y nombrarlo como «localhost» o «Servidor web» para mantener las cosas organizadas. Si deseas mantener el directorio de instalación predeterminado.
Haz clic en Next.
La siguiente pantalla son las opciones de Xampp.
Elige si deseas tener un ícono de Xampp en tu escritorio y/o en el menú de inicio.
Las opciones que realmente tienes que considerar es si instalar Apache y MySQL como servicios de Windows. Al instalar Apache y MySql como servicios se incrementará el tiempo de arranque de Windows, pero tenerlos como servicios puede resultar útil. Ha habido algunas ocasiones en las que he arrancado mi computadora, he abierto el sitio web en el que estaba trabajando y he obtenido un error del navegador. Entonces me pasaba la siguiente hora tratando de averiguar por qué mi sitio no se cargaba, solo para darme cuenta de que el servidor no se estaba ejecutando. Pero la elección es tuya.
No te preocupes por Filezilla a menos que planees tener un servicio FTP en tu computadora. Realmente no lo recomiendo, así que vamos a dejarlo sin marcar por ahora. Siempre podrás cambiarlo más adelante.
Ahora, Xampp se instalará.
Eso es todo, haz clic en Finish (Finalizar) y ya está. Xampp ahora está instalado y listo para funcionar
Paso 2. Ejecutar Xampp
Ahora abre el panel de control de Xampp y activa Apache y MySQL.
Si elegiste no instalar Apache y MySQL como un servicio de Windows, puedes marcar la casilla «Scv» y Xampp instalará Apache y MySQL como un servicio.
Haz clic en los botones de inicio (Start) en Apache y MySQL. Quizá tarde un minuto en empezar. Una vez que los servidores Apache y MySQL se estén ejecutando, el panel de control de Xampp se verá como en la captura de pantalla de arriba.
Ahora dirige tu navegador a http://127.0.0.1. Estas son las URL predeterminadas para Apache en tu computadora. Debes ver una pantalla de presentación de Xampp. Elige tu idioma y echa un vistazo. Hay algunas cosas que mirar y leer. La única parte a la que debes prestar atención es el enlace de phpMyAdmin. Quizá quieras marcar este enlace para uso futuro, o simplemente puedes ir a http://127.0.0.1/phpmyadmin/. phpmyAdmin es una GUI para la base de datos MySQL. Con phpmyAdmin puedes crear y administrar tus bases de datos MySQL.
Paso 3. Configurar tu directorio de WordPress
¿Por qué tener varias versiones de WordPress?
Antes de empezar con la configuración e instalación de WordPress. Quiero tomarme un momento para explicar por qué deberías tener instaladas varias versiones de WordPress. Cuando estés desarrollando un tema o un plugin, deberías hacerlo en la última versión estable de WordPress. Al desarrollar en la última versión estable, no solamente mantienes tu código actualizado, sino que te permitirá aprovechar las nuevas funciones. Quizá te estés preguntando «Entonces, ¿por qué tener varias versiones de WordPress?». La respuesta es asumir.
No podemos asumir que todo el mundo tiene la última versión de WordPress, especialmente si deseas vender tu trabajo. Si una empresa gasta miles de dólares en su tema y plugins, no querrán arriesgarse a actualizar WordPress y que su sitio falle. Mantendrán la versión que tengan todo el tiempo que puedan. Hay muchas corporaciones importantes que aún tienen Internet Explorer 6 como el navegador web principal de su empresa. Si no quieren actualizar un navegador gratuito, probablemente tampoco actualizarán WordPress.
Si no pruebas tu trabajo en versiones anteriores, estarás reduciendo tus ventas potenciales. Es cuestión de números. ¿Por qué invertir tiempo en desarrollar un tema o un plugin que únicamente se podrá vender para algunas versiones de WordPress? Al probar tu trabajo en versiones anteriores podrás comercializarlo para todas las versiones en las que funcione. Haciendo que tu trabajo esté disponible para un grupo de consumidores más amplio. Así ganarás más dinero y todos deseamos más dinero.
Configurando tu directorio de WordPress
Los archivos de WordPress y de todos los demás sitios web se almacenarán en la carpeta htdocs de tu directorio de instalación de Xampp.
Por defecto, Xampp instala el sitio al que acabas de ingresar en http://127.0.0.1/. Este es únicamente un sitio de ejemplo y no es necesario que lo conserves. Una vez que obtengas toda la información que necesitas, puedes abrir el directorio htdocs y eliminar los archivos que contiene. Estos archivos no son necesarios para que tu servidor web funcione.
Sigue adelante y crea un directorio llamado wp-vs-versión (por ejemplo, wp-vs-321) o como gustes en el directorio htdocs para tu instalación de WordPress. El motivo de esta convención de nomenclatura se aclarará en el Paso 4 cuando creemos la base de datos de WordPress.
¡No instales WordPress todavía! Hay unos pasos más que tenemos que seguir primero, así que solo copia los archivos de WordPress en el directorio recién creado para preparar la instalación.
Paso 4. Crear la base de datos de WordPress
Ahora dirige tu navegador a tu página phpmyAdmin en http://127.0.0.1/phpmyadmin/.
Lo primero que tienes que hacer es configurar los privilegios del administrador. En las pestañas de la derecha, haz clic en la pestaña Privileges (Privilegios).
Haz clic en Add a new User (Añadir un nuevo usuario)
Coloca tu nombre de usuario y tu contraseña en los campos correspondientes. Ya que esta será una configuración local, no tienes que preocuparte por un nombre de usuario y contraseña superseguros. Solo asegúrate de que sea algo que vas a recordar.
Asegúrate de que localhost esté en el campo Host.
En el área Global Privileges (Privilegios Globales), marca todas las opciones. Los privilegios globales son las acciones a las que puede acceder el usuario. A menos que planees dejar que otros trabajen en tu servidor local, asegúrate de tenerlos todos marcados.
Cuando todo esté como lo deseas. Haz clic en el botón GO.
Ahora, vamos a crear una base de datos para tu instalación de WordPress. Haz clic en el botón Home de la izquierda para volver a la página de inicio de phpmyAdmin.
Nombra tu base de datos en el campo Create new database (Crear nueva base de datos). Puedes nombrarla como quieras, pero recomiendo nombrarla como wp_vs_version (por ejemplo, wp_vs_3.2.1) para mantener las convenciones de la nomenclatura del paso 3. Esto mantendrá tus diferentes versiones de WordPress organizadas y hará que sean fáciles de trabajar.
Ahora, ya está todo listo para que instales tu copia de WordPress.
Paso 5. Configurar WordPress
Si has instalado WordPress anteriormente y sabes lo que estás haciendo. Sigue adelante y ve al Paso 7. Para los nuevos en WordPress, instalar WordPress es fácil. Voy a explicar los pasos.
Primero necesitas descargar una versión de WordPress, puedes descargar la versión 3.2.1 aquí. Al momento de escribir este tutorial la versión 3.2.1 era la versión estable.
Crea una carpeta en tu directorio htdocs y nómbrala wp-vs-321. Descomprime tu copia de WordPress y cópiala en en la carpeta wp-vs-321.
Lo primero que debes hacer es cambiar el nombre del archivo wp-config-sample.php a wp-config.php. Este archivo es un archivo de muestra para tu archivo de configuración de WordPress. Tiene todo lo que necesitas para empezar con la instalación.
Después de que hayas cambiado el nombre del archivo, abre el archivo wp-config.php en tu editor de texto favorito y busca este fragmento de código.
1 |
// ** MySQL settings - You can get this info from your web host ** //
|
2 |
/** The name of the database for WordPress */
|
3 |
define('DB_NAME', 'database_name_here'); |
4 |
|
5 |
/** MySQL database username */
|
6 |
define('DB_USER', 'username_here'); |
7 |
|
8 |
/** MySQL database password */
|
9 |
define('DB_PASSWORD', 'password_here'); |
10 |
|
11 |
/** MySQL hostname */
|
12 |
define('DB_HOST', 'localhost'); |
13 |
|
14 |
/** Database Charset to use in creating database tables. */
|
15 |
define('DB_CHARSET', 'utf8'); |
16 |
|
17 |
/** The Database Collate type. Don't change this if in doubt. */
|
18 |
define('DB_COLLATE', ''); |
Esta parte de wp-cofig.php son los ajustes de configuración que permiten que WordPress se conecte a tu base de datos mySQL.
- define('DB_USER', 'username_here'): Es el nombre del usuario que configuraste para los privilegios de la base de datos en phpmyAdmin en la Parte uno. El nombre de usuario es sensible a las mayúsculas y minúsculas.
- define('DB_PASSWORD', 'password_here'): Es la contraseña que configuraste para los privilegios de la base de datos en phpmyAdmin en la Parte Uno. La contraseña es sensible a las mayúsculas y minúsculas.
- define('DB_HOST', 'localhost'): Este es el nombre del host del servidor web. A menos que hayas cambiado el host en la base de datos, los privilegios deben ser el localhost predeterminado.
- define('DB_CHARSET', 'utf8'): Aquí es donde se define el conjunto de caracteres. Déjalo como está. No deberías cambiar esto.
- define('DB_COLLATE', ''): Este es el tipo de cotejamiento de la base de datos. Salvo que sepas lo que estás haciendo, también deja esto como está.
El código que aparece debajo son las claves únicas de autentificación (Authentication Unique Keys and Salts). Esto es una seguridad adicional que WordPress tiene por defecto. Se ve así.
1 |
define('AUTH_KEY', 'put your unique phrase here'); |
2 |
define('SECURE_AUTH_KEY', 'put your unique phrase here'); |
3 |
define('LOGGED_IN_KEY', 'put your unique phrase here'); |
4 |
define('NONCE_KEY', 'put your unique phrase here'); |
5 |
define('AUTH_SALT', 'put your unique phrase here'); |
6 |
define('SECURE_AUTH_SALT', 'put your unique phrase here'); |
7 |
define('LOGGED_IN_SALT', 'put your unique phrase here'); |
8 |
define('NONCE_SALT', 'put your unique phrase here'); |
Esto es fácil de configurar. Ve a https://api.wordpress.org/secret-key/1.1/salt/ copia el texto allí y pégalo sobre el texto de muestra en el archivo wp-config.php. Este enlace generará un conjunto aleatorio de claves para que las uses.
Debe ser algo parecido a esto.
1 |
define('AUTH_KEY', 'Nsd-]$o7h4 &Y@N345+h@Jn`M#an^|+0]kGtkPqyu|ZI%G|PWoX+&:j{&/_v89-{'); |
2 |
define('SECURE_AUTH_KEY', 'Rf+[4(O5LZ#i&??*n9wIyh^rS4- +3c[DarlPCh[7E&wPE|dY,dZ(mU66uP-FIq,'); |
3 |
define('LOGGED_IN_KEY', '>48!V^Pc}/uX95r>]ym)ZiA gP7f8}q!H=p-!TA#5M5.]sqm;SqM+`+9qfO_r/y('); |
4 |
define('NONCE_KEY', '+8UC!2pD~x/=:d)k;eset5(aP0UYb4B[@Ta UG~C`!IRVDtrGJ3XI2D;QsE#eZ}('); |
5 |
define('AUTH_SALT', '0;K-fHe)RpH7_h|KJ1b0jxr#`ke:*GMx|X$ll-z|!;ENt],-y:sUW-D,;-xX )3K'); |
6 |
define('SECURE_AUTH_SALT', 'R6X${@qi/ f|GX**3qp@{Z}_yJ(iB{CFmV%a(:xny!hpM.R*|-53ybq7ILgZCTFH'); |
7 |
define('LOGGED_IN_SALT', 'NcO%Wa|3RHu!-.%(w6YqTc/Rc,S&THdDDA1@Whp4;WUdiCytA{sL0-a} |6MZ1]O'); |
8 |
define('NONCE_SALT', '0QB9`~!X$X]2#B)ma[KsLtiK#-%{!VoM f-q%eJ%tO+3O]tTrqhC-%rI|.pFPQ[P'); |
A continuación, debes cambiar el prefijo de la base de datos
1 |
$table_prefix = 'wp_'; |
El prefijo predeterminado es wp_. Me gusta mantener la convención de la nomenclatura wp_vs_version_ (por ejemplo, wp_vs_3.2.1). Puedes nombrarla como quieras o simplemente mantener el prefijo predeterminado. Si observas hay un guión bajo al final del prefijo. Esto no es necesario, pero hace que tu base de datos se vea más limpia.
1 |
$table_prefix = 'wp_vs_3.2.1'; |
Nota: Cuando instales una versión en vivo de WordPress, debes cambiar el prefijo a algo único. Utilizar letras y números aleatorios es un buen método. Esto añadirá otra capa de seguridad a tu sitio de WordPress. En un entorno de desarrollo local, no sería necesario.
La última parte del archivo wp-config.php que configuraremos es el modo de depuración. Este será true para la depuración activada o false para la depuración desactivada. En un sitio en vivo, esto siempre debe configurarse en false, para que tu visitante no vea ningún error, pero para tu entorno de desarrollo local, debes configurarlo en true.
Esto te ayudará en tu desarrollo. Incluso si tu código funciona de la forma que quieres. Todavía podrías tener algunos errores. Especialmente con código depreciado. Tu proyecto seguirá funcionando con código depreciado, pero debes mantener tu código actualizado. De esta forma, si WordPress deja de admitir el código depreciado, tus proyectos no dejarán de funcionar.
Cambia este código.
1 |
define('WP_DEBUG', false); |
A esto.
1 |
define('WP_DEBUG', true); |
Eso es todo lo que necesitamos configurar para la instalación. Asegúrate de guardar el archivo wp-config.php y ve al Paso 6 para instalar WordPress.
Paso 6. Instalar WordPress
Ahora, dirige tu navegador a http://localhost/wp-vs-321/.
Si todo se configuró correctamente, deberías ver la página de instalación de WordPress.
Escribe el título. Siguiendo con la convención de la nomenclatura, llamémoslo Versión de desarrollo de WordPress 3.2.1 (WordPress Development Version 3.2.1).
El nombre de usuario y la contraseña no son los mismos que el nombre de usuario y la contraseña que configuraste para la base de datos. Esto es lo que usarás para iniciar sesión en la página de administración de WordPress Asegúrate de utilizar algo que recuerdes. Si olvidas tu nombre de usuario o tu contraseña, deberás ingresar a la base de datos para cambiarla o realizar una nueva instalación de WordPress. Además, WordPress no te da la opción de cambiar tu nombre de usuario y tu contraseña de administrador, así que asegúrate de que sea algo que quieres mantener.
Por último, ingresa tu dirección de correo electrónico, desmarca Permitir que mi sitio aparezca en los motores de búsqueda como Google y Technorati, y haz clic en Instalar WordPress (Install WordPress).
Ahí lo tienes. WordPress ahora está instalado. Para instalar más versiones, simplemente repite las instrucciones anteriores. Recuerda cambiar los nombres de tu directorio, la base de datos, el prefijo y el título del sitio.
Paso 7. Configurar hosts virtuales en Apache
Ahora, a la parte divertida. Te mostraré cómo configurar Apache Virtual Hosts.
Apache tiene un excelente sistema con hosts virtuales listos para trabajar. Un host virtual te permite usar una URL única para tus sitios web en tu servidor web local. Eso significa que si estás desarrollando un sitio para un cliente llamado Big Bob's Candy. Puedes configurar una URL para tu sitio de desarrollo como http://wp.bigbobscandy.com. En vez de http://localhost/big-bobs-candy/index.php.
¿Por qué querrías hacer esto? Bueno, para que se vea bien y para mantener tus proyectos organizados. Si observas, tenemos wp. antes de la URL bigbobscandy.com. Utilizar un subdominio como este evitará que tu sitio interfiera con una URL real y también te puede ayudar a organizar tus proyectos. Por ejemplo, puedes usar wp. para sitios de WordPress y sws. para sitios web estáticos.
Primero, vamos a configurar el archivo httpd-vhost.conf. Este archivo se ubica en tu directorio Xampp > apache > conf > extra.
Abre el archivo httpd-vhost.conf con el bloc de notas y verás esto.
1 |
# |
2 |
# Virtual Hosts |
3 |
# |
4 |
# If you want to maintain multiple domains/hostnames on your |
5 |
# machine you can setup VirtualHost containers for them. Most configurations |
6 |
# use only name-based virtual hosts so the server doesn't need to worry about |
7 |
# IP addresses. This is indicated by the asterisks in the directives below. |
8 |
# |
9 |
# Please see the documentation at |
10 |
# <URL:http://httpd.apache.org/docs/2.2/vhosts/> |
11 |
# for further details before you try to setup virtual hosts. |
12 |
# |
13 |
# You may use the command line option '-S' to verify your virtual host |
14 |
# configuration. |
15 |
|
16 |
# |
17 |
# Use name-based virtual hosting. |
18 |
# |
19 |
##NameVirtualHost *:80 |
20 |
|
21 |
# |
22 |
# VirtualHost example: |
23 |
# Almost any Apache directive may go into a VirtualHost container. |
24 |
# The first VirtualHost section is used for all requests that do not |
25 |
# match a ServerName or ServerAlias in any <VirtualHost> block.
|
26 |
# |
27 |
##<VirtualHost *:80> |
28 |
##ServerAdmin postmaster@dummy-host.localhost |
29 |
##DocumentRoot "/xampp/htdocs/dummy-host.localhost" |
30 |
##ServerName dummy-host.localhost |
31 |
##ServerAlias www.dummy-host.localhost |
32 |
##ErrorLog "logs/dummy-host.localhost-error.log" |
33 |
##CustomLog "logs/dummy-host.localhost-access.log" combined |
34 |
##</VirtualHost>
|
35 |
|
36 |
##<VirtualHost *:80> |
37 |
##ServerAdmin postmaster@dummy-host2.localhost |
38 |
##DocumentRoot "/xampp/htdocs/dummy-host2.localhost" |
39 |
##ServerName dummy-host2.localhost |
40 |
##ServerAlias www.dummy-host2.localhost |
41 |
##ErrorLog "logs/dummy-host2.localhost-error.log" |
42 |
##CustomLog "logs/dummy-host2.localhost-access.log" combined |
43 |
##</VirtualHost>
|
Adelante, borra todo esto. Crearemos el archivo del host virtual desde cero.
Cuando trabajes con este archivo. Si quieres dejar notas, simplemente coloca un símbolo de almohadilla al principio de cualquier línea en la que dejes una nota.
1 |
# This line is a note that will be ignored because of the # |
2 |
This line will be read by Apache because there is no # at the beginning of the line |
Aquí está el código que utilizaremos en el archivo httpd-vhost.conf.
1 |
# Main Virtual Host IP Address |
2 |
NameVirtualHost * |
3 |
|
4 |
#Main Virtual Host |
5 |
<VirtualHost *> |
6 |
ServerName localhost |
7 |
DocumentRoot "C:/localhost/htdocs" |
8 |
</VirtualHost>
|
9 |
|
10 |
#WordPress vs 3.2.1 |
11 |
<VirtualHost *:80> |
12 |
ServerName wp.devsite-321.com |
13 |
DocumentRoot "C:/localhost/htdocs/wp-vs-321" |
14 |
<Directory "C:/localhost/htdocs/wp-vs-321"> |
15 |
Order allow,deny |
16 |
Allow from all |
17 |
</Directory>
|
18 |
</VirtualHost>
|
En NameVirtualHost * especificas la dirección IP en la que el servidor recibirá las solicitudes de los hosts virtuales basados en nombres. El * será 127.0.0.1. por defecto.
En la siguiente sección, #Main Virtual Host, el ServerName es localhost y DocumentRoot es la ruta absoluta a tu carpeta htdocs en el directorio del servidor web.
ServerName localhost es la URL que utilizarás en el servidor web de tu navegador, por lo que si quieres ir a tu directorio raíz en tu navegador, puedes usar http://localhost/.
#WordPress vs 3.2.1 es la configuración de Virtual Host para tu instalación de WordPress. Nuevamente, ServerName wp.devsite-321.com será la URL de tu sitio de WordPress. Esto puede ser lo que quieras. Si quieres que tu sitio tenga la URL http://the.evilbunnysquad.com. ServerName sería the.evilbunnysquad.com
DocumentRoot y la ruta en la etiqueta de <Directory> serán la ruta absoluta a tu instalación de WordPress.
Order allow, deny y Allow from all configuran algunos permisos básicos para ver tu host virtual de WordPress.
Cuando empieces a añadir otras versiones de WordPress, simplemente copia y pega la configuración de #WordPress vs 3.2.1 Virtual Host y cambia ServerName, DocumentRoot y <Directory> para reflejar la nueva instalación.
Cuando instales versiones adicionales de WordPress, sigue las instrucciones anteriores. Solamente cámbiala para que refleje la versión recién instalada.
Se puede hacer mucho más con los hosts virtuales, como configurar los registros del servidor, pero todo lo que queremos hacer ahora es configurar las URL. Si quieres aprender más sobre Apache Virtual Host, revisa los ejemplos de Apache Virtual Host y unix-girl.com.
Paso 8. Configurar tu archivo hosts de Windows
Ahora veamos el sitio de WordPress con la URL que acabamos de configurar en la sección anterior. Sigue adelante y escribe http://wp.devsite-321.com en tu navegador. ¿Qué ha pasado? El sitio no apareció. Bueno, eso es porque tu computadora todavía no reconoce la URL. Eso es lo que vamos a hacer en este último paso.
Lo que debemos hacer es configurar tu archivo hosts de Windows. Este archivo se localiza en el directorio Windows > System32 > drivers > etc.
Trabajar con este archivo puede ser un poco complejo. Si todavía estás utilizando Windows XP, no tendrás ningún problema. Simplemente ábrelo en cualquier editor de texto. Si estás usando Windows Vista o Windows 7, necesitas tener una cuenta de usuario de Windows con derechos de administrador. Si puedes abrir el archivo hosts en un editor de texto pero no puedes guardarlo, porque se obtiene un error indicando que necesitas derechos de administrador. Tendrás que abrirlo en el bloc de notas. Debes hacer clic con el botón derecho en el bloc de notas y hacer clic en Ejecutar como administrador. Una vez que hayas hecho esto, no deberías tener problemas para editar o guardar el archivo hosts.
Cuando abras el archivo hosts, verás una cantidad de direcciones IP y URL. Se verá de esta manera.
Ahora, añade las direcciones IP y las URL que acabamos de crear en el archivo Virtual Host. De esta forma.
1 |
127.0.0.1 localhost (if it's not already there) |
2 |
127.0.0.1 wp.devsite-321.com |
Por último, abre el panel de control de Xampp, desactiva Apache y MySql. A continuación, inicialos de nuevo, y dirige tu navegador a http://wp.devsite-321.com. Si todo se ha hecho correctamente, deberías ver tu sitio de WordPress. Tendrás que hacer esto para cada URL que establezcas en elarchivo httpd-vhost.conf.
Conclusión
Con este tutorial tendrás todo lo que necesitas para crear un entorno de desarrollo para WordPress. Una vez que todo esté configurado, solo te llevará unos minutos configurar las URL para tus sitios web con WordPress y para tus sitios estáticos. Manteniendo tu espacio de trabajo organizado y accesible.
Si quieres leer más sobre Xampp, Apache, phpmyadmin, o Virtual Hosts. Revisa estos enlaces.
By
