Crear un sitio web WordPress con una máquina virtual local

En el último post comenté que estaba usando una máquina virtual de Bitnami para hacer sitios web con WordPress y me pidió Fernando que explicara cómo subir el resultado de ese sitio web a un servidor que tengamos contratado en hosting. Ya que lo estoy haciendo esta semana, voy a anotarlo (para que no se me olvide), pero me gustaría empezar por el principio. Y ya advierto: este post está lleno de frikismo, comando UNIX de terminal y cosas ininteligibles. Luego no te quejes.

¿Por qué una máquina virtual? ¿Y qué es Bitnami?

Una máquina virtual es un programa que me permite ejecutar un S.O. completo dentro de otro. Por ejemplo, puedo arrancar Linux dentro de Windows 7, o Windows XP dentro de Mac OS X. Las máquinas virtuales tienen múltiples usos, pero a mi me encantan para no llenar de programas mi S.O. base. Así no se ralentiza, ni tengo el disco duro lleno de programas de «usar y tirar».

En el caso de crear un sitio web con WordPress es aún peor. Sin la máquina virtual necesitas:

  • un servidor web, como Apache, que soporte PHP
  • un servidor de BB.DD., como MySQL
  • configurarlo todo
  • instalar WordPress
  • y luego, claro, crear tu sitio con WP, es decir, instalar plugins, ponerlo en Español, crear contenido, probar diferentes temas, etc.

Todo esto se podría hacer directamente en nuestro servidor (ese que tenemos contratado en hosting), pero los inconvenientes son varios:

el sitio está visible mientras lo preparamos (a no ser que lo protejamos, por ej. mediante autenticación HTTP, pero eso exige aún más trabajo)

si la conexión que tenemos a Internet es mejorable, vamos a tardar bastante

Por eso, lo ideal es disponer de una máquina virtual, por ejemplo con Linux ya instalado y que lo traiga todo (Linux, Apache, MySQL, PHP y WordPress). Esto es lo que se llama un servidor LAMP + WordPress. Buscando en el catálogo de máquinas virtuales gratuítas que tiene VMWare me encontré con la Appliance de Bitnami. Es una máquina virtual VMWare con todo lo anterior ya instalado y configurado, gracias a la empresa Bitnami. Para instalarla, la descargamos y descomprimidos, y listo: ya podemos abrirla con VMWare. En mi caso, me he bajado la versión basada en Ubuntu, porque dominio mejor los Linux Debian-based que otros.

Manejando la máquina virtual de Bitnami

La máquina cuando arranca nos muestra una pantalla poco espectacular. Termina con un mensaje que nos indica cómo nos podemos conectar al WordPress que tiene dentro, y poco más.

MV Bitnami

MV Bitnami

En mi caso me indica que conectándome a la IP http://10.0.1.25 me aparecerá la interfaz web de la máquina virtual. Esa interfaz es una página web con información y el acceso al WP que está instalado dentro. Inicialmente el usuario es «user» y el password «bitnami». Al entrar, llegamos a un WP vacío, que podemos proceder a adaptar. En mi caso, lo que he estado haciendo ha sido:

  • traducirlo al Español. Abajo lo cuento con detalle.
  • instalar un tema de pago que queda bonito y que tenía por ahí abandonado. Me lo compré en el bundle de diseño Bundlehunt.
  • instalar unos cuantos plugins, para tener un formulario de contacto, mapas de Google, etc.
  • crear las páginas necesarias y copiar el contenido (texto y fotos) del sitio web antiguo

Probablemente lo más «complicado» sea traducir WP a español. Pero es muy sencillo. Sólo hay que ir a la página que tiene la traducción de WordPress y bajarse el ZIP.  Lo descomprimimos y veremos que un WP completo, sólo que ya traducido. Como a mí me gustan las cosas complicadas, prefiero pasar sólo los ficheros de localización al Español y decirle a WP que está en Español 🙂

Para eso, debemos iniciar sesión en la máquina virtual, e ir a la carpeta: /opt/bitnami/apps/wordpress/htdocs/wp-content/ con un:

$ cd  /opt/bitnami/apps/wordpress/htdocs/wp-content/

Bitnami guarda en /opt/bitnami/apps las aplicaciones web que lleva el appliance, concretamente PhpMyAdmin y WP.

Ahora, vamos a copiar los ficheros que antes descomprimimos. Los vamos a copiar por scp (suponiendo que te conectes a una máquina *NIX), con algo como:

$ scp usuario@la-ip-de-tu-maquina-real:/Users/tu-usuario/Desktop/wordpress/wp-content/languages/* .

Lo que hace la «frase mágica» anterior es conectarse a tu ordenador real (debes indicar la IP), con tu usuario (con el que has iniciado sesión). Te pedirá tu clave. Lo que hace es copiar los ficheros de la ruta que le hemos indicado, en la carpeta de la máquina virtual en la que estábamos.

Bueno, WP tiene los ficheros en su sitio, pero no los va a usar hasta que no se lo digamos. Para ello, hay que modificar el fichero wp-config.php  (en nuestro caso, está en /opt/bitnami/apps/wordpress/htdocs, por lo que bastará con hacer un cd ..). Yo lo he modificado con vi, que para eso estoy en modo geek :-). Hay que buscar la línea que pone:

define ('WPLANG', 'xxxx');
y dejarla así:
define ('WPLANG', 'es_ES');

Una vez que hemos acabado, grabamos y listo. Yo reinicié la máquina virtual completa (con reboot) para comprobar que todo estaba OK.

Subiendo todo esto a mi servidor en hosting

Ahora que todo funciona como queremos y hemos terminado en local ¿cómo subimos todo esto a mi servidor web?. Supongo que tienes un dominio, pongamos www.misuperwebquemevaahacerrico.com y su alojamiento asociado. Hay que tener claro lo que hay que subir:

  • por un lado, el sitio web de WordPress. Nada más en el apartado web. Es decir, ni la configuración de Apache, ni otras cosas. En el caso de bitnami, sería la carpeta /opt/bitnami/apps/wordpress de la máquina virtual
  • por otro, la base de datos asociada a esta web. Esa BD está en el MySQL que tiene la máquina virtual de bitnami.

Subiendo el wordpress

Lo primero que vamos a hacer va a ser comprimir la carpeta. En la máquina virtual tecleamos:

$ cd /opt/bitnami/apps

una vez en la carpeta apps, nos convertimos en root (ya que si no no podremos leer algunas de las carpetas del WP), con:

$ sudo su

comprimimos con el proverbial tar:

tar cvfz wp.tgz wordpress

esto va a comprimir la carpeta wordpress completa en un fichero llamado wp.tgz. Ahora hay que subir ese fichero a nuestro proveedor de alojamiento. Para eso, primero lo voy a copiar a la máquina física, usando de nuevo scp:

$ scp wp.tgz usuario@la-ip-de-tu-maquina-real:/Users/tu-usuario/Desktop/

Eso debería dejar el fichero wp.tgz en tu escritorio. Espero 🙂

Ahora sólo te queda subirlo, usando el interfaz que te de tu proveedor de alojamiento. En mi caso, esto va a RedCoruna y tienen, como todo el mundo, CPanel, que viene con un explorador de ficheros integrado en el navegador que permite subir cosas. Cuando lo tengas en la carpeta que te interesa, descomprímelo. Podrás acceder mediante: http://www.tudominioesequetevaahacerrico.com/wordpress. Y te va a fallar. Recuerda: no hay base de datos aún.

Subiendo la BD

Para subir la BD, primero vamos a exportarla. Para ello, necesitamos activar una aplicación que viene en la máquina virtual, pero que por razones de seguridad está desabilitada. Es PhpMyAdmin, una aplicación web para administrar el servidor de BB.DD. MySQL. Para activarlo, vamos a /opt/bitnami/apps/phpmyadmin/conf/ y editamos phpmyadmin.conf

$ cd /opt/bitnami/apps/phpmyadmin/conf/
$ vi phpmyadmin.conf

y cambiamos la línea que pone

Allow from 127.0.0.1

por

Allow from all
Configurando phpMyAdmin

Configurando phpMyAdmin

Debemos reiniciar el servidor Apache para que este cambio entre en funcionamiento. En el caso de la máquina virtual de bitnami lo hacemos con:

$ /opt/bitnami/ctlscript.sh restart apache

Ahora, apuntando un navegador a http://10.0.1.25/phpmyadmin nos aparecerá una pantalla de login. Usuario: administrator, clave: bitnami y al fin se abre el PhpMyAdmin

Dentro de PhpMyAdmin veremos la lista de BB.DD. a la izquierda:

Lista de BB.DD.

Lista de BB.DD.

Escogemos la nuestra (bitnami_wordpress) y nos vamos a la solapa «Exportar». Tal como viene debe funcionar. Marcamos la opción «Enviar (genera un archivo descargable)» y se nos descargará, al pulsar Continuar, un fichero con extensión .sql en nuestra máquina. ¡Esa es nuestra BD!

Ojo: en ese fichero (que es la BD de WordPress) las URLs están metidas «a pelo». Es decir, está lleno de 10.1.0.25 por todos lados. Y no queremos eso. En mi caso, he usado TextEdit de Mac para buscar y sustituir todas las ocurrencias de 10.0.1.25 por www.viajescarrasco.com, que es el dominio que estaba usando. Es un poco lamentable que WP meta en su BD referencias al dominio «hardcoded» en lugar de usar una variable, pero es lo que hay.

Ahora sólo nos queda subirla a nuestro dominio (probablemente usando el PhpMyAdmin de nuestro CPanel). Pista importante: ahora hay que buscar la pestaña «importar» de PhpMyAdmin e indicarle el fichero .sql anterior :-). Casi seguro que tendremos que crear la BD, un usuario para la misma y darle permisos a ese usuario para esa BD. Todo se hace en CPanel.

Configurar el sitio web

Pero aún no funciona nada. ¿Por qué?. Porque hemos subido un sitio web WordPress que piensa que está instalado en http://10.0.1.25, en lugar de en http://www.midominioetcetc.com. Hay que configurar eso. Para ello, buscamos el fichero wp-config.php (sí, el mismo que tocamos para el idioma) y cambiar el nombre de la BD, usuario y password. Nos debe quedar algo como:

define('DB_NAME', 'minombrededb');

/** MySQL database username */
define('DB_USER', 'usuarioquehecreado');

