Integrar WordPress en nuestra web.

31 enero 2012

Vamos a aprender con unos sencillos pasos a integrar nuestro wordpress en nuestra pagina web, como hemos hecho en http://consultoriainnova.com la esencia de todo esto es modificar la plantilla de wordpress para que quede identica a la de nuestra web, asi no nos dará la sensación de que estas metido dentro de un wordpress.

Cosas importantes antes de empezar:

  • ¿Tienes las credenciales necesarias para gestionar archivos por FTP y Base de datos?
    Asegurate de que tienes los datos de acceso para acceder al FTP de tu web, a si como las credenciales de acceso a base de datos.
  • ¿Tienes wordpress ya instalado en tu web?
    Si no es así crea en la raiz de tu sitio una carpeta llamada “blog” (es un ejemplo, puedes llamarla como quieras). Después copia los archivo de instalación de wordpress en esa carpeta, quedando: “/blog/archivos_wordpress…”. Descargar archivos wordpress aquí.
    Una vez realizado lo anterior puedes acceder a “http://www.tu_web.com/blog/” y comenzará el asistente de instalación de wordpress.
  • Asegurate de hacer copias de los archivos
    Haz una copia de los archivos que nombremos antes de modificarlos.

 

COMENZEMOS!

Estos serán los archivos a modificar: header.php, index.php, footer.php. Estos archivos se encuentran en la raiz de nuestro template wordpress ejemplo: /blog/wp-content/themes/nuestrotema/

1.- MODIFICANDO EL HEADER.PHP

  • Abrimos nuestro header.php de nuestra plantilla wordpress, y podemos borrar todo el código sin miedo, ahora en nuestra web vemos nuestro código fuente y copiamos TODO lo que está dentro de la etiqueta <HEAD></HEAD> (sin incluir las etiquetas <HEAD> y </HEAD>.
  • Pegamos ese codigo dentro de nuestro archivo header.php.
  • Para hacer que los titulos de las paginas varíen segun artículos y demás, vamos a sustituir nuestra linea de <meta name=”title”> o <title> por: <title><?php wp_title(‘&laquo;’, true, ‘right’); ?> <?php bloginfo(‘name’); ?></title>
  • Para consevar algunos CSS de nuestra plantilla de wordpress podemos incluir la siguiente linea debajo de nuestros <link.. recien pegados: <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />

 

2.- MODIFICANDO EL INDEX.PHP

  • Vamos a abrir nuestro archivo index.php y podemos borrar todo el código menos las líneas: <?php get_header(); ?> (suele estar al principio), la div: <div id=”content”> Y TODO LO QUE TIENE DENTRO, (ya que esto muestra nuestro cuerpo del wordpress), <?php get_sidebar(); ?> y <?php get_footer(); ?> (suelen estar al final del archivo).
  • Mirando el código fuente de nuestra web copiaremos nuestro header y todo el código que tiene dentro, (normalte habrá una <div> con id= header, eso depende de las web.)
  • Copiamos nuestro código en el archivo index.php entre las lineas <?php get_header(); ?>
    y el contenido <div id=”content”>, quedando:<?php get_header(); ?> NUESTRO CODIGO HEADER <div id=”content”>

 

3.- MODIFICANDO EL FOOTER.PHP

  • Abrimos nuestro archivo footer.php y borramos todo, ahora vamos a nuestro código fuente y copiamos el codigo que engloba al footer (normalte habrá una <div> con id= footer, eso depende de las web.)
  • Copiamos el código del footer de nuestra web en el archivo footer.php.

 

Si todos los pasos se han seguido correctamente ya tendremos nuestro wordpress con el total aspecto de nuestra web!! =)

|
Otros artículos de
David Nieves Coronado

44 Comments

Magalie on 06/06/2012 at 13:33.

Buenos días David:

Me parece muy interesante tu blog.

