Tallerdewordpressavanzado2 160127165437 PDF

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

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..
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
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
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 Rendimiento (servidores)
Seguridad Administración
Soporte Interoperabilidad entre sistemas
Facilidad de uso Flexibilidad
Modelo comercial y de negocio.
Principales CMS para DISEÑO 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
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
Ejemplos de webs con WP
ENTORNO WEB

Que necesitamos para empezar
Hosting – Alojamiento
1 Dominio
Archivos – Core: PHP Y JS
Base de datos: MYSQL
Cliente FTP

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
.org .xxx ,etc…
Archivos - CORE
Wordpress 3.2 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
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
ASPECTOS BÁSICOS DEL DISEÑO WEB
LAS 4 PATAS DEL DISEÑO WEB
¿Qué buscamos?

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

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.

INDEXABILIDAD
Nuestro objetivo: los buscadores.

Generación de tráfico

SOCIABILIDAD
Nuestro objetivo: La comunidad

Establecer vínculos de relación con
clientes, colaboradores,
profesionales, amigos, etc...

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

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:
→Necesitamos un servidor web con capacidad de procesado PHP y un

servidor de Base de Datos MYSQL.
ARCHIVOS PHP BBDD

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
Instalación en Local
¿Porqué Xampp?
Más usado del mercado
Rápido y Seguro
Más versátil
Enlace Xampp: XAMPP para Windows o MAC

http://www.apachefriends.org/es/xa
mpp.html

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

http://sourceforge.net/projects
/xampp/files/XAMPP%20Windo
ws/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 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. Preparamos nuestro entorno Xampp
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
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!

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í

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:

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

Acceder = localhost”nombrecarpeta”/wp-admin
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:
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.

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

Pulsando en el nombre de
la web arriba a la izquierda
nos lleva al
Front End
Así es al principio
nuestra web o blog

1.- Escritorio
Elementos de • Ahora mismo

ayuda • Publicación rápida
• Comentarios recientes
• Últimos borradores Personalizable
• Enlaces entrantes
en
Opciones de
Servidor de • Blog oficial de Wordpress Pantalla
Noticias • 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.
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
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
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
Entradas
Para gestionar el contenido dinámico

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

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

IMAGEN DESTACADA

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

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

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”
Enlaces
Lo subimos a nuestro blog a través de los WIDGETS

Páginas: Organización del contenido
Estático
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.

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.

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

IMAGEN DESTACADA

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

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

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

Apariencia > TEMAS
Apariencia: Instalar temas
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)
• 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

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

Plugins y Widgets
Plugins
Se pueden buscar por palabras o tags

Se pueden subir si lo tenemos en nuestro PC
Ejemplo: Buscar SEO

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 •Contact Form 7 + Really Simple
Captcha
•All in One SEO vs SEO by
YOAST •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

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.

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

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

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 La palabra clave al principio de la frase
de corbata? (relevancia) y se repite dos veces con
manera natural
Colchones de látex: colchón de látex Plural y singular cuando se comprueba
NATURA que ambas son muy demandadas
Instalación de césped sintético o artificial Título descriptivo. El nombre de la

Onlygarden empresa no es relevante para SEO, por lo
que va al final
Maleta Spinner 4 ruedas 82cm American Título descriptivo y específico para
Tourister 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. Titles & Metas
2. Social
3. 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>
– 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

Tallerdewordpressavanzado2 160127165437 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tallerdewordpressavanzado2 160127165437 PDF

Cargado por

Copyright:

Formatos disponibles

WORDPRESS

“…programa que permite crear una estructura de soporte

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

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

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

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

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

El sito web pueda verse correctamente en

Twitter/MKG20 - Javier Merchán

Nuestro objetivo el usuario:

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

Nuestro objetivo: los buscadores.

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

Nuestro objetivo: La comunidad

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

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

→Necesitamos un servidor web con capacidad de procesado PHP y un

Twitter/MKG20 - Javier Merchán

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

Un programa que permite instalar Apache, PHP y MySQL en

WORDPRESS, JOOMLA, PRESTASHOP, MAGENTO

Enlace Xampp: XAMPP para Windows o MAC

Twitter/MKG20 - Javier Merchán

PARA EL USO EN WINDOWS

PARA EL USO EN MAC

Para instalar en Windows

• Éste es el link para Windows

Activar los entornos:

Una vez ya tenemos el servidor virtual en nuestro ordenador,

Los archivos se descargan de la web oficial del gestor de

Normalmente está en EQUIPO/DISCO LOCAL C:/XAMPP/HTDOCS

Twitter/MKG20 - Javier Merchán

Si el idioma sale en Alemán, cambiar aquí

Nuestros datos son:

Twitter/MKG20 - Javier Merchán

INSTALAR WORDPRESS y luego ACCEDER

Twitter/MKG20 - Javier Merchán

Acceder en remoto = www.midominio.com/wp-admin

Para facilitaros la tarea hemos desarrollado un manual

Twitter/MKG20 - Javier Merchán

Twitter/MKG20 - Javier Merchán

Twitter/MKG20 - Javier Merchán

Elementos de • Ahora mismo

Para actualizar SIEMPRE debemos tener una copia de seguridad

Entradas, Categorías, Páginas

• Lo usamos para el contenido de actualización

• Lo usamos para ordenar y clasificar las entradas.

Entradas, Categorías, Páginas

• Lo usamos para publicar contenido estático y

Twitter/MKG20 - Javier Merchán

Twitter/MKG20 - Javier Merchán

•Vista Visual o HTML para conocedores de código.

•Integrarla en una categoría

Twitter/MKG20 - Javier Merchán

Twitter/MKG20 - Javier Merchán

Twitter/MKG20 - Javier Merchán

• Eventos: EVENTS MANAGER

Twitter/MKG20 - Javier Merchán

“Usaremos Blank para enlaces a otras webs externas

Twitter/MKG20 - Javier Merchán

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.

Twitter/MKG20 - Javier Merchán