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/


Organiza tu vida con Agenda MSD

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:

Instalación automática de WordPress usando Fantastico

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.

Tablas creadas por WordPress en la base de datos MySql

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:

Plantilla html para integrar un 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:

&lt;base href="http://www.tupaginaweb.com" /&gt;

  • 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:

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

  • 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:

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

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

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

  • 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:


&lt;?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.


Participa dejando un comentario. Gracias por colaborar.

«