Tutorial: Como modificar temas para WordPress desde el navegador con Stiqr.com

Los que usamos WordPress sabemos lo fácil que es cambiar de tema en nuestro blog, de hecho hay cientos sino miles de temas para todos los gustos, algunos de ellos gratuitos y otros de pago, pero lo que si es realmente complicado es crear un tema para WordPress desde cero e incluso editar un tema para WordPress, si alguna vez lo han intentado saben de lo que estoy hablando, hay que tener conocimientos entre medios y avanzados de html, php, javascript, css y habilidades en diseño gráfico, en otras palabras, no es una tarea para el blogger de a pie.

Sin embargo, acaba de salir una herramienta asombros, es una webapp es decir una aplicación que corre enteramente desde el navegador, se llama Stiqr y nos permite editar temas para WordPress – para usuarios que alojan WP en su propio espacio web – y para cualquier página web, sin necesidad de descargar programa alguno, repito, todo desde el navegador, y los resultados se ven asombrosamente profesionales!

Esta webapp funciona arrastrando y pegando elementos a los que llama Stickers, es muy fácil y divertido, veamos como funciona, vamos a editar un tema en WordPress:

Primero entramos a la web de Stiqr.com y le damos click a “Get Started”:

Stiqr nos va a dar un código (en fondo celeste) que debemos copiar y pegar en nuestro WordPress, lo seleccionamos y copiamos con CTRL+C:

Luego entramos a nuestro panel de Administrador en WordPress :

Ahora ingresamos a la sección Apariencia y luego a Editor:

Sobre el lado derecho, vemos una lista de secciones de nuestro tema actual, entramos al que dice Pie de pagina (footer.php):

Una vez allí, antes de la etiqueta </body> pegamos el contenido que habíamos copiado antes de la web de Stiqr, nos queda algo así:

Ahora hacemos click en el botón Actualizar archivo para guardar los cambios:

Luego de esto nos debe aparecer en la parte superior un mensaje que dice: El archivo ha sido editado correctamente:

Luego de esto ya podemos abrir la pagina principal de nuestro blog, una vez allí presionamos SHIFT+F2 , si todo lo hicimos de forma correcta debe aparecernos una caja pidiéndonos ingresar nuestro email y luego que elijamos un password:

Una vez terminado este proceso de registro sale esto, el damos a Aceptar:

Ahora, nuevamente en nuestra página principal, volvemos a presionar Shift+F2 y nos pide ingresar el password que hemos elegido en el paso anterior, una vez que entramos la información correcta aparecerá en la parte inferior el panel de herramientas para comenzar a editar nuestro tema:


Ahora vamos a jugar un poco, vamos a crearle un fondo a nuestro logo, hacemos click en la herramienta Shapes para hacer una caja rectangular (Make a rectangular shape):

Nos sale un panel, allí hacemos click en Background Color (esto nos permite elegir el color de fondo de nuestra figura):

Para elegir el color, arrastramos el pequeño círculo blanco que está en la esquina inferior izquierda del cuadro de color, vamos a elegir un color agradable, el rosa no es mi estilo! una vez que hemos encontrado el color que sintoniza con nuestro espíritu, hacemos click en el redondo multicolor de la esquina inferior derecha:

Acto seguido colocamos un check en la casilla Round Corner para que nuestra caja tenga esquinas redondeadas y luego le damos click al botón Stick It nos aparece un cuadrado flotante el cual arrastramos a donde queramos que esté, en este caso al area de mi logo y haciendo click en su esquina inferior derecha le damos la forma que queremos, en este caso un rectángulo, nos queda algo así:

Luego de “estirarlo”:

Hey, pero que pasó? esta tapando nuestro hermoso logo!, no hay problema, hagamos ahora click con el botón derecho del mouse encima del area verde y click con el botón izquierdo en Send Back para envíarlo detrás de nuestro logo, este procedimiento hay que repetirlo dos veces:

Y nos queda esto:

Ahora vamos a colocar una imagen, hacemos click en Image luego en Free Images y elegimos algún monito de nuestro agrado:

Y tal como hicimos con el ejemplo de la caja, lo arrastramos hacia donde queramos que esté y lo redimensionamos a nuestro gusto:

Noten que en cualquier momento podemos minimizar nuestro panel de herramientas de Stiqr, haciendo click en este símbolo que esta en la parte derecha de abajo:

Para finalizar, Guardamos nuestro trabajo con Save Changes y tendremos nuestro tema modificado!.

Si nuestro resultado es un poco deprimente siempre podemos eliminar nuestros Stickers (que así se llaman los elementos que vamos pegando en la pantalla de diseño) haciendo click en Manage my stickers:

Finalmente dejo un video con la demostración de estos pasos, recuerden que Stiqr está aún en modo Beta, esto es, es la primera versión y estamos seguros que con el tiempo va a ir incorporando nuevos elementos, el concepto es muy prometedor e innovador:

Ir a Stiqr.com

Comparte este artículo

7 Comments

  1. Zerquix18 15 agosto 2010
  2. Kiker 28 enero 2011
  3. posicionamiento 12 octubre 2012
  4. Where To Buy Phen375 In Stores 2 septiembre 2014
  5. no-ms.org 28 diciembre 2014

Escribir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *