Workflow para desarrollar con WordPress

Hay muchas formas de desarrollar con WordPress, voy a especificar aquí la que yo uso desde hace un tiempo, me permite desarrollar en local y sincronizar con el servidor de staging/producción cuando los cambios están testeados y validados.

Estas son todas las herramientas que uso para el flujo de trabajo:

No voy a entrar en el detalle de instalación de cada herramienta, en las páginas oficiales podéis encontrar las instrucciones para cada sistema operativo, si alguien se queda con alguna duda puede preguntar en los comentarios.

Imaginemos que voy a empezar un nuevo proyecto, en este ejemplo solo voy a contemplar el desarrollo en local y deploy a producción, sin contar con un servidor de staging, pero veremos que añadirlo es cuestión de segundos.

Lo primero que haremos será crear el directorio del proyecto

mkdir myproject
cd myproject/

A continuación vamos a inciar valet solo para este proyecto, esto es:

valet link

A partir de ahora, podremos acceder a la dirección http://myproject.dev desde el navegador. Lo siguiente que tenemos que hacer es instalar y configurar WordPress, para ello vamos a necesitar crear una base de datos vacía, yo uso Sequel Pro o la linea de comandos para esto, no entro en detalle por que es algo que si desarrollas con WordPress te resultará más que familiar. Vamos con la instalación de WordPress, para ello ejecutamos el siguiente comando:

wp core download

Esto descargará la ultima versión del core de WordPress, puedes usar wp-cli para configurar e instalar WordPress o después de que se haya descargado acceder a http://myproject.dev y continuar el proceso de instalación paso a paso de WordPress.

Una vez instalado, vamos a hacer uso de Wordmove para el deployment, tanto de archivos como de base de datos, para ello ejecuta el siguiente comando:

wordmove init

Esto generará un archivo Movefile en la raiz de tu directorio, en el tendrás algo parecido a esto:

local:
  vhost: "http://myproject.dev/"
  wordpress_path: "/ruta/hasta/myproject" # use an absolute path here
  database:
    name: "nombre_db_local
    user: "usuario_db_local"
    password: "***********"
    host: "127.0.0.1"
production:
  vhost: "http://myproject.com/"
  wordpress_path: "/ruta/completa/de/tu/servidor" # use an absolute path here
  database:
    name: "nombre_db_servidor"
    user: "usuario_db_servidor"
    password: "********"
    host: "host_db"
  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "node_modules/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"
  ssh:
    host: "tu_host"
    user: "tu_usuario"
    password: "tu_password" # password is optional, will use public keys if available.

Como veis, el sistema que usa Wordmove para hacer el deploy es vía SSH, aunque si tu servidor no lo permite, aún puedes usar la sincronización vía FTP, en la página oficial encontrarás cómo hacerlo.

Una vez configurado nuestro archivo Movefile, tan solo tendremos que ejecutar los comandos wordmove <pull|push>, podéis ver la ayuda para ver que opciones hay, pero os pongo los dos que yo más utilizo:

Para traer (pull) del servidor de producción los archivos de la carpeta uploads y la base de datos, util cuando quieres una replica exacta en local de lo que hay en el servidor:

wordmove pull -ud

Nota: cuando te “traes” la base de datos, es conveniente que revises que el prefijo de tablas que estés usando en local y producción sea el mismo, para ello edita wp-config.php en tu versión en local para hacerlos coincidir, además yo suelo añadir en el wp-config.php local las siguientes lineas para que no haya problemas con la URL:

define('WP_HOME', 'http://myproject.dev/');
define('WP_SITEURL', 'http://myproject.dev/');

Para mandar (push) los cambios que hayas hecho en los archivos de plugins y themes en local, esto solo sincroniza los archivos que han cambiado:

wordmove push -pt

Es muy sencillo trabajar con multiples entornos, no solo local y producción, basta con agregar la configuración al archivo Movefile y especificar el entorno al ejecutar el comando. Aquí tienes más información.

Por último, aunque es opcional también es recomendable, por eso incluía Git en las herramientas de trabajo, si es un theme lo que estoy desarrollando, lo habitual sería crear un repositorio git en el directorio correspondiente al theme, por ejemplo myproject/wp-content/themes/mytheme/ para mantener el control de versiones del código.