/** MySQL database password */
define('DB_PASSWORD', 'laclave');

/** MySQL hostname */
define('DB_HOST', 'localhost:3306');

Además, debemos cambiar el fichero .htaccess que viene con bitnami y dejarlo así:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
Este fichero hace la «magia negra» de la reescritura de URLs, de forma que funcionen los nombres de página en WP, por ej., cuando escribimos blog.freniche.com/formacion y nos lleva a la página correcta. No existe una carpeta llamada formación: se «traduce» al vuelo de forma que el WP lo interprete correctamente.

Conclusión

Como puedes ver, el proceso de traslado del sitio web es un poco laborioso. Lo bueno que es esto te serviría para mover tu WordPress entre diferentes proveedores de alojamiento. Y lo mejor de todo es que con la máquina virtual puedes hacer todas las pruebas que quieras, sin riesgos.
EOF.

j j j

WordPress mobile activado en freniche.com

Soy un lector habitual de ZDNet desde que Jaime me recomendó el sitio. A veces los posts son un poco flojitos para un sitio con ese tráfico, pero otras veces te enteras de cosas bastante chulas. Normalmente leo ZDNet en el tren, llendo o viniendo de trabajar, con mi HP iPaq Hw6915 y Opera mobile, una combinación ganadora. Y funciona tan bien porque Opera es muy rápido y los blogs de ZDnet (que están hechos con WordPress) usan un plugin que detecta automáticamente si usas un navegador desde un dispositivo móvil (supongo que analizando el parámetro USER-AGENT enviado por nuestro navegador).

