Manual Wordpress 254p3q

June 2020
PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report 3b7i

Overview 3e4r5l

& View Manual Wordpress as PDF for free.

More details w3441

Words: 62,957
Pages: 314

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 istració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 s�� 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 �� 87 Súper �� 87

2. Gestionar s............................................................................................................................. 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 istración�� 101 3.1.2 Buscar un tema en la web del directorio de WordPress�� 103 3.2 Temas �� 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 o...................................................................................................... 148 4.4.2. Utilidades para imágenes..................................................................................................... 149 4.4.3. Utilidades para vídeo........................................................................................................... 150 4.4.4. Gestión de s.............................................................................................................. 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 (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 ..................................................................................................... 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 istració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 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, istrar 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 istració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 istració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 o, 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 istración. Un ejemplo de este tipo de páginas son las clásicas “Quiénes somos”, “o” y otras similares. WordPress es multi-, es decir, pueden acceder al área de istración varios s 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 istrar varios sitios web desde una sola área de istració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 s. 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 , 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 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 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 s. 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 s 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 s 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/#

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/ 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/

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/ 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/ 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/ 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 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 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 istrar nuestra nueva base de datos MySQL. Se llama phpMy y podemos acceder a ella haciendo clic en el link “phpmy” 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 por defecto a phpMy son “root” como y nada como contraseña. Es recomendable que guardemos estos datos de en nuestro documento de claves para poder recordarlos más adelante.

33 26. Esta sería la página principal para istrar 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 s 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 “ 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 en el que queremos instalar la aplicación. Por defecto se instalará para todos los s 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 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 .

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, y (Servidor, Puerto, y Contraseña).

Módulo 1. U1 Instalación de WordPress

7. Ahora vamos a conocer la herramienta para istrar nuestra nueva base de datos MySQL. Se llama phpMy y podemos acceder a ella haciendo clic en el link “phpMy” que aparece en esta misma página.

8. Si nos piden y contraseña introduciremos como “root” y como contraseña también “root”. La página a la que accedemos es donde vamos a poder istrar nuestra base de datos. Podemos configurar el idioma de la herramienta en el menú desplegable correspondiente. Volveremos a phpMy 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 phpMy de nuestro servidor web. Si tenemos dudas sobre cómo acceder a él, los s de Windows encontrarán una explicación en el capítulo 1.1 punto 24 y los s de Mac en el capítulo 1.2.1 punto 7, ambos en la Unidad 1. 1. En la página principal de phpMy 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// 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 s de Windows en “c:\ wamp\www\wordpress” y los s 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 s de Windows deben usar Notepad++ (ver Anexo 1.2) o similar y los s 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 s 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 de MySQL será “root” - La contraseña de MySQL será “root” si eres de Mac y nada si eres de Windows. - El host de MySQL será “localhost” Así deberían quedar las variables para los s 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 s de Windows:

Existen otras opciones de configuración que podremos ir conociendo poco a poco cuando nos vayamos convirtiendo en s 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-/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 , es mejor elegir un nombre distinto de «». Es importante recordar el 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 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 istració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//cart.php http://www.heliohost.org/home/ 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 s 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 al área de istración del hosting. 3. Obtener los datos de FTP. 4. Crear una base de datos MySQL. A veces es necesario crear también un MySQL y otorgar a ese los permisos para istrarla. 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 istració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 por FTP a nuestro espacio en el servidor (host, y contraseña) - Datos de a nuestra base de datos (host, nombre de la base de datos, y contraseña) - Dónde gestionar nuestras bases de datos. Por ejemplo, mediante phpMy. - Dónde crear los s 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//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//clientarea.php, introducir nuestros datos de 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 y contraseña con el que podremos acceder a anel para configurar nuestro espacio web y después pulsar “ to anel”.

Módulo 1. U1 Instalación de WordPress

5. En el formulario de introducimos los datos que acabamos de anotar y pulsamos “Acceder”.

6. La página que aparece es el 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 , 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 iten 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 para esa base de datos, así que elegimos un nombre, una contraseña y pulsamos “Crear ”.

11. Por último, necesitamos asignar a nuestro permisos para istrar 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 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 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 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 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 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 de nuestra web WordPress, en el que introducimos los datos de que acabamos de elegir.

71 26. Y por fin tenemos a nuestra área de istració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 istració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 s. Nosotros mismos, como es 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 “o”.

2. Conociendo el área de istració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 istración. El área de istració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 en la dirección de nuestro sitio web añadiendo “wp-.php”. En nuestro caso, si estamos trabajando en nuestro servidor local, la URL de sería http://localhost/wordpress/wp-.php. La primera página que se muestra del área de istración es el Escritorio. En la parte derecha hay una serie de bloques de rápido a diversa información. El primer bloque contiene enlaces que pueden resultar de utilidad para los s 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 istració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 “s → 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 . Si no estamos seguros de algo, es mejor no cambiarlo y dejarlo para más adelante cuando seamos s 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 s cómo ar 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 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 s 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 a esos colaboradores a toda nuestra área de istración o queremos restringir su 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 s 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 s. 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 s 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 s

WordPress es multi, es decir, permite que un número ilimitado de s registrados puedan acceder al área de istración. Puede que para nuestro proyecto no necesitemos permitir el registro de s. 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 s.

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 dependiendo de la tarea que cada va a desempeñar en el área de istración. El sistema de gestión de s 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 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 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 s. : Tiene a todas las características de istración del sitio web. Súper : Tiene a todas las características de istración de todos los sitios web de un entorno multisitio.

Módulo 2. U3 Gestión de s

A continuación mostramos una tabla con un resumen de las capacidades según los roles: Capacidades

Súper

Editor

Autor

Colaborador

Gestionar la red

Si

Actualizar WordPress

Si

Si*

Gestionar ajustes

Si

Si

Gestionar plugins

Si

Si*

Gestionar temas

Si

Si*

Gestionar s

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 s 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 . - Una vez que ha hecho , 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 s. 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 s 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 istración. - Crear nuevas entradas y guardarlas como borrador o en espera de revisión. - Editar sus propias entradas. - Ver los posts de otros s 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 s 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 s. También puede istrar 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 istrar enlaces. - Crear y istrar 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 s

1.5 El rol de El tiene 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 de una instalación normal de WordPress del 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 s y cambiar su rol. - Activar o borrar plugins. - Editar archivos. - Importar y exportar datos. Pero además, los es 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 s. - Utilizar HTML e incluso código Javascript en páginas, entradas y comentarios.

1.6 El rol de Súper El súper 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: - istrar - istrar - istrar - istrar - istrar - istrar

la red. los sitios de la red. todos los s 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 es son, de hecho, súper es, puesto que por defecto tienen todas las capacidades.

87

Aula Mentor

2. Gestionar s Los ajustes por defecto de WordPress no permiten el registro de s fuera del área de istración. Es decir, para añadir un el debe hacerlo en “s → Añadir nuevo”. Pero si necesitamos que nuestro sitio web permita a los s 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 s. Por defecto, el rol para nuevos s es “Suscriptor” que, como hemos aprendido, tan sólo permite a los s 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 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 puede registrarse introduciendo un nombre de y una dirección de correo.

Módulo 2. U3 Gestión de s

89

Al hacerlo, el nuevo recibe un email con la contraseña que se le ha asignado automáticamente y nosotros, como es, recibimos un email de aviso del registro. Sección “s → Añadir nuevo” Pero, como decíamos, normalmente si queremos registrar a un con un rol mayor al de suscriptor, lo hacemos nosotros personalmente en el área de istración, en “s → Añadir nuevo”. Para añadir un nuevo basta con rellenar el formulario y pulsar “Añadir nuevo ”. El nombre de no puede cambiarse más adelante, así que es preciso elegirlo con cuidado. La contraseña, sin embargo, la puede cambiar el nuevo 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 s recibirán un correo para informarles de que han sido añadidos como s del sitio web. Si queremos que en ese email aparezca también la contraseña de debemos seleccionar la casilla “Enviar esta contraseña al nuevo por correo electrónico”.

Aula Mentor

90 Sección “s → Listado de s” En esta página se muestran todos los s registrados en el sitio web.

Módulo 2. U3 Gestión de s

Existen ciertas opciones de personalización. La pestaña “Opciones de pantalla” nos permite elegir qué columnas mostrar y cuántos s 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 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 s 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 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 y otras muchas cosas. Vamos a probarlo con un ejemplo. En el área de istració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 istració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 istració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 s de Internet navegamos cada vez más a menudo desde nuestros móviles, y las tabletas se han popularizado enormemente. Está claro que el 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 y un largo etcétera de factores impiden una experiencia de 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 s 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 , hay mecanismos que permiten a los s 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 s 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, 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 istración.

3.1.1 Buscar un tema desde nuestra área de istració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 istració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 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 istració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 istració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 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. Se trata de un foro de soporte técnico en el que los s informan de errores o consultan dudas al autor del tema. Reviews Listado de reseñas de los s, 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 (s) 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 a información sobre el funcionamiento del soporte técnico en “”. Como vemos, la información que podemos obtener es bastante completa.

105

Aula Mentor

3.2 Temas 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 . 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 a una parte o al total de los temas ofrecidos a cambio de una cuota periódica. Las primeras son más adecuadas para s 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 , 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 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 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 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 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 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 s sobre el tema. Por último, podemos acceder al soporte técnico en .

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 s 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 , 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 o para ver si su sistema de validación es amigable para el .

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 istració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 istració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 istración. Estas opciones son diferentes en cada tema, pero generalmente podemos tener 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 istració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 s 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 s 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 istració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 ”. 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 istració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 istració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 istración en “Apariencia → Editor”. Naturalmente, esta página está pensada para ser usada por s 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/.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 s más exigentes, puesto que así somos nosotros los s 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 istració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 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 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 istració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. Se trata de un foro de soporte técnico en el que los s 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 s, 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 (s) 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 s. 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 s 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 s. 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 istrar los plugins de nuestro WordPress en la página “Plugins → Plugins instalados” de nuestra área de istració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 istració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 istració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 s 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 istració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 istració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 istració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 istració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 s 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 istració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 istrar 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 istrar 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 o 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 “ Form 7”, un plugin muy sencillo y completo para añadir un formulario de o a nuestro sitio web que vamos a tomar como ejemplo del uso de shortcodes. 1. Descargamos el plugin de http://wordpress.org/plugins/-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 “o” 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 o. Para ello cambiamos el título por “o” 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 o haciendo clic en “Ver página”.

9. Comprobamos que el shortcode ha sido reemplazado por el formulario de o 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 s 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 istración en el menú “Plugins → Editor”. Obviamente, esta funcionalidad debe ser usada solamente por s 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 , 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 o, 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 s y en otro tipo de factores, como por ejemplo el soporte en castellano. Algunos son muy sencillos, fáciles de configurar y istrar. 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 s 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 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 s. - 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 s que no dominan el inglés preferirán sin duda que el plugin esté traducido a su lengua materna. También, muchos s 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 s 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 muy a menudo.

4.4.1 Formularios de o Un tipo de plugin muy utilizado en los sitios web WordPress es el que permite la creación de un formulario de o, es decir, un formulario a través del que nuestros s pueden enviarnos mensajes privados a nuestra dirección de correo. Los campos más habituales de los formularios de o 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 o que podemos usar en nuestro sitio web: Form 7 http://wordpress.org/plugins/-form-7/ Formidable Forms http://wordpress.org/plugins/formidable/ Form http://wordpress.org/plugins/-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 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 , 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 s Como hemos visto, tanto la estructura como las herramientas de gestión de s 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. [En inglés] http://wordpress.org/plugins// Un plugin muy útil para los sitios web con varios s. Permite definir nuevos roles y asignarles un juego de capacidades a medida. Access Manager http://wordpress.org/plugins/-access-manager/ Permite istrar el al contenido del sitio web mediante la creación de grupos de s. Advanced Access Manager [En inglés] http://wordpress.org/plugins/advanced-access-manager/ Una herramienta para istrar el de los s tanto a la parte pública como al área de istración de un sitio web. Soporta las instalaciones multisitio. Role Editor http://wordpress.org/plugins/-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 [En inglés] http://wordpress.org/plugins/custom-/ Permite personalizar la página de . 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. imize [En inglés] http://wordpress.org/plugins/imize/screenshots/ Permite ocultar determinadas funciones del área del para roles concretos.

152

control [En inglés] http://wordpress.org/plugins/-control/ Permite desactivar s 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 s, 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 s 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 llegue a una de las páginas relevantes de nuestro sitio para ofrecerle compartirlo antes de poder leerlo. Puede resultar bastante efectivo, pero algunos s 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 s 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 s, publicación de ofertas, recordatorios de eventos, etcétera.

153

Aula Mentor

El 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 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 no vuelva nunca, incluso habiendo encontrado lo que buscaba y habiendo disfrutado de la experiencia en nuestra web. Una forma de fidelizar a los s 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 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 se suscriba. - Una sección en nuestra área privada que nos permita istrar las suscripciones y editar los correos a enviar. - Un método para permitir al cancelar la suscripción si así lo desea. A continuación mostramos una lista de plugins que permiten istrar 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 istració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 istrar 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 s avanzados. WordPress Manager [En inglés] http://wordpress.org/plugins/-manager/ Nos permite istrar 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 s 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 s 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 s opinen sobre los temas que proponga el 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 istrar 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 rios 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 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 s http://wordpress.org/plugins/easy-digital-s/ 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 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 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 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 istració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 s 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 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 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 “” 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 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 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 s 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 es 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 s.

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/s/” por lo que, por ejemplo, un archivo subido el 19 de enero de 2014 estará en “wp-content/ s/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 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 s. 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 de nuestro blog. Podemos asignarles un 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 s. 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 del 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 s 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 para el 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 s 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 s. 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 s a que se pongan en o con nosotros. - En el formulario de o 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 sino a las necesidades de la empresa. Cualquier 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 , pensar en qué tipo de información estaría interesado y en cómo lograr que tenga fácil 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 s 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 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 o 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 , 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 a encontrar rápidamente lo que busca. Por ejemplo, todos sabemos a qué conducen las secciones “Inicio”, “Productos”, “Servicios”, “Noticias”, “Quiénes somos”, “o”, etcétera. Un que trata de buscar la palabra “o” 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 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 s 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 s 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 s 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 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 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 . Texto en pirámide invertida El 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 s 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 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 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 (UX) La experiencia de (UX) es una disciplina que estudia la interacción de un 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 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 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 . 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 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 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 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 s 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 o, 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 s con el objeto de que permanezcan en nuestra web o vuelvan a ella con frecuencia? Satisfacción ¿Se sienten cómodos los s usando nuestra web o les genera impaciencia o frustración? Utilidad ¿Consigue el 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 s 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 s 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 s 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 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 s 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 s, podremos istrarlos 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 <strong>. <strong> 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:

Normalmente dividimos los textos en párrafos. Si queremos escribir un nuevo párrafo, en el editor de texto tan sólo tendríamos que pulsar la tecla “intro”. En HTML, sin embargo, tendríamos que rodear cada párrafo con los tags

. Encabezamientos:

6l6m1j

...

6l6m1j

Los encabezamientos son los títulos que damos a los diferentes capítulos, apartados, y subapartados de nuestro texto, siendo

el título de mayor nivel y 193w1w

el de menor. y1wc

sólo puede ser utilizado una vez en cada página, puesto que se considera el título de la misma. El resto de encabezamientos podemos usarlos cuantas veces queramos, siempre teniendo en cuenta el orden de niveles. Por ejemplo, 5c645

es una subsección de 4x725r

que, a su vez, es una sección de 2t325q

. Módulo 3. U8 La edición de textos en WordPress Listados: y En HTML hay tres tipos de listados, aunque aquí sólo vamos a tratar dos de ellos: la lista numerada y la no numerada. La lista no numerada se muestra por defecto como una lista de viñetas y tiene la siguiente estructura: Las listas numeradas tienen la misma estructura y tan sólo debemos cambiar “ul” por “ol”. 193 Aula Mentor Enlaces: Algunas etiquetas pueden contener ciertos atributos. Es el caso de los enlaces, en los que no sólo basta con rodear texto sino que, además, debemos especificar a dónde conduce el enlace. Para eso emplearemos el atributo “href”. El atributo “title” permite que se muestre un texto al pasar el ratón por encima del enlace, suele servir para dar pistas a nuestros s del lugar al que conduce el link. Si queremos que el enlace se abra en una ventana nueva nos serviremos del atributo “target” de la siguiente forma: Imágenes: La etiqueta se usa para añadir una imagen de la siguiente forma: 194 No todas las etiquetas en HTML tienen inicio y fin. Algunas, como , son autoconclusivas. Para cumplir con los estándares, las etiquetas autoconclusivas contienen una barra de cierre al final. El atributo “src” sirve para definir la ubicación del archivo de imagen que queremos mostrar. Los atributos “width” y “height” sirven para definir respectivamente la anchura y la altura de la imagen. Por último, el atributo “alt” sirve para dar una descripción alternativa de la imagen. Esto es muy útil en términos de accesibilidad porque permite dar información a los s que no pueden ver la imagen, por ejemplo personas con alguna discapacidad visual. 2.2 Dominar el editor de textos El editor de texto de WordPress es una herramienta JavaScript de código abierto llamada TinyMCE. Se divide en dos partes fundamentales, la parte visual y la parte texto. La parte de texto nos va a permitir editar código HTML, pero en este curso vamos a ocuparnos sobretodo de la parte visual, que nos va a permitir editar nuestro texto mientras vemos cómo se mostrará visualmente en nuestra web. Por eso decimos que TinyMCE es una herramienta WYSIWYG (What You See Is What You Get) Módulo 3. U8 La edición de textos en WordPress Los iconos de la parte superior del editor visual son herramientas con las que podemos dar estilo a nuestros textos y aplicar funciones propias de HTML. Reconoceremos muchas de ellas por ser similares a las que usamos en nuestro procesador de textos habitual aunque, si no reconocemos alguna, basta con pasar el ratón por encima para que se muestre su función y el atajo de teclado que la activa. Vamos a verlas en detalle: Estilos básicos Lo usamos cuando queremos dar al texto un fuerte énfasis. Se suele mostrar en negrita. Otro tipo de énfasis. Generalmente se muestra como cursiva. El texto con este estilo se considera como borrado del post. Normalmente aparece tachado. Crea respectivamente listas de viñetas y numeradas. Define el texto seleccionado como una cita. Alinea el texto a izquierda, centro o derecha. Crear enlaces El primero de los dos iconos sirve para crear un enlace en el texto seleccionado y el segundo para borrarlo. Cuando hacemos clic para crear el enlace aparece una ventana flotante que nos pide que introduzcamos los datos necesarios. 195 Aula Mentor Si queremos crear un enlace a una de las entradas de nuestra propia web, podemos seleccionarla en el listado de la parte inferior. Pero si el enlace es a una dirección externa, entonces debemos rellenar los campos de la parte superior: - La URL de destino es la dirección a la que queremos que conduzca el enlace. - El título del enlace corresponde al atributo HTML “title” que, como ya dijimos, hace que se muestre al pasar el ratón por encima del enlace. - También podemos elegir que el enlace se abra en una ventana nueva. La etiqueta More Mencionábamos antes la etiqueta More cuando hablábamos de los distintos tipos de extractos, o resúmenes de la entrada, de los que podemos disponer en WordPress. Decíamos que había tres tipos: uno manual que se añadía en el bloque “Extracto”, otro automático en el que WordPress seleccionaba las 55 primeras palabras de la entrada y un tercero que se creaba con la etiqueta More. Esta etiqueta crea automáticamente un enlace “Sigue leyendo” en el lugar del texto donde la insertemos. De manera que cuando nuestra entrada aparezca, por ejemplo, en nuestra página principal, sólo se mostrará el texto anterior y deberemos pulsar en el enlace para poder leerla al completo. 196 Modo de escritura sin distracciones Esta herramienta permite quedarnos a solas con nuestro texto, sin formulario, bloques o ningún otro elemento que pueda hacernos perder nuestra concentración. Tal sólo se conserva una selección de herramientas imprescindibles en una barra que podemos mostrar al acercarnos con el puntero del ratón a la parte superior de la página. Mostrar/Ocultar Opciones avanzadas Ya hemos visto las herramientas que utilizaremos más a menudo, pero al hacer clic en este icono aparece otra fila de herramientas muy útiles, pero de uso menos habitual. Módulo 3. U8 La edición de textos en WordPress Formatos Mediante este desplegable podemos aplicar a nuestro texto algunos de los formatos HTML que hemos aprendido en el capítulo anterior. El formato por defecto es “Párrafo”, aunque también podemos usar “Dirección” cuando se trate de direcciones postales, “Preformateado” cuando escribamos código y distintos niveles de “Títulos”. Subrayado Es posible que alguna vez necesitemos subrayar texto, pero hay que tener en cuenta que en Internet es posible que el confunda con facilidad el texto subrayado con un enlace, por eso el subrayado es algo que un experto en usabilidad seguramente desaconsejaría. 197 Justificación completa La alineación justificada es otro de los estilos que no aconsejan los expertos en usabilidad web ya que, según defienden, dificulta la lectura del texto. Elegir color de texto Podemos escoger el color del texto entre varias paletas que se muestran en el desplegable. Como en el caso del subrayado, un texto de otro color podría confundirse fácilmente con un enlace. Además, demasiada profusión de colores en el texto dificulta la legibilidad y, según cómo se apliquen, la página puede perder su aire de profesionalidad. Por todas estas razones, conviene usar esta herramienta sabiamente o no usarla en absoluto. Pegar como texto plano En muchísimas ocasiones vamos a necesitar pegar texto que hemos copiado de alguna otra parte. Aunque no seamos conscientes, este texto contiene muchas veces los estilos del lugar de donde fue copiado, lo que puede degenerar al pegarlo en WordPress en un código farragoso que ocupa más espacio del que debiera y que puede dar lugar a problemas. Por eso, si queremos eliminar de un plumazo todos los estilos que contiene el texto que vamos a pegar podemos hacerlo a través de esta útil herramienta. Aula Mentor Pegar desde Word Muchas personas escriben sus entradas en Word y luego las pegan en el editor de WordPress. Si queremos pegar texto enriquecido de Microsoft Word no es necesario que activemos la herramienta texto plano o ninguna otra. El editor va a limpiar el texto pegado desde Word de forma automática. En teoría, al pegar un texto copiado desde Word se conservará su formato y estilos (negritas, cursivas, etcétera), aunque conviene repasarlo por si se da alguna incidencia en el proceso de conversión. Eliminar formato Sirve para eliminar estilos de un texto seleccionado. Hay que tener en cuenta que no borrará ciertos estilos, como direcciones, citas, etcétera. Sirve más bien para borrar estilos como negritas y cursivas. Insertar carácter especial Como su propio nombre indica sirve para insertar caracteres especiales que no son fácilmente accesibles desde nuestro teclado. Disminuir o aumentar margen 198 Aumenta o disminuye el margen izquierdo 30px cada vez. Deshacer y rehacer Estas son las clásicas herramientas deshacer y rehacer que nos libran de problemas diariamente en el trabajo con ordenadores, pero aplicadas al editor de texto. Ayuda Si todavía tenemos dudas sobre algo siempre podemos acudir a la ayuda que nos proporciona WordPress. 2.3 Plugins de utilidad para trabajar con el editor de textos TinyMCE Advanced http://wordpress.org/plugins/tinymce-advanced/ Se trata de un plugin que permite activar las funciones avanzadas de TinyMCE en nuestro WordPress. Ultimate TinyMCE http://wordpress.org/plugins/ultimate-tinymce/ Lo mismo que el anterior, permite activar alrededor de 40 botones más en nuestro editor de texto. Módulo 3. U8 La edición de textos en WordPress TablePress http://wordpress.org/plugins/tablepress/ Permite la creación y edición de tablas en nuestro editor sin necesidad de escribirlas en HTML. Autolink URI http://wordpress.org/plugins/sem-autolink-uri/ Convierte automáticamente en enlaces las URLs que escribimos en nuestras entradas, páginas, extractos y textos de widgets. 199 Aula Mentor Unidad 9. Contenido audiovisual El contenido audiovisual es un elemento de gran importancia en la publicación de webs. Las imágenes transmiten muy vivamente conceptos que refuerzan los textos que tanto cuidado hemos puesto en redactar. No hay como colocar una imagen impactante en un lugar clave para atraer con gran eficacia la mirada de nuestros s. De hecho, este es un recurso ampliamente utilizado en publicidad, captar la atención del mediante una imagen que despierte vivamente su curiosidad y que le incite a seguir leyendo. Pero debemos hacer un uso adecuado y racional del contenido audiovisual en nuestra web. No sirve de mucho usar imágenes sin ton ni son, que no tengan relación alguna con el tema de que se trata. Tampoco es aconsejable abusar del número de imágenes o vídeos porque corremos el riesgo de confundir más que comunicar. Recordemos que debemos ponernos en la piel del y publicar información pertinente, inteligible y de fácil . 200 En este capítulo vamos a explicar las bases de la publicación de contenido audiovisual (imágenes, vídeo y audio) en nuestro sitio web WordPress. 1. Las imágenes Hoy en día todos hemos tenido al menos algún o con las imágenes digitales, bien por cámaras fotográficas, por imágenes que encontramos en Internet o incluso por las que creamos nosotros mismos en el ordenador. Por lo tanto, seguramente nos resultarán familiares algunos de los conceptos que trataremos a continuación. 1.1 Conceptos básicos de imagen digital Si queremos publicar en nuestra web imágenes de calidad desde el punto de vista técnico sin comprometer la velocidad de carga de nuestra página ni la integridad del diseño, debemos antes conocer conceptos como el tamaño, la resolución, el espacio de color, la compresión y los formatos disponibles. 1.1.1 Tamaño y resolución Las imágenes digitales están formadas por una rejilla de pequeños puntos de distintos colores que se llaman píxeles. Cuantos más píxeles tenga, mayor será la resolución y de forma más nítida seremos capaces de apreciar una imagen. Módulo 3. U9 Contenido audiovisual En el entorno del diseño y publicación de webs, definimos el tamaño de una imagen por el número de píxeles que tiene de ancho y de alto. Por ejemplo, si decimos que una imagen tiene un tamaño de 800x600 píxeles quiere decir que tiene 800 píxeles de anchura y 600 de altura. Cuando queramos preparar una imagen para su publicación en web, el principal dato que debemos tener en cuenta es su tamaño en píxeles. Si nuestro tema tiene definida una anchura fija de 600 píxeles para nuestros posts, cualquier imagen de mayor tamaño podría afectar al diseño de nuestra web y descolocar las diferentes secciones. Además, las imágenes de mayor resolución pesan más y ocupan un mayor espacio en nuestro servidor web. Puede que al principio esto no nos parezca importante porque tal vez dispongamos de espacio de sobra, pero si utilizamos muchas imágenes y añadimos información con frecuencia, podemos encontrarnos con dificultades al cabo de cierto tiempo. Y, por supuesto, denota muy poca profesionalidad hacer que nuestra página web se cargue de forma más lenta por usar imágenes con resoluciones mayores de lo estrictamente necesario. Por lo tanto, es responsabilidad nuestra restringir el tamaño de las imágenes para que no superen el ancho máximo que determina nuestro tema. Como veremos más tarde, existen plugins que efectúan esta labor de forma automática, pero si queremos tener mayor control sobre cómo se van a visualizar nuestras imágenes podemos hacerlo nosotros mismos en un programa de edición de imágenes. Si no tenemos Photoshop, podemos descargar de forma gratuita Gimp o utilizar la herramienta online Pixlr. A continuación vamos a mostrar cómo modificar el tamaño de una imagen en Photoshop. Es importante resaltar que los siguientes pasos explican cómo reducir el tamaño de una imagen. Ampliarla no es nada recomendable y no conseguiremos con ello sino empeorar su apariencia. Si nuestra imagen original es menor que el tamaño deseado y no tenemos forma de conseguir una versión mayor, lo mejor es dejarla como está. 1. Abrimos la imagen con Photoshop y vamos al menú “Imagen → Tamaño de imagen…”. 2. Editamos su anchura en píxeles introduciendo el valor deseado. La altura se modificará automáticamente de forma proporcional. 3. Por convención, definimos una resolución de 72 píxeles por pulgada. 4. Debemos tener seleccionada la opción “Remuestrear la imagen”. Podemos elegir del menú desplegable nuestro método preferido de remuestreo o dejar el modo por defecto si no estamos seguros. 5. Pulsar “Ok” para hacer efectivos los cambios. 201 Aula Mentor 1.1.2 Espacio de color Las imágenes que vamos a preparar para su publicación en web deben estar definidas según el modelo de color RGB (Red, Green, Blue), que construye su gama de colores mediante la mezcla aditiva de los colores primarios rojo, verde y azul. El modelo de color RGB es el que se usa para la representación visual de las imágenes en dispositivos electrónicos, como televisores, monitores de ordenador y fotografía digital. En Photoshop, podemos comprobar el modelo de color de nuestra imagen en el menú “Imagen → Modo”. Si nuestra imagen está en otro modelo de color diferente, deberemos convertirlo a RGB. 202 1.1.3 Compresión y formatos La compresión es una técnica que consiste en reducir el peso de las imágenes con el objeto de que consuman menor espacio de almacenamiento y, más importante para nuestros propósitos, que se carguen en las páginas web más rápidamente. Los diferentes formatos de imagen usan distintos métodos de compresión, por lo que usaremos un formato u otro dependiendo de las características de la imagen que queramos comprimir. Hay que entender que optimizar una imagen para Internet no consiste meramente en aligerar su peso, sino en hacerlo sin que exista pérdida de calidad apreciable. - El JPEG comprime la imagen mediante un algoritmo matemático que conlleva una ligera pérdida de calidad, que será mayor cuanto más compresión apliquemos. Generalmente, deberemos usar este formato de compresión en fotografías. - El GIF mantiene los colores de la imagen original pero no puede utilizar más de 256 colores para ello. Cuantos menos colores usemos, menos pesará la imagen. Los GIFs permiten también que cualquier píxel de la imagen sea transparente. Pueden asimismo utilizarse para animaciones sencillas (GIFs animados). Se suelen usar para imágenes con colores sólidos, como logotipos o iconos. Módulo 3. U9 Contenido audiovisual - El PNG-24 es parecido al GIF, pero permite 16 millones de colores y además un canal alfa, es decir, que cada píxel puede tener cierto porcentaje de transparencia, no como ocurre con los píxeles de los GIFs que o bien son transparentes o bien son sólidos. Se pueden usar para un rango de imágenes muy amplio, aunque las imágenes de calidad fotográfica tienden a ser un poco más pesadas en PNG que en JPEG y, definitivamente, son una opción muy aconsejable para reemplazar a los GIFs. La única pega es que no están plenamente soportados por los navegadores más antiguos, pero cada vez se usan con más frecuencia en las web actuales. 1.1.4 Pantallas Retina Las pantallas Retina, o de alta densidad, precisan que las imágenes que usemos en nuestra web tengan el doble de resolución para que se visualicen nítidamente. Los diseñadores web que desarrollan sus trabajos para que sean compatibles con Retina Display utilizan un script que carga diferentes versiones de la misma imagen dependiendo de la pantalla del . En el capítulo en el que hablábamos de los temas dijimos que, para que nuestra web fuera compatible con estas pantallas, era preciso que nuestro tema fuera Retina-Ready. Sin embargo, no debemos olvidar que las imágenes que subamos a nuestra web deben tener también una resolución el doble de la habitual y, además, subir también una versión de la imagen en resolución normal para las pantallas comunes. Por suerte, disponemos de varios plugins que nos facilitan esta tarea, entre los que destacamos el siguiente: WP-Retina 2x http://wordpress.org/plugins/wp-retina-2x/ 1.2 Optimización de imágenes Existe una herramienta excelente en Photoshop para optimizar las imágenes para su publicación en web. De hecho, mediante esta herramienta es posible definir el tamaño de nuestra imagen, el espacio de color, el formato y la compresión que queremos aplicar, todo ello en un solo paso. Podemos acceder a ella abriendo nuestra imagen en Photoshop y seleccionando el menú “Archivo → Guardar para web…” En la parte superior de la columna derecha podemos escoger el formato en el que queremos guardar nuestra imagen. 203 Aula Mentor Inmediatamente debajo podemos asegurarnos de que nuestra imagen se convierte a un espacio de color adecuado tan solo dejando seleccionado “Convertir en sRGB”. Y justo debajo podemos ajustar el tamaño de nuestra imagen seleccionando para ello el método de remuestreo de nuestra elección. 204 Las imágenes optimizadas a través de esta herramienta de Photoshop estarán listas para subir a nuestra web aunque, como hemos apuntado antes, si preferimos no utilizar un editor de imágenes tenemos la alternativa de utilizar un plugin de WordPress que optimice de manera automática las imágenes, bastará para ello con configurarlo de la forma adecuada. Proponemos el siguiente plugin de ejemplo, pero no es el único que se puede encontrar en el repositorio de WordPress: 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. 1.3 Cómo publicar imágenes en nuestra web La gran mayoría de las veces publicaremos nuestras imágenes en una entrada o en una página, bien insertándolas en el área de texto o bien como imagen destacada. Para insertar una imagen iremos a la página de edición de la entrada donde vamos a publicarla y seguiremos estos pasos: Módulo 3. U9 Contenido audiovisual 1. Colocamos el cursor en el lugar donde queremos insertar la imagen y pulsamos el botón “Añadir objeto”, aunque también podemos arrastrar y soltar las imágenes desde el escritorio de nuestro ordenador. 2. Al hacerlo, se abre la librería multimedia que, como veremos más tarde, alberga un listado de todos los archivos que hemos subido previamente a nuestra web. Si es el primero que subimos, la librería multimedia se mostrará vacía. Para subir nuestra imagen podemos bien arrastrarla desde nuestro escritorio a la ventana o bien pulsar en el botón “Selecciona archivos” para seleccionar nuestra imagen en el navegador de archivos de nuestro ordenador. 205 Aula Mentor 3. Nuestra imagen se habrá subido correctamente si aparece reseñada tal y como se muestra en la imagen a continuación. 4. En la columna derecha podemos editar una serie de datos y varios ajustes. 206 - Título: El título de la fotografía, que aparecerá en el atributo “title” de la etiqueta HTML . - Leyenda: El pie de foto, caso de haberlo. - Texto alternativo: El texto que aparecerá en caso de no cargarse la imagen. Como ya vimos, sirve tanto para favorecer el posicionamiento de nuestra web y nuestra imagen en buscadores como para facilitar información suficiente sobre la imagen a personas que tienen disminuida su capacidad visual. - Descripción: Para uso personal nuestro como autores de la web. También podemos ajustar la alineación de la imagen, el tamaño al que queremos que se visualice y a qué queremos enlazarla. El enlace permanente a la imagen puede sernos útil en alguna ocasión, así que se nos muestra en un campo de texto. Módulo 3. U9 Contenido audiovisual 5. Al pulsar el botón “Insertar en la entrada” comprobamos que la imagen aparece en el editor, donde podemos ajustar su tamaño mediante los manejadores oportunos. Si queremos editar alguna opción adicional, basta con seleccionarla y pulsar el icono de la izquierda. 207 Algunas de las opciones que se muestran al hacerlo parecen las mismas que acabamos de editar en el paso anterior, como el título, título alternativo, etcétera. Pero en realidad se trata de los valores que deseamos para esta inserción de imagen en particular. Es decir, supongamos que vamos a utilizar la misma imagen en distintas entradas. Al hacerlo, esa imagen se insertará con los ajustes que hemos definido por defecto, pero mediante ese icono podemos sobreescribir esos valores y utilizar diferentes para cada caso concreto. Aula Mentor Además, las opciones avanzadas nos permiten asignar a la imagen determinados estilos, como un borde, o un espaciado horizontal o vertical. Si además conocemos algo de CSS, podemos asignar a nuestra imagen las clases que queramos separadas por espacios o editar las que tiene asignadas en la actualidad. Y también tenemos la posibilidad de definir de forma más personalizada los distintos atributos del enlace a donde conduce nuestra imagen. 208 También es posible la creación de galerías de imágenes de forma nativa. Vamos a ver cómo: 1. Creamos una nueva entrada, le damos el título que deseemos y le damos el formato de «Galería». 2. Situamos el punto de inserción en el lugar de la entrada donde queramos que se muestre la galería y pulsamos «Añadir Objeto» Módulo 3. U9 Contenido audiovisual 3. En la capa emergente, hacemos clic en la sección «Crear galería» 4. Arrastramos a la ventana las imágenes que queramos añadir a la galería. 209 5. Los archivos son subidos a nuestra área de istración, donde podemos asignarles datos como título, descripción, etcétera. Una vez añadidos los datos pulsamos «Crear una nueva galería» Aula Mentor 6. En la siguiente ventana podemos ordenar nuestras imágenes arrastando y soltando. Una vez dispuestas a nuestro gusto podemos pulsar «Insertar galería» 7. Al hacerlo, se muestra un icono en el editor de texto que podemos volver a editar en cualquier momento. 210 8. Al guardar la entrada podemos comprobar el aspecto de la galería en nuestra web. 1.3.1 Plugins para imágenes En el directorio de WordPress podemos encontrar multitud de plugins que nos resultarán de utilidad para el uso de imágenes en nuestra web. http://wordpress.org/plugins/search. php?q=images También podemos recordar la pequeña selección que hicimos anteriormente en el capítulo 4.4.2 de la unidad 5. Módulo 3. U9 Contenido audiovisual 2. Vídeo y audio De forma análoga a las imágenes, los vídeos enriquecen la experiencia del en nuestra web y es buena idea contar con ellos a la hora de crear contenidos. Es posible subir archivos de vídeo o audio a WordPress de forma muy parecida a como subimos imágenes. Sin embargo, la inmensa mayoría de los es de webs WordPress prefieren publicarlos en servicios especializados como YouTube o Vimeo para los vídeos o SoundCloud para los audios y luego incrustarlos en sus webs. En efecto, es la mejor opción a nuestro alcance, especialmente para el caso de los vídeos, por varias razones: - Ahorro en el consumo de transferencia: Publicar vídeos y audios subiéndolos a nuestro servidor va a afectar en gran medida a nuestro consumo de cuota de transferencia y, en general, este consumo será mayor cuanto mejor sea la calidad del archivo. Recordemos que las empresas de hosting suelen establecer un límite mensual de transferencia y que fijan un precio adicional por cada gigabyte por encima del límite del contrato. Sin embargo, cuando publicamos en YouTube, Vimeo, o SoundCloud estamos utilizando su ancho de banda y no el nuestro. De hecho, no sólo ahorramos cuota de transferencia sino que evitamos los problemas que pudieran derivarse de un ancho de banda insuficiente en nuestro servidor, que puede provocar que los s vean nuestro vídeo a tirones o que no lo consigan ver en absoluto. - Optimización de vídeo: Al subir nuestro vídeo a YouTube o Vimeo, son ellos los que se encargan de optimizar cada vídeo, creando automáticamente varias versiones, desde HD hasta resoluciones más bajas para los s con conexiones más lentas. Estas plataformas utilizan scripts para detectar el tipo de conexión del y así poder ofrecerle de forma automática la mejor opción de calidad dadas sus circunstancias. También adquirimos soporte de HTML5 que permite que los vídeos puedan visualizarse en dispositivos móviles sin problemas. - Mayores posibilidades de compartir nuestro contenido audiovisual: Youtube o Vimeo nos van a permitir acceder a una audiencia mucho mayor de la que seguramente podemos aspirar en nuestra web. - Visibilidad: Siendo YouTube el segundo motor de búsqueda más popular, subir nuestros vídeos a YouTube puede atraer a nuestra web un buen número de visitas. Hay quien pone pegas al hecho de que YouTube añade publicidad antes de la reproducción, pero en realidad podemos configurar nuestro canal de YouTube para no permitir que se exhiba publicidad junto a nuestros vídeos. Existen además otras muchas opciones de configuración, tanto en YouTube como en Vimeo, a las que conviene echar un vistazo para poder conformar la visualización a nuestro gusto. Por ejemplo, es posible tener vídeos privados y ocultos o activar la opción de obtener ingresos por la publicidad mostrada en nuestros vídeos. 211 Aula Mentor 2.1 Incrustar (embed) vídeos de YouTube o Vimeo Incrustar vídeos en nuestra web es muy sencillo: 1. Subimos nuestro vídeo a nuestra plataforma preferida, Youtube, Vimeo, Viddler, etcétera. 2. Una vez publicado, copiamos la URL del vídeo, volvemos a nuestro sitio web WordPress y pegamos la URL en el editor en el lugar donde queramos que aparezca el vídeo. 212 Y listo, WordPress se encarga de convertir esa URL en el reproductor oportuno. Podemos comprobarlo guardando los cambios de la entrada y visitando la vista previa. 2.2 Incrustar audios de SoundCloud WordPress no activa por defecto el shortcode para incrustar audios de SoundCloud, pero podemos activarlo, por ejemplo, a través de una de las utilidades del plugin “JetPack by WordPress.com” del que hablábamos en el capítulo 2.2 de la unidad 5. 1. Si tenemos instalado y activo “JetPack by WordPress.com”, vamos al menú “Jetpack” y activamos la utilidad “Shortcodes incrustados”. Módulo 3. U9 Contenido audiovisual 2. En SoundCloud.com elegimos el archivo que queremos incrustar y hacemos clic en el botón “Share”. 3. En la capa emergente vamos a la pestaña “Embed” y copiamos el contenido del campo de texto donde pone “WordPress Code” 213 Aula Mentor 4. Pegamos el shortcode en la entrada donde queramos que se muestre el reproductor y guardamos los cambios. 5. El reproductor se mostrará tal y como vemos en la imagen a continuación. 214 2.3 Publicar vídeo o audio alojado en nuestro servidor En el caso de que, pese a todo lo dicho anteriormente, decidamos subir archivos de audio y vídeo a nuestro propio servidor, la gran variedad de formatos existentes complica la elección del tipo de archivo. No hay un estándar universal, pero los archivos .mp4 son unos de los más compatibles con todo tipo de dispositivos. En cuanto a los codecs, el más utilizado en vídeo es el H.264, que proporciona una buena calidad de imagen con un tamaño de archivo pequeño. Así mismo, el codec AAC para la pista de audio ofrece gran fiabilidad. La resolución vendrá determinada por el tamaño del vídeo original, pero las de alta definición, 1280x720 y 1920x1080 píxeles, son las de más amplia difusión en la actualidad. Por otra parte, el tamaño de archivo vendrá determinado por el bitrate del vídeo. Cuanto mayor sea este, más pesará el archivo y mejor se verá, por lo que hay que encontrar un correcto balance entre lo que pese el vídeo por segundo y la calidad de imagen que busquemos. Como norma general, podríamos decir que entre 10 y 20 MB por minuto para alta definición puede ser el punto de partida, aunque depende mucho del tipo de vídeo que vayamos a publicar. Módulo 3. U9 Contenido audiovisual Si necesitamos subir archivos de audio, tanto el .mp3 como el .m4a son ampliamente utilizados, siendo el último más eficaz a menos bitrate. WordPress acepta los siguientes formatos de contenido audiovisual: webm, ogv, mp4/m4v, wmv, mov/qt, flv, mp3/m4a/m4b, ogg/oga, wma, wav. El procedimiento para subir estos archivos a nuestro servidor es prácticamente el mismo que ya aprendimos al subir imágenes. Como ejemplo, vamos a explicar paso a paso cómo subir un archivo de vídeo, pero podemos seguir estas mismas instrucciones en caso de un archivo de audio. 1. Creamos una nueva entrada y le damos el título que deseemos. 2. Definimos el formato de la entrada como Vídeo. Este paso no es estrictamente necesario. Como ya dijimos en el capítulo 1 de la unidad 8, la definición de formato sólo tiene efecto si nuestro tema tiene plantillas específicas para vídeo, aunque si el principal contenido de la entrada va a ser el vídeo merece la pena asignarle el formato correspondiente por si alguna vez cambiamos nuestro tema por uno que sí disponga de la plantilla necesaria. Por otra parte, si el vídeo no va a ser el contenido principal de la entrada, por ejemplo si el contenido mayoritario es texto y el vídeo sirve de complemento, entonces lo mejor es que dejemos el formato Estándar. 215 Aula Mentor 3. En modo visual, situamos el punto de inserción en el lugar donde queramos que se muestre el vídeo y pulsamos el botón “Añadir objeto”. 4. En la librería multimedia, vamos a la pestaña para subir archivos. 216 5. Arrastramos el archivo de vídeo sobre la ventana del navegador (o lo seleccionamos mediante el botón) para que se suba. Módulo 3. U9 Contenido audiovisual 6. Una vez subido, editamos los datos del vídeo a nuestro gusto. 7. Podemos elegir entre mostrar el vídeo en un reproductor, enlazar con el archivo o enlazar con la página de adjuntos. Dejamos la opción por defecto para incrustar el reproductor y pulsamos “Insertar en la entrada” 217 8. Al hacerlo, un pequeño código aparece en la entrada. Se trata del shortcode necesario para que se muestre el vídeo. Aula Mentor 9. Ya podemos publicar nuestra entrada si lo deseamos, aunque también la podemos dejar en modo borrador hasta estar seguros de que todo funciona correctamente. Hacemos clic en “Ver entrada” o en “Vista previa”, dependiendo de si la hemos publicado o la mantenemos como borrador. 10. Comprobamos el correcto funcionamiento del vídeo. 218 2.3.1 Plugins para vídeo En el directorio de WordPress podemos encontrar multitud de plugins para audio o vídeo en las siguientes direcciones: - http://wordpress.org/plugins/search.php?q=video - http://wordpress.org/plugins/search.php?q=audio También podemos revisar la selección que hicimos en el capítulo 4.4.3 de la unidad 5. Módulo 3. U9 Contenido audiovisual 3. La librería multimedia Cuando subimos un archivo a nuestra web, bien sea una imagen, un vídeo o cualquier otro tipo de documento, WordPress los guarda en el directorio “wp-content/s”. Generalmente los almacena en carpetas basadas en el mes y año de la fecha en la que se subió, aunque podemos especificar que no se utilice este método en los ajustes de Medios como ya vimos en el capítulo 1.5 de la unidad 6. Cuando subimos una imagen, WordPress crea automáticamente varias versiones de distintos tamaños de esa imagen, de manera que podemos usarla adecuadamente en lugares de nuestro tema que requieran que se visualice a tamaños medios o como miniatura. La librería multimedia, a la que se accede a través del menú “Medios → Librería multimedia”, es una herramienta que nos sirve para ordenar y categorizar todos esos archivos desde la comodidad de nuestra área de istración. 219 Generalmente, subimos los archivos asociándolos a determinadas entradas y lo hacemos desde la misma página de edición de la entrada pulsando en el botón “Añadir objeto”, tal y como hemos aprendido en capítulos anteriores. Si queremos añadir varios archivos multimedia a una página podemos seleccionarlos a la vez pulsando el botón “Selección múltiple” y haciendo clic en los objetos que queremos seleccionar. Si queremos subir un archivo sin que esté asociado a ninguna página o entrada en particular podemos subirlo directamente a la librería multimedia en el menú “Medios → Añadir nuevo” La librería multimedia permite ver, editar o borrar cualquier archivo que hayamos subido previamente a nuestra web. Podemos acceder rápidamente a un archivo concreto usando la herramienta de búsqueda o los distintos filtros disponibles. La edición de archivos nos permite cambiar los datos de texto asociados, como el título o la leyenda. En el caso de las imágenes, existen una serie de herramientas adicionales que nos Aula Mentor van a permitir editar la imagen en sí sin necesidad de hacer uso de un programa de edición de imágenes como Photoshop o Gimp. Veamos cómo: 1. Pulsamos en cualquier imagen de la librería multimedia para acceder a su edición. 2. Una vez allí, pulsamos en el botón “Editar imagen” 220 3. En la página de edición disponemos de herramientas para recortar, girar o reflejar la imagen. 4. Podemos escalar y recortar la imagen sirviéndonos de algunas opciones, como una determinada relación de aspecto (por ejemplo 1:1, 4:3 o 16:9) que se hace efectiva al mantener pulsada la tecla mayúsculas mientras arrastramos el área de recorte. También se nos muestra dinámicamente información del tamaño en píxeles de dicha área de recorte. 5. Cuando hayamos terminado con la edición pulsamos en el botón “Guardar”. Módulo 3. U9 Contenido audiovisual 4. Problemática legal relacionada con el uso de contenido audiovisual A menudo, mientras navegamos por Internet, encontraremos la imagen perfecta para acompañar la entrada que estamos escribiendo, pero debemos ser conscientes de que siempre que queramos añadir cualquier material que no sea de creación propia, debemos antes investigar si ese material está libre de derechos, puede publicarse bajo algún tipo de licencia o si su publicación no está permitida bajo ningún concepto. Muchos blogueros se meten en problemas legales por este tema, y a menudo ni siquiera sabían de los derechos de reproducción de tal o cual imagen. Y es que no es sencillo averiguar si, por ejemplo, una imagen cualquiera que encontramos en Google está libre de derechos y se puede publicar sin coste alguno. Por eso, para evitarnos problemas, lo más sensato es buscar directamente nuestras imágenes bien en webs que ofrecen imágenes con licencias no restrictivas o bien abrir una cuenta en una web comercial que ofrezca imágenes de stock. Entre las primeras, las más ampliamente conocidas son las siguientes: Wikimedia Commons http://commons.wikimedia.org/ Se trata de la sección audiovisual de Wikipedia, que cuanta con más de 6 millones de archivos con licencias libres. Búsqueda avanzada de Flickr http://www.flickr.com/search/advanced/ Flickr cuenta con un modo de búsqueda que permite filtrar las imágenes de forma que se muestren sólo aquellas con licencia Creative Commons. Búsqueda avanzada de Google http://images.google.com/advanced_image_search?hl=es Como en el caso de Flickr, Google también dispone de una búsqueda avanzada por tipo de licencia. Conviene asegurarnos siempre de las condiciones de la licencia. A menudo se nos permite usar una imagen libremente siempre que citemos al autor o que reproduzcamos un breve texto junto a ella. 221 Aula Mentor Unidad 10. Categorías, etiquetas, páginas y menús. A estas alturas del curso, podemos considerar que conocemos los fundamentos de WordPress y que podemos lanzarnos a probar, experimentar, añadir utilidades y comenzar a pulir nuestra web. Nos faltan sin embargo por conocer algunos detalles importantes, pero fáciles de comprender y de aplicar, que vamos a tratar en este capítulo. Vamos allá. 1. Categorías Cada entrada que creamos en WordPress se guarda bajo una o más categorías. Esto nos permite agrupar de forma sencilla las entradas que tratan de temas similares o que tienen algún tipo de relación. 222 Cuando instalamos WordPress, se crea una categoría por defecto que en español se denomina “Sin Categoría”. Todas las entradas que creamos son asociadas a esta categoría a no ser que especifiquemos lo contrario en la página de edición de cada entrada. Si lo deseamos, podemos estructurar nuestras categorías según jerarquías, es decir, categorías principales y subcategorías. Sin embargo, cada categoría debe tener un nombre único, incluso aunque pertenezcan a diferentes categorías principales. Generalmente, crearemos nuestras categorías durante la etapa de desarrollo, escogiéndolas de acuerdo con las necesidades de nuestro proyecto, aunque más adelante, una vez nuestra página comience a crecer y vaya evolucionando, no es extraño que los temas que tratemos se diversifiquen y tengamos que crear nuevas categorías acorde con ellos. Accedemos a la página principal de las categorías a través de menú “Entradas → Categorías”. En esta página podemos crear nuevas categorías y visualizar, editar o borrar las existentes. Para añadir una categoría debe hacerse en la columna de la izquierda de la página, rellenando los siguientes datos: - Nombre: El nombre de la categoría tal y como queremos que aparezca en nuestra web. - Slug: Como ya sabemos, es el texto que aparecerá en la URL para identificar nuestra categoría. Normalmente, el slug es una versión del nombre de la categoría pero en minúsculas, sin caracteres extraños ni tildes y sustituyendo los espacios por guiones. Módulo 3. U10 Categorías, etiquetas, páginas y menús - Superior: En este menú desplegable podemos seleccionar la categoría en la que queremos incluirla. Si se trata de una categoría de nivel superior, no tendremos que seleccionar ninguna. - Descripción: Introducir una descripción es opcional y, de hecho, en la mayoría de los temas no suele mostrarse. Por último pulsamos en el botón “Añadir nueva categoría” para añadirla. 223 Aula Mentor En la parte de la derecha contamos con un listado de las categorías activas y enlaces para editarlas o borrarlas. El borrado de categorías se puede hacer tanto individualmente como a través de una acción en lote. Hay que tener en cuenta que al borrar una categoría no se borrarán también las entradas asignadas a ella. En su lugar, todas las entradas de la categoría borrada pasarán a formar parte de la categoría por defecto. 224 Para mayor comodidad, podemos añadir categorías directamente en la página de edición de las entradas, en el bloque correspondiente de la columna derecha, pulsando en el link “+ Añadir nueva categoría” Módulo 3. U10 Categorías, etiquetas, páginas y menús Generalmente, nuestro tema estará diseñado para mostrar a los s las categorías a las que pertenece cada entrada. Por ejemplo, en Twenty Fourteen se muestran encima del título, aunque la posición puede variar mucho dependiendo del tema activo. Al hacer clic en cualquiera de las categorías se abre una página que nos muestra un archivo de todas las entradas pertenecientes a la categoría seleccionada. 225 También podemos disponer del widget que nos permite acceder a un listado de las categorías de nuestra web desde una barra lateral. Este widget se activa por defecto al instalar WordPress. Recordemos que podemos editar nuestros widgets en el menú “Apariencia → Widgets”. En él podemos ajustar nuestras preferencias de visualización. Podemos hacer que las categorías se muestren como un menú desplegable, que aparezca entre paréntesis el número de entradas pertenecientes a cada categoría o mostrar también la jerarquía, es decir, las subcategorías si las hay. Aula Mentor 2. Etiquetas Las etiquetas (no confundir con las etiquetas HTML) son palabras clave que asignamos a un determinado dato, en el caso de WordPress a una entrada. Se eligen de una forma más flexible e informal que otros sistemas de clasificación y no se pueden jerarquizar. El uso de etiquetas comenzó a extenderse en los inicios de las llamadas webs 2.0. y permitió la creación de las populares nubes de palabras, que mostraban a mayor tamaño las etiquetas con mayor número de datos asociados. By ssalonso (Own work) [CC-BY-SA-3.0 (creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons from Wikimedia Commons 226 La elección de las etiquetas asociadas a una entrada determinada es quizás más subjetiva que la elaboración de un sistema jerarquizado de categorías. Mientras las categorías son genéricas, las etiquetas pueden ser más específicas. Por ejemplo, la palabra “Música” podría servir como categoría, mientras que la palabra “violín” sería más adecuada como etiqueta. En WordPress, la creación y edición de etiquetas es prácticamente igual a la creación y edición de categorías que hemos aprendido en el capítulo anterior. Podemos acceder a la página de etiquetas en el menú “Entradas → Etiquetas”. También se pueden añadir etiquetas en la página de edición de las entradas, en uno de los bloques de la columna derecha. Módulo 3. U10 Categorías, etiquetas, páginas y menús En Twenty Fourteen las etiquetas se muestran en la parte inferior de la entrada, pero la posición exacta depende de cada tema. 227 Como en el caso de las categorías, también existe un widget que nos permite mostrar una nube de etiquetas en una barra lateral, pero no se activa por defecto al instalar WordPress, por lo que si queremos usarlo deberemos arrastrarlo nosotros mismos en la página de edición de widgets hasta la barra lateral en la posición en la que queremos que aparezca. Sus opciones nos permiten especificar si la nube se formará con las etiquetas o con las categorías. Aula Mentor 3. Páginas Como ya hemos dicho en varias ocasiones, lo que en WordPress conocemos como páginas son un tipo especial de entrada que se muestra separadamente y que se utiliza para publicar un tipo muy determinado de información de tipo general y que raramente se modifica. Estamos hablando de páginas tipo “Quiénes somos”, “o”, etcétera. Crear una página es incluso más sencillo que crear una entrada. Podemos hacerlo a través del menú “Páginas → Añadir nueva”. En principio bastará con introducir un título y cierto contenido que puede consistir en texto, imágenes y cualquier otro documento audiovisual, tal y como hemos aprendido a hacerlo en el caso de las entradas. 228 Podemos publicar la página, guardarla como borrador o pendiente de revisión, editar su visibilidad o programar su publicación diferida. Módulo 3. U10 Categorías, etiquetas, páginas y menús También podemos subir una imagen destacada para ilustrar nuestra página. El único bloque que no podemos encontrar en el caso de las entradas es “Atributos de página”. 229 En este bloque encontramos tres opciones: Superior: Permite organizar la nueva página dentro de una jerarquía de páginas. Para ello basta elegir como superior cualquiera de las páginas que se muestren en el desplegable. Por ejemplo, podemos crear nuestra página “o” y luego crear bajo ella las páginas “Formulario de o” y “Cómo llegar”. Plantilla: A menudo los temas WordPress poseen plantillas especiales para páginas que van a permitir que se muestren con un diseño diferente al que utilizamos para las entradas. Si nuestro tema dispone de tales plantillas, podremos escoger cuál usar a través de este desplegable. Orden: Las páginas se muestran en los listados o en los menús por orden alfabético. Pero podemos especificar aquí nuestro propio orden introduciendo el número correspondiente. Por ejemplo, el número 1 si queremos que se muestre la primera. Aula Mentor 4. Menús de navegación Como ya sabemos, un menú consiste en una serie de enlaces organizados que nos conducen a determinadas páginas de nuestro sitio web. El menú es la principal herramienta con la que cuentan los s que quieren acceder a una información concreta de nuestra web. Nuestro menú principal debe ser un reflejo de la estructura de la web y la distribución de su contenido. Los expertos en usabilidad recomiendan no usar más de 6 u 8 elementos por nivel para evitar abrumar al . Si el número de páginas que queremos incluir en el menú es mayor, es preferible agruparlas según jerarquías, es decir, crear páginas de segundo nivel como en el ejemplo que poníamos en el capítulo anterior (“Formulario de o” y “Cómo llegar” como subsecciones de “o”). Es importante ser cuidadosos al nombrar los enlaces. Debemos elegir nombres cortos, mejor si están formados por una sola palabra, pero lo suficientemente descriptivos del contenido al que conducen. Es preferible utilizar los nombres de uso más extendido en Internet para evitar que los s tengan que perder tiempo deduciendo la utilidad de cada enlace del menú. Por ejemplo, todo el mundo sabe a qué conducen las secciones “Quiénes somos” o “o”. El tipo de menú más comúnmente utilizado es el que suele situarse en la cabecera de la página, pero WordPress nos permite crear varios menús y situarlos en diferentes localizaciones de la web. 230 Cualquiera que sea el tema que hayamos activado en nuestro WordPress, seguramente contendrá un menú por defecto. Por ejemplo, el menú por defecto de Twenty Fourteen está situado en la parte superior de la página y en él aparecen automáticamente todas las páginas que hayamos creado. En la instalación por defecto de WordPress se crea una página llamada “Página de ejemplo”, aunque si la hemos modificado anteriormente o hemos añadido alguna más por nuestra cuenta, los cambios se habrán hecho efectivos también en el menú. A veces este menú será suficiente para nuestros propósitos pero, otras veces, las características particulares de nuestra página pueden requerir el uso de uno o varios menús personalizados. La página donde podemos crear y istrar nuestros propios menús está en “Apariencia → Menús”. Esta página puede mostrar diferentes opciones dependiendo del tema que tengamos activo. En este manual vamos a hacer referencia a la que se muestra en una instalación por defecto de WordPress con el tema Twenty Fourteen, que tiene el siguiente aspecto: Módulo 3. U10 Categorías, etiquetas, páginas y menús A continuación vamos a mostrar paso a paso como crear un nuevo menú personalizado en Twenty Fourteen. 1. Hacer clic en “Crea un nuevo menú” 231 2. Al hacerlo aparece un campo de texto en el que podemos añadir el nombre del nuevo menú. Este nombre no aparecerá en nuestra web, por lo que podemos utilizar cualquiera que nos sirva de utilidad como es. Después pulsamos “Crear menú”. Aula Mentor 3. Ahora, en la columna de la izquierda, podemos seleccionar los elementos que queremos que aparezcan en nuestro menú. Por defecto, se muestra un listado de nuestras páginas, enlaces o categorías, aunque en las opciones de pantalla podemos especificar que se muestren también entradas, etiquetas o formatos. En nuestro ejemplo, seleccionamos varias páginas y pulsamos “Añadir al menú”. 232 4. También podemos escoger categorías. Al hacer clic en este tipo de elemento de menú, el será conducido a la página de archivo de la categoría que hayamos seleccionado. Módulo 3. U10 Categorías, etiquetas, páginas y menús 5. Podemos añadir también cualquier enlace externo. Por ejemplo, nuestra página de Twitter, Facebook, otras webs asociadas o cualquier otra que estimemos oportuno. Para ello introducimos la URL, el título que le daremos al elemento de menú y pulsaremos en “Añadir al menú”. 6. Una vez añadidos todos los elementos, podemos ordenarlos a nuestro gusto arrastrando y soltando. 233 Aula Mentor 7. También podemos crear subniveles arrastrando y soltando, pero encajando el elemento en zonas con margen a la izquierda, tal y como se muestra en la imagen a continuación. 8. Cada uno de estos elementos contiene ciertas opciones que podemos editar y que se muestran al hacer click en la flecha que aparece en la parte derecha del elemento. 234 9. Una vez ordenados y editados nuestros elementos podemos configurar nuestro menú para que se añadan a él automáticamente todas las nuevas páginas de primer nivel que creemos en el futuro. También podemos especificar la ubicación del menú. Para confirmar los cambios pulsamos “Guardar menú”. Módulo 3. U10 Categorías, etiquetas, páginas y menús 10. Twenty Fourteen permite añadir un segundo menú en la barra lateral izquierda. Algunos temas no dispondrán de esta opción, mientras que otros permitirán el uso de múltiples menús en muy diversas localizaciones. Vamos a crear un segundo menú siguiendo los mismos pasos. Primero le asignamos un nombre. 11. Luego lo editamos a nuestro gusto y lo guardamos, teniendo cuidado de especificar su ubicación. 235 Aula Mentor 12. La pestaña “Gestionar lugares” nos permite editar la ubicación de nuestros menús si aún no la hemos definido. 13. En la parte izquierda de la tabla aparecen las diferentes ubicaciones que nuestro tema ha habilitado para la inclusión de menús, y en la columna de la derecha aparecen los desplegables para elegir cuál de nuestros menús deseamos para cada ubicación. No nos olvidemos de guardar los cambios pulsando el botón correspondiente. 236 14. Una vez en el front-end de nuestra web, podemos comprobar los cambios. Por una parte el menú principal... Módulo 3. U10 Categorías, etiquetas, páginas y menús 15. ...y por otra parte el menú secundario. 4.1 Qué hacer si nuestro tema no soporta menús personalizados Los s avanzados podrían registrar la característica que permite el soporte de menús personalizados en el archivo functions.php de nuestro tema, existe amplia información en Internet de cómo hacerlo. Pero si nuestro tema no soporta menús personalizados y no nos sentimos lo suficientemente seguros como para editar el código, todavía podemos hacer uso de un widget que habilita un área en la barra lateral de nuestra elección para la inserción de un menú. Veámoslo con un ejemplo paso a paso. 1. Vamos a “Apariencia → Widgets” y arrastramos el widget “Menú personalizado” a la barra lateral de nuestra elección. 237 Aula Mentor 2. Editamos las opciones del widget, eligiendo un título y seleccionando el menú que deseamos que se muestre. 3. Y listo. El menú aparecerá en la localización escogida. 238 Módulo 4. Unidad 11. Introducción a WordPress Multisitio Unidad 12. Optimización para motores de búsqueda (SEO) Unidad 13. Seguridad, mantenimiento y mejora del rendimiento Unidad 14. Publicación definitiva de nuestra web Unidad 15. Errores comunes y cómo encontrar ayuda Aula Mentor Unidad 11. Introducción a WordPress Multisitio WordPress Multisitio es una función especial de WordPress que permite crear una red de sitios web que funcionan con una sola instalación de WordPress. En este curso no vamos a estudiar esta función en profundidad, pero merece la pena al menos conocer su existencia y saber los casos en los que pudiera resultar útil. Antes de la versión 3.0, WordPress Multisitio era una versión diferente y separada de WordPress que se llamaba WordPress MU (por Multi-). A partir de la versión 3.0 el multisitio se convirtió en una característica integrada en los WordPress normales y corrientes que puede ser activada mediante unos pequeños cambios en el código. Existen varias diferencias entre la versión normal y la multisitio: 240 - En primer lugar, en un WordPress multisitio existe un escritorio específico para el de la red, desde el que puede gestionar los diferentes sitios y los s. - El de la red tiene el rol especial de súper . Como ya vimos en la unidad 3, el súper tiene los permisos necesarios para configurar cualquier aspecto de cada uno de los sitios de la red. - Los temas y los plugins también se gestionan de modo diferente. Se instalan en el de la red de modo que están disponibles para su uso en todos los sitios de la red y se pueden activar bien desde el de la red para todos los sitios, o bien en cada sitio individual. Una instalación multisitio de WordPress es útil, por ejemplo, en caso de que queramos permitir la creación de otros sitios que dependan de algún modo del nuestro. El ejemplo real más notorio de la función multisitio es WordPress.com, que permite a cualquier la creación de su propio blog aunque con ciertas restricciones de uso. Otros casos reales donde la función multisitio sería útil pudieran ser, por ejemplo, los medios de comunicación (periódicos, canales de televisión, etcétera) que contratan a ciertos profesionales de su plantilla para la publicación de un blog personal o temático, como un servicio más del sitio web del medio de comunicación en cuestión. Está de más decir que no es buena idea activar la función multisitio en pequeñas webs como portfolios, páginas corporativas de pequeñas empresas, blogs personales y ese tipo de proyectos. Si nos viéramos en el caso de tener que istrar varios sitios a la vez, por ejemplo los de varios clientes, familiares o amigos, podríamos usar la función multisitio, pero no está claro que sea la mejor opción. Si los sitios son pocos y tienen objetivos y funciones muy diferentes es mejor usar instalaciones individuales. Para activar la función multisitio es preciso añadir una linea de código a nuestro archivo wpconfig.php. Al hacerlo y recargar nuestra área de istración aparecerá un nuevo menú con Módulo 4. U11 Introducción a WordPress Multisitio instrucciones adicionales para la activación que tendremos que seguir paso a paso. Una de las opciones que tenemos es la de crear los sitios de la red como un subdominio (sitio1.dominio.com, sitio2.dominio.com, etcétera) o como subdirectorios (dominio.com/sitio1, dominio.com/sitio2, etcétera). La creación de sitios como subdominios implicará en muchos casos la configuración adicional de nuestro servidor que deberemos solicitar a nuestro proveedor de hosting. En realidad, no se recomienda instalar una red WordPress en un servidor compartido, debido al consumo muy superior de recursos del sistema. Si queremos más información sobre la instalación de un entorno multisitio podemos consultarla en el codex (inglés) aquí: http://codex.wordpress. org/Create_A_Network 241 Aula Mentor Unidad 12. Optimización para motores de búsqueda (SEO) Llamamos Search Engine Optimization (SEO), u optimización para motores de búsqueda, al conjunto de técnicas que permiten que éstos indexen nuestra web correctamente y, como consecuencia, que aparezca en un puesto destacado en los resultados de las búsquedas. Como sabemos, la web (World Wide Web) está compuesta por alrededor de 60 trillones de páginas individuales conectadas unas con otras por medio de enlaces. Los motores de búsqueda se valen de un cierto tipo de programas llamados crawlers (también conocidos como spiders, arañas, bots o indexadores) para catalogar o indexar esa cantidad desorbitada de páginas. Los crawlers comienzan por visitar e indexar unas pocas webs, luego siguen los enlaces que hay en esas webs hacia otras páginas, cuyos enlaces siguen a su vez hacia nuevas páginas y así sucesivamente. Existen muchísimos crawlers diferentes. Estos son algunos ejemplos: 242 - Googlebot: El crawler de Google - Mediapartners-Google: Indexa los anuncios de Google Adsense. - Googlebot-Image: Indexa las imágenes de Google. - Googlebot-News: Indexa noticias para Google News. - Bingbot: Crawler del buscador Bing. Los datos recabados por los crawlers se almacenan en una enorme base de datos que los buscadores consultan cuando un realiza una búsqueda. Es decir, cuando un introduce en un buscador sus términos de búsqueda, se lleva a cabo una consulta en la base de datos con el objeto de seleccionar las páginas que contienen esos términos de búsqueda. Como el número de páginas seleccionadas pueden ser millones, los buscadores ordenan los resultados según ciertos criterios para decidir qué páginas se mostrarán antes y cuáles después en los resultados que se ofrecerán al . Los distintos buscadores se rigen por diferentes criterios a la hora de ordenar los resultados de una búsqueda. Google, por ejemplo, debe buena parte de su éxito a la creación de un algoritmo capaz de devolver en los primeros puestos de los resultados de sus búsquedas las páginas más relevantes para los s. Antes del nacimiento de Google, los grandes portales vendían al mejor postor los mejores puestos en sus resultados de las búsquedas, sin informar al si el resultado que estaban ofreciendo era o no un enlace patrocinado. Google mejoró mucho las cosas al proponer un método para calcular la importancia de una web según el número de enlaces que conducían a ella y, a la vez, de la importancia relativa de las páginas que incluían enlaces a ella. Módulo 4. U12 Optimización para motores de búsqueda (SEO) El método de búsqueda funcionaba tan bien y satisfacía tanto a los s que hoy en día, según comScore en sus estadísticas de julio de 2013, Google tiene una cuota de mercado del 67%, Bing se lleva el 17,9% y Yahoo el 11,3%, mientras Ask y AOL tienen unos porcentajes de 2,7% y 1,2% respectivamente. Según el método de Google, nuestra web tendrá un puesto más alto cuantas más páginas enlacen con nosotros y cuanto más importantes sean esas páginas. O sea, es como si Google pensara que, puesto que existen tantas personas que recomiendan nuestra web, será por algo. Y si las webs que nos recomiendan gozan de buena reputación, mejor que mejor. En base a este principio, Google otorga a cada página un valor numérico denominado PageRank, que es uno de los factores más importantes que usa para clasificarlas. El PageRank de nuestras páginas es un factor que debe preocuparnos, pero no es el único ni mucho menos. En cada búsqueda, Google selecciona todas las páginas que contienen los criterios que introduce el y las analiza mediante un algoritmo que las somete a más de 200 filtros. Por ejemplo: - ¿Cuántas veces contiene la página las palabras clave? - ¿En qué lugar aparecen las palabras clave, en el título, en la URL, en el texto? - ¿Incluye la página sinónimos de esas palabras clave? - ¿La web tiene buena o mala calidad? - ¿Está correctamente programada? - ¿Es lenta o rápida? - ¿Emite spam o lleva a cabo prácticas para tratar de mejorar su posición por medios ilícitos? - Y también, cómo no, ¿cuál es su PageRank? Los algoritmos de Google son secretos y llevan camino de superar en el imaginario popular a la fórmula de la Coca-Cola. Se conocen muchos de los ingredientes que influyen en el posicionamiento de una página, pero no todos, y tampoco se conoce exactamente cuál es la importancia relativa de cada uno. Además, estos algoritmos están en cambio constante para adaptarse a los condiciones cambiantes de Internet. 1. Cómo optimizar nuestra web para motores de búsqueda La instalación básica de WordPress es amigable con los motores de búsqueda. Contiene lo necesario para guiar a los crawlers a través de entradas, páginas y categorías de forma que puedan recopilar la información que requieren para indexar correctamente nuestra web. Existen funcionalidades específicas de WordPress que son particularmente útiles para obtener buenos puestos en los resultados de las búsquedas. Por ejemplo, los enlaces permanentes amigables que estudiamos en el capítulo 1.6 de la unidad 6 tienen una gran importancia en SEO, puesto que Google puntuará mejor las páginas que contengan palabras claves en su URL. Además, existe un gran número de plugins de SEO que se pueden usar para optimizar aún más nuestra web. Hablaremos de ellos un poco más adelante. Sin embargo, hay que tener muy en cuenta que parte de las características SEO que permiten que una web obtenga buenos resultados dependen del diseño web, en nuestro caso de cómo esté programado el tema que hayamos escogido. Por eso, una de las características que debemos 243 Aula Mentor buscar a la hora de escoger un tema, tal y como dijimos en el capítulo de temas, es que éste sea SEO-friendly, o amigable con SEO. A decir verdad, a no ser que seamos s avanzados no podremos determinar si un tema es verdaderamente SEO-friendly o si sólo se limita a publicitarlo para poder vender más temas. Por ejemplo, un tema SEO-friendly debería tener ciertas características: - Una arquitectura tal que permita la sencilla indexación de nuestra web por los crawlers. - El contenido principal de cada página debería estar suficientemente arriba en el código. Los buscadores pueden no rastrear más que un tercio del contenido total de la página, por lo que conviene que el contenido principal esté antes del contenido de las barras laterales y que el código de la cabecera no sea demasiado extenso. - El tema debe favorecer la carga rápida de la página y soportar el uso de plugins de creación de caché o que minimicen el tamaño de los scripts. - Etcétera. Pero, más allá de las características de nuestro tema, las técnicas de SEO son muy variadas y específicas para cada web, por eso las compañías e instituciones a menudo contratan para sus webs los servicios de empresas especializadas en SEO y posicionamiento web. Sin embargo, si nuestro presupuesto no da para tanto, nada nos impide aprender un poco de SEO por nuestra cuenta y tratar de aplicar lo aprendido a nuestro sitio web. En este curso no vamos a aprender SEO de forma exhaustiva pero sí podemos introducir algunas claves a las que debemos prestar atención para asegurarnos de que estamos haciendo lo correcto en cuanto a SEO se refiere. 244 Lo primero de lo que debemos ser conscientes es de las palabras o frases clave a través de las cuáles queremos que los s nos encuentren en los buscadores. Esto tiene muchísima más miga de lo que pueda parecer a primera vista y, si queremos profundizar en ello, podremos encontrar información abundante en Internet, aunque en este curso vamos a simplificar mucho las cosas. Supongamos que soy una fisioterapeuta llamada María Revilla y que estoy creando mi página web personal. ¿Cuáles son las palabras claves por las que me gustaría que me encontrasen? Para empezar, hay muchas mujeres llamadas María Revilla, pero yo quiero que cuando un introduzca mi nombre en un buscador, mi página aparezca la primera o, al menos, entre las 5 primeras. En ningún caso quisiera que apareciera en la segunda página que tan sólo una minoría de s consulta. Por eso, una de mis claves sería “María Revilla”. Pero pocos s me buscarían en Internet por mi nombre, seguramente lo harían los clientes que ya tengo, o aquellos que han oído hablar de mi por referencias. Por lo tanto, hay otra serie de claves que buscan las personas que no me conocen y que necesitan servicios de fisioterapia, por ejemplo “fisioterapia”, “fisioterapeuta”, “rehabilitación”, “esguince”, “fractura”, “luxación”, etcétera. No puedo esperar que los s conozcan los nombres técnicos relativos a mi profesión, así que además de términos como “lumbalgia” o “fascitis plantar” debería tal vez añadir otros equivalentes como “dolor de espalda” o “dolor talón pie”, de uso más coloquial. Un que esté buscando un gabinete de fisioterapia seguramente lo buscaría cerca de su domicilio, así que a mis claves debería añadir la ciudad donde tengo mi consulta, o incluso el barrio si vivo en una gran ciudad, así puedo esperar que mi web se muestre cuando un introduzca en Google las palabras “fisioterapeuta en Chamberí” Módulo 4. U12 Optimización para motores de búsqueda (SEO) Este sería el tipo de razonamientos que tendríamos que llevar a cabo para recopilar nuestras claves. Nuestra tarea sería ahora utilizar esas claves de la manera correcta en nuestra web. 1.1 Contenidos optimizados para SEO El principal tipo de contenido que los motores de búsqueda son capaces de indexar son los textos. Por eso, nuestras páginas deben contener abundante texto, bien escrito, pertinente y de calidad. Nuestras claves deben aparecer en las entradas, páginas y categorías de nuestra web. Puntuaremos más si las palabras clave aparecen en la URL, en el título HTML de la página, en los titulares de nuestros artículos y en los enlaces. También puntuaremos más si las palabras clave aparecen también en el contenido y no sólo en los títulos. De esta manera Google y otros buscadores se aseguran de que no estamos destacando claves como un mero señuelo. Está bien que las claves aparezcan varias veces pero, sin embargo, el uso excesivo de claves en una página es contraproducente y los buscadores podrían restarnos puntos por eso. También nos restan puntos por ocultar palabras clave mediante el color o el diseño, para que no se distingan del fondo de página, por ejemplo. O también por mostrar distinta información a los robots y a los s reales. Google conoce las artimañas más sofisticadas de los que tratan de engañarle y sabe sortearlas, llegando incluso a penalizar una web haciéndola desaparecer de sus listas. Al fin y al cabo, lo que tratan de averiguar los buscadores para ofrecer un buen servicio es si nuestra página contiene la información que el está buscando. 1.2 HTML y SEO Hay ciertos tags HTML a los que debemos prestar atención al optimizar el contenido de nuestras páginas. El tag Da lugar al título de la página. No se trata del título de la entrada, sino del título que vemos en la barra superior del navegador cuando cargamos una página. Es uno de los lugares donde los buscadores esperan encontrar palabras clave. Más adelante veremos cómo podemos editar este dato. Los encabezamientos 644t6j

... 28q18

Como vimos en el capítulo 2.1 de la unidad 8, los encabezamientos son los títulos que damos a los diferentes capítulos, apartados, y subapartados de nuestro texto, siendo 6z181b

el título de mayor nivel y 193w1w

Manual Wordpress 254p3q

Overview 3e4r5l

More details w3441

6l6m1j

6l6m1j

el título de mayor nivel y 193w1w

el de menor. y1wc

sólo puede ser utilizado una vez en cada página, puesto que se considera el título de la misma. El resto de encabezamientos podemos usarlos cuantas veces queramos, siempre teniendo en cuenta el orden de niveles. Por ejemplo, 5c645

es una subsección de 4x725r

que, a su vez, es una sección de 2t325q

... 28q18

Como vimos en el capítulo 2.1 de la unidad 8, los encabezamientos son los títulos que damos a los diferentes capítulos, apartados, y subapartados de nuestro texto, siendo 6z181b

el título de mayor nivel y 193w1w

Related Documents 3m3m1z

Manual Wordpress 254p3q

Manual Wordpress Cursocamara2 38141q

Wordpress Website 1t113e

Wordpress Database 6t2s14

Wordpress Toc 2l3r6h

Cara Install Wordpress Offline Di Xampp Manual 1c71j