Diseño Web con Wordpress: Curso de Wordpress Avanzado

Page 1

WORDPRESS AVANZADO @merchanjavier jmerchan@mkg20.com 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. 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.


Contenidos del Módulo 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 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 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... “…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 el contenido …” 1. INTRODUCCIÓN AL DISEÑO WEB Y CMS


Porqué un CMS • Los que vamos a ver son Software libre de código abierto mejor que opciones privadas. • 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, Joomla Un 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 • Wikis: Wikia, Mediawiki Foros 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: Moodle Permiten la gestión de un sistema de formación online de manera fácil.

• Comercio electrónico: Prestashop, Opencart, Magento Son 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. 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.. 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 rango Características funcionales: Requisitos del sistema Seguridad Soporte Facilidad de uso

Rendimiento (servidores) Administración Interoperabilidad entre sistemas Flexibilidad

Modelo comercial y de negocio. 1. INTRODUCCIÓN AL DISEÑO WEB Y CMS


Principales CMS para DISEテ前 WEB PHP MYSQL APACHE


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 % + 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. • 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 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 soporte – 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 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. • 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 que sea fácilmente reconocible y memorizable. • La extensión nos proporciona información: .es .edu .com .gov .xxx ,etc… .org 1. INTRODUCCIÓN AL DISEÑO WEB Y CMS


Archivos - CORE Wordpress 3.2

1. INTRODUCCIÓN AL DISEÑO WEB Y CMS

Descargar y subir al Hosting


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é buscamos?

LAS 4 PATAS DEL DISEÑO WEB

1. INTRODUCCIÓN AL DISEÑO WEB Y CMS

Twitter/MKG20 - Javier Merchán


ASPECTOS BÁSICOS DEL DISEÑO WEB

ACCESIBILIDAD

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

Twitter/MKG20 - Javier Merchán


LAS 4 PATAS DEL DISEÑO WEB USABILIDAD

Nuestro objetivo el usuario: Aspecto relacionado con la facilidad que un usuario (nuestro usuario) podrá navegar por la web, encontrar lo que busca, descargar archivos sin dificultad, completar procesos de forma sencilla: Formularios, Carros de compra,… Uso Intuitivo de nuestra web.

1. INTRODUCCIÓN AL DISEÑO WEB Y CMS

Twitter/MKG20 - Javier Merchán


LAS 4 PATAS DEL DISEÑO WEB

INDEXABILIDAD

Nuestro objetivo: los buscadores. Generación de tráfico

1. INTRODUCCIÓN AL DISEÑO WEB Y CMS

Twitter/MKG20 - Javier Merchán


LAS 4 PATAS DEL DISEÑO WEB

SOCIABILIDAD

Nuestro objetivo: La comunidad Establecer vínculos de relación con clientes, colaboradores, profesionales, amigos, etc... 1. INTRODUCCIÓN AL DISEÑO WEB Y CMS

Twitter/MKG20 - Javier Merchán


A tener en cuenta 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 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 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


Que hace falta saber para instalar Wordpress La mayorテュa de los CMS funcionan de la siguiente manera: 竊誰ecesitamos un servidor web con capacidad de procesado PHP y un servidor de Base de Datos MYSQL. ARCHIVOS PHP

BBDD

+ 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 PC

2. WORDPRESS/LOCAL


Porque usar un servidor local: Podemos trabajar sin conexiรณn a internet. 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


Instalaciรณn en Local

Para trabajar en local se instala en nuestro PC o Portรกtil:

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

Twitter/MKG20 - Javier Merchรกn


Instalación en Local

¿Porqué Xampp? Más usado del mercado Rápido y Seguro Más versátil Enlace Xampp: http://www.apachefriends.org/es/xa mpp.html Twitter/MKG20 - Javier Merchán

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.

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/xamppmacosx.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 Windows http://sourceforge.net/projects /xampp/files/XAMPP%20Windo ws/1.7.7/xampp-win32-1.7.7VC9-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 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 6 Sencillos pasos! 1. 2. 3. 4. 5.