Me gustaría poder desarrollar algunas pestañas de mi pagina web http://www.mojitosun.com con wordpress, pero no se si es posible, como puedo hacerlo?

Responder

David Nieves Coronado

David Nieves Coronado on 06/06/2012 at 13:42.

No se a que te refieres, tienes wordpress integrado en tu web?? o lo que quieres es integrarlo?? que ponga una nueva pestaña “noticias/blog” o algo asi??

Responder

Webmaster on 09/21/2012 at 22:25.

Hola David…
… Tan solo quería hacer un comentario a modo de consulta. Llevo tiempo intentando hacer esto que tu explicas en este post para integrar un WORDPRESS en mi web HTML, pero siempre con intentos fallidos, por lo que al final tube que instalar el WORDPRESS en un subdominio ( http://www.blog.desatascos.es ) y sindicar el contenido por medio de un PHP ( http://www.desatascos.es/blog_desatascos.php ).
Mi pregunta es si esto se podría considerar como contenido duplicado y en el caso de ser así, como podría integrarlo manteniendo el diseño del HTML estatico.
Gracias por tu tiempo.

Responder

David Nieves Coronado

David Nieves Coronado on 09/22/2012 at 8:47.

Hola,

Revisa bien el tutorial, puede ser cualquier cosa, fallo en rutas, nombres de archivos… pero te aseguro que funciona 😉 si quieres manda los errores que te ha ido dando y te daré la solución al problema. No, no se contaría como contenido duplicado, ya que en tu web tienes diferente contenido al del blog, otra cosa es que en el blog pusieras todo exactamente igual que en la web. Muchas web tienen su web y a parte el blog… No te preocupes, pero ya te digo, no te rindas y sigue intentando implantar wordpress en tu web, cualquier cosa aquí estamos!!

Saludos!

Responder

Natalia on 10/09/2012 at 20:05.

Hola!
Soy diseñadora “recién titulada” y la verdad es que si me sacan de html y css me pierdo, vamos que de php, mysql, etc, no tengo ni santisima idea. Quería incluir mi wordpress dentro de mi página web. Me he descargado un zip desde WP, pero como no conozco el lenguaje php, pues no se exactamente que hacer con este archivo. Por lo que veo, ¿ese mismo archivo es el que tengo que utilizar para seguir los pasos que comentas más arriba?

A ver si puedes ayudarme, porque estoy un poco desesperada de tanto buscar soluciones por internet… y parece que ninguna me funciona… :___(

Gracias por tu tiempo

Responder

David Nieves Coronado

David Nieves Coronado on 10/15/2012 at 6:15.

Hola Natalia, lo que debes de hacer es crear un directorio en la raíz de tu sitio web, por ejemplo llamado “blog” y allí subir DESCOMPRIMIDOS todos los archivos del .zip del wordpress, una vez subidos por FTP accede al directorio con http://www.tusitioweb.com/blog, y comenzará el asistente de instalación (MUY IMPORTANTE, debes tener una base de datos creada para decirle a wordpress que nombre tiene la base de datos a escoger…). Saludos, cualquier duda aquí estamos!!

Responder

Anna on 11/27/2012 at 3:55.

Hola en mi pagina web abajo del formulario para dejar comentarios me aparece este error:
Puedes utilizar etiquetas HTML con sus correspondientes atributos:


Me podrias explicar paso por paso como quitarlo?? Por favor me urge!
Gracias!

Responder

Anna on 11/27/2012 at 3:58.

Bueno al momento en que publique el codigo en el comentario me cambio el formato de las letras, pero el error al que me refiero es el que tu tambien tienes en el formuario para comentario, arriba del boton de enviar, hehe espero me entiendas, gracias!

Responder

David Nieves Coronado

David Nieves Coronado on 11/27/2012 at 8:02.

Hola Anna, la forma más sencilla es la siguiente, si tu página es un WordPress dirígete al archivo de estilos (NORMALMENTE http://WWW.TUWEB.COM/wp-content/themes/undedicated/style.css) y busca donde ponga exáctamente ‘#respond .form-allowed-tags code’ en nuestro caso está en la línea 564.

Añadele la propiedad ‘display:none;’ como nuestro aquí

#respond .form-allowed-tags
{
display: none;
color: #888888;
font-size: 12px;
line-height: 18px;
}

Con esto te bastaría, un saludo!!

Responder

José Manuel on 12/24/2012 at 17:43.

Hola, mi nombre es José Manuel. En primer lugar felicitar por este magnifico post, me sirvió de mucha ayuda. En segundo lugar, he decidido utilizar el mismo theme que el de este blog, me encantan la forma en la que se señala el autor (foto, fecha publicación post, nombre…) Mi pregunta es, como puedo conseguir yo eso? Es un plugin? Y si es un plugin, podrían decirme el nombre.

Espero que mi pregunta no les moleste.

Un saludo.

Responder

Nerea on 01/22/2013 at 21:01.

Hola!

Tengo un blog de wordpress integrado en mi portfolio (php). La página es la siguiente:
http://www.violetamorelli.com/es/blog.php
El problema es que no sé porqué me aparece la scrollbar del wordpress dentro de la web, y me gustaría quitarla… ¿se puede hacer?

Muchas gracias con antelación!

Responder

David Nieves Coronado

David Nieves Coronado on 02/01/2013 at 13:33.

Hola Nerea, lo primero gracias por tu pregunta.

El problema no es de wordpress, es de la estructura interna de tu web, repasando tu código fuente he visto que el wordpress te lo “muetra/inserta” en un iframe. Si tu web tubiera una estructura más sencilla no tendrías estos problemas, mi consejo es que trates de eliminar los iframes…

Saludos desde Consultoria Innova.

Responder

Rodolfo on 02/03/2013 at 15:56.

Buenas amigo segui los pasos que haces y me dio problema en el header que había un error en la linea 2nda linea, no sé que parte estoy haciendo mal:

<link rel=”stylesheet” type=”text/css” media=”all” href=”” />

Responder

David Nieves Coronado

David Nieves Coronado on 05/24/2013 at 11:26.

Hola Rodolfo, quizá sea por el href, sustituye el href por src. Saludos!

Responder

Pedro on 04/11/2013 at 15:38.

Muchas gracias, llevo tiempo buscando como enlazar wordpress y mi web, hasta ahora no había encontrado nada tan claro y sencillo

Responder

franklin on 05/31/2013 at 19:03.

Buen día esta bueno la explicacación pero tengo una duda con esto yo puedo hacer cualquier diseño web e insertar el wordpress en si sitio y sera como tener una pestaña más? la plantilla que dices es la misma que trae por defecto el wordpress?

Exitos y gracias por tu ayuda.

Responder

Alejandro Torres cabrera on 06/28/2013 at 13:08.

Buenas. Mi duda es.

yo tengo una web hecha con unas características que me gustan, pero quiero después que esté administrada por wordpress. ¿Cómo lo puedo hacer?
Tengo unas plantilla hecha que me gusta bastante en php muy simple y no quiero coger una plantilla de wordpress, sino a raíz de mi plantilla gracias a wordpress poder introducir información yo u otros usuarios.

Gracias de antemano y si me contestas rápidos más gracias, porque la duda me come,jajaja.

Responder

edwin on 07/12/2013 at 4:28.

Hola amigo, Muchas gracias por este articulo lo esta buscando hace meses, voy a seguir tus pasos al pie de la letra, espero no tener ningun problema supongo deberia ser mas facil ya que en esencia la web a la cual quiero instalarle el blog de wordpress, tiene como CMS wordpress, lo unico que se cambiado en la web es la plantilla.

Espero no tener ningun problema, si acaso se presenta alguna novedad te estare consultando….de nuevo mil gracias por este post.

Responder

CM en apuros on 07/15/2013 at 9:32.

Hola David,

ante todo gracias por tu post. Soy Community Manager freelance y un cliente, me ha pedido que le instale un BLOG de wordpress en su web ya hecha. Para ello, habría que hacer una pestaña nueva llamada “blog”. Mi problema viene, porque mis nociones de html son muy básicas, entonces no se ni si voy a ser capaz, ni por dónde empezar.

Ya he usado wordpress más veces y se hacer web simples con él, pero de ahí a meterme en una web ya hecha(y no con wordpress), añadir una pestaña nueva e integralo, no se si seré capaz del todo. Tu post lo entiendo, pero cuál sería el primer paso que, en mi caso, tendría que dar? Instalar wordpress en un subdomino? Crear una carpeta llamada blog en el directorio? Bueno, supongo que pedir las claves del cPanel a los webmasters, jejeje.. pero no se hasta que punto sería instalarlo más labor de ellos que mía…:(

Si me puedes hechar un poco de luz al asunto,
te lo aradecería!

Gracias por tu tiempo!
🙂

Responder

David Nieves Coronado

David Nieves Coronado on 07/15/2013 at 10:11.

Hola CM en apuros,

Lo primero que debes hacer es pedir todas las claves que necesites, normalmente con la del panel te bastaría, ya que dentro de éste (si tienes permisos) podrás gestionar conexiones FTP y base de datos.

Lo segundo que debes hacer es subir los archivos de wordpress a un directorio creado en raíz, por ejemplo llamado “blog”, quedando /blog/archivos_wp.

Ahora si todo está correcto, cuando accedas a http://tuweb.com/blog saldrá el asistente para instalar wordpress. Sigue todos los pasos, configura base de datos (debes conocer el nombre de ésta, y la contraseña de acceso, desde el panel puedes ver/gestionar esa información).

Con eso bastaría, lo siguiente es seguir el tutorial de arriba! =)

Gracias por participar en el Blog de Consultoría Innova. Un saludo!

Responder

CM un poco menos apurada! on 07/15/2013 at 13:25.

Hola, otra vezzz !!!

RequeteGRACIAS por contestar TAN TAN RÁPIDO y tan bien!
Ahora tengo las ideas un poco más ordenadas, jeejjeje.

Voy a probar a ver si me sale

Saludos y mil gracias opr la atención!
🙂 🙂 🙂

Responder

Alberyo Gomez on 07/16/2013 at 0:14.

Hola!
El mejor y mas sencillo post para insertar wordpress en pagina web.

Entiendo a la perfeccion tu explicacion, pero hay 3 cositas que no me quedan claras y quiero estar seguro antes de ponerlo en practica porque odio cuando hago modificaciones y el resultado es caos y desorden. Mis preguntas:

1. En modificar el Header.php dijiste “no incluir las etiquetas y ; es igual para modificar el Footer.php?, es decir, que no debo incluir el y , o para el footer.php estas etiquetas si deben colocarse?
2. Y lo otro es mas bien de comprension de lectura (que a veces me falla). En modificando el Index.php dijiste “borrar todo menos (hasta ahi bien, aqui viene el problema): la Y TODO LO QUE VIENE DENTRO…” Es decir, nos estas diciendo que todo el codigo que viene despues de la etiqueta debe BORRARSE o por el contrario CONSERVARSE y despues pegar MI contenido?

Gracias de antemano y tendras tu espacio de publicidad cuando tenga mi web lista (y es una promesa por escrito)

Responder

David Nieves Coronado

David Nieves Coronado on 07/16/2013 at 6:12.

Hola Alberyo, ante todo gracias por participar en el Blog.

Creo que más que explicartelo de nuevo voy a hacer una mejora del tutorial, ¿de acuerdo?, en unas horas estará lista! Un saludo!

Responder

Alberto Gomez on 07/19/2013 at 11:07.

Hola!
Ya hize todos los pasos indicados….pero cuando voy a ver el resultado mira lo que me aparece:

Fatal error: Call to undefined function get_header() in /home3/jaime981/public_html/blog/wp-content/themes/twentyeleven/index.php on line 1

Creo que hasta aqui llego…..no se que debo corregirle……
Podrias darme una luz con esto?

Gracias!

Responder

David Nieves Coronado

David Nieves Coronado on 07/19/2013 at 11:11.

Hola, parece ser que la función no está definida, puede ser que tu template no la tenga definida o algo así, revisa la copia del archivo a ver si estaba esta función, o se llama de otra forma. Un saludo!

Responder

Entrenador personal a domicilio on 07/30/2013 at 13:16.

Muchas gracias por la información y felicidades por tu trabajo. Vamos a ver que sale!

Responder

CM menos apurada.. on 08/08/2013 at 11:49.

Hola David,

te he escrito un par de comentarios más, pero no te preocupes por contestarlos: Lo tengo ya (casi) todo bajo control!!! ijjijiij 🙂 Por eso, me gustaría animar a la gente que tenga la necesidad de integrar un blog en su web ya hecha, a usar este manual; en mi caso, sin tener grandes conocimientos de programación lo he conseguido, así que MUCHAS GRACIAS POR LA VALIOSA INFORMACIÓN! 🙂

Ahora, sólo me queda una cuestión: COMO PODRÍA INTEGRAR TAMBIÉN EL DISEÑO DE MI WEB EN LA PÁGINA EN LA QUE SE ME ABRE CADA POST COMPLETO ??? (Estoy utilizando el famoso “leer más” y al pinchar en el post para “abrirlo”, me sale la plantilla de wordpress intacta, en color gris) :S.

Saludos de nuevo y lo dicho…
………………….MIL GRACIAS!!!
🙂 🙂 🙂

Responder

David Nieves Coronado

David Nieves Coronado on 08/09/2013 at 6:29.

Hola!,

En teoría el header.php se incluye en todos los sitios de tu web es decir, en el home, en comentarios, en la vista autor… en todo. Por lo que si ya lo has modificado debería de tener el aspecto de tu web en todo el blog. Solo se me ocurre que me pases tus datos FTP y le eche yo un vistazo. Me los puedes enviar a david.nieves@consultoriainnova.com. Gracias!

Responder

CM en apuros.. on 08/10/2013 at 12:31.

Gracias a tí! Ya te he mandado el email… 🙂

Responder

Valo on 09/24/2013 at 5:42.

Hola David, antes que nada es un placer encontrarme con tu blog, quisiera agradecerte el tiempo que te tomas para escribir y la vocación de enseñarnos e informarnos constantemente, tenia algunas consultas sobre otros temas no relacionados a este pero primero echaré un ojo a todo el blog para ver si encuentro lo que necesito es sobre PressTrends, gracias y éxitos!

Responder

David Nieves Coronado

David Nieves Coronado on 09/24/2013 at 6:13.

Gracias a vosotros, cualquier duda comentar!

Responder

Jesús on 10/17/2013 at 21:11.

Hola David,

He intentado llevar a cabo todos los pasos que comentas, pero tengo problemas de visualización del blog. No me aperecen los estilos ni las imagenes que tengo en mi web.

Sabes por qué? Puedes ver el resultado en http://www.eni-lift.com/blog

Muchas gracias

Responder

David Nieves Coronado

David Nieves Coronado on 10/22/2013 at 11:24.

Hola Jesús,

A simple vista veo que está bien hecho, el header y footer son iguales a los que tienes en tu web… ¿me puedes explicar mejor que te sucede?. Saludos!

Responder

Jorge on 10/21/2013 at 23:10.

Buenas noches,

me pasa lo mismo que ha Jesús, me aparece el footer, pero no me aparece ni el header, ni los estilos, ni las imágines cargadas en mi servidor.

No he encontrado div content en la plantilla, tiene div index. He pegado el contenido del header detrás del php get header y antes del div index. Me puedes indicar que es lo que no estoy haciendo bien.

Muchas gracias.

Responder

David Nieves Coronado

David Nieves Coronado on 10/22/2013 at 11:25.

Hola Jorge,

Necesitaría ver qué has hecho y el resultado actual para determinar mejor cual es el problema. Saludos!

Responder

Erika on 12/15/2013 at 21:48.

Hola! Acabo de seguir tu tutorial correctamente. Pero tengo un problema con el css. Y por esa razón no hay estilo y no queda igual.

¿Como puedo incluir los archivos css, al wordpress?

Gracias!!

Responder

Erika on 12/15/2013 at 21:50.

puedes ver mi web en http://www.lakabana.com
Gracias

Responder

Alejandro on 12/30/2013 at 15:37.

Hola que tal?
Mi consulta es la siguiente, estoy haciendo una web sencilla que tiene un formulario de contacto(nombre,mail,comentario),al formulario lo valide con JQuery y funciona muy bien, el problema es que cuando refresco la pagina por el navegador o con F5 se reenvia de nuevo el formulario, ¿como puedo hacer para que no pase?¿hay algun script que resuelva esto?
Desde ya muchas gracias, y son muy buenos tus aportes!
Saludos, buen año!!

Responder

David Nieves Coronado

David Nieves Coronado on 12/30/2013 at 17:29.

Hola Alejandro,

Esto no viene muy a cuento en este post pero te digo: Lo que puedes hacer en este caso es mandar la información del formulario a un archivo php llamado por ejemplo “enviar.php”, el cual contendrá exactamente el mismo código que el archivo donde se encuenta el formulario más las funciones php necesarias para enviar la información recogida. Con esto conseguimos que aunque actualices la página del formulario no se envíe nada, ya que solo lo hará cuando envíes el formulario. Saludos!

Responder

José Manuel on 02/02/2014 at 11:35.

Hola David, de antemano felicitarte por el tutorial y compartir tus conocmientos. He seguido el tutorial y tengo problemas de visualización.

No me salen los estilos y las imágenes no me cargan.

Al principio lo que hice fue basarme en el estilo Default, copiarlo y bajarlo y ahí modificar localmente los 3 archivos php (index, header y footer). Metí en la carpeta images (que varié a img ya que las imágenes apuntan a esa ruta) todas las imágenes que están vinculada a esos archivos. El css también creé una carpeta con el estilo de la web.

El div content no lo he tocado porque supongo que es invariable.

No sé que he podido hacer mal. Si puedes ayudarme, te lo agradecería.

Un saludo!!

Responder

David Nieves Coronado

David Nieves Coronado on 02/04/2014 at 12:14.

Hola José Manuel, probablemente se estén enlazando mal tus estilos e imágenes, si me pasas la url le puedo echar un vistazo rápido. Gracias y un saludo!

Responder

Pingback: Cómo integrar el blog de WordPress en nuestra web | DiVandArt

maria on 09/30/2015 at 20:23.

Hola!

pero entonces nunca actualizas el tema? Si utilizo archivos “child” (css y functions) como aconseja wordpress, no afecta nada?
Gracias!

Responder

Jairo Martínez on 09/14/2016 at 3:38.

Buenas Noches, Saludos desde Venezuela. Soy diseñador y desarrollador web, y quisiera saber como colocar un titulo de blog en el index??. Vi en la pagina de inicio (sección blog) que tienen la primera noticia pero como haría para poder publicar las 4 primeras noticias del blog al index??. Si me podrían ayudar estaré agradecido de antemano.

Responder

Deja tu comentario

Tranquilo, tu email no será publicado o compartido.
Rellena los campos obligatorios marcados con *

Puedes utilizar etiquetas HTML con sus correspondientes atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


*


Utilizamos cookies propias y de terceros para mejorar nuestros servicios, facilitar su uso y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información en este enlace.
Aceptar