Taller

¡Iníciate en el mundo de WordPress!

"Todo tiene un comienzo y WordPress te sorprenderá"

by jjpeleato.com

¡Gracias y bienvenidos!

Mi nombre es José Javier Peleato Pradel

Desarrollador SEO Web & Apps


"Si buscas resultados distintos, no hagas siempre lo mismo", Albert Einstein

Actualmente trabajo como desarrollador FullStack WordPress y colaboro en la organización de la comunidad WordPress Zaragoza

by jjpeleato.com

WordPress

WordPress, es un sistema de gestión de contenidos que ha alcanzado una gran relevancia con una cuota del 28.2% de uso a nivel mundial, 1 de cada 4 páginas web esta creada en WordPress.

Dada la importancia de ser una de las plataformas más utilizadas, a diario se convierte en objetivo de múltiples ciberataques.

Ver estadísticas W2Techs

by jjpeleato.com

Estructura base de datos

by jjpeleato.com

Estructura base de datos

Tabla Definición
wp_commentmeta Meta datos que incorporan cada comentario almacenado en wp_comments.
wp_comments Almacenamiento de comentarios.
wp_links Información relativa a los enlaces añadidos en la funcionalidad de enlaces de WordPress. Obsoleta actualmente.

by jjpeleato.com

Estructura base de datos

Tabla Definición
wp_options Almacenamiento de todos los ajustes de configuración de WordPress y plugins gestionado a través del panel de administración.
wp_postmeta Meta datos que incorporan cada posts almacenado en wp_posts.
wp_posts Almacenamiento de entradas, páginas y elementos de menú.

by jjpeleato.com

Estructura base de datos

Tabla Definición
wp_termmeta Meta datos que incorporan cada categoría/etiqueta.
wp_terms Almacenamiento de categorías, tanto de las entradas como de enlaces y las etiquetas de las entradas.
wp_term_relationships Asociación de las entradas y enlaces que hacen referencia a categorías y/o etiquetas.

by jjpeleato.com

Estructura base de datos

Tabla Definición
wp_term_taxonomy Describe la taxonomía (categoría, enlace o etiqueta) de cada línea de la tabla wp_terms.
wp_usermeta Almacenamiento de la información denominada data que cada usuario contiene.
wp_users Lista de usuarios.

by jjpeleato.com

Estructura directorios

by jjpeleato.com

Estructura directorios

La estructura de archivos y carpetas de una instalación WordPress es muy sencilla. Consta de tres carpetas principales: wp-admin, wp-content y wp-includes y el conjunto de archivos de la carpeta raíz y subdirectorios, de los cuales destacamos los ficheros wp-config.php y .htaccess situados en el directorio base.

by jjpeleato.com

wp-admin

Directorio donde se almacena los ficheros de backend del core de WordPress.

by jjpeleato.com

wp-content

Directorio donde se almacenan los contenidos específicos de nuestro proyecto.

by jjpeleato.com

plugins

Directorio donde se almacenan los plugins de terceros.

by jjpeleato.com

themes

Directorio donde se almacenan los themes que hay en nuestra aplicación. Puedes haber un número indeterminado de themes pero solo uno de ellos estará activo. Existe la metodología de trabajo basada en una estructura de theme padre y theme hijo (usando el hijo como theme activo).

by jjpeleato.com

uploads

Directorio principal donde se almacenan todos los ficheros que se suban a la aplicación. Es el único directorio que va a tener permisos de escritura.

by jjpeleato.com

wp-includes

Directorio principal core de WordPress.

by jjpeleato.com

wp-config.php

Fichero de configuración de WordPress, donde se almacenan las credenciales para conectar contra la base de datos, sistema de autentificación Uniques Keys y Salts, pefijo de las tablas de las base de datos, WordPress Debug, etc.

Recomendado tener permisos de solo escritura 444.

by jjpeleato.com

.htaccess

Fichero de configuración de servidor, que genera WordPress de forma automática con la instalación de la aplicación. Tiene como función mejorar la seguridad de WordPress. Ciertos plugins escriben en este fichero para aplicar seguridad u optimización al sitio web.

Recomendado tener permisos de solo escritura 444.

by jjpeleato.com

Instalación WordPress desde 0

by jjpeleato.com

1) Descargar última versión WordPress desde la página oficial y descomprimir ficheros en carpeta raíz.

https://wordpress.org/

https://es.wordpress.org/

