Taller creación de web presencial con wordpress · Taller creación de web presencial con ... •...

48
Taller creación de web presencial con wordpress Carlos Pérez Ximénez de Embún Cámara Zaragoza

Transcript of Taller creación de web presencial con wordpress · Taller creación de web presencial con ... •...

Page 1: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Taller creación de web presencial con

wordpress

Carlos Pérez Ximénez de Embún

Cámara Zaragoza

Page 2: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Indice

1. ¿Qué son wordpress.com y wordpress.org?

2. Ejemplos de web hechas con wordpress

3. Instalación de wordpress

4. Principales funcionalidades

• Tipos de contenidos y taxonomías: posts y páginas, categorías y

etiquetas.

• Editor visual

• Gestión de media

• Comentarios

5. Personalización:

• Búsqueda de temas visuales e instalación

• Cómo editar un tema visual

6. Plugins:

• Dónde buscar y cómo instarlos

• Los más usados: analítica web, seo, gestión de tipos de contenido y

posts, etc.

7. Práctica

Page 3: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

¿Qué son wordpress.com

y wordpress.org?

Page 4: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Wordpress

¿Qué es Wordpress?

• Es un gestor de contenidos (CMS)

• Enfocado inicialmente a la creación de blogs

• Tecnologías abiertas (PHP, MySQL)

• Código libre

Page 5: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Wordpress

¿Por qué su éxito?

• Fácil de usar

• Muy flexible

• Gran comunidad de desarrolladores y diseñadores

Todo ello lo ha convertido en el CMS más usado en el mundo.

Page 6: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Wordpress

Distinguir Wordpress

• www.wordpress.org web del proyecto de desarrollo del software (código)

de wordpress.

• es.wordpress.org web del proyecto en español, permite la descarga de

las distintas versiones de wordpress con la traducción y configuración al

idioma español ya realizadas.

• www.wordpress.com servicio online para que los usuarios creen su blog,

tiene versión gratuita y de pago. Frente al wordpress que nosotros podemos

instalarnos cuenta con una serie de limitaciones, y por el lado contrario con

algunas herramientas adicionales preinstaladas.

Page 7: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Wordpress

Wordpress.com Planes: https://store.wordpress.com/plans/

Page 8: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Ejemplos de web

Page 9: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Ejemplos de web

www.pacomobles.com

Page 10: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Ejemplos de web

http://eventoblog.com/

Page 11: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Ejemplos de web

www.mariarotger.com

Page 12: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Ejemplos de web

www.abogadodefundaciones.com

Page 13: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Ejemplos de web

www.camarazaragoza.com

Page 14: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Page 15: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

¿Qué necesitamos?

• Disponer de un alojamiento web con:

• acceso FTP

• Versión de PHP 5.6 o superior

• Disponer de una base de datos MySQL

• Versión de MySQL 5.5 o superior

Page 16: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Dónde encontrar alojamiento

Todos los proveedores de alojamiento cuentan con tipo de soluciones orientadas a

PYMEs.

Paquetes habituales:

• Personal/starter: sólo se puede tener un dominio+ftp+mysql configurado, recursos

limitados (suficientes para empezar)

• Profesional/Unlimited: múltiples dominios, ftps, bases de datos y cuentas de correos

electrónicos. Mayor cantidad de recursos.

• Performance/Plus: Garantiza más recursos al alojamiento que el

profesional/unlimited.

Ejemplos de proveedores:

• https://dinahosting.com

• http://www.arsys.es

• http://www.1and1.es

• https://www.ovh.es y muchos más… google

Page 17: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Descargar Wordpress en español

• Existen muchos proveedores de alojamiento que permiten preinstalar

wordpress desde sus paneles de gestión.

• Si tenemos o queremos hacerlo nosotros iremos a es.wordpress.org y

descargaremos la última versión disponible.

Page 18: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Descomprimir y subir

Una vez descargado deberemos:

1. Descomprimir la carpeta wordpress del archivo comprimido

2. Subir el contenido de la carpeta wordpress en la ruta que deseemos de

nuestro alojamiento web, normalmente la raíz de la web

(www.midominio.com) o la carpeta blog (www.midominio.com/blog/).

Page 19: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Permisos de carpeta y archivos

La mayoría de alojamientos están preparados actualmente para no tener que

configurar permisos adicionales a las carpetas y archivos para el correcto

funcionamiento de nuestro wordpress.

Pero si necesitamos modificarlos aquí podemos ver la información detallada:

http://codex.wordpress.org/Changing_File_Permissions

Wordpress y muchos de sus plugins incluyen un sistema de aviso a través del

panel de administración para advertirnos que es necesario modificar permisos

de archivo.

Page 20: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Instalando Wordpress

Una vez que hemos subido nuestro wordpress accederemos a la dirección web

en que estará nuestro blog (Ej: www.midominio.com).

Deberá salirnos el asistente de instalación de Wordpress, en caso contrario

deberemos revisar todos los pasos realizados y la configuración del dominio.

Page 21: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Paso 1

Introduciremos los datos de conexión a la base de datos mysql.

Esto creará un archivo wp-config.php que se grabará en la raíz de nuestro sitio

e incluirá la información de conexión a la base de datos, paquete de idioma y

otras variables de carácter general.

Page 22: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Paso 2

Completamos la información para

crear el usuario administrador de

nuestro panel de gestión.

Page 23: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Instalación

Paso 6

¡Ya tenemos nuestro wordpress!

Page 24: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Principales funcionalidades

