COLECCIÓN AULA MENTOR SERIE DISEÑO WEB CamSdw SGALV Crea tu web con WordPress Ministerio de Educación, Cultura y De
Views 220 Downloads 3 File size 17MB
COLECCIÓN AULA MENTOR
SERIE DISEÑO WEB
CamSdw
SGALV
Crea tu web con WordPress
Ministerio de Educación, Cultura y Deporte
Crea tu web con WordPress Diseño Web
Catálogo de publicaciones del Ministerio: www.educacion.gob.es Catálogo general de publicaciones oficiales: www.publicacionesoficiales.boe.es
Autora Helena Gil Ezquerro
Coordinación pedagógica Denica Veselinova Sabeva Tana Diez Vankoningsloo
Edición y maquetación de contenidos Helena Gil Ezquerro Denica Veselinova Sabeva Tana Diez Vankoningsloo
Diseño gráfico e imagen Helena Gil Ezquerro Denica Veselinova Sabeva Tana Diez Vankoningsloo
MINISTERIO DE EDUCACIÓN, CULTURA Y DEPORTE MINISTERIO DE INTERIOR Edita: © SECRETARÍA GENERAL TÉCNICA Subdirección General de Documentación y Publicaciones NIPO: 030-14-148-X ISBN: 978-84-369-5587-3
ÍNDICE
Pág.
MÓDULO 1 Unidad 0. Conociendo WordPress������������������������������������������������������������������������������������������������������� 12 1. Un poco de historia...........................................................................................................................13 1.1 El nacimiento de WordPress..........................................................................................................15 1.2 Otros CMS.......................................................................................................................................16 2. Anatomía de WordPress....................................................................................................................16 2.1 GNU General Public License......................................................................................................... 17 2.2 Apache, PHP y MySQL................................................................................................................... 18 2.3 La comunidad de WordPress......................................................................................................... 18 Unidad 1. Instalación de WordPress�������������������������������������������������������������������������������������������������� 20 1. Instalación en un servidor local..................................................................................................... 20 1.1. Instalación de WAMP en Windows paso a paso.......................................................................... 21 1.2. Instalación de MAMP en Mac OS paso a paso............................................................................. 34 1.2.1 Configuración de MAMP������������������������������������������������������������������������������������������������������ 38 1.3 Instalación de WordPress�������������������������������������������������������������������������������������������������������������� 44 1.3.1 Creación de una base de datos�������������������������������������������������������������������������������������������� 44 1.3.2 Descarga de la última versión de WordPress���������������������������������������������������������������������� 46 1.3.3 Configuración de wp-config.php����������������������������������������������������������������������������������������� 48 1.3.4 Asistente de instalación de WordPress�������������������������������������������������������������������������������� 51 2. Instalación en un servidor remoto................................................................................................. 55 2.1 Requerimientos técnicos de WordPress���������������������������������������������������������������������������������������� 55 2.2 Encontrar un hosting adecuado���������������������������������������������������������������������������������������������������� 56 2.3 Hosting gratuito����������������������������������������������������������������������������������������������������������������������������� 57 2.4 Transferencia de archivos por FTP����������������������������������������������������������������������������������������������� 57 2.5 Instalación de WordPress en un servidor remoto paso a paso��������������������������������������������������� 58 2.5.1 Crear una cuenta en un servidor remoto���������������������������������������������������������������������������� 59 2.5.2 Configurar el servidor remoto���������������������������������������������������������������������������������������������� 61 Unidad 2. Primeros pasos en WordPress������������������������������������������������������������������������������������������ 73 1. La estructura de nuestra web.......................................................................................................... 73
2. Conociendo el área de administración.......................................................................................... 77 3. Planificación del sitio web�������������������������������������������������������������������������������������������������������������� 80 3.1 Elaborar un informe de nuestro proyecto������������������������������������������������������������������������������������ 81 MÓDULO 2 Unidad 3. Gestión de usuarios������������������������������������������������������������������������������������������������������������ 84 1. Descripción detallada de los roles................................................................................................. 85 1.1 El 1.2 El 1.3 El 1.4 El 1.5 El 1.6 El
rol rol rol rol rol rol
de de de de de de
suscriptor������������������������������������������������������������������������������������������������������������������������ 85 colaborador��������������������������������������������������������������������������������������������������������������������� 85 autor�������������������������������������������������������������������������������������������������������������������������������� 86 editor������������������������������������������������������������������������������������������������������������������������������� 86 administrador������������������������������������������������������������������������������������������������������������������ 87 Súper Administrador������������������������������������������������������������������������������������������������������ 87
2. Gestionar usuarios............................................................................................................................. 88 Unidad 4. Temas para WordPress. Configurar la apariencia de nuestra web���������������������������� 93 1. Qué son los temas.............................................................................................................................. 93 2. Elegir un tema adecuado. Aspectos a tener en cuenta............................................................... 96 2.1 Requerimientos a la hora elegir un tema������������������������������������������������������������������������������������� 96 2.1.1 Optimizar nuestra web para dispositivos móviles��������������������������������������������������������������� 97 2.1.2 El caso especial de las tiendas online������������������������������������������������������������������������������98 2.2 Algunos consejos para escoger un buen tema para nuestro proyecto��������������������������������������� 98 3. Buscando el tema perfecto. Dónde y cómo descargar temas��������������������������������������������������� 99 3.1 El directorio de temas de WordPress������������������������������������������������������������������������������������������ 101 3.1.1 Buscar un tema desde nuestra área de administración����������������������������������������������������� 101 3.1.2 Buscar un tema en la web del directorio de WordPress��������������������������������������������������� 103 3.2 Temas premium��������������������������������������������������������������������������������������������������������������������������� 106 3.2.1 Consejos para elegir un tema de pago������������������������������������������������������������������������������� 107 4. Instalación manual de un tema..................................................................................................... 112 5. Retocando nuestro sitio web. Configuración y adaptación de los temas��������������������������� 114 5.1 Opciones de configuración��������������������������������������������������������������������������������������������������������� 114 5.1.1 Apariencia → Personalizar�������������������������������������������������������������������������������������������������� 114 5.1.2 Apariencia → Opciones del tema��������������������������������������������������������������������������������������� 117 5.1.3 Apariencia → Cabecera������������������������������������������������������������������������������������������������������� 118 5.1.4 Apariencia → Fondo����������������������������������������������������������������������������������������������������������� 118 5.2 Uso de Widgets���������������������������������������������������������������������������������������������������������������������������� 119 5.3 Enredar en el código. Adaptación manual de los temas����������������������������������������������������������� 122 5.4 Cómo traducir un tema de WordPress��������������������������������������������������������������������������������������� 122 5.4.1 Configuración de Poedit������������������������������������������������������������������������������������������������������ 124
Unidad 5. Plugins para WordPress. Añadiendo funcionalidad��������������������������������������������������� 126 1. Dónde y cómo encontrar plugins................................................................................................. 126 1.1. El directorio oficial de plugins de WordPress............................................................................. 127 2. Cómo instalar un plugin................................................................................................................. 131 2.1. Instalación automática de plugins............................................................................................... 133 2.2. Instalación manual de plugins..................................................................................................... 136 3. La configuración de los plugins.................................................................................................... 138 3.1. Plugins y widgets.......................................................................................................................... 141 3.2. Shortcodes..................................................................................................................................... 142 3.3. Edición avanzada de plugins....................................................................................................... 146 4. ¿Qué plugins necesita mi sitio web?............................................................................................. 146 4.1. Plugins que todo sitio web debería instalar................................................................................ 147 4.2. ¿Cuántos plugins puedo usar?, ¿existe un límite?........................................................................ 147 4.3. ¿Cómo elegir un plugin de entre varios que ofrecen la misma funcionalidad?........................ 147 4.4. Plugins de uso habitual................................................................................................................ 148 4.4.1. Formularios de contacto...................................................................................................... 148 4.4.2. Utilidades para imágenes..................................................................................................... 149 4.4.3. Utilidades para vídeo........................................................................................................... 150 4.4.4. Gestión de usuarios.............................................................................................................. 151 4.4.5. Redes sociales en WordPress............................................................................................... 152 4.4.6. Boletines electrónicos y suscripciones................................................................................ 153 4.4.7. Calendarios de eventos........................................................................................................ 154 4.4.8. Otros plugins destacados..................................................................................................... 155 4.5. Sitios web multilingües................................................................................................................ 156 4.6. Plugins para comercio electrónico.............................................................................................. 157 4.6.1. Temas para comercio electrónico........................................................................................ 159 Unidad 6. Configurando Wordpress.................................................................................................. 160 1. El menú Ajustes................................................................................................................................. 160 1.1. Ajustes 1.2. Ajustes 1.3. Ajustes 1.4. Ajustes 1.5. Ajustes 1.6. Ajustes
→ → → → → →
Generales.................................................................................................................... 160 Escritura....................................................................................................................... 162 Lectura......................................................................................................................... 164 Comentarios................................................................................................................ 166 Medios......................................................................................................................... 169 Enlaces permanentes.................................................................................................. 169
2. El menú Herramientas..................................................................................................................... 171 2.1. Herramientas → Herramientas disponibles................................................................................ 171 2.2. Herramientas → Importar............................................................................................................ 172 2.3. Herramientas → Exportar............................................................................................................ 173
MÓDULO 3 Unidad 7. La creación de contenido.................................................................................................. 176 1. Conceptos clave en la creación de contenido............................................................................. 176 1.1. El cliente es lo primero................................................................................................................ 177 1.2. Es bueno ser previsible................................................................................................................ 177 2. Cómo redactar textos de calidad para nuestra web.................................................................. 178 3. Usabilidad y Experiencia de Usuario (UX).................................................................................. 180 4. Algunas ideas para la creación de contenido............................................................................. 181 Unidad 8. La edición de textos en WordPress................................................................................. 183 1. Las entradas o posts......................................................................................................................... 184 1.1. Autoguardado y revisiones.......................................................................................................... 191 2. El procesador de textos................................................................................................................... 192 2.1. Conceptos básicos de HTML....................................................................................................... 192 2.2. Dominar el editor de textos......................................................................................................... 194 2.3. Plugins de utilidad para trabajar con el editor de textos........................................................... 198 Unidad 9. Contenido audiovisual....................................................................................................... 200 1. Las imágenes...................................................................................................................................... 200 1.1. Conceptos básicos de imagen digital.......................................................................................... 200 1.1.1. Tamaño y resolución............................................................................................................ 200 1.1.2. Espacio de color................................................................................................................... 202 1.1.3. Compresión y formatos........................................................................................................ 202 1.1.4. Pantallas Retina..................................................................................................................... 203 1.2. Optimización de imágenes.......................................................................................................... 203 1.3. Cómo publicar imágenes en nuestra web.................................................................................. 204 1.3.1. Plugins para imágenes......................................................................................................... 210 2. Vídeo y audio..................................................................................................................................... 211 2.1. Incrustar (embed) vídeos de YouTube o Vimeo......................................................................... 212 2.2. Incrustar audios de SoundCloud................................................................................................. 212 2.3. Publicar vídeo o audio alojado en nuestro servidor.................................................................. 214 2.3.1. Plugins para vídeo................................................................................................................ 218 3. La librería multimedia..................................................................................................................... 219 4. Problemática legal relacionada con el uso de contenido audiovisual.................................. 221 Unidad 10. Categorías, etiquetas, páginas y menús...................................................................... 222 1. Categorías........................................................................................................................................... 222
2. Etiquetas............................................................................................................................................. 226 3. Páginas................................................................................................................................................ 228 4. Menús de navegación....................................................................................................................... 230 4.1. Qué hacer si nuestro tema no soporta menús personalizados.................................................. 237 MÓDULO 4 Unidad 11. Introducción a WordPress Multisitio........................................................................... 240 Unidad 12. Optimización para motores de búsqueda (SEO)....................................................... 242 1. Cómo optimizar nuestra web para motores de búsqueda....................................................... 243 1.1. Contenidos optimizados para SEO.............................................................................................. 245 1.2. HTML y SEO................................................................................................................................. 245 1.2.1. Los meta tags o etiquetas meta............................................................................................ 246 2. Herramientas para webmasters..................................................................................................... 246 2.1. Añadir URL a buscadores............................................................................................................. 247 2.2. Los Sitemaps................................................................................................................................. 247 2.3. El archivo robots.txt..................................................................................................................... 248 3. Plugins para SEO.............................................................................................................................. 250 Unidad 13. Seguridad, mantenimiento y mejora del rendimiento............................................. 251 1. Cómo proteger nuestro sitio web.................................................................................................. 251 1.1. Escoger contraseñas seguras........................................................................................................ 252 1.2. Actualización de WordPress......................................................................................................... 252 1.3. Copias de seguridad..................................................................................................................... 256 1.3.1. Copias de seguridad manuales............................................................................................ 257 1.3.2. Configuración de UpdraftPlus.............................................................................................. 259 2. Protección anti-spam....................................................................................................................... 261 2.1. Configuración de Akismet............................................................................................................ 261 2.2. El uso de CAPTCHA..................................................................................................................... 265 3. Mi WordPress va lento, ¿qué hago?............................................................................................... 266 3.1. Los servicios de hosting de baja calidad..................................................................................... 266 3.2. Plugins inadecuados..................................................................................................................... 266 3.3. Otras causas de la lentitud de nuestra web................................................................................ 267 3.4. Herramientas para medir la velocidad de nuestra web............................................................. 268 3.5. Otras medidas para mejorar el rendimiento de nuestra web.................................................... 268 Unidad 14. Publicación definitiva de nuestra web........................................................................ 269 1. Migración desde el servidor local al remoto.............................................................................. 269
2. Análisis de visitas............................................................................................................................. 278 2.1. Google Analytics y la legislación sobre cookies........................................................................ 282 Unidad 15. Errores comunes y cómo encontrar ayuda................................................................. 283 1. Errores que todo principiante debería evitar............................................................................. 283 1.1. Errores de gestión y planificación............................................................................................... 283 1.2. Errores de configuración y seguridad......................................................................................... 284 1.3. Errores de diseño......................................................................................................................... 285 1.4. Errores de contenidos y de SEO.................................................................................................. 286 1.5. Otros errores................................................................................................................................. 287 2. Encontrar ayuda................................................................................................................................ 287 ANEXO I. INSTALACIONES EN WINDOWS 1. Instalación de Visual C++ 2010 SP1 Redistributable Package.............................................. 290 2. Instalación de Notepad++............................................................................................................... 293 3. Instalación de Cyberduck............................................................................................................... 298 ANEXO II. INSTALACIONES EN MAC 1. Instalación de TextWrangler en Mac............................................................................................ 302 2. Instalación de Cyberduck en Mac................................................................................................. 304 GLOSARIO.............................................................................................................................................. 306
Módulo 1. Unidad 0. Conociendo WordPress Unidad 1. Instalación de WordPress Unidad 2. Primeros pasos en WordPress
Aula Mentor
Unidad 0. Conociendo WordPress
WordPress es el sistema de gestión de contenidos, o CMS (Content Management System), más popular de la web. Se creó originalmente como una herramienta para la publicación de blogs, aunque en la actualidad se utiliza para aplicaciones tan diversas como magazines, portfolios, portales web, galerías de imágenes e incluso comercio online. Si tienes un proyecto que deseas poner en marcha en Internet, la probabilidad de que puedas llevarlo a cabo con WordPress es muy alta y, seguramente, también muy recomendable. Por eso, el objetivo de este curso es guiarte en ese viaje y ofrecerte ayuda y consejo cuando lo necesites. Para poder seguir el curso con soltura no necesitas aprender a programar ni es necesario que tengas ningún conocimiento anterior de programación. Tampoco se requiere que tengas una formación previa sobre diseño web. Basta con que sepas navegar por Internet y tengas ganas de aprender más, porque WordPress se encarga de la parte difícil.
12
Si consigues completar el curso con éxito, tu proyecto web estará listo para publicar en Internet. Lo habrás llevado a cabo tú mismo sin necesidad de contratar programadores ni diseñadores, tendrá un aspecto perfectamente profesional y una completa área de administración para añadir o editar los contenidos de tu web. ¿Preparado? ¡Comenzamos!
Módulo 1. U0 Conociendo WordPress
1. Un poco de historia Pese a que WordPress puede usarse para desarrollar muy distintos tipos de webs, no hay que olvidar que inicialmente fue diseñado como una herramienta de blogging, o de publicación de blogs, y la parte fundamental de su arquitectura no podría entenderse sin comprender antes las características y la mecánica de los blogs. Hoy en día, la gran mayoría sabemos lo que es un blog o, al menos, hemos oído hablar de él. Blog es una contracción del inglés weblog, que traducido al español vendría a ser algo así como “diario web”. De hecho, el punto de partida del blog moderno fueron los equivalentes digitales a los diarios personales que comenzaron a publicarse a mediados de los años 90, en los que los autores escribían sobre experiencias diarias, aficiones y quejas, componían poesía o plasmaban pensamientos que podríamos encontrar en cualquier diario tradicional en papel. Uno de los primeros bloggers reconocidos fue, por ejemplo, el periodista estadounidense Justin Hall, que publica su blog Justin’s Links from the Underground (http:// en.wikipedia.org/wiki/Justin_Hall) desde el año 1994. Este blog comenzó siendo una especie de visita guiada al Internet de aquel entonces, pero pronto comenzaría a convertirse en un relato de la vida privada de Hall, para el que nada parecía lo suficientemente embarazoso o íntimo. Jerry Hall habló en su diario digital de sus relaciones sentimentales, de bochornosos problemas médicos o incluso del suicidio de su padre. En España, quizás el blog más emblemático de entre los pioneros fue el famoso diario de Claudia P. que, supuestamente, era una adolescente madrileña de 17 años que publicó en Internet su diario personal desde junio de 2001 hasta el año 2003. En la actualidad difundir la vida íntima en las redes sociales parece estar a la orden del día, así que es difícil que el diario de Claudia P. nos resulte chocante, pero en aquel entonces era algo radicalmente nuevo y sus lectores reconocían incluso sentirse culpables por estar leyendo lo más cercano a un diario secreto. No es de extrañar que los blogs se hicieran populares a finales de los 90 y su uso se propagara de forma exponencial durante los años siguientes hasta alcanzar los niveles de difusión que todos conocemos. Pero el hecho fundamental que animó a más y más gente a publicar un blog fue la creación de sistemas que permitieran añadir y editar artículos a personas sin formación previa en informática. Al principio, si querías escribir un blog, tenías que tener al menos alguna noción de programación, eso explica que muchos de los blogs de aquel entonces tratasen sobre temas tecnológicos o abarcasen las áreas de interés habituales entre los aficionados a la informática y las nuevas tecnologías. Otros, como por ejemplo el de Claudia P., estaba escrito directamente en HTML, lo que podía convertir en un suplicio cualquier intento de actualización. Además, una de las características clave de los blogs es, precisamente, que se actualizan con una frecuencia muy alta, mucho más de lo que en aquel entonces se consideraba normal actualizar una web. De hecho, a mediados de los años 90 muchas páginas web eran estáticas, es decir, una vez publicadas raramente se hacían modificaciones. Pero ocurrió que en aquellas páginas estáticas, tanto personales como corporativas, comenzaron a hacerse cada vez más populares las secciones de noticias, en las que se publicaban textos breves relativos al tema de la página web, o al sector de la empresa de turno, ordenados por fecha. Como estas secciones necesitaban actualizarse con cierta
13
Aula Mentor
asiduidad, comenzó a hacerse necesario el uso de algún tipo de programa que facilitase esta tarea. En parte, esto dio lugar a la evolución de los sistemas que posibilitaban la producción y el mantenimiento de artículos web en orden cronológico inverso a una población, mucho más extensa, con conocimientos técnicos limitados. Y este concepto, es decir, un listado de artículos web en orden cronológico inverso es precisamente la estructura básica del blog actual, todo lo demás gira alrededor de esta idea.
14
Las webs dinámicas se distinguen de las estáticas en que su contenido varía en función de ciertos parámetros introducidos, bien por el usuario que visita la página (client-site scripting), o bien definidos por un programa (server-side scripting). Este último tipo de webs se crea habitualmente con lenguajes de programación como Perl, ColdFusion, PHP, ASP.NET, Ruby, etc… Hoy en día la mayor parte de las páginas web son dinámicas, lo que permite, entre otras muchas ventajas, administrar el contenido sin modificar su estructura. Esto quiere decir que todo lo que tenemos que hacer es rellenar un formulario y hacer clic para que nuestra web actualice su contenido.
Módulo 1. U0 Conociendo WordPress
Así, a finales de los 90 y gracias al uso de distintos lenguajes de programación, comenzaron a aparecer las primeras herramientas de edición y alojamiento de blogs: Open Diary (1998), LiveJournal (1999), Diaryland (1999) o Blogger (1999), que sería adquirido por Google en 2003. Pronto resultó evidente que algo había cambiado en el mundo en cuanto al modo de producir noticias, algo que hasta entonces se llevaba a cabo en un entorno exclusivamente profesional. La llegada de los blogs otorgaba a personas como nosotros el poder de una gran corporación mediática, porque es prácticamente seguro que ahí afuera hay una cantidad mayor o menor de gente que está dispuesta a escuchar lo que tenemos que decir. Las distintas características que iban adoptando de forma general los blogs iban a configurar la noción actual que tenemos de los mismos e iban a sentar las bases para el impacto que produjeron en Internet. OpenDiary fue el primer sistema que permitió a los lectores añadir comentarios a los textos publicados. La posibilidad de añadir comentarios, otra de las características clave de los blogs, los convirtió en herramientas de comunicación bidireccionales en las que se abría la posibilidad de la creación de comunidades online en torno a un blog determinado. Otros mecanismos muy característicos de los blogs les permitirían conectar con otros de intereses similares. Hablamos de los Permalinks, los TrackBacks y los Blogrolls, que estudiaremos más adelante. El blog dejaba de ser una entidad aislada para configurarse como un ente individual dentro de una red social de blogs que, a partir del año 2002, sería conocida con el término blogosfera.
1.1 El nacimiento de WordPress En enero de 2003 un estudiante de Ciencias Políticas de 19 años llamado Matt Mullenweg, que habría de convertirse en el fundador de WordPress, escribía una entrada en su blog titulada “El dilema del software de blogging” [http://ma.tt/2003/01/the-blogging-softwaredilemma/]. En ella se lamentaba de que b2/cafelog, la herramienta de blogging que utilizaba en aquel entonces, llevara meses sin ser actualizada. El principal desarrollador de b2/cafelog parecía haber desaparecido de la faz de la tierra. El blog de Mullenweg estaba creciendo y necesitaba adaptarlo a los estándares web del momento, así que anunció su intención
15
Aula Mentor
de ampliar el código de b2/cafelog para crear una nueva herramienta de blogging “con la flexibilidad de MovableType, el analizador sintáctico de TextPattern, la capacidad de modificación de b2 y la sencillez de configuración de Blogger”. El primer comentario a esa ya mítica entrada es del cofundador de WordPress, Mike Little, ofreciéndose a contribuir. Así, el 27 de mayo de 2003 hizo su aparición la primera versión de WordPress. Como detalle anecdótico, todas las nuevas versiones a partir de aquella han tenido como nombre en clave a músicos de jazz, por ejemplo a la versión 1.2 se la conoce como Mingus por Charles Mingus. La versión que estudiaremos en este curso es la 4.0, con nombre en clave Benny, en honor al clarinetista y director de orquesta Benny Goodman. A principios de 2003 existían alrededor de 2000 blogs creados con b2/cafelog. Hoy en día se calcula que existen más de 12 millones de webs que utilizan WordPress, alrededor del 20% de todas las webs activas en el mundo.
1.2 Otros CMS Otros sistemas de gestión de contenidos web (CMS) se desarrollaron en paralelo a los blogs desde mediados de los años 90. Los CMS permiten la creación y administración de contenidos de páginas web de muy diversos tipos además de blogs: foros, páginas de noticias, tiendas online, webs corporativas, etc…
16
Los primeros CMS aparecieron para dar respuesta a la necesidad de algunas empresas y organizaciones de publicar un gran cantidad de contenido con mucha frecuencia. Un ejemplo de estas entidades son los periódicos, las revistas o las grandes corporaciones. Como ya hemos apuntado anteriormente, hoy en día WordPress no puede considerarse sólo como una herramienta de blogging. Es lo suficientemente flexible como para cubrir un rango muy amplio de funciones: puede formar una página corporativa, transformarse para publicar noticias o incluso convertirse en una tienda online. Puede que gracias a su gran versatilidad alrededor de un 50% de todos los CMS en activo son WordPress, aunque seguramente gran parte de su éxito radica también en su simplicidad y en que resulta mucho más intuitivo que otras herramientas disponibles.
2. Anatomía de WordPress En WordPress existen dos áreas muy diferenciadas: Por un lado la parte pública, o front-end, que es el sitio web en sí que se muestra a los visitantes y, por otro lado, el área de administración, o back-end, que es la parte privada desde la que pueden editarse los contenidos del sitio o definir su presentación visual. La estructura básica de WordPress, que se ha mantenido hasta hoy, tiene las mismas características de los primeros blogs: - Un área principal con un listado de entradas (en inglés posts o entries) mostrado en orden cronológico inverso, es decir las más nuevas se muestran primero. - Posibilidad de permitir a los lectores añadir comentarios, trackbacks y pingbacks.
Módulo 1. U0 Conociendo WordPress
- Una página, llamada archivo, donde consultar entradas antiguas. - Uno o más feeds, como RSS o ATOM. No hay que preocuparse si no conocemos el significado de algunos términos, los veremos en detalle más adelante. Hay también otras características que conviene destacar: - Uso de permalinks. - Posibilidad de almacenar los artículos bajo múltiples categorías o subcategorías. - Soporte para asignar etiquetas a las entradas. Una propiedad muy valiosa de WordPress es su arquitectura de plugins, soportada desde la temprana versión 1.2. Los plugins son pequeños programas que, una vez instalados, extienden la funcionalidad del blog. Existen plugins para aplicaciones muy diversas: añadir un formulario de contacto, mejorar el posicionamiento de la web en buscadores… La lista es extensísima, en el momento de escribir este curso hay cerca de 27.500 plugins en el repositorio de WordPress, todos ellos gratuitos y en código abierto. Otra característica muy práctica es el uso de temas, que se añadió en la versión 1.5. Los temas permiten cambiar por completo la apariencia del sitio web, tanto su estructura visual como los colores, tipografías y estilos empleados sin necesidad de modificar su contenido real, esto es, textos y archivos multimedia (imágenes, vídeo, audio, etc…) También es posible crear páginas estáticas desde la versión 1.2. En este contexto, una página estática es aquella cuyo contenido raramente se modifica, aunque es perfectamente posible hacerlo desde el área de administración. Un ejemplo de este tipo de páginas son las clásicas “Quiénes somos”, “Contacto” y otras similares. WordPress es multi-usuario, es decir, pueden acceder al área de administración varios usuarios aunque, dependiendo del perfil que tengan asignado, podrán acceder solamente a las secciones para las que dispongan de permisos. Desde la versión 3.0 WordPress es también multi-sitio. Esto quiere decir que es posible administrar varios sitios web desde una sola área de administración.
2.1 GNU General Public License Otra de las razones del crecimiento y la difusión de WordPress, además de que es completamente gratuito, es que se distribuye bajo licencia GNU General Public License (GPL), la licencia más ampliamente utilizada por los desarrolladores de código abierto. La elección de esta licencia no sólo tiene implicaciones prácticas, sino también ideológicas. El código abierto o “software libre” otorga la libertad de modificar o redistribuir el código fuente bajo ciertas condiciones. GPL es una licencia copyleft, lo que significa que cualquier trabajo que se derive de la obra original tendrá la obligación legal de distribuirse a su vez bajo la misma licencia. Esto es una forma de garantizar a los desarrolladores de software que su trabajo no será aprovechado por terceros que restrinjan esas libertades a los usuarios. Por ejemplo, la licencia permite que los desarrolladores puedan cobrar, o no, por un trabajo derivado de un código GPL siempre que lo distribuyan abierto y que permitan a su vez a otros desarrolladores utilizar y ampliar su trabajo.
17
Aula Mentor
WordPress mismo es producto de un trabajo anterior, b2/cafelog, que precisamente fue elegido porque su licencia permitía su modificación y redistribución, en detrimento de TextPattern, que era la primera opción de Matt Mullenweg pero que fue descartado por distribuirse bajo un tipo de licencia más restrictiva. Las implicaciones de optar por una licencia como GPL van mucho más allá del mero trámite legal porque, en el caso de WordPress, permitió que un gran número de excelentes desarrolladores de todo el mundo contribuyera libremente a la ampliación y mejora de su funcionalidad. Este trabajo comunitario continúa en la actualidad, cualquiera puede contribuir al desarrollo de WordPress en cualquier área: núcleo, interfaz de usuario, plugins, temas, soporte, documentación, etc… Para saber más sobre GNU General Public License: http://es.wikipedia.org/wiki/GNU_General_Public_License
2.2 Apache, PHP y MySQL Cuando navegamos normalmente por Internet, nuestro navegador envía un mensaje a un servidor web, por ejemplo Apache, en el que se encuentra alojada la página que hemos requerido. El servidor devuelve la página solicitada como un conjunto de datos y estos datos son interpretados por nuestro navegador para mostrarnos la página que queremos consultar.
18
Cuando la página que pedimos es un documento PHP, Apache necesita de un módulo PHP para interpretarla. PHP fue desarrollado originalmente para crear webs dinámicas, se podía incorporar directamente al documento HTML y, aunque no tiene licencia GPL, también es software libre y gratuito. Los contenidos de las páginas dinámicas se almacenan muy a menudo en una base de datos. Los documentos PHP suelen conectarse a la base de datos para buscar la información solicitada y mostrarla en el navegador. MySQL es una base de datos extremadamente popular en aplicaciones web. WordPress, al igual que su precursor b2/cafelog, utiliza PHP como lenguaje de programación server-side y MySQL como base de datos y recomienda Apache como servidor web. Más adelante veremos que debemos conocer las versiones de PHP y MySQL que requiere nuestra versión de WordPress para poder instalarlo correctamente.
2.3 La comunidad de WordPress Existen dos tipos de WordPress que necesitamos saber diferenciar. Por un lado, existe la opción de crear un blog mediante un servicio que incluye el alojamiento y para el que el usuario no necesita conocer ningún detalle técnico. Se trata básicamente de registrarse en una web y comenzar a publicar. A este tipo de herramienta se accede a través de wordpress.com. Esta sería la dirección de su versión en español: http://es.wordpress.com/ Por otro lado, existe la opción primitiva de descargar el software, en la que el usuario se tiene que hacer cargo del alojamiento, instalación, configuración y mantenimiento. Si bien esta solución requiere una implicación mayor por nuestra parte, las ventajas de su elección
Módulo 1. U0 Conociendo WordPress
son ostensibles y permite el máximo aprovechamiento de la versatilidad de WordPress. Esta es, obviamente, la herramienta que vamos a estudiar en este curso. Se accede a ella a través de wordpress.org. Hay gran cantidad de documentación disponible para quienes nos lanzamos a la aventura de crear nuestro sitio web con WordPress. Esta documentación, así como el código mismo de WordPress, ha sido creado por y para su comunidad de usuarios. Es una gran idea formar parte de la comunidad, tanto para aprender como para contribuir, aunque buena parte de los recursos oficiales están en inglés. A continuación, vamos a enumerar algunos de los principales enlaces oficiales en español a estos recursos: Página principal de WordPress [ES]: http://es.wordpress.org/ Códex [ES] http://codex.wordpress.org/es:Main_Page Foro de soporte de WordPress [ES]: http://es.forums.wordpress.org/
19
Aula Mentor
Unidad 1. Instalación de WordPress
Esta parte del curso puede resultar un poco confusa para los alumnos sin experiencia en la creación de páginas web. Si ese es el caso, aconsejamos seguir punto por punto las instrucciones de instalación y dejar para más adelante la tarea de comprenderlo todo en profundidad. En realidad, la instalación es mucho más sencilla de lo que pueda parecer a simple vista y pronto la dominaremos sin problemas.
1. Instalación en un servidor local La manera más cómoda de configurar WordPress es instalando una copia en un servidor local, es decir, en nuestro ordenador. Una vez correctamente configurada y añadidos los contenidos, podemos subir nuestro sitio web a Internet mediante un programa de transmisión de archivos por FTP. 20
No es habitual que nuestros ordenadores personales tengan instalado por defecto un servidor web, pero afortunadamente existen paquetes gratuitos que instalan en pocos minutos un entorno adecuado para WordPress y otras aplicaciones web. El entorno de instalación de WordPress consiste en un servidor web Apache con PHP y MySQL. Como ya hemos visto, el módulo PHP se utiliza para la creación de páginas dinámicas y MySQL es una base de datos de uso muy frecuente en aplicaciones web. Los paquetes que vamos a utilizar en este curso son WAMP (Windows, Apache, MySQL y PHP/ Perl/Python) para los usuarios de Windows y MAMP (Macintosh, Apache, MySQL y PHP/Perl/ Python) para los de Mac OS. Existen también paquetes de instalación para Linux llamados LAMP (Linux, Apache, MySQL y PHP/Perl/Python). Así, vamos a llevar a cabo la instalación en dos pasos: 1. Instalar WAMP o MAMP dependiendo de nuestro sistema operativo: Windows (Unidad 1, capítulo 1.1) o Mac OS (Unidad 1, capítulo 1.2). 2. Instalar WordPress propiamente dicho (Unidad 1, capítulo 1.3). El primer paso sólo será necesario la primera vez que instalemos WordPress. Las siguientes veces que queramos instalarlo en el mismo ordenador bastará con seguir el segundo paso.
Módulo 1. U1 Instalación de WordPress
1.1 Instalación de WAMP en Windows paso a paso Los usuarios de Mac pueden omitir este capítulo y pasar directamente al 1.2. Importante: Existe un requisito previo a la instalación de WampServer. Es preciso instalar antes Visual C++ 2010 SP1 Redistributable Package. (ver Anexo 1.1 al final del manual) Una vez instalado Visual C++ 2010, debemos elegir qué versión de WampServer descargar dependiendo de si nuestro procesador es de 32 ó 64 bits o de las versiones de PHP, MySQL y Apache que queremos instalar que, normalmente, serán las más recientes. Para ello debemos ir a la siguiente dirección: http://www.wampserver.com/en/#download
21
A la hora de redactar este manual, las versiones disponibles eran las que se van a mostrar a continuación. Si vemos que las de la web oficial son más recientes, tendremos que descargar la que más se ajuste a nuestras circunstancias. Para 32 bits: WampServer (32 Bits & PHP 5.4) 2.4: http://sourceforge.net/projects/wampserver/files/WampServer%202/Wampserver%202.4/ Wampserver2.4-x86.exe/download WampServer (32 Bits & PHP 5.3) 2.2E: http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.2/ wampserver2.2e/wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-32b.exe/download
Aula Mentor
Para 64 bits: WampServer (64 Bits & PHP 5.4) 2.4: http://sourceforge.net/projects/wampserver/files/WampServer%202/Wampserver%202.4/ Wampserver2.4-x64.exe/download WampServer (64 Bits & PHP 5.3) 2.2E: http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.2/ wampserver2.2e/wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-x64.exe/download WampServer (64 Bits & APACHE 2.4) 2.2E: http://sourceforge.net/projects/wampserver/files/WampServer%202/WampServer%202.2/ wampserver2.2e/wampserver2.2e-php5.4.3-httpd-2.4.2-mysql5.5.24-x64.exe/download En nuestra explicación paso a paso vamos a instalar WampServer en un sistema operativo Windows 7 de 64 bits. Para este sistema escogemos la versión “WampServer (64 Bits & PHP 5.4) 2.4”, que instala la versión más reciente de PHP, la 5.4. Naturalmente, el alumno deberá adaptar las instrucciones a continuación a su sistema operativo y su tipo de procesador. Instalación de WampServer 1. Instalamos Visual C++ 2010 SP1 Redistributable Package siguiendo las instrucciones del Anexo 1.1 al final del manual. 22
2. Hacemos clic en la versión que queremos descargar, en este caso WampServer (64 bits & PHP 5.4) 2.4. Como ya hemos dicho antes, el alumno deberá descargar la que le corresponda.
Módulo 1. U1 Instalación de WordPress
3. Se abre un cuadro de diálogo que nos advierte de varias cosas: - Que debemos instalar antes Visual C++ 2010, cosa que ya hemos hecho. - Que si tenemos instalado en nuestro ordenador WAMP5, debemos desinstalarlo antes de proceder con la instalación de WampServer. - Que no debemos mezclar componentes de versiones anteriores de WampServer con la versión actual. Si tenemos versiones anteriores instaladas, es recomendable desinstalarlas completamente antes de proceder a la nueva instalación. Si cumplimos todas las recomendaciones podemos descargar el software en el enlace “you can download it directly”
4. El enlace nos redirige a una dirección de sourceforge.net en la que la descarga comenzará tras varios segundos. 23
Aula Mentor
5. En la ventana emergente hacemos clic en “Guardar archivo” para descargarlo a nuestro ordenador.
6. Al abrir el ejecutable que acabamos de descargar se nos muestra el asistente de instalación de WampServer. Debemos cerrar el resto de aplicaciones que tengamos abiertas antes de continuar. Una vez listos, pulsamos “Next >”.
24
Módulo 1. U1 Instalación de WordPress
7. Leemos y aceptamos la licencia seleccionando “I accept the agreement” y pulsamos “Next >”.
8. A continuación debemos seleccionar el directorio de nuestro disco duro donde instalar el servidor WAMP. En este caso vamos a dejar la ubicación por defecto “c:\wamp” y a pulsar “Next >”.
25
Aula Mentor
9. La siguiente ventana nos permite crear un icono de la aplicación en la barra de acceso rápido, “Create a Quick Launch icon”, y un icono en el escritorio, “Create a Desktop icon”. En este caso hemos elegido la segunda opción, aunque podemos seleccionar lo que más nos convenga. Luego pulsamos “Next >”.
26 10. La siguiente pantalla muestra las opciones seleccionadas para pedirnos confirmación. Si queremos cambiar algo pulsamos el botón “< Back” y si todo es correcto pulsamos “Install”.
Módulo 1. U1 Instalación de WordPress
11. Comienza la instalación, esperamos hasta que termine.
27 12. A continuación, si no se ha encontrado ningún problema, el instalador nos pide que elijamos nuestro navegador por defecto. Si tenemos dudas, no tocamos nada y simplemente hacemos clic en “Abrir”.
Aula Mentor
13. Esperamos mientras finaliza la instalación.
28 14. En la siguiente pantalla se nos permite especificar un servidor SMTP y una dirección de correo para configurar la función mail() de PHP. De momento dejamos los valores por defecto, ya que podemos configurarlo más adelante si lo necesitamos. Pulsamos Next >”.
Módulo 1. U1 Instalación de WordPress
15. Por último, si queremos abrir WampServer al finalizar, seleccionamos “Launch WampServer 2 now” y pulsamos “Finish”.
29 16. Observamos que aparece un nuevo icono de color verde en la barra de tareas. Si el icono es de color naranja significa que ha existido algún problema con la instalación y no podremos usar WampServer, así que probaremos a desinstalarlo y a instalarlo de nuevo siguiendo con cuidado todos los pasos de esta guía de instalación.
Aula Mentor
17. Si el icono es de color rojo significa que los servicios no se han iniciado. Podemos iniciarlos seleccionando “Start All Services” en el menú contextual que aparece al hacer clic en el icono.
18. Si el icono es de color verde, significa que WampServer se ha instalado correctamente, así que procedemos a configurarlo en nuestro idioma. Para ello hacemos clic en el icono con el botón derecho del ratón y seleccionamos el idioma de entre la lista que aparece en el menú “Language”. 30
Módulo 1. U1 Instalación de WordPress
19. Vamos a comprobar que en efecto ya tenemos en marcha nuestro servidor web local. Para ello escribimos “localhost” en la barra de direcciones de nuestro navegador. Si todo ha ido bien, la ventana de nuestro navegador debería mostrar una página referente a la configuración de nuestro WampServer, tal como se muestra en la siguiente imagen.
31 20. Ahora describiremos dónde añadir nuestros archivos WordPress en el servidor WAMP. Por defecto el servidor utiliza el directorio “c:\wamp\www” que contiene los archivos index.php y testmysql.php. Vamos a dejar esos archivos tal y como están y a crear un nuevo directorio. Para ello hacemos clic sobre el icono verde de WampServer en nuestra barra de tareas, y seleccionamos la opción “Directorio www”.
Aula Mentor
21. Se nos abrirá el explorador de Windows en el directorio “c:\wamp\www”. Creamos una nueva carpeta y la nombramos, por ejemplo, “wordpress”. Esa será la carpeta donde copiaremos los archivos WordPress más adelante.
32
22. Vamos a probar que funciona correctamente: abrimos un nuevo archivo con Bloc de notas, escribimos en él la frase “Hola Mundo!”, lo guardamos con el nombre “index.html” y lo introducimos dentro de la carpeta “c:\wamp\www\wordpress”. Ahora abrimos una nueva ventana en nuestro navegador e introducimos la dirección http://localhost/wordpress/. Si hemos hecho todo correctamente, en el navegador deberá leerse “Hola Mundo!”. 23. Una vez hecha esta comprobación vamos a eliminar el archivo “index.html” que acabamos de crear enviándolo a la papelera de reciclaje. 24. Ahora vamos a conocer la herramienta para administrar nuestra nueva base de datos MySQL. Se llama phpMyAdmin y podemos acceder a ella haciendo clic en el link “phpmyadmin” que aparece en la página de inicio que hemos cargado anteriormente en “http://localhost”.
Módulo 1. U1 Instalación de WordPress
25. Los datos de acceso por defecto a phpMyAdmin son “root” como usuario y nada como contraseña. Es recomendable que guardemos estos datos de acceso en nuestro documento de claves para poder recordarlos más adelante.
33 26. Esta sería la página principal para administrar nuestra base de datos. Podemos configurar el idioma de esta herramienta en el menú desplegable correspondiente. Volveremos a ella un poco más adelante.
Aula Mentor
1.2 Instalación de MAMP en Mac OS paso a paso Los usuarios de Windows pueden omitir este capítulo y pasar directamente al 1.3. 1. Vamos a la siguiente dirección: http://www.mamp.info/ y descargamos la versión gratuita de MAMP pulsando en el botón “Download now” de la izquierda, el del elefante gris.��������� Hay disponible una versión Pro, pero no va a ser necesaria para el desarrollo del curso. El instalador ocupa unos 140 Mb, así que la descarga puede llevar unos minutos dependiendo de la conexión que tengamos.
34
2. Descomprimimos el archivo zip que hemos descargado y hacemos doble clic en el archivo resultante con extensión .pkg. 3. Se abre el instalador de MAMP. Hacemos clic en “Continuar”.
Módulo 1. U1 Instalación de WordPress
4. La siguiente ventana nos informa de que se va a llevar a cabo la instalación tanto de la versión gratuita como la de pago y nos pide que no borremos ni renombremos MAMP. Hacemos también clic en “Continuar”.
5. Leemos y aceptamos las condiciones del contrato de licencia haciendo clic en “Continuar” y luego en “Acepto”.
35
Aula Mentor
6. Seleccionamos un disco de destino y el usuario en el que queremos instalar la aplicación. Por defecto se instalará para todos los usuarios del ordenador. Pulsamos “Continuar”.
36
7. MAMP debe instalarse en la carpeta “Aplicaciones” para funcionar correctamente, así que es mejor no cambiar la ubicación de la instalación. Pulsamos “Instalar”.
Módulo 1. U1 Instalación de WordPress
8. Esperamos mientras la aplicación se instala.
9. Si todo va bien la aplicación se habrá instalado correctamente. Hacemos clic en “Cerrar”. 37
Aula Mentor
1.2.1 Configuración de MAMP 1. Abrimos el programa, que se ha copiado en “Aplicaciones” dentro de una carpeta llamada “MAMP”. Nos aparecerá una ventana de advertencia que nos dice que se ha instalado también una versión de pago llamada MAMP PRO. No nos interesa, así que deseleccionamos “Comprobar MAMP PRO al arrancar MAMP” y pulsamos en el botón “Arrancar MAMP”.
38
2. En el panel de configuración vemos, por las luces rojas, que aún no se han activado los servidores Apache y MySQL. Antes de activarlos pulsamos en el botón “Preferencias…”.
Módulo 1. U1 Instalación de WordPress
3. La pestaña “Iniciar/Detener” debe configurarse como se muestra en la imagen. Seleccionamos “Iniciar Servidores al arrancar MAMP” para no tener que hacerlo manualmente cada vez que abramos el programa.
39 4. En la pestaña “Puertos” introducimos los puertos por defecto de Apache (80) y MySQL (3306) pulsando en el botón a tal efecto. Para poder llevar a cabo los cambios de puerto debemos introducir nuestra contraseña de usuario.
Aula Mentor
5. El estatus en verde indica que los dos servidores se han activado correctamente.
40
6. En nuestro navegador se abre una ventana mostrándonos unos datos que vamos a necesitar más adelante para instalar WordPress, así que es buena idea anotarlos en nuestro documento de claves para tenerlos a mano cuando los necesitemos. Estos datos son: Host, Port, User y Password (Servidor, Puerto, Usuario y Contraseña).
Módulo 1. U1 Instalación de WordPress
7. Ahora vamos a conocer la herramienta para administrar nuestra nueva base de datos MySQL. Se llama phpMyAdmin y podemos acceder a ella haciendo clic en el link “phpMyAdmin” que aparece en esta misma página.
8. Si nos piden usuario y contraseña introduciremos como usuario “root” y como contraseña también “root”. La página a la que accedemos es donde vamos a poder administrar nuestra base de datos. Podemos configurar el idioma de la herramienta en el menú desplegable correspondiente. Volveremos a phpMyAdmin un poco más adelante.
41
Y ya está, ya tenemos instalado nuestro servidor web. Para mostrar nuestras páginas HTML y PHP en un navegador deberemos introducirlas dentro de la carpeta “Aplicaciones/MAMP/ htdocs”.
Aula Mentor
Vamos a probar que funciona correctamente: 1. Abrimos un nuevo archivo con TextEdit y escribimos en él la frase “Hola Mundo!”.
2. Lo guardamos con el nombre “index.html”, seleccionando en el desplegable como formato de archivo “Página web (.html)”, dentro de la carpeta “Aplicaciones/MAMP/htdocs”.
42
Módulo 1. U1 Instalación de WordPress
3. Ahora abrimos una nueva ventana en nuestro navegador e introducimos la dirección http:// localhost. Si hemos hecho todo correctamente, en el navegador deberá leerse “Hola Mundo!”
Por último, para separar nuestro proyecto WordPress de cualquier otro proyecto con el que queramos experimentar en nuestro servidor, vamos a crear una carpeta específica dentro de “htdocs” llamada “wordpress” en la que, más adelante, instalaremos nuestra web.
43
Aula Mentor
1.3 Instalación de WordPress Una vez configurado un entorno adecuado para nuestro WordPress podemos proceder a su instalación. Pero antes debemos comprender, aunque sea a grandes rasgos, un par de conceptos básicos: - WordPress almacena la mayor parte del contenido de la web y muchas de las variables básicas para su funcionamiento en una base de datos. - Por otra parte están los documentos de programación y algunos otros contenidos, principalmente imágenes y archivos multimedia, que se almacenan bien en una carpeta de nuestro servidor local, si vamos a trabajar en nuestro ordenador, o bien en una carpeta de un servidor remoto, si vamos a colgar el sitio web en Internet.
44
1.3.1 Creación de una base de datos Podemos crear la base de datos que va a utilizar nuestro WordPress en el administrador phpMyAdmin de nuestro servidor web. Si tenemos dudas sobre cómo acceder a él, los usuarios de Windows encontrarán una explicación en el capítulo 1.1 punto 24 y los usuarios de Mac en el capítulo 1.2.1 punto 7, ambos en la Unidad 1. 1. En la página principal de phpMyAdmin hacemos clic en la pestaña “Bases de datos”.
Módulo 1. U1 Instalación de WordPress
2. En el formulario “Crear base de datos” introducir como nombre “wordpress_db”, como cotejamiento “utf8_general_ci” y pulsar “Crear”.
3. Si todo ha ido bien, aparecerá un mensaje de éxito que nos indicará que la base de datos se ha creado correctamente.
45
Como vemos, la creación de una base de datos no reviste especial complejidad, aunque vamos a hacer un par de aclaraciones. Hemos elegido como nombre “wordpress_db” por razones prácticas, pero en realidad podemos elegir el nombre que queramos, generalmente uno que sea un poco más descriptivo del proyecto que vamos a llevar a cabo. Esto es particularmente útil cuando en un mismo servidor necesitamos crear varias bases de datos diferentes para distintos proyectos. Existen, no obstante, algunas limitaciones en la elección de un nombre, que son las siguientes: - Sólo se permiten caracteres alfanuméricos del juego de caracteres por defecto del servidor web. - No está permitido el punto “.” ni los separadores “/” o “\”. - No está permitido terminar el nombre con un espacio “ ”. - Los nombres pueden empezar por cualquier carácter permitido, incluido un número, pero no está permitido que consten sólo de números. - La longitud del nombre no debe exceder los 64 caracteres.
Aula Mentor
En realidad, aunque no sea más que por una cuestión de estilo, es buena idea ceñirse a caracteres alfanuméricos más el guión bajo “_”, no utilizar espacios, tildes ni caracteres como la “ñ” y utilizar sólo minúsculas. El cotejamiento de la base de datos, que hemos seleccionado en el menú desplegable anterior, consiste en una serie de reglas que permiten a la base de datos trabajar correctamente con un juego de caracteres determinado. Cada lenguaje tiene su propio juego de caracteres, por ejemplo los caracteres chinos son diferentes de los árabes, los ingleses o los españoles. El español, como ya sabemos, tiene también algunas particularidades con respecto a otros idiomas, como por ejemplo la letra “ñ” o las vocales con tilde. El juego de caracteres que se usa por defecto en WordPress es UTF8. Es, por así decirlo, un juego de caracteres universal, válido para cualquier idioma, que nos va a permitir usar en nuestro sitio web, si lo deseamos, textos en otros lenguajes. El cotejamiento “utf8_general_ci” sería pues multilingüe. El sufijo final “ci” significa Case Insensitive, es decir independiente de mayúsculas o minúsculas. Esto significa que si en nuestra futura web hacemos una búsqueda en nuestra base de datos de la palabra “casa”, vamos a encontrar indistintamente “casa”, “CASA” o “Casa”.
1.3.2 Descarga de la última versión de WordPress
46
Por norma general, es buena idea descargar siempre la última versión estable de WordPress, que podemos encontrar aquí: http://wordpress.org/download/ En el momento de escribir este curso, la última versión estable de WordPress era la 4.0, que es la que vamos a instalar en este manual. Seguramente estas instrucciones de instalación serán válidas también para versiones posteriores, así que no dudes en instalarte siempre la última versión disponible, sea cual sea.
Módulo 1. U1 Instalación de WordPress
1. Hacemos clic en “Descargar WordPress”.
2. Descomprimimos el archivo descargado “wordpress-4.0.zip” y copiamos el contenido a la carpeta que le hemos destinado en nuestro servidor web. Los usuarios de Windows en “c:\ wamp\www\wordpress” y los usuarios de Mac en “Aplicaciones/MAMP/htdocs/wordpress”. 47
Aula Mentor
1.3.3 Configuración de wp-config.php La instalación de WordPress es prácticamente automática, pero antes de llevarla a cabo es preciso que editemos un poco el principal archivo de configuración, “wp-config.php”. Este archivo no existe en la copia que nos descargamos de WordPress, tenemos que crearlo a partir del archivo de ejemplo “wp-config-sample.php”. Importante: Ni este ni ningún otro archivo de WordPress debe nunca editarse con Microsoft Word ni otros procesadores de texto similares. Los usuarios de Windows deben usar Notepad++ (ver Anexo 1.2) o similar y los usuarios de Mac deben usar TextWrangler (ver Anexo 2.1) o similar. Si no los tenemos instalados debemos hacerlo antes de continuar. Y ahora, vamos a configurar la instalación paso a paso: 1. Duplicamos el archivo “wp-config-sample.php” y le cambiamos el nombre a “wp-config.php”.
48 2. Abrimos el recién renombrado “wp-config.php” con un programa editor de texto simple, como Notepad++ para Windows o TextWrangler para Mac. Para ello seleccionamos el archivo y con el botón derecho del ratón (o Crt-Clic para usuarios sin botón derecho) seleccionamos la opción correspondiente según se muestra en las imágenes.
Módulo 1. U1 Instalación de WordPress
3. Ahora hay una serie de variables que tenemos que modificar dentro del documento: - El nombre de la base de datos será “wordpress_db” - El nombre de usuario de MySQL será “root” - La contraseña de MySQL será “root” si eres usuario de Mac y nada si eres usuario de Windows. - El host de MySQL será “localhost” Así deberían quedar las variables para los usuarios de Windows:
Y así deberían quedar para los de Mac:
49
4. Con esto sería suficiente para llevar a cabo la instalación pero antes, por motivos de seguridad, vamos a configurar también las claves únicas de autentificación. Para ello vamos a la URL https://api.wordpress.org/secret-key/1.1/salt/ y copiamos el texto que se nos muestra y que será parecido a este:
Aula Mentor
5. A continuación lo pegamos en nuestro archivo wp-config.php sustituyendo al texto que comienza con “define(‘AUTH_KEY” y termina con “define(‘NONCE_SALT’, ‘pon aquí tu frase aleatoria’);”. Es decir, hay que sustituir esto:
Por algo parecido a esto:
50 Así quedaría para los usuarios de Windows:
Existen otras opciones de configuración que podremos ir conociendo poco a poco cuando nos vayamos convirtiendo en usuarios más avanzados, pero ahora vamos a pasar por fin al asistente de instalación de WordPress.
Módulo 1. U1 Instalación de WordPress
1.3.4 Asistente de instalación de WordPress Por fin llegamos al famoso proceso de instalación de WordPress de cinco minutos. Vamos paso a paso: 1. Abrimos nuestro navegador y cargamos la URL http://localhost/wordpress/ 2. Aparecerá la página de instalación (http://localhost/wordpress/wp-admin/install.php) en la que podemos seleccionar el idioma de la aplicación. Pulsamos «Continuar».
51
2. A continuación nos piden que rellenemos una serie de datos. No es necesario perder demasiado tiempo decidiéndolos porque de todos modos se pueden cambiar más adelante.
Aula Mentor
3. Rellenamos los datos siguiendo las instrucciones y pulsamos “Instalar WordPress”. Como usuario, es mejor elegir un nombre distinto de «admin». Es importante recordar el usuario y la contraseña, porque los vamos a necesitar muy a menudo. Por lo tanto, vamos a anotarlos en nuestro documento de claves.
52
4. Si no hay ningún error recibiremos un mensaje de éxito. Pulsamos “Acceder”.
Módulo 1. U1 Instalación de WordPress
5. Introducimos el usuario y contraseña que acabamos de elegir y pulsamos “Acceder”.
6. ¡Lo hicimos! Por fin hemos conseguido instalar nuestro primer WordPress. En la ventana del navegador se nos muestra el área de administración, que conoceremos en profundidad más adelante.
53
Aula Mentor
7. Si queremos visitar nuestro sitio web podemos hacerlo a través del enlace “Visitar sitio”, tal y como aparece en la imagen.
8. Y este es el aspecto por defecto de nuestro sitio, que cambiará según definamos su diseño, su funcionalidad y añadamos contenido.
54
Módulo 1. U1 Instalación de WordPress
2. Instalación en un servidor remoto Para que nuestra web sea accesible en Internet es preciso instalarla en un servidor web remoto. Los proveedores de hosting ofrecen diferentes soluciones para el alojamiento de nuestras webs, desde servicios compartidos muy económicos hasta servidores dedicados con una configuración a nuestra medida. Existen incluso servicios de hosting gratuito, aunque la calidad del servicio o la velocidad de la carga no suelen ser buenos y en algunos se requiere la inserción de publicidad a cambio del alojamiento. Es elección del alumno el hosting que desee utilizar, que dependerá en gran medida de su proyecto. Si la idea del alumno es aprender WordPress utilizando un proyecto ficticio, puede hacer las prácticas en un hosting gratuito, pero si el objetivo del alumno es la publicación de una página web real, es posible contratar alojamiento con garantías de calidad a precios razonables.
2.1 Requerimientos técnicos de WordPress Los requerimentos técnicos de WordPress pueden variar dependiendo de la versión que vayamos a instalar, por eso antes de contratar un servicio de hosting es necesario informarnos de si cumple con los requisitos necesarios. Para poder instalar la versión con la que estamos escribiendo este manual, la 4.0, es necesario lo siguiente: 55 - PHP versión 5.2.4 o superior - MySQL versión 5.0 o superior Como servidor web, WordPress recomienda Apache, aunque sirve cualquiera que soporte PHP y MySQL. También es importante asegurarse de que el módulo “mod_rewrite” de Apache está activo. Este módulo sirve para que podamos usar permalinks en nuestra web. Si en el momento de hacer el curso existe una versión de WordPress posterior a la 4.0, el alumno deberá comprobar si los requerimientos de instalación han cambiado en la siguiente URL: http:// wordpress.org/about/requirements/ En esa misma página se publica también el texto del email que podemos enviar a la empresa de hosting antes de contratar alojamiento para asegurarnos de que el plan que hemos elegido cumple con los requisitos mínimos. Hemos traducido aquí este texto para que el alumno pueda utilizarlo si lo desea: Estoy interesado en instalar WordPress y quisiera saber si su servidor soporta lo siguiente: - PHP 5.2.4 o superior - MySQL 5.0 o superior - El módulo de Apache mod_rewrite ¡Gracias!
Aula Mentor
2.2 Encontrar un hosting adecuado Antes de elegir hosting, es buena idea consultar varias empresas y comparar prestaciones y precio. Podemos encontrar empresas de hosting buscando en Internet las palabras clave “hosting web”, “alojamiento web”, etcétera. Generalmente, estas empresas ofrecen varios planes de alojamiento dentro de su oferta de hosting web. Hay que estar atentos porque a veces los planes más económicos no soportan PHP y MySQL, así que tenemos que optar por un plan superior. Muchas veces se nos da a elegir entre servidores Linux o Windows. Para instalar WordPress es preferible elegir Linux. Para encontrar el hosting que más se ajuste a nuestras necesidades hay que tener en cuenta una serie de factores: Soporta PHP Como ya hemos visto, tenemos que comprobar que el plan que elijamos soporta la versión de PHP que se requiere. Soporta MySQL También tenemos que comprobar si soporta la versión adecuada de MySQL. Un dato a tener en cuenta es también el número de bases de datos que se ofrecen, aunque para instalar una copia de WordPress una base de datos es suficiente. 56
Precio de alta En muchas el alta es gratuita, pero algunas empresas la cobran. Dominio gratuito incluido El dominio, comúnmente hablando, es el nombre que identifica al sitio web, por ejemplo “miweb. com”, “miweb.net”, “miweb.es”, etcétera. Generalmente las empresas de hosting ofrecen, junto con el alojamiento de la web, la gestión de la compra de un dominio por un precio adicional, aunque algunas empresas incluyen la compra del dominio dentro del precio de hosting. Espacio en disco Es el espacio disponible para subir archivos a nuestro servidor. Nuestros requerimientos de espacio en disco varían mucho dependiendo del tipo de proyecto que vamos a llevar a cabo. Si nuestra web alojará mayoritariamente textos no tendremos problema, pero si vamos a alojar gran cantidad de imágenes o vídeos, el espacio en disco será un dato muy a tener en cuenta. Transferencia Las empresas de hosting, generalmente, ponen un límite en cada plan a la cantidad de datos que se transfieren mensualmente. La transferencia está relacionada con la naturaleza de los datos que publicamos, puesto que consumiremos más cuanto mayores sean los archivos que debamos transferir y publicar, como por ejemplo vídeos, audios o imágenes grandes. Y también está relacionada con el tráfico de nuestra web. Una web poco transitada apenas consumirá cuota de transferencia, pero para las webs con muchas visitas, la cuota de transferencia que ofrece su servicio de hosting es un factor importante. También hay que anticipar qué ocurre cuando se supera la cuota de transferencia mensual. Generalmente las empresas de hosting fijan un precio por cada gigabyte por encima del contrato.
Módulo 1. U1 Instalación de WordPress
Cuentas de correo Otro factor importante es el número de cuentas de correo que podemos crear con nuestro dominio, por ejemplo “[email protected]”. También se suelen ofrecer servicios de autorrespondedores y de cuentas redirigidas. Algunas empresas incluyen en su tarifa filtros antiSpam, antivirus o antiPhising, pero otras cobran estos servicios aparte. Otros factores Hemos enumerado los factores más importantes, pero existen otros muchos que deberemos valorar dependiendo de las necesidades concretas de cada proyecto. En la mayoría de empresas de hosting existen tablas comparativas de sus distintos planes de alojamiento con un listado de todas sus características. Es buena idea visitar estas páginas y estudiarlas con cuidado.
2.3 Hosting gratuito Hay empresas con servicio de hosting gratuito que permiten alojar WordPress. Algunas de ellas lo hacen a cambio de insertar su publicidad en nuestra web, otras lo ofrecen como un modo de captar clientes que tal vez más adelante contratarán un plan de pago. Algunas permiten incluso que utilicemos nuestro propio nombre de dominio. No vamos a encontrar demasiada calidad de servicio en alojamiento gratuito, generalmente la web se cargará con lentitud y no tendremos servicio de soporte técnico, pero podemos usarlo para hacer nuestras pruebas. A continuación detallamos una lista de webs entre las que podemos elegir la que más nos convenga: http://www.host-ed.me/members/cart.php http://www.heliohost.org/home/signup http://www.x10hosting.com http://www.imbahost.com/webhosting.html http://www.freehostingcloud.com http://www.hostwp.es [En español]. En esta web WordPress está preinstalado. No servirá para nuestras prácticas, ya que debemos aprender a instalarlo nosotros mismos, pero podemos guardar la referencia para otra ocasión. Podemos consultar una lista completa de hosting gratuito en esta dirección: http://www.free-webhosts.com/webhosting-01.php
2.4 Transferencia de archivos por FTP Para poder subir nuestros archivos web a un servidor remoto es necesario, la mayoría de los casos, hacerlo a través de un software de transferencia de archivos por FTP. En caso de no disponer de ese software, hay muchos programas gratuitos que podemos descargar para transferir archivos, por ejemplo Cyberduck, que está disponible para Windows y Mac en esta URL: http://cyberduck.ch/. Es buena idea bajar ahora el programa e instalarlo porque lo usaremos muy pronto. Los usuarios de Windows encontrarán instrucciones para hacerlo en el Anexo 1.3 y los de Mac en el Anexo 2.2 en las páginas finales de este manual.
57
Aula Mentor
2.5 Instalación de WordPress en un servidor remoto paso a paso A lo largo del curso vamos a trabajar tanto con nuestra copia local de WordPress como con la que instalaremos en un servidor remoto. Por eso, vamos a aprender a hacerlo siguiendo paso a paso el proceso de instalación. Los pasos a seguir pueden ser diferentes dependiendo del servidor que elijamos, pero a grandes rasgos consisten en: 1. Contratar una cuenta en una empresa de hosting. 2. Obtener los datos de acceso al área de administración del hosting. 3. Obtener los datos de acceso FTP. 4. Crear una base de datos MySQL. A veces es necesario crear también un usuario MySQL y otorgar a ese usuario los permisos para administrarla. 5. Configurar el archivo wp-config.php de WordPress. 6. Subir WordPress al servidor remoto mediante un programa de transferencia FTP. 7. Proceder a la instalación automática de WordPress. Si lo deseamos, podemos seguir a continuación una explicación paso a paso de cómo hacerlo en un servidor gratuito. Sin embargo, el área de administración de otros proveedores de hosting puede ser muy diferente y, desafortunadamente, en este curso no podemos dar una explicación pormenorizada de los pasos a seguir en los diferentes servidores, por lo que la gestión del alojamiento queda en manos del alumno. 58
Cuando este sea el caso, no debemos vacilar en solicitar asistencia al servicio de soporte técnico, pidiendo ayuda para encontrar los datos que buscamos o preguntándoles nuestras dudas. Debemos recordar que los datos que necesitaremos serán los siguientes: - Datos de acceso por FTP a nuestro espacio en el servidor (host, usuario y contraseña) - Datos de acceso a nuestra base de datos (host, nombre de la base de datos, usuario y contraseña) - Dónde gestionar nuestras bases de datos. Por ejemplo, mediante phpMyAdmin. - Dónde crear los usuarios de las bases de datos y cómo gestionar sus permisos. Una vez conozcamos todos los datos, no debemos olvidarnos de apuntar todo cuidadosamente en nuestro documento de claves.
Módulo 1. U1 Instalación de WordPress
2.5.1 Crear una cuenta en un servidor remoto Para nuestra explicación vamos a crear una cuenta en el servicio gratuito de host-ed.me. 1. Cargamos en nuestro navegador la URL http://www.host-ed.me/members/cart.php y pulsamos en el botón “Order Now” del bloque “Free Web Hosting Plan”
2. En la siguiente página, si lo deseamos, podemos cambiar el idioma de la página en el menú desplegable. Luego seleccionamos la opción “Quiero utilizar un sub-dominio gratis”, elegimos el nombre del sub-dominio que deseemos para nuestra web y pulsamos en “Hacer click para Continuar >>”.
59
Aula Mentor
3. En la página siguiente hacemos clic en “Añadir a carro”.
60
4. Ahora debemos introducir nuestros datos. Al elegir el método de pago, dejamos el valor por defecto porque al tratarse de un servicio gratuito no tendrá ningún efecto. No debemos olvidarnos de marcar nuestro acuerdo con los términos del servicio y por último pulsar “Pedido Completado”.
Módulo 1. U1 Instalación de WordPress
5. Para finalizar el proceso de pedido nos informan de que vamos a recibir un email de confirmación. Desde ahí podremos acceder directamente a nuestra área de cliente.
2.5.2 Configurar el servidor remoto 1. En el futuro, si deseamos acceder a nuestra área de cliente debemos ir a la dirección http://www. host-ed.me/members/clientarea.php, introducir nuestros datos de acceso y pulsar “Ingresar”.
61
Aula Mentor
2. Pero para seguir con el proceso de configuración de nuestro espacio web, debemos ir a “Mis productos y servicios”.
3. Identificamos nuestro producto contratado y pulsamos “Ver detalles”.
62
4. En los detalles del producto, debemos anotar el usuario y contraseña con el que podremos acceder a cPanel para configurar nuestro espacio web y después pulsar “Login to cPanel”.
Módulo 1. U1 Instalación de WordPress
5. En el formulario de login introducimos los datos que acabamos de anotar y pulsamos “Acceder”.
6. La página que aparece es el panel desde el que configuraremos nuestro hosting. Para empezar, podemos cambiar el idioma haciendo clic en “Change Language”.
63
Aula Mentor
7. En la página siguiente, seleccionamos el idioma preferido en el menú despegable y pulsamos “Cambiar”. Para volver al panel, pulsamos el enlace “← Hacia atrás”.
8. En primer lugar vamos a crear la base de datos que usaremos para WordPress. Para ello vamos al bloque “Bases de Datos” y pulsamos en “Asistente de MySQL”.
64
9. A continuación, tenemos que elegir un nombre para nuestra base de datos. En este caso sólo nos permiten utilizar caracteres alfanuméricos sin espacios, tildes ni caracteres como la “ñ”. No se admiten guiones ni ningún otro signo de puntuación. Para nuestras pruebas podemos usar “wordpressdb”.
Módulo 1. U1 Instalación de WordPress
10. En el paso 2 necesitamos crear un usuario para esa base de datos, así que elegimos un nombre, una contraseña y pulsamos “Crear Usuario”.
11. Por último, necesitamos asignar a nuestro usuario permisos para administrar nuestra base de datos. Lo hacemos seleccionando “Todos los privilegios” y pulsamos “Siguiente paso”.
65
12. En el paso 4 recibimos la confirmación de la creación de la base de datos. Ahora podemos volver al panel haciendo clic en “Regresar a Home”.
Aula Mentor
13. Una vez conocidos los datos de nuestra base de datos, descargamos WordPress como lo hemos hecho anteriormente para instalarlo en nuestro servidor local (ver capítulo 1.3.2 de esta unidad), cambiamos el nombre del archivo “wp-config-sample.php” a “wp-config.php” y lo editamos con los datos que acabamos de configurar: el nombre de la base de datos, el usuario de MySQL y la contraseña de MySQL (ver capítulo 1.3.3 de esta unidad). El host de MySQL es casi siempre “localhost”, pero en algunos servidores este nombre es específico y nos lo proporcionan en el panel de control junto con el resto de los datos.
66
14. Para conocer el servidor FTP al que debemos subir nuestros archivos vamos a la sección “Archivos” del panel y pulsamos en “Cuentas de FTP”.
15. En la sección “Cuentas de FTP especiales” hacemos clic en “Configurar Cliente FTP”.
Módulo 1. U1 Instalación de WordPress
16. En los datos que se despliegan podemos encontrar el Servidor FTP.
17. Ahora es el momento de subir los archivos de WordPress al servidor mediante un software de transmisión de archivos por FTP. Nosotros vamos a usar Cyberduck. Abrimos el programa y hacemos click en “Nueva conexión”.
67
18. Introducimos los datos de nuestra cuenta FTP, la dirección del servidor que acabamos de ver en el punto 16, y el nombre de usuario y la contraseña que son los que apuntamos en el punto 4. El puerto FTP por defecto es el 21 y rara vez deberemos cambiarlo. Pulsamos “Conectar”.
Aula Mentor
19. Una vez conectados, hacemos doble clic en la carpeta “www”.
68 20. Si lo deseamos podemos guardar esta conexión FTP en favoritos desplegando el menú superior “Favorito → Nuevo favorito”. En adelante podremos acceder a la cuenta FTP haciendo doble clic en el icono tal y como aparece en la imagen.
Módulo 1. U1 Instalación de WordPress
21. Para subir los archivos de WordPress, los arrastramos a la ventana de Cyberduck y los soltamos en cualquier área vacía.
69 22. Tendremos que esperar unos minutos hasta que los archivos terminen de subir.
Aula Mentor
23. Una vez terminada la transmisión de archivos pasamos a cargar en nuestro navegador la instalación automática de WordPress escribiendo la dirección de nuestra web, que hemos elegido en el punto 2 del capítulo 2.5.1. Elegimos el idioma e introducimos los datos tal y como hicimos en nuestro servidor local (ver capítulo 1.3.4 de esta unidad) y pulsamos “Instalar WordPress”.
70
24. Aparece un mensaje de éxito. Pulsamos “Acceder”.
Módulo 1. U1 Instalación de WordPress
25. Nos aparece el formulario de login de nuestra web WordPress, en el que introducimos los datos de acceso que acabamos de elegir.
71 26. Y por fin tenemos acceso a nuestra área de administración.
Aula Mentor
27. Podemos acceder a nuestro sitio web en nuestra nueva dirección.
72
Módulo 1. U2 Primeros pasos en WordPress
Unidad 2. Primeros pasos en WordPress
Es normal que la primera vez que instalamos WordPress tengamos muchas ganas de investigar y de probar cosas, esto es algo muy bueno que nos va a ayudar a entender más rápidamente cómo funciona y qué puede hacer por nosotros. Sin embargo, vamos a intentar contener nuestra impaciencia y nos vamos a tomar un tiempo para observar las cosas con calma.
1. La estructura de nuestra web Antes de nada, vamos a cargar la nueva web en nuestro servidor local (http://localhost/wordpress/) y vamos a estudiarla detenidamente intentando descubrir las partes que la conforman. No importa que el diseño de la página nos guste o no porque lo cambiaremos más adelante. Este diseño viene determinado por lo que llamamos un tema (en inglés theme). Un tema, como ya estudiaremos en el siguiente módulo, es una plantilla que define la apariencia del front-end de la web, es decir, de su parte pública. El tema que vemos ahora mismo en nuestra web se llama Twenty Fourteen y es el que viene instalado por defecto desde la versión 3.8 de WordPress. En Twenty Fourteen, la barra superior es lo que llamamos cabecera. La cabecera contiene el título que elegimos para nuestra web durante la instalación de WordPress y un subtítulo o descripción corta que por defecto es “Otro sitio realizado con WordPress” y que podremos editar en el área de administración. También contiene el menú principal de la web, aunque ahora sólo encontramos un enlace a la página estática “Página de ejemplo”. A la derecha del menú vemos un formulario de búsqueda que se despliega al hacer clic en el icono de la lupa con fondo verde.
Más abajo se muestra el contenido de la página principal que, por defecto, muestra las últimas entradas publicadas, aunque podemos configurar nuestra página para que muestre otras cosas, como veremos más adelante. De momento sólo se muestra una entrada de ejemplo que se crea automáticamente al instalar WordPress.
73
Aula Mentor
A la izquierda, con fondo negro, encontramos la barra lateral o sidebar, que contiene algunos bloques determinados (Entradas recientes, comentarios recientes, etcétera). Estos bloques se llaman Widgets y más adelante veremos que hay muchos entre los que elegir.
74
Abajo del todo aparece una banda de fondo negro con la frase “Creado con WordPress” que llamamos pie de página.
Una particularidad de Twenty Fourteen es que es de diseño adaptativo (responsive). Esto quiere decir que la estructura de la web se adapta a los distintos tamaños de pantalla en los que se puede visualizar: monitores de ordenador, tabletas o smartphones. Podemos hacer la prueba
Módulo 1. U2 Primeros pasos en WordPress
de cómo cambia el diseño al modificar el tamaño de la ventana de nuestro navegador para hacerla más pequeña, tal como se muestra en la siguiente imagen.
75
Vamos a volver ahora al tamaño completo para navegar un poco por la página. Al hacer clic en el título “Hola Mundo!” se nos muestra una nueva página con el contenido total del post. Fijémonos en que bajo el título de la entrada aparecen el autor de la misma y su fecha de publicación. Este tipo de datos, junto con otros como las etiquetas asociadas, etcétera, son lo que llamamos metadatos de la entrada. Bajo el texto de la entrada, está el área donde se van publicando los comentarios de los usuarios. Nosotros mismos, como administradores o autores del post, podemos contribuir también a la conversación o responder a las preguntas o dudas que planteen nuestros lectores. Debajo del todo se encuentra el formulario para añadir comentarios.
Aula Mentor
76
En la barra lateral, bajo el título “Categorías” encontraremos un listado de todas las categorías disponibles en nuestra web. De momento sólo encontraremos el enlace “Sin categoría”, que es la categoría por defecto a la que se asignan las entradas en WordPress. Al hacer clic en él nos aparece una página de archivo titulada “Archivos de la categoría Sin categoría”. Naturalmente, ahora sólo aparece uno, puesto que sólo contamos con la entrada de prueba.
Las páginas de archivo son características de los blogs. Pero no sólo existe un archivo de entradas según su categoría. Por ejemplo, también en la barra lateral bajo el título “Archivos”, vemos un enlace con el mes actual que nos lleva a un archivo de todas las entradas publicadas en ese mes. Más adelante veremos que podemos agrupar nuestros posts en páginas de archivo mensuales,
Módulo 1. U2 Primeros pasos en WordPress
anuales, etcétera. Y no sólo eso, también podemos archivar nuestras entradas ordenándolas por autor, alfabéticamente y otras muchas posibilidades. Ahora vamos a probar el enlace que aparece en el menú principal. Al hacer clic en “Página de ejemplo” se nos muestra el contenido de una página estática.
Como se explica en el texto, estas páginas son distintas de las entradas porque permanecen fijas en un lugar y, por defecto, se muestran en el menú de navegación del sitio web. Como ya comentamos antes, este tipo de páginas se suelen emplear para secciones típicas de las webs como “Acerca de” o “Contacto”.
2. Conociendo el área de administración Ahora que ya conocemos un poco más el aspecto de nuestro sitio y hemos aprendido a diferenciar y nombrar las distintas partes que lo componen, es el momento de familiarizarnos con el área de administración. El área de administración es el cerebro de nuestro sitio web, el lugar desde donde se maneja todo: los contenidos, la apariencia, la funcionalidad y la comunicación con otras webs. Para acceder a él tenemos antes que hacer login en la dirección de nuestro sitio web añadiendo “wp-login.php”. En nuestro caso, si estamos trabajando en nuestro servidor local, la URL de acceso sería http://localhost/wordpress/wp-login.php. La primera página que se muestra del área de administración es el Escritorio. En la parte derecha hay una serie de bloques de acceso rápido a diversa información. El primer bloque contiene enlaces que pueden resultar de utilidad para los usuarios que instalamos WordPress por primera vez.
77
Aula Mentor
Justo debajo encontramos otros bloques: 1. “De un vistazo” nos muestra, entre otras cosas, el número de entradas, páginas y comentarios de nuestra web, 2. “Borrador rápido”, que podemos utilizar como una utilidad para guardar ideas para entradas que publicaremos más adelante, 3. “Actividad”, que muestra las publicaciones recientes y los comentarios que recibimos, y 4. “Noticias de WordPress”, que nos mantiene al día de las novedades y las noticias de la comunidad.
78
Podemos personalizar el modo en que queremos que se muestren estos bloques mediante la barra superior de los mismos. Por ejemplo, si hacemos clic una vez el bloque se pliega y si volvemos a hacer clic se vuelve a desplegar.
También podemos arrastrar un bloque a otra ubicación tal y como se muestra en la imagen.
Módulo 1. U2 Primeros pasos en WordPress
Y podemos decidir qué bloques queremos que aparezcan y cuáles ocultar haciendo clic en la pestaña “Opciones de pantalla”...
...y seleccionando o deseleccionando los que deseemos.
En la parte izquierda del escritorio tenemos el menú del área de administración, que vamos a emplear muy a menudo a lo largo del curso. En principio, se muestran una serie de secciones iniciales (Escritorio, Entradas, Medios, Páginas, etcétera). Al pasar el ratón por cada una de esas secciones se despliegan en el menú sus correspondientes subsecciones. A lo largo del curso haremos referencia a una subsección de la forma siguiente: Por ejemplo, para mostrar todas las entradas del sitio web lo escribiremos “Entradas → Todas las entradas”, lo que significa que deberemos pasar el ratón por la sección “Entradas” y hacer clic en “Todas las entradas”. 79
Para comenzar a configurar nuestro WordPress vamos a ir a “Usuarios → Tu perfil”. En el contenido de esa página se muestran una serie de opciones que podemos empezar a editar, como nuestro nombre, apellidos o información biográfica. También vemos que podemos cambiar los esquemas de color o incluso nuestra contraseña de acceso. Si no estamos seguros de algo, es mejor no cambiarlo y dejarlo para más adelante cuando seamos usuarios más experimentados. Cuando hayamos terminado pulsamos “Actualizar perfil” para que se grabe la nueva configuración. Para terminar, vamos a “Apariencia → Personalizar”. Esta página es diferente para cada tema, puesto que cada uno tiene diferente grado de configuración. Vamos a navegar por el menú de la izquierda para explorar las distintas opciones y las vamos a cambiar a nuestro gusto. Si no estamos seguros de la utilidad de alguna opción podemos dejarla como está, más adelante hablaremos de ella. Para hacer efectivos los cambios hacemos clic en “Guardar y publicar”.
Aula Mentor
3. Planificación del sitio web Todos los grandes proyectos precisan de una fase de planificación. Necesitamos definir nuestros propósitos, nuestras ideas y nuestros objetivos si queremos desarrollar una línea de trabajo eficiente. Ahora que por fin hemos terminado de instalar todo y que podemos empezar a trastear con nuestra nueva web, imagino que es difícil dejar el ordenador a un lado y volver al lápiz y papel, pero creo que es necesario respirar hondo y pensar con detenimiento en nuestro proyecto. Los alumnos que no posean ningún proyecto real y están siguiendo el curso para formarse en el uso de WordPress pueden inventar un proyecto ficticio y seguir todos los pasos igualmente. Superobjetivo Vamos a tomarnos al menos cinco minutos en reflexionar y definir con el menor número posible de palabras (nunca más de 3) el propósito último de nuestro sitio web. Ejemplos válidos de superobjetivo serían “Hablar de cine”, “Entretener” , “Popularizar mi empresa”, “Vender relojes”, “Autopromoción”, etcétera. Tipo de web Vamos a escribir una o dos frases para describir nuestra web. ¿Se trata de una web comercial o es personal sin ánimo de lucro?, ¿se trata de un blog, una página de noticias, una tienda, un hotel, una escuela?. ¿Tratará de un tema determinado, científico, médico, recetas de cocina, viajes, moda, niños?. 80
El contenido de mi web La razón de ser de cualquier web es su contenido, pero existen muchos tipos diferentes de contenidos. Nuestra web puede consistir mayoritariamente en textos, o constituir un repositorio de imágenes, o mostrar un catálogo de productos, cada uno de ellos con sus características. Para explicar el contenido de nuestro web no vamos a escatimar en palabras y vamos a describirlo de la forma más pormenorizada posible, prestando atención a los detalles. Por ejemplo, un portfolio artístico consistiría en un listado de trabajos, cada uno de ellos con una o varias imágenes, un título, una descripción, fecha de realización, etcétera. Este sería el contenido principal. Pero también hay otro tipo de información complementaria que debemos plantearnos publicar. Puede que queramos explicar a nuestros usuarios cómo contactar con nosotros, cuál es el propósito de nuestro sitio, quiénes somos o cuál es nuestra área de experiencia. Para ello debemos pensar qué información creemos que necesitará conocer el usuario sobre nosotros y también qué parte de esa información estamos dispuestos a hacer pública. El público de mi web Vamos a pensar en los usuarios que creemos que van a estar interesados en nuestro sitio y acotar sus características según ciertas variables, por ejemplo sexo, edad, idioma, ocupación, nivel socioeconómico, nivel cultural, hábitos, motivaciones, etcétera. Un ejemplo de público objetivo sería “Hombres y mujeres de 35 a 55 años con nivel cultural medio y de cualquier nivel socioeconómico”. Evitaremos generalizaciones tipo “Hombres y mujeres de 0 años en adelante”.
Módulo 1. U2 Primeros pasos en WordPress
Mantenimiento de la web ¿Con qué frecuencia actualizaremos los datos de la web?, ¿tendremos que añadir el contenido sólo al principio o necesitaremos añadir información periódicamente?, ¿con qué periodicidad? ¿Quién se encargará de mantener y actualizar la web?, ¿lo haremos nosotros o contaremos con colaboradores?. ¿Queremos dejar acceso a esos colaboradores a toda nuestra área de administración o queremos restringir su acceso a las áreas de configuración más sensibles?
3.1 Elaborar un informe de nuestro proyecto Realizar una planificación de un proyecto web nos va a dar muchas pistas que usaremos para tomar decisiones más adelante. Por ejemplo, dependiendo del rango de edad de nuestros usuarios vamos a darnos cuenta del tipo de diseño que necesitamos para nuestra web, más original o más conservador. Dependiendo de nuestros contenidos sabremos si debemos poner más atención en la legibilidad de los textos o si debemos lograr un fuerte impacto visual. La definición de nuestros contenidos nos puede dar también una idea de las categorías bajo las que vamos a agrupar nuestra información. Para seguir con el ejemplo del portfolio, si producimos varios tipos de obras artísticas, por ejemplo pinturas, fotografías y grabados, sabremos que tendremos que crear las categorías correspondientes a ese tipo de obras. Puede incluso que necesitemos crear subcategorías si queremos distinguir entre fotografías en “Blanco y negro” y en “Color”. Vamos a escribir ahora las categorías y subcategorías que creemos que vamos a necesitar para organizar nuestros contenidos. También vamos a escribir qué páginas estáticas vamos a crear en nuestra página, dependiendo de la información complementaria que hemos decidido compartir con nuestros usuarios. Teniendo en mente los objetivos de nuestra web, o de la frecuencia al añadir datos, vamos a descubrir también si necesitamos mantener un archivo de entradas antiguas y bajo qué criterios deben agruparse (fecha, categoría, autor, etcétera). Una vez elaborado nuestro informe lo tendremos a mano para consultarlo mientras desarrollamos nuestra web. Puede que nos sirva como guía cuando se nos plantea alguna duda o también puede que a lo largo del camino cambiemos de idea en algún aspecto del proyecto original. Cambiar de idea en algo para mejorar el trabajo es habitual, sobretodo cuando estamos aprendiendo y nos faltan todavía muchas cosas por descubrir de la herramienta que estamos usando.
81
Módulo 2. Unidad 3. Gestión de usuarios Unidad 4. Temas para WordPress. Configurar la apariencia de nuestra web Unidad 5. Plugins para WordPress. Añadiendo funcionalidad Unidad 6. Configurando WordPress
Aula Mentor
Unidad 3. Gestión de usuarios
WordPress es multiusuario, es decir, permite que un número ilimitado de usuarios registrados puedan acceder al área de administración. Puede que para nuestro proyecto no necesitemos permitir el registro de usuarios. También, puede que ni se nos haya pasado por la cabeza siquiera contar con la colaboración de otras personas y, de hecho, en la mayoría de los casos basta una sola persona para gestionar un sitio web sin problemas. Pero nunca se sabe, nuestro sitio web acaba de nacer y tiene muchos años por delante en los que las condiciones pueden cambiar, por lo que nos conviene aprender a gestionar usuarios.
84
Hay muchos casos en los que en un sitio web WordPress colaboran varias personas. Por ejemplo, cuando distintos autores publican artículos o cuando existen una o varias personas encargadas de la parte técnica (instalaciones, mantenimiento, etcétera) y una o varias personas que se dedican a la labor editorial (escribir y publicar contenido). En previsión de estas situaciones, existe un sistema en WordPress que otorga determinados privilegios de acceso dependiendo de la tarea que cada usuario va a desempeñar en el área de administración. El sistema de gestión de usuarios de WordPress se basa en un sistema de roles y capacidades. Las capacidades representan las cosas que podemos hacer, como por ejemplo añadir una entrada, cambiar temas o instalar plugins, mientras que los roles se aplican a cada usuario registrado para especificar sus capacidades, es decir, las cosas que puede hacer y las que no. Por defecto, WordPress tiene 6 roles y alrededor de 67 capacidades. Cada rol cuenta con una combinación diferente de capacidades que dotan a cada usuario con los derechos y privilegios apropiados según cada caso. Esta es, muy resumidamente, la lista de roles con las capacidades de cada uno: Suscriptor: Sólo puede gestionar su perfil. Colaborador: Puede escribir y gestionar sus propias entradas, pero no puede publicarlas. Autor: Puede escribir, gestionar y publicar sus propias entradas, pero no las de otros. Editor: Puede publicar y gestionar tanto sus entradas como las de otros usuarios. Administrador: Tiene acceso a todas las características de administración del sitio web. Súper Administrador: Tiene acceso a todas las características de administración de todos los sitios web de un entorno multisitio.
Módulo 2. U3 Gestión de usuarios
A continuación mostramos una tabla con un resumen de las capacidades según los roles: Capacidades
Súper Administrador
Administrador
Editor
Autor
Colaborador
Gestionar la red
Si
Actualizar WordPress
Si
Si*
Gestionar ajustes
Si
Si
Gestionar plugins
Si
Si*
Gestionar temas
Si
Si*
Gestionar usuarios
Si
Si*
Moderar comentarios
Si
Si
Si
Gestionar categorías
Si
Si
Si
Editar entradas de otros
Si
Si
Si
Subir archivos
Si
Si
Si
Si
Publicar entradas
Si
Si
Si
Si
Editar entradas propias
Si
Si
Si
Si
Si
Leer
Si
Si
Si
Si
Si
Suscriptor
Si
* Sólo en el caso de una instalación simple.
1. Descripción detallada de los roles 1.1 El rol de suscriptor Por defecto, si no hemos cambiado los ajustes, a todos los usuarios que se registran en nuestro sitio se les asigna el rol de suscriptor, que es el más básico. Las capacidades del suscriptor son las siguientes: - Puede editar su perfil para añadir algunos datos personales o cambiar su contraseña de acceso. - Una vez que ha hecho login, puede participar en los comentarios sin necesidad de rellenar los datos obligatorios de nombre e email. Es conveniente permitir el registro de suscriptores si nuestro sitio web tiene mucha actividad en el área de comentarios o si prevemos que la vaya a tener. Por defecto, lo mejor es mantener inactiva la opción de registro de usuarios. Un poco más adelante veremos cómo.
1.2 El rol de colaborador El colaborador puede escribir y editar sus propias entradas, aunque no puede añadir imágenes ni otros archivos multimedia. Tampoco puede publicarlas, sino tan sólo guardarlas como borrador o a la espera de aprobación. Conviene asignar este rol a usuarios que contribuyan a nuestro sitio web con textos en una situación particular en la que necesitemos que otra persona diferente o nosotros mismos controlemos el acabado final del artículo y decidamos el momento de su publicación.
85
Aula Mentor
El colaborador tiene todas las capacidades del suscriptor y además las siguientes: - Ver los comentarios en el área de administración. - Crear nuevas entradas y guardarlas como borrador o en espera de revisión. - Editar sus propias entradas. - Ver los posts de otros usuarios en el listado de entradas, excepto los borradores y las entradas programadas de las que sólo puede ver el título.
1.3 El rol de autor El autor, al igual que el colaborador, puede editar y escribir sus propias entradas, pero además puede añadir imágenes y otros archivos multimedia. También puede asignar etiquetas a sus entradas, pero no puede crear nuevas categorías, sino tan sólo asignar a su entrada las ya existentes. Sin embargo, la capacidad más destacada del autor es que tiene permitido publicar sus entradas sin necesidad de ningún intermediario que las valide. Es decir, debemos asignar este rol a usuarios en los que tengamos plena confianza de la calidad de sus posts, incluido su acabado final con gráficos e imágenes, y a los que queramos otorgar la libertad de publicar en el momento en que ellos decidan. En resumen, el autor tiene todas las capacidades del colaborador y además las siguientes: 86
- Subir archivos. - Publicar sus propias entradas.
1.4 El rol de editor El editor, además de escribir y publicar sus propias entradas, tiene la capacidad de editar, borrar o publicar las del resto de los usuarios. También puede administrar enlaces y categorías, así como moderar los comentarios de cualquier entrada. Únicamente tiene vedadas las tareas relativas a la configuración del sitio web. El editor en WordPress es una especie de jefe de redacción, tiene la capacidad de decisión sobre cualquier contenido que se publique en la web, por lo que tan sólo debemos asignar este rol a alguien que sea capaz de asumir esa responsabilidad y en quien tengamos gran confianza. El editor tiene todas las capacidades del autor y además las siguientes: - Crear y editar páginas. - Crear y administrar enlaces. - Crear y administrar categorías. - Moderar los comentarios. - Utilizar HTML e incluso código Javascript en páginas, entradas y comentarios (pero no en una instalación multisitio).
Módulo 2. U3 Gestión de usuarios
1.5 El rol de administrador El administrador tiene acceso a todo el sitio web, incluidas sus opciones de configuración. Generalmente es el rol que nos otorgamos a nosotros mismos y raramente a alguien más. Es importante diferenciar entre el administrador de una instalación normal de WordPress del administrador de una instalación WordPress multisitio. Tanto el uno como el otro tienen las capacidades de un editor y además estas: - Acceder a los ajustes de configuración del sitio. - Editar el escritorio. - Cambiar temas y editar sus opciones. - Acceder a la lista de usuarios y cambiar su rol. - Activar o borrar plugins. - Editar archivos. - Importar y exportar datos. Pero además, los administradores de una instalación individual, como la que hemos llevado a cabo en este curso, tenemos estas capacidades añadidas: - Actualizar WordPress. - Instalar, editar y actualizar plugins. - Instalar, editar, actualizar y borrar temas. - Crear, editar y borrar usuarios. - Utilizar HTML e incluso código Javascript en páginas, entradas y comentarios.
1.6 El rol de Súper Administrador El súper administrador es el que está al cargo de una instalación multisitio de WordPress y, por defecto, tiene todas las capacidades posibles, incluidas obviamente las que sólo están disponibles en entornos multisitio: - Administrar - Administrar - Administrar - Administrar - Administrar - Administrar
la red. los sitios de la red. todos los usuarios de la red. los plugins de la red. los temas de la red. los ajustes de configuración de la red.
Se puede decir que, en el caso de instalaciones individuales de WordPress, los administradores son, de hecho, súper administradores, puesto que por defecto tienen todas las capacidades.
87
Aula Mentor
2. Gestionar usuarios Los ajustes por defecto de WordPress no permiten el registro de usuarios fuera del área de administración. Es decir, para añadir un usuario el administrador debe hacerlo en “Usuarios → Añadir nuevo”. Pero si necesitamos que nuestro sitio web permita a los usuarios registrarse ellos mismos, podemos activar esta función seleccionando la casilla “Cualquiera puede registrarse” en la página “Ajustes → Generales”.
88
También podemos definir qué rol queremos que se asigne por defecto a los nuevos usuarios. Por defecto, el rol para nuevos usuarios es “Suscriptor” que, como hemos aprendido, tan sólo permite a los usuarios configurar sus datos personales en la página de su perfil. Es recomendable no cambiar esta opción a no ser que sepamos exactamente lo que estamos haciendo y las consecuencias que tiene. Pensemos que cuando registramos un autor o un editor es como si les estuviéramos dando las llaves de nuestra casa y cuando registramos un administrador es como si le diéramos además la clave de la caja fuerte. En cualquier caso, cuando activamos la función para que cualquiera pueda registrarse, un nuevo enlace “Registrarse” aparece en el widget “Meta” de la barra lateral de nuestro sitio web.
Ese enlace conduce a una página en la que cualquier usuario puede registrarse introduciendo un nombre de usuario y una dirección de correo.
Módulo 2. U3 Gestión de usuarios
89
Al hacerlo, el nuevo usuario recibe un email con la contraseña que se le ha asignado automáticamente y nosotros, como administradores, recibimos un email de aviso del registro. Sección “Usuarios → Añadir nuevo” Pero, como decíamos, normalmente si queremos registrar a un usuario con un rol mayor al de suscriptor, lo hacemos nosotros personalmente en el área de administración, en “Usuarios → Añadir nuevo”. Para añadir un nuevo usuario basta con rellenar el formulario y pulsar “Añadir nuevo usuario”. El nombre de usuario no puede cambiarse más adelante, así que es preciso elegirlo con cuidado. La contraseña, sin embargo, la puede cambiar el nuevo usuario cuando desee. Es conveniente recordarle que, si va a hacerlo, debe escogerla siguiendo las instrucciones de seguridad que aparecen en la página de su perfil. Los nuevos usuarios recibirán un correo para informarles de que han sido añadidos como usuarios del sitio web. Si queremos que en ese email aparezca también la contraseña de acceso debemos seleccionar la casilla “Enviar esta contraseña al nuevo usuario por correo electrónico”.
Aula Mentor
90 Sección “Usuarios → Listado de usuarios” En esta página se muestran todos los usuarios registrados en el sitio web.
Módulo 2. U3 Gestión de usuarios
Existen ciertas opciones de personalización. La pestaña “Opciones de pantalla” nos permite elegir qué columnas mostrar y cuántos usuarios mostrar por página. También podemos ordenar las filas haciendo clic en el título de cada columna.
Cuando pasamos el puntero por encima de cada fila de usuario se nos muestran los enlaces de acción, en este caso “Editar” y “Borrar”. 91
Aula Mentor
También podemos llevar a cabo acciones en lote seleccionando los usuarios que queremos modificar y eligiendo la acción a llevar a cabo en los desplegables “Acciones en lote” o “Cambiar perfil a...”.
Por último, podemos acceder a un listado de todas las entradas escritas por un usuario haciendo clic en el número que hay bajo la columna “Entradas”. 92
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Unidad 4. Temas para WordPress. Configurar la apariencia de nuestra web
Ya hemos instalado nuestra copia de WordPress y tenemos una idea más o menos clara del proyecto que queremos llevar a cabo, así que ahora es un buen momento para personalizar visualmente nuestra web. Por suerte, existe en WordPress un modo tan sencillo de diseñar una web que sólo requerirá de unos cuantos clics. Lo que puede llevarnos un poco más de tiempo es encontrar un tema que transmita visualmente nuestra idea y se adapte a las necesidades de nuestro proyecto, pero se trata de una tarea muy amena que va a permitirnos expresar en cierto modo nuestra intuición visual y nuestra creatividad. 93
1. Qué son los temas Llamamos temas (o themes) al conjunto de archivos que definen la estructura y los estilos visuales de nuestra web. WordPress separa el contenido de la web del diseño de ésta, por lo que el uso de temas nos permite cambiar completamente la apariencia de nuestro sitio sin que esto afecte en modo alguno a su contenido. Es importante entender que un tema no sólo afecta a los estilos, como por ejemplo colores y tipografías, sino también a la composición de nuestro sitio, puesto que define dónde y cómo han de mostrarse las distintas partes que conforman cada página. Tiene también un papel fundamental en la funcionalidad de nuestra web porque puede permitir un mayor o menor nivel de configuración por parte del administrador y otras muchas cosas. Vamos a probarlo con un ejemplo. En el área de administración vamos a “Apariencia → Temas”. En esta página se muestran los temas instalados en nuestro sitio. El primero de ellos es el que está activo actualmente, es decir Twenty Fourteen. Los otros dos son temas de versiones anteriores de WordPress, que están disponibles para su activación en sustitución del actual.
Aula Mentor
Si pasamos el puntero sobre cualquiera de ellos, por ejemplo Twenty Thirteen, veremos que se revelan botones para mostrar los detalles del tema, obtener una vista previa y activarlo. Vamos a hacer clic en el botón “Activar”.
94
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Vemos cómo el tema que acabamos de activar está ahora en la primera posición, mientras que Twenty Fourteen pasa a la sección de temas disponibles. Vamos a ver cuál es ahora el aspecto de nuestro sitio web pulsando en el enlace “Visitar sitio”.
Comprobamos que el aspecto y la composición han cambiado completamente. La cabecera tiene un fondo de colores y las tipografías son diferentes. La barra lateral o sidebar, que antes estaba en la izquierda, aparece ahora en la zona del pie de página con los widgets que contiene, etcétera. Si preferimos el tema que teníamos instalado inicialmente sólo tenemos que volver al área de administración y activarlo. Tan sencillo como eso. Pero la gran mayoría de las veces, el tema por defecto de WordPress no va a ser suficiente para darnos por satisfechos con el diseño de nuestra web. Por ejemplo, es posible que necesitemos que nuestro sitio tenga tres columnas en vez de dos, puede que nos guste un determinado diseño para la cabecera o que queramos usar otras tipografías. Todas estas cosas exceden la capacidad de configuración de Twenty Fourteen, pero es natural que queramos que el diseño de nuestro sitio se distinga del resto de webs, hacer de él un lugar especial que transmita visualmente nuestro proyecto. Con un diseño adecuado nuestros visitantes gozarán de una buena experiencia en nuestra web, es más probable que vuelvan a menudo y que participen en los comentarios. No hay duda de que el principal valor de una web es su contenido, pero un diseño web apropiado es también fundamental. Por eso, si no tenemos los conocimientos para crear un tema por nosotros mismos y también carecemos del presupuesto para contratar a un profesional que lo haga por nosotros, una buena alternativa es buscar en Internet un tema que se adapte a nuestro proyecto. No se tratará de un diseño exclusivo, pero la oferta de temas en Internet es tan extensa que al profano en la materia le parecerá que lo es.
95
Aula Mentor
2. Elegir un tema adecuado. Aspectos a tener en cuenta Al escoger nuestro tema estamos determinando el futuro de nuestro sitio web. Debemos ser conscientes de que no se trata tan sólo de elegir uno que nos guste a nosotros personalmente, sino que debe ser el apropiado para nuestro proyecto, tanto visual como funcionalmente, y a la vez cumplir con una serie de requerimientos.
2.1 Requerimientos a la hora de elegir un tema Vamos a enumerar una lista de aspectos que debemos valorar mientras buscamos nuestro tema. Va a depender de cada proyecto concreto cuáles, de entre esta lista, van a convertirse en requisitos indispensables y de cuáles podemos prescindir. Algunos detalles del tema no siempre estarán disponibles antes de descargarlo pero, si el tema es gratuito, nos llevará poco tiempo probarlo en nuestra web y cambiarlo por otro si no cumple con nuestras expectativas. La instalación de temas es tan sencilla que podemos probar varios hasta dar con el que más nos convenza. Comprobar sus requerimientos técnicos WordPress se actualiza a menudo, por eso algunos temas quedan obsoletos con el paso del tiempo si sus autores no los adaptan a las nuevas versiones del software. Estos temas podrían dar lugar a errores indeseables si los instaláramos, por ello hay que comprobar las versiones de WordPress con las que funciona. Esta información se suele encontrar habitualmente en la descripción del tema. 96 HTML5 y CSS3 HTML (HyperText Markup Language) es el lenguaje estándar de las páginas web mientras que CSS (Cascading Style Sheets) es el lenguaje que define con qué estilos mostrar los elementos HTML. HTML5 es la revisión número 5 de HTML y ha sido adoptada por múltiples desarrolladores por sus avances y ventajas. CSS3 es el último estándar CSS. Es recomendable que nuestro tema esté escrito en HTML5 y CSS3, aunque este último estándar puede restar compatibilidad con algunos navegadores, por lo que es preciso informarnos de la compatibilidad del tema antes de decidirnos por él. Ver su compatibilidad con los distintos navegadores Es buena idea asegurarnos de que el tema elegido es compatible con el mayor número posible de navegadores en diferentes sistemas operativos. Generalmente se puede encontrar la lista de navegadores soportados en las características del tema. Idioma El inglés es el idioma original de la mayoría de los temas que vamos a encontrar, pero muchísimos de ellos están traducidos a varios lenguajes. Debemos comprobar que el tema que hemos elegido esté disponible en el idioma de nuestro sitio web. Translation-ready Si no existe versión en nuestro idioma del tema escogido, hay que revisar si al menos está preparado para que podamos traducirlo nosotros mismos. Sabremos que está configurado para poder ser traducido si encontramos las palabras translation-ready en la descripción de sus características. Más adelante explicaremos cómo traducir un tema.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Widget-ready Generalmente todos los temas modernos soportan widgets, pero no está de más comprobar cuando revisemos sus características que aparecen las palabras widget-ready. Más adelante explicaremos qué son y como funcionan los widgets. Retina-ready, Hight Resolution o Alta resolución Un tema es retina-ready si las imágenes que contiene están preparadas para verse nítidamente en algunos dispositivos de Apple, como el iPhone 4S, el iPhone 5 o el iPad de tercera generación, que utilizan pantallas de alta densidad. Si un tema no fuera retina-ready las imágenes se verían borrosas en estos dispositivos, aunque en el resto de dispositivos y en las pantallas de los ordenadores podrían visualizarse perfectamente enfocadas. SEO friendly SEO (Search Engine Optimization) u “Optimización para motores de búsqueda” hace referencia a las técnicas necesarias para mejorar el posicionamiento de nuestra web en los resultados de los buscadores como, por ejemplo, Google. Algunos temas están especialmente diseñados para ello, podemos comprobarlo si en sus características aparecen las palabras “SEO friendly”. Opciones de configuración Muchos temas nos permiten controlar, desde el área de administración de WordPress, aspectos tales como el color, las tipografías, la imagen de la cabecera, etcétera. Es buena idea enterarnos de qué opciones de configuración vamos a disfrutar una vez instalado el tema.
2.1.1 Optimizar nuestra web para dispositivos móviles No hace tanto, las páginas web se diseñaban para ser visualizadas exclusivamente en monitores de ordenador, pero los usuarios de Internet navegamos cada vez más a menudo desde nuestros móviles, y las tabletas se han popularizado enormemente. Está claro que el acceso a Internet desde otros dispositivos distintos al ordenador crece cada vez más y está aquí para quedarse. La estructura de una web diseñada para verse en un monitor de ordenador resulta la inmensa mayoría de las veces poco práctica para su visualización en un smartphone. Textos ilegibles, menús de difícil acceso y un largo etcétera de factores impiden una experiencia de usuario satisfactoria. Por eso, en los últimos años, y después de diferentes aproximaciones al problema por parte de los diseñadores web, la solución que más aceptación está teniendo es lo que llamamos diseño adaptativo (Responsive design). Decimos que un tema es de diseño adaptativo (responsive) si su composición se modifica para adaptarse a diferentes formatos de pantalla. La estructura y la visualización de los distintos elementos, como los menús o las imágenes, puede cambiar dependiendo del dispositivo con el que accedamos a la web. Como en tantos otros aspectos, podemos optimizar nuestra web para dispositivos móviles simplemente eligiendo un tema de diseño adaptativo o responsive. Por lo que no debemos olvidarnos de comprobarlo entre sus características.
97
Aula Mentor
2.1.2 El caso especial de las tiendas online Si nuestro proyecto consiste en una tienda online no podemos escoger cualquier tema. La funcionalidad que requiere un proyecto de comercio electrónico va más allá de lo que puede ofrecer WordPress de forma nativa, por lo que es necesario que instalemos un plugin que nos permita llevar un inventario de artículos, un carrito de la compra, una plataforma para el pago y toda una batería de herramientas adicionales. Hay varios plugins disponibles entre los que podemos elegir, pero no todos los temas son compatibles con estos plugins. Esto quiere decir que primero tenemos que decidir qué plugin vamos a instalar y sólo después podremos buscar un tema adecuado entre los que soporten el plugin elegido. Vamos a explicar todo sobre los plugins en general en la unidad 5 y, más concretamente, sobre plugins para comercio electrónico en el capítulo 4.6. El capítulo 4.6.1 trata particularmente sobre los temas para comercio electrónico. Mientras tanto, hay todavía mucho que aprender sobre los temas en general.
2.2 Algunos consejos para escoger un buen tema para nuestro proyecto
98
El proceso de selección del tema adecuado para nuestro sitio puede resultar abrumador, dada la cantidad de temas disponibles tanto gratuitos como comerciales. Por eso, es buena idea seguir algunas recomendaciones que nos ayudarán a acotar el número de temas candidatos hasta encontrar el correcto. Elegir un tema que esté relacionado con la materia de nuestro proyecto El diseño de un sitio web debe representar nuestra marca tanto en tono como en estilo. Si nuestro proyecto consiste en un sitio web para un grupo pop, no es buena idea optar por un diseño corporativo serio, de la misma manera que no es buena idea elegir un diseño informal con profusión de colores para un gabinete de abogados. En las webs de descarga, los temas aparecen a menudo ordenados por categorías (Blogs, Creativos, eCommerce, Magazines, Multimedia, Negocios, Portfolios, Tecnología, etcétera). Es buena idea empezar a buscar en la categoría que corresponda a nuestro proyecto. Prestar atención a las opiniones de los usuarios Una de las ventajas de WordPress es que hay una gran comunidad de personas alrededor suyo. No importa qué tipo de sitio estemos creando, la gran mayoría de las veces vamos a encontrar a muchas personas que han desarrollado un sitio parecido al nuestro, que tienen una opinión respecto a los mejores temas disponibles y que lo han escrito en algún sitio de Internet. Por ejemplo, al buscar en Google “mejor tema WordPress para bodas” encontraremos muchas más opiniones y sugerencias de lo que cabría imaginar a priori. Investigar lo que dice la gente puede situarnos en la dirección correcta para encontrar nuestro tema. Por otra parte, en el directorio de WordPress, así como en otras webs de descarga de temas premium, hay mecanismos que permiten a los usuarios evaluar un tema. En el directorio de WordPress, por ejemplo, se puede otorgar al tema de 1 a 5 estrellas. Hay que prestar atención a estas valoraciones.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Optar por la simplicidad Existen temas que presumen de un número incalculable de opciones de configuración y una lista interminable de funcionalidades. Pese a lo atractivo de su publicidad, puede no ser buena idea optar por un tema que tal vez tengamos dificultades para configurar, dada la cantidad desmesurada de alternativas. Además, estos temas a menudo causan conflictos a la hora de actualizar, por la complejidad de su código. Los diseños sencillos, asimismo, son mucho más fáciles de modificar y son compatibles con la mayoría de los navegadores. ¿Gratuito o de pago? Como observaremos, existe una gran oferta de temas de pago a precios asequibles. Una ventaja de éstos es que probablemente estén siendo utilizados por un menor número de personas que los temas gratuitos. Es habitual que las páginas web de descarga de temas publiquen el número de usuarios que han bajado un tema concreto, así que es bueno comprobar este número si nos preocupa que nuestro tema esté demasiado visto. Pero la principal ventaja de los temas de pago es que se les presupone una funcionalidad y una calidad mayor que los temas gratuitos, así como soporte técnico garantizado en caso de dudas o de problemas. Con muchos de ellos, se paga una sola vez pero se obtiene soporte para siempre. Los temas gratuitos, sin embargo, pueden tener poco o ningún soporte técnico, por lo que cuando esté disponible la siguiente versión de WordPress, el tema podría no ser compatible con ella. Por otra parte, actualmente es posible encontrar una amplia variedad de temas gratuitos de gran calidad y con la funcionalidad que necesitamos. Y, a menudo, los creadores de los temas tienen cuidado de actualizarlos cuando es necesario. Revisar los términos del servicio No hay que olvidarse de revisar los términos del servicio. Existen, por ejemplo, temas de pago para los que es necesario renovar la licencia pagando una cuota determinada al cabo de cierto tiempo, mientras que para otros temas solo hay que pagar una vez. También, hay temas gratuitos que requieren, por ejemplo, que se incluya en nuestra web obligatoriamente uno o varios enlaces. Si ese es el caso, es mejor prescindir de ese tema y buscar otro similar de entre las decenas de miles disponibles que no imponen ese tipo de condiciones.
3. Buscando el tema perfecto. Dónde y cómo descargar temas Existen gran cantidad de temas gratuitos listos para descargar gracias a la vasta comunidad de diseñadores de plantillas que ha prosperado debido a la popularidad de WordPress. En la web oficial de WordPress se ofrece un directorio de temas (http://wordpress.org/themes/), pero también existen otras muchas páginas donde conseguirlos. Muchas de estas páginas están en inglés pero, si no conocemos este idioma, podremos navegar por ellas sabiendo unas pocas palabras básicas o utilizando un traductor automático. Si no tenemos ni la más mínima idea de inglés, podemos acudir a páginas en nuestro idioma aunque la oferta de temas sea menor.
99
Aula Mentor
Claves de búsqueda Aquí detallamos algunas palabras clave que podemos usar en los buscadores para dar con páginas web de descarga de temas, tanto en español como en inglés:
temas, wordpress, gratis, plantillas, descarga, translation-ready, widget-ready, español, spanish, free, wordpress, themes, download Ejemplos de búsquedas son “free wordpress themes” o “temas wordpress gratis”. Webs de descarga Como los resultados de la búsqueda pueden ser desmesurados, incluimos varios enlaces a algunas de las webs más populares a las que podemos acudir para descargar temas: Gratuitos Directorio oficial de temas http://wordpress.org/themes/ Comerciales
100
Mojo Themes http://www.mojo-themes.com/categories/wordpress/ Theme Forest http://themeforest.net/category/wordpress Elegant Themes http://www.elegantthemes.com/gallery/ Templatic http://templatic.com/wordpress-themes-store/ StudioPress http://my.studiopress.com/themes/ Otras soluciones ofrecen un editor para personalizar la composición de la web arrastrando y soltando bloques: Headway Themes http://headwaythemes.com/ Themify http://themify.me/builder Thesis Theme http://diythemes.com iThemes http://ithemes.com/purchase/builder-theme
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
3.1 El directorio de temas de WordPress Si hemos decidido tratar de encontrar un tema gratuito, el mejor lugar donde podemos hacerlo es en el directorio oficial de temas de WordPress. Todos los temas que se ofrecen allí han sido cuidadosamente revisados por un equipo de personas que comprueban que el tema cumple con una serie de requisitos que garanticen la validez de su código. Tenemos dos formas de navegar por los temas del directorio oficial: desde la página web http://wordpress.org/themes/ o desde nuestra área de administración.
3.1.1 Buscar un tema desde nuestra área de administración Ésta es la forma más rápida y sencilla de buscar e instalar un tema. Allí podemos buscar temas por palabra clave o aplicar una serie de filtros, como los colores deseados, el número de columnas y otras muchas características. 1. En nuestra área de administración, vamos a “Apariencia → Temas”, y una vez allí, pulsamos en “Añadir un tema nuevo”
101
Aula Mentor
2. La página cuenta con las pestañas “Destacados”, “Populares” y “Recientes”. El contenido que se muestra por defecto es un listado de temas destacados. La pestaña que se muestra por defecto es “Destacados”. Junto a las pestañas vemos la utilidad “Filtrar por características” y un campo de búsqueda.
102
3. Podemos bien buscar por palabra clave en el campo de búsqueda o bien filtrar por características, pero no podemos usar las dos cosas a la vez. Para ilustrar el uso de esta página vamos a buscar temas con la palabra clave “responsive”. Al hacerlo se nos muestra un listado de temas, cada uno con una captura de pantalla de su página principal. Cuando pasamos el puntero por encima de cada tema se nos muestran los botones “Instalar” y “Vista previa”. Pulsando este último podemos ver una previsualización del tema a pantalla completa junto a información resumida sobre el mismo. Pero lo más importante es que podemos instalar automáticamente el tema en nuestra copia de WordPress tan sólo pulsando “Instalar”.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
4. Al pulsar en “Instalar”, se carga una página donde se describe el proceso de instalación. Si lo deseamos, podemos activar nuestro nuevo tema desde ahí mismo, sin necesidad de volver al administrador de temas, pulsando en “Activar”.
5. Si visitamos nuestro sitio, veremos que la activación ha funcionado y que disfrutamos de un nuevo diseño en nuestra web.
3.1.2 Buscar un tema en la web del directorio de WordPress La búsqueda de temas desde nuestra área de administración tiene una importante desventaja y es que no tenemos una forma sencilla de acceder a la información detallada sobre el tema. La mayoría de nosotros no nos compraríamos un coche o un ordenador tan sólo por su apariencia externa, sino que comprobaríamos antes sus especificaciones técnicas, lo compararíamos con otros coches u otros ordenadores para valorar cuáles de sus características nos resultan imprescindibles y cuáles nos parecen secundarias, lo consultaríamos con nuestros amigos y con la almohada antes de decidirnos por un modelo. Un tema para nuestra web, aunque sea gratuito, puede marcar la diferencia entre el éxito y el fracaso de nuestro proyecto. Si nuestras aspiraciones son serias, vamos a dedicar a nuestra web muchísimo tiempo en el futuro. Merece la pena perder un poco de ese tiempo ahora para asegurarnos de que no cometemos ningún error del que tengamos que arrepentirnos más tarde. En la web del directorio de WordPress (http://wordpress.org/themes/) vamos a encontrar toda la información que necesitamos. En la página principal del directorio contamos con varias herramientas para navegar por los temas. - En la columna central tenemos el enlace “Check out our new filter and tag interface” que nos conduce a un formulario de búsqueda por filtros muy parecido al que tenemos en nuestra área de administración. - También en la columna central tenemos un formulario en el que podemos buscar temas por palabra clave, por el nombre del tema, por autor, etcétera. - En la columna derecha tenemos listados de los 15 temas más populares, los 15 más nuevos y los últimos 15 actualizados recientemente. Para ver el listado completo debemos hacer clic en el título de cada sección.
103
Aula Mentor
Ahora vamos a echar un vistazo a la página de detalle de cada tema. Como ejemplo, hemos escogido el tema “Catch Box”, que podemos encontrar en esta dirección: http://wordpress.org/ themes/catch-box. Hay muchas cosas que podemos averiguar del tema en esta página antes de descargarlo. 104
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Por ejemplo, bajo el título del tema vemos que aparecen varias pestañas: Description En la descripción, además de una imagen con una captura de pantalla de la página principal, se detallan todas las características del tema y podemos consultar, por ejemplo, algunos de los requerimientos de los que hablábamos en el capítulo 2.1 de este mismo módulo. Al final del texto de descripción encontramos la lista de etiquetas o tags asignadas al tema. Por ejemplo “black”, “blue” y “brown” hacen referencia a los colores del diseño (negro, azul y marrón). Los tags “custombackground”, “custom-colors”, “custom-headers” y “custom-menu” nos dicen que en este tema el administrador puede personalizar (custom) los colores de la web, la cabecera, el fondo y el menú.
Stats Se muestran estadísticas del número de veces que se ha descargado el tema. Support Se trata de un foro de soporte técnico en el que los usuarios informan de errores o consultan dudas al autor del tema. Reviews Listado de reseñas de los usuarios, que pueden puntuarlo con un número de 1 a 5 estrellas y pueden además añadir un comentario. Developers Aquí aparece información sobre el desarrollo del tema, enlaces a versiones anteriores del mismo, etcétera. En la columna de la derecha aparece también información interesante: - En el botón naranja podemos descargar la última versión del tema a nuestro ordenador. - En el botón verde podemos obtener una vista previa de la página principal. - Podemos ver también la fecha de la última actualización del tema (Last Updated). Este dato es interesante porque nos da una idea de si el autor sigue trabajando en el tema para tenerlo al día o si ha abandonado su desarrollo. Si la fecha de la última actualización es de hace un año o más, lo mejor es buscar otro. - También aparece la cifra del número de veces que se ha descargado el tema (Downloads) para poder hacernos una idea de su popularidad. - Puede aparecernos un enlace al sitio web del tema (Theme Homepage). Es recomendable visitar el sitio web porque muy a menudo podremos encontrar una demo. En el caso de “Cach Box”, su sitio web ofrece una versión online de demostración pulsando el botón “Live Preview”. - “Ratings” nos ofrece una vista rápida de las puntuaciones obtenidas. - Y por último, tenemos acceso a información sobre el funcionamiento del soporte técnico en “Support”. Como vemos, la información que podemos obtener es bastante completa.
105
Aula Mentor
3.2 Temas premium Si no hemos encontrado un tema gratuito que se ajuste a nuestras necesidades o precisamos de soporte garantizado, tenemos la opción de buscar entre los temas de pago, también llamados temas premium. Existen dos tipos principales de webs que ofrecen temas. En unas, llamadas marketplaces, podemos comprar la licencia de un solo tema pagando una sola vez, mientras que otras funcionan como un club en el que podemos tener acceso a una parte o al total de los temas ofrecidos a cambio de una cuota periódica. Las primeras son más adecuadas para usuarios particulares que sólo pretenden la publicación de una web o dos, mientras que las segundas son una elección muy popular entre desarrolladores web con varios clientes. En la mayoría de las páginas de temas premium, además de una imagen en miniatura del tema, encontraremos enlaces con versiones de demostración o demos. Es recomendable visitar la demo para valorar el tema con detenimiento y decidir si es el adecuado para nosotros. Para tener acceso a ella debemos buscar los botones o enlaces “Demo”, “Live Demo” o “Live Preview”. Mojo Themes http://www.mojo-themes.com/categories/wordpress/ En Mojo Themes podemos encontrar más de 500 temas con licencia GPL y unos precios que oscilan entre los 30 y los 59 dólares.
106
ThemeForest http://themeforest.net/category/wordpress En ThemeForest, los precios de los temas oscilan entre los 25 y los 60 dólares, pero muchos cuentan con limitaciones de uso. Por ejemplo, la licencia suele ser válida para el uso en un sólo sitio web. Elegant Themes http://www.elegantthemes.com/gallery/ Elegant Themes pone a nuestra disposición toda su colección de temas, más de 80 cuando hacíamos este manual, por 39 dólares al año. Si además queremos acceso a todos los plugins y a documentos photoshop de los temas, el precio es de 89 dólares anuales. Y si sólo queremos pagar una vez, sin cuota anual, el precio es de 249 dólares. Templatic http://templatic.com/wordpress-themes-store/ Templatic ofrece el acceso a toda su colección de más de 50 temas por un único precio de 299 dólares. Pero también ofrece comprar cada tema separadamente por 49 dólares si vamos a usarlo en un sólo sitio, o 99 dólares para usarlo las veces que queramos. StudioPress http://my.studiopress.com/themes/ StudioPress ofrece temas basados en su framework Genesis. En este contexto, un framework es algo así como un tema madre, cuyos hijos serían cada uno de los temas de StudioPress. Para instalar estos temas habría que instalar también Genesis, que tiene reputación de ser un tema sólido, flexible, rápido y muy bien optimizado para SEO. El precio habitual es de 99,95 dólares por el tema más el framework Genesis.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
ThemeTrust http://themetrust.com/ En ThemeTrust obtenemos la licencia de un tema por 49$. De vez en cuando, lanzan ofertas especiales, como por ejemplo obtener dos por el precio de uno. ThemeFuse http://themefuse.com/ En ThemeFuse tenemos la opción de obtener la licencia de un tema por 49$ o acceso ilimitado a su colección de alrededor de 30 temas por 17$ al mes con un precio de alta de 199$. Rocket Theme http://www.rockettheme.com/wordpress En Rocket Theme podemos obtener la licencia de un tema por 50$ cada 60 días o de toda su colección de alrededor de 50 temas por 300$ al año. Existen planes intermedios que se pueden consultar en las condiciones de acceso al club.
3.2.1 Consejos para elegir un tema de pago En el proceso de elegir un tema de pago carecemos de la ventaja que tenemos con los temas gratuitos de poder instalarlos en nuestra copia de WordPress y probarlos durante un tiempo hasta estar seguros de que es exactamente lo que buscábamos. Sin embargo, hay una serie de rutinas que podemos seguir para conseguir la máxima información posible. Vamos a tomar como ejemplo un tema cualquiera de themeforest.net, por ejemplo “Karma”, que podemos encontrar en esta dirección: http://themeforest.net/item/karma-responsive-wordpresstheme/168737. 1. Conseguir información en la página del tema Como en el caso del directorio oficial de WordPress, en las webs comerciales también ofrecen muchísima información sobre los temas disponibles, que debemos leer cuidadosamente. Pongamos como ejemplo la página del tema “Karma” en Theme Forest, en la que existen tres pestañas principales. En los detalles del tema (Item Details) podemos obtener información pormenorizada de todas las características del tema. En los comentarios (Comments) podemos echar un vistazo a lo que dicen los usuarios sobre el tema. Por último, podemos acceder al soporte técnico en Support.
107
Aula Mentor
108
Pero en la columna derecha existe información destacada que debemos también tener en cuenta, además de su precio, por ejemplo sobre el autor del tema. En este caso se nos informa de que el autor de “Karma”, TrueThemes, es “Elite”, lo que significa que ha ganado más de 75.000$ en el mercado Envato (Envato Marketplace), dentro del que se engloba Theme Forest. Eso es buena señal porque, si ha ganado esa cantidad de dinero, puede que sea porque sus trabajos son populares y dejan a sus clientes satisfechos.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Otro dato importante es el número de ventas del tema, relativo a la fecha de publicación del mismo, claro está, que nos da una idea de su popularidad.
También existe un sistema de valoración del tema en el que los usuarios votan hasta un máximo de 5 estrellas.
Más abajo aparece un cuadro que muestra las principales características del tema. Este cuadro es una de las primeras cosas que debemos consultar, ya que nos permite hacernos una idea general del tema antes de leer siquiera el contenido principal.
109
Aula Mentor
Otra cosa que debemos conocer antes de pagar por un tema son sus opciones de personalización, es decir, las posibilidades que nos va a ofrecer para darle nuestro toque personal y adaptarlo a nuestras necesidades particulares. En el caso de “karma”, como en el de muchos otros temas premium, existe un listado de estas opciones en la versión demo. Vamos, por tanto a la demo haciendo clic en “Live Preview”.
110
El primer menú “Feaures about the theme” (Características del tema) se despliega para mostrar todas las que posee. Podemos navegar por las páginas a las que conducen para leerlas en detalle o consultar los ejemplos. Naturalmente, también es muy recomendable visitar el resto de página de la versión de prueba.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Hay algunas comprobaciones que podemos hacer para verificar el nivel de detalle del tema. Por ejemplo, podemos usar el formulario de contacto para ver si su sistema de validación es amigable para el usuario.
También podemos introducir una URL inexistente para ver si su página 404, o de contenido no encontrado, existe. Por ejemplo, si cargamos la URL http://themes.truethemes.net/Karma/ probando404, comprobamos que el diseño de la página 404 es acorde con el resto y que ofrece alternativas de búsqueda. 111
Por último, si conocemos algo de programación HTML/CSS es muy buena idea echar un vistazo a su código fuente, para verificar su calidad y legibilidad, y conocer las librerías que utiliza.
Aula Mentor
2. Poner a prueba la versión demo en distintos servicios online Existen algunos servicios que permiten testear una dirección web en distintos ámbitos. Hay que tener en cuenta que la URL que necesitamos probar es la de la versión demo, no la de la página del tema en, por ejemplo, Theme Forest. En el caso de “Karma”, la URL que debemos probar sería esta: http://themes.truethemes.net/Karma/ - Probar la velocidad de carga y la calidad subyacente con GTMetrix, una herramienta gratuita que podemos usar online aquí: http://gtmetrix.com. - Probar la validez HTML del documento en el W3C, para comprobar si cumple los estándares vigentes. Se puede usar aquí: http://validator.w3.org - Probar cómo aparece el tema en un gran número de navegadores y sistemas operativos en http://browsershots.org - Probar cómo aparece el tema en tabletas y smartphones mediante la extensión de Google Chrome “Web Developer Extension”: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es - Probar el rendimiento de la demo en diversos dispositivos mediante GoMoMeter de Google: http://developers.google.com/speed/pagespeed/insights/
4. Instalación manual de un tema Instalar manualmente un tema es muy sencillo. Básicamente consiste en lo siguiente: 112
1. Descargar de Internet el tema elegido. 2. Descomprimir el archivo descargado. 3. Copiar la carpeta obtenida en el directorio “wp-content/themes” de nuestro WordPress. Si queremos instalarlo en nuestra instalación local sólo tendremos que arrastrar y soltar. Si queremos instalarlo en nuestro servidor remoto, deberemos subirlo mediante un cliente FTP como Cyberduck. 4. En nuestra área de administración de WordPress ir a “Apariencia → Temas” y activarlo haciendo clic en el link “Activar” Una vez seguidos todos los pasos, podremos visitar nuestro sitio para comprobar que el tema se ha activado correctamente. Vamos a llevar a cabo una instalación de ejemplo paso a paso:
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
1. Imaginemos que queremos descargar el tema Catch Box del directorio gratuito de WordPress. Para ello vamos a la página del tema aquí: http://wordpress.org/themes/catch-box y pulsamos en el botón naranja para descargarlo.
2. Cuando descomprimimos el archivo descargado, obtenemos una carpeta llamada “catchbox” que contiene varios archivos y carpetas. Debemos copiar la carpeta completa con todo su contenido en el directorio “/wp-content/themes/” de nuestra copia de WordPress. Es decir, si estamos en Windows, debemos copiarla en “c:\wamp\www\wordpress\wp-content\themes\” y si estamos en Mac OS en “Aplicaciones/MAMP/htdocs/wordpress/wp-content/themes/”.
113
Aula Mentor
3. Una vez copiada la carpeta del tema, entramos al área de administración de nuestro WordPress y vamos a “Apariencia → Temas”. Vemos que entre los temas disponibles para la activación se encuentra Catch Box. Hacemos clic en “Activar”.
4. Visitamos nuestro sitio para comprobar que el tema se ha cargado correctamente.
114
5. Retocando nuestro sitio web. Configuración y adaptación de los temas La mayoría de los temas nos ofrecen una serie de opciones de personalización en el área de administración. Estas opciones son diferentes en cada tema, pero generalmente podemos tener acceso a ellas a través del menú, en distintas subsecciones de «Apariencia».
5.1 Opciones de configuración Al final del capítulo 2 de este módulo comprobábamos que los temas ofrecen unas pequeñas opciones de configuración iniciales, ahora vamos a conocerlas en profundidad.
5.1.1 Apariencia → Personalizar Esta página muestra las opciones más básicas de configuración de un tema. La mayoría de ellas son, podríamos decir, un atajo a opciones de configuración que podemos encontrar diseminadas por distintas secciones de nuestra área de administración. WordPress nos lo ha puesto fácil agrupándolas en este pequeño menú que nos permite, además, ver dinámicamente en la parte derecha cómo afectan a nuestra web los cambios que vamos haciendo. Estos cambios no se harán efectivos hasta que pulsemos el botón “Guardar y publicar”, por lo que podemos experimentar lo que queramos sin miedo a perder nuestra configuración original.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Las opciones que aparecen en el menú de acordeón de la izquierda pueden cambiar mucho dependiendo de cada tema. Vamos a ver, por ejemplo, las de Twenty Fourteen.
En primer lugar, podemos cambiar el título provisional que le dimos a nuestro sitio durante el proceso de instalación. Además podemos editar la descripción, que consiste en un breve texto que define nuestro sitio web. Esta descripción no sólo permite explicar a los usuarios el objetivo de nuestro sitio en muy pocas palabras, sino que va a utilizarse para posicionar nuestra web en los principales buscadores. Hablaremos de ello con más detalle en un módulo posterior.
En la siguiente pestaña podemos personalizar los principales colores de nuestra web: el color de fondo y el color que usaremos para resaltar ciertos elementos gráficos.
115
Aula Mentor
Podemos también definir una imagen de cabecera y de fondo para nuestro sitio web.
De la siguiente sección, Widgets, hablaremos más adelante en profundidad. Después, podemos escoger qué mostrar en nuestra página principal. Por defecto, fiel a la herencia bloguera de WordPress, se muestran las últimas entradas publicadas, pero tenemos la posibilidad de utilizar una página estática de nuestra elección en su lugar.
116
La última pestaña, “Contenido destacado”, permite que definamos ciertas entradas como contenido destacado de nuestra web. Por defecto, la palabra clave que deben tener asignadas estas entradas para poder mostrarse como destacadas es “featured”, aunque podemos cambiarla por la que queramos. Podemos escoger también cómo mostrar este contenido, bien como rejilla o bien como pase de diapositivas.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
5.1.2 Apariencia → Opciones del tema Los desarrolladores de temas ofrecen muchas veces a los usuarios la oportunidad de cambiar ciertas características del tema, como sus colores, tipografía, composición, etcétera. Esto es posible en la página “Apariencia → Opciones del tema” del área de administración. Esta página sólo está disponible si el tema activo ofrece la posibilidad de configuración adicional. Si nuestro tema no tiene esta capacidad, esta página no se mostrará en el menú. Además, esta página podrá ser muy diferente dependiendo de cada tema. En algunos casos contendrá un formulario con un par de opciones y en otros casos la configuración podría llevarnos horas. Como ejemplo, vamos a echar un vistazo a las opciones de Catch Box, el tema que instalamos en el capítulo 4. Así que lo activamos si no lo tenemos activo y vamos a “Apariencia → Opciones del tema”. Se nos muestra una página con este contenido:
117
Como vemos, Catch Box nos ofrece muchas opciones de configuración: 6 combinaciones de colores, 3 disposiciones de página diferentes, 2 distintas disposiciones de contenido y muchas cosas más. Podemos echar un vistazo también a las otras 3 pestañas: “Featured post Slider”, “Enlaces sociales” y “Herramientas para Webmasters”. Si nos apetece, podemos experimentar todo lo que queramos con las opciones y ver cómo cambia la apariencia de nuestro sitio, es un ejercicio que nos vendrá bien para familiarizarnos con el uso del área de administración. En el curso no las vamos a explicar en detalle puesto que, como hemos dicho antes, cada tema tiene sus propias opciones.
Aula Mentor
5.1.3 Apariencia → Cabecera Si el tema lo permite, también podemos personalizar la cabecera del sitio web en “Apariencia → Cabecera”. Si esta página no aparece en el menú, significa que el tema no soporta la configuración de la cabecera.
Generalmente, esta página se suele utilizar para sustituir el título por defecto del sitio web por nuestro logotipo, cuya imagen podemos subir a través del formulario. 118
5.1.4 Apariencia → Fondo También podemos configurar una imagen o un color de fondo para nuestro sitio web en “Apariencia → Fondo”. Como en el caso anterior, el menú sólo se mostrará cuando el tema activo ofrezca el soporte para ello.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
5.2 Uso de Widgets Hemos hablado antes de los widgets en un par de ocasiones. Los mencionábamos al explicar la estructura básica de un tema y los situábamos siempre dentro de lo que hemos venido llamando barra lateral o sidebar. De hecho, los widgets son pequeñas aplicaciones que permiten añadir contenido y funcionalidad a las barras laterales de nuestro sitio web. Tradicionalmente, la barra lateral era una estrecha columna situada a la derecha o izquierda de una web WordPress que contenía determinada información complementaria. Pero la situación de la barra lateral depende de cada tema por lo que, con la evolución de WordPress y del diseño de temas, podemos encontrar, por ejemplo, no una sino varias barras laterales en lugares muy diversos de nuestro sitio web. En el siguiente esquema se muestran algunos ejemplos de disposiciones de las barras laterales. Naturalmente, las posibilidades son mucho más variadas que esta pequeña muestra y dependerá del tema que escojamos.
119
Podemos disponer los widgets de nuestro sitio web en la posición y localización que deseemos dentro de las barras laterales que nos ofrezca nuestro tema siempre que este sea widget-ready, es decir, que soporte widgets. Aunque en la actualidad es muy raro que un tema no esté preparado para trabajar con ellos. Pero, ¿qué tipo de cosas hace un widget? y ¿cómo podemos hacer que aparezcan en una barra lateral? Vamos a aprenderlo:
Aula Mentor
Accedemos a la página de administración de widgets en “Apariencia → Widgets”. En la columna de la derecha aparecen bloques que se corresponden con las barras laterales que tenemos disponibles en el tema activo.
120
Y en la columna izquierda tenemos un listado de todos los widgets disponibles, cada uno con su título y una breve descripción de su funcionalidad. Podemos encontrar listados de categorías, nubes de etiquetas, navegación, búsqueda, etcétera.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Si queremos activar uno de esos widgets en nuestro tema lo único que debemos hacer es arrastrar el widget escogido hasta la barra en la que queremos mostrarlo y en el orden en que queremos que se visualice. Por ejemplo, podemos añadir un pequeño calendario en la parte superior de la columna derecha de nuestro tema de la siguiente forma:
Cada widget nos ofrece ciertas opciones de configuración. En este caso podemos añadir un título, así que escribimos “Calendario” y hacemos clic en “Guardar”
121
Listo. Podemos visitar nuestro sitio para ver cómo queda nuestro nuevo widget.
Aula Mentor
Para familiarizarnos con el uso de widgets, es buena idea probar a instalarlos todos en diferentes barras laterales. Comprobar qué opciones de configuración nos piden para cada uno y cuál es el resultado en nuestra web. Mientras lo hacemos, podemos ir pensando cuáles de ellos vamos a necesitar en nuestro sitio web y quizás anotarlo en nuestro proyecto. Existen muchos más widgets que los que aparecen por defecto al instalar WordPress. Un widget puede considerarse como un tipo particular de plugin, así que podemos descargar widgets en el directorio oficial de plugins de WordPress (http://wordpress.org/plugins/), que conoceremos con más detalle en la unidad 5. Importante: Si cambiamos el tema de nuestro sitio, los widgets volverán a la zona de widgets disponibles y es posible que tengamos que añadirlos y organizarlos de nuevo.
5.3 Enredar en el código. Adaptación manual de los temas Los temas de WordPress tienen, o deberían tener, licencia GPL. Eso significa, como dijimos en el capítulo de introducción, que somos libres de adaptarlos y modificarlos cuanto queramos, y por ello se distribuyen en código abierto. Si tenemos conocimientos de programación PHP o HTML, o si somos capaces de editar CSS, podemos modificar a voluntad los documentos que contiene la carpeta de un tema. Podemos incluso basarnos en un tema para crear otro diferente completamente adaptado a nuestras necesidades. 122
Existe incluso un modo de acceder a estos documentos directamente desde el área de administración en “Apariencia → Editor”. Naturalmente, esta página está pensada para ser usada por usuarios avanzados, programadores o diseñadores web. No deberíamos emplear esta utilidad a no ser que sepamos exactamente lo que estamos haciendo.
5.4 Cómo traducir un tema de WordPress Como dijimos anteriormente, es importante asegurarnos de que el tema que hemos elegido esté traducido a nuestro idioma, así no tendremos que preocuparnos en absoluto por la traducción. Aunque, si sabemos inglés, existe un modo de traducir manualmente un tema para el que no exista todavía traducción. Si no sabemos idiomas, este método no nos ayudará. En un sitio web WordPress hay una serie de palabras y frases generadas por los temas, por ejemplo: “Entradas recientes”, “Comentarios recientes”, “Archivos”, “Categorías”, “Publicado en...”, “Publicado el...”, “Deja un comentario”, “Conectado como...”, etcétera. Como ya dijimos, el idioma original de la mayoría de los temas es el inglés. Cuando el tema está traducido a nuestro idioma, la traducción se carga automáticamente al instalar WordPress en nuestra lengua, es el caso del tema Twenty Fourteen y muchos otros. Pero, a veces, el tema que hemos elegido para nuestra web no tiene traducción a nuestro idioma. En estos casos, podemos traducirlo nosotros mismos siempre que el tema sea translation-ready, es decir, que el autor lo haya configurado para poder traducirlo sin necesidad de modificar el código.
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Para ello vamos a utilizar un programa gratuito llamado Poedit que podemos descargar aquí: http://www.poedit.net/download.php. Los temas translation-ready suelen tener una carpeta llamada “languages” (a veces “lang”) dentro de la carpeta del tema. Dentro de esa carpeta están los archivos con las traducciones a los diferentes idiomas. Dependiendo del contenido de esa carpeta, podemos proceder a la traducción de tres modos distintos: A. Si dentro de la carpeta “languages” hay un archivo con extensión “.pot” 1. Abrir poedit e ir a “Archivo → Crear catálogo desde un archivo POT...” 2. Configurar la ventana “Opciones” según las instrucciones del capítulo 5.4.1. 3. Guardar el archivo en la misma carpeta con el código “idioma_PAÍS”. Por ejemplo, para el caso del español “es_ES.po” 4. Comenzar a traducir. Al guardar se genera automáticamente un archivo “.mo” que es el que en realidad usa WordPress para traducir el tema. B. Si dentro de la carpeta “languages” hay un archivo con extensión “.po” (normalmente “default.po” o “en_US.po”) 1. Abrir el archivo “.po” con Poedit. 2. Configurar las opciones en “Catálogo → Opciones...” según las instrucciones del capítulo 5.4.1. Para el caso del español, guardar como “es_ES.po” (“Archivo → Guardar como...”) en la misma carpeta y comenzar a traducir. C. Si dentro de la carpeta “languages” no hay archivos “.pot” ni “.po” 1. Abrir poedit e ir a “Archivo → Nuevo catálogo...” 2. Configurar la ventana “Opciones” según las instrucciones del capítulo 5.4.1. 3. Guardar el archivo en la carpeta “languages” con el código del idioma a traducir. Por ejemplo, para el caso del español “es_ES.po”. (Si no existe una carpeta “languages”, crear una.) 4. Ir a “Catálogo → Actualizar desde fuentes” para obtener todos los textos traducibles y comenzar a traducir.
123
Aula Mentor
5.4.1 Configuración de Poedit A continuación mostramos cómo deben quedar las opciones de configuración de Poedit. Pestaña “Información de proyecto”
124 Pestaña “Carpetas” El directorio raíz se expresa con dos puntos “..”. Y en el listado de carpetas debemos añadir una entrada con un punto “.”
Módulo 2. U4 Temas para WordPress. Configurar la apariencia de nuestra web
Pestaña “Palabras clave”
Una vez configuradas las tres pestañas debemos guardar el archivo con el código correspondiente a nuestro idioma. Por ejemplo, el nombre del archivo para el idioma español sería “es_ES.po”, para catalán “ca.po”, para euskera “eu.po” y para gallego “gl_ES.po”.
125
Aula Mentor
Unidad 5. Plugins para WordPress. Añadiendo funcionalidad
La instalación inicial de WordPress tan sólo incluye una funcionalidad básica, es completamente operativo pero contiene sólo lo esencial. Sin embargo, su arquitectura permite que podamos “enchufarle” programas adicionales para otorgarle la funcionalidad que precisemos para cada proyecto. Si lo pensamos, gracias a esta estructura WordPress puede conservar la simplicidad y ligereza de su núcleo sin renunciar a una funcionalidad que supera las expectativas de los usuarios más exigentes, puesto que así somos nosotros los usuarios los que decidimos qué herramientas necesitamos y de cuáles prescindimos.
126
Llamamos plugin a cada una de esas herramientas que “enchufamos” para aumentar la funcionalidad de nuestra web en áreas tales como la seguridad y la protección contra spam, la conexión con redes sociales, la optimización para buscadores, el tratamiento y administración de las imágenes, la adaptación al comercio electrónico, el análisis de visitas, la mejora del rendimiento y un largo etcétera. Podemos estar prácticamente seguros de que, si mientras configuramos nuestro sitio web nos encontramos con alguna necesidad, ahí afuera existe un plugin que nos resolverá el problema. A lo largo de este capítulo vamos a tratar de explicar en qué consisten los plugins, dónde encontrarlos y cómo instalarlos. Además, vamos a reseñar cierto número de plugins de uso habitual para poder hacernos una idea de las posibilidades que tenemos a nuestro alcance. Al finalizar el capítulo, deberemos tener claro qué funcionalidad vamos a añadir a nuestro sitio web mediante plugins y sabremos cómo hacerlo. Veremos que el proceso de buscar e instalar plugins es muy parecido al de instalar temas. Aunque, también como en el caso de los temas, puede costarnos un poco más dar con el plugin adecuado porque generalmente existen varios en el mercado que cumplen la misma función.
1. Dónde y cómo encontrar plugins WordPress.org posee un directorio de plugins gratuitos y en código abierto en la dirección http://wordpress.org/plugins/ que contiene alrededor de 28.000 plugins de lo más variado. También existen multitud de plugins comerciales a los que podemos recurrir si no encontramos uno gratuito que satisfaga completamente nuestras necesidades. Podemos encontrarlos introduciendo en un buscador de Internet unas pocas palabras clave, como “wordpress premium plugins” o “wordpress commercial plugins”, tal vez añadiendo alguna palabra que detalle el tipo de plugin que estamos buscando en concreto. Una búsqueda de este tipo puede devolver millones de resultados, así que para facilitar la búsqueda añadimos aquí algunas direcciones de páginas web que comercializan plugins WordPress, a menudo a precios asequibles:
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
Code Canyon http://codecanyon.net/category/wordpress WPPlugins http://wpplugins.com Elegant Themes http://www.elegantthemes.com/plugins/
1.1 El directorio oficial de plugins de WordPress El mejor sitio para encontrar un plugin gratuito es el directorio oficial de WordPress (http:// wordpress.org/plugins/), tanto por la cantidad y variedad de plugins disponibles como por la certeza de que todos ellos son revisados por un equipo de profesionales que garantiza la validez de su código. La página principal del directorio pone a nuestra disposición varias formas de navegar por las decenas de miles de plugins que contiene. En la columna izquierda podemos consultar plugins según varias categorías, en la columna derecha se muestran los plugins más populares y en la columna central contamos con un formulario de búsqueda, debajo del cual aparece un listado de plugins destacados.
127
Es muy fácil para el usuario inexperto entusiasmarse demasiado al descubrir la enorme cantidad de funciones fantásticas que podemos añadir a nuestro sitio web gracias a los plugins, sobretodo porque muchas de ellas son completamente gratis. Pero es importante tener presente que no porque algo sea gratis significa necesariamente que sea bueno. Y a la inversa, un plugin no
Aula Mentor
tiene porqué ser bueno sólo porque es comercial. Debemos aprender a distinguir los plugins potentes, seguros y útiles de los de baja calidad, sean o no de pago, porque muchas veces la elección de un plugin implica un compromiso que puede tener un impacto en nuestro sitio web durante años. Tomemos como ejemplo el plugin “Jetpack by WordPress.com” para ver qué tipo de información podemos recabar sobre él antes de decidirnos a instalarlo. En la página de detalle del plugin en el directorio de WordPress (http://wordpress.org/plugins/jetpack/) tenemos varias pestañas con información que podemos consultar.
128
Description En la descripción se define el uso del plugin y se detallan todas sus características. Al final del texto de descripción encontramos una lista de etiquetas o tags asociados. Installation Aquí se explican los pasos necesarios para instalar el plugin. Estos pasos son los mismos para la inmensa mayoría de ellos, pero alguno puede tener alguna particularidad que podemos consultar aquí. FAQ (Frequently Asked Questions) Esta página ofrece un listado de las preguntas que se plantean más frecuentemente sobre el plugin con sus correspondientes respuestas. Screenshots Aquí se muestran capturas de pantalla, por ejemplo, del aspecto del plugin en el área de administración. Changelog El registro de cambios del plugin a lo largo de sus diferentes versiones. Stats Se muestran estadísticas del número de veces que se ha descargado el plugin. Support Se trata de un foro de soporte técnico en el que los usuarios informan de errores o consultan dudas al autor del plugin.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
Reviews Listado de reseñas de los usuarios, que pueden puntuarlo con un número de 1 a 5 estrellas y pueden además añadir un comentario. Developers Aquí aparece información sobre el desarrollo del plugin, enlaces a versiones anteriores del mismo, etcétera. Volviendo a la página inicial del plugin, en la columna derecha podemos consultar de un solo vistazo una información resumida muy útil. Para empezar, en la parte superior, se muestran una serie de datos en los que debemos fijarnos siempre:
En este texto se especifica que el plugin requiere (Requires) como mínimo la versión 3.8 de WordPress y que es compatible (Compatible up to) hasta la versión 4.0. A veces, particularmente cuando ha habido una actualización reciente de WordPress, los autores del plugin no han tenido tiempo de recabar suficiente información sobre su compatibilidad, así que debemos tener en cuenta que esta información puede no estar actualizada y, aunque ponga que el plugin es compatible hasta una versión inferior a la que tenemos instalada, eso no significa necesariamente que sea incompatible con la nuestra. Es decir, podemos instalarlo de todos modos pero teniendo este dato en mente para que, si nos encontramos con problemas, podamos tal vez achacarlo a un conflicto entre versiones. La última fecha de actualización (Last Updated) es un dato muy importante porque nos da una idea de si el autor del plugin sigue trabajando en él o ha abandonado su desarrollo hace tiempo. Si vemos que la última actualización es de hace un año o más, debemos desconfiar y plantearnos tal vez alguna alternativa. De hecho, en el directorio de plugins se muestra un mensaje de aviso cuando un plugin lleva más de dos años sin actualizarse, aunque este no es el caso de Jetpack.
Por último, el número de descargas (Downloads) es importante para determinar el nivel de aceptación del plugin en la comunidad. A continuación, también en la columna derecha, se muestra un esquema de la evaluación del plugin por parte de los usuarios. En el gráfico de barras podemos ver el número de personas que lo han puntuado. Al hacer clic en cada barra se nos abre una página con comentarios de los usuarios explicando los motivos de su puntuación.
129
Aula Mentor
Más abajo aparece información sobre el autor o los autores del plugin. Vemos que el principal desarrollador de Jetpack es Automattic, la empresa que está detrás de WordPress. Este dato va a ser determinante en este caso para dar nuestra confianza al plugin.
130
También podemos hacernos una idea de si se ofrece o no soporte a los usuarios. En este caso vemos que 373 de las 542 peticiones de soporte han sido resueltas en los últimos dos meses, lo que significa que el servicio de soporte es bastante activo.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
Por último, podemos comprobar la compatibilidad de la versión actual del plugin con la última versión de WordPress. En este caso, el mensaje con fondo amarillo nos dice que no existen suficientes datos, hay 11 personas que dicen que funciona y 9 personas que dicen que no.
Si todos estos datos no nos parecieran suficientes o todavía tuviéramos dudas podemos hacer una búsqueda en Google para averiguar qué opina la gente. Podemos buscar, por ejemplo, “wordpress jetpack opiniones” y echar un vistazo a los resultados obtenidos.
2. Cómo instalar un plugin Podemos administrar los plugins de nuestro WordPress en la página “Plugins → Plugins instalados” de nuestra área de administración.
131
Aula Mentor
Como vemos en la imagen, hay dos plugins preinstaladados en nuestra versión de WordPress: “Akismet” y “Hello Dolly”. Si quisiéramos activarlos sólo tendríamos que pulsar en el enlace “Activar”. Por ejemplo, al activar “Hello Dolly”, que muestra frases al azar de la canción Hello Dolly de Louis Armstrong, un mensaje en la parte superior de la página nos notifica su activación y el plugin aparece en la lista con fondo azul claro.
132
Para desactivar el plugin debemos pulsar el enlace “Desactivar”. Sencillo, ¿verdad?.
Pero, ¿cómo podemos hacer que aparezcan plugins en la lista para poder activarlos?. Es decir, ¿cómo podemos instalarlos?. Existen dos formas de hacerlo, la automática y la manual, y los procesos respectivos para estos dos métodos son análogos a los que ya conocemos para instalar temas.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
2.1 Instalación automática de plugins En el área de administración de nuestro WordPress existe una aplicación similar a la que ya conocemos para instalar temas que nos va a permitir instalar plugins con un par de clics. Esta utilidad tan sólo muestra plugins del directorio oficial de WordPress. Existe un modo de instalar automáticamente plugins de otros lugares, pero lo explicaremos un poco más adelante en este mismo capítulo. Como ejemplo vamos a instalar un plugin llamado “WordPress Importer” que sirve para importar datos a nuestro WordPress mediante un archivo que se haya exportado anteriormente de otra copia de WordPress (ver capítulo 2.2 de la Unidad 6). 1. La página “Plugins → Añadir nuevo” tiene una estructura parecida a la que ya conocemos para instalar temas. Podemos navegar por las pestañas “Destacados”, “Populares” y “Favoritos” y también podemos buscar introduciendo nuestros términos de búsqueda.
133
2. Para nuestro ejemplo vamos a utilizar la utilidad de búsqueda, así que introducimos el nombre del plugin que queremos encontrar, “wordpress importer” y pulsamos la tecla “Intro” de nuestro teclado.
Aula Mentor
3. El plugin que buscamos aparece el primero de la lista. Para instalarlo hacemos click en “Instalar ahora”.
4. Nos aparece un aviso de confirmación. Pulsamos “Aceptar”.
134
5. En la nueva página se va mostrando el progreso de la instalación. Cuando recibamos el mensaje de que el plugin se ha instalado correctamente podemos activarlo mediante el enlace “Activar plugin”.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
6. En la página “Plugins → Plugins instalados” podemos comprobar que el plugin está instalado y activo.
Instalar automáticamente otros plugins Como decíamos antes, podemos también instalar automáticamente plugins que hemos bajado de otras webs diferentes del directorio oficial. Para ello debemos ir a la página “Plugins → Añadir nuevo” y después hacer clic en el enlace que aparece enmarcado en verde en la imagen a continuación.
Se nos muestra un formulario en el que podemos subir un plugin en formato .zip. Para ello primero hacemos clic en “Seleccionar archivo”, escogemos el archivo .zip y pulsamos en “Instalar ahora”. Los siguientes pasos ya los conocemos.
135
Aula Mentor
2.2 Instalación manual de plugins El proceso para instalar un plugin manualmente es muy parecido al que ya hemos aprendido para instalar un tema, básicamente consiste en lo siguiente: - Descargar de Internet el plugin elegido. - Descomprimir el archivo descargado. - Copiar la carpeta obtenida en el directorio “wp-content/plugins” de nuestro WordPress. Si queremos instalarlo en nuestra instalación local sólo tendremos que arrastrar y soltar. Si queremos copiarlo en nuestro servidor remoto, deberemos subirlo mediante un cliente FTP como Cyberduck. - En nuestra área de administración de WordPress ir a “Plugins → Plugins instalados”, buscarlo en la lista y activarlo haciendo clic en el enlace “Activar”. Vamos a llevar a cabo la instalación paso a paso de “Jetpack by WordPress.com”, que dota a nuestro WordPress de muchas de las características y funciones que disfrutan los usuarios de WordPress.com. 1. Vamos a la página del plugin aquí http://wordpress.org/plugins/jetpack/ y pulsamos en el botón naranja para descargarlo.
136
2. Cuando descomprimimos el archivo descargado, obtenemos una carpeta llamada “jetpack” que contiene varios archivos y carpetas. Debemos copiar la carpeta completa con todo su contenido en el directorio “/wp-content/plugins/” de nuestra copia de WordPress. Es decir, si estamos en Windows, debemos copiarla en “c:\wamp\www\wordpress\wp-content\plugins\” y si estamos en Mac OS en “Aplicaciones/MAMP/htdocs/wordpress/wp-content/plugins/”.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
3. Una vez copiada la carpeta del plugin, entramos al área de administración y vamos a “Plugins → Plugins instalados”. Vemos que en el listado de plugins disponibles para la activación se encuentra “Jetpack por WordPress.com”. Hacemos click en “Activar”.
4. En esa misma página recibimos el mensaje de que el plugin ha sido activado.
137
Como vemos, lo único que tiene de manual esta instalación es que debemos descomprimir y copiar nosotros mismos el plugin a su carpeta correspondiente. En todo lo demás es similar a la instalación automática. Podemos usar indistintamente cualquiera de las dos, la que nos resulte más sencilla o con la que nos sintamos más cómodos. Aunque la instalación manual es, naturalmente, la opción a elegir cuando la automática nos da algún tipo de problema.
Aula Mentor
3. La configuración de los plugins La mayoría de los plugins nos permiten cierto nivel de configuración para adaptarlos a las necesidades concretas de nuestro sitio web. En algunos casos la configuración es opcional, pero en otros tal vez el plugin necesite una serie de datos para poder funcionar, por lo que deberemos configurarlos obligatoriamente. Por eso, lo primero que debemos hacer nada más activar un plugin es visitar su página de configuración. Hay una cosa muy importante de la que debemos ser conscientes cuando hablamos de configurar plugins: cada uno tiene sus propios métodos y sus propias opciones, que son completamente diferentes a las de los demás cientos de miles. Eso significa que no podemos explicar en este curso cómo configurar cada plugin concreto. Eso es algo que deberá llevar a cabo el alumno por su cuenta, aunque no es difícil encontrar ayuda en Internet en caso de duda. Cuando instalamos un plugin se crea automáticamente su página de configuración en nuestra área de administración, pero una de las cosas que cambia según el plugin que instalemos es la localización de esa página. - Algunos plugins, como Jetpack, sitúan el enlace a su página de configuración en el menú principal del área de administración.
138
- Otros lo sitúan como un submenú de “Ajustes”. Es decir, tendríamos que ir a “Ajustes → Nombre_del_plugin” - Muchos añaden, además, un enlace a su página de configuración en el listado de plugins instalados.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
Para seguir con nuestro ejemplo anterior, vamos a echar un vistazo a la página de configuración de Jetpack a la que, como hemos dicho, podemos acceder a través del menú “Jetpack” de nuestra área de administración.
Como vemos en la imagen, Jetpack ofrece decenas de aplicaciones extra que debemos activar para poder usarlas. En nuestro ejemplo vamos a activar “Compartir”, que añade a nuestro blog botones para que los usuarios compartan nuestras entradas en distintas redes sociales o por email. Para ello hacemos clic en el botón “Activar”.
Una vez activado, debemos pulsar en el botón “Configurar”.
139
Aula Mentor
A continuación se muestran las opciones particulares de la aplicación “Compartir”. Para agregar botones debemos arrastrarlos desde la parte superior a la inferior, tal y como se explica en las instrucciones.
Como vemos, más abajo hay muchas opciones que podemos configurar a nuestro gusto. Para este ejemplo vamos a indicar que queremos que los botones aparezcan en las entradas del blog. Por último pulsamos “Guardar cambios”.
140
Ahora, si vamos a cualquier entrada de nuestro blog, vemos que los botones que hemos seleccionado aparecen tal y como hemos configurado.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
3.1 Plugins y widgets En muchas ocasiones el plugin que acabamos de instalar debe activarse como un widget, o puede utilizarse de varias formas, una de ellas mediante un widget. Cuando se da este caso, generalmente suele aparecer un widget con el nombre del plugin en la zona de widgets disponibles de la página de administración de los mismos. (Ver capítulo 5.2 de la unidad 4) Por eso, si tras instalar un plugin y revisar sus opciones de configuración no estamos seguros de cómo ponerlo en funcionamiento en nuestra web, es buena idea pasarse por la página “Apariencia → Widgets” y comprobar si nuestro plugin aparece en la lista. Por otra parte, existen una serie de plugins que nos permiten administrar nuestros widgets. Gracias a ellos podemos, por ejemplo, decidir qué widgets mostrar u ocultar dependiendo del post o la página que se visite. Estos son algunos ejemplos: Dynamic Widgets http://wordpress.org/plugins/dynamic-widgets/ Display Widgets http://wordpress.org/plugins/display-widgets/ Widget Context [En inglés] http://wordpress.org/plugins/widget-context/ Widgets Controller [En inglés] http://wordpress.org/plugins/widgets-controller/ Y, mucho mejor, existen plugins que nos van a permitir crear y administrar barras laterales personalizadas que podemos usar para añadir widgets en sitios de nuestra web que el tema que tenemos instalado no nos permitía en principio. Custom WordPress Sidebar Plugin [Comercial] http://codecanyon.net/item/custom-wordpress-sidebar-plugin/5053833 Sidebar & Widget Manager for WordPress [Comercial] http://codecanyon.net/item/sidebar-widget-manager-for-wordpress/2287447 Widget Ninja [Comercial] http://codecanyon.net/item/widget-ninja/253159 Custom Widget Areas for WordPress [Comercial] http://codecanyon.net/item/custom-widget-areas-for-wordpress/130941
141
Aula Mentor
3.2 Shortcodes Sabemos que podemos añadir widgets a las barras laterales, pero resultaría muy útil poder añadir contenido o funcionalidad a otros lugares del sitio web. Supongamos, por ejemplo, que quisiéramos añadir un formulario de búsqueda dentro del texto de una página estática. Pues bien, podemos hacerlo gracias a un shortcode, cuya traducción al español sería algo así como “código abreviado”. En efecto, un shortcode es un código específico de WordPress que nos va a permitir hacer cosas geniales con muy poco esfuerzo. Por ejemplo, un formulario de contacto puede contener cientos de líneas de código, pero podemos hacer equivaler todas esas líneas a algo parecido a esto: [formulario 1] De manera que si escribimos “[formulario 1]” en cualquier entrada o página, al cargar nuestro sitio web aparecería en su lugar el formulario al que hemos llamado. Este principio tan sencillo va a proporcionar a nuestro sitio web una flexibilidad sin parangón. Pronto vamos a comprobar que muchos plugins, una vez instalados, ofrecen shortcodes para que podamos elegir en qué lugar colocarlos. 142
Es el caso de “Contact Form 7”, un plugin muy sencillo y completo para añadir un formulario de contacto a nuestro sitio web que vamos a tomar como ejemplo del uso de shortcodes. 1. Descargamos el plugin de http://wordpress.org/plugins/contact-form-7/ 2. Lo instalamos con el método que prefiramos. 3. Lo activamos pulsando “Activar” 4. Podemos gestionar el plugin en la página “Contacto” del menú. En esa página se muestra una lista con todos los formularios disponibles. Podemos crear todos los que queramos, pero de momento vamos a utilizar el que aparece de prueba haciendo clic en “Editar”.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
5. En la parte superior de la página resultante aparece el shortcode que debemos utilizar para insertar el formulario el cualquier sitio de nuestra web. Más abajo se muestran las opciones de configuración del formulario que podemos modificar a nuestro gusto. Cuando hayamos terminado, seleccionamos el texto del shortcode y lo copiamos.
6. Ahora vamos a insertarlo en una página estática. Para ello vamos a “Páginas → Todas las páginas” y escogemos la página de ejemplo haciendo clic en “Editar”.
143
Aula Mentor
7. Vamos a convertir la página de ejemplo en nuestra página de contacto. Para ello cambiamos el título por “Contacto” y sustituimos el contenido por un texto introductorio tras el cual pegamos el shortcode que hemos copiado previamente. Por último pulsamos “Actualizar”.
144
8. Vamos ahora a comprobar cómo quedan los cambios en nuestro sitio web. Vamos a la página de contacto haciendo clic en “Ver página”.
9. Comprobamos que el shortcode ha sido reemplazado por el formulario de contacto tal y como esperábamos.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
145 Nota: Normalmente, el envío de correo no funciona en nuestro servidor local. Es posible activar esta función configurando nuestro archivo php.ini, pero esta es una tarea para usuarios avanzados. Sin embargo, con toda probabilidad funcionará a la perfección una vez hayamos publicado nuestro sitio online, aunque es cierto que algunos servicios de hosting gratuito desactivan esa opción. Para terminar, mostramos un par de plugins muy útiles para el uso de shortcodes en nuestro sitio web: Shortcodes Ultimate [En inglés] http://wordpress.org/plugins/shortcodes-ultimate/ Una excelente colección de shortcodes para enriquecer nuestro sitio web. En este plugin podemos crear fácilmente pestañas, botones, cajas de texto, vídeos con anchura adaptativa, etcétera. My Shortcodes [En inglés] http://wordpress.org/plugins/my-shortcodes/ Permite crear nuestros propios shortcodes para usarlos en páginas y posts.
Aula Mentor
3.3 Edición avanzada de plugins Como en el caso de los temas, es posible adaptar y modificar los plugins que instalamos en nuestra web, puesto que tienen, o deberían tener, licencia GPL y se distribuyen en código abierto. Por eso, si tenemos conocimientos de programación PHP/MySQL podemos modificar a voluntad los documentos que contiene la carpeta de un plugin. Podemos incluso basarnos en un plugin para crear otro diferente completamente adaptado a nuestras necesidades. Existe un modo de acceder a estos documentos directamente desde el área de administración en el menú “Plugins → Editor”. Obviamente, esta funcionalidad debe ser usada solamente por usuarios avanzados o programadores. Si no sabemos programar, lo mejor es olvidarnos de su existencia.
4. ¿Qué plugins necesita mi sitio web? En prácticamente todos los casos nuestro sitio web necesitará algún tipo de plugin. Obviamente, cada proyecto va a tener unas necesidades particulares que nos corresponde a nosotros, como webmasters, definir. Es hora de releer nuestro proyecto e identificar cuáles de nuestros requisitos se pueden resolver mediante plugins. 146 Por ejemplo, algunos proyectos van a precisar de un formulario de contacto, para el que ya hemos instalado un plugin. Otros serán multilingües, por lo que necesitaremos un plugin que nos permita publicar información en varios idiomas. Para otros será imprescindible el uso de una galería de imágenes, etcétera. Existen incluso un cierto número de plugins que conviene instalar en casi todos los casos. Estos plugins están relacionados la mayoría de veces con la protección, la seguridad, el rendimiento y el mantenimiento del sitio web. Para este curso, hemos reunido en el capítulo 4.4 un listado de plugins de las categorías que más demanda tienen en la actualidad. También, en capítulos posteriores, incluiremos una lista de plugins de utilidad en los temas que tratemos. Naturalmente, en nuestra selección no están todos los que existen, puesto que la lista sería interminable. Para confeccionarla nos hemos basado en la popularidad de los plugins en el directorio de WordPress, en las críticas favorables por parte de los usuarios y en otro tipo de factores, como por ejemplo el soporte en castellano. Algunos son muy sencillos, fáciles de configurar y administrar. Otros, sin embargo, poseen una configuración más compleja y manejan conceptos que pueden no resultar familiares al principiante. Pero el objetivo de este curso no es que el alumno domine hasta el último plugin por complejo que sea, sino el de crear un sitio web con el que tanto él como sus usuarios se sientan cómodos y satisfechos. Por lo que, si nos sentimos abrumados por un plugin complicado, aunque parezca muy completo, es mejor optar por uno más sencillo cuyo uso podamos comprender sin necesidad de leer antes un manual. Antes de lo que pensamos habremos adquirido suficiente experiencia como para instalar plugins complejos y puede que, precisamente porque somos más expertos, descubramos que los mejores plugins son a menudo los más simples.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
4.1 Plugins que todo sitio web debería instalar No existe un juego de plugins indispensable para todos los sitios web. La razón de ser de cada sitio es tan extremadamente variada que es imposible tener las mismas necesidades en todos los casos. Existen, sin embargo, una serie de asuntos de los que debemos ocuparnos siempre: la seguridad, el mantenimiento, la optimización del rendimiento, la SEO, el análisis de visitas, etcétera. Todos estos temas se pueden ayudar a resolver mediante el uso de plugins que conoceremos más adelante. En nuestra opinión, sin embargo, si hay un plugin indispensable para todo sitio web que permita comentarios es Akismet, que protege a nuestro sitio web del spam. Akismet http://wordpress.org/plugins/akismet/ Este plugin viene preinstalado en WordPress y sólo tendríamos que activarlo. No obstante, es preferible esperar a que nuestra web esté online en un servidor web antes de empezar a usarlo. Lo conoceremos en detalle en un módulo posterior.
4.2 ¿Cuántos plugins puedo usar?, ¿existe un límite? Es normal preguntarnos si el uso de demasiados plugins va a afectar al rendimiento de nuestro WordPress. La respuesta sencilla a esta pregunta es que no, no existe un número de plugins determinado a partir del cual debamos empezar a preocuparnos por si nuestro sitio web se volverá lento e ineficiente. El número habitual de plugins que un sitio web suele contener es de 5 a 25, los sitios web más complicados pueden tener activos de 50 a 70 plugins sin que su rendimiento se vea significativamente afectado. Matt Mullenweg, el fundador de WordPress, ha comentado varias veces que conoce a alguien con cerca de 300 plugins activos en su sitio web. Por lo tanto, podemos activar en nuestro sitio web tantos plugins como necesitemos, pero ninguno más. Mucho cuidado, no es el número lo que afecta la eficiencia de nuestro WordPress sino la naturaleza del código de algunos plugins y esto es algo que ocurre con frecuencia. Es decir, si estamos teniendo problemas con el rendimiento de nuestro sitio web, puede deberse a que tengamos instalados plugins de baja calidad, anticuados o inadecuados. Y claro, cuantos más plugins instalemos, más probabilidades tendremos de toparnos con uno problemático, de ahí la recomendación de no mantener activo ninguno que no necesitemos.
4.3 ¿Cómo elegir un plugin de entre varios que ofrecen la misma funcionalidad? Casi siempre vamos a encontrarnos con que existen varios plugins que supuestamente cumplen la misma función. Para el usuario inexperto puede ser un problema decantarse por uno, sobretodo sabiendo que, a veces, si nos comprometemos con un plugin determinado durante cierto tiempo, será difícil poder cambiarnos a otro fácilmente sin perder datos. Por lo tanto, ¿cómo saber qué plugin elegir? Como en tantas otras cosas, no existe una respuesta absoluta a esa pregunta, pero hay una serie de sugerencias y consejos que podemos seguir en caso de duda:
147
Aula Mentor
- Aprovechar la información que se ofrece en el directorio oficial de plugins de WordPress, particularmente las valoraciones y opiniones de otros usuarios. - No instalar plugins que no se hayan actualizado durante un año o más. - Procurar instalar plugins cuya versión sea probadamente compatible con nuestra versión de WordPress. - Leer cuidadosamente las características. A veces dos plugins que aparentemente ofrecen la misma funcionalidad, muestran algunas diferencias que nos van a ayudar a decantarnos por uno u otro. - Probar los plugins. Como ya sabemos hay una lista extensísima de plugins gratuitos que podemos probar sin apenas esfuerzo y, a menudo, los plugins comerciales ofrecen versiones reducidas o lite que podemos poner a prueba en nuestro sitio web. - Testear el rendimiento de nuestra web antes y después de instalar el plugin para observar si existe alguna diferencia. Aprenderemos a hacer esto en un módulo posterior. Existen también una serie de factores en los que podemos basarnos para la elección de un plugin, aunque no tienen relación directa con el rendimiento. Por ejemplo, los usuarios que no dominan el inglés preferirán sin duda que el plugin esté traducido a su lengua materna. También, muchos usuarios optan, con buen criterio, por el plugin más sencillo de usar. En general, no debemos tomarnos a la ligera la tarea de escoger un plugin, es preferible ser juiciosos y perder unos minutos ahora que tener que lamentar luego una elección precipitada.
4.4 Plugins de uso habitual 148
Existen una serie de áreas en las que los usuarios demandamos plugins a menudo. Vamos a estudiar algunas de estas áreas en detalle más adelante, particularmente las que tienen que ver con la seguridad y el mantenimiento de WordPress, por lo que no las mencionaremos aquí. El resto tiene que ver con necesidades muy concretas en situaciones que se presentan al webmaster muy a menudo.
4.4.1 Formularios de contacto Un tipo de plugin muy utilizado en los sitios web WordPress es el que permite la creación de un formulario de contacto, es decir, un formulario a través del que nuestros usuarios pueden enviarnos mensajes privados a nuestra dirección de correo. Los campos más habituales de los formularios de contacto son “Nombre o Empresa”, “Email”, “Título del mensaje” y “Texto del mensaje”. Estos plugins pueden integrar un sistema CAPTCHA para protegernos del spam, aunque en otros es necesario instalar el CAPTCHA aparte. Estos son algunos ejemplos de formularios de contacto que podemos usar en nuestro sitio web: Contact Form 7 http://wordpress.org/plugins/contact-form-7/ Formidable Forms http://wordpress.org/plugins/formidable/ Contact Form http://wordpress.org/plugins/contact-form-plugin/
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
4.4.2 Utilidades para imágenes Es raro el sitio web que no contiene imágenes. Mientras que en algunos casos las imágenes suelen limitarse a ilustrar un texto, otras veces son el contenido principal de nuestra web. Existen diferentes tipos de plugins que podemos usar para publicar nuestras imágenes: Galerías Las galerías muestran nuestras imágenes en un conjunto de fotos en miniatura (o thumbnails) en las que el usuario puede hacer clic para visualizarlas a mayor tamaño. Es posible asociar varias imágenes a un sólo post o una sola página mediante el uso de una galería. WordPress soporta la inserción de galerías de forma nativa como veremos en el capítulo 1.3 de la unidad 9, pero si lo deseamos existen plugins que amplían la funcionalidad ofrecida por WordPress. Estos son algunos ejemplos: NextGEN Gallery http://wordpress.org/plugins/nextgen-gallery/ Demo: http://www.nextgen-gallery.com/nextgen-gallery-demos/ Grand Flagallery - Photo Gallery Plugin http://wordpress.org/plugins/flash-album-gallery/ Demo: http://codeasily.com/wordpress-plugins/flag/ WP Photo Album Plus http://wordpress.org/plugins/wp-photo-album-plus/ Gallery http://wordpress.org/plugins/gallery-plugin/ Pases de diapositivas (Slideshow o Sliders) También es posible presentar nuestras imágenes como en un pase de diapositivas, es decir, las imágenes se muestran a buen tamaño una detrás de otra en una secuencia predeterminada. Aunque, para ser exactos, los sliders pueden contener otros elementos además de imágenes: textos HTML, vídeos, etcétera. Es habitual utilizar un slider en la página principal que sirva de presentación de artículos destacados o páginas que podemos encontrar en la web. A menudo se utiliza algún tipo de efecto de transición entre una presentación y la siguiente. Existen plugins que permiten incluso la animación de los componentes de cada presentación. Ahí van algunos ejemplos: Slideshow http://wordpress.org/plugins/slideshow-jquery-image-gallery/ Meta Slider http://wordpress.org/plugins/ml-slider/ WOW Slider http://wordpress.org/plugins/wowslider/
149
Aula Mentor
Layer Slider [Comercial] http://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100 Slider Revolution Responsive jQuery Plugin [Comercial] http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848 SlideDeck [Comercial] http://www.slidedeck.com Lightbox. Ampliación de las imágenes Otra técnica muy ampliamente utilizada es la que permite ampliar una imagen al hacer clic en su miniatura. La imagen a mayor resolución se suele mostrar muy a menudo sobre un fondo oscuro semi-transparente. Muchos plugins nos permiten esta función, entre ellos los siguientes: Simple Lightbox http://wordpress.org/plugins/simple-lightbox/ WP Lightbox 2 http://wordpress.org/plugins/wp-lightbox-2/ Responsive Lightbox http://wordpress.org/plugins/responsive-lightbox/ 150
Otros plugins para imágenes Existen miles de plugins relacionados con el uso de imágenes en WordPress, podemos consultar la kilométrica lista aquí: http://wordpress.org/plugins/search.php?q=images, pero apuntamos un par de ellos que destacan por su utilidad: EWWW Image Optimizer http://wordpress.org/plugins/ewww-image-optimizer/ Optimiza el tamaño de las imágenes que subimos a nuestra web sin pérdida apreciable de calidad. Regenerate Thumbnails http://wordpress.org/plugins/regenerate-thumbnails/ WordPress genera miniaturas de todas las imágenes del web. Si se cambia el tamaño por defecto de esas miniaturas, este plugin nos permite regenerarlas.
4.4.3 Utilidades para vídeo La publicación de vídeos en nuestro sitio web es un factor importante que puede mejorar la experiencia de nuestros visitantes. WordPress convierte automáticamente los enlaces de Youtube, Vimeo y otros servicios de vídeo que incluimos en nuestras entradas en un reproductor donde poder verlos, por lo que no es necesario el uso de ningún plugin adicional para esta tarea. Sin embargo, si queremos publicar nuestros vídeos directamente o si necesitamos un control mayor sobre ellos, existen plugins que nos facilitarán el trabajo. Aquí está una selección:
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
YouTube Embed Plugin http://wordpress.org/plugins/youtube-embed-plus/ Extiende la inserción de un vídeo de Youtube facilitándonos opciones adicionales de configuración. Spider Video WordPress Player http://wordpress.org/plugins/player/ Permite organizar nuestros vídeos en listas de distribución y elegir una plantilla de nuestro gusto para el reproductor. Video Gallery [Comercial: 15$] http://codecanyon.net/item/video-gallery-wordpress-plugin-w-youtube-vimeo-/157782 Una galería de vídeo rápida y con muchas características, incluyendo diseño adaptativo. Widgets para vídeo Vimeo Channel Gallery http://wordpress.org/plugins/vimeo-channel-gallery/ Muestra un vídeo de Vimeo y una galería de miniaturas de un usuario, canal, grupo o álbum de Vimeo. Youtube Channel Gallery http://wordpress.org/plugins/youtube-channel-gallery/ Muestra un vídeo de Youtube y una galería de miniaturas de canal de Youtube. 151
4.4.4 Gestión de usuarios Como hemos visto, tanto la estructura como las herramientas de gestión de usuarios en WordPress son bastante sencillas de forma nativa. Sin embargo, hay una serie de plugins que podemos instalar para dotar a nuestro sistema de opciones más avanzadas y un mayor nivel de configuración. A continuación mostramos algunos ejemplos. Members [En inglés] http://wordpress.org/plugins/members/ Un plugin muy útil para los sitios web con varios usuarios. Permite definir nuevos roles y asignarles un juego de capacidades a medida. User Access Manager http://wordpress.org/plugins/user-access-manager/ Permite administrar el acceso al contenido del sitio web mediante la creación de grupos de usuarios. Advanced Access Manager [En inglés] http://wordpress.org/plugins/advanced-access-manager/ Una herramienta para administrar el acceso de los usuarios tanto a la parte pública como al área de administración de un sitio web. Soporta las instalaciones multisitio. User Role Editor http://wordpress.org/plugins/user-role-editor/ Permite modificar las capacidades de cada rol, así como crear nuevos roles y nuevas capacidades.
Aula Mentor
Edit Flow [En inglés] http://wordpress.org/plugins/edit-flow/ Muy útil cuando existe un equipo de personas trabajando en un sitio web. Ofrece una serie de herramientas para gestionar el flujo de trabajo editorial. Custom Login [En inglés] http://wordpress.org/plugins/custom-login/ Permite personalizar la página de login. WP Status Notifier [En inglés] http://wordpress.org/plugins/wp-status-notifier/ Envía un correo electrónico a la dirección que escojamos cuando un colaborador añade una entrada pendiente de revisión. Adicionalmente, avisa al colaborador cuando su entrada es aceptada o rechazada. Co-Authors Plus http://wordpress.org/plugins/co-authors-plus/ Permite asignar varios autores a páginas, entradas y tipos de entradas personalizadas. Adminimize [En inglés] http://wordpress.org/plugins/adminimize/screenshots/ Permite ocultar determinadas funciones del área del administrador para roles concretos.
152
User control [En inglés] http://wordpress.org/plugins/user-control/ Permite desactivar usuarios sin necesidad de borrarlos, para así no perder sus datos en caso de necesitar activarlos más adelante.
4.4.5 Redes sociales en WordPress El auge de las redes sociales ha sido uno de los fenómenos de más repercusión en Internet en los últimos años. Como todos sabemos, se trata de comunidades online que se crean en torno a un determinado software o servicio web. Existen muchos tipos de redes sociales, algunas organizadas en torno a una temática como por ejemplo la música (myspace.com, last.fm), las imágenes (pinterest.com) el trabajo (linkedin.com) o las relaciones personales (twitter.com, facebook.com, Google+). El plugin más destacado en relación a las redes sociales es BuddyPress, que permite la creación de una completa red social dentro de nuestro sitio web WordPress. Sorprende lo avanzado de sus características: perfil de usuarios, creación de grupos, sistema de amistades, etcétera. La versión original está en inglés pero es posible descargar una traducción aquí: http://translate. wordpress.org/projects/buddypress/dev BuddyPress http://wordpress.org/plugins/buddypress/ Pero lo que los usuarios necesitamos más habitualmente no es crear una red social, sino conectar nuestro sitio web con nuestras redes sociales favoritas. Hoy en día, es casi indispensable valerse de ellas para conseguir la mayor difusión posible de cualquier noticia y esto incluye el contenido de nuestro sitio web. Para ello, existen plugins que añaden botones para compartir nuestro
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
contenido con distintos servicios de red social. Un ejemplo de ello es el plugin “Compartir de Jetpack” que hemos instalado en un capítulo anterior, pero existen otros que mostramos a continuación. Share Buttons by AddToAny http://wordpress.org/plugins/add-to-any/ Podemos elegir entre decenas de redes sociales para compartir y es sencillo de usar. Está parcialmente traducido al español. DigDig [En inglés] http://wordpress.org/plugins/digg-digg/ Permite situar los botones de compartir en una barra deslizante para que estén al alcance del visitante en todo momento. Share Buttons by AddThis [En inglés] http://wordpress.org/plugins/addthis/ Más de 300 redes sociales para compartir y opciones avanzadas de configuración. Shareaholic | share buttons & related posts [En inglés] http://wordpress.org/plugins/shareaholic/ Añade botones para compartir en diversas redes sociales y ofrece algunas funciones adicionales si nos suscribimos gratuitamente. La configuración es muy visual e intuitiva. Además de botones para compartir, existen otros plugins de funcionalidad variada que facilitan la integración de nuestro sitio web con las redes sociales. Estos son algunos ejemplos: WP to Twitter [En inglés] http://wordpress.org/plugins/wp-to-twitter/ Tuitea automáticamente en nuestra cuenta de Twitter cada vez que publicamos un nuevo post. Se puede seleccionar nuestro servicio preferido para acortar URLs. Facebook [En inglés] http://wordpress.org/plugins/facebook/ Es el plugin oficial de Facebook para WordPress. Añade botones de compartir y la posibilidad de publicar automáticamente en el muro de Facebook cada vez que añadimos un nuevo post. Social Traffic PopUp [Comercial] http://themeyourself.com/go/social-pop/ Demo: http://themeyourself.com/go/social-pop-demo/ Este plugin permite mostrar un PopUp tipo LightBox cada vez que un usuario llegue a una de las páginas relevantes de nuestro sitio para ofrecerle compartirlo antes de poder leerlo. Puede resultar bastante efectivo, pero algunos usuarios podrían considerarlo intrusivo.
4.4.6 Boletines electrónicos y suscripciones Llamamos boletín electrónico o newsletter al envío periódico por email de información sobre nuestro sitio web a usuarios que previamente se han suscrito para recibir estos correos. El tipo de información que se envía es variada: noticias sobre nuestro sitio web, avisos para los usuarios, publicación de ofertas, recordatorios de eventos, etcétera.
153
Aula Mentor
El usuario de Internet navega cada día por muchas páginas diferentes, al cabo de un mes ha podido visitar decenas, cientos o miles de ellas. Es muy difícil conseguir que recuerde nuestra web un usuario que nos ha visitado de forma puntual, bien porque nos haya encontrado a través de un buscador, por un enlace desde otra página, etcétera. Es muy habitual que ese usuario no vuelva nunca, incluso habiendo encontrado lo que buscaba y habiendo disfrutado de la experiencia en nuestra web. Una forma de fidelizar a los usuarios y lograr que nos visiten de forma recurrente es lograr que se suscriban a nuestro newsletter. De esta forma, tan sólo realizando un envío mensual podemos conseguir que vuelvan a visitar nuestra página y que se vaya reforzando el recuerdo de nuestra web en su memoria. Debemos tener en cuenta que el envío demasiado frecuente de boletines puede resultar contraproducente, porque el usuario puede considerar que invadimos su bandeja de entrada. Los sistemas de envío de boletines electrónicos constan de varias partes: - Un formulario para que el usuario se suscriba. - Una sección en nuestra área privada que nos permita administrar las suscripciones y editar los correos a enviar. - Un método para permitir al usuario cancelar la suscripción si así lo desea. A continuación mostramos una lista de plugins que permiten administrar un sistema de boletín electrónico. 154
MailPoet Newsletters (anteriormente Wysija) http://wordpress.org/plugins/wysija-newsletters/ Una de las mejores soluciones en la actualidad para el envío y la administración de boletines electrónicos. Tiene unos ajustes de configuración muy claros y sencillos y la posibilidad de crear el diseño de los boletines fácilmente mediante un sistema de arrastrar y soltar. Y además traducido a una gran cantidad de idiomas, incluidos español, catalán, euskera y gallego. Newsletter [En inglés] http://wordpress.org/plugins/newsletter/ Extensas opciones de configuración. Cuenta con varias plantillas para diseñar los boletines. MailChimp List Subscribe Form http://wordpress.org/plugins/mailchimp/ Un formulario de suscripción si queremos gestionar el envío de newsletters mediante la plataforma mailchimp.com.
4.4.7 Calendarios de eventos Muchas veces necesitamos que nuestro sitio web lleve un registro de eventos que nuestros visitantes puedan consultar fácilmente. Por ejemplo, el sitio web de un grupo pop necesita publicar sus próximos conciertos, o una página sobre astronomía puede valerse de un calendario para señalar acontecimientos del cielo nocturno. Aquí hay algunos plugins que pueden sernos útiles para estas cosas.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
The Events Calendar http://wordpress.org/plugins/the-events-calendar/ Permite administrar eventos y mostrarlos en un calendario o como lista. También incluye un widget que muestra un listado de los próximos eventos. All-in-One Event Calendar [En inglés] http://wordpress.org/plugins/all-in-one-event-calendar/ Permite elegir la página en la que mostrar el calendario. Los eventos pueden consultarse en cuatro vistas diferentes: mes, semana, día y agenda. Google Calendar Events [En inglés] http://wordpress.org/plugins/google-calendar-events/ Analiza los feeds del Calendario de Google (https://www.google.com/calendar/) y muestra los eventos allí publicados como rejilla mensual o lista en una página, post o mediante un widget.
4.4.8 Otros plugins destacados Advanced Custom Fields [En inglés] http://wordpress.org/plugins/advanced-custom-fields/ Un excelente plugin que nos permite añadir campos personalizados a nuestros posts. Recomendado sólo si somos usuarios avanzados. WordPress Download Manager [En inglés] http://wordpress.org/plugins/download-manager/ Nos permite administrar y mantener registro y control de las descargas de archivos de nuestro sitio web. Relevanssi - A Better Search [En inglés] http://wordpress.org/plugins/relevanssi/ Reemplaza el sistema de búsqueda por defecto de WordPress por un motor de búsqueda mejorado, con características adicionales y diversas opciones de configuración. WP-PageNavi http://wordpress.org/plugins/wp-pagenavi/ Reemplaza el sistema por defecto de navegación de WordPress, es decir los links “Entradas más antiguas” y “Entradas más recientes”, por un sistema mejorado que permite la navegación por páginas. bbPress http://wordpress.org/plugins/bbpress/ Permite la creación de un foro dentro de nuestro sitio web WordPress. Existe una gran cantidad de plugins que ofrecen funcionalidad adicional a este plugin aquí: http://wordpress.org/plugins/ search.php?q=bbPress Yet Another Related Posts Plugin (YARPP) http://wordpress.org/plugins/yet-another-related-posts-plugin/ Muestra una lista de posts relacionados con el actual, bien en una lista o con miniaturas de imágenes.
155
Aula Mentor
WPtouch Mobile Plugin [En inglés] http://wordpress.org/plugins/wptouch/ Activa automáticamente un sencillo tema para los usuarios que acceden al sitio web con un smartphone. WP Google Maps [En inglés] http://wordpress.org/plugins/wp-google-maps/ Permite insertar nuestra localización en Google Maps. Es una forma rápida de explicar a nuestros usuarios cómo llegar hasta nosotros o a cualquier otro lugar que necesitemos publicar. Disqus Comment System [En inglés] http://wordpress.org/plugins/disqus-comment-system/ Reemplaza el sistema de comentarios de WordPress por el de Disqus. WP-Polls [En inglés] http://wordpress.org/plugins/wp-polls/ Añade un sistema de encuestas para que los usuarios opinen sobre los temas que proponga el administrador del sitio web.
4.5 Sitios web multilingües WordPress no ofrece en su instalación básica soporte para la creación de sitios web bilingües o multilingües. Para implementar esta capacidad en nuestra web necesitamos el apoyo de un plugin. 156
La instalación de un plugin multilingüe es un reto para cualquier sitio web y, pese a que existen soluciones más o menos sencillas, generalmente administrar estos sitios implica un mayor esfuerzo por nuestra parte para la instalación, el mantenimiento y la tarea diaria de añadir contenidos. También reviste cierta complejidad interna, por lo que es preciso estar atentos a que todo nuestro sistema de plugins, temas y widgets funciona correctamente. Además, puesto que el uso de este tipo de plugins puede cambiar nuestra base de datos de forma significativa, es recomendable hacer una copia de seguridad antes de experimentar con estas herramientas. Existen diferentes tipos de plugins multilingües según la estrategia que siguen para traducir el sitio web: A. Un post por idioma Este tipo de plugin crea nuevos posts o páginas para cada versión idiomática y los relaciona entre sí asignándoles a cada uno un código de idioma. Ejemplos de este tipo de plugins son: Polylang http://wordpress.org/plugins/polylang/ xili-language http://wordpress.org/plugins/xili-language/ Bogo http://wordpress.org/plugins/bogo/ WPML [Comercial] http://wpml.org
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
B. Todos los idiomas en el mismo post Los plugins de este tipo almacenan las traducciones en los mismos registros de la base de datos que la entrada original. Son quizás más sencillos de usar, pero su arquitectura impide que podamos traducir funciones avanzadas de WordPress, como los campos personalizados. El plugin más popular de este tipo es el siguiente: qTranslate http://wordpress.org/plugins/qtranslate/ C. Traducción de la página una vez generada Las traducciones de cada página o post son automáticas, es decir, al seleccionar el visitante el idioma de destino, una “máquina” se encarga de hacer la traducción, aunque el plugin nos permite mejorar estas traducciones manualmente. La principal pega de estos plugins es que la traducción resultante suele ser de mala calidad. El ejemplo más conocido es: Transposh WordPress Translation http://wordpress.org/plugins/transposh-translation-filter-for-wordpress/ D. Varias instalaciones de WordPress en un entorno multisitio Es decir, instalamos varios sitios web idénticos excepto por el idioma y los hacemos conectar mediante un plugin, como por ejemplo: Multisite Language Switcher http://wordpress.org/plugins/multisite-language-switcher/ Multilingual Press Free http://wordpress.org/plugins/multilingual-press/ Si deseamos investigar más extensamente las funcionalidades que nos ofrecen otros plugins en torno al tema de la traducción de sitios web, podemos echar un vistazo en el directorio oficial de plugins de WordPress: http://wordpress.org/plugins/search.php?q=multilingual
4.6 Plugins para comercio electrónico La aparición de nuevas versiones de plugins de comercio electrónico en los últimos años ha propiciado que WordPress haya alcanzado la madurez suficiente como para ofrecer una alternativa seria a plataformas específicas como Prestashop, Shopify o Magento. Cuando proyectamos montar un pequeño negocio, con un presupuesto inicial no demasiado abultado y con un número no demasiado alto de artículos a la venta, WordPress es la opción ideal, mientras que si nuestro proyecto es más ambicioso y planeamos vender miles de productos es buena idea utilizar para ello una aplicación específica de comercio electrónico. Para hacernos una idea, si regentamos una firma internacional de tecnología con miles de artículos y accesorios no los pondríamos a la venta en una pequeña tienda de 80 metros cuadrados, y si tenemos una pequeña tienda de ropa y complementos no alquilaríamos un local comercial de varias plantas.
157
Aula Mentor
No es recomendable utilizar WordPress si creemos que vamos a generar un gran número de transacciones diarias. Tampoco obtendremos con WordPress informes de actividad tan completos y detallados como otras plataformas que están construidas desde su misma base para su uso en el comercio electrónico. Sin embargo, pese a que estas plataformas especiales, como Magento o Prestashop, pueden instalarse en servidores compartidos, una vez empiezan a llenarse de productos y visitas necesitan consumir una gran cantidad de recursos del servidor, por lo que tal vez nos veríamos obligados a contratar un servidor dedicado por un precio mensual mucho más alto si no queremos que en nuestro sitio web comience a fallar la velocidad de carga y la fluidez de funcionamiento. Son también más caras de mantener. Si nos vemos en la necesidad de contratar un profesional para alguna tarea concreta, nos va a costar más tiempo y dinero conseguir un buen profesional de Magento que uno de WordPress/WooCommerce. En general, los plugins que añaden a WordPress la funcionalidad de comercio electrónico ofrecen todos una serie de características comunes:
158
- Al añadir un artículo, se redirige al usuario a la página de carrito. - Se permite el registro de invitados en la página de pago. - Uso de SSL en el proceso de pago. - Se permite la creación y gestión de cupones de descuento. - Se ofrece un área especifica para gestionar el inventario. - Se permite introducir información relativa a los impuestos aplicables. - Se ofrecen diversos métodos de pago (Transferencia bancaria, Cheque, Paypal Standard, Skrill, contrareembolso) aunque de las pasarelas de pago más habituales en España tan sólo WooCommerce ofrece Servired. - Existen extensiones de compañías de logística como USPS, UPS o FedEx pero ninguna de compañías españolas. - Se ofrecen multitud de extensiones de pago para ampliar su funcionalidad. Los plugins estrella para el Comercio electrónico en WordPress son WooCommerce y Jigoshop. Es una buena práctica para el alumno interesado en abrir una tienda online instalar ambos para compararlos a fondo y decidir cuál es su preferido. Además, existe en Internet una extensa información adicional y comparativas que es buena idea consultar. WooCommerce - excelling eCommerce http://wordpress.org/plugins/woocommerce/ Jigoshop http://wordpress.org/plugins/jigoshop/ Easy Digital Downloads http://wordpress.org/plugins/easy-digital-downloads/ Este tipo de plugin es particularmente útil para la venta de productos digitales que no necesitan enviarse físicamente, sino que basta con que el usuario los descargue una vez efectuado el pago. Ejemplos de productos digitales son el software, los libros electrónicos, etcétera. El plugin es gratuito aunque ofrece un amplio repertorio de extensiones de pago para cubrir diversas necesidades.
Módulo 2. U5 Plugins para WordPress. Añadiendo funcionalidad
4.6.1 Temas para comercio electrónico Un aspecto a tener en cuenta cuando planeamos abrir una tienda online con WordPress es que debemos utilizar un tema o plantilla optimizado para el plugin que vayamos a usar. De manera que si, por ejemplo, hemos decidido que nuestra opción preferida es WooCommerce, debemos buscar temas específicos para WooCommerce. No existe mucha variedad de temas gratuitos para este tipo de plugins, así que es muy habitual utilizar uno de pago. WooCommerce WooCommerce ofrece varios temas gratuitos en su web oficial: http://www.woothemes.com/product-category/themes/free-themes/ El listado completo de temas a la venta se puede consultar aquí: http://www.woothemes.com/product-category/themes/ También se ofrece el acceso a todos los temas por un precio de alta más una cuota mensual: http://www.woothemes.com/theme-club/ Jigoshop Jigoshop ofrece un único tema gratuito en su web oficial: Skeleton http://jigoshop.com/product/simplethemes-skeleton/ El listado completo de temas a la venta se puede encontrar aquí: http://jigoshop.com/product-category/themes/ También podemos encontrar temas para plugins de comercio electrónico en las web de temas premium de las que hablábamos en el capítulo 3.2 de la unidad 4.
159
Aula Mentor
Unidad 6. Configurando WordPress
Llevamos prácticamente todo el módulo hablando de cómo configurar WordPress, así que debe de resultar chocante que inauguremos un nuevo capítulo para hablar sobre la configuración. ¿De qué configuración estamos hablando y en qué se diferencia de todo lo que hemos aprendido hasta ahora? Bien, hasta ahora hemos hablado de configurar aspectos concretos de nuestro sitio web, como su aspecto, mediante la elección de un tema, o su funcionalidad, mediante la instalación de plugins. Pero ahora vamos a hablar de los ajustes de configuración global de nuestro WordPress, que afectan al sitio web en su conjunto y que pueden encontrarse en el menú “Ajustes” de nuestra área de administración.
160
Estas opciones globales están divididas en varias subsecciones. Algunas nos van a resultar familiares, pero otras las conoceremos más adelante. En cualquier caso, vamos a tomarnos ahora un tiempo para visitar todas estas páginas y configurar las opciones globales de nuestro WordPress de acuerdo con nuestro proyecto. Si tenemos dudas con alguna opción, particularmente con aquellas que hacen referencia a materias que todavía no hemos estudiado, podemos dejarlas para más adelante.
1. El menú Ajustes 1.1 Ajustes → Generales Esta página contiene los datos de configuración más básicos de nuestro sitio web. En circunstancias normales, es decir si no estuviéramos siguiendo un curso, es una de las primeras páginas que configuramos nada más instalar WordPress. Vamos a ir por partes: Título y descripción Estos son los mismos campos que editamos anteriormente en la unidad 4 capítulo 5.1.1. Se trata, como ya dijimos, del título de la web y la descripción corta que sirve para resumir los objetivos de nuestro sitio, tanto para informar a nuestros visitantes como para que se sirvan de ella los robots automáticos de los motores de búsqueda. Si todavía no lo hemos hecho, este es un buen momento para decidir estos datos de forma más o menos definitiva, a estas alturas ya tendríamos que tener claro qué escribir aquí.
Módulo 2. U6 Configurando Wordpress
Direcciones URL A continuación tenemos un par de campos importantes que no es recomendable modificar si somos usuarios inexpertos. La dirección de WordPress y la dirección del sitio son las mismas por defecto, pero pueden ser diferentes si queremos. La primera define en qué directorio están los archivos Wordpress, es decir, el directorio de instalación, y la segunda define la URL que debe introducir el usuario para acceder a nuestro sitio web. Por ejemplo, podemos haber instalado nuestro WordPress en la carpeta llamada “wordpress”, pero aun así visitar nuestra web en la dirección http://localhost. Pero, por desgracia, no basta con modificar las URLs para que el cambio surta efecto, no todo iba a ser tan fácil con WordPress. En este caso habría que efectuar una serie de cambios en la ubicación de algunos archivos y editar algunas líneas de código, algo que excede los objetivos de este curso. Podemos encontrar una explicación pormenorizada de cómo lograrlo en la siguiente dirección en inglés: http://codex.wordpress. org/Giving_WordPress_Its_Own_Directory.
Dirección de correo La dirección de correo electrónico que hay a continuación es la que WordPress utiliza para enviarnos algunos avisos, por ejemplo cuando se registra un nuevo usuario o cuando hay un comentario a la espera de moderación (siempre y cuando esta opción esté activa). Aquí aparece por defecto el email que introdujimos al instalar WordPress, o sea nuestro email, así que en principio no deberíamos cambiarlo a no ser que, por algún motivo, decidamos usar otra cuenta para esta función. Una cosa más, hay que tener en cuenta que este email y el email del usuario “admin” son cosas diferentes aunque en este caso coincidan.
Fecha y hora Hay una serie de ajustes relativos a la fecha y hora. Debemos seleccionar nuestra zona horaria, el formato en el que queremos que se visualicen las fechas y las horas en nuestro sitio web y qué día de la semana debe mostrarse el primero en los calendarios.
161
Aula Mentor
Idioma del sitio Por último, podemos especificar el idioma de nuestro WordPress en el desplegable.
No debemos olvidar hacer clic en “Guardar cambios” para conservar los nuevos ajustes.
1.2 Ajustes → Escritura Mediante los ajustes de escritura se pueden controlar algunas opciones en torno a la interfaz gráfica en la que escribimos nuestros posts. 162 Formato Tenemos dos opciones de formato. La primera sirve para convertir automáticamente emoticonos y la segunda activa una función para corregir el código XHTML que introduzcamos en nuestras páginas y entradas. Si vamos a usar XHTML podemos activar esta casilla, puesto que un código inválido podría dar lugar a errores en nuestra web, pero hemos de tener en cuenta que, a veces, activar esta característica puede hacer que algunos plugins funcionen incorrectamente.
Categoría predeterminada y formato de entrada Todavía no hemos añadido categorías a nuestro sitio web. Cuando lo hagamos, deberemos volver a esta página si queremos que nuestras entradas pertenezcan por defecto a alguna de nuestras categorías, que aparecerán en el menú desplegable. También podemos elegir cuál será el formato de entrada que se muestre por defecto en el formulario de creación de entradas. Aprenderemos más sobre los diferentes formatos disponibles en un módulo posterior.
Módulo 2. U6 Configurando Wordpress
Publicar esto A continuación aparece una pequeña aplicación que podemos encontrar también en “Herramientas → Herramientas disponibles” y cuyo funcionamiento explicaremos un poco más adelante.
Publicar por correo electrónico Esta utilidad de WordPress permite publicar directamente una entrada que haya sido enviada a determinada dirección de correo. Sin embargo, el Codex de WordPress informa de que esta función dejará de formar parte de la instalación de WordPress en futuras actualizaciones, por lo que recomienda usar un plugin en su lugar si queremos servirnos de esta característica. Por ejemplo, cualquiera de los siguientes: Post By Email Plugin: http://wordpress.org/plugins/post-by-email/ Post by Mail in Jetpack: Forma parte del plugin Jetpack que instalamos en un capítulo anterior. Postie Plugin: http://wordpress.org/plugins/postie/
163
Aula Mentor
Servicios de actualización Por último, los servicios de actualización son herramientas web a las que enviamos un ping automáticamente para informar de que hemos actualizado nuestro blog. La mayoría de la gente utiliza Ping-o-matic, que es el que aparece por defecto en la caja de texto, pero hay muchos otros disponibles que podemos añadir, uno en cada línea. Estos servicios de actualización informan de nuestro ping a otros muchos servicios, de manera que las personas que visitan Technorati o Sphere pueden encontrar allí nuestros nuevos posts. De momento, está bien que dejemos el servicio por defecto, tal y como aparece en la siguiente imagen.
Para que podamos ver el campo de formulario de la imagen superior, es preciso que permitamos a los buscadores rastrear nuestra web en “Ajustes → Lectura” (Ver 1.3), algo que no es necesario en absoluto cuando estamos trabajando en local desarrollando nuestra web. En caso contrario veremos esto:
164 Por último, no hay que olvidarse de pulsar “Guardar cambios” para que la nueva configuración surta efecto.
1.3 Ajustes → Lectura Los ajustes de lectura nos van a permitir configurar ciertas opciones para mostrar el contenido de nuestra web. Página frontal Ya hemos tenido acceso a esta configuración en “Apariencia → Personalizar” (Ver Unidad 4 capítulo 5.1.1), pero también podemos definirla aquí si lo deseamos. Como ya sabemos, se trata de decidir qué queremos que se muestre en nuestra página principal. En general, si nuestro proyecto es un blog o similar, seguro que nos interesa mostrar nuestras últimas entradas, pero si planeamos hacer otro tipo de web tal vez nos interese que aparezca una página estática normal, que podemos seleccionar en el primer menú desplegable, o quizás prefiramos una página de entradas, que podemos seleccionar del segundo desplegable. Este último tipo de páginas están disponibles sólo si las incluye nuestro tema.
Módulo 2. U6 Configurando Wordpress
Número máximo de entradas Permite decidir cuántas entradas mostrar en los listados. Por ejemplo, si hemos decidido mostrar en la página principal nuestras últimas entradas, este número define el número máximo a mostrar por página. Nuestros visitantes podrán acceder a páginas anteriores mediante un enlace “Ver anteriores”.
Feeds Hablaremos de los feeds en otro módulo. Podemos configurar algunas opciones aquí.
165
Visibilidad para los buscadores Puede que esta característica nos suene, ya que hemos hablado de ella en el capítulo inmediatamente anterior (Ver 1.2). Cuando la seleccionamos, además de que dejan de enviarse pings cada vez que actualizamos un post, se cambian una serie de datos en el código para pedir a los buscadores que ignoren este sitio web y que se abstengan de hacerlo aparecer en sus listados. Puede ser útil seleccionar esta opción cuando estamos en la fase de desarrollo de nuestro sitio web y no queremos que aparezcan en Google, por ejemplo, páginas o entradas a medio terminar. Claro que es muy importante acordarnos de desactivarla una vez publiquemos nuestro sitio web de forma definitiva. También puede utilizarse cuando, por alguna razón, queremos que nuestra web se mantenga en un ámbito privado, aunque hay que tener en cuenta que eso no impide que cualquier usuario acceda a nuestro sitio y lo visite libremente, puesto que puede habernos encontrado por otros medios diferentes de los buscadores. Es decir, nuestra web seguirá siendo pública.
Para finalizar, hacemos click en “Guardar cambios”.
Aula Mentor
1.4 Ajustes → Comentarios En esta página podemos configurar todas las opciones que afectan a los comentarios de nuestras entradas y páginas. Una característica muy relacionada con los comentarios son los pingbacks y los trackbacks. Los trackbacks fueron desarrollados muy temprano en la historia de los blogs por los creadores de MovableType y los pingbacks fueron creados muy poco tiempo después para solucionar algunos problemas que la gente encontraba en los trackbacks. Ambos se diferencian muy poco, vamos a intentar explicar en qué consisten con un ejemplo: Supongamos que tenemos un blog sobre recetas de cocina y que, además, somos asiduos lectores de otros blogs del mismo tema. Un día leemos en un blog una entrada que explica una receta de pescado al horno. Nosotros conocemos una versión de esa receta para microondas y nos gustaría decírselo al autor del blog. Naturalmente, tenemos la opción de hacerlo en los comentarios de su entrada, pero nos gustaría que los visitantes de nuestro propio blog pudieran enterarse también. Por lo tanto, lo que hacemos es escribir en nuestro propio blog una entrada explicando la receta de pescado al microondas mencionando, claro está, que se trata de una versión de otra receta. Ahora viene lo importante, para avisar al otro bloguero de que hemos escrito esta entrada enviamos un trackback, que aparece como un comentario en la entrada original con un enlace a nuestra propia entrada.
166
Los pingbacks sirven exactamente para lo mismo, sólo que se envían de forma automática. Es decir, para seguir con nuestro ejemplo, nos hubiera bastado con escribir en nuestra entrada el enlace a la receta original. WordPress se encarga de leer el enlace y escribir automáticamente un comentario en la entrada de pescado al horno para avisar a su autor de que ha sido mencionada en otro blog. Nosotros no tenemos que hacer nada, excepto configurar nuestro Wordpress para que los pingbacks se envíen automáticamente. Este sería el aspecto de un trackback o un pingback en el área de comentarios. Como vemos, WordPress copia automáticamente un poco de texto de la entrada y lo muestra entre corchetes “[...]”.
Los trackback y los pingbacks fomentan la interactividad entre blogs, los ponen en comunicación, favorecen la creación de comunidades en torno a muy diversos temas y contribuyen a sentar las bases de lo que conocemos como blogosfera.
Módulo 2. U6 Configurando Wordpress
Ajustes por defecto de las entradas - La primera casilla da permiso a WordPress para que envíe un pingback a los blogs mencionados en nuestras entradas, tal y como explicábamos. - La segunda permite que recibamos notificación cuando otros sitios web añaden enlaces a nuestro sitio, es decir, permite que recibamos pingbacks y trackbacks. - La tercera permite que la gente escriba comentarios en nuestras entradas. Podemos modificar estas tres opciones en cada entrada en particular. Es decir, es posible prohibir comentarios en una entrada concreta.
Otros ajustes de comentarios A continuación se muestran algunas opciones añadidas para comentarios. Si no tenemos muy claro qué opciones escoger podemos esperar a hacerlo más adelante, una vez que estemos recibiendo comentarios reales de nuestros usuarios y nos podamos hacer una idea más realista de nuestras verdaderas necesidades o de lo que nos resulta más cómodo.
167
Moderación de comentarios Cada vez que un visitante quiere añadir un comentario, WordPress lleva a cabo una serie de comprobaciones antes de publicarlo en nuestro sitio web. Si ese comentario no cumple con los requisitos que especificamos en esta página, será enviado a una cola de moderación, para que nosotros, como administradores de la web, decidamos de forma manual si aprobamos o denegamos su publicación. La moderación de comentarios, además, es muy útil para detectar spam. Las opciones de moderación nos permiten establecer unas reglas generales bien para enviar comentarios automáticamente a la cola de moderación, o bien para marcarlos directamente como spam, mediante el uso de una lista negra.
Aula Mentor
Como decíamos antes, podemos dejar las opciones por defecto hasta que adquiramos experiencia con los comentarios de nuestros usuarios.
168
Avatares Un avatar es la imagen que aparece junto a nuestro nombre cuando, por ejemplo, escribimos un comentario en un blog. Por defecto, Wordpress utiliza Gravatar (Globally Recognized Avatars), que es un servicio que permite que podamos usar el mismo avatar en cualquier página web. En esta página podemos también configurar las opciones para los avatares. Puede ocurrir que el tema que tenemos instalado no permita el uso de avatares, por lo que no aparecerían aunque aquí especificásemos lo contrario.
Al finalizar, pulsamos el botón “Guardar cambios”.
Módulo 2. U6 Configurando Wordpress
1.5 Ajustes → Medios Los ajustes de medios hacen referencia a los archivos que subimos a nuestro sitio web. Tamaño de las imágenes Cuando subimos una imagen a nuestra web, WordPress crea automáticamente tres diferentes versiones de distinto tamaño (grande, medio y miniatura) para usar en distintos lugares según sea oportuno. En esta página podemos definir estos tamaños, con frecuencia para adaptarlos a las dimensiones particulares de nuestro tema. Si no tenemos experiencia en la edición de imágenes digitales o no estamos seguros de los tamaños que necesita nuestro tema, lo mejor es dejar las opciones por defecto.
Subida de archivos Seleccionando esta casilla permitimos a WordPress que ordene nuestros archivos según la fecha en la que los subimos. WordPress guarda los archivos en el directorio “wp-content/uploads/” por lo que, por ejemplo, un archivo subido el 19 de enero de 2014 estará en “wp-content/ uploads/2014/01/”. Si no tenemos una buena razón para cambiar esta opción, es buena idea dejarla como está.
Como siempre, al terminar hacemos clic en “Guardar cambios”.
1.6 Ajustes → Enlaces permanentes Supongamos que en la página principal de un periódico online se muestra una noticia sobre una película en la que tenemos un interés particular. Si queremos incluir un enlace a esa noticia en nuestro sitio web no debemos usar la dirección de la página principal del diario, digamos “http://www.diariodecine.com”, porque en un par de semanas la portada mostrará noticias completamente distintas. Debemos, en su lugar, dirigirnos a la página individual de la noticia y copiar su dirección, por ejemplo “http://www.diariodecine.com/una-pelicula-genial/”. Este sería su enlace permanente, es decir, al hacer clic en él vamos a ser conducidos siempre al mismo contenido. Por tanto, un enlace permanente o permalink es la dirección a un contenido específico de nuestra web.
169
Aula Mentor
WordPress nos permite configurar la estructura de nuestros enlaces permanentes. La estructura por defecto (http://localhost/wordpress/?p=123) no nos ofrece demasiadas pistas sobre el contenido de la página que vamos a visitar, pero existen otras opciones que son amigables con el usuario y que sí que nos dan una idea de la página a la que conducen, es lo que se llama “pretty permalinks” o “enlaces permanentes amigables”. Por ejemplo, podemos especificar que las direcciones de nuestras páginas estén basadas en el título de la entrada, “http://localhost/ wordpress/pagina-ejemplo/”. El uso de este tipo de enlaces amigables es muchísimo más crucial de lo que nos puede parecer a simple vista porque es de capital importancia para la optimización de nuestra web para buscadores (SEO). Por lo tanto, es recomendable que cambiemos estos ajustes ahora mismo y que escojamos cualquier opción excepto la predeterminada.
170
Importante: Para que los enlaces permanentes amigables puedan funcionar en nuestra web, es necesario que nuestro servidor web esté correctamente configurado, en concreto es preciso que nuestro servidor Apache tenga activo el módulo mod_rewrite. Las instalaciones de WampServer y MAMP lo activan por defecto, así que no deberíamos tener problemas en nuestro servidor local. Cambiar estas opciones sin mod_rewrite activo da lugar a un “Error 500 - Internal Server Error”. Otras veces nos encontramos con que el archivo .htaccess que tenemos en el directorio principal de WordPress no cuenta con derechos de escritura. Eso significa que deberemos añadir manualmente el pequeño código que aparece en esta misma página siguiendo las instrucciones que nos indican. Ajustes opcionales De forma opcional, podemos definir estructuras personalizadas para las páginas que muestran listados de todas las entradas pertenecientes a una determinada categoría o una determinada etiqueta.
Al terminar hacemos clic en “Guardar cambios”.
Módulo 2. U6 Configurando Wordpress
2. El menú Herramientas El menú “Herramientas” reúne unas cuantas funciones que nos pueden resultar de utilidad. Destacan particularmente los importadores de contenido desde otras plataformas y el exportador de contenido de nuestro sitio.
2.1 Herramientas → Herramientas disponibles En WordPress contamos con una herramienta para publicar de forma rápida contenido que encontramos mientras navegamos por Internet. Se trata del enlace “Publicar esto”, que podemos arrastrar a la barra de marcadores de nuestro navegador o a nuestra lista de favoritos para tenerlo siempre a mano. Para instalarlo arrastramos el enlace “Publicar esto” hasta la barra de marcadores y luego soltamos.
171
Al hacerlo, aparecerá un nuevo botón en nuestra barra que podemos pulsar cada vez que encontremos contenido interesante para publicar.
Aula Mentor
Cuando hacemos clic en el botón, se abre una ventana con un formulario que nos permite publicar nuestra noticia directamente, aunque un uso muy habitual es guardarla como borrador para terminar de redactarla más adelante con calma.
172
Otra herramienta que se reseña en esta página, aunque aparece como listado en la siguiente, es el conversor de etiquetas y categorías que, como su propio nombre indica, convierte nuestras categorías en etiquetas y viceversa. Para ello es necesario instalar un plugin siguiendo las instrucciones que nos aparecen en la página.
2.2 Herramientas → Importar Estas herramientas son muy útiles cuando estamos migrando desde otra plataforma y tenemos gran cantidad de datos que necesitamos insertar en nuestro nuevo sitio. Como vemos en la página, es posible importar datos de Blogger, LiveJournal, Movable Type, TypePad y Tumblr. En muchas ocasiones es posible importar entradas, comentarios, páginas, categorías, etiquetas y usuarios. También podemos importar RSS y enlaces en formato OPML. Tal vez no vayamos a usar estas herramientas de forma habitual, pero lo que probablemente usaremos más tarde o más temprano es el importador de datos de WordPress. Se suele utilizar para copiar datos entre distintas instalaciones de WordPress del mismo proyecto. Por ejemplo, entre una instalación en un servidor web y otra en un servidor local y viceversa. Para utilizar todas estas herramientas es necesario instalar antes el plugin correspondiente.
Módulo 2. U6 Configurando Wordpress
Por ejemplo, para importar desde un archivo de exportación de WordPress a otro sitio WordPress hay que seguir los siguientes pasos: 1. En la página “Herramientas → Importar” hacer clic en “WordPress”. 2. Instalar el plugin “WordPress Importer”, si aún no está instalado, haciendo clic en el botón “Instalar ahora” (si ya está instalado, pasar directamente al paso 4). 3. Seguir el proceso pulsando el enlace “Activar plugin y comenzar importación”. 4. Subir el archivo de exportación con extensión .xml a través del formulario. 5. Nos preguntarán si queremos asignar los autores del archivo de exportación a algún usuario de nuestro blog. Podemos asignarles un usuario existente o crear uno nuevo. 6. A continuación WordPress comenzará la importación.
2.3 Herramientas → Exportar En esta página podemos crear un archivo de exportación XML para guardar en nuestro ordenador el contenido de nuestra web, incluyendo entradas, páginas, comentarios, campos personalizados, categorías, etiquetas y usuarios. Este archivo puede ser importado más tarde por otra instalación de WordPress desde la página “Herramientas → Importar”. El proceso de exportación es muy sencillo, tan sólo hay que definir lo qué queremos exportar aplicando los filtros que aparecen y pulsar “Descargar el archivo de exportación”.
173
Módulo 3. Unidad 7. La creación de contenido Unidad 8. La edición de textos en WordPress Unidad 9. Contenido audiovisual Unidad 10. Categorías, etiquetas, páginas y menús
Aula Mentor
Unidad 7. La creación de contenido
Si existe una receta que garantice el éxito de un sitio web, no cabe duda de que su principal ingrediente es el contenido, todo lo demás es un complemento. El diseño, la funcionalidad, las estrategias SEO, la interconexión con las redes sociales son importantes puesto que facilitan, o deberían hacerlo, el acceso del usuario al contenido. Pero una web con un contenido pobre, irrelevante o mal estructurado está destinada al fracaso por muchos artificios de los que queramos dotarla. Esto es así porque lo que de verdad buscamos los usuarios en Internet es el contenido, es decir, textos, imágenes, vídeo o audio, cualquier elemento que podamos leer, ver o escuchar. Si nuestro contenido es interesante y de calidad, está bien estructurado y es de fácil acceso para el usuario que visita nuestra web es mucho más probable que la gente enlace con nuestro sitio, lo que se traduce en un mejor nivel de SEO y una mejor posición en los buscadores. 176
Y sin embargo, a menudo nos volcamos tanto en los aspectos técnicos y visuales del desarrollo de nuestra web que relegamos la creación de contenidos y, particularmente, la redacción de textos a un puesto de menor importancia. En el desarrollo de los sitios web profesionales puede haber muchas personas implicadas, por un lado están los clientes y por otro lado un equipo que puede incluir programadores, diseñadores y creadores de contenido, como por ejemplo redactores, fotógrafos o editores de vídeo. En los sitios web de menor presupuesto encontramos a menudo que detrás de todas esas figuras hay una sola persona. Cuando estamos solos en esto, un sitio web WordPress asume con solvencia las figuras del programador y del diseñador, pero no puede reemplazar a los creadores de contenido, que desempeñan una labor crucial. Parece que cuando instalamos un tema ya tenemos todo hecho, pero lo cierto es que no hemos hecho más que empezar. Para poner en marcha nuestro proyecto con ciertas garantías de éxito necesitamos convertirnos en buenos creadores de contenido. Existen abundantes manuales y cursos que explican cómo crear páginas web, pero son menos los que, además, explican cómo dotar al sitio web de contenido relevante, tal vez porque se asume que la creación de contenidos es tarea particular del promotor de la web. Esto es cierto en parte, pero hay muchas cosas que podemos hacer para mejorar nuestros contenidos y en este curso vamos a tratar de aprenderlas.
1. Conceptos clave en la creación de contenido Para que un sitio web tenga éxito debe albergar contenido de calidad, del mismo modo que para cocinar un plato delicioso es necesario contar con buena materia prima. Pero no todos los cocineros tienen la misma pericia, ni todos los sitios web logran obtener ese toque que los hace verdaderamente especiales y valiosos.
Módulo 3. U7 La creación de contenido
Un sitio web debe estar vivo, ser cambiante y lo suficientemente flexible como para adaptarse con elegancia al medioambiente de progreso vertiginoso que es Internet hoy en día. Los usuarios son capaces de percibir esa sensación de vitalidad y frescura en los sitios web que la poseen y es esa sensación lo que hace que la gente vuelva una y otra vez y que quiera colaborar, contribuir, ser parte de ello. Son sitios que sirven de referencia en su sector y que crean comunidades de personas en torno suyo.
1.1 El cliente es lo primero Nuestro sitio web no es para nosotros, sino para nuestros usuarios. Nuestra labor es crear contenido que les resulte de utilidad, es decir: - que les sirva para solucionar un problema, - que responda a sus dudas o a las preguntas que se hacen sobre determinado tema, o - que satisfaga sus necesidades. Nuestra tarea es también estructurar ese contenido de forma que puedan acceder a él de forma rápida, cómoda y satisfactoria. Estos principios pueden parecer algo obvio, pero es sorprendente el número de sitios web que no los ponen en práctica. Por ejemplo, no es raro que en las reuniones de una empresa con los desarrolladores de su web surjan este tipo de comentarios: - Queremos destacar en nuestra web muestro proceso de producción poniendo énfasis en la descripción detallada de nuestra maquinaria. - No queremos que aparezca el precio de nuestros productos para así forzar a los usuarios a que se pongan en contacto con nosotros. - En el formulario de contacto vamos a pedir que rellenen una serie de preguntas y datos muy detallados que nos ayuden a llevar a cabo una venta. El problema de este tipo de enfoque es que no está orientado a las necesidades del usuario sino a las necesidades de la empresa. Cualquier usuario seguramente está más interesado en el precio del producto que en cómo se produce, y si tuviera que rellenar un enorme formulario para solicitar información no tardaría más de un segundo en abandonar la página para ir a la de la competencia a toda velocidad. Por eso, cuando estemos creando el contenido de nuestra web debemos ponernos siempre en la piel del usuario, pensar en qué tipo de información estaría interesado y en cómo lograr que tenga fácil acceso a esa información.
1.2 Es bueno ser previsible Los estudios del experto en usabilidad web Jakob Nielsen sugieren que la gran mayoría de los usuarios de Internet escanean con la mirada las páginas web para encontrar información útil tan rápido como sea posible. Cada vez que un usuario visita una página nueva, debe hacerse un plano mental de su funcionamiento con el objeto de encontrar lo que busca, por eso es muy recomendable seguir ciertos estándares en cuanto a la distribución de la información. Por ejemplo, se suele acceder
177
Aula Mentor
a la información de contacto a través de un enlace visible en la parte superior de la página, en el menú de navegación o en el pie de página. Si situamos ese enlace en un sitio fuera de lo común se lo estamos poniendo difícil al usuario, se sentirá frustrado si no lo ve a primera vista y es posible que pierda la paciencia y se marche antes de encontrarlo. Utilizar los términos más habituales para los nombres de nuestras páginas y secciones también ayudará al usuario a encontrar rápidamente lo que busca. Por ejemplo, todos sabemos a qué conducen las secciones “Inicio”, “Productos”, “Servicios”, “Noticias”, “Quiénes somos”, “Contacto”, etcétera. Un usuario que trata de buscar la palabra “Contacto” puede pasar por alto un título tan poco apropiado para esa sección como “Comunicaciones”. También, es importante limitar el menú a 6-8 elementos por nivel. Un menú con demasiados elementos va a dificultar al usuario encontrar lo que busca.
2. Cómo redactar textos de calidad para nuestra web Es importante comprender que el texto de un sitio web es primordial incluso en aquellos casos en los que la mayor parte del contenido sea audiovisual. Puede parecer que, para proyectos como la web de un fotógrafo, un artista o muchos otros, las imágenes deberían ser el mejor argumento. Y seguramente lo son, pero incluso en esos casos vamos a necesitar cierta cantidad de texto que permita posicionar nuestra web en los buscadores. En efecto, el texto es importante no sólo porque ofrece a los usuarios una forma de comunicación lingüística sino porque para Google una web sin texto es casi como si fuera invisible. 178
Redactar textos para la web no es lo mismo que redactarlos para impresión. El lector de una página web no la lee de la misma forma a como leería un libro, sino que ojea la página buscando información de su interés, presta más atención a los títulos y a los destacados, lee unas pocas palabras de cada párrafo con el objeto de hacerse una idea de su contenido y pasa de forma abrupta al siguiente párrafo o a cualquier otra área de la página. Por lo tanto, el éxito en la redacción del texto de una web depende de que los textos sean concisos, objetivos y fácilmente “escaneables”. Textos claros y concisos En la web no sirve de mucho andarse por las ramas, usar palabras rebuscadas o adjetivar en exceso. Es mejor exponer claramente la información y redactarla con la mitad de palabras (o menos) que usaríamos en la escritura convencional. Ser sinceros y dejarnos ver tal y como somos Los usuarios odian la palabrería asociada al marketing y la detectan a la legua. Tenemos que evitar los textos institucionales o la jerga del mundo empresarial. Es preferible redactar nuestros textos en lenguaje coloquial, ya que favorecen la cercanía con el visitante. Crear contenidos propios Escribir nuestros propios textos en vez de copiarlos es importante porque enriquece Internet y aumenta la cantidad de datos disponibles en nuestra lengua materna. Pero además, Google reconoce y penaliza a los que copian hasta el punto que la calidad del contenido y que éste sea de creación propia son los principales factores que inciden en el índice SEO. Por todas estas razones, debemos abstenernos de plagiar. Para escribir textos originales es preciso concentrarnos en nuestras propias ideas y opiniones para dar con nuestro punto de vista único sobre cualquier tema.
Módulo 3. U7 La creación de contenido
Existen varias herramientas online que permiten detectar los plagios en los textos. Podemos usar por ejemplo http://www.plagium.com para comprobar que nuestros textos son considerados originales. La credibilidad es importante Los usuarios no conocen quién está detrás de la información en Internet y no tienen la certeza de que pueden confiar en nuestra web. Podemos hacer que nuestra página trasmita credibilidad mediante un diseño cuidado que preste atención a los detalles. En cuanto a los textos, deben estar bien redactados, bien estructurados y no contener faltas de ortografía, debemos usar un corrector automático si es necesario. Por otra parte, debemos ser francos y objetivos. Evitar las exageraciones, ya que despiertan desconfianza. El lenguaje grandilocuente aviva fácilmente suspicacias. Evitar las burlas y las descalificaciones gratuitas a la competencia. Demostremos nuestra profesionalidad. Es preferible que la sección “Quiénes somos” sea sencilla y sincera y, si nos sentimos cómodos con ello, podemos añadir un tipo de información de índole más personal aunque no tenga que ver con el tema del sitio web, por ejemplo nuestros gustos, aficiones, sueños u objetivos. Esto ayudará al usuario a conocer y empatizar con la persona real que está tras nuestro sitio. Emplear títulos y destacados Los títulos y subtítulos ayudan al usuario a obtener información rápida de lo que va a encontrar en el texto, por lo que estos titulares deben ser descriptivos y estar cargados de significado. Es preciso escogerlos con mucho cuidado, es mejor que sean cortos y, si queremos, podemos hacerlos impactantes para así llamar la atención del usuario. Texto en pirámide invertida El usuario de Internet lee las primeras líneas de los textos y enfoca su atención en otra cosa si no conseguimos mantener su interés, por lo tanto es conveniente estructurar el texto presentando los datos de mayor a menor importancia, del mismo modo como se redactan las noticias periodísticas. Esta forma de organizar la información se llama en pirámide invertida y en ella se trata de dar respuesta, por este orden, al qué, quién, cuándo, dónde, por qué y cómo. Una idea por párrafo Si los usuarios no encuentran respuesta a lo que buscan en el primer párrafo después de leer las primeras líneas, saltan al siguiente. Esto sugiere que en cada párrafo debemos desarrollar una idea nueva, puesto que si seguimos redundando en el tema del primer párrafo es mucho más probable que el usuario abandone la lectura. Listas de viñetas Si debemos exponer varios puntos sobre un tema es preferible enumerarlos en una lista de viñetas que desarrollarlos en el texto, ya que permite al usuario asimilar la información de un vistazo. Resaltado de conceptos clave Los expertos defienden el resaltado de palabras clave dentro del texto mediante variantes de estilo, por ejemplo negritas. No es aconsejable resaltar palabras o frases mediante el cambio de color del texto porque podrían confundirse fácilmente con enlaces.
179
Aula Mentor
3. Usabilidad y Experiencia de Usuario (UX) La experiencia de usuario (UX) es una disciplina que estudia la interacción de un usuario con un determinado producto y examina los factores, tanto objetivos como subjetivos, que influyen para que esa interacción sea satisfactoria. Los factores de los que depende la experiencia de usuario en un sitio web incluyen un amplio abanico de áreas: el software empleado, el diseño visual, la usabilidad, el diseño de interacción, la calidad de los contenidos y un largo etcétera. El estudio de la experiencia de usuario tiene también en cuenta ciertos aspectos subjetivos, como los que hacen referencia a las emociones, los sentimientos o la sensación de confianza que se inspira. La usabilidad es uno de los factores más importantes que influyen en la experiencia de usuario. Según Jakob Nielsen, considerado el padre de la usabilidad web, “la usabilidad es un atributo de calidad que mide la facilidad de uso de las interfaces web”. Es decir, nuestro sitio web es más usable cuanto más fácil y rápidamente pueda alcanzar el usuario sus objetivos en él. La palabra usabilidad también se refiere a “los métodos para mejorar la facilidad de uso durante el proceso de diseño”. La oferta de sitios web en Internet es amplísima, por lo que si no somos capaces de explicar claramente quiénes somos y lo que ofrecemos, si nuestra web es difícil de usar y nuestros textos difíciles de leer, el usuario simplemente se irá a otro sitio. Por eso el estudio de la usabilidad de nuestra web es crucial.
180
Hay una serie de conceptos UX que es conveniente conocer para desarrollar un sitio web. Algunos de ellos nos han sido dados de antemano al elegir nuestro tema, pero hay otros que podemos poner en práctica ahora que vamos a empezar a crear y a estructurar nuestros contenidos. Estas técnicas y conceptos para mejorar la experiencia de usuario en general y la usabilidad en particular son demasiadas como para poder extendernos en ellas tanto como quisiéramos pero, en todo caso, vamos a enumerar algunas ideas en las que debemos reflexionar y algunas buenas prácticas que no debemos olvidar: Facilidad ¿Entienden nuestros usuarios fácilmente la interfaz de nuestro sitio web? Eficiencia Una vez que han comprendido la interfaz, ¿cuánto tardan en cumplir las tareas básicas? Por ejemplo, suscribirse a nuestro boletín, usar el formulario de contacto, comprar un artículo o cualquier otro objetivo que hayamos definido previamente. Recordabilidad Al volver a nuestra web pasado un tiempo, ¿les resulta fácil recordar la interfaz y los pasos a seguir para efectuar acciones? Efecto sorpresa ¿Utilizamos alguna técnica para impresionar a nuestros usuarios con el objeto de que permanezcan en nuestra web o vuelvan a ella con frecuencia? Satisfacción ¿Se sienten cómodos los usuarios usando nuestra web o les genera impaciencia o frustración? Utilidad ¿Consigue el usuario cumplir sus objetivos en nuestro sitio web?
Módulo 3. U7 La creación de contenido
Legibilidad Un texto legible se lee más rápidamente y es más fácil de comprender. Estos son algunos consejos para mejorar la legibilidad de nuestros textos: - Para el texto corrido es recomendable utilizar una tipografía que haya sido especialmente diseñada para un medio digital, como las pantallas de los ordenadores. Por ejemplo Arial, Verdana, Trebuchet, Times New Roman, Georgia o Courier New. - Limitar el uso de fuentes externas. - Utilizar un tamaño de fuente igual o superior a 12px. - Evitar el uso de la alineación justificada. - Encontrar un valor adecuado para el interlineado. No dejar las lineas demasiado juntas ni demasiado separadas. - Procurar que no haya más de 20 palabras por línea, alrededor de 500px de anchura. - Dejar suficientes márgenes alrededor de los textos, particularmente el margen izquierdo que es donde comienza la lectura (o el margen derecho en idiomas en los que se escribe de derecha a izquierda (RTL)) - Elegir el color de los enlaces de forma que destaque lo suficiente con respecto al resto del texto y al fondo.
4. Algunas ideas para la creación de contenido Todos hemos sufrido alguna vez el síndrome de la página en blanco, ese bloqueo psicológico que ocurre a veces cuando tratamos de empezar algún trabajo desde cero. Nos quedamos paralizados frente a la pantalla del ordenador mientras nuestra mente se vacía misteriosamente. No se nos ocurre nada. En Internet hay cientos de consejos para combatir el temido síndrome que van desde desconectar y darse un paseo, hasta utilizar la técnica del brainstorming. Los sitios web que deben actualizarse con frecuencia, como los blogs, nos obligan a estar siempre discurriendo cuál será el siguiente post a publicar, por lo que seguramente necesitaremos echar mano de algunas ideas. Los listados Por lo visto, los usuarios de Internet tenemos una obsesión casi enfermiza por las listas. Con títulos del tipo “Las 100 mejores películas de ciencia ficción de todos los tiempos” o “Las 10 cosas que no pueden faltar en una fiesta”, las entradas que contienen listados son un éxito de visitas en innumerables webs. Podemos ir pensando en ideas para elaborar las nuestras. Noticias de actualidad En Internet no faltan noticias generalistas, pero puede que las que se refieren exclusivamente a nuestro sector o a nuestro nicho de mercado no sean tan abundantes, por lo que podemos aumentar el tráfico y la reputación de nuestra web si las publicamos con regularidad. Recopilación de recursos Si andamos cortos de ideas, podemos compartir con nuestros usuarios colecciones de recursos de los temas que conocemos a fondo. Por ejemplo, “Las mejores apps para viajar” o “Tipografías gratuitas de fantasía”. Compartir nuestras experiencias Publicar nuestros éxitos o fracasos en diversas actividades puede ser una información de mucho interés para otros usuarios que buscan datos específicos para llevar a cabo esas mismas
181
Aula Mentor
actividades. Ejemplos de este tipo de artículos serían “Cómo instalar RAM en un portátil” o “Errores comunes al hacer dieta”. Selecciones temporales “Lo mejor de” Alrededor de diciembre proliferan las selecciones de lo mejor o lo peor del año en muy distintas áreas, así que podemos realizar nuestra contribución particular de los temas que dominamos. Contenidos intemporales Para paliar el hecho de que los contenidos de nuestra web se vayan desfasando con el paso del tiempo, conviene crear una serie de contenidos independientes del tiempo y de las modas, de manera que sigan siendo útiles en los años por venir. Encuestas Cada cierto tiempo, podemos lanzar encuestas entre nuestros lectores cuyos resultados podemos publicar más tarde, tal vez con datos interesantes para personas con intereses similares a los nuestros. Reutilizar nuestros textos Después de haber trabajado para redactar un texto interesante, atrayente y conciso es una pena no reutilizarlo, por ejemplo en nuestro boletín electrónico.
182
Módulo 3. U8 La edición de textos en WordPress
Unidad 8. La edición de textos en WordPress
Al principio del manual hablábamos de cómo un blog giraba en torno a la idea de un conjunto de entradas que se muestran en orden cronológico inverso. Estas entradas, junto con las páginas estáticas, son los principales medios de incorporar textos a nuestra web. Añadir textos, en su forma más sencilla, apenas requiere de ninguna explicación. Para crear una entrada simplemente tenemos que ir a “Entradas → Añadir nueva”, rellenar los campos en blanco y pulsar “Publicar”. Nuestra entrada aparecerá reflejada en nuestra web inmediatamente después.
183
Sin embargo, ocurre como con cualquier otra utilidad de WordPress, está diseñada para que su uso resulte lo más sencillo y natural posible pero, sin embargo, es lo suficientemente flexible como para adaptarse a los usos más complejos. Por lo tanto, vamos a profundizar un poco más en esta excelente herramienta para descubrir cuánto puede dar de sí y qué puede hacer por nosotros.
Aula Mentor
1. Las entradas o posts Como habremos comprobado al echar un vistazo general a la página para crear entradas, además de un campo para introducir nuestro texto hay una serie de datos que podemos configurar, como el formato, las categorías a las que pertenece la entrada, las etiquetas asociadas y una imagen destacada. Pero estos datos no son los únicos que podemos asignar a una entrada, hay algunos que no aparecen por defecto para evitar confusiones por exceso de información, pero que podemos mostrar si lo deseamos al activarlos en “Opciones de pantalla”.
Estos otros datos ocultos por defecto son “Extracto”, “Enviar trackbacks”, “Campos personalizados”, “Comentarios”, “Slug” y “Autor”. Vamos a estudiar en detalle todas estas opciones. 184
Título Aquí debemos introducir, obviamente, el título de nuestra entrada. Podemos usar cualquier carácter, incluyendo signos de puntuación y símbolos de interrogación o exclamación, por ejemplo “La primera entrada de mi blog sobre arte, diseño y comunicación. ¡Por fin!” Un detalle a tener en cuenta es que WordPress genera automáticamente un enlace permanente basándose en el título de la entrada, pero eliminando del mismo los caracteres no compatibles con una URL. En nuestro ejemplo el enlace permanente sería “http://localhost/wordpress/laprimera-entrada-de-mi-blog-sobre-arte-diseno-y-comunicacion-por-fin”. El nombre generado por WordPress al hacer el título compatible con la URL es lo que se conoce como “slug”, es decir el slug en este caso sería “la-primera-entrada-de-mi-blog-sobre-arte-diseno-y-comunicacion-por-fin”. Como vimos en un capítulo anterior, este tipo de enlace permanente es amigable con el usuario puesto que permite dar una pista del contenido al que conduce, al contrario que otros enlaces que contienen variables y códigos alfanuméricos ininteligibles para el lector. Y además, favorece el posicionamiento de la entrada en los buscadores. Si lo creemos necesario, podemos editar el slug haciendo clic en “Editar”.
Módulo 3. U8 La edición de textos en WordPress
Editor de textos En esta área es donde vamos a introducir nuestros textos o cualquier otro contenido que queramos aportar a nuestra entrada. Hablaremos en profundidad de su uso en un capítulo exclusivo un poco más adelante.
Bloque de publicación Esta área contiene los botones y enlaces que controlan el estado de nuestra entrada. Ya conocemos la función del botón “Publicar” que, como su nombre indica, publica la entrada directamente en nuestra web. El botón “Guardar borrador” nos permite guardar entradas que todavía no están listas para su publicación, y el botón “Vista previa” nos muestra el aspecto que tendrá la entrada en nuestro sitio web una vez publicada. Además, podemos desechar nuestra entrada pulsando en el link “Mover a la papelera”.
Hablemos ahora sobre los estados. Nuestra entrada permanece en el estado “Borrador” hasta que la publicamos. Al hacerlo, pasa al estado “Publicada”.
185
Aula Mentor
El estado “Pendiente de revisión” es útil cuando trabajamos en un entorno editorial en el que otra persona se encarga de revisar y publicar nuestras entradas. Aunque si trabajamos nosotros solos también podemos utilizar este estado como recordatorio. Podemos asignar este estado a nuestra entrada pulsando en el enlace “Editar” junto a la definición del estado.
Al cambiar el estado a “Pendiente de revisión” el botón “Guardar borrador” se convierte en “Guardar como pendiente”. Es el que tenemos que pulsar para guardar la entrada con ese estado.
Otro factor que podemos editar es la visibilidad de nuestra entrada. Podemos hacerla pública, privada o protegida con contraseña. Si la entrada es pública podemos hacer que aparezca siempre en la parte superior de la página principal de entradas si seleccionamos “Fijar esta entrada en la página”. Los alumnos acostumbrados a la jerga de los foros seguramente conocerán esta opción con el nombre de Sticky Post o Sticky Thread.
186
También podemos programar la publicación de una entrada para una fecha futura si hacemos clic en el enlace “Editar” de la sección “Publicar inmediatamente”. Al introducir una fecha futura, el botón “Publicar” se convierte en el botón “Programar”, que debemos pulsar para confirmar la publicación diferida. En esta sección podemos también asignar una fecha pasada a una entrada si lo necesitáramos por alguna razón legítima.
Módulo 3. U8 La edición de textos en WordPress
Bloque de formato Este bloque permite que definamos nuestra entrada según ciertos formatos predefinidos. Esto posibilita que podamos mostrar cada formato con una plantilla diferente diseñada específicamente para ello. Sin embargo, es importante señalar que estas plantillas pueden existir o no dependiendo del tema que hayamos elegido. Es decir, a veces es posible que aunque señalemos una entrada con formato de vídeo, por poner un ejemplo, esta se visualice con el mismo diseño de cualquier entrada normal porque la plantilla predeterminada para vídeo no existe en el tema que tenemos activo.
187 Bloque categorías En este bloque podemos asignar nuestra entrada a una o varias de las categorías que hayamos creado para nuestro sitio web. Podemos también crear nuevas categorías haciendo clic en en enlace “+ Añadir nueva categoría”.
Aula Mentor
Bloque etiquetas En este bloque podemos asignar a la entrada nuevas etiquetas o seleccionarlas de entre las más utilizadas.
188
Imagen destacada Una entrada puede contener tantas imágenes como queramos, pero este bloque permite que definamos una de ellas como imagen destacada. Sería algo así como la imagen principal de la entrada que a menudo se visualiza de forma especial dependiendo del tema que hayamos elegido. Al hacer clic en “Asignar imagen destacada” se abre la librería multimedia de nuestro sitio web, que aprenderemos a gestionar un poco más adelante.
Extracto El extracto es un resumen introductorio de la entrada que se usa en nuestro sitio web en lugares en los que es preferible mostrar una breve descripción en vez del contenido completo. Estos lugares, dependiendo del tema que tengamos activo, suelen ser los archivos mensuales, los listados por autor o por categoría, los resultados de la búsqueda o los feeds RSS cuando lo hayamos especificado en las opciones correspondientes. No hay límite en la extensión que podemos dar a un extracto, pero lo más habitual es utilizar dos o tres frases, ya que se trata de resumir brevemente el contenido completo de la entrada. Si lo deseamos, no hay ningún problema en dejar este campo vacío. El extracto del que estamos hablando aquí es un extracto manual opcional, pero WordPress tiene además otros dos métodos para crear extractos en ausencia de este último.
Módulo 3. U8 La edición de textos en WordPress
- Extracto automático: Si no hemos redactado ningún extracto, WordPress utiliza las 55 primeras palabras de nuestra entrada para crear uno. - Avance o teaser: A veces podemos incluir manualmente en nuestra entrada una etiqueta More o “Leer más” (ver unidad 8, capítulo 2.2) en el lugar del texto que prefiramos. En algunos casos, el texto anterior a esa etiqueta es el que se usa como extracto.
Enviar trackbacks Tal y como explicábamos en el capítulo 1.4 de la unidad 6, podemos enviar trackbacks a los sitios web que mencionamos en nuestra entrada o a quienes, por alguna razón, queremos informar de que hemos escrito un post que les puede interesar. Tendríamos que hacerlo en este bloque, separando todas las direcciones con espacios, pero hay que tener en cuenta que, para avisar a sitios WordPress modernos, tan sólo es necesario añadir los enlaces en el texto de la entrada, ya que WordPress se encarga de hacerlo automáticamente mediante pingbacks. Es por ello que últimamente los trackbacks están cayendo en desuso y sólo usaremos este bloque cuando sepamos con certeza que el sitio al que queramos avisar utiliza un sistema antiguo.
189
Aula Mentor
Campos personalizados Los campos personalizados son una característica utilizada principalmente por los creadores de temas y de plugins para añadir cierta información o funcionalidad a los sitios web. Podremos hacer tal vez uso de ellos cuando nos convirtamos en usuarios avanzados.
190
Comentarios Este bloque permite personalizar las preferencias referentes a los comentarios para cada entrada particular. Las opciones seleccionadas aquí prevalecen sobre las especificadas en “Ajustes → Comentarios”.
Y cuando la entrada contenga comentarios de nuestros usuarios, podremos administrarlos de forma rápida desde aquí.
Módulo 3. U8 La edición de textos en WordPress
Slug Como hemos dicho antes, el slug es el nombre utilizado por WordPress en la URL para acceder a la entrada a través de un enlace permanente amigable. El slug se genera automáticamente al introducir el título de la entrada, aunque podemos utilizar el que queramos siempre que cumpla con los requisitos de formato de una URL. Lo usual es utilizar sólo caracteres en minúsculas y guiones, evitando tildes y caracteres especiales como la eñe.
Autor Mediante este despegable podemos asignar a la entrada el autor que deseemos de entre los que se encuentran registrados en nuestra web.
1.1 Autoguardado y revisiones WordPress guarda de manera automática los cambios que realizamos en nuestras entradas cada pocos minutos, de manera que podamos recuperar el trabajo realizado en caso de existir algún problema con nuestro ordenador o nuestra conexión o de habernos olvidado de guardar los cambios nosotros mismos. También guarda automáticamente las distintas revisiones que se hacen a las entradas publicadas. Se puede acceder a este sistema en el bloque “Publicar”, siempre y cuando haya habido alguna revisión de la entrada. Al hacer clic en en enlace “Explora” se abre una página especial donde podemos comparar la versión actual de la entrada con las anteriores. Existe también una función para restaurar cualquier versión anterior.
191
Aula Mentor
2. El procesador de textos El campo de formulario donde se introduce el texto de nuestras entradas es muy similar a cualquier procesador de textos que estemos acostumbrados a usar normalmente en nuestro ordenador. Podemos aplicar negritas, cursivas, subrayados y otros estilos de uso común. Pero además, podemos aplicar estilos y características propios de HTML.
2.1 Conceptos básicos de HTML El editor de textos de WordPress crea automáticamente el código HTML que sea necesario para mostrar los textos correctamente en nuestra web, así que no necesitamos aprender HTML. Pero para obtener el mayor rendimiento y flexibilidad del editor es buena idea conocer al menos los rudimentos de este lenguaje de programación. La estructura básica de un texto HTML se vale de lo que llamamos “etiquetas” (o tags) dentro de corchetes angulares (< y >), que sirven para rodear fragmentos de texto y, de esta forma, otorgarles cierto significado. Por ejemplo, para enfatizar un texto podemos rodearlo de las etiquetas . es la etiqueta de inicio y es la etiqueta de cierre. De manera que este código HTML:
192 Mostraría este texto en el navegador:
Si quisiéramos aprender HTML, tendríamos que conocer cómo estructurar un documento HTML y aprendernos los nombres de las etiquetas y sus funciones. Es mucho más sencillo de lo que pueda parecer, pero en este curso tan sólo vamos a tratar las etiquetas más comunes para que nos resulten familiares a la hora de trabajar con el editor de textos. Párrafos: