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

Publicado por msdsoft en noviembre 5, 2013 en Blogs, Destacados, HTML / WEB, MSD Soft, Tutoriales 59 Comentarios

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


&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.

ArtÃculos relacionados:

MSDSoft Frases - Alexander Graham Bell - Un hombre debe muy poco a aquello con lo que nace

MSDSoft Frases - Lao Tzu - En el centro de tu ser tienes la respuesta

MSDSoft Frases - Confucio - No importa lo lento que vayas mientras no te detengas

« Blackberry Messenger, duro competidor para WhatsApp

Google se blinda frente a los ataques DDoS »

59 Comentarios

Ruben Benitez 22/02/2019

Hola, pues solo darte las gracias, probÃ© dos mÃ©todos antes de llegar al tuyo, pero fueron soluciones parciales, esta soluciÃ³n que nos has dado es perfecta, y gracias por este sitio con ayuda, espero sigas adelante ðŸ™‚

Responder

msdsoft 25/02/2019

RubÃ©n, nos alegra que el artÃculo le haya sido de utilidad. Saludos.

Responder

Horacio 07/05/2018

Hola, estoy por integrar un blog a una web y voy a seguir este tutorial, ya tengo el diseÃ±o del blog en html. La duda que tengo es: Â¿la implementaciÃ³n de mi diseÃ±o es igual a lo que explican sobre Â«los themesÂ» gratis o pagos? Me parece excelente la forma en que estÃ¡ explicado todo. Raramente sucede esto en internet. Gracias y saludos.

Responder

msdsoft 08/05/2018

Horacio, gracias por sus amables palabras sobre nuestro artÃculo. La tÃ©cnica de integraciÃ³n de un blog WordPress en una pÃ¡gina web que explicamos en el artÃculo se basa en incorporar a los ficheros del blog los elementos html y css procedentes de la pÃ¡gina web, con objeto de que el blog tenga el mismo aspecto que dicha pÃ¡gina web. En este contexto, da igual que el tema del blog sea gratuito o de pago. Lo importante es hacer las modificaciones en los ficheros de WordPress tendentes a que su aspecto sea lo mÃ¡s parecido posible al de la pÃ¡gina web. Saludos.

Responder

Horacio 08/05/2018

Gracias por responder. Saludos

Responder

David 15/01/2018

Muchas gracias por la informaciÃ³n, he tenido que probar un par de veces pero al final me ha salido (sobretodo por la confusiÃ³n del DETRÃS de la etiqueta **** en vez de antes o despuÃ©s :p)
No se si me podrÃas ayudar… todo me ha ido bien pero cuando por ejemplo hace click encima del post lo abre pero lo abre sin cargas los estilos (solo me carga el menu y el footer pero sin estilos en cambio en la principal miweb/blog si que me carga bien)
Gracias de antemano!

Responder

msdsoft 16/01/2018

David, en el artÃculo explicamos dÃ³nde hay que cargar los css y el orden en el que hay que hacerlo para que el blog tenga el aspecto de la pÃ¡gina web. Revise si ha incluido los ficheros css en los sitios indicados en el artÃculo. Saludos.

Responder

pepe 06/01/2018

Hola. He realizado todo el tutorÃa y funcionado bien, pero los cambios que realizo en style.css de la carpeta hijo no me hacen efecto ninguno. Debo de hacer algo mÃ¡s? Tengo que insertar el link de style.css en el header.php y footer.php?
Gracias

Responder

msdsoft 08/01/2018

Pepe, en el tutorial explicamos con detalle lo que hay que hacer con los ficheros css. No sÃ³lo hay que incluirlos, tambiÃ©n hay que ponerlos en el orden correcto, el cual tambiÃ©n indicamos en el tutorial. Saludos.

Responder

rf 03/10/2017

Â¿En quÃ© servidor tienes el programa FANTASTICO y tu cpanel? Â¿PodrÃas decirme en dÃ³nde puedo conseguir un cpanel con el programa fantÃ¡stico?
Saludos y muchas gracias!

Responder

msdsoft 03/10/2017

