Tutorial sobre cómo integrar un blog WordPress en una web HTML

WordPress es el sistema de gestión de contenidos más utilizado en Internet para crear y mantener blogs. Las siglas en inglés de este tipo de programas son CMS (Content Management System).

Lo que diferencia a un CMS de un programa para crear páginas web con tecnología HTML es el hecho de que los CMS separan claramente el diseño del blog de su contenido. Es decir, el diseño se puede cambiar todas las veces que uno quiera de forma muy sencilla, sin que el contenido se vea afectado. Y al revés, el contenido se puede cambiar sin que el diseño se vea afectado.

En una página web tradicional, el diseño y el contenido están tan relacionados que es mucho más trabajoso hacer cambios que afecten a toda la web en su conjunto.

Nos consta que hay miles de webmasters que gestionan páginas web creadas con tecnología HTML a los que les gustaría poder integrar un blog wordpress en su sitio web, sin tener que modificar sus páginas web actuales.

En este tutorial os vamos a mostrar cómo hemos integrado un blog wordpress en nuestra página web HTML. Podéis ver el resultado en el siguiente enlace:

https://www.msdsoft.com/esp/blog/

---

Haz clic en este enlace para probar de forma gratuita un programa que está cambiando el modo en que miles de usuarios de todo el mundo gestionan sus datos importantes en Windows. Seguro que te gustará.

---

1.- Requisitos previos

Lo primero que hay que hacer es comprobar que en el servidor donde esté alojado el sitio web están disponibles versiones recientes de PHP y MySql. Los requerimientos mínimos para instalar WordPress en un servidor varían con las versiones. Podéis consultarlos en esta página web (en inglés).

2.- Instalación de WordPress

Si tenéis alojada la página web en un servidor con cPanel, seguramente dispondréis de Fantastico, un software que permite instalar muchos programas y servicios con un par de clics del ratón, entre ellos WordPress.

Aquí tenéis una imagen de la pantalla de Fantastico que permite instalar WordPress automáticamente en una carpeta de nuestra elección:

Si no disponéis de Fantastico ni de otro servicio que os permita instalar WordPress de forma automática, tendréis que instalarlo manualmente. Para ello debéis descargarlo desde esta página web.

Os recomendamos que instaléis WordPress en un directorio llamado blog que crearéis en vuestro sitio web, normalmente colgando del nivel superior, aunque se puede poner en cualquier parte. Por ejemplo, en nuestra web lo hemos creado en msdsoft.com/esp/blog.

Si utilizáis un instalador automático de WordPress, deberéis indicarle el directorio de instalación que habéis creado en el paso anterior. Una vez finalizada la instalación, tendréis todo preparado para funcionar, incluida la base de datos con todas sus tablas. Los siguientes pasos que indicamos a continuación sólo son necesarios si la instalación se realiza manualmente.

Subir WordPress al servidor

Si realizáis la instalación manualmente, deberéis descomprimir el fichero que habéis descargado en el paso anterior en un directorio de vuestro disco duro y después deberéis copiar todo el contenido de dicho directorio al directorio de instalación del blog, para lo que deberéis utilizar un programa FTP (Filezilla es gratuito y muy bueno). Después tendréis que realizar algunas tareas más antes de tener el blog WordPress funcionando.

Crear la base de datos MySql

Si habéis instalado WordPress con una herramienta como Fantastico, además de copiar todos los ficheros necesarios al directorio de instalación, el proceso habrá creado una base de datos MySql, que es donde se guardan los artículos del blog.

Sin embargo, si estáis realizando la instalación a mano, deberéis crear vosotros la base de datos utilizando un programa como phpMyAdmin, En caso de que no sepáis cómo hacerlo, simplemente solicitad al personal de soporte de la empresa donde tenéis alojada la página web que os creen una base de datos MySql para WordPress con un usuario privilegiado (suele ser admin).

Una vez tengáis creada la base de datos, deberéis disponer de su nombre (por ejemplo «NombreBaseDatos»), de un usuario (por ejemplo «NombreUsuario») y de una clave de acceso (por ejemplo «ClaveAcceso»).

Configurar la base de datos en WordPress

