Editar themes WordPress con Dreamweaver

dreamweaver-wordpress

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.

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:

  1. El archivo style.css del theme que vas a modificar
  2. 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.phpsidebar.phpfooter.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:

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:

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

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 &raquo;'); ?> 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.

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.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (6 votos, promedio: 4,17 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This