Buenas prácticas a la hora de trabajar con WordPress

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.

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

April 11, 2019
Tweet

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