WORDPRESS WORDPRESS AVANZADOAVANZADOAVANZADOAVANZADO
@merchanjavier
Skype: jmerchancorrea
Objetivos del curso
1.- Adquirir una visión estratégica sobre nuestra web como herramienta de venta.2.- Conocer los elementos básicos del entorno web: dominio, hosting, bbdd.bbdd.3.- Aprender a diseñar una página web atractiva y profesional, que incorpore un gestor de contenidos fácilmente editable.4.- Conocer los requisitos necesarios de instalación y seguridad para mantener el sistema estable y a salvo de ataques.5.- Adquirir conocimientos de personalización de plantillas y plugins.6.- Saber implementar la web en varios idiomas, conociendo sus ventajas e inconvenientes.7.- Aprender técnicas de posicionamiento SEO a través de plugins.
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
� Que son los gestores de contenido de código abierto.
� CMS más usados y principales diferencias entre ellos: Joomla, Wordpress y Drupal.
� El entorno web
� Dominios y Hosting
� Aspectos básicos del Diseño Web
2. WORDPRESS
Contenidos del Módulo
2. WORDPRESS
� Instalación de Wordpress en un servidor remoto (hosting)
� Instalación de Wordpress en local (banco de pruebas)
� El panel de control de Wordpress
� Uso de plantillas. Modificar la apariencia de nuestra web
� Retoque de plantillas. El tema hijo
� Plugins. Instalación y configuración de los más usuados.
� Los idiomas en tu web. WP Multilingue.
� Ajustes imprescindibles
� Trucos para optimizar tu Wordpress
3. POSICIONAMIENTO SEO
� Principios básicos del SEO
� Configura tu Wordpress para posicionarte en los primeros puestos de Google
1. INTRODUCCIÓN AL DISEÑO WEB Y CMSY CMS
CMS: CONTENT MANAGEMENT SYSTEM
GESTOR DE CONTENIDOS
GESTORES DE CONTENIDO DE CÓDIGO ABIERTO
Un CMS o Sistema de Gestión de Contenidos es según la wikipedia...
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
según la wikipedia...
“…programa que permite crear una estructura de soporte
(framework) para la creación y administración de contenidos,
principalmente en páginas web, por parte de los
administradores, editores, participantes y demás roles…”
“…controla una o varias bases de datos donde se aloja elcontenido …”
Porqué un CMS
• Los que vamos a ver son Software libre de código abierto mejor que opciones privadas.
• Facilidad de gestión.• Facilidad de gestión.
• Ahorro de costes de diseño y mantenimiento
• Cantidad de posibilidades.
• Apoyo profesional (themes, plugins,etc..)
• Soporte inigualable.
CMS MÁS USADOS Y DIFERENCIAS
• Webs y Blogs: Wordpress, Drupal, JoomlaUn Sistema de Gestión de Contenido Web es una herramienta que permite crear, editar, modificar y publicar contenidos Web, especialmente portales Web, ya estén dirigidos a una audiencia interna o externa. Suele incluir gestión de usuarios, permisos, búsquedas, entornos colaborativos, etc.
• Foros: FluxBB, Vanilla2, Simpleboard• Foros: FluxBB, Vanilla2, Simpleboard• Wikis: Wikia, MediawikiForos y Wikis facilitan la participación de diferentes usuarios y equipos de trabajo para trabajar de forma colaborativa. Permiten el acceso y la gestión de contenidos a diferentes tipos de usuarios.
• E-learning: MoodlePermiten la gestión de un sistema de formación online de manera fácil.
• Comercio electrónico: Prestashop, Opencart, MagentoSon sistemas de gestión de venta online con facilidad para actualizar productos, precios, promociones, tipos de pago, etc..
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Elección de un CMS
Elegir un CMS requiere un estudio de posibilidades
Existen cientos de soluciones disponibles con
características diferenciadas.características diferenciadas.
CMS orientados a:�La facilidad de administración
�La simplicidad de Instalación.
�Estándares implantados
�Usuarios técnicos o sin conocimientos
�Mayor Flexibilidad pero también Complejidad
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Preguntas para decidirte por un CMS
� Objetivos del portal: Informar, vender, gestionar, formar, etc..
� Complejidad de la estructura: portal sencillo, integración de multitud de aplicaciones y herramientas, etc..integración de multitud de aplicaciones y herramientas, etc..
� Usuarios del CMS: Habilidad Informática, numero de usuarios, cantidad y tipos de funciones y tareas, frecuencia de actualización, etc..
� Seguridad� Cumplimiento de estándares de usabilidad� Multilenguaje: Idiomas en los que irá el contenido
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Aspectos diferenciadores de un CMS
� Licencia: Gratuita / Premiun
� Posicionamiento en el mercado: Cuantos más mejor.
� Valoración por los expertos: Cual es el mejor en su rangorango
� Características funcionales:� Requisitos del sistema
� Seguridad
� Soporte
� Facilidad de uso
� Modelo comercial y de negocio.
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
�Rendimiento (servidores)�Administración�Interoperabilidad entre sistemas�Flexibilidad
Principales CMS para DISEÑO WEB
PHPMYSQLAPACHEAPACHE
DRUPAL
• CMS muy flexible pero a la vez más complejo.• Muy recomendado para grandes proyectos• Requiere de buenos conocimientos.
Muy bien valorado por sus usuarios 70 % +• Muy bien valorado por sus usuarios 70 % +• 65 libros impresos sobre Drupal (13 del 2011)• Permite una personalización de hasta el mínimo
detalle.• Seguro, escalable y de buen rendimiento.• Ejemplos: WHITE HOUSE y CAMPER
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
JOOMLA
• En 2011 2º CMS más descargado..• Potente CMS que permite crear sitios Web
elegantes, dinámicos e interactivos de forma simple.simple.
• Bien valorado por sus usuarios 50 % +• Proyectos WEB Medios / Grandes• Requiere especialización• Comunidad muy amplia y participativa.• Ejemplos: GUGGENHEIM y NACIONES UNIDAS
WORDPRESS
• CMS más descargado y conocido.• Orientado a Blogs en sus origenes, muy completo en la actualidad.• Instalación y administración muy simple.• Proyectos pequeños y medios sencillo• Proyectos grandes exige conocimientos y experiencia• Proyectos grandes exige conocimientos y experiencia• Mejor valorado por los usuarios 75 % +• Actualizaciones constantes, + amplia variedad de temas, plugins,
etc..• Mejor herramienta para Comunicación 2.0 (comentarios, enlaces,
compartir, etc..)• Ejemplos: ANGEL CAMACHO, FIBES, CNN ESPAÑOL
En definitiva …
¿Porqué WORDPRESS?
• WordPress es el CMS del presente y del futuro• Más utilizado para DISEÑO WEB:
– Está en desarrollo continuo y muy activo. Mejor soportesoporte
– Mayor información en Internet.– Actualizaciones constantes– Mayor numero de complementos.
• Facilidad de uso• Gran capacidad de Posicionamiento SEO• La tecnología antispam de Akismet
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Ejemplos de webs con WP
ENTORNO WEB
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Que necesitamos para empezar
�Hosting – Alojamiento
�1 Dominio�1 Dominio
�Archivos – Core: PHP Y JS
�Base de datos: MYSQL
�Cliente FTP
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Hosting/ Alojamiento web• Una web está compuesta de archivos que necesitan
un espacio.
• Un espacio en un ordenador remoto gestionado por un administrador.un administrador.
• Alojamiento compartido vs dedicado.
• La importancia de un buen alojamiento (No Gratuito): capacidad, velocidad, seguridad
• Alojar multimedia en terceros
• Un hosting puede albergar infinitas webs
Dominio• Es el identificador único de un sitio web.
Registramos un dominio para dar una dirección donde encontrar mi web: www.dominio.com
• Un dominio traduce una IP (192.0.32.10 ) para • Un dominio traduce una IP (192.0.32.10 ) para que sea fácilmente reconocible y memorizable.
• La extensión nos proporciona información:
�.es
�.com
�.org
�.edu�.gov�.xxx ,etc…
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Archivos - CORE
Wordpress 3.2 Descargar y subir al Hosting
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Base de Datos
• Web 2.0 es básicamente una Web basada en las bases de datos
�Formato Vs Contenido
�El Contenido se indexa en BBDD
�MYSQL�PHPMyAdmin
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
Cliente FTP
• File Transfer Protocol = Protocolo Transferencia de Archivos
• Lo usaremos para “gestionar”archivos
• Un cliente FTP se conecta a un servidor para subir/ descargar archivos.
• Necesitamos:o Dirección servidor
o Usuario
o Contraseña
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
ASPECTOS BÁSICOS DEL DISEÑO WEB
¿Qu
é b
usc
amo
s?LAS 4 PATAS DEL DISEÑO WEB
Twitter/MKG20 - Javier Merchán
¿Qu
é b
usc
amo
s?
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
ACCESIBILIDAD
ASPECTOS BÁSICOS DEL DISEÑO WEB
Twitter/MKG20 - Javier Merchán
El sito web pueda verse correctamente en todos los entornos y en la mayoría de los usuarios → Dispositivos Sistemas operativos y
navegadores→ Velocidades de conexión→ Resoluciones de pantalla
USABILIDAD
LAS 4 PATAS DEL DISEÑO WEB
Twitter/MKG20 - Javier Merchán
Nuestro objetivo el usuario :Aspecto relacionado con la facilidad queun usuario (nuestro usuario) podránavegar por la web, encontrar lo quebusca, descargar archivos sin dificultad,completar procesos de forma sencilla:Formularios, Carros de compra,… UsoIntuitivo de nuestra web.
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
INDEXABILIDAD
LAS 4 PATAS DEL DISEÑO WEB
Twitter/MKG20 - Javier Merchán
Nuestro objetivo: los buscadores .Generación de tráfico
INDEXABILIDAD
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
SOCIABILIDAD
LAS 4 PATAS DEL DISEÑO WEB
Twitter/MKG20 - Javier Merchán
Nuestro objetivo: La comunidadEstablecer vínculos de relación con clientes, colaboradores, profesionales, amigos, etc...
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
� Muestra claramente el objetivo de tu web: vender, informar, comprar, exportar ,franquiciar, contactar
� No hagas esperar: rápida carga� Atrae la atención y dirígela� Pon primero lo que te define
A tener en cuenta
� Pon primero lo que te define� Navegación Intuitiva Mapa Web� Diseño sencillo , elegante y que respete y trasmita tu imagen corporativa.� Lenguaje orientado al target.� Formato de texto y contraste que facilite la lectura� Comentarios: control y moderación� Seguridad: contraseñas, actualizaciones y protecciones� Optimización SEO: Robots, enlaces amigables, titulos y descripciones� Aviso Legal
1. INTRODUCCIÓN AL DISEÑO WEB Y CMS
2. WORDPRESS
EL CÓDIGO ES POESÍA
WordPress es una avanzada plataforma semántica de WordPress es una avanzada plataforma semántica de
publicación personal orientada a la estética, los
estándares web y la usabilidad. WordPress es libre y,
al mismo tiempo, gratuito .
2. WORDPRESS
La mayoría de los CMS funcionan de la siguiente manera:
→Necesitamos un servidor web con capacidad de procesado PHP y un servidor de Base de Datos MYSQL.
ARCHIVOS PHP BBDD
Que hace falta saber para instalar Wordpress
Twitter/MKG20 - Javier Merchán
+
2.1 INSTALACIÓN EN LOCAL
1. Porqué y para qué se instala en local.
2. Xampp: Convertir nuestro PC en un servidor
3. Instalar WP en nuestro PC3. Instalar WP en nuestro PC
2. WORDPRESS/LOCAL
Porque usar un servidor local:
�Podemos trabajar sin conexión a internet.
�Podemos hacer infinitas pruebas.
�Podemos hacer infinitas pruebas.
�La instalación y gestión es más rápida.
�Podemos tener una copia de nuestra web para probar actualizaciones o plugins.
�Es gratis
Para trabajar en local se instala en nuestro PC o Portátil:
Instalación en Local
Twitter/MKG20 - Javier Merchán
Un programa que permite instalar Apache, PHP y MySQL en un solo paso y de manera sencilla en sistemas Windows, Mac OS
Es capaz de interpretar paginas dinámicas
WORDPRESS, JOOMLA, PRESTASHOP, MAGENTO
2. WORDPRESS/LOCAL
¿Porqué Xampp?
�Más usado del mercado
�Rápido y Seguro
Instalación en Local
Twitter/MKG20 - Javier Merchán
�Rápido y Seguro
�Más versátil
Enlace Xampp:
http://www.apachefriends.org/es/xampp.html
XAMPP para Windows o MAC
Instalación de Xampp• En estos ordenadores están instalados.
• Se adjunta el tutorial para la instalación en casa o en tu portátil.casa o en tu portátil.
2. WORDPRESS/LOCAL
Busca Xampp en Google y pincha en este enlace
Elige tu sistema operativo
PARA EL USO EN WINDOWS
PARA EL USO EN MAC
Instalación en MAC
Instrucciones para la instalación en MAC
• http://www.apachefriends.org/en/xampp-• http://www.apachefriends.org/en/xampp-macosx.html#849
Para instalar en Windows
2. WORDPRESS/LOCAL
Instalación en Windows
• El enlace de descarga esta en la HOME. Como se ve en la imagen está al final.
• Éste es el link para Windowshttp://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.7/xampp-win32-1.7.7-VC9-installer.exe/download
2. WORDPRESS/LOCAL
El Link a utilizar es INSTALLER
Pinchamos en el Archivo descargado con un icono naranja y ejecutamos en la versión ENGLISH
Aviso para los Windows Vista
• Para los windows vista hay que deshabilitar el control de usuario. AQUÍ explica como. Para XP y Siete no hay problemas. Pulsa AceptarXP y Siete no hay problemas. Pulsa Aceptar
2. WORDPRESS/LOCAL
Comienza la Instalación
Instalar en carpeta c:/Xampp
Dejar tal como aparece. INSTALL
Aparece una pantalla en MS-DOS.Es Normal y desaparece sola
2. WORDPRESS/LOCAL
Instalación completada
Vamos a ver es.WORDPRESS.ORG
Instalar Wordpress
1. Preparamos nuestro entorno Xampp
2. Descargamos los archivos WP en HTDOCS
6 Sencillos pasos!
2. Descargamos los archivos WP en HTDOCS
3. Creamos una base de datos
4. Buscamos nuestra web en el navegador
5. Seguimos los pasos: Unir la BBDD a los archivos.
2. WORDPRESS/LOCAL
Activar los entornos:
APACHE : Start
PREPARAMOS EL ENTORNO XAMPP
: StartMySQL : Start
Los archivos se descargan de la web oficial del gestor de contenidos y se suben tal cual a nuestro espacio web.
Una vez ya tenemos el servidor virtual en nuestro ordenador, descargamos el software de Wordpress .
Descarga: http://es.wordpress.org /
Ir a carpeta Htdocs que es donde ubicar los archivos
Normalmente está en EQUIPO/DISCO LOCAL C:/XAMPP/HTDOCS
C:/XAMPP/HTDOCS/WORDPRESS
Pegar y Descomprimir el ZIP en la carpeta RAIZ
Abrir el navegador y Escribir en la URL: localhost/wordpress
Crear archivo de configuración
Crear “archivo de configuración”. Este archivo es nuestra unión
entre los archivos y la BBDD. Pulsar Vamos a ello!
Twitter/MKG20 - Javier Merchán
Es el momento de: Crear una base de datos
I.- Abrir el navegador e ir a localhost/phpmyadminII.- Pulsar en Base de Datos
Twitter/MKG20 - Javier Merchán
Si el idioma sale en Alemán, cambiar aquí
III.- Poner un nombre descriptivo y pulsar CREAR
Nuestros datos son:Nombre de la Base de datos : “elnombrehemosescritoarriba”Usuario : ROOTContraseña : “ninguna”
Volvemos al navegador localhost/wordpress e introducimos los datos de la BBDD de esta manera:
Twitter/MKG20 - Javier Merchán
+Wp-config
ENVIAR: Se unen la BBDD con los archivos
+
INSTALACIÓN COMPLETADA!!!
Escribir en algún sitio las contraseñas de entrada y el nombre de usuario si no queremos
dejar inutilizado el portal
INSTALAR WORDPRESS y luego ACCEDER
Twitter/MKG20 - Javier Merchán
Ahora se están escribiendo las tablas en la BBDD
Twitter/MKG20 - Javier Merchán
Twitter/MKG20 - Javier Merchán
Acceder = localhost”nombrecarpeta”/wp-admin
Twitter/MKG20 - Javier Merchán
Acceder en remoto = www.midominio.com/wp-admin
2.2 INSTALACIÓN EN SERVIDOR
1. Porqué y como se instala en servidor.
2. Mismo procedimiento que en local
3. Importante usar un cliente FTP:3. Importante usar un cliente FTP:
FILEZILLA
2. WORDPRESS/LOCAL
Porqué Instalar en Servidor
• Es el lugar donde se alojan los portales que se ven en Internet.
• Hace visible y accesible nuestra web a los • Hace visible y accesible nuestra web a los navegantes.
• Aporta velocidad, capacidad, seguridad y 24 H de funcionamiento.
• Servidor: APACHE (php – MySQL)
• Compartido, la solución para empezar.
Requisitos para Wordpress
�Linux
�1 Base de datos �1 Base de datos
�MySQL 5.0 o superior
�PHP 5.2.4 o superior
�Espacio web + de 500 MB
Elegir un servidor
Elegir un servidor
Elegir un servidor
Para Instalar en Servidor, haremos los mismos pasos pero en nuestro Alojamiento contratado.
Para facilitaros la tarea hemos desarrollado un manual de instalación en el servidor 1 & 1.
Twitter/MKG20 - Javier Merchán
de instalación en el servidor 1 & 1.
2.3 PANEL DE CONTROL: ESCRITORIO
ACCESO A WORDPRESS
www.midominio.com/wp-admin
2.3 PANEL DE CONTROL: ESCRITORIO
ACCESO A WORDPRESS
www.midominio.com/wp-admin
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Pulsando en el nombre dela web arriba a la izquierdanos lleva al
Front End
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Así es al principio nuestra web o blog
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
1.- Escritorio
Elementos de ayuda
• Ahora mismo• Publicación rápida• Comentarios recientes• Últimos borradores• Enlaces entrantes
Personalizable
en
Opciones de
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Servidor de Noticias
• Blog oficial de Wordpress• Plugins • Otras Noticias de Wordpress
2.- Actualizar
•Versión de WP•Plugins•Temas
Para actualizar SIEMPRE debemos tener una copia de seguridad
de nuestro Wordpress.
Opciones de Pantalla
Entradas, Categorías, Páginas
Entradas:
Descubriendo el Escritorio
• Lo usamos para el contenido de actualización periódica como noticias, novedades, artículos, promociones, etc…
• Entran con fuerza pero se diluyen
Entradas
Categorías:
Descubriendo el Escritorio
• 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
Entradas, Categorías, Páginas
Páginas:
Descubriendo el Escritorio
• Lo usamos para publicar contenido estático y descriptivo.
• Está siempre a la vista.
• Ej: Acerca de, Aviso Legal, Quienes somos, nuestros productos
EntradasPara gestionar el contenido dinámico
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Entradas: Tienen un editor de contenidos muy intuitivo. Las entradas se ordenan por categorías. Podemos Añadir entradas o modificar una existente.
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Añadir una Entrada:
•Vista Visual o HTML para conocedores de código.•Texto en negrita, cursiva, tamaño, viñetas, gramática, …•Botón para ver más opciones•Hipervinculos•Linea de leer más
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
•Linea de leer más•Comilla de Cita•Pegar desde un word u otra web.•Subir o insertar imágenes, videos u objetos.
•Integrarla en una categoría•Publicar o Guardar como borrador•Programar su publicación.•Establecer contraseña: Entrada privada
IMAGEN DESTACADA
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Dependiendo del tema instalado tendremos más o menos funcionespara las entradas. También los plugins que instalamos muestran susherramientas de trabajo en esta pantalla, que se regula en OPCIONESDE PANTALLA
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Entradas y más contenido dinámico
• Eventos: EVENTS MANAGER
• Portfolio: THEMES CON GALERIA• Portfolio: THEMES CON GALERIA
• Productos: E-COMMERCE
Categorías: Organiza tus entradas
Librería Multimedia• Es aquí donde se almacenan y se gestionan las
imágenes, pdf, videos y otros documentos subidos.
Añadir nuevo archivo Multimedia
•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
Twitter/MKG20 - Javier Merchán
•Puedes subir varios archivos a la vez
Enlaces
• Aquí damos de alta enlaces a otros blogs/webs relacionadas.
• El intercambio de enlaces es vital en el SEO
Tipos de enlaces
• _blank — nueva ventana o pestaña.
• _top — ventana o pestaña actual, sin marcos.
“Usaremos Blank para enlaces a otras webs externas
y Top para enlaces propios, ya que seguiremos
teniendo al visitante en nuestra web”
Lo subimos a nuestro blog a través de los WIDGETS
Enlaces
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Páginas: Organización del contenido Estático
Páginas: Indice, organización y edición rápida de las páginas
Descubriendo el Escritorio
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.
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.
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Páginas
Publicar� Para publicar, programar o guardar
borrador. Permite crear entradas privadas.
� Aquí también permite enviar la página a la papelera
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Atributos de página� Ubicación de la página en el menú. � Posición que irá en el menu� Tipo de página que queremos publicar.
Premium.
Imagen destacada� La imagen que se usa para presentar
la página.� En algunos temas sirve para las
miniaturas
IMAGEN DESTACADA
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Relación de comentarios y gestión de los mismos
Comentarios
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
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.
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ú.menú.•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ú.
Crear Menu
Apariencia > Menu
Selecciona elementos Menu
Apariencia > Menu
Ordenalos y Ubícalos en el tema
Apariencia > Menu
Usuarios• 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.
Por ejemplo de WP.COM a WP.ORG, de BLOGGER a WP, etc…
2.4 USO DE PLANTILLAS
TEMAS – THEMES – PLANTILLAS - TEMPLATES
Apariencia
• 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 TwentyTeny TwentyEleven
Apariencia > TEMAS
Twitter/MKG20 - Javier Merchán
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.
Plantillas Gratuitas
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
Ejemplo Plantilla Premiun
Twitter/MKG20 - Javier Merchán
Elegir una buena plantilla
• Adaptada a objetivo de la web
• Diseño versátil: Multitud de posibilidades• Diseño versátil: Multitud de posibilidades
• Shortcodes
• Responsive Design
¿de qué va la web?
versátil
[two_third] Your content here...[/two_third]
shortcodes
Usa los Shortcodes de ET en cualquier Tema
Responsive
Apariencia: Administrar Temas
Apariencia > TEMAS
Twitter/MKG20 - Javier Merchán
Apariencia: Instalar temas
Para instalar temas
Apariencia > TEMAS
Twitter/MKG20 - Javier Merchán
Para instalar temas podemos usar el buscador de Wordpress o subir un archivo que tengamos en nuestro PC.
Subir una plantilla vía Escritorio
1 2
Subir una plantilla via FTP
• Seleccionar archivos de la plantilla
• Extraer archivos innecesarios si los hubiera (tipo PSD)(tipo PSD)
• Copiar los archivos en la carpeta THEMES
• Ir a Escritorio y activar el tema
Opciones del Tema: Dependen del tema instalado. Dos ejemplos
Twenty Eleven Elegant Themes
Twitter/MKG20 - Javier Merchán
Hagamos una web con una Plantilla
Desgranando una Plantilla
Desgranando una Plantilla
• PAGE: Plantilla de página
• BLOG: Plantilla del Blog
• SINGLE: Plantilla de entrada simple• SINGLE: Plantilla de entrada simple
• SIDEBAR: Barra lateral
• GALLERY: Plantilla de porfolio imágenes
• HEADER: Cabecera
• HOME: Página de Inicio
2.5 RETOQUES DE PLANTILLAS. TEMA HIJO
Por qué crear un tema “hijo”, child theme
1. Los temas hijos vienen a complementar un tema original, el tema padre.
2. Mantienen seguros nuestros cambios. Cuando se actualiza un tema por seguridad, se reseteanse actualiza un tema por seguridad, se reseteannuestras modificaciones. El tema hijo permanece.
3. Permite personalizar un sitio sin tener que crear un tema desde cero, ya que lo que no se defina en el tema hijo, lo heredará del tema padre.
Donde se encuentran los archivos
Gestiona Archivos:
-Vía Escritorio-Vía EscritorioAPARIENCIA> EDITOR
-Vía FTPWP-CONTENT/THEMES/
Vía Escritorio
Vía FTP
Modificación: Archivos más comunes
• Sobre todo Style.css
• Header.php
• Footer.php• Footer.php
• Page.php
• Single.php
• Atención: El Functions.php crea conflictos por lo que no pueden existir dos archivos.
Crear Tema Hijo
1. Crear un directorio nuevo en la carpeta wp-content/themes (nunca dentro de la carpeta del tema padre)
2. Ponemos el nombre que queramos.
3. Creamos dentro de él un archivo style.css.
4. En el style.css, indicar cual es un tema hijo y quién es su padre. (ver prox diapo)
5. Activamos el tema hijo.
FUNDAMENTAL: Indicar que el tema es hijo de su padre: TEMPLATE
1. /*
Theme Name: Tema hijo
Theme URI: http://nuestraweb.com/Theme URI: http://nuestraweb.com/
Description: Tema hijo de NOMBRE TEMA para
WordPress
Author: TU NOMBRE
Author URI: http://mkg20.es
Template: NOMBRE TEMA PADRE
Version: 0.1.0
*/
Indica donde esta el resto
Podemos copiar todo el style.css y modificar lo que necesitemos.
Si solo queremos redefinir unos cuantos y Si solo queremos redefinir unos cuantos y heredar el resto, tenemos que hacer una llamada a la hoja de estilos del parent
theme para incluir sus estilos:
• 2. @import url('../temapadre/style.css');
Activar Tema Hijo
Ejemplo
Herramienta de apoyo
INSPECTOR DE ELEMENTOS DE CHROME
2.6 PLUGINS: INSTALACIÓN Y + USADOS
Son aplicaciones que instalamos y que amplían las funciones de Wordpress.
Plugins y Widgets
Plugins Instalados
Plugins y Widgets
Twitter/MKG20 - Javier Merchán
Plugins
Plugins y Widgets
Se pueden buscar por palabras o tags
Se pueden subir si lo tenemos en nuestro PC
Ejemplo: Buscar SEO
Twitter/MKG20 - Javier Merchán
Ejemplo: Buscar SEO
Antes de instalar un Plugin
• Tener en cuenta si se actualiza frecuentemente
• Los Plugins pueden hacer nuestro WP más • 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 Plugin1. ¿Necesito instalar este plugin?
2. ¿Puedo hacer lo que necesito sin este plugin?
3. ¿Es este plugin mejor que otros similares? ¿Cuál autor 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?
¿Cual elegirías?
Añadir nuevo
• Buscar, subir o instalar manualmente
Repositorio de Plugins
•Akismet
•All in One SEO vs SEO byYOAST
•Q-Translate vs WPML
Algunos de los mejores Plugins son:
•Contact Form 7 + Really Simple Captcha
•Google XML Sitemaps
•Google Map for Wordpress•Q-Translate vs WPML
•WP Super Cache
•Nexgent Gallery
•Google Map for Wordpress
•Twitter Facebook Social Share –Sexy Bookmarks
•Buddy Press
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 profesional.profesional.
WP Sticky
Foobar
Social Image Hover
Pop Up Ninja
Widgets� Widgets: Los usamos para mostrar en nuestra
web las funcionalidades de wordpress, del tema o de los plugins.
�Tenemos widgets preinstalados�Tenemos widgets preinstalados�Generalmente van en el sidebar o en el Footer.� Se arrastran para activarlos.
2.7 WP MULTILINGÜE: IDIOMAS
El punto débil de WP: los idiomas
• El mayor quebradero de cabeza de WordPresshan sido siempre los sitios multilingües.
• Una alternativa muy usada ha sido crear una • 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…formulario, etc…
• Traducción: Tener el texto y los metas en varios idiomas en la misma base de datos
Localización
• Codestyling Localization
• WPML: Incluye todo
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
Traducción Automática
Traducción Automática
2.8 AJUSTES IMPRESCINDIBLES
Ajustes Generales
Twitter/MKG20 - Javier Merchán
1. Los campos en esta pantalla determinan algunas configuracionesbásicas de tu sitio.
2. La mayoría de los temas muestran el título del sitio en la partesuperior de cada página, en la barra de título del navegador, ycomo nombre identificativo para los feeds. La descripción corta
Ajustes Generales
Twitter/MKG20 - Javier Merchán
como nombre identificativo para los feeds. La descripción cortatambié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 archivosdel core de WordPress en un subdirectorio(ejemplo.com/wordpress) en vez de en el directorio raíz.
4. Si deseas que los visitantes se puedan registrar en tu sitio, en vezde que el administrador del sitio deba registrarlos, marca la casillade miembros. Se otorgará un perfil predeterminado a cada nuevousuario. Da igual que se registren ellos mismos o que les registreel administrador del sitio.
Ajustes Generales
Twitter/MKG20 - Javier Merchán
5. UTC quiere decir Hora universal coordinada (CoordinatedUniversal Time)
6. Recuerda hacer clic en la parte inferior de la pantalla sobre elbotón Guardar cambios para que los nuevos ajustes surtan efecto
IMPORTANTEIMPORTANTE::
� Dar de alta un buen Título y Descripción (SEO)
Ajustes Generales
Twitter/MKG20 - Javier Merchán
� Visibilidad del sitio: Permitir que el Blog sea indexado
� Enlaces permanentes: Colocar en NOMBRE DE ENTRADA (SEO)
Siempre Guardar Cambios antes de salir
Seguridad: Recomendaciones I
1. Mantener WordPress actualizado a la última versión, única garantía de control de vulnerabilidades conocidas.vulnerabilidades conocidas.
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.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.
Seguridad: Algunos trucos
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.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.
4. ANTIVIRUS: http://wordpress.org/extend/plugins/antivirus/
2.9 TRUCOS PARA OPTIMIZAR WP
• ENLACES PERMANENTES
• COPIAS DE SEGURIDAD
• TRASLADO DE LOCAL A SERVIDOR• TRASLADO DE LOCAL A SERVIDOR
• SOPORTE: TIRA DE FOROS
Enlaces permanentes
Como hacer copias de seguridad
1. Hacer copia de los archivos
2. Hacer copias de las BBDD
• Existen Plugins que facilitan la tarea• Existen Plugins que facilitan la tarea
Copias de Seguridad
Traslado de Local a Servidor
• Trasladar carpeta con archivos via FTP o comprimido en ZIP
• Exportar BBDD de PHPMyadmin local.• 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
Exportar BBDD
1.- Marcar todos2.- Exportar
Importar BBDD
Modificar Siteurl y Home (WP_OPTIONS)
WP CONFIG
Soporte: Busca en la red
• Si tenemos problemas con nuestra web:
o
Ahora ya entendemos más características
3.SEO PARA WP
Principios básicos del SEOConfigura tu WP para posicionarte
en GOOGLE
¿Qué es el SEO?
SEM
SEO
• 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.
Como funcionan los buscadores
• Índice (o catálogo) que clasifica a partir de las palabras significativas que encuentra en las páginas web
¿Cómo sabemos en que puesto estamos?
• Free Monitor for Google
Mide tus Progresos
Añade el Código a tu WP
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
Arquitectura
• “Google no mira, Google únicamente lee”.
• ¿Qué significa esto? Que tu blog puede lucir muy bien estéticamente (ante los ojos humanos) pero esto poco interesa a Google.esto poco interesa a Google.
• Lo que Google adora es el texto y las páginas sencillas de interpretar (páginas que tengan configurado un título, descripción, alt en las imágenes, etc) puesto que le ahorran trabajo de rastreo y facilitan el trabajo.
Optimiza tu web
SNIPPETS
• Titulo del sitio y descripción
• URL (Dominio y Slug)
Obviamente acciona el rastreo y las permanlinks
Las palabras claves han muerto
Optimiza tus Snippets
• Asegurate que cada página tiene su propio <title>
• Deben ser descriptivos y concisos• Deben ser descriptivos y concisos
• Evita el Keyword Stuffing (repetición innecesaria y pedante con varias formas)
• Utiliza tu marca o tu producto
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 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
Fuente: Jose B. Moreno
Vamos a empezar por Ajustes Generales
Vamos a apoyarnos en un Plugin
• SEO by YOAST • All in One SEO
SEO by YOAST
Pongámosle las cosas fáciles a Google
•H1
•Title•Title
•Meta
•SiteMap
Secciones del Plugin
1. Titles & Metas
2. Social
3. Sitemaps XML3. Sitemaps XML
4. Enlaces permanentes o permalinks
5. Enlaces Internos
6. RSS
7. Importar y Exportar
8. Editar Archivos
Titles & Metas
• La etiqueta <title> y la etiqueta <meta name=”description”>
– General: Fuerza la reescritura de <titles>– 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
Optimiza cada página o entrada
Social
XML Sitemap
• Genera automáticamente un resumen de las páginas, entradas, categorías, autores de tu sitio y envíaselas a los principales buscadores.sitio y envíaselas a los principales buscadores.
Optimiza tu web
• Velocidad de Carga
– WP Cache
– P3- Profiler– P3- Profiler
• Analiza la velocidad que pierde Wp por los plugins
• BBDD Limpia
– WP CleanFix
Optimiza tu contenido
Google Penaliza:• Contenido de baja calidad
– Alto rebote– Baja permanencia
HTML Pobre– HTML Pobre– Crear contenido para el usuario y para Google
• Contenido duplicado• Sobrecarga publicitaria• Sobrecarga de Keywords (2012)• Que los enlaces no sean de calidad
Webmaster Tool
HTML 5HTML 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> •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
GRACIASJAVIER MERCHAN
MKG 2.0 | www.mkg20.es@merchanjavier