Si aún te sientes atado a Dreamweaver, o quieres amortizar lo que te costó aquel curso carísimo sobre esta aplicación que recibiste hace tiempo, estás de enhorabuena, porque puedes usarlo para modificar el diseño de themes WordPress. Eso si, tendrás que seguir este tutorial, sencillo pero que requiere una cierta adaptación al modo de trabajar habitual si editaras los ficheros con un editor de código al uso.
Para utilizar Dreamweaver con el objetivo de editar o personalizar tus themes WordPress tienes que combinar los distintos ficheros PHP en una sola página, de este modo podrás ver al instante en Dreamweaver, mientras editas los códigos, el aspecto final de tu página.
Índice de contenidos
Preliminares
Revisa los ficheros del theme y observa como se realizan las llamadas a los distintos archivos, como afecta cada código al aspecto del sitio. Toma nota (físicamente) de como se realiza cada llamada a los distintos archvios (index.php, header.php, etc).
Verás que lo primero que se «llama» suele ser la cabecera (header.php), luego el contenido, y finalmente la barra lateral (sidebar.php) y el pié de página (footer.php), pero este puede variar de un theme a otro, de ahí que es importante que lo anotes.
Crea una carpeta nueva en tu ordenador y copia en la misma lo siguiente:
- El archivo style.css del theme que vas a modificar
- La carpeta que contenga las imágenes.
Crea un documento HTML nuevo en Dreamweaver y guárdalo en la carpeta recién creada.
Ve a la Vista de Código y pega ahí estas líneas:
<!-- Aquí va el header --> <!-- /El header termina aquí --> <!-- Aquí el contenido principal --> <!-- /El contenido principal termina aquí --> <!-- Aquí el sidebar --> <!-- /El sidebar termina aquí --> <!-- Aquí el footer --> <!-- /El footer termina aquí -->
Estas líneas son código comentado, que te servirá de guía cuando copies el código de los distintos ficheros PHP del theme, y también serán vitales a la hora de devolver el código modificado a tu theme original, una vez lo hayas personalizado. Simplemente reordena las líneas de acuerdo con el orden de las «llamadas» que haga tu theme como comentaba anteriormente.
Copia los códigos
Empieza a copiar los códigos de cada fichero del theme:header.php, sidebar.php y footer.php. Para el contenido principal copia el código del fichero index.php.
Lo primero que vas a tener que cambiar es la localización del fichero CSS llamado desde el header. En los themes WordPress se hace mediante esta línea:
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
Solo tienes que cambiar <?php bloginfo('stylesheet_url'); ?> a style.css, para que tu documento pueda localizar la hoja de estilos.
Una vez hecho esto hay que cambiar las llamadas dinámicas al nombre de tu sitio, subtítulo, etc, y añadir líneas de relleno y algún texto de artículo a modo de prueba.
La mayoría de los themes WordPress suelen mostrar el título del sitio de este modo:
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
Lo que hace esa línea es mostrar el nombre de tu sitio enlazado a la página principal del mismo. Para ver el nombre de tu sitio simplemente sustituye la llamada <?php bloginfo('name'); ?> por un texto puro y duro. Haz lo mismo con el tagline o descripción, que encontrarás en una línea similar a esta: <?php bloginfo('description'); ?>.
Texto de Relleno
En el contenido principal simplemente borra todas las declaraciones condicionales del fichero index.php<?php the_title(); ?>, lo borras y pones cualquier título en texto plano. Luego, para sustituir el texto del post debes remplazar la línea <?php the_content('Read the rest of this entry »'); ?> con unos párrafos de texto que quieras, incluso un Lorem Ipsum. También añade texto de relleno en los enlaces y cabeceras de la barra lateral.
Cuando hayas terminado de sustituir todas las llamadas PHP a funciones WordPress por texto de relleno ya puedes empezar a personalizar, pues tendrás un boceto muy aproximado de tu theme WordPress. Una vez empieces a modificar el CSS o HTML podrás ver al instante los cambios.
Cuando hayas terminado de personalizar a tu gusto el aspecto del theme solo tienes que copiar los nuevos códigos a los distintos archivos PHP del theme WordPress, y guardar el CSS. Vuelve a los códigos y remplaza los textos de relleno por las llamadas de código originales que sustituiste previamente.
¿Que no te apañas?, pues usa ThemeDreamer.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Sencillamente genial , gran post ¡¡
bien bien, genial tuto sobre todo para trabajar mas rapido
esto es muy bueno para los que saben utilizar dreamweaver, le permitirá mejorar plantillas gratis o de pago sin necesidad de contratar los servicios de un tercero.
Hola a todos!!
Yo por ejemplo uso una extension para dreamweaver llamada <a title="themedreamer" rel="nofollow">themedreamer que muestra el diseño completo del theme una vez activada la opcion. Considero que es mas rapido que ir cambiando las llamadas php.
Saludos
y como se modifica???Modificas directamente desde el diseño?:D!
Hombre, la verdad es que ultimamente ya me he acostumbrado a trabajar directamente con el código, pero bien es cierto que dreamweaver dinamiza mucho el trabajo, y este mini-tutorial que hoy nos ofreces, pues es algo que explica algunas preguntas que yo tenía a la hora de trabajar con el blog y dreamweaver
un gran post ! la verdad me es de gran ayuda !!!
Esta muy bien pero en mi caso, tengo un problema: La plantilla que utilizo no tiene los archivos main.php ni sidebar.php
Da igual, tendrá un index o lo que sea, solo tienes que adaptar la metodología a las características de tu theme 😉
Desisto, es que el tema que estoy usando es un pelin "peculiar". Se trata del Hybrid-news, que es como una modificacion del Hybrid y que para que funcione tienes que tener este ultimo tambien (Aunque cada uno en su carpeta). Tiene ademas un montonazo de archivos, por lo que estuve tratando de ir poniendo y quitando al archivo principal del dreamweaver (En el que hay que pegar el header.php, footer.php y demas) pero solo he conseguido terminar cansado :(. No sabrá nadie como hacer estos pasos con dicho tema verdad???
Conozco el Hybrid porque lo tiene un cliente y me ha tocado hacerle cambios, y confirmo que es un horror del todo cualquier modificación. Yo ni lo intentaba con Dreamweaver, te sale más a cuenta instalarlo en una carpeta de tu servidor, con una instalación nueva de WP y hacer ahí las modificaciones a pelo.
Así lo hare pues. Muchas gracias, al menos ya no perderé mas tiempo tratando de "dreamweaverizarlo" 🙂
Si eso echa un vistazo al post sobre herramientas que publiqué hace tiempo 😉
Hola, que tal, yo no utilizo ni dreamweaver y no le entiendo al menu de los presets, la verdad no soy muy bueno para las paginas, pero veo que algunos si les funciono, en primera como guardo los archivos del preset de wordpress? o como puedo editar de manera sencilla el sitio ponerle un baner con fotos, agregarle menus, datos etc gracias.
Una pregunta puedo usar dreamweaver en wordexpress free
ubiese echo un VIDETUTORIAL xq quede un poco perdido no e logrado acerlo
gracias
El nuevo WordPress es diferente. Que lástima….
saludos… existe un programa que llame automaticamente a todos los ficheros con sus diferentes extenciones y me ponga el themes en pantalla lissto para ser modificado?, asi como funciona el Stylizer.
Gracias, Fernando, por el tutorial y a los demás por los comentarios.
¿Cómo/Dónde puedo observar las llamadas que se ralizan a los distintos ficheros?
Saludos.
coincido con HaideT en la pregunta, no se como buscar o cual es el fichero que reune como se van llamando todos los archivos, la verdad que me cuesta muchísimo modificar una plantilla con wordpress, y me gustaría avanzar con este proceso, ya que dreamweaver me parece mucho más acertado.
espero tu respuesta. gracias
No ENTENDI UN CARAJO 🙁
yo nesecito ayuda con esto , no me entere muy bien de la cuestion hay algun tutorial que lo explique bien nesecito trabajar en un projecto, tengo el wordpress ligado con el dreamweaver lo que nesecito es poder trabajar en la plantilla de wordpress pero en dreamweaver no se si me explico bien
Yo no lo he entendido.Tengo los códigos pero no sé como ordenarlos para poder ver el diseño de forma correcta y de ahí poder modificarlo.