diseÑo de pÁginas web parte 2 - wordpress - prodetur.es

PRODETUR

DISEÑO DE PÁGINAS WEB – parte 2 - wordpress

Mairena del aljarafe, 18 de abril de 2016

formacion@prodetur.es Telf.: 954 486 800

PRODETUR

ACCESO A WORDPRESS

www.midominio.com/wp-admin

PRODETUR

PANEL DE CONTROL: ESCRITORIO

PRODETUR

ACCESO A WORDPRESS

www.midominio.com/wp-admin

PRODETUR

Descubriendo el Escritorio

Twitter/MKG20 - Javier Merchán

PRODETUR

Descubriendo el Escritorio

Pulsando en el nombre dela web arriba a la izquierdanos lleva al

Front End

PRODETUR

El Escritorio

Así es al principio nuestra web o blog

PRODETUR

Visión del Escritorio

Twitter/MKG20 - Javier Merchán

PRODETUR

• Lo usamos para el contenido de actualización periódica como noticias, novedades, artículos, promociones, etc…

• Entran con fuerza pero se diluyen

Entradas

PRODETUR

• Lo usamos para ordenar y clasificar las entradas.

• Pueden dividirse según diferentes criterios que elije el autor: tema, localización, segmento, etc…

• Ej: Futbol,Baloncesto, Motor,

• Ej: Web, SMM, LOPD

Categoría

PRODETUR

• Lo usamos para publicar contenido estático y descriptivo.

• Se trata de páginas HTML reales• Se puede publicar prácticamente cualquier

contenido

• Está siempre a la vista.

• Ej: Acerca de, Aviso Legal, Quienes somos, nuestros productos

Páginas

PRODETUR

Twitter/MKG20 - Javier Merchán

Gestión de Entradas

PRODETUR

Entradas: Tienen un editor de contenidos muy intuitivo. Las

entradas se ordenan por categorías. PodemosAñadir entradas o

modificar una existente.

Edición de entradas

PRODETUR

Dependiendo del tema instalado tendremos más o menos funciones

para las entradas. También los plugins que instalamos muestran sus

herramientas de trabajo en esta pantalla, que se regula en OPCIONES

DE PANTALLA

Twitter/MKG20 - Javier Merchán

Tipos de Entrada

PRODETUR

Categorías

PRODETUR

Es aquí donde se almacenan y se gestionan las

imágenes, pdf, videos y otros documentos

subidos.

Librería Multimedia

PRODETUR

•Podemos subir archivos desde aquí o desde la entrada o página donde irá publicado. Arrastra el archivo y suelta.•Puedes subir varios archivos a la vez

Agregar multimedia

PRODETUR

Organización páginas

PRODETUR

Páginas: Indice, organización y edición rápida de las páginas

Organización de páginas

Twitter/MKG20 - Javier Merchán

•En Páginas podemos ordenarlas por autor, fecha u orden alfabético.

•Podemos buscar por palabras o tags.

•Podemos editar rápidamente algunas modificaciones.

PRODETUR

Páginas: La edición es igual a la de una entrada. Se le puede asignar una plantilla predeterminada, que según el TEMA tendrá más variedad.

Edición de páginas

PRODETUR

Características de páginas

Publicar• Para publicar, programar o

guardar borrador. Permite crear entradas privadas.

• Aquí también permite enviarla página a la papelera

Atributos de página

• Ubicación de la página en elmenú.

• Posición que irá en el menu

Imagen destacada• La imagen que se usa para

presentar la página.• En algunos temas sirve

para las miniaturas

PRODETUR

IMAGEN DESTACADA

Descubriendo el Escritorio

PRODETUR

Relación de comentarios y gestión de los mismos

Comentarios

PRODETUR

Menús: La barra de Navegación

• Los Menús Personalizados te permiten colocar las páginas ycategorías que deben aparecer en el Menú de Navegación, yordenar su posición en el mismo.

PRODETUR

Apariencia > Menu

•Para crear un menú personalizado dale un nombre y haz clic enCrear menú.•Después elige objetos como páginas, categorías o enlacespersonalizados de la columna izquierda para añadirlos a estemenú.•Después de añadir tus objetos, arrastra y suéltalos en el ordenque desees.•También puedes hacer clic en cada objeto para ver opciones deconfiguración avanzadas.•Cuando hayas terminado de crear tu menú personalizado,asegúrate de hacer clic en el botón Guardar menú.

PRODETUR

Apariencia > Menu

Crear Menu

PRODETUR

