Como diseñar un theme wordpress?

  • Autor Autor iamfrontend
  • Fecha de inicio Fecha de inicio
iamfrontend

iamfrontend

Eta
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
bueno me gustaria aprender a diseñar he visto gente que hace maquetas, pero no se como se pasa eso al programa ni que programa utilizan para hacerlas.

pido porfavor comentarios acerca de programas para crear themes wordpress.
 
Herramientas:

Photoshop y Notepad++
 
Yo con conocimientos basicos para modificar la hoja de estilo y entender lo basico de los codigos en las carpetas .php puedo diseñar cosas themes sencillos como el de ineex.com y luego lo implanto en codigos desde el FTP
 
Hace tiempo publique un artículo en el que citaba varios manuales para crear un tema, lo puedes ver acá:
Enlace eliminado

Espero que te sea de utilidad :top:
 
Para hacer el diseño te recomiendo utilizar una herramienta como photoshop, illustrator, fireworks, o gimp.
una vez que tenes el diseño listo tenes que comenzar con la parte de maquetacion, podes hacerlo desde cero o tomar un theme base o uno en blanco.
Para manipular los archivos yo trabajo con dreamweaver pero hay un monton de programas e ides para hacerlo, basicamente tenes q laburar con html y css y reconociendo y moviendo los tags php que vienen en wordpress o creando las funciones desde cero.

Te recomiendo tener un servidor local (como x ej zend, xamp, mamp, wamp o alguno de estos que vienen con mysql, php, apache, todo en uno) asi podes ir viendo el resultado de tu desarrollo antes de lanzarlo a la web.

Bueno, espero que te sirva mi respuesta, mucha suerte y si tenes alguna duda, estamos x aca!!.
 
Nesesitas conocimientos de PHP, HTML y CSS para maquetar un theme, y cualquier programa de diseño grafico para diseñarlo.
 
Nesesitas conocimientos de PHP, HTML y CSS para maquetar un theme, y cualquier programa de diseño grafico para diseñarlo.

La respuesta más acertiva para mí es esta.
Hay un PDF muy interesante aunque un poco enredado al principio pero que sirve bastante: Enlace eliminado
Sin embargo puedes utilizar themes totalmente en blanco, es decir, que vengan con el código básico para empezar a diseñar y programar.
Aprende los lenguajes que ya te han dicho, sobre todo HTML y CSS y con eso podrás empezar.
 
Busca en google usa: how to create a wordpress theme o psd to wordpress tutorials, si no te encuentras con el ingles traducelos con el GTranslator.

En resumen es:

Diseñas la UI (interfaz de usuario) en Photoshop
Creas varios archivos php con estos nombres:
index.php / single.php /archive.php / search.php / category.php / page.php / header.php / footer.php /sidebar.php / functions.php / comments.php

Luego empiezas editando el index.php, ese debe llevar el codigo de un doc HTML normal, debes meterle estas tags en la etiqueta body:
<div id="header">

</div>
<div id="content">

</div>
<div id="sidebar">

</div>
<div class="clear"></div>
<div id="footer">

</div>

Luego creas un estilo style.css para estilizar tus divs, luego mueves lo que hay desde el principio hasta la tag body a header.php, lo que hay en el div id sidebar a sidebar.php, lo que haya desde el div de footer hasta el final del documento a footer.php y lo que quede se queda en index.php, luego para que el index llame por medio de php esas secciones metes tags de wordpress.

Luego derivas del index los archivos category.php, single.php, page.php, search.php, archive.php, al index en el div de content le debes meter el famoso loop, en si aqui el proceso es meter tags de wordpress php en el html de todos los documentos, hay archivos que necesitan un template como por ejemplo comments.php, buscas comments.php en gogole y te debe salir el codigo del theme default, tambien si quieres widgets en la sidebar dinamicos tienes que añadir codigo como este en el functions.php y luego llamarlo desde sidebar.php:

<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'barralateral',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
)); ?>