Este plugin es WordPress Mobile Edition, de Alex King, y realmente hace un buen trabajo. Si quieres comprobarlo, accede a esta web desde un dispositivo móvil y verás lo rápido que va. La única pega (por ponerle alguna) es que no funciona demasiado bien con el plugin de internacionalización, pero bueno…

j j j

Migrar las noticias de Typo3 (tt_news) a WordPress paso a paso

Hace ya un tiempo escribí este post contando que había conseguido pasar de Typo a WordPress. También decía que algún día escribiría un paso a paso. Un comentario del usuario June me lo pedía, y vamos a tratar de explicarlo.

Para realizar éste paso a paso se necesitan tres cosas (evidentemente):

  • una instalación de Typo3 con la extensión tt_news instalada, que son las noticias que queremos migrar
  • una instalación de WordPress vacía, donde queremos importar las noticias de Typo3
  • paciencia y nervios de acero 🙂

La idea general del proceso es que WordPress permite importar entradas desde diferentes fuentes. Una de ellas es un archivo RSS 2.0. Por ello, lo que vamos a buscar es generar un RSS con todas las noticias en Typo3. Guardaremos ese fichero y posteriormente lo importaremos en WordPress.

Typo3

En Typo3 necesitamos generar las noticias, pero en formato RSS y no mostrarlas como normalmente aparecen. Para ello, nos vamos a crear dos páginas, una llamada RSS que es donde colocaremos un plug-in tt_news y otra colgando de ésta que es necesaria para mostrar las noticias una a una.

Páginas Typo3 para conseguir RSSContenido de la página que genera los RSS

He creado ambas páginas activando la opción de «ocultar en menú», ya que en mi caso no quería que aparecieran en el menú principal de mi sitio.

Dentro de la página rss news (podemos ver su contenido en la imagen lateral) crearemos un plug-in tt_news y un template de extensión (llamado por defecto, y así se quedó, +ext).

La configuración del plugin tt_news: ponemos en la opción de mostrar las noticias LIST (todas las noticias). Es importante definir en Otras opciones la «PageId donde se muestran noticias individuales» y «PageId a donde regresar», apuntando a la página «one rss». El punto de inicio de las noticias será, como siempre, la carpeta donde almacenemos nuestros tt_news.

El contenido del Template

Constants:

### Configure tt_news to display the xml template
### Page that contains the News List
xmlnewsfeed_id = 171
### RSS Setup
plugin.tt_news  {
displayXML {
rss2_tmplFile = EXT:tt_news/res/rss_2.tmpl
xmlFormat = rss2xmlTitle = Export RSS to WordPress
xmplLink = http://www.freniche.com
xmlDesc = Exporting to WPxmlLang = es
xmlIcon = fileadmin/rss_icon.giftitle_stdWrap.htmlSpecialChars = 1

title_stdWrap.htmlSpecialChars.preserveEntities = 1

subheader_stdWrap.stripHtml = 1

subheader_stdWrap.htmlSpecialChars = 1

subheader_stdWrap.htmlSpecialChars.preserveEntities = 1

subheader_stdWrap.crop = 500| ... | 1

subheader_stdWrap.ifEmpty.field = bodytext

xmlLastBuildDate = 1

}

}

plugin.tt_news.limit = 5

plugin.tt_news.displayXML.xmlLimit = 1000

Setup:

# ------------- RSS News Plugin ------------------------------
###Header
page.headerData.500 = TEXT
# MUY IMPORTANTE: las dos siguientes líneas deben ir juntas, las he separado para que se lean mejor en el post
page.headerData.500.value = <link rel="alternate"
type="application/rss+xml" title="RSS-Feed" href="http://www.freniche.com/index.php?id={$xmlnewsfeed_id}&type=100" />
# ------------- This enables the xml news feed ---------------------
xmlnews = PAGExmlnews {
typeNum = 10020 >20 < plugin.tt_news20.pid_list >

20.pid_list = {$xmlnews.pid_list}

20.singlePid = {$xmlnews.singlePid}20.defaultCode = XML

config {disableAllHeaderCode = 1

additionalHeaders = Content-type:text/xmlno_cache = 1

xhtml_cleaning = 0}

}

