Taller WordPress Avanzado

Presentación
Raúl Carrión
@raulcarrion
hola@raulcarrion.com

Objetivo
Hacer páginas webs mejores y en menos tiempo

Objetivo
Hacer páginas webs mejores y en menos tiempo
AVANZADO!

WordPress
• El CMS web más utilizado
• Tecnología: HTML + CSS + Php + MySQL
• Muy sencillo de instalar y utilizar
• Gran comunidad
• Muy versátil
• Optimizado para buscadores (SEO)

Lenguaje HTML
El HTML es un lenguaje de marcado para la elaboración de
páginas webs. Es lo que los navegadores interpretan para
mostrarnos los sitios webs.
Todas las etiquetas de HTML están rodeadas por corchetes
angulares “<“ “>”

Lenguaje HTML
Es indispensable saber HTML para dedicarse al marketing digital

Normas de HTML
Toda etiqueta que se abre debe cerrarse.
<body>
</body>
Hay alguna excepción:
<br/>

Anatomía de una etiqueta
Atributos de etiquetas
<title>hola</title>
<a href=”/inicio.html”>hola</a>

Anatomía de una página web
<html>
<head>
<title>Título de la web</title>
</head>
<body>
<h1>Titulo principal</h1>
<p>Un párrafo</p>
<p>Párrafo con enlace a<a href=”http://www.google.es/”>Google</a></p>
</body>
</html>

Etiquetas de estructura
<html>
<head>
<body>

Etiquetas de metadatos
<title>
<title>Este es el título</title>
<meta>
<meta name=”description” content=”Esta es la descripción de la página”/>
<link>
<link rel=”stylesheet” href=”/archivo.css” type=”text/css” />

Etiquetas de bloque
<div>
<div>estoy en un contenedor</div>
<span>
<span>estoy en una selección</span>
<p>
<p>estoy en un párrafo</p>

Etiquetas de formato
<strong>
<strong>texto en negrita</strong>
<i>
<i>texto en cursiva</i>
<del>
<del>texto tachado</del>

Etiquetas de enlace
<a>
<a href=”destino” target=”comportamiento” title=”Ir a la sección”>enlace</a>
• href: URL completa o relativa.
• target:
• _blank: nueva ventana
• _self: en la misma ventana
• _top: en ventana a tamaño completo
• Title: información sobre la sección de destino

Etiquetas de enlace
rel=“nofollow”
<a href=”destino” rel=”nofollow” title=”Ir a la sección”>enlace</a>
• Google no sigue estos enlaces, es decir, no transfiere el PageRank ni el texto del enlace a
través de ellos.
• Usos:
• Contenido en el que no se confíe
• Enlaces de pago
• Priorización de rastreo
• https://support.google.com/webmasters/answer/96569?hl=es

Listas no ordenadas
<ul> y <li>
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>

Listas ordenadas
<ol> y <li>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>

Hojas de estilo en cascada
Lenguaje que se utiliza para describir el aspecto de las etiquetas
HTML de una web.
Podemos encontrarlo en el mismo archivo HTML o en archivos
independientes con la terminación .css

<p>texto grande</p>
CSS
Resultado
HTML

<p>texto grande</p>
CSS
Resultado
texto grande
HTML

p {color:red;}
a {font-size:14px; font-weight:bold;}
.tipogrande{font-size:28px;}
HTML
CSS
Resultado
<p>texto grande</p>

p {color:red;}
HTML
CSS
Resultado
texto grande
<p>texto grande</p>

p {color:red;}
HTML
CSS
Resultado
<p>texto <span class=”tipogrande”>grande</span></p>

p {color:red;}
HTML
CSS
Resultado
texto grande
<p>texto <span class=”tipogrande”>grande</span></p>

Desde CSS podemos referenciar a un elemento por:
• Tipo: p {color:#000; }
• <p>hola</p>
• Clase: .textogrande {color:#000; }
• <p class=“textogrande”>hola</p>
• Identificador: #titulo {color:#000; }
• <p id=“titulo”>hola</p>

PHP
Lenguaje de programación del lado del servidor. Orientado al
desarrollo web. Software libre.
• Archivos .php
• Incluyen HTML y código php
• El código php está incluido entre: <?php y ?>

PHP
Conceptos básicos de programación:
• Variables: espacios de memoria que almacenan información.
$nombreVariable
• Funciones: conjunto de líneas de código que realizan una función
concreta: get_header();
• Estructuras de control: modifican el flujo de control de la ejecución
de código en base a condiciones: if else, while, for if($a > 2)
{
Echo ‘mayor que 2’
}

Filezilla
Gestor de FTP para subir y bajar ficheros.

Filezilla
• Servidor
• Usuario
• Contraseña
Datos necesarios para
conectar a un FTP:

Sublime Text
• Editor de código rápido y sencillo.
• Ideal para trabajar rápido con php
• Es de pago, pero poco y opcional
• https://www.sublimetext.com/

Web Developer
• Extensión de Chrome para analizar páginas web
• Jerarquía Hn
• Orden de carga de página
• Desactivar tecnologías
• Y mucho más

Instalar herramientas
• Instalar Filezilla (Client) https://filezilla-project.org/
• Instalar Sublime Text: https://www.sublimetext.com/
• Instalar Web Developer: Chrome / Ventana / Extensiones
• Obtener más extensiones

Instalar herramientas
• Instalar Filezilla (Client) https://filezilla-project.org/
• Instalar Sublime Text: https://www.sublimetext.com/
• Instalar Web Developer: Chrome / Ventana / Extensiones
• Obtener más extensiones
¡A trabajar!

Hosting gratis durante 1 mes
https://sys4net.com/

CENTRO DE DATOS
902 92 92 42 - (+34) 911 01 15 39
Parque Empresarial Magalia
Calle Uruguay, Parc. 13, Nave 10
30820 - Alcantarilla, Murcia, España

Subdominios de trabajo
• Comprobar accesos:
• Web: http://worpress01.sys4net-hosting.es/
• FTP: Guardar conexión

Instalación de WordPress
• Descargar la última versión de WordPress de http://
es.wordpress.org
• Descomprimir archivo.

• Conectar con el FTP con Filezilla
• Vaciar la carpeta raíz del dominio
• Subir archivos descomprimidos

• Acceder al panel del hosting: Cpanel, Plesk, etc.
• Crear una BD MySQL y un usuario de esa BD.
• Guardar los datos: nombre bd, nombre usuario, contraseña.

• Abrimos un navegador y accedemos a la URL del sitio web

Completamos con la información de la base de datos.

Completamos la información web

Comprobamos que podemos acceder al área de administración
http://worpress01.sys4net-hosting.es/wp-admin/

Acceso a WordPress
Web: http://worpress01.sys4net-hosting.es/
Administración: http://worpress01.sys4net-hosting.es/wp-admin/
• Abrir dos pestañas del navegador:
• Pública y administración

Cambiar contraseña
• Esquina superior izquierda, clic en “Hola alumno”
• Editar mi perfil
• Cambiar contraseña
• Cambiar correo

Primeros pasos en WordPress
• Ajustes / Enlaces permanentes
• Ajustes comunes: Nombre de la entrada
• Ajustes / Medios
• Desactivar: Organizar mis archivos subidos en carpetas
basadas en mes y año

Primeros pasos en WordPress
• Activar certificado de servidor seguro
• Solicitar al hosting la activación del certificado Let’s encrypt
• Ajustes generales /
• Cambiar http por https

Copias de seguridad
IMPORTANTE: tener una copia de seguridad por lo que pueda
pasar.
• Hosting: tiene copias de seguridad.
• Nosotros también deberíamos hacer
• Manualmente: FTP y BD
• Plugin

BackWPub
Plugin para programar copias de seguridad y almacenarlas donde
queramos.
• Servidor
• Enviar por email
• FTP
• Dropbox
• Amazon S3
• …

BackWPub
• Plugins / BackWPub / Activar plugin
• BackWPub / Add new job
• Job name: Copia semanal
• Job task: BD, File y plugins
• Archive formal: zip
• Job destination: Backup to folder

BackWPub
• Pestaña: Schedule
• Start job: With WordPress cron
• Scheduler: Weekly
• Clic en Save changes

BackWPub
• Para hacer la primera copia
• BackWPub / Jobs / Copia semanal
• Run now

BackWPub
Recomendación: Guardar las copias de seguridad fuera del servidor.
En Dropbox, Drive, Local, etc.

Archivos en la raíz
Wp-config.php (wp-config-sample.php)
Datos de conexión a la BD.
.htaccess
Reescritura de URLs, redirecciones y más.

.htaccess
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
• Archivo oculto
• Se encuentra en la raíz
del FTP

.htaccess
¿Qué podemos hacer?
• Redirecciones
• Evitar el hotlinking
• Activar caché
• Activar compresión gzip
• Evitar edición del archivo .htaccess

Editar .htaccess
• Conectar con Filezilla
• Editar
• Añadir código fuera de los
comentarios
• Guardar
• Actualizar fichero
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-
f
RewriteCond %{REQUEST_FILENAME} !-
d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Redirecciones
RewriteEngine On
RewriteRule ^pagina-viejuna.html$ https://www.midominio.com/
nueva-pagina.html [R=301,L]
Importante: Añadir antes del código original del .htaccess

Redirecciones masivas
Para migraciones SEO Friendly
• Pasar Screaming Frog en el dominio antiguo
• Añadir las URLs en una columna en una hoja de cálculo de Drive
• En la columna siguiente introducir las URLs nuevas por paridad
• En la tercera columna usar esta fórmula:
=concatenate("RewriteRule ^";B2;"$ ";C2;" [R=301,L]")

Mi primera redirección
• De /hola-caracola/ a /hola-mundo/
RewriteEngine On
RewriteRule ^hola-caracola/$ http://wordpress01.sys4net-
hosting.es/hola-mundo/ [R=301,L]

Mi primera redirección
• Abrir Filezilla y conectar
• Editar archivo .htaccess
• Añadir al principio del archivo
RewriteEngine On
RewriteRule ^hola-caracola/$ http://
worpress01.sys4net-hosting.es/hola-mundo/ [R=301,L]

“Además de copiarnos nos roban ancho de banda”

Evitar el hot linking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https://(.+.)?dominio.com/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?dominiocom/ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteRule .*.(jpeg|gif|bmp|png|jpg)$ /imagen.jpe [L]

Invocar a Chuck
• Descargar esta imagen: http://
www.raulcarrion.com/downloads/chuck-norris.jpg
• Subir a nuestro proyecto por la galería de medios
• Copiar URL de la imagen
• Editar archivo .htaccess con el siguiente código

Evitar el hot linking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https://(.+.)?sys4net-hosting.es/ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?sys4net-hosting.es/ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]
RewriteRule .*.(jpeg|gif|bmp|png|jpg)$ /wp-content/uploads/chuck-
norris.jpe [L]

Probar si funciona
• Subir cualquier imagen al post de hola mundo de
nuestro proyecto.
• Buscar una imagen subida en ese post en el
proyecto de un compañero.
• Copiar el código HTML de la imagen del compañero
• Pegar en nuestro post
• Navegar en nuestro post a ver que imagen se ve

Activar caché
<FilesMatch ".(css|js|gif|jpeg|png|ico)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
</FilesMatch>

Activar compresión Gzip
<FilesMatch ".(css|js|gif|jpeg|png|ico)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
</FilesMatch>

Activar compresión Gzip
https://checkgzipcompression.com

Evitar escritura del archivo
<files .htaccess>
order allow,deny
deny from all
</files>

Carpetas
Wp-admin
Archivos del área de administración.
Wp-content
Temas, plugins, idiomas, archivos subidos
Wp-incluides
Librerías

Carpetas
Wp-admin
Wp-content
Wp-incluides
Librerías
Se toca

Carpetas
Wp-admin
Wp-content
Wp-incluides
Librerías
Se toca
No se toca

Carpetas
Wp-admin
Wp-content
Wp-incluides
Librerías
Se toca
No se toca
No se toca

Wp-content
Languages
Archivos de traducción.
Plugins
Repositorio de plugins.
Themes
Plantillas.
Uploads
Medios subidos.

Temas de WordPress
Plantillas que modifican la apariencia gráfica de la parte pública del
sitio web manteniendo los contenidos
Gratuitos
• http://www.google.es/
• http://es.wordpress.org/
De pago
• http://www.themeforest.com/
• http://www.elegantthemes.com/ (DIVI)
• https://my.studiopress.com/themes/
genesis/

Temas de WordPress
La elección del tema nos marcará en el futuro:
• Genera el código que Google interpreta.
• Factor clave en el rendimiento web.
• Nuestra rentabilidad dependerá de la flexibilidad de la plantilla y
nuestro dominio de la misma.

DIVI
https://www.elegantthemes.com/gallery/divi/
Polifacético tema con su propio constructor visual. Ideal para reutilizar
a medio y largo plazo.

DIVI
• Comunidad
• Plugins
• Rendimiento aceptable
• Precio
• Fácil de usar
• Base pobre, pocas opciones
• Plugins de pago

Ejemplos
• Blog: https://www.raulcarrion.com/
• Web de agencia: http://doers.sg/

Theme forest
https://themeforest.net/category/wordpress
Marketplace de temas de WordPress. Generalizando…
• Temas con mucho diseño y bajo rendimiento.
• Ideal para proyectos flash

Theme forest
• Variedad gráfica
• Importadores de contenido
• Precio
• Fácil de usar
• Pago por uso
• Rendimiento web

Ejemplos
• Servicios: https://www.comorecuperargastoshipoteca.com/
• Corporativo: https://www.almacenajesc.com/

Genesis
https://my.studiopress.com/themes/genesis/
Framework de WordPress muy ligero y con mucho potencial si tienes
conocimientos de programación y maquetación.
• Interesante para su reutilización masiva y proyectos donde el
rendimiento es fundamental.

Genesis
• Rendimiento
• Potencial
• Poca carga gráfica
• Conocimientos necesarios
• Curva de aprendizaje

Ejemplos
• Blog: http://chrisbrogan.com/
• Recetas: http://www.lovefromtheoven.com/

Consejo de amigo
• Especialízate en un tema: DIVI, Genesis, etc…
• Utiliza Theme Forest para proyectos rápidos con mucha carga
gráfica.

Activar DIVI
• Apariencia / Temas
• Activar DIVI

Estructura de un tema
Archivos de plantilla
Se corresponden con las secciones de la web: page.php, 404.php…
Hojas de estilos
Repositorio de plugins: style.css
Archivo de funciones
Con programación específica de la plantilla: function.php
Includes
Código que se reutiliza en la plantilla: header.php, footer.php …

Hojas de estilos
Style.css
Hoja de estilos principal.
Se utiliza para nombrar y clasificar la plantilla:
• Theme Name: Twenty Seventeen
• Theme URI: https://wordpress.org/themes/twentyseventeen/
• Author: the WordPress team
• Author URI: https://wordpress.org/
• …

Hojas de estilos
Style.css
• Description: Twenty Seventeen brings your site to life with header video and immersive featured
images. With a focus on business sites, it features multiple sections on the front page as well as
widgets.
• Version: 1.3
• License: GNU General Public License v2 or later
• License URI: http://www.gnu.org/licenses/gpl-2.0.html
• Text Domain: twentyseventeen
• Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors,
custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-
formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

Screenshot.png
• Imagen destacada del tema.
• Aparece en Apariencia / Temas
• Dimensiones recomendadas: 1200 x 900px

Personalizar nuestro tema
• Crear una nueva imagen screenshot.png y subirla por FTP
• Crear una imagen de 1200 x 900 en canva y exportarla a png
• Renombrarla a screenshot.png
• Subirla por FTP a la raíz del tema DIVI /wp-content/themes/Divi/

Personalizar nuestro tema
• Cambiar el nombre del tema y la descripción
• Descargamos el archivo style.css de la raíz del tema Divi
• Abrimos con Sublime Text y editamos:
• Theme Name: Raúl tema
• Theme URI: http://www.raulcarrion.com
• Version: 1.0.0
• Description: Mi tema creado a partir de DIV
• Author: Raúl Carrión
• Author URI: http://www.raulcarrion.com
• Tags: tema chulo

Plantillas de página
Index.php
• Plantilla principal. Es el que usa WordPress si no hay una plantilla
más específica.

header.php
• Contiene la información del encabezado. Reutilizado por las plantillas.
sidebar.php
• Contiene la información de la barra lateral. Reutilizado por las
plantillas.
footer.php
• Contiene la información del pie. Reutilizado por las plantillas.

single.php
• Plantilla para las entradas del blog.
page.php
• Plantilla para las páginas.

functions.php
• Funciones globales. Lo veremos más adelante.
404.php
• Plantilla para la página no encontrada.
comments.php
• Plantilla para los comentarios.
archive.php
• Plantilla para la organización por archivo.

Llamadas a plantillas
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php comments_template(); ?>

Ejemplo de jerarquía de plantillas
• category-slug.php
• category-ID.php
• category.php
• archive.php
• index.php

• Crear en el blog las categorías de entradas:
• Noticias
• Eventos
• Asignamos la entrada “Hola mundo” a las dos categorías.
• Navegamos a la categoría “Noticias”

• En la página de noticias ejecutamos la extensión Web Developer
• Information / View document outline

Ejercicio: Vamos a poner un h1 automático en cada página de
categorías.

• Crear una plantilla para todas las categorías:
• Duplicamos el archivo index.php y lo renombramos a
category.php
• Abrimos el archivo con Sublime Text
• Antes del bucle de entradas añadimos:
• <h1><?php single_cat_title();?></h1>
• Subimos nuestro archivo category.php al servidor

• En este archivo podemos guardar funciones propias que
reutilizamos en varios proyectos.
• El core de WordPress tiene un functions.php con las funciones
básicas.
• Cada tema viene con su propio archivo functions.php con
funciones específicas.
Functions.php

WordPress está traducido utilizando el framework GNU gettext.
https://www.gnu.org/software/gettext/
Los desarrolladores utilizan herramientas que escanean los
archivos PHP y generan un archivo .POT, el cual contiene una lista
de todos los textos originales que necesitan ser traducidos.
<?php _e( $text, $domain ) ?>
Traducciones

.PO
Archivo con texto original más una traducción.
Son editables
.MO
Archivos con la misma información pero compilada. Son los que lee
WordPress.
Traducciones

Los podemos encontrar:
• Wp-content/themes/tema/languages o /lang/
• Wp-content/languages/themes/
• Se editan con la herramienta Poedit
Traducciones

• Descargar e instalar Poedit: https://poedit.net/
Traducciones

• Descargar por FTP el archivo /wp-content/themes/divi/lang/
es_ES.po
• Abrimos el archivo
• Buscamos “Enviar comentario” y cambiamos la traducción por
“Enviar comentario AHORA”.
• Archivo / Guardar
• Archivo / Compilar en MO / Guardar
• Subimos al FTP los nuevos archivos .po y .mo
Traducciones

Estrategia para modificar un tema sin perder la opción de
actualizar. Se utiliza un tema “padre” que no se modifica y un tema
“hijo” que hereda del padre y donde se realizan los cambios.
Temas hijo

Temas hijo
• Pérdida de rendimiento
• Necesitas más conocimiento y tiempo
• Posibilidad de actualizar “casi”
automáticamente.

• Crear una carpeta en wp-content/themes/ con el nombre de la
plantilla hija. (Divi-child)
• Crear en la raíz el fichero style.css
Temas hijo

• /*
• Theme Name: DIVI child
• Theme URI: http://www.raulcarrion.com/divi-child/
• Version: 1.0
• Description: El tema hijo de Divi
• Author: Raúl Carrión
• Author URI: http://www.raulcarrion.com
• Template: Divi
• */
Temas hijo

• La carpeta del nuevo tema.
• Apariencia / Temas
• Activamos el tema
Temas hijo

• Creamos el archivo functions.php y copiamos el código siguiente:
Temas hijo
• <?php
• function rc_enqueue_tema_hijo_css() {
• wp_enqueue_style( 'tema-padre-css',
get_template_directory_uri() . '/style.css' );
• }
• add_action( 'wp_enqueue_scripts',
'rc_enqueue_tema_hijo_css' );
• ?>

• Vamos a modificar la cabecera del tema hijo.
• Copiamos el archivo header.php del tema padre al tema hijo.
• Abrimos el archivo header.php del tema hijo con Sublime text
• Añadimos:
• <meta content="raulcarrion.com" name="author" />
Temas hijo

• Subimos header.php al servidor.
• Comprobamos que se muestra la meta.
Temas hijo

• Vamos a pintar todos los títulos de nivel 4 de la barra lateral de
color rojo.
• Editamos el archivo style.css del tema hijo y añadimos:
Temas hijo
• #sidebar h4{
• color:#CC0000;
• }
• Guardamos y subimos el fichero

Plugins
Funcionalidades encapsuladas.
• Incompatibilidades entre plugins
• Pérdida de rendimiento
• Gran cantidad de funcionalidades
disponibles
• Mayoritariamente gratuitos
• Fácil de instalar y usar

Plugins recomendados
WordPress SEO by Yoast
• Funcionalidades para mejorar el SEO
• https://es.wordpress.org/plugins/wordpress-seo/

Contact Form 7
• Generador de formularios de contacto
• https://es.wordpress.org/plugins/contact-form-7/

Flamingo
• Guarda los contactos de Contact Form 7 en una BD
• https://es.wordpress.org/plugins/flamingo/

Simple Share Buttons Adder
• Añade los botones de compartir en redes sociales
• https://es.wordpress.org/plugins/simple-share-buttons-adder/

Monarch
• Compartir en redes sociales con contador
• De pago, viene con DIVI
• https://www.elegantthemes.com/plugins/monarch/

Cookie notice
• Para cumplir con la ley de cookies
• https://es.wordpress.org/plugins/cookie-notice/

Duplicate Post
• Clona contenidos
• https://es.wordpress.org/plugins/duplicate-post/

Black Studio TinyMCE Widget
• Editor de contenido para widgets
• https://es.wordpress.org/plugins/black-studio-tinymce-widget/

Call now Button
• Botón para llamar al teléfono en dispositivos móviles
• https://es.wordpress.org/plugins/call-now-button/

Google Maps WD
• Inserta mapas personalizados de Google Maps
• https://es.wordpress.org/plugins/wd-google-maps/

WP Maintenance Mode
• Crea una página de mantenimiento para ocultar la web en
desarrollo
• https://wordpress.org/plugins/wp-maintenance-mode/

W3 Total Caché
• Caché de archivos y BD. Muy completo y gratuito.
• https://es.wordpress.org/plugins/w3-total-cache/

Autoptimize
• Minimiza HTML, CSS y JS
• https://es.wordpress.org/plugins/autoptimize/

Custom Post Type UI
• Crea tipos de datos personalizados.
• https://es.wordpress.org/plugins/custom-post-type-ui/

Advanced Custom Fields
• Crea campos personalizados.
• https://wordpress.org/plugins-wp/advanced-custom-fields/

Migrate db Pro
• Replica BD e imágenes de preproducción a produción y viceversa.
• Tiene en cuenta el cambio de dominio.
• https://deliciousbrains.com/wp-migrate-db-pro/

BackWPup – WordPress Backup Plugin
• Hace backups programados de archivos y base de datos
• https://es.wordpress.org/plugins/backwpup/

Crayon Syntax Highlighter
• Formatea ejemplos de código en las entradas
• https://es.wordpress.org/plugins/crayon-syntax-highlighter/

EWWW Image Optimizer
WP smush
• Optimiza las imágenes para que ocupen menos espacio
• https://es.wordpress.org/plugins/ewww-image-optimizer/

Google Analytics para WordPress por MonsterInsights
• Código de seguimiento de Google Analytics y seguimiento de
eventos.
• https://es.wordpress.org/plugins/ewww-image-optimizer/

Wordfence Security
• Evita ataques por fuerza bruta bloqueando IPs
• https://es.wordpress.org/plugins/wordfence/

Mailchimp for WP
• Integra Mailchimp con WordPress
• https://es.wordpress.org/plugins/mailchimp-for-wp/

La inyección de código o inyección SQL es un método de
infiltración de código intruso que se vale de una vulnerabilidad
informática presente en una aplicación en el nivel de validación de
las entradas para realizar operaciones sobre una base de datos.
Inyección de código

$us=$_POST['usuario'];
$pass=$_POST['pass'];
$sql="SELECT * FROM usuarios
WHERE user = '$us' AND
password='$pass'";

$us=$_POST['usuario'];
$pass=$_POST['pass'];
$sql="SELECT * FROM usuarios
WHERE user = '$us' AND
password='$pass'";
OR 1=1”;

• Al crear un nuevo WordPress cambiar wp_
• Si ya lo has creado, renombrar:
• Hacer copia de seguridad de la BD
• Modificar $table_prefix en wp-config.php
• Cambiar los nombres de las tablas: RENAME table `wp_posts` TO
`lolailo_posts`;
• Modificar los valores de la tabla wp_options: SELECT * FROM
`lolailo_options` WHERE `option_name` LIKE '%wp_%’
• Modificar los valores de la tabla wp_usermeta: SELECT * FROM
`lolailo_usermeta` WHERE `meta_key` LIKE '%wp_%'
Cambiar el prefijo de tablas

• Hacer copias de seguridad frecuentemente
• Actualizar WordPress, temas y plugins
• Evitar escritura del archivo .htaccess
• Utilizar Search console
Consejos

• Escaneo de archivos modificados
• Bloqueo de IPs
• Bloqueo de países
• Control de intentos en el login
• Etc…
• Y te envía un email si pasa algo
Wordfence security

Rendimiento
En WordPress el rendimiento por defecto es…. Malo

Herramientas
Pingdom
• Mide:
• Tamaño
• Peticiones
• Tiempo de descarga
• https://tools.pingdom.com/

Herramientas
Vikinguard
• Monitoriza y te ayuda a optimizar.
• Te avisa al móvil si algo no va bien.
• https://www.vikinguard.com/

Optimización de imágenes
• Instalar el plugin EWWW Image Optimizer
• Ajustes / ewww image optimizer / optimización en masa

Caché
• Reutilización de los datos solicitados con más frecuencia
• Vamos a activar W3 Total Caché
• Performance / General settings
• Activamos la caché, pero no la minificación.

Minimizar JS y CSS
• Activar plugin Autoptimize.
• Ajustes / Autoptimize
• Optimizar HTML
• Optimizar JavaScript
• Optimizar CSS
• Clic en “Guardar cambios y vaciar caché”

Versión de php
• Actualizar el motor de php a la versión 7.
• Si desde el panel del hosting no se puede solicitar a la empresa
• Programación más rápida.

Mínimos plugins
• Desactivar todos los plugins que no se están utilizando.
• Utilizar alternativas cuando sea viable

Mensaje de cookies sin plugin
• Desactivar el plugin de cookies
• Añadir el siguiente código dentro del head de la web
• Apariencia / Editor / header.php
• FTP descargar header.php, editar, volver a subir

Mensaje de cookies sin plugin
<script type="text/javascript">
window.cookieconsent_options = {
"message":"¡Hola! Mi sitio web utiliza cookies para ser legal y no meterme en
problemas",
"dismiss":"¡Acepto!",
"learnMore":"Más info",
"link":"https://www.raulcarrion.com/cookies/",
"theme":"light-bottom"};
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/
cookieconsent2/1.0.10/cookieconsent.min.js"></script>

Servicio de hosting de calidad
• Podemos hacer mucho pero si el servicio de hosting es deficiente
la web no tendrá un rendimiento adecuado.
• No escatimar en este servicio.
• Probar varias empresas y medir resultados. Migración gratuita
sin compromiso.
• No contratar el paquete más básico. Optar por VPS aunque sea
compartido.

CDN para imágenes
• Los servidores atienden las peticiones a archivos referenciados
desde una web de 6 en 6. Esto retrasa la carga de la página.
• Solución: Distribuir nuestras imágenes entre varios servidores, o
una red de servidores (Content Delivery Network).
• Opciones:
• Subdominios propios enlazados al dominio principal.
• Servidores externos.

Subdominios propios enlazados al dominio
principal
• Requiere conocimientos mínimos de hosting
• Utiliza los mismos recursos del servidor
• Gratis
• Se configura fácilmente con W3 total caché
• Mejora el rendimiento

principal
• Crear un subdominio en el hosting: cdn1.dominio.com
• Crear 3 subdominios que apunten al subdominio principal:
• cdn2.dominio.com ->cdn1.dominio.com

principal
• Performance / General settings / CDN /
• CDN type: Self hosted FTP
• Performance / CDN:
• Añadimos los datos del FTP
• La ruta donde se tienen que almacenar los datos
• El subdominio del CDN

principal
• Subir todos los archivos al nuevo CDN

principal
• Subir todos los archivos al nuevo CDN
IMPORTANTE: Si la web tiene certificado seguro,
el CDN también debe tenerlo.

principal

Servidores externos
• De pago
• Mejora mucho el rendimiento
• Sirve las imágenes de varias ubicaciones

• Crear cuenta en Mailchimp
• Instalar plugin Mailchimp for WP
• Mailchimp / Profile / Extras / API key
• Clic en “Create a key”
• Copiamos la Api Key
• WordPress / Mailchimp for WP /
• Pegamos la API key
• Clic en el botón “Guardar cambios”
Suscriptores

• Mailchimp for WP / Formularios
• Título del formulario: Suscríbete a mi blog
• Elegimos una lista de suscriptores
• Clic en Guardar
Suscriptores

• Mailchimp for WP / Formularios
• Título del formulario: Suscríbete a mi blog
• Elegimos una lista de suscriptores
• Clic en Guardar
• Clic en el botón “Obtener el shortcode” y lo copiamos
• Apariencia / Widgets
• Añadimos un bloque de texto en un widget y pegamos el
shortcode
Suscriptores

• Mailchimp / Formularios / Aspecto: Tema oscuro.
• Probar a suscribirnos.
Suscriptores

• Por defecto WordPress suele ser bastante correcto en SEO.
• Cuestiones a comprobar:
• Jerarquía Hn
• Calidad de contenidos
• Enlaces rotos
SEO para WordPress

• Cada página debe tener un único h1
• Este texto debe ser diferente al title de la página
• No debe haber saltos en la jerarquía
• Las palabras contenidas en los títulos hn deben ser relevantes
Jerarquía Hn

• Analizar la jerarquía Hn de los principales modelos de página:
• Inicio
• Categoría
• Entrada
• Utilizando la extensión “Web developer”
Jerarquía Hn

Jerarquía Hn
Home
• Crear una nueva página llamada inicio.
• Ajustes / Lectura / marcarla como pagina de inicio.
• Editar la página
• Activar Divi
• Insertar un módulo de texto y añadir un titular de nivel 1
• Insertar un módulo de blog

Jerarquía Hn
Categoría
• Vamos a cambiar los h4 de los títulos del sidebar por “p”.
• Buscamos en el código de Divi donde se generan los titulares
• /includes/functions/sidebars.php

Jerarquía Hn
Categoría
• Podemos cambiarlo a las bravas y apuntarlo para la próxima
actualización o añadirlo a nuestro archivo functions.php.

Jerarquía Hn
Categoría
• Copiamos la función a nuestro archivo functions.php y
cambiamos h4 por p.
• En el archivo original añadimos:
if( !function_exists( 'et_widgets_init' ))
{
}
• Para evitar que se declare la función si ya lo hemos hecho antes.

Jerarquía Hn
Entrada
• Copiamos el archivo commens.php del tema Divi al tema hijo.
• Buscamos el h1 y lo cambiamos por un p

• Avanzado / Enlaces permanentes / Quitar “category” de las URLs
de categorías.
• Search console: conectar.
Configuración Yoast

• Utilizaremos Yoast SEO: Activar plugin.
• Filosofía: Cada palabra clave objetivo debe tener una página
optimizada para ella.
Calidad de contenidos

• Introducimos la palabra clave y el plugin nos recomendará
mejoras.
• Redactar un title distinto del h1
• Redactar una meta description marketiniana.
Calidad de contenidos

• Cada cierto tiempo pasar la herramienta Screaming frog en
búsqueda de enlaces rotos.
• https://www.screamingfrog.co.uk/seo-spider/
Enlaces rotos

Raúl Carrión
@raulcarrion
hola@raulcarrion.com

Taller WordPress Avanzado

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Taller WordPress Avanzado

Similaire à Taller WordPress Avanzado (20)

Dernier

Dernier (7)

Taller WordPress Avanzado