Editar themes WordPress con Dreamweaver

Publicado por Fernando Tellado el 6 Jul, 2009

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

1 Preliminares
2 Copia los códigos
3 Texto de Relleno

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:

       

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'); ?>" />

1	<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>

1	<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 if (have_posts()) :?> <?php while (have_posts()) : the_post();?> <?php endwhile; ?> <?php else : ?> <h2>Not Found</h2> <div class="entry">Sorry, but you are looking for something that isn't here.</div> <?php endif; ?> </div>

1	<?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> <?php endwhile; ?> <?php else : ?> <h2>Not Found</h2> <div class="entry">Sorry, but you are looking for something that isn't here.</div> <?php endif; ?> </div>

En su lugar pon cualquier texto que quieras que se muestre y te ayuda a adivinar como se vería cuando modifiques la hoja de estilos o el código HTML desde Dreamweaver. Luego también hay que sustituir el título del post, definido por esta línea: <?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.

PUEDE QUE TAMBIÉN TE INTERESE…

AVISO: esta publicación es de hace dos 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.