Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Taller WordPress Avanzado

303 views

Published on

Formación sobre WordPress para mejorar tu web en seguridad, rendimiento, conversión y personalización. Explicado paso a paso para que pierdas el miedo a la programación.

Published in: Software
  • Be the first to comment

Taller WordPress Avanzado

  1. 1. WordPress
  2. 2. WordPress Avanzado
  3. 3. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  4. 4. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  5. 5. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  6. 6. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  7. 7. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  8. 8. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  9. 9. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  10. 10. Presentación Raúl Carrión @raulcarrion hola@raulcarrion.com
  11. 11. Objetivo Hacer páginas webs mejores y en menos tiempo
  12. 12. Objetivo Hacer páginas webs mejores y en menos tiempo AVANZADO!
  13. 13. Objetivo Hacer páginas webs mejores y en menos tiempo AVANZADO!
  14. 14. 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)
  15. 15. Tecnología básica
  16. 16. Tecnología básica
  17. 17. HTML
  18. 18. 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 “<“ “>”
  19. 19. Lenguaje HTML Es indispensable saber HTML para dedicarse al marketing digital
  20. 20. Lenguaje HTML Es indispensable saber HTML para dedicarse al marketing digital
  21. 21. Normas de HTML Toda etiqueta que se abre debe cerrarse. <body> </body> Hay alguna excepción: <br/>
  22. 22. Normas de HTML Toda etiqueta que se abre debe cerrarse. <body> </body> Hay alguna excepción: <br/>
  23. 23. Anatomía de una etiqueta Atributos de etiquetas <title>hola</title> <a href=”/inicio.html”>hola</a>
  24. 24. 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>
  25. 25. Etiquetas de estructura <html> <head> <body>
  26. 26. 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” />
  27. 27. 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>
  28. 28. Etiquetas de formato <strong> <strong>texto en negrita</strong> <i> <i>texto en cursiva</i> <del> <del>texto tachado</del>
  29. 29. 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
  30. 30. 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
  31. 31. Listas no ordenadas <ul> y <li> <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul>
  32. 32. Listas ordenadas <ol> y <li> <ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>
  33. 33. CSS
  34. 34. 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
  35. 35. Hojas de estilo en cascada <p>texto grande</p> CSS Resultado HTML
  36. 36. Hojas de estilo en cascada <p>texto grande</p> CSS Resultado texto grande HTML
  37. 37. Hojas de estilo en cascada p {color:red;} a {font-size:14px; font-weight:bold;} .tipogrande{font-size:28px;} HTML CSS Resultado <p>texto grande</p>
  38. 38. Hojas de estilo en cascada p {color:red;} a {font-size:14px; font-weight:bold;} .tipogrande{font-size:28px;} HTML CSS Resultado texto grande <p>texto grande</p>
  39. 39. Hojas de estilo en cascada p {color:red;} a {font-size:14px; font-weight:bold;} .tipogrande{font-size:28px;} HTML CSS Resultado <p>texto <span class=”tipogrande”>grande</span></p>
  40. 40. Hojas de estilo en cascada p {color:red;} a {font-size:14px; font-weight:bold;} .tipogrande{font-size:28px;} HTML CSS Resultado texto grande <p>texto <span class=”tipogrande”>grande</span></p>
  41. 41. Hojas de estilo en cascada 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>
  42. 42. PHP
  43. 43. 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 ?>
  44. 44. 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’ }
  45. 45. PHP
  46. 46. Fin de la teoría técnica
  47. 47. Fin de la teoría técnica
  48. 48. Herramientas
  49. 49. Filezilla Gestor de FTP para subir y bajar ficheros.
  50. 50. Filezilla • Servidor • Usuario • Contraseña Datos necesarios para conectar a un FTP:
  51. 51. Filezilla
  52. 52. Filezilla
  53. 53. 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/
  54. 54. 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
  55. 55. 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
  56. 56. 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!
  57. 57. Hosting gratis durante 1 mes https://sys4net.com/
  58. 58. 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
  59. 59. @sys4net
  60. 60. Subdominios de trabajo • Comprobar accesos: • Web: http://worpress01.sys4net-hosting.es/ • FTP: Guardar conexión
  61. 61. Instalación de WordPress
  62. 62. Instalación de WordPress • Descargar la última versión de WordPress de http:// es.wordpress.org • Descomprimir archivo.
  63. 63. Instalación de WordPress • Conectar con el FTP con Filezilla • Vaciar la carpeta raíz del dominio • Subir archivos descomprimidos
  64. 64. Instalación de WordPress • 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.
  65. 65. Instalación de WordPress • Abrimos un navegador y accedemos a la URL del sitio web
  66. 66. Instalación de WordPress Completamos con la información de la base de datos.
  67. 67. Instalación de WordPress Completamos la información web
  68. 68. Instalación de WordPress Completamos la información web
  69. 69. Instalación de WordPress Comprobamos que podemos acceder al área de administración http://worpress01.sys4net-hosting.es/wp-admin/
  70. 70. 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
  71. 71. Cambiar contraseña • Esquina superior izquierda, clic en “Hola alumno” • Editar mi perfil • Cambiar contraseña • Cambiar correo
  72. 72. Cambiar contraseña • Esquina superior izquierda, clic en “Hola alumno” • Editar mi perfil • Cambiar contraseña • Cambiar correo
  73. 73. Primeros pasos en WordPress
  74. 74. 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
  75. 75. 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
  76. 76. Estructura de WordPress
  77. 77. Estructura de WordPress
  78. 78. Estructura de WordPress
  79. 79. Estructura de WordPress
  80. 80. 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
  81. 81. BackWPub Plugin para programar copias de seguridad y almacenarlas donde queramos. • Servidor • Enviar por email • FTP • Dropbox • Amazon S3 • …
  82. 82. 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
  83. 83. BackWPub • Pestaña: Schedule • Start job: With WordPress cron • Scheduler: Weekly • Clic en Save changes
  84. 84. BackWPub • Para hacer la primera copia • BackWPub / Jobs / Copia semanal • Run now
  85. 85. BackWPub Recomendación: Guardar las copias de seguridad fuera del servidor. En Dropbox, Drive, Local, etc.
  86. 86. BackWPub Recomendación: Guardar las copias de seguridad fuera del servidor. En Dropbox, Drive, Local, etc.
  87. 87. 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.
  88. 88. Wp-config.php
  89. 89. .htaccess
  90. 90. .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
  91. 91. .htaccess ¿Qué podemos hacer? • Redirecciones • Evitar el hotlinking • Activar caché • Activar compresión gzip • Evitar edición del archivo .htaccess
  92. 92. 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
  93. 93. 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
  94. 94. 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]")
  95. 95. Ejemplo
  96. 96. 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]
  97. 97. 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]
  98. 98. Mi primera redirección
  99. 99. Hot linking
  100. 100. “Además de copiarnos nos roban ancho de banda”
  101. 101. 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]
  102. 102. 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
  103. 103. 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]
  104. 104. 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]
  105. 105. 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
  106. 106. Activar caché <FilesMatch ".(css|js|gif|jpeg|png|ico)$"> ExpiresActive On ExpiresDefault "access plus 1 year" </FilesMatch>
  107. 107. Activar compresión Gzip <FilesMatch ".(css|js|gif|jpeg|png|ico)$"> ExpiresActive On ExpiresDefault "access plus 1 year" </FilesMatch>
  108. 108. Activar compresión Gzip https://checkgzipcompression.com
  109. 109. Activar compresión Gzip
  110. 110. Evitar escritura del archivo <files .htaccess> order allow,deny deny from all </files>
  111. 111. Carpetas Wp-admin Archivos del área de administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías
  112. 112. Carpetas Wp-admin Archivos del área de administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías Se toca
  113. 113. Carpetas Wp-admin Archivos del área de administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías Se toca No se toca
  114. 114. Carpetas Wp-admin Archivos del área de administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías Se toca No se toca No se toca
  115. 115. Wp-content Languages Archivos de traducción. Plugins Repositorio de plugins. Themes Plantillas. Uploads Medios subidos.
  116. 116. Temas de WordPress
  117. 117. 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/
  118. 118. 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/
  119. 119. 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.
  120. 120. DIVI https://www.elegantthemes.com/gallery/divi/ Polifacético tema con su propio constructor visual. Ideal para reutilizar a medio y largo plazo.
  121. 121. DIVI
  122. 122. DIVI • Comunidad • Plugins • Rendimiento aceptable • Precio • Fácil de usar • Base pobre, pocas opciones • Plugins de pago
  123. 123. Ejemplos • Blog: https://www.raulcarrion.com/ • Web de agencia: http://doers.sg/
  124. 124. 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
  125. 125. Theme forest • Variedad gráfica • Importadores de contenido • Precio • Fácil de usar • Pago por uso • Rendimiento web
  126. 126. Ejemplos • Servicios: https://www.comorecuperargastoshipoteca.com/ • Corporativo: https://www.almacenajesc.com/
  127. 127. 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.
  128. 128. Genesis • Rendimiento • Potencial • Poca carga gráfica • Conocimientos necesarios • Curva de aprendizaje
  129. 129. Ejemplos • Blog: http://chrisbrogan.com/ • Recetas: http://www.lovefromtheoven.com/
  130. 130. Consejo de amigo • Especialízate en un tema: DIVI, Genesis, etc… • Utiliza Theme Forest para proyectos rápidos con mucha carga gráfica.
  131. 131. Activar DIVI
  132. 132. Activar DIVI • Apariencia / Temas • Activar DIVI
  133. 133. Estructura de un tema
  134. 134. 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 …
  135. 135. 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/ • …
  136. 136. 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
  137. 137. Screenshot.png • Imagen destacada del tema. • Aparece en Apariencia / Temas • Dimensiones recomendadas: 1200 x 900px
  138. 138. Apariencia / Temas
  139. 139. 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/
  140. 140. 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
  141. 141. Personalizar nuestro tema
  142. 142. Personalizar nuestro tema
  143. 143. Plantillas de página
  144. 144. Plantillas de página Index.php • Plantilla principal. Es el que usa WordPress si no hay una plantilla más específica.
  145. 145. Plantillas de página 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.
  146. 146. Plantillas de página single.php • Plantilla para las entradas del blog. page.php • Plantilla para las páginas.
  147. 147. Plantillas de página 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.
  148. 148. Llamadas a plantillas <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> <?php comments_template(); ?>
  149. 149. page.php
  150. 150. Ejemplo de jerarquía de plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
  151. 151. Ejemplo de jerarquía de plantillas • 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”
  152. 152. Ejemplo de jerarquía de plantillas • En la página de noticias ejecutamos la extensión Web Developer • Information / View document outline
  153. 153. Ejemplo de jerarquía de plantillas • En la página de noticias ejecutamos la extensión Web Developer • Information / View document outline
  154. 154. Ejemplo de jerarquía de plantillas Ejercicio: Vamos a poner un h1 automático en cada página de categorías.
  155. 155. Ejemplo de jerarquía de plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
  156. 156. Ejemplo de jerarquía de plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
  157. 157. Ejemplo de jerarquía de plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
  158. 158. Ejemplo de jerarquía de plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
  159. 159. Ejemplo de jerarquía de plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
  160. 160. Ejemplo de jerarquía de plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
  161. 161. • 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 Ejemplo de jerarquía de plantillas
  162. 162. Ejemplo de jerarquía de plantillas
  163. 163. Ejemplo de jerarquía de plantillas
  164. 164. Functions.php
  165. 165. • 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
  166. 166. Traducciones
  167. 167. 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
  168. 168. .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
  169. 169. Los podemos encontrar: • Wp-content/themes/tema/languages o /lang/ • Wp-content/languages/themes/ • Se editan con la herramienta Poedit Traducciones
  170. 170. • Descargar e instalar Poedit: https://poedit.net/ Traducciones
  171. 171. • 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
  172. 172. Traducciones
  173. 173. Temas hijo (Child themes)
  174. 174. 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
  175. 175. Temas hijo • Pérdida de rendimiento • Necesitas más conocimiento y tiempo • Posibilidad de actualizar “casi” automáticamente.
  176. 176. • 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
  177. 177. • /* • 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
  178. 178. • La carpeta del nuevo tema. • Apariencia / Temas • Activamos el tema Temas hijo
  179. 179. • 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' ); • ?>
  180. 180. • 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
  181. 181. • Subimos header.php al servidor. • Comprobamos que se muestra la meta. Temas hijo
  182. 182. • 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
  183. 183. Temas hijo
  184. 184. Plugins
  185. 185. Plugins Funcionalidades encapsuladas. • Incompatibilidades entre plugins • Pérdida de rendimiento • Gran cantidad de funcionalidades disponibles • Mayoritariamente gratuitos • Fácil de instalar y usar
  186. 186. Plugins recomendados
  187. 187. Plugins recomendados
  188. 188. Plugins recomendados WordPress SEO by Yoast • Funcionalidades para mejorar el SEO • https://es.wordpress.org/plugins/wordpress-seo/
  189. 189. Plugins recomendados Contact Form 7 • Generador de formularios de contacto • https://es.wordpress.org/plugins/contact-form-7/
  190. 190. Plugins recomendados Flamingo • Guarda los contactos de Contact Form 7 en una BD • https://es.wordpress.org/plugins/flamingo/
  191. 191. Plugins recomendados Simple Share Buttons Adder • Añade los botones de compartir en redes sociales • https://es.wordpress.org/plugins/simple-share-buttons-adder/
  192. 192. Plugins recomendados Monarch • Compartir en redes sociales con contador • De pago, viene con DIVI • https://www.elegantthemes.com/plugins/monarch/
  193. 193. Plugins recomendados Cookie notice • Para cumplir con la ley de cookies • https://es.wordpress.org/plugins/cookie-notice/
  194. 194. Plugins recomendados Duplicate Post • Clona contenidos • https://es.wordpress.org/plugins/duplicate-post/
  195. 195. Plugins recomendados Black Studio TinyMCE Widget • Editor de contenido para widgets • https://es.wordpress.org/plugins/black-studio-tinymce-widget/
  196. 196. Plugins recomendados Call now Button • Botón para llamar al teléfono en dispositivos móviles • https://es.wordpress.org/plugins/call-now-button/
  197. 197. Plugins recomendados Google Maps WD • Inserta mapas personalizados de Google Maps • https://es.wordpress.org/plugins/wd-google-maps/
  198. 198. Plugins recomendados WP Maintenance Mode • Crea una página de mantenimiento para ocultar la web en desarrollo • https://wordpress.org/plugins/wp-maintenance-mode/
  199. 199. Plugins recomendados W3 Total Caché • Caché de archivos y BD. Muy completo y gratuito. • https://es.wordpress.org/plugins/w3-total-cache/
  200. 200. Plugins recomendados Autoptimize • Minimiza HTML, CSS y JS • https://es.wordpress.org/plugins/autoptimize/
  201. 201. Plugins recomendados Custom Post Type UI • Crea tipos de datos personalizados. • https://es.wordpress.org/plugins/custom-post-type-ui/
  202. 202. Plugins recomendados Advanced Custom Fields • Crea campos personalizados. • https://wordpress.org/plugins-wp/advanced-custom-fields/
  203. 203. Plugins recomendados 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/
  204. 204. Plugins recomendados BackWPup – WordPress Backup Plugin • Hace backups programados de archivos y base de datos • https://es.wordpress.org/plugins/backwpup/
  205. 205. Plugins recomendados Crayon Syntax Highlighter • Formatea ejemplos de código en las entradas • https://es.wordpress.org/plugins/crayon-syntax-highlighter/
  206. 206. Plugins recomendados EWWW Image Optimizer WP smush • Optimiza las imágenes para que ocupen menos espacio • https://es.wordpress.org/plugins/ewww-image-optimizer/
  207. 207. Plugins recomendados 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/
  208. 208. Plugins recomendados Wordfence Security • Evita ataques por fuerza bruta bloqueando IPs • https://es.wordpress.org/plugins/wordfence/
  209. 209. Plugins recomendados Mailchimp for WP • Integra Mailchimp con WordPress • https://es.wordpress.org/plugins/mailchimp-for-wp/
  210. 210. Seguridad
  211. 211. 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
  212. 212. $us=$_POST['usuario']; $pass=$_POST['pass']; $sql="SELECT * FROM usuarios WHERE user = '$us' AND password='$pass'"; Inyección de código
  213. 213. $us=$_POST['usuario']; $pass=$_POST['pass']; $sql="SELECT * FROM usuarios WHERE user = '$us' AND password='$pass'"; Inyección de código OR 1=1”;
  214. 214. • 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
  215. 215. • Hacer copias de seguridad frecuentemente • Actualizar WordPress, temas y plugins • Evitar escritura del archivo .htaccess • Utilizar Search console Consejos
  216. 216. • 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
  217. 217. Wordfence security
  218. 218. Rendimiento
  219. 219. Rendimiento En WordPress el rendimiento por defecto es…. Malo
  220. 220. Herramientas Pingdom • Mide: • Tamaño • Peticiones • Tiempo de descarga • https://tools.pingdom.com/  
  221. 221. Herramientas
  222. 222. Herramientas Vikinguard • Monitoriza y te ayuda a optimizar. • Te avisa al móvil si algo no va bien. • https://www.vikinguard.com/ 
  223. 223. Herramientas
  224. 224. Optimización de imágenes • Instalar el plugin EWWW Image Optimizer • Ajustes / ewww image optimizer / optimización en masa
  225. 225. Optimización de imágenes
  226. 226. 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.
  227. 227. Caché
  228. 228. Minimizar JS y CSS • Activar plugin Autoptimize. • Ajustes / Autoptimize • Optimizar HTML • Optimizar JavaScript • Optimizar CSS • Clic en “Guardar cambios y vaciar caché”
  229. 229. Minimizar JS y CSS
  230. 230. 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.
  231. 231. Mínimos plugins • Desactivar todos los plugins que no se están utilizando. • Utilizar alternativas cuando sea viable
  232. 232. 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
  233. 233. 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>
  234. 234. 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.
  235. 235. 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.
  236. 236. 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
  237. 237. Subdominios propios enlazados al dominio principal • Crear un subdominio en el hosting: cdn1.dominio.com • Crear 3 subdominios que apunten al subdominio principal: • cdn2.dominio.com ->cdn1.dominio.com • cdn3.dominio.com ->cdn1.dominio.com • cdn4.dominio.com ->cdn1.dominio.com
  238. 238. Subdominios propios enlazados al dominio 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
  239. 239. Subdominios propios enlazados al dominio principal • Subir todos los archivos al nuevo CDN
  240. 240. Subdominios propios enlazados al dominio principal • Subir todos los archivos al nuevo CDN IMPORTANTE: Si la web tiene certificado seguro, el CDN también debe tenerlo.
  241. 241. Subdominios propios enlazados al dominio principal
  242. 242. Subdominios propios enlazados al dominio principal
  243. 243. Servidores externos • De pago • Mejora mucho el rendimiento • Sirve las imágenes de varias ubicaciones
  244. 244. Cloudflare
  245. 245. Cloudflare
  246. 246. Cloudflare
  247. 247. Cloudflare
  248. 248. Cloudflare
  249. 249. Suscriptores
  250. 250. • 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
  251. 251. • Mailchimp for WP / Formularios • Título del formulario: Suscríbete a mi blog • Elegimos una lista de suscriptores • Clic en Guardar Suscriptores
  252. 252. • 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
  253. 253. • Mailchimp / Formularios / Aspecto: Tema oscuro. • Probar a suscribirnos. Suscriptores
  254. 254. SEO para WordPress
  255. 255. • Por defecto WordPress suele ser bastante correcto en SEO. • Cuestiones a comprobar: • Jerarquía Hn • Calidad de contenidos • Enlaces rotos SEO para WordPress
  256. 256. • 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
  257. 257. • 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
  258. 258. Home Jerarquía Hn
  259. 259. 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
  260. 260. Jerarquía Hn Home
  261. 261. Categoría Jerarquía Hn
  262. 262. 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
  263. 263. Jerarquía Hn
  264. 264. 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.
  265. 265. 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.
  266. 266. Jerarquía Hn Categoría
  267. 267. Entrada Jerarquía Hn
  268. 268. Jerarquía Hn Entrada • Copiamos el archivo commens.php del tema Divi al tema hijo. • Buscamos el h1 y lo cambiamos por un p
  269. 269. Jerarquía Hn Entrada
  270. 270. • Avanzado / Enlaces permanentes / Quitar “category” de las URLs de categorías. • Search console: conectar. Configuración Yoast
  271. 271. • Utilizaremos Yoast SEO: Activar plugin. • Filosofía: Cada palabra clave objetivo debe tener una página optimizada para ella. Calidad de contenidos
  272. 272. Calidad de contenidos
  273. 273. • Introducimos la palabra clave y el plugin nos recomendará mejoras. • Redactar un title distinto del h1 • Redactar una meta description marketiniana. Calidad de contenidos
  274. 274. • Cada cierto tiempo pasar la herramienta Screaming frog en búsqueda de enlaces rotos. • https://www.screamingfrog.co.uk/seo-spider/ Enlaces rotos
  275. 275. Enlaces rotos
  276. 276. Raúl Carrión @raulcarrion hola@raulcarrion.com

×