En el caso de realizar la instalación manualmente, hay que ejecutar un script llamado install.php para que, entre otras cosas, se creen las tablas en la base de datos.

Lo primero que hay que hacer es copiar el fichero wp-config-sample.php, que encontraréis en el directorio de instalación (en nuestro caso en el directorio blog) en otro fichero llamado wp-config.php. Es necesario editar este fichero para indicarle, entre otras cosas, los datos de acceso a la base de datos MySql. Este es el contenido del fichero wp-config.php en nuestro blog:

// ** Ajustes de MySQL. Solicita estos datos a tu proveedor de alojamiento web. ** //
/** El nombre de tu base de datos de WordPress */
define('DB_NAME', 'NombreBaseDatos');

/** Tu nombre de usuario de MySQL */
define('DB_USER', 'NombreUsuario');

/** Tu contraseña de MySQL */
define('DB_PASSWORD', 'ClaveAcceso');

Otra cosa que hay que actualizar en este fichero son las claves únicas de autentificación, que se pueden conseguir en esta página web. Después de visitar la web, aparecerán unas líneas con las que deberéis sustituir las correspondientes del fichero wp-config.php. Este es un ejemplo:

define('AUTH_KEY', 'hFnc!|;>6-xU**CN%<B$-IOY/HePI>8$/JjWOU~-at?YaX1S/EOi#2Rq]69>>5vj');
define('SECURE_AUTH_KEY', 'j`w7xx8V]Tb7uob-+jFW[R0]|R=g35L0ITCIhq0ZiSrZq1iESvcA>^X+[DV~;-+-');
define('LOGGED_IN_KEY', '+O~@icI;^*]FV[rx6cY%Se.{J;#FSg$||K/WZ=})(F|T{nyi@)%!`u`B(wVrVq&d');
define('NONCE_KEY', 'xw9jV[uP0p+ueb*>Lwp:O+wTA8z<LmMzZHA_p&.m]*=o:TCZU(4*TFdB1{$w$+Dm'); define('AUTH_SALT', '0vb$y+?tV+d1}J!kr+Qr, w.=zpxES-aprVkvN(Gxj.Yg>`%r#tSVM-E:5):DlDS');
define('SECURE_AUTH_SALT', 'zpdrbkH)AD-X7w:&GxS&=);g|P#K4K1zzoP#&Y@+y!bjysXk-8x._HGUEynqCLrx');
define('LOGGED_IN_SALT', '$zKb@U-V%4BAO|`a/UR|q#+``!LO[]!yeWeT!u|tDAvf96Tex[18`eJ&b|0brcc(');
define('NONCE_SALT', 'didUp,FP!xc.RhN^0c5 iDQysI,5x+]m#GW>&qcI>/w#,)~Kr*]|$W9iB}#IU)&E');

Otras líneas que posiblemente tendréis que cambiar hacen referencia al prefijo del nombre de la base de datos MySql y al idioma del blog. Este es un ejemplo con valores por defecto:

/**
* Prefijo de la base de datos de WordPress.
*
* Cambia el prefijo si deseas instalar multiples blogs en una sola base de datos.
* Emplea solo números, letras y guión bajo.
*/
$table_prefix  = 'wp_';

/**
* Idioma de WordPress.
*
* Cambia lo siguiente para tener WordPress en tu idioma. El correspondiente archivo MO
* del lenguaje elegido debe encontrarse en wp-content/languages.
* Por ejemplo, instala ca_ES.mo copiándolo a wp-content/languages y define WPLANG como 'ca_ES'
* para traducir WordPress al catalán.
*/
define('WPLANG', 'es_ES');

Finalizar la instalación de WordPress

En el caso de realizar la instalación manualmente, hay que ejecutar un script para que, entre otras cosas, se creen las tablas en la base de datos que acabamos de crear. Para finalizar la instalación del blog WordPress basta con poner en un navegador la URL donde hemos instalado el blog. Por ejemplo:

http://www.tupaginaweb.com/blog/

Si todo ha ido bien, WordPress indicará que la instalación ha finalizado correctamente y nos habrá enviado un correo electrónico a la cuenta de correo que hayamos elegido durante el proceso de instalación, donde nos indicará la URL de acceso al panel de control del blog, así como el nombre de usuario y la contraseña para entrar.