by jjpeleato.com

2) Creación de BBDD a utilizar.

CREATE DATABASE dbname CHARACTER SET utf8 COLLATE utf8_general_ci;

by jjpeleato.com

3) Modificación fichero configuración. En la carpeta raíz crear una copia y renombrar el fichero wp-config-sample.php a wp-config.php. Y modificamos las siguientes líneas de código.

define('DB_NAME', 'dbname ');
define('DB_USER', 'dbuser');
define('DB_PASSWORD', 'dbpassword');
define('DB_HOST', 'localhost');
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', 'utf8_general_ci');

by jjpeleato.com

4) Modificar prefijo "wp_" en el proceso de instalación para la creación de tablas en la base de datos.

by jjpeleato.com

5) Modificación de seguridad. Visitamos la página web y sustituimos el código PHP en el fichero de configuración wp-config.php.

https://api.wordpress.org/secret-key/1.1/salt/

by jjpeleato.com

6) Para desarrolladores. Activamos el modo debug de WordPress.

define('WP_DEBUG', true);

by jjpeleato.com

7) Visitar la página web desde nuestro navegador y continuar los pasos que nos indica la interfaz para la correcta instalación. Nos solicitara una serie de información necesaria. Todos los datos pueden ser modificados a posterior desde el panel de administración o desde la base de datos. Trabajar con contraseñas robustas.

by jjpeleato.com

8) Eliminar archivo readme.html y licence.txt donde aparece la versión de WordPress.

by jjpeleato.com

9) Modificar instalación WordPress a subdirectorio con un nombre de 6 caracteres aleatorios compuesto por números, letras minúsculas y sin caracteres especiales.

by jjpeleato.com

Entramos a la sección Ajustes > Generales desde el panel de administración.

  • Dirección de WordPress (URL): Introducir dominio más nombre de carpeta separado por “/”
    http://www.example.com/a3x91l
  • Dirección del sitio (URL): Introducir dirección de la página web (nombre dominio) sin incluir el nombre de la carpeta.
    http://www.example.com

Guardamos cambios. No intentes visitar la página web, nos mostrara un mensaje de error.

by jjpeleato.com

Copiar (no cortar/mover) fichero index.php desde el directorio donde está instalado WordPress al directorio raíz de nuestra web, normalmente carpeta public_html.

by jjpeleato.com

Editar código fichero index.php

Antes: require('./wp-blog-header.php');
Después: require('./a3x91l/wp-blog-header.php');

by jjpeleato.com

10) Entramos a la sección Ajustes > Enlaces permanentes y seleccionamos Estructura personalizada agregamos la siguiente sintaxis:

/%post_id%/%postname%/

Guardamos cambios para que WordPress genere toda la nueva estructura de enlaces permanentes.

by jjpeleato.com

11) Aplicar buenas prácticas pos instalación.

  • Instalación plugin seguridad
  • Política de copias de seguridad
  • Permisos directorios y ficheros
  • Permisos wp-config.php
  • Editar .htaccess y modificar permisos
  • Bloquear Login
  • SPAM
  • ...

by jjpeleato.com

Instalación WordPress desde copia de seguridad

Para poder realizar este paso es necesario tener una copia de seguridad estable tanto del código, cómo de la base de datos en formato SQL.

by jjpeleato.com

1) Descomprimir ficheros de la copia de seguridad en la carpeta raíz.

by jjpeleato.com

2) Creación de BBDD a utilizar según el nombre que existe en el fichero de configuración.

CREATE DATABASE dbname CHARACTER SET utf8;

by jjpeleato.com

3) Ejecutar script SQL de la copia de seguridad de la BBDD o importar desde phpMyAdmin.

mysql –uroot –ppassword
use dbname;
source script.sql;

by jjpeleato.com

4) IMPORTANTE. Modificar registros URL’s de configuración en la tabla “wp_options” en la base de datos por la dirección nueva.

UPDATE 'wp_options'
SET 'option_value' = 'http://localhost/wordpress'
WHERE 'option_name' = 'siteurl';
UPDATE 'wp_options'
SET 'option_value' = 'http://localhost/wordpress'
WHERE 'option_name' = 'home';

by jjpeleato.com

5) IMPORTANTE. Existe la posibilidad de que no tengamos acceso al usuario administrador de WordPress. Procedemos a modificar el usuario desde la base de datos.