Apariencia > Menu

Selecciona elementos Menu

PRODETUR

Apariencia > Menu

Ordenalos y Ubícalos en el tema

PRODETUR

Aquí damos de alta a los administradores, Editores,

Autores, Colaboradores o suscriptores

Usuarios

PRODETUR

Publicar esto: Nos permite “coger prestado” facilmente texto de otras

fuentes. Funciona insertando en la barra de marcadores el enlace

PUBLICAESTO

Herramientas

Importar y Exportar: Muy útil para trasladar los contenidos

(entradas, comentarios, …) de un blog a otro.

Por ejemplo de WP.COM a WP.ORG, de BLOGGER a WP, etc…

PRODETUR

USO DE PLANTILLAS

PRODETUR

TEMAS – THEMES – PLANTILLAS - TEMPLATES

PRODETUR

Apariencia > TEMAS

• El diseño que tendrá nuestra web lo define el TEMA que tengamos instalado.

• El tema por defecto que nos viene en Wordpress es el TwentyTen y TwentyEleven

• Existen miles de temas diferentes y cada tema tiene sus propias opciones de personalización.

• Los temas gratuitos dan muy poco juego y NO dan un aspecto profesional.

• Los temas Premium nos proporcionan una web bonita y con muchas posibilidades por poco dinero.

PRODETUR

Plantillas Gratuitas

PRODETUR

Subir una plantilla vía Escritorio

1 2

PRODETUR

Plantillas Premium

• Las principales empresas que diseñan plantillas Premium para Wordpress son las siguientes.

• WOO Themes• Studio Press• Theme Forest• Elegant Themes• Natty WP

PRODETUR

Ejemplo Plantilla Premiun

PRODETUR

Elegir una buena plantilla

• Adaptada a objetivo de la web

• Diseño versátil: Multitud de posibilidades

• Shortcodes

• Responsive Design

PRODETUR

¿Cuál es el objetivo de la web?

PRODETUR

versátil

PRODETUR

shortcodes

• Los shortcodes de 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é” (< >). Vamos, algo así:

