David Nieves Coronado | 12 comentarios
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:
- Se aconseja tener tu directorio wordpress dentro del directorio de tu web, ejemplo: innova/blogdeinnova/(archivos de wordpress), si no es asi, configuradlo para evitar problemas con rutas.
- Haz una copia de los archivos que modificaremos más adelante.
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: /innova/blogdeinnova/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(‘«’, 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!! =)
Integrar WordPress en nuestra web. fue posteado el enero 31, 2012 a las 11:50 en Wordpress y.
fue modificado el enero 31, 2012 at 11:50.
Puedes seguir cualquier respuesta a esta entrada a través de la RSS 2.0 feed.
Puedes dejar una respuesta o hacer un trackback desde tu web.
Compartir: Twitter, Facebook, Delicious, Digg, Reddit
<< Post Anterior |
Post Siguiente >>
12 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?
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??
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.
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!
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
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!!
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:
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!
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!!
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.
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!
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.