Suelo usar valet por su simpleza y por que en la mayoría de proyectos no necesito una configuración del lado del servidor concreta, si necesitas instalar más cosas, te recomiendo echar un vistazo a las soluciones que hay usando docker o vagrant.

 

WordPress: permisos archivos y carpetas

Esto no lo debería leer nadie a estas alturas, así que voy a intentar empezar a usarlo como sitio para guardar notas, snippets, etc.

Si necesitas asegurarte de que tu instalación WordPress tiene los permisos correctos, puedes acceder a través de SSH y ejecutar los siguientes comandos en la raiz de la instalación WP:

find . -type d -exec chmod 755 {} \;
find . -type f -exec chmod 644 {} \;
chmod 660 wp-config.php
chmod 664 .htaccess
find wp-content -type d -exec chmod 775 {} \;
find wp-content -type f -exec chmod 664 {} \;
find . -exec chown <usuario>:<grupo> {} \;
chgrp <grupo> wp-config.php
chgrp <grupo> .htaccess
find . wp-content -exec chgrp <grupo> {} \;

 

Imagen principal de tus posts en WordPress

En muchos themes de wordpress podemos ver un bloque de posts destacados que en la portada solo muestran una imagen asociada al post, sobre todo en las plantillas estilo “magazine”. Y la verdad es que dependiendo del blog, esto puede resultar muy interesante.

Al buscar como hacer esto en wordpress nos aparecen múltiples formas, aunque dos de las más usadas son usar los campos personalizados y la otra es usar algún tipo de plugin.

Personalmente, creo que si preparas un template de wordpress para una persona que no se maneja demasiado bien con los ordenadores, usar la opción de los campos personalizados puede resultarle difícil, ya que la acción de subir el archivo (manualmente) y añadirlo en los campos personalizados (también manualmente) no es trivial para este tipo de usuarios.

La opción de usar un plugin está ahí, ¿pero por qué usarlo si podemos solventarlo con unas pocas lineas de código? Además nuestro blog (y nuestro hosting) con menos plugins, nos lo agradecerá.

La idea es que el usuario solo tenga que agregar una imagen como lo hace habitualmente (mediante el botón ‘Añadir una imagen‘ de ‘Añadir medios‘) sin tener que hacer nada más, ni siquiera incrustarla en el post.

Vamos a explicar cómo hacerlo. Usaremos en este caso el fichero functions.php de la carpeta de nuestro template, en caso de que este archivo no exista, lo crearemos. Y añadimos las siguientes líneas.