Page 25: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Acceso al Panel de Administración

www.midominio.com/wp-admin/

www.midominio.com/wp-login.php

Page 26: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El panel y su funcionamiento

Page 27: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El panel y su funcionamiento

Conceptos básicos

Tipo de contenido

Entrada

Página

Taxonomía

Categorías

Etiquetas

Más Info:

• https://codex.wordpress.org/Post_Types

• https://codex.wordpress.org/Taxonomies

Page 28: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El panel y su funcionamiento

Crear / Editar una entrada

Page 29: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El panel y su funcionamiento

Crear / Editar una página

Page 30: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Personalización

Page 31: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El theme y la configuración de nuestro sitio

Paso 1: configuraciones generales de nuestro wordpress

Page 32: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El theme y la configuración de nuestro sitio

Paso 2: instalar o configurar mi tema

Apariencia > Temas

Page 33: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El theme y la configuración de nuestro sitio

Paso 2: configurar el menú de navegación

Apariencia > Menús

Page 34: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

El theme y la configuración de nuestro sitio

Paso 3: configurar las zonas de widgets

Apariencia > Widgets

Page 35: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Dónde Encontrar Themes

Gratuitos:

• https://wordpress.org/themes/ (también accesible en Apariencia>Temas)

• https://colorlib.com/wp/free-wordpress-themes/ (recopilación de themes de

wordpress.org)

De pago:

• http://themeforest.net/category/wordpress

• http://www.templatemonster.com/es/temas-wordpress-tipo/

• http://www.elegantthemes.com/gallery/

A la hora de buscar theme:

• Definir primero las necesidades (presencial, blog, gallería imágenes, etc)

• Definir estructura aproximada y temática para realizar la búsqueda

Page 36: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Page 37: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Formularios de contacto, páginas de contacto:

• Contact Form 7

• Fast Secure Contact Form

• Simple contact form

• …

Page 38: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Editor visual, videos

• TinyMCE Advanced (más opciones editor visual)

• Black Studio TinyMCE Widget (más opciones editor visual)

• Vixy YouTube Embed and Download (insertar videos y canales youtube)

• TablePress (manejar tablas)

• …

Page 39: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Google Maps:

• WP Google Maps

• Comprehensive Google Map Plugin

• …

Google Analytics:

• Google Analytics for WordPress

• Google Analyticator

• …

Page 40: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

SEO:

• All in One SEO Pack (paquete seo completo)

• WordPress SEO by Yoast (paquete seo completo)

• SEO Ultimate (paquete seo completo)

• Google XML Sitemaps (sitemap)

• Yet Another Related Posts Plugin (YARPP) (posts relacionados)

• Related Posts (posts relacionados)

• …

Page 41: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Social Media:

• Share Buttons by AddToAny (botones de compartir)

• ShareThis

• AddThis

• Pinterest "Pin It" Button (compartir imágenes en pinterest)

• WP MashSocial Wigdet (widget con todos los perfiles en redes sociales)

• Social Media Widget (widget con todos los perfiles en redes sociales)

• Floating Social Media Icon (widget con todos los perfiles en redes sociales)

• …

Page 42: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Imágenes, galerías y publicidad:

• NextGEN Gallery (galerías de imágenes)

• Lightbox Plus ColorBox (zoom imagen y galerías)

• Gallery (galerías de imágenes)

• AdRotate (publicidad)

• Smooth Slider (Slider de imágenes)

• Meta Slider (Slider de imágenes)

• …

Page 43: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Seguridad y rendimiento:

• WP Super Cache (sistema de cache)

• W3 Total Cache (sistema de cache y minificación)

• WP-DB-Backup (backup base de datos)

• UpdraftPlus Backup and Restoration (backup ha distintos servicios

externos: Dropbox, Drive, FTP, etc.)

• Better WP Security (paquete integral seguridad)

• Acunetix WP Security (paquete integral seguridad)

• All In One WP Security & Firewall (paquete integral seguridad)

• …

Page 44: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Plugins

Otros:

• bbPress (foros)

• BuddyPress (red social)

• WooCommerce (ecommerce)

• WP-PageNavi (mejora navegación posts)

• All-in-One Event Calendar (Calendario de eventos)

• The Events Calendar (Calendario de eventos)

• …

Page 45: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Proyecto ejemplo

Page 46: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Proyecto ejemplo

Tienda de cocinas.

Menú:

• Inicio (slide fotos y breves con acceso a otros apartados)

• La Empresa (video y texto sobre la empresa)

• Trabajos realizados (galería de imágenes con breve descripción)

• Ofertas (utilizaremos las entradas)

• Solicitar presupuesto (formulario con datos básicos para contactar)

• Localización y contacto (google maps, info contacto y formulario)

Pie:

• Enlace a perfiles social media

• Repetir menú

• Info de contacto

Page 47: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

Proyecto alumno

1. Define la estructura del sitio

2. Estudia como abordar tus necesidades usando:

1. Tipos de contenido y Formatos de entrada

2. Taxonomías

3. Configuraciones de Wordpress

4. Plugins o funcionalidades necesarias

3. Busca un theme acorde a tus necesidades y Proyecto

4. Parametriza wordpress

1. Configuración

2. Menús

3. Zonas de Widgets

4. …

5. Carga contenido

¡Y pregunta lo que necesites!

Page 48: Taller creación de web presencial con wordpress · Taller creación de web presencial con ... • web del proyecto de desarrollo del ... El theme y la configuración de nuestro sitio

gracias