Preparamos nuestro entorno Xampp Descargamos los archivos WP en HTDOCS Creamos una base de datos Buscamos nuestra web en el navegador Seguimos los pasos: Unir la BBDD a los archivos.

2. WORDPRESS/LOCAL


PREPARAMOS EL ENTORNO XAMPP Activar los entornos: APACHE:: Start MySQL: Start

Una vez ya tenemos el servidor virtual en nuestro ordenador, descargamos el software de Wordpress. Los archivos se descargan de la web oficial del gestor de contenidos y se suben tal cual a nuestro espacio web.


Descarga: http://es.wordpress.org/


Ir a carpeta Htdocs que es donde ubicar los archivos

Normalmente estรก en EQUIPO/DISCO LOCAL C:/XAMPP/HTDOCS


Pegar y Descomprimir el ZIP en la carpeta RAIZ C:/XAMPP/HTDOCS/WORDPRESS


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/phpmyadmin II.- Pulsar en Base de Datos

Si el idioma sale en Alemán, cambiar aquí Twitter/MKG20 - Javier Merchán


III.- Poner un nombre descriptivo y pulsar CREAR

Nuestros datos son: Nombre de la Base de datos: “elnombrehemosescritoarriba” Usuario: ROOT Contraseña: “ninguna”


Volvemos al navegador localhost/wordpress e introducimos los datos de la BBDD de esta manera:

Twitter/MKG20 - Javier Merchรกn


ENVIAR: Se unen la BBDD con los archivos

Wp-config

+


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

Ahora se están escribiendo las tablas en la BBDD

Twitter/MKG20 - Javier Merchán


Twitter/MKG20 - Javier Merchรกn


Twitter/MKG20 - Javier Merchรกn


Acceder = localhost”nombrecarpeta”/wp-admin

Acceder en remoto = www.midominio.com/wp-admin Twitter/MKG20 - Javier Merchán


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:

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 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 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


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

Pulsando en el nombre de la web arriba a la izquierda nos lleva al

Front End Twitter/MKG20 - Javier Merchรกn


Descubriendo el Escritorio

Así es al principio nuestra web o blog Twitter/MKG20 - Javier Merchán


Descubriendo el Escritorio

Twitter/MKG20 - Javier Merchรกn


Descubriendo el Escritorio

1.- Escritorio Elementos de ayuda

Servidor de Noticias

• • • • •

Ahora mismo Publicación rápida Comentarios recientes Últimos borradores Enlaces entrantes

• Blog oficial de Wordpress • Plugins • Otras Noticias de Wordpress

Personalizable en Opciones de Pantalla

2.- Actualizar

•Versión de WP •Plugins •Temas

Para actualizar SIEMPRE debemos tener una copia de seguridad de nuestro Wordpress. Twitter/MKG20 - Javier Merchán


Descubriendo el Escritorio

Entradas, Categorías, Páginas Entradas: • Lo usamos para el contenido de actualización periódica como noticias, novedades, artículos, promociones, etc… • Entran con fuerza pero se diluyen


Descubriendo el Escritorio

Entradas Categorías: • 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


Descubriendo el Escritorio

Entradas, Categorías, Páginas Páginas: • Lo usamos para publicar contenido estático y descriptivo. • Está siempre a la vista. • Ej: Acerca de, Aviso Legal, Quienes somos, nuestros productos


Descubriendo el Escritorio

Entradas Para gestionar el contenido dinรกmico

Twitter/MKG20 - Javier Merchรกn


Descubriendo el Escritorio Entradas: Tienen un editor de contenidos muy intuitivo. Las entradas se ordenan por categorías. Podemos Añadir entradas o modificar una existente.

Twitter/MKG20 - Javier Merchán


Descubriendo el Escritorio 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 •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

Twitter/MKG20 - Javier Merchán


Descubriendo el Escritorio IMAGEN DESTACADA

Twitter/MKG20 - Javier Merchรกn


Descubriendo el Escritorio 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


Entradas y más contenido dinámico • Eventos: EVENTS MANAGER • 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


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”


Descubriendo el Escritorio Enlaces Lo subimos a nuestro blog a través de los WIDGETS

Twitter/MKG20 - Javier Merchán