UPDATE 'wp_users'
SET 'user_login' = 'example',
    'user_email' = 'jjpeleato@example.com',
    'user_pass' = MD5('1234'),
    'user_nicename' = 'example',
    'user_status' = '0',
    'display_name' = 'example'
WHERE 'ID' = 1;

by jjpeleato.com

6) Una vez realizado todos los pasos visitamos la página WordPress y aplicamos buenas prácticas.

by jjpeleato.com

Themes WordPress

by jjpeleato.com

Free themes

https://wordpress.org/themes/

Premium themes

https://themeforest.net

http://www.elegantthemes.com

by jjpeleato.com

Como crear un tema hijo en WordPress

by jjpeleato.com

1) Crear carpeta dentro de /wp-content/themes como si otro tema fuera. Aunque es permitido nombrarla como se quiera, es recomendable por buenas prácticas darle a la carpeta un nombre identificativo según el theme padre

by jjpeleato.com

Crear hoja de estilos, fichero style.css dentro de la carpeta child themes. Una vez creado copiar la cabecera del fichero style.css del theme

by jjpeleato.com

/*
Theme Name: Child Themes
Theme URI: http://example.com
Version: 4.0
Description: Tema hijo de Themes.
Author: @jjpeleato
Author URI: https://www.jjpeleato.com
Template: directory-name-of-theme
*/
@import url("../themes/style.css");
/*------ Empezar a añadir cambios ------*/

by jjpeleato.com

  • Theme name: Introducir cualquier nombre con relación al tema padre y diferente.
  • Template: Nombre de la carpeta del tema padre. Obligatorio, copiar el nombre exacto, sin cambio alguno o no funcionará.
  • @import url('...'): Herencia de la hoja de estilos original.

by jjpeleato.com

La parte más importante de la creación de un child theme es el correcto uso de las variables “template” y “@import” de esta forma WordPress reconoce de forma automática la herencia y poder sobrescribir ficheros, funcionalidades y estilos.

by jjpeleato.com

Plugins WordPress

Plugin (complemento) es una aplicación (o programa informático) que se relaciona con otros complementos o con el núcleo para agregarle una función nueva y generalmente muy específica. Esta aplicación adicional es ejecutada por la aplicación principal e interactúan por medio de la Interfaz de Programación de Aplicaciones (API). También se conoce por los términos en inglés, plug-in o add-on.

by jjpeleato.com

Los plugins de WordPress permiten de forma sencilla la modificación, personalización y mejora del núcleo de WordPress y añadir funcionalidad a este.

Un plugin de WordPress es un programa, o un conjunto de una o varias funciones, escritas en el lenguaje de script PHP, que añaden un conjunto especifico de características o servicios que pueden integrarse en la web utilizando puntos de acceso y métodos provistos por una Interfaz de Programación de Aplicaciones (API) de WordPress.

by jjpeleato.com

Plugins de seguridad

  • Wordfence Security
  • All In One WP Security & Firewall
  • iThemes Security
  • Sucuri Security

by jjpeleato.com

Plugins útiles seguridad

  • Hide My WP
  • Rename wp-login.php
  • Limit Login Attempts
  • WP Captcha o WP reCaptcha
  • Emergency password reset

by jjpeleato.com

Plugins útiles

  • Akismet
  • WP-SpamShield Anti-Spam
  • Clone Posts
  • Contextual Related Posts
  • Simple 301 Redirects
  • Cookie Law Info

by jjpeleato.com

Plugins BBDD

  • WP Optimize
  • WordPress Import
  • WP Migrate DB
  • BackWPUP
  • Duplicator

by jjpeleato.com

Plugins de cache y optimización

  • WP Rocket
  • Hyper Cache
  • WP Super Cache
  • WP Total Cache
  • EWWW Image Optimizer

by jjpeleato.com

Plugins Google

  • Yoast SEO
  • All in One SEO Pack
  • Google Analytics by MonsterInsights

by jjpeleato.com

Plugins FORMS y EMAIL

  • Gravity Form
  • Contact Form 7
  • Contact Form DB
  • Really Simple CAPTCHA
  • Easy WP SMTP

by jjpeleato.com

Plugins Ecommerce

  • WooCommerce
  • RedSys GateWay for WooCommerce

by jjpeleato.com

Conclusión

Simplemente, GRACIAS A TOD@S

... y continuar disfrutando de WordPress!!

by jjpeleato.com