En fin para que cuento lo que no puedo ilustrar con palabras, buscalo tu mismo en google.

Programas:
Photoshop, Fireworks, Inkscape (si tienes un dibujo de lo que quieres y no hace falta para ti crear una UI no necesitas estos programas)
Intype, Dreamweaver, Coda (MAC), Aptana Studio, Notepad++, Komodo Edit, Textmate (MAC), cualquier editor de texto plano o con sintaxis te sirve, yo uso una combinacion de dreamweaver y el InType en Windows.
Tambien necesitas extensiones de navegador de ayuda:
Web Developer Toolbar para firefox, PixelPerfect, Yslow y por supuesto no corren estas dos sin el utilisimo Firebug, en chrome tambien estan estas dos, aunque el WDTbar no funciona del todo bien aqui, esta firebug lite y una extension llamada Pendule, tambien ocupas una extension para ver y seleccionar colores hexadecimales, algo para testear fuentes y una paciencia del demonio.
Tambien ocupas si quieres crear el theme y testear lo que llevas localmente, necesitas un servidor localhost, un programa como XAMPP o Appserv funciona de maravilla.
 
Última edición:
Busca en google usa: how to create a wordpress theme o psd to wordpress tutorials, si no te encuentras con el ingles traducelos con el GTranslator.

En resumen es:

Diseñas la UI (interfaz de usuario) en Photoshop
Creas varios archivos php con estos nombres:
index.php / single.php /archive.php / search.php / category.php / page.php / header.php / footer.php /sidebar.php / functions.php / comments.php

Luego empiezas editando el index.php, ese debe llevar el codigo de un doc HTML normal, debes meterle estas tags en la etiqueta body:
<div id="header">

</div>
<div id="content">

</div>
<div id="sidebar">

</div>
<div class="clear"></div>
<div id="footer">

</div>

Luego creas un estilo style.css para estilizar tus divs, luego mueves lo que hay desde el principio hasta la tag body a header.php, lo que hay en el div id sidebar a sidebar.php, lo que haya desde el div de footer hasta el final del documento a footer.php y lo que quede se queda en index.php, luego para que el index llame por medio de php esas secciones metes tags de wordpress.

Luego derivas del index los archivos category.php, single.php, page.php, search.php, archive.php, al index en el div de content le debes meter el famoso loop, en si aqui el proceso es meter tags de wordpress php en el html de todos los documentos, hay archivos que necesitan un template como por ejemplo comments.php, buscas comments.php en gogole y te debe salir el codigo del theme default, tambien si quieres widgets en la sidebar dinamicos tienes que añadir codigo como este en el functions.php y luego llamarlo desde sidebar.php:

<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'barralateral',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
)); ?>

En fin para que cuento lo que no puedo ilustrar con palabras, buscalo tu mismo en google.

Programas:
Photoshop, Fireworks, Inkscape (si tienes un dibujo de lo que quieres y no hace falta para ti crear una UI no necesitas estos programas)
Intype, Dreamweaver, Coda (MAC), Aptana Studio, Notepad++, Komodo Edit, Textmate (MAC), cualquier editor de texto plano o con sintaxis te sirve, yo uso una combinacion de dreamweaver y el InType en Windows.
Tambien necesitas extensiones de navegador de ayuda:
Web Developer Toolbar para firefox, PixelPerfect, Yslow y por supuesto no corren estas dos sin el utilisimo Firebug, en chrome tambien estan estas dos, aunque el WDTbar no funciona del todo bien aqui, esta firebug lite y una extension llamada Pendule, tambien ocupas una extension para ver y seleccionar colores hexadecimales, algo para testear fuentes y una paciencia del demonio.
Tambien ocupas si quieres crear el theme y testear lo que llevas localmente, necesitas un servidor localhost, un programa como XAMPP o Appserv funciona de maravilla.

Deberias crear tutoriales de diseño para wordpress, veo en varios temas que sabes bastante de códigos, cosa que a otros nos falta 😛
 
Atrás
Arriba