Una presentación de WordPress

Hace unos días tuve que hacer una presentación de WordPress en el Infosoft 2012 de la PUCP y entre muchas cosas que uno dice se pierde bastante del contenido por no poner enlaces de todo lo que se recomienda o porque en el momento alguna idea que se tenía planeada se llega a olvidar y pasar por alto, así que el plan de este post es contarles algunas de las recomendaciones de aquella presentación.

La presentación está en speakerdeck.com/u/braulioaquino/p/wordpress-en-infosoft-2012 para que lo puedan descargar y usar para armar otras a partir de aquella o lo que quieran sin ningún problema.

¿Wordpress o Blogspot?

Me parece importante comenzar una presentación con esta pregunta y ser muy sincero en la respuesta: Si vas a tener un blog sin hosting ni dominio basta con usar Blogspot (blogger) y si quieres usar un .com vas a querer luego hacer mil modificaciones, es ahí cuando es recomendable WordPress. Ah, si no quieres un blog la respuesta va de una vez es WordPress.

Al final también me preguntaron en qué casos recomiendo Drupal o Joomla, en el caso de Drupal no lo he usado, pero según lo que he leído y han contado los que sí trabajan con ello, no lo recomiendo cuando recién inicias a desarrollar en la web por ser más complicado de usar y aprender a trabajar en él, eso sí, Drupal es más robusto para wordpress al momento de tratar datos muy grandes. En el caso de Joomla simplemente no lo recomiendo, uno por el gran historial de ataques que tiene y dos porque su comunidad no es tan grande como para encontrar ayuda en todos los problemas que puedas encontrar. Cuando vienen los problemas vas a apreciar mucho el valor de una comunidad.

Usos para WordPress

WordPress no es sólo para blogs, nació siendo eso pero gracias a la gran comunidad wordpress se ha transformado en un CMS fácil de usar y modificar al gusto para crear todo tipo de trabajos. Veamos algunos ejemplos mostrados y sus respectivos enlaces:

• braulioaquino.com – oh sí, wordpress no sirve sólo para blogs y aún así es la mejor opción para tener uno, este blog es un ejemplo de ello. La plantilla que vemos la creé yo y espero subirla al repositorio oficial en unas semanas.
• inkashandcrafts.com/promotions – este ejemplo es un sitio de venta electrónica creado en Perú, se puede apreciar el manejo de un carrito de compras, al parecer con código propio sin usar plugins de e-commerce.
• www.huskerbar.com – un buscador de bares usando el API de Google Maps dentro de un wordpress, la información de los resultados puede obtenerse de posts (o custom post types) con custom fields para la longitud y latitud, la información de las ciudades por categorías.
• www.washington.edu/maps – este es otro ejemplo en el uso de mapas con un mejor acabado, al parecer también usan custom fields para llamar las coordenadas y mostrar información detallada de cada localización.
• www.peta2.com – en este sitio hace uso de wordpress para mostrar toda la información de esta organización del derecho de los animales con un diseño del sitio visualmente atractivo y bien cuidado.
• www.rollingstones.com/releases – pues sí, lo Rolling Stones también usan wordpress haciendo que se puedan escuchar audios de forma embebida. ¿Sitios musicales? Claro que sí, wordpress puede.
• infosoft.inf.pucp.edu.pe – los chicos de la IEEE Computer Society PUCP también usaron wordpress para crear el sitio de su evento, esto lo resalto porque wordpress es muy fácil de usar y se pueden crear sitios muy atractivos de forma rápida.

Temas (templates, plantillas)

La magia de wordpress está dentro de los temas, es decir de las plantillas de tu sitios. Usando un buen tema puedes hacer que tu sitio se vea muy profesional sin necesidad de saber programar o si lo sabes puedes hacer modificaciones de algunos temas (o crear uno nuevo) que se adecue a necesidades muy particulares y que sirvan para hacer sistemas avanzados.

