DESARROLLO DE APLICACIONESCON TECNOLOGÍAS WEB

Uso de WordPress

El menú de Wordpress (I)El menú de Wordpress es un completo y simple sistema de administrar nuestro sitio web. En cada versión de Wordpress se producen cambios en toda la aplicación por lo que pueden existir bastantes diferencias en el menú entre distintas versiones.

No sólo podemos administrar el sitio sino que además recibiremos notificaciones de nuevos posts, comentarios y actualizaciones de seguridad. Para entrar:

http://nuestro-site/wp-admin

La versión de WP que nosotros veremos es la 3.9.

El menú de Wordpress (II)

El menú de Wordpress (III)

En la zona superior tendremos un menú que nos dará acceso a:

- Zona de bienvenida y novedades de la versión.

- Enlace a la zona pública del sitio

- Avisos de actualizaciones y comentarios

- Añadir una nueva entrada, página, imagen o usuario

- Modificar nuestro perfil de usuario

El menú de Wordpress (y IV)En el lateral izquierdo tendremos una zona con todos los apartados y configuraciones de la web

- Alertas de seguridad y actualizaciones

- Edición de contenidos: Entradas cronológicas o Posts, Medios (ficheros de imágens, multimedia, PDF, etc), Páginas estáticas y Comentarios.

- Configuraciones: Apariencia o Temas, Plugins, Perfiles de usuarios, Herramientas y Ajustes del sitio

Entradas o Post (I)Los posts son entradas que vamos publicando yen nuestro blog que se ordenan de manera cronológica. Por lo general, los posts tienen un titular, un cuerpo del artículo donde se puede introducir texto, fotografía, código html e incluso multimedia.

Los posts están archivados por categorías y también se acompañan de palabras clave o etiquetas relacionadas con el contenido del mismo.

También suelen recibir comentarios de los lectores, a diferencia de las páginas estáticas.

Entradas o Post (II)Para la redacción de cualquier artículo o página utilizaremos el editor de contenido. El editor de WP permite crear y modificar el contenido almacenado en la BD utilizando una versión enriquecida que nos permite maquetar directamente como si fuera un WYSWYG denonimado Editor Visual.

O bien podemos utilizar una modalidad denominada Editor de Texto que nos obliga a utilizar sintaxis HTML.

En estos editores también podemos incluir shortcodes. Sintaxis especiales que ejecutan funciones en nuestro código para facilitar la edición.

Entradas o Post (III)Los shortcodes en WordPress son pequeños códigos que puedes añadir en el editor de WordPress. Se usan para añadir funciones al contenido de tus entradas y páginas sin tener que escribir un script cada vez que necesites hacer esa tarea.

Son como tags HTML que usan corchetes ([ ]) en vez de los símbolos de “mayor y menor qué” (< >).

[gallery id="123" size="medium"]

http://codex.wordpress.org/Shortcode_API

http://ayudawp.com/que-son-los-shortcodes-y-como-crearlos/

Entradas o Post (y IV)

Librería multimedia (I)Como cualquier CMS se puede asociar contenido multimedia a las entradas y páginas incluidas en nuestro site. Se puede vincular cualquier tipo de contenido. Sin embargo los tipos de documento conocidos como imágenes, video, audio, etc son interpretados automáticamente por el editor y no requieren de ningún tipo de códgo HTML para ser correctamente interpretados y enlazados.

Por supuesto deberemos de tener en cuenta las limitaciones de tamaño a la hora de subirlo al servidor.

Librería multimedia (II)A la hora de incluir contenido adjunto o multimedia a nuestro site lo podemos hacer de dos maneras:

- Desde el Menú principal > Medios > Añadir nuevo

- Desde el Editor de contenido > Añadir objeto

Los ficheros se almacenan en una carpeta (configurable), vinculánda con una entrada en la tabla post (todo se guarda en post).

Básicamente cualquier contenido del site se guarda en la tabla post.

Librería multimedia (III)

Cuando subimos contenido en imagen (*.jpg, *.img, *.png, *,tiff, etc) el CMS lo procesa y genera imágenes intermedias, thumbnails o miniaturas (el nombre que prefieras). Dichos tamaños son configurables desde el menú Ajustes.

De este modo podemos incluir en los post o páginas miniaturas de las imágenes originales, generar galerías e imágenes, etc.

Librería multimedia (IV)

Desde Wordpress 3.5 es posible generar de galerías de imágenes por medio del shorcut [gallery] sin instalar plugins de terceros.

http://codex.wordpress.org/Gallery_Shortcode

Librería multimedia (y V)

Desde las últimas versiones de WP es posible incluir directamente enlaces a contenido multimedia como audio (mp3, ogg, etc) y video (YouTube, Vimeo, etc) generándose el código necesario para reproducirlo.

Roles de usuarios (I)

Como en la mayoría de los CMS es posible crear múltiples usuarios, con diferentes permisos o roles, lo que nos permite implementar una solución colaborativa y jerárquica.

http://codex.wordpress.org/es:Roles_y_Capacidades

Roles de usuarios (II)

Invitado: Es un usuario sin login, no puede acceder al área privada y sólo puede ver los contenidos del área pública.

Suscriptor: Es un usuario que simplemente puede editar su perfil. Son usuarios ideales para secciones y páginas que sólo permitan el acceso a usuarios registrados. Para crear áreas privadas podemos utilizar el plugin Members.

http://wordpress.org/plugins/members/

Roles de usuarios (y III)

Colaborador: Es un usuario que puede escribir y modificar sus propios post. No puede publicarlos por lo que necesitará la supervisión de un editor o administrador los apruebe.

Autor: Puede escribir y publicar posts, también podrá editarlos pero solamente los suyos.

Editor: Puede escribir y publicar post y páginas y también editar, modificar y publicar los post de otros.

Administrador: Puede crear usuarios, realizar el mantenimiento del sitio, incluyendo todas las capacidades del resto de roles.

Estructura de archivos de WP (I)

Wordpress es uno de los CMS con la estructura de archivos más sencilla.

Por supuesto cuenta con un archivo de configuración donde personalizar y adaptar nuestra instalación a nuestras preferencias: wp-config.php

http://codex.wordpress.org/Editing_wp-config.php

Estructura de archivos de WP (II)

Estructura de archivos de WP (III)

WP-ADMIN y WP-INCLUDES: Ambas carpetas se contienen el código que hace funcionar WP y contienen el core y donde se aplican las actualizaciones.

JAMÁS TOCAR ESTAS CARPETAS

Estructura de archivos de WP (y IV)

WP-CONTENT: Guarda los datos y configuraciones propias del blog y aquí no se aplican las actualizaciones de WP.

- uploads: todas las imágenes, vídeos y archivos que se suban a la librería.

- plugins: módulos disponibles para ampliar las funcionalidades del site.

- themes: todas las plantillas que tenemos disponibles para vestir al blog.

- languages: ficheros .mo de los idiomas en los que queremos tener WP (tanto la parte pública como la de administración).

Estructura de la BD de WP (I)

Como en cualquier CMS los datos y los contenidos se almacenan en la Base de Datos en sus distintas tablas. Vamos a hacer un breve repaso de las tablas que la componen.

ATENCIÓN: Está desaconsejado modificar y cambiar registros de las tablas en WP dado que podrías modificar valores que pueden alterar el funcionamiento

Estructura de la BD de WP (II)- wp_commentmeta: Deprecated. Se conserva por compatibilidad. Contenian los metadatos de los comentarios.

- wp_comments: En esta tabla se guardan todos los comentarios, junto con sus metadatos.

- wp_links: Deprecated. Se conserva por compatibilidad. Contenían los enlaces de la barra lateral. Alhora se almacenan esos datos en la pestaña de menús.

- wp_options: Aquí se guardan todos los datos de ámbito general, así como configuraciones de plugins y themes. Para un developer esta tabla es esencial, ya que debe guardar aquí todos los datos de sus plugins y themes.

Estructura de la BD de WP (y III)- wp_post: Aquí se guardan los datos básicos de los posts, las páginas y los archivos -attachments-, además de sus revisiones.

- wp_postmeta: Aquí se guardan los metadatos de los posts / páginas / attachemnts de la tabla anterior. Mayoritariamente, los datos de esta tabla contienes campos personalizados (los famosos custom fields).

- wp_terms, wp_term_relationships y wp_term_taxonomy. Estas tablas contienen los datos y metadatos de las categorías y etiquetas.

- wp_users y wp_usermeta. Esta tabla contiene la información mínima de los usuarios (y la contraseña encriptada con MD5). Algunos campos relevantes son: user_login, user_pass, user_email, display_name, …

Cambiar la contraseña en WP (I)…directamente en la tabla wp_users. En situciones de emergencia. ;-)

El campo password de la tabla wp_users contiene la contraseña encriptada de cada usuario utilizando uno de los algoritmos más simples: MD5.

Si en algún momento olvidas la contraseña de acceso y no funciona el método de recuperación normal por medio del envío del Email puedes editar dicho valor y sustituirlo por uno conocido.

Cambiar la contraseña en WP (y II)1. Localiza el registro de la tabla wp_users que quieres cambiar su password.

2. Obtén una cadena de texto de la cual conozcas su MD5 o bien localiza una página que genere hash MD5

http://www.md5hashgenerator.com/

12345 → 827ccb0eea8a706c4c34a16891f84e7b

3. Susituye en el registro la cadena existente por la nueva y desde este momento ya puedes entrar con la nueva password.

Temas (I)

Uno de los puntos fuertes en Wordpress es la personalización y su facilidad a la hora de instalar temas. Los temas o plantillas son la capa de presentación del contenido pudiéndose cambiar sin que la información se vea afectada.

http://wordpress.org/themes/

http://themeforest.net/category/wordpress

Temas (II)Ficheros básicos de un tema o plantilla de WP

Temas (III)- index.php: Archivo que realiza las llamadas al contenido a mostrar en la página y donde se ejecuta el Loop. The Loop no es un arbivo en sí, sino el contenido de WP que se denomina de The Loop (el bucle) dado que se obtiene realizando una llamada a la BD y muestra los contenidos de una consulta.

Por supuesto este fichero index.php realizará las correspondientes inclusiones para incrustar el <head>, menús, cabeceras, scripts de JS, pies de página, etc.

- Estilos.css: Ficheros en donde almacenaremos el estilo visual.

- Imágenes: El tema podrá por supuesto contener sus propios archivos de imagen relacionados con el aspecto visual y no del contenido.

Temas (y IV)- header.php: Archivo global que muestra encabezado y navegación. También contiene código html cabeza.

- sidebar.php: Las barras laterales se controlan desde este fichero. El contenido se configura, mediante widgets, desde el panel de administración de WordPress. Puedes tener cuantos sidebar definas.

- footer.php: Contiene instrucciones para el pie de página global y cierra etiquetas html.

- functions.php: Fichero .php en donde se definen los shorcuts, funciones y clases relacionados con el tema, así como la definición de sidebars.

Esta lista es simplemente una versión mínima y orientativa, puesto que generalmente son mucho más complejos.

Menú (I)Como en todas páginas web en los Blogs existen menús que nos permiten componer la jerarquía de contenidos y navegar por nuestra página web. En dicho menú nosotros elegiremos los contenidos que queremos incorporar al menú y cómo queremos que se muestren.

La estética y comportamiento del menú dependerá sobre todo del tema que hayamos elegido,variando de un tema a otro.

http://codex.wordpress.org/WordPress_Menu_User_Guide

Menú (II)Puedes elegir dónde situar el menú según la complejidad de tu tema. Algunos permiten tener varios menús distintos. Uno por ejemplo en la cabecera y otro en el pie, no teniendo que coincidir los contenidos de uno y otro. Puedes incluso elegir no tener un menú.

Menú (y III)¿Qué puedo tener o enlazar en el menú? Prácticamente cualquier contenido.

- Enlazar al índice del Blog o a Entradas concretas

- Enlazar a una Página en concreto (desarrollada previamente en WP)

- Enlazar a un Enlace externo, incluyendo la URL correspondiente

- A los contenidos de una Categoría o Etiqueta

No sólo podremos añadir entradas, sino jerarquizarlas y elegir la ubicación del menú

Formas de modificar un temaExisten varias formas de modificar un tema en Wordpress.

- Podemos editar directamente los ficheros del tema en la carpeta /wp-content/themes (mala idea)

- Podemos editar los ficheros del tema desde Wordpress desde la opción Apariencia > Editor (mala idea)

Ambos métodos modifican los ficheros del autor y ante cualquier posible actualización nuestra versión será sobreescrita y perderemos los cambios.

La mejor opción es desarrollar Temas hijos (Child Themes).

¿Como crear un tema hijo? (I)http://codex.wordpress.org/es:Temas_hijos

1º Para ello crearemos una carpeta en el directorio wp-content/themes con el nombre del tema que vamos a crear. Generalmente igual que la carpeta del tema padre, pero le agregamos al final el sufijo -child o -hijo

2º Crearemos dentro de esta misma carpeta un archivo style.css que contendrá el código necesario para que WP lo interprete como un tema hijo de otro tema ya instalado. Puedes ver un ejemplo en la siguiente diapositiva

¿Como crear un tema hijo? (II)/*

Theme Name: Twenty Fourteen Child

Theme URI: http://example.com/twenty-fourteen-child/

Description: Twenty Fourteen Child Theme

Author: John Doe

Author URI: http://example.com

Template: twentyfourteen

Version: 1.0.0

Text Domain: twenty-fourteen-child

*/

@import url("../twentyfourteen/style.css");

/* =Aquí empieza la personalización de tu tema

-------------------------------------------------------------- */

¿Como crear un tema hijo? (y III)3º Una vez creado el archivo stye.css si vamos al Menú de Administración de WordPress > Temas comprobaremos cómo aparece un nuevo tema: el tema hijo que hemos creado. Seleccionalo como tu nuevo tema activo.

4º A partir de este momento cualquier cambio que añadas en style.css se aplicara a todo el estilo de la página.

5º Si quieres cambiar algo más que la hoja de estilos, tu tema hijo puede sobrescribir cualquier archivo del tema padre. Por ejemplo, si quieres cambiar el código PHP para la cabecera (header), puedes inlcuir un header.php en la carpeta de tu tema hijo. De este modo, este archivo se usará en lugar del header.php del tema padre.

Plugins en WP (I)

Los Plugin son herramientas que extienden la funcionalidad de WordPress. Además hay una gran comunidad de desarrolladores que han creado multitud de plugins que puedes agregar en tu tema de forma gratuita: plugins de medios sociales, mejora de SEO, seguridad, imágenes y galerías, gestión de usuarios, etc.

https://wordpress.org/plugins/

Plugins en WP (y II)

Algunos de los problemas que originan los plugins que os están bien desarrollado son deficiente velocidad de ejecución, demasiadas peticiones de HTTP o duplicidad de petición de código JS, vulnerabilidades de seguridad, etc.

Tabla periódica de los Plugins de WordPress

http://plugintable.com/

Algunos plugins...Akismet: Comprueba los comentarios en busca de SPAM

https://wordpress.org/plugins/akismet/

Contact Form 7: Permite configurar un Formulario de contacto a medida

http://wordpress.org/plugins/contact-form-7/

BackWPup: Permite configurar y gestionar copias de seguidad de la BD y ficheros

https://wordpress.org/plugins/backwpup/

Simple LightBox: Permite mejorar una galería de imágenes

https://wordpress.org/plugins/simple-lightbox/

Super Socializer: Permite añadir botones para compartir en redes sociales

https://wordpress.org/plugins/super-socializer/

Algunos plugins...WooCommerce: La plataforma más extendida para crear tiendas en WP

http://wordpress.org/plugins/woocommerce/

WP CleanFix: Incluye opciones para optimización y limpieza de la BD de WP

https://wordpress.org/plugins/wp-cleanfix/

All In One SEO Pack: Mejora y configura las opciones de SEO de tu WP

https://wordpress.org/plugins/all-in-one-seo-pack/

Brute Protect: Protege de ataques programados BOTS

https://wordpress.org/plugins/bruteprotect/

Wordfence: Optimiza y protege el código del core de WP

https://wordpress.org/plugins/wordfence/

Enlaces y páginas de interésDocumentación Oficial de Wordpress

http://codex.wordpress.org/es:Main_Page

Página de referencia con tutoriales y HOW-TO's

http://ayudawp.com/

Directorio de Plugins para WP

https://wordpress.org/plugins/

Themes

http://wordpress.org/themes/

http://themeforest.net/category/wordpress