Les traigo aquí un tutorial de como integrar visualmente nuestra pagina web a wordpress. para esto debemos contar con nuestro diseño maqueado de nuestra página y una instalación de wordpress. ya que en todo el proceso sera necesario modificar las hojas de estilo y código xhtml, debemos conocer lo básico de estos temas.
Bueno comencemos:
Elijamos un tema de wordpress que vaya con nuestra página en este caso use un tema muy usado Mystique. una vez instalado nuestro tema personalizamos el color del tema en este caso como mi web va en tonos plomos lo puse así. esto desde el panel de opciones de Mystique.
Vemos esta imagen:
Ahora veamos como quedara cuando integremos nuestra web con wordpress. para ello modificaremos el tema Mystque. y dicho sea de paso crearemos nuestro propio tema basado. ojo que todo estos cambios no afectaran el el wordpress en si (core), de cualquier momento podremos cambiar de tema.
Veamos como queda integrada mi web con wordpress: (la imagen esta generada en photoshop)
Comencemos
Lo primero que tenemos que tener es nuestro código de nuestra web separado. en la siguiente partes.
- Nuestro post-header (todo lo que ha entre las etiquetas head, por ejemplo nuestra declaracion de hoja de estilo , script que usemos en nuestro header)
- Nuestro Header ( Nuestro logo y nuestro menu)
- El contenedor de nuestro Body (si usamos un contenedor con fondo de algún color)
- Y nuestro Footer ( nuestro pie de nuestra web)
- Veamos la siguiente Imagen:
Veamos como quedaría nuestro código después se separa lo necesario (ojo que en el contendedor con id luzbody uso un alto de 400px solo para que ustedes puedan apreciar el diseño, este luego lo borraremos):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <!--///*************** comienzo post-header ***************/--> <title>Ozone Ekiz Multimedia</title> <link href="css/comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // scrip para movimiento de menu $(document).ready(function() { $('a.nudge').hover(function() { //mouse in $(this).animate({ paddingLeft: '30px' },300); }, function() { //mouse out $(this).animate({ paddingLeft: '20px' }, 300); }); }); </script> <!--///*************** fin comienzo post-header ***************/--> </head> <body> <!--///*************** comienzo header ***************/--> <div id="contenedor"> <div id="hwraper"> <div id="lnaranja"> <div id="lnaranjar"></div> </div> <div id="headerx"> <div id="headerleft"> <div id="logo"> <h1><img src="images/general/logo.png" alt="Ozone ekiz Edición programación y Diseño" longdesc="Ozoneekiz dicion de audio y video, programacion y diseño web" /></h1> </div> </div> <div id="headerright"> <div id="tarjetabotton"></div> </div> </div> </div> <!--menu--> <div id="menuwraper"> <div id="luzmenu"> <div id="myjquerymenu"> <ul> <li><a href="http://localhost/ozone/index.php" id="elem01">Inicio</a></li> <li><a href="http://localhost/ozone/servicios.php" id="elem02">Servicios</a></li> <li><a href="http://localhost/ozone/paginas/foro" id="foro">Foro</a></li> <li><a href="http://localhost/ozone/paginas/blog" id="blog">Blog</a></li> <li><a href="http://localhost/ozone/paginas/blog/?page_id=3">tutoriales</a></li> </ul> </div> </div> <div style="clear:both;"></div> </div> <!--///*************** Fin header ***************/--> <!--///*************** Comienzo body ***************/--> <div id="bwraper"> <div id="luzbody" style="height:400px;"> </div> </div> <!--///*************** Finbody ***************/--> <!--///*************** comienzo body ***************/--> <div id="fwraper"></div> <!--///*************** Fin body ***************/--> </body> </html>
Como vemos en el código anterior, he separado las partes que tenemos que extraer. Cada una de estas parte tenemos que guardarla en archivos separados con los nombres que ya les mencione antes.
- post-header.php (todo lo que ha entre las etiquetas head, por ejemplo nuestra declaracion de hoja de estilo , script que usemos en nuestro header)
- header.php ( Nuestro logo y nuestro menu)
- body (este archivo no lo crearemos ya que lo son dos etiquetas. las de apertura iran en el header.php y las de cierre en el footer.php)
- footer.php ( nuestro pie de nuestra web)
Y para cuando , será publicado el tutorial, estare al pendiente pero si hay fechas seria mejor.
saludos de Peru.
que bueno justo es el temas que uso , pero continua el tutorial.
Hola que tal ….. mi pregunta es si se puede hacer lo mismo si mi web esta en flash!!! t lo agradeceria mil
Hola Juan. no domino el flash pero podrías maquetar en css tu web. (solo para esta sección)
Bueno, hasta ahora ya he hecho los pasos anteriores…. entonces que hago? los subo al tema usado Mystique?
Agradeceria que me ayudaras…
Hola Pedro
Soy nuevo en wordpress, me interesaría saber si puedo integrarlo al diseño de mi web, sin necesidad de utilizar un theme ya hecho.
Donde puedo consultar como, en caso de que si se pueda.
Gracias
desde hoy vuelvo a responder pendientes.
hola y la continuacion donde la veo?
por ahora he visto poco, a ver como sigue
para lo siguiente , tienen que conoces css, a que para acomodar el blog a la web.
la segunda parte la haré como video.
Una pregunta a ver si alguien me la puede responder:
para poder integrar los comentarios de mi blog de wordpress en mi web es necesario tener la versión instalada de wordpress o también se puede hacer con la versión online?
Es que estoy haciendo una web y blog para una gene sin muchos conocimientos sobre el web y cuanto más se lo pueda simplificar mejor.
Supongo que les será más facil actualizar el blog y que les salgan las entradas también en la web pero a través de la versión online.
Muchísimas gracias de ante mano. Y felicidades por el post, muy útil e interesante.
Salud!!
Ininteligible:
“inntegrar los comentarios de mi blog de wordpress en mi web ”
Ininteligible:
“facil actualizar el blog y que les salgan las entradas también en la web pero a través de la versión online”
Aclara tus requerimientos
¿Para cuándo el segundo tutorial?
Un saludo.
Hola otra vez!!
Antes de nada agradecerte el estar ahí pendiente de los comentarios y disculpa si no he sabido hacerme entender. Lo intento de nuevo:
Tengo un blog en wordpress y además estoy haciendo una web. Me gustaría redirigir de alguna manera las entradas del blog a la web para que en la web se mostraran los títulos de las entradas del blog y un extracto de las mismas. De esta manera, añadiendo entradas en el blog quedarían también actualizadas en la web.
Mi duda es si ésto se puede hacer con la version online de wordpress o es necesario instalarlo.
Muchas gracias Pedro!!
Espero haberme explicado mejor que antes XD
Hola Adrián:
Ya estoy planeando el segunda parte. pero es necesario saber css, ya que sin esto no podrán lograr nada.
Hola guadalajaleo.
Lo puedes hacer con ambas mediante la rss.
si deseas aprender como, por favor crea un post en el foro.
http://www.wordpresslatino.net/ ya que he trasladado todo lo concerniente de wordpress allí
Ultimos comentarios
Tutoriales mas vistos
Powered by WordPress ¬ design by ozoneekiz.net
37 procesos generados en 1,030 segundos.