Al ser un buen CMS con una gran comunidad de usuarios y desarrolladores, wordpress tiene un repositorio oficial donde está alojado miles de temas y plugins. Un repositorio viene a ser algo así como un App Store o un Android Market pero para wordpress. La dirección del repositorio oficial es wordpress.org/extend/themes donde encuentras un buscador donde encontrar por ejemplo temas sobre videos y si quieres puedes hacer una búsqueda más específica seleccionar una serie de filtros desde wordpress.org/extend/themes/tag-filter para encontrar un tema que se adecue a lo que necesitas, existen incluso temas con opciones internas para cambiar el fondo, la cabecera, el número de columnas, etc, sin necesidad de programar nada, estos cambios son sólo algunas opciones que aparecen el paner de control.

Cada tema, si lo descargas, se compone de una carpeta con archivos, si tienes acceso al FTP de tu sitio esta carpeta la encuentras en wp-content/themes/tutema. Para editar un tema sólo se necesita PHP, HTML y CSS, puedes usar jQuery y otras cosas más si deseas, pero no es necesario.

Si no encuentras lo que necesitas en el repositorio oficial, también puedes buscarlo en otros sitios, hay algunos que se dedican a vender temas con diseños exquisitos y algunas versiones gratuitas.

Algunos enlaces de algunos temas gratuitos y atractivos son:

• themeid.com/demo/responsive – un tema que usa una tecnología para que se adecue al ancho de la pantalla (responsive), así se podrá ver diseños que se adecuen a una pantalla grande, un diseño diferente para tablets y otros para celulares, puedes descargarlo desde el repositorio oficial: wordpress.org/extend/themes/responsive
• fthrwght.com/autofocus/prodemo – este tema es de los llamados fremium, es decir que es de pago pero tiene una versión gratuita sin algunas características como la integración con Flickr. Puedes descargarlo gratis desde fthrwght.com/autofocus
• demo.shakenandstirredweb.com/shaken-invoice-lite – otro tema freemium, este tema es útil para de ventas por internet, viene con manejo de un carrito de compras. Descárgalo desde http://shakenandstirredweb.com/theme/shaken-invoice-lite
• widephoto.buzzrain.com – este es uno muy exquisito para fotógrafos, diseño minimalista y de gran impacto, usa un fondo de fotografías que van cambiando automáticamente. Lo descargas desde buzzrain.com/theme/widephoto

Otros temas, pero ahora de pago con acabados interesantes son:

• demo.shakenandstirredweb.com/highlight – para portafolios.
• Descarga: shakenandstirredweb.com/theme/highlight
• ghostpool.com/wordpress/inprofile – para fotografía y galerías.
• Descarga: themeforest.net/item/inprofile-responsive-photographygallery-wp-theme
• imaginemthemes.com/themes/?theme=RSW – para arte y fotografía.
• Descarga: themeforest.net/item/responsive-fullscreen-studio-for-wordpress/2026019

Plugins

Los plugins son complementos para wordpress que le dan nuevas funcionalidades, esto para llegar a hacer diferentes cosas como sincronizarlo con twitter, mostrar el número de visitas a cada post, … infinidad de cosas que se pueden hacer sin necesidad de programar. También existe un repositorio oficial de plugins en wordpress.org/extend/plugins y si eres programador puedes alojar los tuyos ahí totalmente gratis.

Algo común es usar los plugins para obtener las funcionalidades y luego modificarlas a tu gusto, pero tal y como aconsejé aquel día: Si vas a usar un plugin  y luego editar el código no olvides de editar también el número de versión y ponerlo en 99999 porque, si quien lo creó saca una nueva versión, en el momento en que actualices puedes perder las modificaciones que realizaste al código. Un buen plugin junto a un buen tema te ahorra muchas horas y hasta días de trabajo al momento de desarrollar.

A continuación algunas funciones interesantes y un par de plugins útiles para cada tarea:

• Galería. NextGEN Gallery y PhotoSmash Galleries.
• Formularios de contacto. Easy Contact Forms y Contact Form 7.
• Seguridad. Better WP Security y Simple Login Lockdown.
• Traductores. Transposh y Microsoft AJAX Translation WordPress.
• Colaboración. Community News Aggregator y Buddypress Community Stats.
• Redes sociales. Social Contests y Social Login, Sharing & Commenting.
• Diseño de temas. WoWPth y Device Theme Switcher.
• SEO (posicionamiento en Google). All in one SEO pack y SEO ultimate.
• Foros. bbPress y WP-Forum.
• Backups. WP-DB-Backup y WordPress Backup to Dropbox.
• Estadísticas. WP-Statistics y Graphical statistics report.
• E-Commerce. WP e-Commerce Catalog Visibility y YAK for WordPress.
• Administrar eventos. Event Organiser y All-in-One Event Calendar.
• Campos personalizados. Types y Advanced Custom Fields.

Algo más, es muy importante que no abuses mucho de los plugins, no tienes por qué instalar de todo y además muchas cosas sencillas se pueden hacer con poco código desde el functions.php de tu tema, ten en cuenta que al elegir un plugin escoger entre los que tengan más descargas ya que cada plugin tiene un miniforo y si son varios los que usan el mismo es más fácil encontrar respuestas a tus dudas.

El codex

El gran manual de wordpress es el Codex, un sitio donde se encuentra toda la documentación referente a wordpress en muchos idiomas. La documentación va desde cosas sencillas sobre cómo actualizar un plugin desde el panel (que es un solo clic) hasta la descripción y ejemplos de cada función nativa de wordpress, información muy útil para los desarrolladores y lo que hace de wordpress una herramienta poderosa.

