![.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](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-91-2048.jpg)
![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](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-93-2048.jpg)
![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](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-94-2048.jpg)
![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]")](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-95-2048.jpg)
![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]](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-97-2048.jpg)
![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]](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-98-2048.jpg)
![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]](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-102-2048.jpg)
![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]](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-104-2048.jpg)
![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]](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-105-2048.jpg)
![$us=$_POST['usuario'];
$pass=$_POST['pass'];
$sql="SELECT * FROM usuarios
WHERE user = '$us' AND
password='$pass'";
Inyección de código](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-213-2048.jpg)
![$us=$_POST['usuario'];
$pass=$_POST['pass'];
$sql="SELECT * FROM usuarios
WHERE user = '$us' AND
password='$pass'";
Inyección de código
OR 1=1”;](https://image.slidesharecdn.com/wordpress-avanzado-2017-171007155654/75/Taller-WordPress-Avanzado-214-2048.jpg)
Subido porRaúl Carrión
Taller WordPress Avanzado
La presentación de Raúl Carrión aborda el uso avanzado de WordPress como CMS, cubriendo desde la instalación hasta la configuración de temas y plugins. Se explican conceptos básicos de HTML, CSS y PHP, así como herramientas útiles para desarrollar y gestionar un sitio web. Además, se enfatiza la importancia de realizar copias de seguridad y optimizar el rendimiento mediante técnicas como el uso de .htaccess y la gestión de imágenes.
Taller WordPress Avanzado
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. Objetivo Hacer páginas websmejores y en menos tiempo
- 12. Objetivo Hacer páginas websmejores y en menos tiempo AVANZADO!
- 13. Objetivo Hacer páginas websmejores y en menos tiempo AVANZADO!
- 14. WordPress • El CMSweb 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.
- 16.
- 17.
- 18. Lenguaje HTML El HTMLes 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. Lenguaje HTML Es indispensablesaber HTML para dedicarse al marketing digital
- 20. Lenguaje HTML Es indispensablesaber HTML para dedicarse al marketing digital
- 21. Normas de HTML Todaetiqueta que se abre debe cerrarse. <body> </body> Hay alguna excepción: <br/>
- 22. Normas de HTML Todaetiqueta que se abre debe cerrarse. <body> </body> Hay alguna excepción: <br/>
- 23. Anatomía de unaetiqueta Atributos de etiquetas <title>hola</title> <a href=”/inicio.html”>hola</a>
- 24. Anatomía de unapá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.
- 26. Etiquetas de metadatos <title> <title>Estees 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. Etiquetas de bloque <div> <div>estoyen un contenedor</div> <span> <span>estoy en una selección</span> <p> <p>estoy en un párrafo</p>
- 28. Etiquetas de formato <strong> <strong>textoen negrita</strong> <i> <i>texto en cursiva</i> <del> <del>texto tachado</del>
- 29. Etiquetas de enlace <a> <ahref=”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. Etiquetas de enlace rel=“nofollow” <ahref=”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. Listas no ordenadas <ul>y <li> <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul>
- 32. Listas ordenadas <ol> y<li> <ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>
- 33.
- 34. Hojas de estiloen 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. Hojas de estiloen cascada <p>texto grande</p> CSS Resultado HTML
- 36. Hojas de estiloen cascada <p>texto grande</p> CSS Resultado texto grande HTML
- 37. Hojas de estiloen cascada p {color:red;} a {font-size:14px; font-weight:bold;} .tipogrande{font-size:28px;} HTML CSS Resultado <p>texto grande</p>
- 38. Hojas de estiloen 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. Hojas de estiloen 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. Hojas de estiloen 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. Hojas de estiloen 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.
- 43. PHP Lenguaje de programacióndel 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. PHP Conceptos básicos deprogramació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.
- 46. Fin de lateoría técnica
- 47. Fin de lateoría técnica
- 48.
- 49. Filezilla Gestor de FTPpara subir y bajar ficheros.
- 50. Filezilla • Servidor • Usuario •Contraseña Datos necesarios para conectar a un FTP:
- 51.
- 52.
- 53. Sublime Text • Editorde 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. Web Developer • Extensiónde Chrome para analizar páginas web • Jerarquía Hn • Orden de carga de página • Desactivar tecnologías • Y mucho más
- 55. Instalar herramientas • InstalarFilezilla (Client) https://filezilla-project.org/ • Instalar Sublime Text: https://www.sublimetext.com/ • Instalar Web Developer: Chrome / Ventana / Extensiones • Obtener más extensiones
- 56. Instalar herramientas • InstalarFilezilla (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. Hosting gratis durante1 mes https://sys4net.com/
- 58. CENTRO DE DATOS 90292 92 42 - (+34) 911 01 15 39 Parque Empresarial Magalia Calle Uruguay, Parc. 13, Nave 10 30820 - Alcantarilla, Murcia, España
- 60.
- 61. Subdominios de trabajo •Comprobar accesos: • Web: http://worpress01.sys4net-hosting.es/ • FTP: Guardar conexión
- 62.
- 63. Instalación de WordPress •Descargar la última versión de WordPress de http:// es.wordpress.org • Descomprimir archivo.
- 64. Instalación de WordPress •Conectar con el FTP con Filezilla • Vaciar la carpeta raíz del dominio • Subir archivos descomprimidos
- 65. 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.
- 66. Instalación de WordPress •Abrimos un navegador y accedemos a la URL del sitio web
- 67. Instalación de WordPress Completamoscon la información de la base de datos.
- 68. Instalación de WordPress Completamosla información web
- 69. Instalación de WordPress Completamosla información web
- 70. Instalación de WordPress Comprobamosque podemos acceder al área de administración http://worpress01.sys4net-hosting.es/wp-admin/
- 71. 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
- 72. Cambiar contraseña • Esquinasuperior izquierda, clic en “Hola alumno” • Editar mi perfil • Cambiar contraseña • Cambiar correo
- 73. Cambiar contraseña • Esquinasuperior izquierda, clic en “Hola alumno” • Editar mi perfil • Cambiar contraseña • Cambiar correo
- 74. Primeros pasos enWordPress
- 75. Primeros pasos enWordPress • Ajustes / Enlaces permanentes • Ajustes comunes: Nombre de la entrada • Ajustes / Medios • Desactivar: Organizar mis archivos subidos en carpetas basadas en mes y año
- 76. Primeros pasos enWordPress • Activar certificado de servidor seguro • Solicitar al hosting la activación del certificado Let’s encrypt • Ajustes generales / • Cambiar http por https
- 77.
- 78.
- 79.
- 80.
- 81. 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
- 82. BackWPub Plugin para programarcopias de seguridad y almacenarlas donde queramos. • Servidor • Enviar por email • FTP • Dropbox • Amazon S3 • …
- 83. 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
- 84. BackWPub • Pestaña: Schedule •Start job: With WordPress cron • Scheduler: Weekly • Clic en Save changes
- 85. BackWPub • Para hacerla primera copia • BackWPub / Jobs / Copia semanal • Run now
- 86. BackWPub Recomendación: Guardar lascopias de seguridad fuera del servidor. En Dropbox, Drive, Local, etc.
- 87. BackWPub Recomendación: Guardar lascopias de seguridad fuera del servidor. En Dropbox, Drive, Local, etc.
- 88. Archivos en laraíz Wp-config.php (wp-config-sample.php) Datos de conexión a la BD. .htaccess Reescritura de URLs, redirecciones y más.
- 89.
- 90.
- 91. .htaccess # BEGIN WordPress <IfModulemod_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
- 92. .htaccess ¿Qué podemos hacer? •Redirecciones • Evitar el hotlinking • Activar caché • Activar compresión gzip • Evitar edición del archivo .htaccess
- 93. Editar .htaccess • Conectarcon 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
- 94. 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
- 95. Redirecciones masivas Para migracionesSEO 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]")
- 96.
- 97. 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]
- 98. 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]
- 99.
- 100.
- 101. “Además de copiarnosnos roban ancho de banda”
- 102. Evitar el hotlinking 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]
- 103. 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
- 104. Evitar el hotlinking 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. Evitar el hotlinking 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]
- 106. 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
- 107. Activar caché <FilesMatch ".(css|js|gif|jpeg|png|ico)$"> ExpiresActiveOn ExpiresDefault "access plus 1 year" </FilesMatch>
- 108. Activar compresión Gzip <FilesMatch".(css|js|gif|jpeg|png|ico)$"> ExpiresActive On ExpiresDefault "access plus 1 year" </FilesMatch>
- 109.
- 110.
- 111. Evitar escritura delarchivo <files .htaccess> order allow,deny deny from all </files>
- 112. Carpetas Wp-admin Archivos del áreade administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías
- 113. Carpetas Wp-admin Archivos del áreade administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías Se toca
- 114. Carpetas Wp-admin Archivos del áreade administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías Se toca No se toca
- 115. Carpetas Wp-admin Archivos del áreade administración. Wp-content Temas, plugins, idiomas, archivos subidos Wp-incluides Librerías Se toca No se toca No se toca
- 116. Wp-content Languages Archivos de traducción. Plugins Repositoriode plugins. Themes Plantillas. Uploads Medios subidos.
- 117.
- 118. Temas de WordPress Plantillasque 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. Temas de WordPress Plantillasque 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/
- 120. Temas de WordPress Laelecció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.
- 121. DIVI https://www.elegantthemes.com/gallery/divi/ Polifacético tema consu propio constructor visual. Ideal para reutilizar a medio y largo plazo.
- 122.
- 123. DIVI • Comunidad • Plugins •Rendimiento aceptable • Precio • Fácil de usar • Base pobre, pocas opciones • Plugins de pago
- 124. Ejemplos • Blog: https://www.raulcarrion.com/ •Web de agencia: http://doers.sg/
- 125. Theme forest https://themeforest.net/category/wordpress Marketplace detemas de WordPress. Generalizando… • Temas con mucho diseño y bajo rendimiento. • Ideal para proyectos flash
- 126. Theme forest • Variedadgráfica • Importadores de contenido • Precio • Fácil de usar • Pago por uso • Rendimiento web
- 127. Ejemplos • Servicios: https://www.comorecuperargastoshipoteca.com/ •Corporativo: https://www.almacenajesc.com/
- 128. Genesis https://my.studiopress.com/themes/genesis/ Framework de WordPressmuy 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.
- 129. Genesis • Rendimiento • Potencial •Poca carga gráfica • Conocimientos necesarios • Curva de aprendizaje
- 130. Ejemplos • Blog: http://chrisbrogan.com/ •Recetas: http://www.lovefromtheoven.com/
- 131. Consejo de amigo •Especialízate en un tema: DIVI, Genesis, etc… • Utiliza Theme Forest para proyectos rápidos con mucha carga gráfica.
- 132.
- 133. Activar DIVI • Apariencia/ Temas • Activar DIVI
- 134. Estructura de untema
- 135. Estructura de untema 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 …
- 136. Hojas de estilos Style.css Hojade 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/ • …
- 137. 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
- 138. Screenshot.png • Imagen destacadadel tema. • Aparece en Apariencia / Temas • Dimensiones recomendadas: 1200 x 900px
- 139.
- 140. 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/
- 141. 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
- 142.
- 143.
- 144.
- 145. Plantillas de página Index.php •Plantilla principal. Es el que usa WordPress si no hay una plantilla más específica.
- 146. 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.
- 147. Plantillas de página single.php •Plantilla para las entradas del blog. page.php • Plantilla para las páginas.
- 148. 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.
- 149. Llamadas a plantillas <?phpget_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> <?php comments_template(); ?>
- 150.
- 151. Ejemplo de jerarquíade plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
- 152. Ejemplo de jerarquíade 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”
- 153. Ejemplo de jerarquíade plantillas • En la página de noticias ejecutamos la extensión Web Developer • Information / View document outline
- 154. Ejemplo de jerarquíade plantillas • En la página de noticias ejecutamos la extensión Web Developer • Information / View document outline
- 155. Ejemplo de jerarquíade plantillas Ejercicio: Vamos a poner un h1 automático en cada página de categorías.
- 156. Ejemplo de jerarquíade plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
- 157. Ejemplo de jerarquíade plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
- 158. Ejemplo de jerarquíade plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
- 159. Ejemplo de jerarquíade plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
- 160. Ejemplo de jerarquíade plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
- 161. Ejemplo de jerarquíade plantillas • category-slug.php • category-ID.php • category.php • archive.php • index.php
- 162. • Crear unaplantilla 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
- 163. Ejemplo de jerarquíade plantillas
- 164. Ejemplo de jerarquíade plantillas
- 165.
- 166. • En estearchivo 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
- 167.
- 168. WordPress está traducidoutilizando 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
- 169. .PO Archivo con textooriginal más una traducción. Son editables .MO Archivos con la misma información pero compilada. Son los que lee WordPress. Traducciones
- 170. Los podemos encontrar: •Wp-content/themes/tema/languages o /lang/ • Wp-content/languages/themes/ • Se editan con la herramienta Poedit Traducciones
- 171. • Descargar einstalar Poedit: https://poedit.net/ Traducciones
- 172. • Descargar porFTP 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
- 173.
- 174. Temas hijo (Childthemes)
- 175. Estrategia para modificarun 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
- 176. Temas hijo • Pérdidade rendimiento • Necesitas más conocimiento y tiempo • Posibilidad de actualizar “casi” automáticamente.
- 177. • Crear unacarpeta en wp-content/themes/ con el nombre de la plantilla hija. (Divi-child) • Crear en la raíz el fichero style.css Temas hijo
- 178. • /* • ThemeName: 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
- 179. • La carpetadel nuevo tema. • Apariencia / Temas • Activamos el tema Temas hijo
- 180. • Creamos elarchivo 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' ); • ?>
- 181. • Vamos amodificar 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
- 182. • Subimos header.phpal servidor. • Comprobamos que se muestra la meta. Temas hijo
- 183. • Vamos apintar 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
- 184.
- 185.
- 186. Plugins Funcionalidades encapsuladas. • Incompatibilidadesentre plugins • Pérdida de rendimiento • Gran cantidad de funcionalidades disponibles • Mayoritariamente gratuitos • Fácil de instalar y usar
- 187.
- 188.
- 189. Plugins recomendados WordPress SEOby Yoast • Funcionalidades para mejorar el SEO • https://es.wordpress.org/plugins/wordpress-seo/
- 190. Plugins recomendados Contact Form7 • Generador de formularios de contacto • https://es.wordpress.org/plugins/contact-form-7/
- 191. Plugins recomendados Flamingo • Guardalos contactos de Contact Form 7 en una BD • https://es.wordpress.org/plugins/flamingo/
- 192. Plugins recomendados Simple ShareButtons Adder • Añade los botones de compartir en redes sociales • https://es.wordpress.org/plugins/simple-share-buttons-adder/
- 193. Plugins recomendados Monarch • Compartiren redes sociales con contador • De pago, viene con DIVI • https://www.elegantthemes.com/plugins/monarch/
- 194. Plugins recomendados Cookie notice •Para cumplir con la ley de cookies • https://es.wordpress.org/plugins/cookie-notice/
- 195. Plugins recomendados Duplicate Post •Clona contenidos • https://es.wordpress.org/plugins/duplicate-post/
- 196. Plugins recomendados Black StudioTinyMCE Widget • Editor de contenido para widgets • https://es.wordpress.org/plugins/black-studio-tinymce-widget/
- 197. Plugins recomendados Call nowButton • Botón para llamar al teléfono en dispositivos móviles • https://es.wordpress.org/plugins/call-now-button/
- 198. Plugins recomendados Google MapsWD • Inserta mapas personalizados de Google Maps • https://es.wordpress.org/plugins/wd-google-maps/
- 199. Plugins recomendados WP MaintenanceMode • Crea una página de mantenimiento para ocultar la web en desarrollo • https://wordpress.org/plugins/wp-maintenance-mode/
- 200. Plugins recomendados W3 TotalCaché • Caché de archivos y BD. Muy completo y gratuito. • https://es.wordpress.org/plugins/w3-total-cache/
- 201. Plugins recomendados Autoptimize • MinimizaHTML, CSS y JS • https://es.wordpress.org/plugins/autoptimize/
- 202. Plugins recomendados Custom PostType UI • Crea tipos de datos personalizados. • https://es.wordpress.org/plugins/custom-post-type-ui/
- 203. Plugins recomendados Advanced CustomFields • Crea campos personalizados. • https://wordpress.org/plugins-wp/advanced-custom-fields/
- 204. Plugins recomendados Migrate dbPro • 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/
- 205. Plugins recomendados BackWPup –WordPress Backup Plugin • Hace backups programados de archivos y base de datos • https://es.wordpress.org/plugins/backwpup/
- 206. Plugins recomendados Crayon SyntaxHighlighter • Formatea ejemplos de código en las entradas • https://es.wordpress.org/plugins/crayon-syntax-highlighter/
- 207. Plugins recomendados EWWW ImageOptimizer WP smush • Optimiza las imágenes para que ocupen menos espacio • https://es.wordpress.org/plugins/ewww-image-optimizer/
- 208. Plugins recomendados Google Analyticspara WordPress por MonsterInsights • Código de seguimiento de Google Analytics y seguimiento de eventos. • https://es.wordpress.org/plugins/ewww-image-optimizer/
- 209. Plugins recomendados Wordfence Security •Evita ataques por fuerza bruta bloqueando IPs • https://es.wordpress.org/plugins/wordfence/
- 210. Plugins recomendados Mailchimp forWP • Integra Mailchimp con WordPress • https://es.wordpress.org/plugins/mailchimp-for-wp/
- 211.
- 212. La inyección de códigoo 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
- 213. $us=$_POST['usuario']; $pass=$_POST['pass']; $sql="SELECT * FROMusuarios WHERE user = '$us' AND password='$pass'"; Inyección de código
- 214. $us=$_POST['usuario']; $pass=$_POST['pass']; $sql="SELECT * FROMusuarios WHERE user = '$us' AND password='$pass'"; Inyección de código OR 1=1”;
- 215. • Al crearun 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
- 216. • Hacer copiasde seguridad frecuentemente • Actualizar WordPress, temas y plugins • Evitar escritura del archivo .htaccess • Utilizar Search console Consejos
- 217. • Escaneo dearchivos 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
- 218.
- 219.
- 220. Rendimiento En WordPress elrendimiento por defecto es…. Malo
- 221. Herramientas Pingdom • Mide: • Tamaño •Peticiones • Tiempo de descarga • https://tools.pingdom.com/
- 222.
- 223. Herramientas Vikinguard • Monitoriza yte ayuda a optimizar. • Te avisa al móvil si algo no va bien. • https://www.vikinguard.com/
- 224.
- 225. Optimización de imágenes •Instalar el plugin EWWW Image Optimizer • Ajustes / ewww image optimizer / optimización en masa
- 226.
- 227. Caché • Reutilización delos datos solicitados con más frecuencia • Vamos a activar W3 Total Caché • Performance / General settings • Activamos la caché, pero no la minificación.
- 228.
- 229. Minimizar JS yCSS • Activar plugin Autoptimize. • Ajustes / Autoptimize • Optimizar HTML • Optimizar JavaScript • Optimizar CSS • Clic en “Guardar cambios y vaciar caché”
- 230.
- 231. 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.
- 232. Mínimos plugins • Desactivartodos los plugins que no se están utilizando. • Utilizar alternativas cuando sea viable
- 233. Mensaje de cookiessin 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
- 234. Mensaje de cookiessin 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>
- 235. Servicio de hostingde 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.
- 236. 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.
- 237. Subdominios propios enlazadosal 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
- 238. Subdominios propios enlazadosal 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
- 239. Subdominios propios enlazadosal 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
- 240. Subdominios propios enlazadosal dominio principal • Subir todos los archivos al nuevo CDN
- 241. Subdominios propios enlazadosal dominio principal • Subir todos los archivos al nuevo CDN IMPORTANTE: Si la web tiene certificado seguro, el CDN también debe tenerlo.
- 242. Subdominios propios enlazadosal dominio principal
- 243. Subdominios propios enlazadosal dominio principal
- 244. Servidores externos • Depago • Mejora mucho el rendimiento • Sirve las imágenes de varias ubicaciones
- 245.
- 246.
- 247.
- 248.
- 249.
- 250.
- 251. • Crear cuentaen 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
- 252. • Mailchimp forWP / Formularios • Título del formulario: Suscríbete a mi blog • Elegimos una lista de suscriptores • Clic en Guardar Suscriptores
- 253. • Mailchimp forWP / 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
- 254. • Mailchimp /Formularios / Aspecto: Tema oscuro. • Probar a suscribirnos. Suscriptores
- 255.
- 256. • Por defectoWordPress suele ser bastante correcto en SEO. • Cuestiones a comprobar: • Jerarquía Hn • Calidad de contenidos • Enlaces rotos SEO para WordPress
- 257. • Cada páginadebe 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
- 258. • Analizar lajerarquía Hn de los principales modelos de página: • Inicio • Categoría • Entrada • Utilizando la extensión “Web developer” Jerarquía Hn
- 259.
- 260. Jerarquía Hn Home • Crearuna 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
- 261.
- 262.
- 263. Jerarquía Hn Categoría • Vamosa 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
- 264.
- 265. Jerarquía Hn Categoría • Podemoscambiarlo a las bravas y apuntarlo para la próxima actualización o añadirlo a nuestro archivo functions.php.
- 266. Jerarquía Hn Categoría • Copiamosla 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.
- 267.
- 268.
- 269. Jerarquía Hn Entrada • Copiamosel archivo commens.php del tema Divi al tema hijo. • Buscamos el h1 y lo cambiamos por un p
- 270.
- 271. • Avanzado /Enlaces permanentes / Quitar “category” de las URLs de categorías. • Search console: conectar. Configuración Yoast
- 272. • Utilizaremos YoastSEO: Activar plugin. • Filosofía: Cada palabra clave objetivo debe tener una página optimizada para ella. Calidad de contenidos
- 273.
- 274. • Introducimos lapalabra clave y el plugin nos recomendará mejoras. • Redactar un title distinto del h1 • Redactar una meta description marketiniana. Calidad de contenidos
- 275. • Cada ciertotiempo pasar la herramienta Screaming frog en búsqueda de enlaces rotos. • https://www.screamingfrog.co.uk/seo-spider/ Enlaces rotos
- 276.
- 277.