Buenas prácticas a la hora de trabajar con WordPress

WordPress es sin duda uno de los grandes protagonistas de internet en los últimos años. Las cifras hablan por sí solas: a día de hoy, más del 30% del total de la web está creada utilizando WordPress.

Pero también es un hecho que no siempre lo utilizamos de la mejor manera posible. El objetivo de esta jornada es hacer hincapié en las buenas prácticas a tener en cuenta a la hora de trabajar con WordPress, para que nuestras páginas web sean lo más seguras y eficientes posible.

Transcript

1. BUENAS PRÁCTICAS A LA HORA DE TRABAJAR CON WORDPRESS
2. Soy Imanol Terán Desarrollador frontend. Consultor y formador IT @itermar · imanol@itermar.io
3. Si dudas, hazlo Podcast Emprendimiento · Desarrollo web · Productividad · Marketing online https://itermar.io/podcast Apple Podcasts · Spotify · iVoox
4. Academia de Productividad Gestión de tiempo · Gestión de tareas · Productividad https://academiadeproductividad.com
5. BUENAS PRÁCTICAS A LA HORA DE TRABAJAR CON WORDPRESS 1. Introducción 2. Errores más comunes 3. Buenas prácticas 4. Q&A
6. 1. INTRODUCCIÓN ¿Por qué se necesita seguir unas buenas prácticas?
7. INTRODUCCIÓ N • WordPress se ha vuelto muy popular • Lo utiliza gente de perfiles muy diferentes • Manejo parece sencillo, pero no lo es tanto • Ecosistema brutal ◦ Muchas herramientas buenas ◦ Muchas oportunidades para “meter la pata”
8. 33,6 % Del total de páginas web, están hechas en WordPress https://w3techs.com/technologies/history_overview/content_management/all
9. 28 % Del total de tiendas online, están hechas con WooCommerce
10. COMUNIDAD • WordPress tiene una comunidad enorme ◦ Nos permite estar al día ◦ Resolución de dudas ◦ Consultar problemas que nos surjan ◦ Compartir conocimiento
11. +2.030.000 Temas en la web de soporte oficial
12. +511.000 Miembros activos en grupos de Meetups
13. 66 Países
14. 535 Ciudades
15. “ Por buenas o mejores prácticas se entiende un conjunto coherente de acciones que han rendido buen o incluso excelente servicio en un determinado contexto y que se espera que, en contextos similares, rindan similares resultados.
16. 2. ERRORES MÁS COMUNES Que todos cometemos o hemos cometido (o sufrido)
17. ERRORES MÁS COMUNES • Errores de WP ◦ Pantalla en blanco ◦ Internal server error ◦ Error de conexión a base de datos ◦ Problemas de redirección ◦ Modo de mantenimiento ◦ Errores con subida de imágenes https://codex.wordpress.org/Common_WordPress_Errors
18. ERRORES MÁS COMUNES
19. ERRORES MÁS COMUNES • Casi todo WordPress se basa en código PHP haciendo consultas a BBDD MySQL • Posibles causas de error al conectar: ◦ Credenciales de acceso incorrectas ◦ Problema con algún plugin ◦ Servidor de BBDD caído ▪ Error hosting ▪ Mucho tráfico
20. ERRORES MÁS COMUNES • Asegúrate que es el mismo error en front y back ◦ Si son distintos: reparar base de datos • Verificar conexión a BBDD en wp-config.php • Campos que tienen que coincidir con BBDD ◦ El nombre de la base de datos (DB_NAME) ◦ El nombre de usuario para iniciar sesión (DB_USER) ◦ La contraseña para iniciar sesión (DB_PASSWORD) ◦ El host de la base de datos (DB_HOST) ◦ El prefijo de la base de datos (table_prefix)
21. ERRORES MÁS COMUNES • Asegúrate que los valores coinciden con los establecidos en el panel de tu hosting • Si usuario y contraseña ok, prueba en PHPMyAdmin a ver si el problema es el prefijo de las tablas • Tan necesaria es la BBDD, como tener creado un usuario con privilegios sobre ella
22. ERRORES MÁS COMUNES • Si error persiste, desactivar plugins ◦ Todos a la vez ◦ Si error desaparece ▪ Uno a uno para detectar el error • Si sigue el error ◦ Reemplazar archivos del core de WordPress ▪ wp-admin y wp-includes • Última opción: contactar empresa de hosting
23. ERRORES MÁS COMUNES
24. ERRORES MÁS COMUNES • Aquí estamos ante un error de servidor • No tenemos mucha más información • No sabemos si es un error de nuestro servidor, o de nuestra web • Hay muchas razones por las que puede darse este error
25. ERRORES MÁS COMUNES • Fichero .htaccess corrupto ◦ Renombrar fichero ◦ Si al recargar funciona, crear nuevo ◦ Ajustes / Enlaces permanentes • Error de plugins ◦ Probar desactivándolos
26. ERRORES MÁS COMUNES • Cambiar el theme a twentyseventeen o twentynineteen (dependiendo versión WP) • Límite de memoria PHP ◦ En wp-config.php define( ‘WP_MEMORY_LIMIT’, ‘256M’ ); define( ‘WP_MAX_MEMORY_LIMIT’, ‘256M’ ); • Reemplazar archivos del core de WordPress ◦ wp-admin y wp-includes
27. ERRORES MÁS COMUNES
28. ERRORES MÁS COMUNES • Al actualizar WordPress, automáticamente añade un archivo .maintenance • Solución: ◦ Entrar por FTP ◦ Eliminar el fichero .maintenance (en el directorio raíz de la instalación)
29. ERRORES MÁS COMUNES
30. ERRORES MÁS COMUNES • Error HTTP • Error durante la carga de archivos • Normalmente aparece al subir imágenes u otros tipos de documentos a la galería multimedia
31. ERRORES MÁS COMUNES • Posibles soluciones ◦ Asegurarse de que el error no es temporal ◦ Probar otro navegador ▪ Se han reportado errores con Chrome ◦ Desactivar plugins ▪ Los de optimización de imágenes suelen causar este problema ◦ Aumentar límite de memoria
32. ERRORES MÁS COMUNES • Posibles soluciones ◦ Definir GD Library como editor de WordPress ▪ Imagick • Puede agotar memoria disponible y causar error HTTP ▪ GD Library • Se puede forzar a que sea editor predeterminado
33. ERRORES MÁS COMUNES • Posibles soluciones function hs_image_editor_default_to_gd( $editors ) { $gd_editor = 'WP_Image_Editor_GD'; $editors = array_diff( $editors, array( $gd_editor ) ); array_unshift( $editors, $gd_editor ); return $editors; } add_filter( 'wp_image_editors', 'hs_image_editor_default_to_gd' );
34. ERRORES MÁS COMUNES • Posibles soluciones ◦ Modificaciones en .htaccess ▪ SetEnv MAGICK_THREAD_LIMIT 1 ▪ <IfModule mod_security.c> SecFilterEngine Off SecFilterScanPOST Off </IfModule>
35. ERRORES MÁS COMUNES • Posibles soluciones ◦ Modificaciones en .htaccess ▪ # Exclude the file upload and WP CRON scripts from authentication <FilesMatch "(async-upload\.php|wp-cron\.php|xmlrpc\ .php)$"> Satisfy Any Order allow,deny Allow from all Deny from none </FilesMatch>
36. ERRORES MÁS COMUNES • Posibles soluciones ◦ Cambiar de theme (probar con uno de los predeterminados) ◦ Subir versión PHP ◦ Borrar caché de navegador
37. ERRORES MÁS COMUNES • Errores de usuario ◦ Editar ficheros desde el editor de WordPress ◦ No trabajar con Child Themes ◦ Tener activados plugins que no utilizamos ◦ No modificar la ruta del admin ◦ No tener todo actualizado ◦ Utilizar plugins para todo
38. 3. BUENAS PRÁCTICAS Vamos a hacer la cosas bien
39. PLANTEAMIENTO DEL PROYECTO
40. PLANTEAMIENTO DEL PROYECTO • Es importante, antes de instalar WordPress, hacer una planificación del proyecto • Lleva un tiempo, pero nos ahorrará esfuerzo y problemas en el futuro • Análisis de necesidades del proyecto y recursos con los que contamos
41. • Establecer un plan de acción ◦ Configuraciones de servidor ◦ Configuraciones de WordPress ◦ Theme que vamos a utilizar ◦ Plugins que vamos a necesitar ◦ Estructura de páginas / menús ◦ Contenido ◦ CPT, CF... PLANTEAMIENTO DEL PROYECTO
42. CONFIGURACIÓN
43. CONFIGURACIÓN • Es habitual no tocar los ajustes de WordPress • Merece la pena personalizarlos ◦ Fecha, idioma, hora… ◦ Enlaces permanentes ◦ Registro de miembros • Partir de plantillas si trabajamos en local
44. CONFIGURACIÓN • Dirección WordPress y dirección web ◦ En principio no tocar • Página principal ◦ Página estática • Enlaces permanentes ◦ Si tu intención es que el contenido de tu página o blog se posicione en Google debes elegir sin dudar la opción Nombre de la entrada.
45. THEMES
46. 11% De las vulnerabilidades son causadas por themes
47. THEMES • Cuidado con los theme que instalamos • Si es un theme gratuito, mejor del repositorio oficial • Si es de pago, los desarrolladores brindan soporte
48. THEMES • Código lo más limpio posible • Themes ligeros • Utiliza Child Themes
49. THEMES • ¿CHILD THEMES? ◦ Temas hijo, heredan todas las funciones, apariencia y propiedades de su tema padre ◦ Evitamos problemas con actualizaciones, personalizaciones...etc. ◦ Hay que tener los dos themes instalados ◦ Activamos el Child Theme
50. THEMES • ¿CHILD THEMES? ◦ Plugin ◦ Fichero style.css en Child Theme ▪ /* ... Theme Name: nombre theme Template: tema-padre ... */ • Más información: ◦ https://speakerdeck.com/itermar/wordpress-child-themes
51. THEMES • Parent theme recomendado ◦ Genesis Framework ▪ Código limpio ▪ SEO Friendly ▪ Hooks ▪ Child Themes
52. PLUGINS
53. +50.000 Plugins disponibles
54. +1.250.000.000 Descargas de plugins
55. 52% De las vulnerabilidades son causadas por plugins
56. PLUGINS • Cuidado con los plugins que instalamos • Si es un plugin gratuito, mejor del repositorio oficial • Si es de pago, los desarrolladores brindan soporte • Antes de probar, leer las notas y comentarios de otros usuarios • Incluso una vez desinstalado, puede que algún dato permanezca en nuestra BBDD
57. PLUGINS • Utiliza solo los que sean realmente necesarios • Evita duplicidad de funcionalidades • Fíjate en valoraciones y popularidad • Desarrolladores de confianza • Nunca descargar plugins piratas • Actualizaciones
58. PLUGINS • Fijarse en la información que encontramos en el repositorio ◦ Valoraciones ◦ Instalaciones activas ◦ Fecha última actualización
59. PLUGINS
60. CPT & CF
61. CPT • En los comienzos de WordPress, todo el contenido eran posts • Después vinieron las páginas • Seguían siendo un tipo de posts • A medida que crecía el ecosistema WordPress: ◦ Ecommerce ◦ Podcast ◦ Portfolio ◦ ...etc
62. CPT • Se hace necesario, en algunos casos, crear tipos de post personalizados, con características concretas ◦ CUSTOM POST TYPES • No siempre es necesario, hay que decidirlo en la planificación previa ◦ El tipo de contenido tiene que tener suficientemente diferente como para crear un tipo de post nuevo
63. CPT • Formas de crear un CPT: ◦ Plugin ◦ Plugin para crear CPTs ◦ Por código
64. CPT • Hay plugins que crean sus propios CTPs ◦ WooCommerce ◦ Seriously Simple Podcasting
65. CPT • Plugins para crear CPTs ◦ Custom Post Type UI ▪ Interfaz gráfica para crear CPTs ▪ Es cómodo crearlos ▪ No es la mejor opción • Hay que tener plugin instalado y activo, sino CPT desaparece
66. CPT • Código para crear CPTs ◦ Forma más sencilla y eficiente add_action( 'init', 'crear_un_cpt' ); function crear_un_cpt() { $args = array( 'public' => true, 'label' => 'Libros' ); register_post_type( 'libro', $args ); } • Se puede complicar cuanto queramos
67. CPT • ¡Cuidado! Los CPT no deben depender del theme ◦ Todo lo que viene con el theme, se va con el theme ◦ Lo normal es que queramos contar con nuestro CPT, independientemente del theme ◦ Cuidado con usar CPTs que vienen incluídos en los themes
68. CF • Los campos personalizados nos permiten incluir información adicional a la que viene por defecto en nuestras páginas, entradas o CPTs • Distintas formas de crearlos ◦ Campos personalizados de WordPress ▪ En WordPress 5, desaparece está opción: plugin ◦ Plugins ▪ ACF ◦ Código
69. WPO
70. WPO • Hay muchos factores que influyen en el rendimiento de nuestra web ◦ Características del servidor ◦ Theme utilizado ◦ Plugins activados ◦ Contenidos de la web
71. WPO • Características del servidor ◦ Bases de datos ◦ Últimas versiones de PHP ◦ Copias de seguridad automáticas ◦ Velocidad (discos SSD) ◦ Capacidad ◦ Transferencia de datos ◦ Soporte y asistencia
72. WPO Siteground
73. WPO • Theme utilizado ◦ Código limpio ◦ HTML semántico ◦ Siguiendo estándares ◦ Liviano
74. WPO • Plugins activados ◦ Instala y activa los plugins que sean estrictamente necesarios ◦ Muchos plugins pueden eliminarse una vez han realizado su cometido
75. WPO • Contenido ◦ Cantidad y tipología de contenido utilizado en la web, aumentan tiempos de carga ◦ Editor por defecto o plugins de editores visuales ◦ Sliders, imágenes, vídeos...etc
76. SEGURIDAD
77. 8% Sitios WordPress hackeados por contraseña débil
78. 61% Sitios WordPress hackeados están desactualizados
79. Seguridad • Proteger la página de login • No utilizar admin como nombre de usuario • Utilizar contraseñas seguras • Actualiza WordPress • Oculta versión de WordPress • Limita número de accesos por IP
80. Seguridad • Configura permisos de fichero wp-config.php • Desactiva edición de archivos desde WordPress • Cambia prefijo tablas WordPress BBDD • Crea copias de seguridad • Utiliza conexiones seguras
81. Proteger LOGIN • Url de login por defecto ◦ https://tudominio.com/wp-admin ◦ https://tudominio.com/wp-login.php • Ataques masivos a esas URLs pueden “tumbar” tu servidor • Opciones ◦ Modificar fichero .htaccess ▪ RewriteRule ^panel-admin$ http://tusitio.com/wp-admin.php [NC,L] ◦ Plugin WPS Hide Login
82. Utilizar contraseña segura • Password aleatorio, con números, letras y caracteres especiales ◦ Sugerencias del navegador ◦ Herramienta de WordPress ◦ Herramienta como 1Password
83. • Actualiza siempre a la última versión de WordPress disponible ◦ Puedes activar las actualizaciones automáticas para actualizaciones menores define( 'WP_AUTO_UPDATE_CORE', true ); • Actualiza el theme que estés utilizando • Actualiza los plugins Actualizaciones
84. Ocultar versión de WordPress • Eliminar fichero readme.txt del directorio raíz de nuestro FTP • Eliminar todas las referencias que aparecen en el código. function quitar_version_wp() { return ""; } add_filter('the_generator','quitar_version_wp');
85. Limitar números de acceso por IP • Si una misma IP intenta acceder muchas veces de forma continuada a nuestra web, probablemente se tratará de un ataque • Plugins ◦ Wordfence ◦ All in One WP Security
86. Permisos wp-config • 600 o 644 • Si somos muy permisivos, cualquiera puede hacer modificaciones → Agujero de Seguridad • Si somos muy restrictivos, podemos tener problemas incluso para instalar plugins
87. Permisos wp-config
88. Desactivar edición de archivos • Dentro de wp-config.php, introducimos el siguiente código, para evitar que se pueda utilizar el editor de código integrado en WordPress ◦ define( ‘DISALLOW_FILE_EDIT’, true);
89. Cambiar prefijo tablas BBDD • Al instalar WordPress, por defecto, todas las tablas de nuestra BBDD tienen el prefijo wp_ • Es conveniente cambiarlo ◦ Plugin ◦ Manual es un poco engorroso ▪ Cambiar prefijos en wp-config $table_prefix = 'nuevo_'; ▪ Cambiar prefijos en phpmyadmin
90. Copias de seguridad • Recomendable hacer copias de seguridad diarias • Al menos, ante alguna actualización o cambio importante • Lo más cómodo es hablar con proveedor de hosting • Sino, plugins: ◦ Duplicator ◦ VaultPress ◦ BackWPup
91. Conexión segura • Instalar certificado SSL desde nuestro hosting ◦ Opción de pago ◦ Let´s Encrypt (gratuito) • Acceder a FTP mediante protocolo seguro SFTP (SSH)
92. DESARROLLO
93. DESARROLLO • Si queremos que nuestro código incluído en WordPress (themes, plugins...etc) sea de calidad, confiable y aceptado en marketplaces, hay que seguir una serie de normas o convenciones • Comentar código correctamente ◦ Seguir un orden ◦ Establecer un índice
94. • En WordPress hay 4 lenguajes principales: ◦ PHP ◦ HTML ◦ CSS ◦ JavaScript DESARROLLO
95. • PHP ◦ Convenciones de nomenclatura ◦ Comillas simples y dobles ◦ Espacios en blanco ◦ Expresiones regulares https://make.wordpress.org/core/handbook/best-pract ices/coding-standards/php/ DESARROLLO
96. • HTML ◦ Validar código en W3C ▪ https://validator.w3.org ◦ Valores de atributos en minúsculas ◦ Valores de atributos entre comillas (simples o dobles) ◦ Facilitar lectura mediante sangrías ▪ Si hay código PHP dentro del HTML, se aplica sangría también DESARROLLO
97. • CSS ◦ Selectores de grupo, cada uno en una línea independiente ◦ Selectores de clase e IDs, en minúsculas ▪ Si compuestos, separar con guiones ◦ Aplicar orden a las propiedades ▪ Pantalla ▪ Posicionamiento ▪ Tipo de caja ▪ Colores ▪ Tipografías DESARROLLO
98. • CSS ◦ Ordenar prefijos, de más largos a más cortos ◦ Media queries al final del documento ◦ Comentar código DESARROLLO
99. • JavaScript ◦ No abrir y cerrar paréntesis en misma línea ◦ Mejor usar comillas simples que dobles ▪ A no ser que cadena contenga simples ◦ No utilizar espacios en blanco en líneas en blanco ◦ Nombrar funciones y variables utilizando camelCase DESARROLLO
100. • JavaScript ◦ Nombrar constructores usando TitleCase ◦ Utilizar {} en lugar de newArray() ◦ Utilizar [] en lugar de newObject() ◦ Indentar correctamente condicionales y bucles, para su correcta lectura ▪ Cuidado con los paréntesis DESARROLLO
101. • Comentar código “The Right Way” ◦ Comentarios en línea ◦ Bloques descriptivos ◦ Mantener el código legible ◦ Espacios y tabuladores DESARROLLO
102. PASO A PRODUCCIÓN
103. PASO A PRODUCCIÓN • A la hora de crear una web con WordPress, es muy recomendable, empezar con una instalación en local o en otro servidor/dominio ◦ MAMP ◦ Local, by Flywheel ◦ DemosWP
104. PASO A PRODUCCIÓN • El único “pero”, viene a la hora de subir esa web al servidor remoto definitivo • Pueden surgir problemas como: ◦ Conexión con base de datos ◦ Enlaces rotos ◦ Imágenes no subidas ◦ ...etc
105. PASO A PRODUCCIÓN • Requisitos para realizar la migración ◦ Dominio y hosting al que realizar la migración ◦ Preparar el servidor remoto antes de la migración
106. PASO A PRODUCCIÓN • Preparación del servidor remoto: ◦ Apuntar DNS del dominio al hosting *Solo en caso de que los tengas registrados con empresas diferentes ◦ Migrar la base de datos ▪ Cambiar la URL de la web ▪ Exportar como SQL ▪ Crear nueva BD en servidor remoto ▪ Importar datos BD exportada ▪ Cambios en wp-config.php
107. PASO A PRODUCCIÓN • Preparación del servidor remoto: ◦ Migrar los archivos de WordPress por FTP ◦ Cambio enlaces permanentes ▪ Entrar en wp-admin ▪ Usuario y contraseña (antiguos) ▪ Ajustes / Enlaces permanentes • Ajustes comunes → Nombre entrada ◦ Si servidor remoto es SSL ▪ Plugin: Really Simple SSL
108. PASO A PRODUCCIÓN • Preparación del servidor remoto: ◦ Reescribir URLs si cambiamos la estructura de los enlaces permanentes: ▪ Plugin
109. EN RESUMEN...
110. EN RESUMEN • Ideas principales: ◦ Mantén todo actualizado ◦ Ten copias de seguridad ◦ Protege BBDD y login ◦ Trabaja en local ◦ Utiliza Child Themes ◦ Cuidado con los plugins
111. EN RESUMEN • Ideas principales: ◦ Utiliza CPTs cuando sea necesario ◦ Planifica y analiza bien tus proyectos ◦ Contrata un buen servicio de hosting ◦ Comenta tu código ◦ Personaliza los ajustes de WordPress ◦ wp-config.php y .htaccess ◦ PhpMyAdmin
112. 4. Q&A ¿Alguna pregunta?
113. REFERENCIAS ◦ Presentation template by SlidesCarnival ◦ https://www.codeinwp.com/blog/wordpress-statistics/
114. ESKERRIK ASKO! @itermar · imanol@itermar.io