Es muy importante que en el plugin se incluya el template estático plugin.alt.xml (96) y el template estático (de las extensiones) News Feed (RSS, RD, ATOM) (tt_news), como se puede ver en la imagen.

Configuración del template

En la página one-rss debemos poner un plug-in tt_news (noticias) para que se muestren las noticias una a una (opción qué mostrar puesta a SINGLE).

Generar el RSS

Ahora ya podemos probar si funciona la generación del RSS. Para ello, mostraremos en otra ventana (o pestaña) la página rss news, usando su pageId (que en éste caso es 171) e indicando que el tipo de página es 100. Este type=100 lo indicamos en la parte setup del template (typenum = 100). Luego si vamos a: http://www.freniche.com/index.php?id=171&type=100, se mostrará un flujo RSS al que podremos suscribirnos.

Si hemos llegado hasta aquí, podemos probar a pulsar CTRL-U (o, en mi Mac, Command-U) para ver el código fuente del RSS. Veremos que aparecen las entradas de las noticias de Typo3. ¡Vamos por el buen camino!rss.png

Este código XML podemos guardarlo como un fichero que se llame rss.txt. Ahora pasemos a WordPress para importarlo.

WordPress

Aquí es todo muuuucho más fácil. WordPress importa RSS sin problemas, a través de la opción Administrar -> Importar. Entre los formatos disponibles aparece RSS. Basta ahora con seleccionar el fichero rss.txt que hemos generado antes y ¡listo!. Las entradas comienzan a importarse.

importar-rss.png

En mi caso el límite de subida del fichero RSS de WordPress era demasiado pequeño, así que tiré por la calle de enmedio y rompí el fichero en varios trozos para que entraran correctamente en su tamaño. Para eso está en UNIX el comando split.

j j j

¡Acabo de importar todas las entradas de Typo3 a WordPress!

Oh Yeah! ¡Prueba superada!

Acabo de incorporar todas las entradas del blog antiguo Typo3 de freniche.com (gestionadas mediante la extensión de Typo3 tt_news) en esta nueva encarnación del Blog que usa WordPress. Estuve buscando un tiempo por Internet, pero no encontré un «cómo migrar de Typo3 a WordPress». Más adelante escribiré un paso a paso de cómo lo he hecho yo, pero de momento sólo quería anunciar que:

  • todas las entradas que estaban disponibles en freniche.com (typo3) están ahora disponibles en freniche.com (WordPress)
  • probablemente algunos enlaces ya no funcionen (las primeras entradas son de 2003)
  • los caracteres especiales del Español (acentos, eñe, etc.) se han perdido. Pido paciencia.
  • progresivamente voy a revisar entrada por entrada para corregir estos errores e incluir las imágenes que tenían originalmente.
  • se han creado categorías duplicadas, o algunos posts duplicados. Lo iremos solucionando.
  • terminar de pulir los problemas que el plugin de «multiidioma» le causa a la plantilla, y es lo que causa que las fechas aparezcan a veces «raras».

Ahora ya quedan dos tareas fundamentales, para considerar la web en su v1.0 terminada (ya me vale, tras casi 5 años):

  • acabar de importar los artículos (páginas en Typo3) que no eran parte del Blog, sino información más o menos estática (ya hay algunos en la sección Artículos). Esto me exigirá redactar de nuevo algunos, revisarlos, etc. Un poco como las entradas.
  • cambiar entre Typo3 y WordPress, de forma que cuando alguien escriba www.freniche.com en su navegador por defecto le salga WordPress.

Tras estos cambios quiero adaptar el Blog para que sea cómodo de ver desde el móvil, traducir algunas entradas al Inglés, etc. Lo de siempre, vamos.

j j j