En la imagen siguiente se pueden ver las tablas que WordPress crea en la base de datos MySql. Como se puede apreciar, nosotros hemos usado el prefijo wpesp_, pero por defecto el prefijo que utiliza WordPress es wp_ y es el que os sugiero que utilicéis.

Para poder manejar el blog que acabáis de crear necesitáis acceder al Panel de Control de WordPress (Dashboard). Esta es la dirección que debéis introducir en el navegador:

http://www.tupaginaweb.com/blog/wp-login.php

Si habéis tenido algún problema instalando WordPress, quizás os sea de utilidad esta guía de instalación de WordPress en cinco minutos (está en inglés).

3.- Creación de un Tema hijo

Los temas de WordPress son un conjunto de ficheros que cambian el aspecto del blog sin afectar a su contenido. Simplemente cambiando de tema, nuestro blog puede tener un aspecto completamente distinto.

Para instalar un blog WordPress en nuestra página web deberemos elegir el tema que más nos guste. Hay miles de temas en Internet, algunos gratuitos y otros de pago.

Independientemente del tema que elijamos, es recomendable crear un tema hijo, y utilizar dicho tema hijo para nuestro blog. La razón para utilizar un tema hijo es que si trabajamos directamente sobre un tema padre, todos los cambios que hagamos se perderán cada vez que WordPress actualice dicho tema. Sin embargo, si utilizamos un tema hijo, podremos actualizar el tema padre sin perder nuestros cambios.

Para crear un tema hijo, basta con crear una carpeta colgando de wp-content/themes con el nombre que deseemos. Por ejemplo, si usamos un tema por defecto de WordPress como twentythirteen‎, nuestro tema hijo podría llamarse twentythirteen‎-child.

Dentro de esa carpeta twentythirteen‎-child crearemos un fichero llamado style.css con este contenido:

/*
Theme Name:     Twenty Thirteen Child
Theme URI:      http://example.com/twenty-thirteen-child/
Description:    Twenty Thirteen Child Theme
Author:         John Doe
Author URI:     http://example.com
Template:       twentythirteen
Version:        1.0.0
*/

@import url("../twentythirteen/style.css");

Este archivo sytle.css sustituye al fichero del mismo nombre del tema padre, por eso se añade la orden import. Este fichero define el aspecto que tendrá nuestro blog, y deberemos hacer en él los cambios que sean necesarios para que el aspecto final del blog sea similar al de la página web html.

Una vez hayamos creado el fichero style.css, deberemos copiar los siguientes ficheros del tema padre en el directorio del tema hijo:

• header.php
• footer.php

Esta operación podemos hacerla usando el gestor de archivos del panel de control del servidor donde tenemos alojada la web, o utilizando un programa de transferencia de ficheros FTP.

Una vez realizados los pasos anteriores, el tema hijo aparecerá en el panel de control de WordPress en el menú «Apariencia-Temas». Lo único que tendremos que hacer es seleccionarlo y activarlo.

4.- Configuración del Tema Hijo

Lo que vamos a hacer ahora es convertir el blog WordPress que acabamos de crear en una copia exacta de la página web html donde lo vamos a integrar. Para ello vamos a copiar las partes comunes de nuestra página html (cabecera, barra lateral y pie) dentro de los dos ficheros header.php y footer.php.

Dependiendo de la estructura de la página web html deberemos copiar la información en el fichero header.php o en el footer.php. De cualquier modo, el objetivo es que estos dos ficheros contengan todo el código html de la cabecera, la barra lateral y el pie de la página heml. La cuestión es colocar esa información en el sitio correcto.

En nuestro caso, la web html está creada con plantillas (templates), por lo que la cabecera, la barra lateral y el pie de todas las páginas es común. Para editar los ficheros php deberéis elegir una página cualquiera de vuestra web, a ser posible una con poca o ninguna información, para que casi todo el código html sea la parte común de la web.

En la imagen siguiente podéis ver el aspecto que tiene una página vacía de la web html donde hemos integrado el blog WordPress:

Como véis, la página sólo tiene la cabecera, la barra lateral y el pie de página. En cada caso la página web html que se usará para modificar los ficheros php del blog será diferente, dependiendo de si habéis utilizado Frontpage, DreamWeaver o cualquier otro programa de creación de páginas web.

Cambios en el fichero header.php

En el fichero header.php que hemos copiado en el directorio del tema hijo deberemos hacer los siguientes cambios:

• Justo detrás de la etiqueta <head> del fichero header.php deberemos insertar todo el código que haya en la página html entre las etiquetas <head> y </head>.

• Justo detrás de la etiqueta <body> del fichero header.php deberemos insertar todo el código que haya en la página html desde la etiqueta <body> hasta el comienzo del contenido de la página. Es decir, hay que introducir el código que es común a todas las páginas del sitio web html. En nuestro caso, eso incluye sólo la cabecera de la web.

• Justo después de la etiqueta <head>, colocar la siguiente línea para que el blog encuentre las direcciones de la página web:

<base href="http://www.tupaginaweb.com" />

• Subir la línea que carga los estilos del blog justo antes de la línea que carga los estilos de la página web. En nuestro caso esto ha sido necesario para que el blog tuviese un buen aspecto. Esta es la línea que hay que recolocar:

<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" media="all" type="text/css" />

• Después del cambio anterior, los estilos del blog estarán bien, pero puede que los estilos de la página web que tengan el mismo nombre podrían haberse visto afectados por los del blog. En nuestro caso había estilos con el mismo nombre, por lo que tuvimos que crear un nuevo fichero de estilos llamado style-bis.css en el que hicimos las modificaciones pertinentes para restaurar los cambios producidos por los estilos del blog. Por tanto, la carga de estilos quedó de la siguiente manera:

<!-- estilos del tema hijo -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

<!-- estilos de tupaginaweb.com, suponiendo que estén en el directorio css -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!-- estilos para corregir los problemas en tupaginaweb.com -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_directory' ); ?>/style-bis.css" />

• El resto del fichero header.php debe mantenerse como está.

Cambios en el fichero footer.php

En el fichero footer.php que hemos copiado en el directorio del tema hijo, deberemos hacer los siguientes cambios:

• Justo antes de la etiqueta </body> del fichero footer.php deberemos insertar todo el código que haya en la página html desde el final del contenido de la página hasta la etiqueta </body>. En nuestro caso, eso incluye la barra lateral y el pie de la página web.

• El resto del fichero footer.php debe mantenerse como está.

Cambios en el fichero index.php

Este fichero, que se encuentra en el directorio de instalación del blog, debe tener el siguiente contenido:

<?php
/**
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
*
* @package WordPress
*/

/**
* Tells WordPress to load the WordPress theme and output it.
*
* @var bool
*/
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require('./wp-blog-header.php');

Cambios en el fichero style.css

Una vez realizados todos los cambios anteriores, al abrir la dirección http://www.tupaginaweb.com/blog debería aparecer una página del blog con el aspecto de la página web html, pero con el contenido del blog, por ejemplo, la cabecera, la barra lateral derecha y su propio pie de página.

Muchos de los elementos visuales aparecerán distorsionados por causa de la unión de los estilos de la página html y del blog, por lo que habrá que realizar cambios en el fichero style.css del tema hijo hasta que se consigan los resultados deseados.

En nuestro caso tuvimos que tocar unas 10 líneas de estilos para dejar el blog a nuestro gusto. No fue demasiado trabajo, aunque sí es necesario tener un cierto conocimiento de estilos css para que todo funcione correctamente.

5.- Conclusión

Hay muchas formas de integrar un blog en una página web html, pero ninguna de las que encontramos descritas en distintos artículos en Internet cumplían nuestros requerimientos.

Finalmente encontramos la forma de hacerlo, que aunque parezca difícil, no lo es. Se tarda mucho más en contar cómo se hace que en hacerlo.

Esperamos que este tutorial sirva para que muchos webmasters puedan integrar un blog WordPress en su página web html, sin perder el sueño en el proceso.

« Blackberry Messenger, duro competidor para WhatsApp