Pรกginas: Organizaciรณn del contenido Estรกtico


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

•En Páginas podemos ordenarlas por autor, fecha u orden alfabético. •Podemos buscar por palabras o tags. •Podemos editar rápidamente algunas modificaciones.

Twitter/MKG20 - Javier Merchán


Descubriendo el Escritorio 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.

Twitter/MKG20 - Javier Merchán


Descubriendo el Escritorio 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 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

Twitter/MKG20 - Javier Merchán


Descubriendo el Escritorio IMAGEN DESTACADA

Twitter/MKG20 - Javier Merchรกn


Descubriendo el Escritorio

Comentarios Relaci贸n de comentarios y gesti贸n de los mismos

Twitter/MKG20 - Javier Merch谩n


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.


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


Apariencia > Menu Selecciona elementos Menu


Apariencia > Menu Ordenalos y UbĂ­calos en el tema


Usuarios • Aquí damos de alta a los administradores, Editores, Autores, Colaboradores o suscriptores


Herramientas Publicar esto: Nos permite “coger prestado” facilmente texto de otras fuentes. Funciona insertando en la barra de marcadores el enlace PUBLICA ESTO

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 > TEMAS 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 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. Twitter/MKG20 - Javier Merchán


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 Shortcodes Responsive Design


¿de qué va la web?


versรกtil


shortcodes [two_third] Your content here...[/two_third]


Usa los Shortcodes de ET en cualquier Tema


Responsive


Apariencia > TEMAS Apariencia: Administrar Temas

Twitter/MKG20 - Javier Merchรกn


Apariencia > TEMAS Apariencia: Instalar temas

Para instalar temas podemos usar el buscador de Wordpress o subir un archivo que tengamos en nuestro PC.

Twitter/MKG20 - Javier Merchรกn


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) • 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

Twitter/MKG20 - Javier Merchรกn

Elegant Themes


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 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 resetean nuestras 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 APARIENCIA> EDITOR

-Vía FTP WP-CONTENT/THEMES/


Vía Escritorio


Vía FTP


Modificación: Archivos más comunes • • • • •

Sobre todo Style.css Header.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 wpcontent/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/ 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 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


Plugins y Widgets Son aplicaciones que instalamos y que amplĂ­an las funciones de Wordpress.


Plugins y Widgets Plugins Instalados

Twitter/MKG20 - Javier Merchรกn


Plugins y Widgets Plugins

Se pueden buscar por palabras o tags Se pueden subir si lo tenemos en nuestro PC Ejemplo: Buscar SEO

Twitter/MKG20 - Javier Merchรกn


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? 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


Algunos de los mejores Plugins son: •Akismet •All in One SEO vs SEO by YOAST

•Contact Form 7 + Really Simple Captcha •Google XML Sitemaps

•Q-Translate vs WPML

•Google Map for Wordpress

•WP Super Cache

•Twitter Facebook Social Share – Sexy Bookmarks

•Nexgent Gallery

•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.


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 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 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


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


Ajustes Generales 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.

Twitter/MKG20 - Javier Merchán


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 botรณn Guardar cambios para que los nuevos ajustes surtan efecto

Twitter/MKG20 - Javier Merchรกn


Ajustes Generales

IMPORTANTE:: 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

Twitter/MKG20 - Javier Merchán


Seguridad: Recomendaciones I 1. Mantener WordPress actualizado a la última versión, única garantía de control de 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. 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. 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 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


Copias de Seguridad


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


Exportar BBDD 1.- Marcar todos 2.- 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 SEO Configura 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 web 2. 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. • 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 • 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

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 • Meta • SiteMap


Secciones del Plugin 1. 2. 3. 4. 5. 6. 7. 8.

Titles & Metas Social Sitemaps XML Enlaces permanentes o permalinks Enlaces Internos RSS Importar y Exportar Editar Archivos



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


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.


Optimiza tu web • Velocidad de Carga – WP Cache – 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 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 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

• Enlaces rotos: Broken link checker


GRACIAS

JAVIER MERCHAN MKG 2.0 | www.mkg20.es @merchanjavier


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.