function get_single_image($size = 'thumbnail', $default = 'default.png') {
	global $post;
	$images = get_children("post_parent=$post->ID&
                                             post_type=attachment&
                                             post_mime_type=image&
                                             numberposts=1");

	if (empty($images)) :
		return "<img src='" . get_bloginfo('template_directory') .
                          '/' . $default . "'/>";
	else :
		foreach ($images as $image) :
			return wp_get_attachment_image($image->ID,$size);
		endforeach;
	endif;
}

A la función get_single_image() le podemos pasar dos parámetros, el primero es el tamaño de la imagen, puede ser ‘thumbnail‘ (por defecto), ‘medium‘, ‘full‘ o un array con las dimensiones, por ejemplo array(30,50).

El segundo parámetro es el nombre del archivo de imagen que se usará por defecto (en caso de que el post no tenga imagen asociado), esta imagen debe estar dentro del directorio de la plantilla de wordpress, y si no decimos nada intentará buscar la imagen con el nombre ‘default.png‘.

Por lo tanto, ya solo queda llamar a la función desde el archivo de nuestra plantilla, dentro del bucle de wordpress de la siguiente manera.

	< ? echo get_single_image(); ?>

Espero que a alguien le sirva.

Press This

The "Press This" function allows quick posting and publishing through the use of a special web browser favourite. You can create a shortcut to allow use of "Press This" from the new post screen. You then activate the function when browsing by selecting the favourite from your web browser favourites list.

Press This « WordPress Codex.

Buscando alguna forma de reactivar un poco esto, el trabajo y otras cosas no me dejan tiempo (y a veces ni ganas) de comentar algo, aunque sigo vivo.

A Green Odyssey

A Green Odyssey 1.0 es el Theme usado actualmente en dosmiluno.org diseñado y maquetado por Daniel Aguilar y licenciado bajo creative commons atribución (ver)

A Green Odyssey

Es un tema muy simple, a una sola columna y con los datos que yo considero importantes al pié de página. Diseño líquido para ocupar el máximo de la pantalla y solo un color verde (sin contar el blanco y negro). Optimizado para WordPress 2.3.x y el uso de tags. No necesita ningún plugin especial y no soporta widgets.

Quiero dejar claro que no es un theme para wordpress estándar. Está hecho a medida para mí, pero seguramente a tí también te sirva.

Para usarlo solo te pido que dejes al pié de página el par de enlaces que dicen que soy el autor y permitirá a cualquiera descargárselo. Si tenéis alguna duda, problema o sugerencia dejadme un comentario. Espero que alguien lo disfrute.

Descárgalo aquí

Diseño dosmiluno: A Green Odyssey

[Te recomiendo que si lees esta entrada por RSS, accedas a dosmiluno.org a través de tu navegador y compruebes los cambios]

Llevaba ya una temporada trabajando con themes para wordpress, también llevaba tiempo queriendo darle un cambio al diseño de mi blog, quería algo sencillo y que estuviera hecho por mi. Esto, y un par de tardes aburridas de domingo, han dado como resultado el nuevo diseño de dosmiluno.org

El nuevo theme está diseñado para adapatarse a los distintos anchos de pantalla y así aprovechar el espacio al máximo, cada vez las pantallas y resoluciones son mayores, y la experiencia del usuario crece cuando visitamos sitios con diseños líquidos. Todo sigue siendo a una columna y con un pié de página en el que se reúne la información y enlaces de navegación del blog. El color elegido, el verde y no me preguntéis por qué. Con el nuevo diseño también tenemos una actualización del blog a wordpress 2.3.1 y la suplantación de las categorías por etiquetas.

El theme en concreto, al que he llamado en un alarde de originalidad A Green Odyssey lo publicaré en unos días para que todo el mundo pueda descargarlo, con una licencia libre. Como favor os pediría que si encontráis algún fallo o sugerencia me lo reportéis para así poder publicarlo sin ningún error.

Nuevo diseño de interiuris.com

Hoy Interiuris.com [blog | podcast] estrena diseño, y es algo especial, por que el diseño íntegro lo he realizado yo a través de mi empresa.

Es la primera vez que diseño un theme para wordpress, que por otro lado no ha sido nada complicado. Exceptuando la integración del diseño para que se viese bien en los navegadores de la factoría de Microsoft. (al hilo de esto, navega con firefox y cambia la forma que tienes de percibir internet.)

Hace tiempo que no escribo sobre mi trabajo, pero esta ocasión se lo merece, ya que considero a Andy Ramos como un auténtico profesional de su campo y a su blog, como uno de los más influyentes en lo que a Propiedad Intelectual y derecho se refiere.

Ha sido un placer poder realizar este trabajo (de verdad) y tener un cliente de los buenos, desde el primer boceto todo ha ido sobre ruedas, y eso se agradece muchísimo.

Con respecto al diseño, Andy me comentó que quería algo simple y serio, yo opté por un diseño líquido que se adaptara a todas las resoluciones y con una columna doble fija. Todo esto sin demasiado trabajo gráfico (no soy diseñador gráfico). Como dije antes, lo mejor de todo es que Andy estuvo de acuerdo siempre a la primera.

Sin más, podéis ver el resultado aquí.

cirugía

Aviso que estoy retocando el diseño del blog, aquí no tengo el portátil para hacer las pruebas en local, por eso mismo si notáis algo raro. Don’t worry!

Actualización: En principio por hoy ya está bien, he cambiado el logotipo de dosmiluno (espero e os guste más que el anterior) y he cambiado los colores, si veis algo raro comentadmelo ya que soy daltónico y de colores no entiendo una #@!/&?.

Seguiré rediseñando con el tiempo hasta encontrarme agusto al 100%, lo próximo, lo prometo queserá el blogroll (no sé que cojones pasa con WordPress que la importación de enlaces no me funciona)

Si tenéis algún comentario sobre el diseño dejadlo en esta entrada. Gracias!