PRODETUR
DISEÑO DE PÁGINAS WEB – parte 2 - wordpress
Mairena del aljarafe, 18 de abril de 2016
ACCESO A WORDPRESS
PRODETUR
ACCESO A WORDPRESS
PRODETUR Descubriendo el Escritorio
Descubriendo el Escritorio
Pulsando en el nombre de
la web arriba a la izquierda
nos lleva al
PRODETUR
El Escritorio
Así es al principio
nuestra web o blog
PRODETUR
• Lo usamos para el contenido de actualización
periódica como noticias, novedades, artículos,
promociones, etc…
• Entran con fuerza pero se diluyen
• 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
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
PRODETUR
Entradas: Tienen un editor de contenidos muy intuitivo. Las
entradas se ordenan por categorías. PodemosAñadir entradas o modificar una existente.
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
PRODETUR
Es aquí donde se almacenan y se gestionan las
imágenes, pdf, videos y otros documentos
subidos.
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
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.
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.
PRODETUR
Características de páginas
Publicar
• Para publicar, programar o guardar borrador. Permite crear entradas privadas. • Aquí también permite enviar
la página a la papelera
Atributos de página
• Ubicación de la página en el menú.
• 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
IMAGEN DESTACADA
PRODETUR
Relación de comentarios y gestión de los mismos
Menús: La barra de Navegación
• Los Menús Personalizados te permiten colocar las páginas y
categorías que deben aparecer en el Menú de Navegación, y
ordenar su posición en el mismo.
PRODETUR
Apariencia > Menu
•Para crear un menú personalizado dale un nombre y haz clic en
Crear menú.
•Después elige objetos como páginas, categorías o enlaces
personalizados de la columna izquierda para añadirlos a este
menú.
•Después de añadir tus objetos, arrastra y suéltalos en el orden
que desees.
•También puedes hacer clic en cada objeto para ver opciones de
configuración avanzadas.
•Cuando hayas terminado de crear tu menú personalizado,
asegúrate de hacer clic en el botón Guardar menú.
Apariencia > Menu
Crear Menu
PRODETUR
Apariencia > Menu
Apariencia > Menu
PRODETUR
Aquí damos de alta a los administradores, Editores,
Autores, Colaboradores o suscriptores
Publicar esto: Nos permite “coger prestado” facilmente texto de otras
fuentes. Funciona insertando en la barra de marcadores el enlace PUBLICA ESTO
Herramientas
Importar y Exportar: Muy útil para trasladar los contenidos
(entradas, comentarios, …) de un blog a otro.
PRODETUR
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 conPRODETUR
Subir una plantilla vía Escritorio
Plantillas Premium
• Las principales empresas que diseñan plantillas
Premium para Wordpress son las siguientes.
•
WOO Themes
•
Studio Press
•
Theme Forest
•
Elegant Themes
PRODETUR
Elegir una buena plantilla
• Adaptada a objetivo de la web
• Diseño versátil: Multitud de posibilidades
• Shortcodes
PRODETUR
¿Cuál es el
objetivo de
la web?
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í:
PRODETUR
Opciones del Tema:
Opciones del Tema:
Configuración
PRODETUR
Herramienta de apoyo
PRODETUR
Son aplicaciones que instalamos y que amplían las funciones de Wordpress.
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 a
cualquier tipo de ataque.
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?
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
PRODETUR
Vamos a configurar
plugins
• Contact Form 7
• Nexgen Gallery
Plugins Premiun Interesantes
Existen plugins fuera del repositorio por que son
de pago, pero que ofrecen un resultado muy
PRODETUR
PRODETUR
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.
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
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
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
PRODETUR
PRODETUR
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
Ajustes Generales
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
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)
Seguridad:
Recomendaciones I
1. Mantener WordPress actualizado a la última
versión, única garantía de control de
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
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 base
de datos, seguridad del fichero wp-config.php así como de
las carpetas del núcleo de WordPress y ficheros.htaccess.
PRODETUR
OPTIMIZACIÓN WP
• ENLACES PERMANENTES
• COPIAS DE SEGURIDAD
• TRASLADO DE LOCAL A SERVIDOR
• SOPORTE: TIRA DE FOROS
PRODETUR
Como hacer copias de seguridad
1. Hacer copia de los archivos
2. Hacer copias de las BBDD
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:
PRODETUR
Exportar BBDD
1.- Marcar todos
2.- Exportar
PRODETUR
PRODETUR
Soporte: Busca en la red
• Si tenemos problemas con nuestra web:
PRODETUR
¿Qué es el SEO?
SEM
• Más cara la inversión pero más económico a
medio/ largo plazo.
• Se amortiza más porque permanece en el
tiempo.
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
¿Cómo sabemos en que puesto estamos?
PRODETUR
Esquema SEO a seguir
1. Optimización de la web
2. Optimización del contenido
3. Incrementar las visitas y la interacción con el
exterior
PRODETUR
Arquitectura
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
Estilos básicos
•H1
•Title
•Meta
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
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
XML Sitemap
Genera automáticamente un resumen de las páginas, entradas,
PRODETUR
Optimiza tu web
• Velocidad de Carga
– WP Cache
–
P3- Profiler
• Analiza la velocidad que pierde Wp por los
plugins
• BBDD Limpia
PRODETUR
HTML 5
HTML 5 indexa mejor y esta mejor estructurado
Responsive design + tráfico moviles y tablets
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
PRODETUR