Hola, hoy en dÃa prÃ¡cticamente cualquier proveedor de servicios de Internet dispone de cPanel y de programas como FANTASTICO. Saludos.

Responder

rf 05/10/2017

Â¿Go Daddy lo tendrÃ¡?

Responder

msdsoft 05/10/2017

Es posible, puedes hacer una bÃºsqueda en google o contactar con Godaddy desde su pÃ¡gina web y hacer la consulta. Saludos.

Responder

Laura 20/08/2017

Hola, una pregunta, si ya tengo un template html con una seccion de blog (estatica). Se puede adaptar el codigo html a php? O es posible convertirlo para usarlo y administrarlo desde wordpress? Gracias!

Responder

msdsoft 21/08/2017

Laura, para pasar las pÃ¡ginas de un blog HTML a un blog WordPress simplemente hay que crear nuevas pÃ¡ginas en WordPress con el contenido de las pÃ¡ginas del blog HTML. Es un proceso manual, pero una vez resuelto el tema de los estilos a travÃ©s de CSS el trabajo serÃ¡ prÃ¡cticamente un copiar y pegar contenido de un blog al otro. Saludos.

Responder

Tomas 06/06/2017

Hola buenas, tengo una pequeÃ±a duda, la base de datos tiene que ser una nueva para el wordpress o puedo usar los datos que tengo de mi DB de mi pÃ¡gina web que es lo mejor ?

Muchas gracias de antemano

Responder

msdsoft 07/06/2017

TomÃ¡s, los artÃculos que se escribirÃ¡n en el blog WordPress tienen que usar la base de datos de WordPress. Saludos.

Responder

Milenko 26/04/2017

Gracias por el tutorial, muy bueno la verdad!.
Solo tengo algunas consultas. Leyendo los comentarios veo que apareciÃ³ una consulta similar, pero aun asi no me quedo 100% clara su respuesta.
1.- Justo detrÃ¡s de la etiqueta , esto significa esto?
a) AQUI INSERTO
b) AQUI INSERTO

2.- insertar todo el cÃ³digo que haya en la pÃ¡gina html desde el final del contenido de la pÃ¡gina hasta la etiqueta . Esto no queda claro, en la pagina la etiqueta esta al final de la pagina, por tanto bajo eso no hay nada.

Muchas gracias!!!

Responder

Milenko 26/04/2017

Tuve que escribir de nuevo la consulta ya que no aparecia las etiquetas.
Gracias por el tutorial, muy bueno la verdad!.
Solo tengo algunas consultas. Leyendo los comentarios veo que aparcio una consulta similar, pero aun asi no me quedo 100% clara su respuesta.
1.- Justo detrÃ¡s de la etiqueta body, esto significa esto?
a) body AQUI INSERTO
b) AQUI INSERTO body
2.- insertar todo el cÃ³digo que haya en la pÃ¡gina html desde el final del contenido de la pÃ¡gina hasta la etiqueta slash body. Esto no queda claro, en la pagina la etiqueta slash body esta al final de la pagina, por tanto bajo eso no hay nada.
Muchas gracias!!!

Responder

msdsoft 26/04/2017

Milenko, gracias por tus amables palabras. Respondo a tus dos cuestiones:
1.- Justo detrÃ¡s de Â«bodyÂ» significa Â«bodyÂ» INSERTO.
2.- DetrÃ¡s del Â«contenidoÂ» de la pÃ¡gina y antes de Â«/bodyÂ» puede haber cosas como la barra lateral o el pie de pÃ¡gina (es asÃ en nuestro caso).
Saludos.

Responder

Antonio 19/04/2017

Hola que tal segui estas insruciones y realmente fue de mucha ayuda tu gran aporte, pero me surgio una duda.

Al momento de creear el blog yo lo hice de forma local con la instalacion de 5 minutos y todo lo que se hace, pero ahora que ya subi la pagina a la red me percato que lo enlaces apuntan a mi localhost y si es un problema en verdad, tendria que hacerlo directo desde mi servidor donde esta la pagina???

