Editar un Theme de forma Grafica

Inicio Foros WordPress Themes y Diseño Editar un Theme de forma Grafica

Este debate contiene 7 respuestas, tiene 6 mensajes y lo actualizó  pancholeal hace 9 años.

  • Autor
    Publicaciones
  • #14891

    Zxes
    Participante

    <p>// Resumen: busco un editor grafico de CSS para un theme hecho para wordpress</p>
    <p>Hola a todos, mi nombre es Gabriel y ando necesitando un poco de ayuda. Realmente no me gusta andar escribiendo en foros mis problemas ya q prefiero googlear y tener la respuesta de forma inmediata. Pero en este caso, ya he buscado en varias paginas y he bajado 5 programas intentando solucionar mi problema:<br />
    Elegi el theme de MobiPress para mi WebSite, con la idea de hacerle unas reformas graficas visuales. sensillamente, quisiera reducir la altura de la imagen que aparece en el encabezado de arriba poniendole otra. intente corregirlo desde el Style.Css, pero no me salio y lo que me encantaria conseguir es un editor grafico como es el DreamWeaber, donde yo pueda poner, sacar , mover, y de mas con el mouse y listo.<br />
    Ojo: ya baje Artisteer, Rapid.CSS.2010, cssinstall, Style_Master_46, TinyMCE. Y ninguno me ha podido reproducir un preview de la pagina de forma correcta.<br />
    Tambien me vendria bien por ahi alguna guia simplificada de donde tengo q tocar para mover cada cosa. por ahora estoy leyendo un manual.
    </p>

  • #33835

    davidlluna
    Participante

    Hola!, lo que buscas yo no se si existe, ya que los themes en wordpress tienen código PHP dentro por lo que creo que ningún editor CSS te va a mostrar las cosas como si fuera una página estática.

    Lo que puedes hacer es, coger el código fuente generado de tu web y montar un archivo HTML estático ( acuerdate de coger las imagenes y el css y meterlas en el directorio correspondiente )

    Sobre un HTML estático podrás trabajar perfectamente y cuando tengas claro el cambio, pues modificas el css, el header.php, el footer.php o el archivo que necesites cambiar

    Saludos

  • #33842

    imported_study
    Participante

    Se que existe una extension de wordpress para versiones superiores a la mx 2004 (eso me lo acuerdo porque yo tengo la mx 2003 🙁 ). En una de esas te sirve. Pero igual lo que vos queres hacer es muy sencillo y se puee hacer perfectamente por código. De última postealo aca y te ayudamos.

  • #33845

    imported_study
    Participante

    Perdon la extension es de dreamweaver no de wordpress (la costumbre) 🙂

  • #33862

    gventura
    Participante

    Hay una extensión para dreamweaver que facilita la visión gráfica del theme en el propio programa.

    Imagino que ya saber que dreamweaver de adobe es un programa que muchos usuarios utilizan para programar paginas web.

    En ese programa puedes añadirle extensiones cómo si se tratara de complementos del firefox. Esta extensión no la he probado, pero parece interesante para esas personas que quieren diseñar visualmente si theme.

    Aunque no recomiendo el uso dreamweaver ser que es muy cómodo para mucha gente aunque ve con cuidado, porque en versiones anteriores (lo usaba cuando era macromedia hasta que descubrí homesite y más tarde quanta) añadía código innecesario en el cuerpo html.

    La extensión se llama [url=http://www.themedreamer.com/]ThemeDreamer[/url] y sólo cuesta 30$ así que no creo que se deba usar una “copia de seguridad” ya que soluciona los problemas de muchos por muy poco.

    Saludos.

  • #33879

    jvelcro
    Participante

    Lo ideal para customizar themes es hacerlo a mano, editando el codigo .css. Es dificil que una herramienta o extensión te ayude a hacerlo.

    Para identificar un elemento en el theme puedes navegar la web online, ver el codigo fuente y detectar el style que quieras modificar.

    En caso que no tengas mucha experiencia para detectarlos, puedes ir agregando algun estilo provisorio a los elementos que creas que puedan ser los buscados. Por ejemplo: border:1px solid #000; Luego miras la pagina y ves si está el elemento con el borde negro.

    Tambien puedes usar las extensión de Firefox Web Developer para detectar los elementos de forma fácil y visual.

    Saludos!

  • #33882

    gventura
    Participante

    [quote]Lo ideal para customizar themes es hacerlo a mano, editando el codigo .css. Es dificil que una herramienta o extensión te ayude a hacerlo.[/quote]

    Nadie dice lo contrario.

    La extensión (entiendo por lo que veo en el web) lo único que permite es simular el php del servidor y así poder verlo cómo si se tratara de un html dentro del modo visual del editor y así alternar la vista de código con la de diseño.

    La edición se puede hacer manualmente que es cómo se debería hacer todo. El ejemplo de poner un estilo es lo que hago habitualmente (yo uso el rojo), sobretodo si el theme no lo ha hecho uno mismo, además de editarlo con un programa y no por el panel de wordpress (no puedes deshacer los cambios) y configurarlo para publicar el fichero al servidor.

    Entiendo que este modo de trabajo puede ser un poco “compleja” para ciertos usuarios y por eso propuse esa extensión aunque no la he probado ni pienso hacerlo por ahora.

  • #33948

    pancholeal
    Participante

    Hola, primero que todo me presento, soy nuevo en este sitio y he comenzado a usar wordpress hace un par de meses, no soy para nada experto y bueno… si estoy aquí es para recibir ayuda y claro, si es posible, también entregarla.

    Según lo que leo, lo que quieres hacer es poder editar como lo harías con DW, es decir probando directamente los cambios en un browser real (Firefox, Safari, Opera, IE, por nombrar los mas usados) y digo en un browser real pues sabemos que el editor visual de DW es un asco y no querrás confiar en la interpretación que hace del código, también existe [url=http://diariored.com/analisis/1999_09_19_21_57_12.html]GoLive[/url] que es mas o menos lo que buscas (drag & drop) pero desconozco si puede trabajar en local, ahora bien, no conozco ningún editor para wordpress ni para html puro con las características que mencionas, así es que en ese sentido no podría ayudarte, sin embargo te cuento lo que yo y muchos otros hacen para trabajar de esta forma (editar y ver).

    Primero, y como dicen mas arriba, trabajar el código es indispensable y supongo que las aplicaciones que existen en ningún caso pueden hacer que el usuario pueda prescindir de manipular el código, por lo tanto hay que hacerse amigo de el.

    Como WordPress es una aplicación que trabaja con bases de datos es preciso tener un servidor para trabajarlo (lease en este caso, editar plantillas, themes u otro), pero también es engorroso estar subiendo y bajando archivos y como no siempre tenemos un servidor o host al alcance lo que podemos hacer es convertir nuestro computador en uno:

    para esto necesitamos algún programa que monte un servidor local, yo utilizo MAMP que es para mac pero existe también XAMPP que trabaja sobre windows, ambos trabajan con apache, MySql y PHP 5 por lo que para WordPress esta de lujo.

    Puedes descargarlos [u]gratis[/u]:

    [url=http://www.mamp.info/en/index.html]MAMP[/url] (para mac)

    [url=http://www.apachefriends.org/en/xampp-windows.html#641]XAMPP[/url] (para windows)

    Ambos son gratuitos y sumamente sencillos de utilizar y con abundante documentacion en red:

    instalar [url=http://www.blogpocket.com/2006/11/20/como-instalar-mysql-en-mac/]MAMP[/url] (para mac)

    instalar [url=http://ajbalmon.wordpress.com/2008/06/25/instalando-xampp-en-windows/]XAMPP[/url] (para windows)

    Listo, ya tenemos un servidor local en lo que podremos montar wordpress con bases de datos y todo, tal como si estuviera en en la red, como?… asi:

    Este [url=https://ayudawp.com/instalando-wordpress-en-un-servidor-local-22/]tutorial[/url] sirve tanto para MAC como para WINDOWS ya que ambos programas (mamp y xampp) tienen una carpeta llamada “htdocs que es en donde se coloca la carpeta WordPress.

    pues con esto no soluciono para nada tu problema? la verdad es que creo que en gran medida, ahora puedes utilizar DW para editar tu sitio y visualizar los cambios en browsers reales que son los con que se deben realmente visualizar los cambios, en lo personal no uso DW pues como decia gventura mas arriba, ensucia el codigo y ofrece las condiciones para hacer malas practicas a la hora de escribir, manipular, editar codigo.

    para editar tu theme debes abrir los archivos propios del theme (directorio: xampp o mamp > htdocs > wordpress > wp-content > themes > el theme que quieres editar) con tu editor preferido y un browser cualquiera (para ver el sitio debes escribir la siguiente direccion: http://localhost:8888/wordpress/ y para entrar al administrador http://localhost:8888/wordpress/wp-admin ) cada vez que hagas cambios en el editor, guardas y actualizas el browser, cuando las ediciones estén listas subes tu theme a tu servidor y listo.

    Si no sabes cuales son las cosas que debes mover puedes usar un Plugin de firefox llamado [url=https://addons.mozilla.org/es-ES/firefox/addon/1843]firebug[/url] que te permite ver todo el código (menos el php) e identificarlo en el html y css, ademas te sugiero que entres en el código y muevas y muevas pues echando a perder se aprende!!!

    espero que te sirva, saludos, suerte y recuerda que: code is poetry.

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest