Personaliza WordpressCreación y personalización de websites.

06 de Junio de 2015

1. Presentación2. Introducción a WP 4.X3. Instalación4. Configuración e instalación

del profile5. Wocommerce6. Contact form 77. Wordpress SEO By Yoast8. W3 Total Caché9. Visual composer10.Nuestro primer plugin

Índice

Presentación

1

¿Quién soy?

Conoce Wordpress

1. Presentación

- Alberto Pérez

Twitter: https://twitter.com/albertozgz1Google plus: https://plus.google.com/u/0/

Desarrollo proyectos a medida para todo tipo de clientes en el área de Internet de Hiberus Tecnología.

Introducción a Wordpress

2

Matt Mullenweg

Conoce Wordpress

2. Introducción a Wordpress

Qué es Wordpress

Conoce Wordpress

2. Introducción a Wordpress

Wordpress es un Sistema de Gestión de Contenidos, CMS de las siglas en inglés, gratis y con licencia Open Source usado para publicar y mantener cualquier tipo de sitio web desde una página personal hasta una intranet corporativa.

Versiones

Conoce Wordpress

2. Introducción a Wordpress

- Rama 0 (May 27, 2003) a la 0.72- Versión inicial de Wordpress

- Rama 1.0 a la 1.5.2- Rama 2.0 a la 2.0.11- Rama 2.1 a la 2.1.3- Rama 2.2 a la 2.2.3- Rama 2.3 a la 2.3.3- Rama 2.5 (11-jun-2008) a la 2.9- Rama 3.0 a 3.9

- En la versión 3.7 lanzan una actualización que maneja las actualizaciones automáticas del core de WP y que podemos desactivar añadiendo en el archivo wp-config.php la siguiente sentencia: define( 'WP_AUTO_UPDATE_CORE', false ); En la página Codex de Worpdress podremos obtener un listado de todas las actualizaciones que podemos manejar: https://codex.wordpress.org/Configuring_Automatic_Background_Updates

- Rama actual 4.x

Características principales de Wordpress

Conoce Wordpress

2. Introducción a Wordpress

- Su estructura modular altamente configurable es una de sus características más importantes.

- Es administrable desde el propio navegador web. - Es muy flexible a la hora de mostrar el contenido. - Su apariencia es modificable y consistente en todo el sitio.- GRAN COMUNIDAD DE USUARIOS

Su motivo principal de éxito es su gran flexibilidad, ofrece multitud de operaciones de ampliación y personalización tanto para los maquetadores como para los programadores.Esto hace que sea la herramienta ideal para sitios que requieren un alto nivel de personalización o para aquellos que necesitan desarrollar funcionalidades a medida.Permite publicar y compartir artículos, imágenes o cualquier otro tipo de archivos y servicios añadidos como foros, votaciones, blogs, ecommerce…

Estadísticas de uso

Conoce Wordpress

2. Introducción a Wordpress

A Octubre de 2014, aproximadamente el 38% de todas las web que podemos encontrar en internet son gestionadas por CMS. Considerando las webs generadas por CMS, encontramos cifras como que WordPress es usado en un 61.1% de las veces, Joomla un 7.8%, Drupal un 5.1%, Blogger un 2.8%, Magento un 2.7%.

Para hacernos una idea, el número de webs estimadas en Internet es aproximadamente 1.095.440.000 a fecha de Octubre de 2014. Lo que quiere decir que el número aproximado de páginas creadas en WordPress es 254.339.259, 32.468.841 en Joomla, 21.229.627 en Drupal, 11.655.481 en Blogger y 11.239.214 en Magento.

WordPress61.1%

Joomla7.8%Drupal

5.1%

Blogger2.8%

Magento2.7%

Otros20.5%

Instalación

3

Requisitos para instalar Wordpress

Primeros pasos

2. Instalación y primeros pasos

Un sistema base, tiene que tener como mínimo 1 core de 1,5 GHZ a 64 bits, 2 GB de RAM, disco en RAID 1 o superior por hardware

Bueno, aquí nos ceñimos a la información actual que ofrece WordPress a la hora de definir los requisitos mínimos para instalar.

Estos son:

- PHP versión 5.2.4 o superior.- MySQL versión 5.0 o superior.

Empezando a instalar wordpress

Primeros pasos

2. Instalación y primeros pasos

1 – Creación del entorno (Configuración host + vhost + descarga del aplicativo en es.wordpress.org)2 – Creación de la base de datos3 – Empezando a instalar wordpress

1 – Revisar los permisos del directorio (755 para direct. y 644 para ficheros)2 – Configurar nuestro wp-config.php e instalación de la BD3 - ¿Te acuerdas de que la versión 3.7 trajo actualizaciones automáticas no?

Toda ha ido bien . Ya has instalado tu WP

Primeros pasos

2. Instalación y primeros pasos

Configuración e instalación del profile

4

4. Configuración y manejo

Primeros pasos tras la instalación

Manual Introducción

- ¿Qué hacer tras mi instalación?:o Instalar mi profile (Es recomendable tener una carpeta en nuestro PC con todos los

plugins que solemos usar para «llegar y engranar»). Subiríamos la carpeta con todos los plugins al directorio wp-content/plugins, iriamos a nuestro panel de administración y actualizaríamos los plugins siempre mirando previamente el «changelog» de cada uno de ellos. ¡SUPERIMPORTANTE! . Lógicamente nuestros módulos previamente descargados deberían ir en correspondencia a nuestra versión de WP.

o Configurar cada uno de los plugins en caso de no tener incluido en el profile una .sql

o Configurar nuestras urls amigables desde ajustes > enlaces permanenteso Si estamos en desarrollo … MUY IMPORTANTE habilitar la opción «Disuade a

los motores de búsqueda…» desde Ajustes > lectura. Deshabilitar, al subir la web a producción

o Configurar usuarios y roles. Yo uso el plugin user role editor y frontend admin menu

4. Configuración y manejo

Primeros pasos tras la instalación

Manual Introducción

- ¿Qué hacer tras mi instalación?:o Dejar configurado las cookies de nuestro sitio web. Yo uso el plugin Cookie

Law Infoo Configurar el envío de emails. Es posible que más de una vez hayáis instalado

un plugin de envío de emails y no os lleguen, es muy probable que sea por motivos de configuraciones «SMTP», si hacéis envíos y no os llegan debéis probar a instalar un plugin de SMTP, yo uso easy WP SMTP y poner vuestros datos de configuración (vuestro hostings podrá ayudaros)

o Configurar XML Sitemap para dar a google todo mascado y evitar problemas de indexación. Para esto tenemos varias opciones, a mi parece la mejor es instalar el plugin Google XML Sitemap, pero si tenemos instalado el plugin de «Wordpress SEO by Yoast» también nos ofrece esta posibilidad.

o MUY IMPORTANTE: Dejar configurado un sistema de backups, tenemos que tener copias de seguridad mientras estamos trabajando para evitar sustos.

4. Configuración y manejo

Evita estas configuraciones con un profile

Manual Introducción

- Todas estas configuraciones anteriores podemos evitarlas si tenemos un profile con todos nuestros plugins y una .sql de nuestro wordpress la cual tendrá ya las configuraciones de estos plugins. (URL para descargar plugins: http://es.wordpress.org/plugins/)

- ¿Qué profile estoy usando yo?. Para la vesión de Wordpress 4.2.x yo estoy usando los siguientes plugins en cualquier instalación básica de wordpress (Sin tener en cuenta woocommerce)

1. Contact form 72. Contact form DB extension3. Cookie law info4. Custom login5. Disable comments6. Easy WP SMTP7. Embed any document8. Frontend admin menu9. Google sitemap XML10. Visual Composer11. LayerSlider

12. Meta Box

13. Post duplicator14. Really simple captcha15. Redirection16. WPML17. TinyMce18. User Role Editor19. Wordpress SEO by Yoast20. WP Migrate DB

Woocommerce

5

5. WooCommerce

¿Qué es woocommerce y cómo usarlo?

Manual Introducción

- Es una herramienta muy sencilla e intuitiva que permite montar una tienda online “pequeña”. Y está traducida al castellano. También tiene una buena batería de plugins que complementan las funcionalidades básicas de WooCommerce, además se integra con “WPML” y esto nospermite tener una tienda multilingüe, traduciendo todo el contenido y productos a los idiomas que se establezcan, incluso puedes tener productos diferentes para cada idioma.

5. WooCommerce

Notición

Manual Introducción

- WordPress ha comprado WooThemes, la empresa detrás del popular plugin WooCommerce.

5. WooCommerce

Paypal – modo sandbox

Manual Introducción

- https://developer.paypal.com/developer/accounts

5. WooCommerce

Paypal – modo sandbox

Manual Introducción

- https://developer.paypal.com/developer/accounts

5. WooCommerce

Otros plugins

Manual Introducción

- Jigoshop: https://www.jigoshop.com/- WP eCommerce: https://wordpress.org/plugins/wp-e-commerce/- TheCartPress: https://wordpress.org/plugins/thecartpress/

Contact form 7

6

6. Contact form 7

¿Qué es contact form 7 y cómo usarlo?

Manual Introducción

- Contact form 7 es un potente plugin de creación de formularios para envío de emails a través de nuestra página web. Es muy flexible y permite configurar nuestro formulario libremente. Además cuenta con alguna extensión como es Contact form 7 database que guarda todos nuestros envíos en una BD y permite gestionarlos mediante shortcodes

6. Contact form 7

Analítica en contact form 7

Manual Introducción

- Para añadir una analítica sobre la página de «Gracias» de nuestro formulario podemos añadir en la configuración adicional lo siguiente:

on_sent_ok: "location.replace('http://www.webquesea.com/paginadegracias'); "

Esta página contendrá el js del evento.

6. Contact form 7

SMTP

Manual Introducción

- Si el email no os llega acordaros de revisar la configuración SMTP.

- Aconsejo el plugin: Easy WP SMTP

6. Contact form 7

Otros plugins

Manual Introducción

- Cforms. Es mucho más completo pero más complejo.- Contact form builder- Custom Contact Forms

- https://wordpress.org/plugins/search.php?q=contact

Wordpress SEO by Yoast

7

7. Wordpress SEO

¿Qué es Wordpress SEO y cómo usarlo?

Manual Introducción

- Wordpress SEO by Yoast es un plugin muy potente y que tenemos libre en el propio repositorio de Wordpress. Cuenta con numerosas funciones de configuración SEO, las más destacadas puedan ser el cambio de Titulos y metas a nivel general y a nivel particular, configuración del sitemap XML, enlaces permantentes…

7. Wordpress SEO

Otros plugins

Manual Introducción

- All in one SEO Pack https://wordpress.org/plugins/all-in-one-seo-pack/- SEO Ultimate https://wordpress.org/plugins/seo-ultimate/

W3 Total Caché

8

8. W3 Total Cache

¿Qué es W3 Total Cache y cómo usarlo?

Manual Introducción

- W3 Total Cache es uno de los plugins más útiles de WordPress. Su principal función es almacenar en cache las páginas, objetos y consultas a la base de datos para dar una respuesta mas rápida

8. W3 Total Cache

Otros plugins

Manual Introducción

- WP Super Cache, es potente y sencillo de usar e incluso a veces mucho más efectivo que W3 Total Cache. Pertenece a Automatic, empresa de Wordpress. https://wordpress.org/plugins/wp-super-cache/

- Quick cache https://wordpress.org/plugins/quick-cache/

Visual Composer

9

9. Visual composer

¿Qué es visual composer?

Manual Introducción

- Visual composer es un plugin, que nos agiliza el trabajo enormemente ya que con este módulo podemos realizar plantillas desde cero con un gran diseño tanto para desktop como para móviles y tablets.

- Es un módulo que dispone de números «componentes» y es muy flexible

- La parte «mala» es que algo tan potente no puede ser gratis, y es que este módulo es de pago, cuesta 33$ en codecanyon.net

- Otras ventajas es que de cara el usuario es muy cómodo ya que puede editar el contenido desde el propio frontend como si de una hoja word se tratara (Ahora wordpress ha desarrollado un modulo que realiza esto pero esta todavía en BETA -> http://es.wordpress.org/plugins/browse/beta/)

- Esta disponible para wordpress 3.5 en adelante

9. Visual composer

Empezando con visual composer

Manual Introducción

- Vamos a ver el potencial que puede llegar a tener visual composer.

Nuestro primer plugin

10

10.Nuestro primer plugin

Empecemos a desarrollar

Manual Introducción

- A continuación vamos a desarrollar un módulo de suscripción de usuarios. Antes de comenzar a meter mano en las tripas de wordpress es fundamental conocer la guía del programador o mejor dicho la codex de Wordpress.

- La codex de wordpress, es como la wiki que nos ayuda desde dar los primeros pasos con wordpress ha estar día tras día en ella buscando funciones que se adapten a lo que necesitamos.

- La url de la codex es: https://codex.wordpress.org/

10.Nuestro primer plugin

Estructura de un módulo

Manual Introducción

- Archivo principal en el raiz. En este caso frontend-admin-menu.php, además debe llamarse como el módulo.

- El raíz debe contener un Readme.txt y una License.txt en caso de que queramos subirlo al repositorio de WP

- Deberemos diferencia los archivos en «backend» y «frontend», en este caso se ha separado el backend en la carpeta «admin» mientras que el frontend es ejecutado todo desde el raiz

10.Nuestro primer plugin

Archivo principal del raiz

Manual Introducción

- Para que nuestro módulo aparezca en la pestaña de «Plugins» de nuestro Wordpress debe estar dentro de wp-content/plugins y además el archivo principal del raíz empezar de la siguiente forma (En este caso el módulo es frontend admin menu)

10.Nuestro primer plugin

Añadir row metas debajo de la descripción

Manual Introducción

- Los row metas suponen una ayuda para el usuario. Si queremos usarlo deberemos usar el siguiente hook: miplugin_row_meta ( $links, $file )

- Más información: https://codex.wordpress.org/Plugin_API/Filter_Reference/plugin_row_meta

10.Nuestro primer plugin

Hooks de activación, desactivacion y desinstalación

Manual Introducción

- Debemos registrar nuestras funciones de activación y desactivación mediante un register_action_hook, mientras que la desinstalación de un modulo podemos realizarla mediante un archivo en el raíz llamado uninstall.php

- Más información:- https://codex.wordpress.org/Function_Reference/register_activation_hook- https://codex.wordpress.org/Function_Reference/register_deactivation_hook

10.Nuestro primer plugin

Añadir menú en la administración

Manual Introducción

- Usaremos el siguiente add_action: admin_menu

- 1 parámetro: Titulo de la página- 2 parámetro: Título del menú- 3 parámetro: Permisos- 4 parámetro: Slug o URL a donde tiene que apuntar- 5 parámetro: Función callback- 6 parámetro: Icono

- Más información: https://codex.wordpress.org/Administration_Menus

10.Nuestro primer plugin

Añadir JS y CSS en backend y frontend

Manual Introducción

- Como bien hemos visto en la estructura del módulo separamos los css y jss tanto del frontend como del backend. Es innecesario cargarlos si no vamos a usarlos. Por lo tanto vamos a cargar por un lado css y js del admin con el add_action «admin_enqueue_scripts» y por otro lado los del frontend con el add_action «wp_enqueue_scripts»

- Más información: https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

- https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

10.Nuestro primer plugin

Añadir JS y CSS en backend y frontend

Manual Introducción

www.hiberus.cominfo@hiberus.com