taller creación de web presencial con wordpress · taller creación de web presencial con ... •...
TRANSCRIPT
![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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/1.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/2.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/3.jpg)
¿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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/8.jpg)
Ejemplos de web
![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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/28.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/29.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/30.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/31.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/32.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/33.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/34.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/35.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/36.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/37.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/38.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/39.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/40.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/41.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/42.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/43.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/44.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/45.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/46.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/47.jpg)
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](https://reader030.vdocuments.co/reader030/viewer/2022020215/5bb3200309d3f25d0f8d7c8e/html5/thumbnails/48.jpg)
gracias