El codex está en codex.wordpress.org (en español: http://codex.wordpress.org/es:Main_Page) y en su portada uno encuentra ya las opciones básicas, en la parte superior derecha existe un buscador donde podrás encontrar mucha información, incluso algunos ejemplos sobre cómo crear nuevos plugins.

Algunos temas a encontrar:

• Instalación.
• Traducciones.
• Administración.
• Diseño y maquetación.
• El bucle (loop) de wordpress.
• Documentación para desarrolladores.

Otra de las cosas más importantes que hay en el codex es encontrar una imagen con toda la jerarquía de archivos de un tema: codex.wordpress.org/es:Template_Hierarchy. Ahí puedes observar que para crear un tema basta con un archivo index.php y style.css pero que puedes ir agregando archivos diferentes para tareas específicas, por ejemplo el poder crear un diseño diferente para todas las entradas que pertenezcan a alguna categoría.

Sitios útiles

Por excelencia el sitio más útil que vas a tener para desarrollar con wordpress es el Codex del cual hablamos en el párrafo anterior, pero además existen muchos sitios para encontrar información de todos tipo, por mi parte suelo obtener información de dos sitios adicionales, el primero es Ayudawordpress.com el cual es el más popular en español y que además cuenta con un foro propio para resolver consultas entre los propios usuarios; el segundo sitio que suelo usar es el grupo en google de la Comunidad de WordPress en Perú, una comunidad de desarrolladores de WordPress donde nunca he llegado a ver alguna pregunta sin respuesta.

En la comunidad de WordPress Perú groups.google.com/group/wordpress-peru las preguntas son respondidas por diferentes miembros y si alguno no conoce la respuesta te da ideas sobre cómo podrían estas solucionarse, además de ello es un buen sitio donde dar a conocer tu trabajo para obtener buen feedback y buscar programadores para trabajar en algún proyecto. Sí, si eres desarrollador hasta puedes encontrar trabajo.

Clones (Facebook, twitter, …)

La versatilidad de wordpress es tal que muchas personas lo usan para crear clones de sitios conocidos, no llegan a tener todas las funcionalidades de estos pero el concepto es muy parecido y los enlisto acá para poder ver a lo que se puede llegar.

• Facebook: buddypressthemes.org/activity o buddyboss.com/demo/members/guest
• Twitter: templatic.com/demos/livetwit o agita.me/twit
• Youtube: wordpressthemesbook.com/wordtube o moviepress.premiumpresslimited.com
• Pinterest: apptha-demo.com/template/pinboard o demo.uniprogy.com/pinnect
• Groupon: wpoupon.com o templatic.com/demos/dailydeal

Los ejemplos puestos son, por llamarlos así, clásicos y si quieres algo más potente es necesario que tú mismo modifiques los estilos de diseño y si quieres armar una red social real también lo puedes hacer, eso lo vemos con BuddyPress.

BuddyPress

Una de las cosas más interesantes en el uso de wordpress es Budypress, el cual se trata de un plugin para convertir una instalación de wordpress en una red social con libre registro y muchas opciones interesantes como:

• Un flujo de actividades de cada usuario, algo así como el muro en Facebook donde aparece todo lo que cada uno va haciendo.
• Campos de perfiles adaptables para no tener sólo los clásicos campos de nombre y bio. Si tu red es musical pueden poner artistas favoritos, etc.
• Se pueden crear grupos. Así es, los usuarios pueden crear grupos con sus amigos, estos grupos pueden ser públicos o privados.
• Puedes agregar amigos y ver en tu portada la actividad de estos, así como en Facebook, también puedes bloquear usuarios.
• Mensajes privados entre los usuarios, de esta forma se pueden comunicar entre ellos y también pueden enviar mensajes grupales.
• Se pueden crear foros internos para que los usuarios pueden discutir distintos temas cuando el uso de grupos no es suficiente.
• Por supuesto que además se pueden crear blogs por cada usuario, y estos blogs también pueden ser unidos en una gran blog que se alimente de cada post.
• Cada usuario cuenta además con un panel para administrar sus opciones y tú como administrador puedes crear nuevas o eliminar algunas existentes.

Buddypress se encuentra en wordpress.org/extend/plugins/buddypress donde también puedes encontrar algunas capturas de pantalla. Si quieres probar el demo lo puedes hacer desde testbp.org y además encontrar temas y plugins especiales desde buddypress.org.

Aparte de BuddyPress existen otros proyectos como bbPress para hacer foros y WordPress MU para tener un wordpress multiusuario, con WordPress MU además puedes configurar que cada usuario tenga su propia instalación de WordPress dentro del tuyo.

Errores (No lo hagas)

Los que suelen ver este blog habrán visto que hace poco escribí un post contando que me hackearon mi Guía de hoteles hecho con wordpress, esto fue debido a que no tenía mi wordpress actualizado, por ello me parece muy importante hacer una lista de pequeños consejos sobre qué cosas son necesarias para la seguridad.

• No dejes tu sitio con una versión de wordpress antigua. Las actualizaciones se dan por mejoras y por seguridad, no arriesgues a que ataquen tu sitio.
• Si desarrollas sitios para clientes revisa mensualmente la versión de estos, incluso si ya no trabajas para ellos: cuida el nombre de tu trabajo u ofrece mantenimiento de seguridad.
• Mantén un backup (copia de seguridad) de tu base de datos, yo uso WP-DB-Backup que se encarga de hacer backups automáticos y enviarlos al mail.
• Mantén también una copia de tus archivos, entra a tu FTP o lo que uses y copia todo lo que tengas en la carpeta wp-content, ahí está el tema, plugins e imágenes.
• Cualquiera puede intentar adivinar qué contraseña usas, uso Simple Login Lockdown para que no puedan poner una contraseña errónea más de cinco veces.
• Mantén también actualizado los plugins que usas y trata de usar plugins populares ya que son los que menos errores tienen.
• Bloquea el acceso a las carpetas de tu instalación desde tu .htaccess así nadie puede curiosear a través de la url.

Esas recomendaciones son básicas. Actualizar plugins y el mismo wordpress es cosa de un par de clics. Ya sabes, el error más común es tener una versión antigua de wordpress, no lo hagas.

Tips + Ideas

En este punto suelto algunas ideas y tips de un par de trabajos que he hecho y que no son de un uso común acerca de wordpress, así podemos ver las diferentes cosas que se pueden hacer.

En guiadehoteleslima.com hice algunas cosas interesantes:

• Importé toda la base de datos del Ministerio de Turismo acerca de más de 3000 hoteles y hostales de Lima y el Callao y coloqué cada uno de ellos como si fueran post con sus respectivos custom fields.
• Cada post (hotel y hostal) aparece con un status de Pendiente y usando la función wp_schedule_event cada hora uno de estos cambia su estatus y pasa a ser Publicado, así se tiene cuatro meses de posteos.
• Uso cada categoría como distrito y así los puedo catalogar de forma ordenada, además que cada single.php muestra el contenido por custom fields y no por the_content() como se hace normalmente.

En otro proyecto hago otro uso interesante:

• Uso el feed de twitter para que cada cinco minutos encuentre un tweet sobre un tema específico y que incluya una imagen, con la información obtenida uso el API de twitter y twitpic para crear un post automático con ellos.
• Estos post aparecen como un álbum de fotos y con un enlace en cada uno de ellos para reportarlo, basta con un sólo reporte (clic en el enlace) para que el post se elimine. Al ver cantidad de contenido no me preocupo por que eliminen todo.

De la misma forma puedes usar el API de twitter para hacer posteos automáticos con imágenes de algunas noticias, así si alguien toma una fotografía con el hashtag que deseas este aparece publicada en el sitio.

Otra idea es alimentarse del feed de todas las cuponeras que existen en una ciudad y ponerlas en un sitio que incluya todos estos descuentos e incluso puedes ordenarlo por categorías.

También se puede crear un blog público de cualquier tema, historias, música, una serie de tv o lo que sea y que cualquiera pueda escribir sin estar registrado, luego los que lo vean voten y los más votados pasan a portada y los que no se eliminen.

Puedes instalar wordpress en un servidor privado para una empresa y a través de ella hacer que se den los reportes a todos los usuarios, se registren pendientes o designen tareas. Incluso también un sistema de quejas internas de forma anónima.

App Móvil

Por si fuera poco, wordpress tiene un app oficial para iPhone, iPad y Android. Ah sí, también para blackberry.

Con el App Móvil puedes realizar las clásicas tareas de  revisar post y comentarios, además de crear nuevos posts y páginas para tu sitio. Se puede entrar al panel de wp-admin pero como si fuera desde la web, esta sección no tiene ninguna optimización para móviles. Eso sí, entre lo interesante está el poder tomar una foto o video y subirla rápidamente al sitio.

Además del app oficial existen otros apps para wordpress que te permiten mayor comodidad a la hora escribir post, sobretodo en tablets.

Fin

Listo, este es el contenido de la presentación que realicé y que cualquiera puede usar para cuando tenga que hacer una similar sobre WordPress Básico. El plan original a la hora de escribir el post era el de incrustar las diapositivas, pero ver una diapositiva es como leer el índice de un libro perdiéndote del contenido, así que ha valido la pena hacer este largo post.

He tratado de poner temas que engloben casi todas las características (que no sean código) de wordpress de una forma rápida. Puedes usar los slides, descargártelos en pptx desde dropbox.com/s/v31tqcau70uklo8/infosoft.pptx y modificarlos si lo deseas. Algo más, la idea de terminar con el App Movil es la de tomar un foto al público y subirla en el momento en un post (cosa que no hice en el momento).

Ah, como en toda presentación se aceptan preguntas. Acá existe la caja de comentarios para ello.

Gracias.