la ruta que elegi al hacerlo localmente es localhost/mi_pagina/blog

Responder

msdsoft 19/04/2017

Antonio, nos alegra haber servido de ayuda. En Â«Ajustes – GeneralesÂ» encontrarÃ¡s la direcciÃ³n de tu blog WordPress y en Â«Ajustes – Enlaces permanentesÂ» puedes definir la estructura de la URL de tus entradas del blog. Por supuesto, debes asegurarte de que todos los enlaces que haya en tus entradas apunten a una URL existente, ya esa externa o interna a tu blog. Saludos.

Responder

Zully HernÃ¡ndez 23/03/2017

Saludos a todos.
Tengo una duda la cual espero me puedan ayudar a resolver.
Soy nueva en esto de la programaciÃ³n y mÃ¡s con wordpress, por lo que he visto es muy prÃ¡ctico, sÃ³lo que mi duda es la siguiente: tengo un template de mi blog (Â«tmp-blog.phpÂ») y me gustarÃa aÃ±ardirlo a mis otras opciones de menÃº para que se pueda ver (Â«page-tours.phpÂ», Â«page-contactanos.phpÂ», etc.) Â¿hay alguna manera en quÃ© pueda llamarlo en mis opciones del menÃº sin tener que copiar y pegar todo mi template del blog en cada una de ellas? De ante mano, gracias.

Responder

msdsoft 24/03/2017

Zully, gracias por contactar con nosotros. Sentimos no poder ser de mucha ayuda en la duda que nos planteas. Dado que estÃ¡s empezando y que este mundo de la programaciÃ³n php no es sencillo, te recomendamos que visites foros sobre WordPress donde encontrarÃ¡s toda clase de recursos para aprender. Saludos.

Responder

Oli 28/11/2016

Hola, Tengo una web estÃ¡tica y justo andaba buscando este tutorial para aÃ±adir un nuevo apartado que serÃ¡ el blog. Pero es mÃ¡s complicado que en este ejemplo, ya que la web tiene tres idiomas. Tengo un directorio para cada idioma Â«castÂ», Â«caÂ» y Â«engÂ» que es una copia de todo el site dentro de cada directorio pero con el contenido en su idioma correspondiente. AÃ±adir el directorio Â«blogÂ» con el contenido de wordpress deberÃ¡ de estar al mismo nivel que los directorios para cada idioma. Pero si quiero escribir el contenido de cada entrada del blog en los tres idiomas, por ejemplo, Â¿existe algÃºn plugin que detecte en quÃ© idioma esta la etiqueta lang o poder pasarle algÃºn parametro para que se visualice el contenido en solo en el idioma necesario?
Gracias

Responder

msdsoft 28/11/2016

Oli, en nuestra web no hemos tenido que lidiar con este problema, pero estamos seguros de que hay blogs que soportan varios idiomas y que tendrÃ¡n resuelto el tema de los idiomas. Te aconsejamos que hagas una bÃºsqueda en internet este sentido y esperamos que encuentres la mejor soluciÃ³n posible. Saludos.

Responder

Alonso 12/11/2016

Hola quisiera saber si puedo insertar wordpress en mi web estÃ¡tica para que se actualicen solos los contenidos (se coloquen quiero decir) y no tener que moverlo yo Â«a manoÂ». Mi duda es si en WordPress se puede poner el color de fondo de la web y el ancho de columna y tip de fuente. Es algo bastante bÃ¡sico loq ue quiero, me extraÃ±a que no se pueda.

Responder

msdsoft 14/11/2016

Alonso, justamente eso que pides es lo que hemos hecho en nuestra web http://www.msdsoft.com y en este artÃculo hemos contado en detalle cÃ³mo lo hemos hecho. No hemos modificado nuestra web estÃ¡tica, hemos modificado el blog de WordPress para que se parezca al 100% a nuestra pÃ¡gina web. Saludos.

Responder

Maritza 07/10/2016

Hola, buenos dias.