[youtube id=“xxxxxxxxx" ancho="600" alto="450"]

PRODETUR

Responsive

PRODETUR

Opciones del Tema: Dependen del tema instalado

PRODETUR

Opciones del Tema: Configuración

PRODETUR

Herramienta de apoyo

INSPECTOR DE ELEMENTOS DE CHROME

PRODETUR

PLUGINS: INSTALACIÓN Y + USADOS

PRODETUR

Son aplicaciones que instalamos y que amplían las funciones de

Wordpress.

Plugins y Widgets

PRODETUR

Búsqueda de plugins y widgets

Se pueden buscar por palabras o tags

Se pueden subir si lo tenemos en nuestro PC

Ejemplo: SEO

PRODETUR

Antes de instalar un Plugin

• Tener en cuenta si se actualiza frecuentemente

• Los Plugins pueden hacer nuestro WP más lento o crear errores de funcionamiento.

• Pueden abrir agujeros de seguridad en la web,haciendo nuestro sitio vulnerable y expuesto acualquier tipo de ataque.

PRODETUR

Pregúntate antes de instalar un Plugin

1. ¿Necesito instalar este plugin?

2. ¿Puedo hacer lo que necesito sin este plugin?

3. ¿Es este plugin mejor que otros similares? ¿Cuál autor cuenta con mejor reputación?

4. ¿Cuál de los plugins lleva el mejor registro de actualizaciones?

5. ¿Cuál de los plugins ha sido instalado más veces?

PRODETUR

Repositorio de Plugins

PRODETUR

Los Mejores Plugins

• Akismet

• All in One SEO vs SEO

by YOAST

• WPML

• WP Super Cache

• Nexgent Gallery

• WooCommerce

• Contact Form 7 + Really

Simple Captcha

• Google XML Sitemaps

• Google Map for Wordpress

• Twitter Facebook Social

Share – Sexy Bookmarks

• Buddy Press

PRODETUR

Vamos a configurarplugins

• Contact Form 7

• Nexgen Gallery

PRODETUR

Plugins Premiun Interesantes

Existen plugins fuera del repositorio por que son de pago, pero que ofrecen un resultado muy profesional.

PRODETUR

WP Sticky

PRODETUR

Foobar

PRODETUR

Social Image Hover

PRODETUR

Pop Up Ninja

PRODETUR

Widgets

Widgets: Los usamos para mostrar en nuestra web las funcionalidades de wordpress, del tema o de los plugins.• Tenemos widgets preinstalados• Generalmente van en el sidebar

o en el Footer.• Se arrastran para activarlos.

PRODETUR

WP MULTILINGÜE: IDIOMAS

PRODETUR

El punto débil de WP: los idiomas

• El mayor quebradero de cabeza de WordPress han sido siempre los sitios multilingües.

• Una alternativa muy usada ha sido crear una instalación independiente para cada idioma

• Esta opción tiene la desventaja del doble trabajo y el doble mantenimiento

PRODETUR

Localización y traducción

• Localización es la traducción de los archivos de código: traducir un plugin, una plantilla, un formulario, etc…

• Traducción: Tener el texto y los metas en varios idiomas en la misma base de datos

PRODETUR

Localización

• Codestyling Localization

• WPML: Incluye todo

PRODETUR

Traducción personalizada

• Qtranslate:– Gratis– El mejor para webs sencillas o blogs.– Ensucia el código y hay que usar etiquetas

• WPML:– El más completo y mejor plugin de idioma hasta el momento.– Más complejo– Mejor para SEO– Más limpio– De pago

PRODETUR

Traducción Automática

PRODETUR

Traducción Automática

PRODETUR

AJUSTES EN WP

PRODETUR

Ajustes Generales

Twitter/MKG20 - Javier Merchán

PRODETUR

Ajustes Generales

Twitter/MKG20 - Javier Merchán

1. Los campos en esta pantalla determinan algunas configuraciones

básicas de tu sitio.

2. La mayoría de los temas muestran el título del sitio en la parte

superior de cada página, en la barra de título del navegador, y

como nombre identificativo para los feeds. La descripción corta

también se muestra en muchos temas.

3. La URL de WordPress y la URL del sitio pueden ser las mismas

(ejemplo.com) o diferentes; por ejemplo, puedes tener los archivos

del core de WordPress en un subdirectorio

(ejemplo.com/wordpress) en vez de en el directorio raíz.

PRODETUR

Ajustes Generales

Twitter/MKG20 - Javier Merchán

4. Si deseas que los visitantes se puedan registrar en tu sitio, en vez

de que el administrador del sitio deba registrarlos, marca la casilla

de miembros. Se otorgará un perfil predeterminado a cada nuevo

usuario. Da igual que se registren ellos mismos o que les registre

el administrador del sitio.

5. UTC quiere decir Hora universal coordinada (Coordinated

Universal Time)

6. Recuerda hacer clic en la parte inferior de la pantalla sobre el

botón Guardar cambios para que los nuevos ajustes surtanefecto

PRODETUR

Ajustes Generales

Twitter/MKG20 - Javier Merchán

IMPORTANTE:

Dar de alta un buen Título y Descripción (SEO)

Visibilidad del sitio: Permitir que el Blog sea indexado

Enlaces permanentes: Colocar en NOMBRE DE ENTRADA(SEO)

Siempre Guardar Cambios antes de salir

PRODETUR

Seguridad: Recomendaciones I

1. Mantener WordPress actualizado a la última versión, única garantía de control de vulnerabilidades conocidas.

PRODETUR

Seguridad: Recomendaciones II

2. Instalar solamente plugins seguros, a ser posible desde el repositorio oficial.

3. Instalar solamente temas seguros, a ser posible desde el repositorio oficial.

4. Revisar la sección de seguridad de Ayuda WordPress para comprobar que has realizado todas las acciones de seguridad necesarias.

5. Suscribirte al feed de Ayuda WordPress para estar informado de las alertas de seguridad.

PRODETUR

Seguridad: Algunos consejos

1. Cambiar el prefijo de la BBDD

2. Bulletproof security Este plugin ofrece un entorno de seguridad muy completo, protegiendo tu WordPress de inyecciones de código y ataques a SQL.

3. Realiza comprobaciones de seguridad del prefijo de la basede datos, seguridad del fichero wp-config.php así como delas carpetas del núcleo de WordPress y ficheros.htaccess.

4. ANTIVIRUS: http://wordpress.org/extend/plugins/antivirus/

PRODETUR

OPTIMIZACIÓN WP

• ENLACES PERMANENTES

• COPIAS DE SEGURIDAD

• TRASLADO DE LOCAL A SERVIDOR

• SOPORTE: TIRA DE FOROS

PRODETUR

Enlaces permanentes

PRODETUR

Como hacer copias de seguridad

1. Hacer copia de los archivos

2. Hacer copias de las BBDD

• Existen Plugins que facilitan la tarea

PRODETUR

Traslado de Local a Servidor

• Trasladar carpeta con archivos via FTP o comprimido en ZIP

• Exportar BBDD de PHPMyadmin local.

• Crear nueva BBDD en servidor e Importar BBDD.

• Modificar archivo WP-CONFIG

• Modificar entrada BBDD WP_OPTIONS:

– SITE URL y HOME

• Revisar links metidos a mano

PRODETUR

Exportar BBDD

1.- Marcar todos2.- Exportar

PRODETUR

Importar BBDD

PRODETUR

Modificar Siteurl y Home (WP_OPTIONS)

PRODETUR

WP CONFIG

PRODETUR

Soporte: Busca en la red

• Si tenemos problemas con nuestra web:

o

PRODETUR

3.SEO PARA WP

PRODETUR

¿Qué es el SEO?

SEM

SEO

PRODETUR

• Más cara la inversión pero más económico a medio/ largo plazo.

• Se amortiza más porque permanece en el tiempo.

• Es más fiable para los navegantes.

PRODETUR

Como funcionan los buscadores

• Índice (o catálogo) que clasifica a partir de las palabras significativas que encuentra en las páginas web

PRODETUR

PRODETUR

¿Cómo sabemos en que puesto estamos?

Whatsmyserp

PRODETUR

Mide tus Progresos

PRODETUR

Añade Google Analytics a WP

PRODETUR

Esquema SEO a seguir

1. Optimización de la web2. Optimización del contenido

3. Incrementar las visitas y la interacción con el exterior

4. Conseguir enlaces

PRODETUR

Arquitectura

PRODETUR

Optimiza tus Metas

• Asegurate que cada página tiene su propio<title>

• Deben ser descriptivos y concisos

• Evita el Keyword Stuffing (repetición innecesaria y pedante con varias formas)

• Utiliza tu marca o tu producto

PRODETUR

Snippets

BUENOS TÍTULOS EXPLICACION

Nudo de corbata: ¿cómo hacer un nudo de corbata?

La palabra clave al principio de la frase (relevancia) y se repite dos veces con manera natural

Colchones de látex: colchón de látex NATURA

Plural y singular cuando se comprueba que ambas son muy demandadas

Instalación de césped sintético o artificial Onlygarden

Título descriptivo. El nombre de la empresa no es relevante para SEO, por lo que va al final

Maleta Spinner 4 ruedas 82cm American Tourister

Título descriptivo y específico para ecommerce

PRODETUR

SEO by YOAST

PRODETUR

PRODETUR

Estilos básicos

•H1

•Title

•Meta

•SiteMap

PRODETUR

Secciones del Plugin

1. Titles & Metas

2. Social

3. Sitemaps XML

4. Enlaces permanentes o permalinks

5. Enlaces Internos

6. RSS

7. Importar y Exportar

8. Editar Archivos

PRODETUR

PRODETUR

Titles & Metas

• La etiqueta <title> y la etiqueta <meta name=”description”>

– General: Fuerza la reescritura de <titles>

– Portada: Títulos Generales. :

– Tipo de Entradas:Plantilla de Pg, Post, MM, ..

– Taxonomías: Plantilla de Categorías, Etiquetas, ..

– Otro: Autor, archivo

PRODETUR

Optimiza cada página o entrada

PRODETUR

Social

PRODETUR

XML SitemapGenera automáticamente un resumen de las páginas, entradas, categorías, autores de tu sitio y envíaselas a los principales buscadores.

PRODETUR

Optimiza tu web

• Velocidad de Carga

– WP Cache

– P3- Profiler

• Analiza la velocidad que pierde Wp por los plugins

• BBDD Limpia

– WP CleanFix

PRODETUR

Webmaster Tool

PRODETUR

HTML 5HTML 5 indexa mejor y esta mejor estructurado

Responsive design + tráfico moviles y tablets

PRODETUR

Link Building

“Dime quien te enlaza y te diré quien eres”

•Cómo debe ser un enlace <a href=“url” title=“kw”>kw</a>

•Dónde conseguir enlaces– Inclusión en directorios (gratis y de nicho)

– Altas en foros y blogs

– Notas de prensa

– Redes sociales

– Intercambio de enlaces

• Enlaces rotos: Broken link checker

PRODETUR

PARA CUALQUIER CUESTIÓN RELACIONADA CON ESTA SESIÓN PUEDES DIRIGIRTE A:

formacion@prodetur.es954486800 (Dpto. formación)

www.prodetur.es