MuchÃsimas gracias por el tutorial. He estado mirando formas de integrar un blog en una web y creo que esta es la mejor forma sin ser una cutrez como poner un iframe (cosa que tuve que usar hace tiempo porque no conseguÃ encontrar otra forma).

Mi problema es el siguiente. Yo creÃ© mi blog en blogger Â¿hay alguna forma de integrar un blog de blogger en una web? SÃ© que wordpress usa lenguaje php y no sÃ© si hay algun script para integrar blogger en una web.

Me quedo a la espera de noticias. Muchas gracias.

Responder

msdsoft 07/10/2016

Martza, gracias por sus amables palabras. No tenemos experiencia en la integraciÃ³n de blogs de Blogger en pÃ¡ginas web, pero haciendo la siguiente bÃºsqueda en google Â«integrar blog blogger en una webÂ» hemos encontrado algunos artÃculos que pueden ser de su interÃ©s. Esperamos que le sean de utilidad. Saludos.

Responder

Roberto 19/08/2016

Hola. Que buenas instrucciones. Muchas gracias, he logrado cargar el WP.
Solo que quiero integrar las noticias del WP a un html cualquiera. Â¿CÃ³mo lo hago?, he intentado colocar el siguiente cÃ³digo pero no funciona:

<?php
define('WP_USE_THEMES', false);
require_once($_SERVER['DOCUMENT_ROOT'] . '/db/wp-blog-header.php');
query_posts('showposts=7');
echo '’;
while (have_posts ()): the_post();
echo Â«ID) . Â«‘>Â»;
the_title();
echo ‘‘;
endwhile;
echo Â»;
?>

Responder

msdsoft 23/08/2016

Roberto, si te fijas en las instrucciones del artÃculo, nosotros hemos colocado el blog en una pÃ¡gina llamada https://www.msdsoft.com/esp/blog/

El truco estÃ¡ en cambiar el aspecto del blog para que parezca una pÃ¡gina de nuestra web.

Saludos.

Responder

Lis 22/07/2016

Buenos dÃas, buen artÃculo, pero no se si es lo que yo necesito, te explico, quiero integrar las entradas de mi blog wp en una pÃ¡gina web sin cabecera ni pie, sÃ³lo las entradas y que al darle a leer mÃ¡s se abriera tambien sin cabecera ni pie de pagina, esto lo podria hacer con tu tutoria??
gracias y un saludo

Responder

msdsoft 22/07/2016

Lis, como habrÃ¡s comprobado leyendo nuestro artÃculo, lo que hacemos es crear un blog WordPress en un subdirectorio de nuestra pÃ¡gina web en el que duplicamos el contenido de la cabecera de la web, la barra lateral y el pie de pÃ¡gina usando los ficheros correspondientes del blog. Si lo que quieres es que sÃ³lo aparezcan los artÃculos, bastarÃa con vaciar de contenido los ficheros header.php y footer.php del blog. Espero que puedas conseguirlo. Nos encantarÃ¡ que dejes un mensaje con el enlace a tu blog si lo consigues. Saludos.

Responder

Carlos 07/04/2016

Tengo un problemilla… DespuÃ©s de hacer la instalaciÃ³n en el servidor… Crear la base datos, configurar el blog… Ya puedo acceder desde http://www.chechare.com/blog . pero al indicarle a un enlace en index.html que me lleve al blog… No me lleva. Es sÃºper absurdo… Pero no tengo ni idea de porque puede ser. Espero que me puedas decir a quÃ© se debe esto…

Un saludo!!

Responder

msdsoft 09/04/2016

Carlos, la clave para acceder al blog desde la pÃ¡gina web estÃ¡ en conocer el directorio donde se instala el blog dentro de tu servidor. He comprobado que has sido capaz de resolver el problema por tÃ mismo, pues el enlace desde tu web al blog funciona correctamente. Enhorabuena ðŸ™‚

Responder

Jhon 02/03/2016

Hola muy bueno el articulo, pero me gustaria ssaber si tienen algun video sobre este mismo articulo explicando todo paso a paso?

Gracias!

Responder

msdsoft 02/03/2016

Jhon, gracias por tus amables palabras. No hemos hecho un vÃdeo sobre el proceso para integrar un blog en una pÃ¡gina web. Lo que hemos hecho es intentar describir el proceso de forma detallada para que otros webmasters que afrontan el mismo problema que nosotros afrontamos en su dÃa, puedan tener una guÃa para resolver el problema. Espero que el artÃculo te sea de utilidad. Saludos.

Responder

JesÃºs 24/02/2016

Hola. Lo tengo todo claro menos una cosa, pues soy un poco nuevo en el mundillo WordPress. Tengo ya mi pÃ¡gina hecha con WordPress, y si ahora le cambio el tema, me va a fastaidiar mil ajustes que he hecho directamente en el cÃ³digo (o eso creo). En caso de que lo hiciese, una vez ajustado el blog, entiendo que deberÃa volver a cambiar el theme de la pÃ¡gina al anterior, y en este punto Â¿como integro el blog en una de las secciones?

muchas gracias de antemano.

Responder

msdsoft 29/02/2016

JesÃºs, lo primero que debes hacer es elegir el tema. Esta es una elecciÃ³n delicada, pues todo el trabajo posterior se va a ver condicionado por esta elecciÃ³n. Una vez hechos los cambios al tema para darle el aspecto de tu pÃ¡gina web, si lo cambias posteriormente tendrÃ¡s que volver a realizar todo el trabajo de integraciÃ³n. Por tanto, elige bien el tema y haz todas las pruebas que quieras con Ã©l. Una vez elegido, sigue los pasos indicados en el artÃculo. BÃ¡sicamente crea un tema hijo, para que puedas modificarlo sin que se vea afectado en el futuro por actualizaciones del tema. DespuÃ©s, modifica los ficheros indicados en el artÃculo para que la cabecera, la barra lateral y el pie de tu blog tengan el aspecto de tu pÃ¡gina web. Saludos.

Responder

marta 23/02/2016

hola!!! estupendo articulo, pero tengo 3 cositas…
no acabo de entender como cambias las 4 cosas de css que no quedan bien, porque creas style-biss?
noser porque no me salen los widgets
y por ultimo cuando clicas el artÃculo el estilo del header y footer no funcionan, no se ve como la pagina web
muchas gracias!!!

Responder

msdsoft 29/02/2016

Marta, hay varias formas de integrar un blog WordPress en una pÃ¡gina web. La soluciÃ³n que presentamos en este artÃculo se basa en modificar la cabecera, banda lateral y pie de pÃ¡gina del blog para que aparezcca igual que la pÃ¡gina web en la que se desea integrar. Para conseguir este objetivo es imprescindible seguir los pasos indicados en el artÃculo, sin dejar ninguno atrÃ¡s. Hay que editar los ficheros indicados con mucho cuidado para no modificar lo que no se debe tocar. Si sigues todos los pasos, como mucho podrÃ¡s tener problemas de aspecto de la pÃ¡gina, que se deben resolver modificando los ficheros CSS, tal como comentamos en el artÃculo. Saludos.

Responder

Liz 09/02/2016

Realmente este tutorial es muy bueno, pero tengo un gran problema y es que me desconfigura las cosas, no se en que parte tengo que insertar el cÃ³digo html de mi pagina web original, es que no entiendo cuando dicen por ejemplo:
Â«Justo detrÃ¡s de la etiqueta…Â» que significa Â«justo detrÃ¡sÂ»? es despuÃ©s, en medio o antes de la etiqueta? Necesito poner un blog dentro de mi pÃ¡gina web y no he encontrado la manera de hacerlo.

Responder

msdsoft 11/02/2016

Liz, gracias por tu comentario. TÃº deseas crear un blog en tu pÃ¡gina web, que es lo mismo que yo querÃa. DespuÃ©s de mucho estudio y pruebas, lleguÃ© a la conclusiÃ³n de que era mucho mÃ¡s fÃ¡cil darle al blog WordPress la apariencia de mi pÃ¡gina web en lo referente a la cabecera, barra lateral y pie de pÃ¡gina.

Por lo tanto, la tÃ©cnica consiste en insertar el cÃ³digo comÃºn de tu pÃ¡gina web html (cabecera, barra lateral y pie de pÃ¡gina) en los ficheros php correspondientes del blog WordPress.

Cuando digo, por ejemplo, que se debe insertar el cÃ³digo html Â«justo detrÃ¡s de la etiueta Â» del fichero php me refiero a esto:

INSERTA AQUÃ EL CÃ“DIGO HTML QUE SE INDICA EN EL ARTÃCULO

En cuanto a que se desconfigura el contenido, esto tiene que ver con los ficheros de estilos CSS que utilizas en tu web. En el artÃculo he comentado lo que tuve que hacer para que el blog tuviese el aspecto de la pÃ¡gina web, que no es otra cosa que insertar en el sitio adecuado el fichero de estilos de tu pÃ¡gina web html.

Mi consejo es que vayas poco a poco. CÃ©ntrate primero en la cabecera del blog. Cuando hayas conseguido que sea similar a la cabecera de tu pÃ¡gina web, sigue con el pie de pÃ¡gina. Finalmente, dedÃcate a insertar la barra lateral de tu web, si es que la tienes.

Saludos y suerte ðŸ™‚

Responder

Luis 20/11/2015

Buenas tardes segui todos sus pasos la web me quedo asi http://reparacionesadomiciliomadrid.com/Blog-Aire-Acondiconado/
Pero tengo varias dudas, no puedo aÃ±adir ningun widget? veo que ustedes en su blog si que los tienen en el lateral Izq.

Por otro lado los tags y demas se me ve muy feo no se si me deje algo sin modificar.

Gracias un saludo

Responder

msdsoft 24/11/2015

Luis, enhorabuena por haberlo conseguido. La verdad es que es un poco trabajoso.

En nuestra web los widgets estÃ¡n a la derecha y son parte del tema que hemos elegido. Lo que hay a la izquierda es parte de la pÃ¡gina web, no del blog.

En cuanto al aspecto de tags y otros elementos del blog, dependen de los estilos del fichero CSS y de los estilos del tema que hayas elegido. AquÃ no queda otra que hace pruebas hasta que des con el aspecto deseado.

Saludos.

Responder

flipitx 20/12/2014

Estupendo articulo.
Ahora mismo me pongo manos a la obra. A ver que tal me queda.
Muchas gracias por compartirlo.

Responder
David 28/11/2014

Hola,
estoy planteÃ¡ndome usar esta opciÃ³n para ir publicando las novedades de nuestra empresa en la web corporativa y que todo estÃ© en un mismo sitio.

Â¿A la hora de integrar wordpress dentro de nuestro alojamiento el seo se verÃ¡ afectado de manera positiva, o es mejor crear un blog en wordpress.com y enlazarlo?

Responder

msdsoft 01/12/2014

David, incorporar el blog a vuestra pÃ¡gina web mejorarÃ¡ el SEO de vuestro sitio sin duda alguna, pues todos los artÃculos que publiquÃ©is pertenecerÃ¡n a dicho sitio. Desde nuestro punto de vista, siempre es mejor tener un blog WordPress instalado en un servidor propio que crear el blog en wordpress.com

Saludos

Responder

Lisandro 16/09/2014

Hola! cuando dicen que hay que colocar el cÃ³digo que estÃ¡ en nuestra web antes de la etiqueta , hay que copiar sobre el que ya estÃ¡? Osea, hay que borrar el que esta en WordPress y pegar el nuestro o sÃ³lo copiar y dejar lo que estÃ¡. Gracias

Responder

msdsoft 22/09/2014

Lisandro, la tÃ©cnica que describimos en este artÃculo se basa en Â«insertarÂ» el cÃ³digo de la pÃ¡gina web html en medio del cÃ³digo PHP del blog, de forma que al presentar el blog, Ã©ste tenga el aspecto de la pÃ¡gina web original.

Saludos.

Responder

Alejandro Sanchez 11/09/2014

Saludos cordiales.
Les solicito informaciÃ³n.
En vuestra pÃ¡gina Web me explican como integrar una pÃ¡gina Web en HTML.
Mi consulta es como puedo integrar otra pagina Web dentro de WordPress, o mÃ¡s bien en diferentes columnas de WordPress integrar 3 pÃ¡ginas Web diferentes.
Gracias

Responder

msdsoft 13/09/2014

Alejandro, lo que explicamos en nuestro artÃculo es la forma de modificar los ficheros bÃ¡sicos de WordPress para presentar el aspecto de una pÃ¡gina web HTML ya existente, y asÃ poder integrar ambas webs en una sola.

Lo que usted desea es introducir varias pÃ¡ginas web dentro de diferentes columnas de WordPress. Lo cierto es que se puede hacer, a base de introducir cÃ³digo html en las pÃ¡ginas php de WordPress, pero no es lo mÃ¡s recomendable. SerÃa mejor coger el contenido de esas pÃ¡ginas web e introducirlo en pÃ¡ginas o artÃculos de un blog WordPress, de forma que quede una Ãºnica pÃ¡gina web que serÃ¡ el blog.
Saludos.

Responder

marcelo quiroga 18/07/2014

Buenas tardes muy buen apartado de como realizarlo, te felicito asi me quedo.

http://www.soloplanes.net/blog

Responder

msdsoft 19/07/2014

Hola Marcelo, nos complace que nuestro tutorial le haya ayudado a integrar un blog WordPress en su pÃ¡gina web html. Vuestro trabajo ha quedado muy bien ðŸ˜‰

Saludos

Responder

Ed 02/06/2014

Hola, muchas gracias por el tutorial. Me ha sido muy Ãºtil hasta ahora, sin embargo tengo un problema.
Mi pÃ¡gina web tiene un menÃº responsivo, sin embargo, al hacer la integraciÃ³n de WordPress a la pÃ¡gina, el menÃº deja de ser responsivo, Â¿sabes por quÃ© podrÃa ser?
Gracias por adelantado.
Saludos.

Responder

msdsoft 03/06/2014

Ed, nos alegra que el tutorial te haya resultado Ãºtil para integrar un blog en su pÃ¡gina web html. El problema que comentas de los menÃºs puede deberse a solapamientos en los cÃ³digos CSS, ya que al unificar la pÃ¡gina web con el blog se superponen los CSS de ambas webs. Lo que hay que hacer es asegurarse de que no hay entradas con el mismo nombre, y en caso de que las haya, hay que cambiarle el nombre en alguna de las dos webs. Lo mejor es cambiar el nombre de las entradas CSS que menos uso tengan, de modo que haya que cambiar lo menos posible el contenido de las pÃ¡ginas web.

Seguramente el problema que tienes es que se solapan nombres CSS en tus menÃºs HTML y en los menÃºs de WordPress. En tal caso, serÃa mejor cambiar el nombre de los elementos CSS de la pÃ¡gina web HTML.

Saludos.

Responder

Javier Q.G. 30/03/2014

Buenas tardes a todos:
Â¿SerÃa posible cambiar el apartado de actualizaciones de mi web al sistema WordPress? Esto de editar HTML es superlento y tedioso a veces. Os dejo la URL del sitio.
http://www.lignumcrucis.es/Actualizaciones.html

Responder

msdsoft 31/03/2014

Javier, el contenido de tu pÃ¡gina de actualizaciones es un claro candidato para ser implementado con un blog WordPress. Como puedes ver en mi pÃ¡gina web, la parte html es bastante estÃ¡tica, con muy pocos cambios a lo largo del tiempo. Sin embargo, el blog tiene actualizaciones frecuentes que se realizan con la misma facilidad que si utilizÃ¡semos un procesador de textos.

Te recomiendo que emplees algo de tiempo para aprender los fundamentos de WordPress y gracias a artÃculos como este, seguro que conseguirÃ¡s integrar un blog WordPress en tu pÃ¡gina web html. Te aseguro que el esfuerzo merece la pena.

Saludos.

Responder