Categoría: WordPress

En esta entrada vamos a aprender como auditar WordPress con WPScan en OSX. Vamos, primero, a ver cómo se instala en este sistema operativo y luego alguna de sus funcionalidades más básicas.

WPScan es un software escrito en Ruby usado para realizar un escaneo de vulnerabilidades de sitios web WordPress.

Entre otras cosas, auditar WordPress con WPScan nos puede arrojar datos como los usuarios de la base de datos, o los plugins instalados y sus versiones (incluído si son vulnerables o no) y algunas cosas más que luego veremos.

Este software está patrocinado por Sucuri, una empresa de seguridad web bastante conocida dentro del mundo WordPress al disponer de un plugin para proteger el gestor de contenidos así como un firewall web y un servicio de limpieza de sitios WordPress infectados.

Instalación de WPScan en OSX

La verdad es que los pasos para instalar WPSCan en OSX no son demasiado complicados pero tiene una serie de requerimientos que estaría bien tenerlos contemplados antes de empezar la instalación.

• XCode.
• Ruby.
• Ruby Gem Bundler.
• Curl.
• Git.
• WPScan

Comprobando la instalación de Curl

cURL para que nos entendamos de forma rápida y sencilla es un proyecto que consiste en una librería y un intérprete de línea de comandos para realizar transferencia de archivos. El tenerlo instalado nos permite simular acciones de los usuarios a través de un navegador web.

Para ver si está instalado en nuestro sistema OSX debemos escribir en la terminal:

curl -V

Instalando XCode

Nos olvidamos de la línea de comandos por unos momentos y a través de la App Store podemos descargarnos el entorno de desarrollo para OSX.

Con XCode dispondremos del compilador necesario para luego a la hora de instalar y compilar Ruby.

Os aconsejo que tengáis bastante espacio libre en el disco duro pues ocupa bastante una vez descargado e instalado.

Instalando Git

Git es un un sistema distribuido de control de versiones, lo vamos a usar para descargarnos WPScan del repositorio de GitGub.

Para instalarlo en OSX es relativamente sencillo, basta con ir a su página web, descargarlo e instalarlo. Lo podéis descargar directamente de aquí.

Descargando WPScan desde GitHub

Una vez instalado Git abrimos un terminal y yendo a la carpeta bajo la que queramos instalar WPScan tenemos que clonar el repositorio de la nube en nuestro Mac. Para ello con esta simple instrucción podemos hacerlo:

git clone https://github.com/wpscanteam/wpscan.git

Con esto tendremos ya WPScan en una carpeta de nuestro Mac esperando a instalar Ruby para poder hacerlo funcionar.

Ruby, instalación con RVM

La forma más sencilla de instalar Ruby en mi Mac ha sido usando RVM (Ruby Version Manager), una instrucción para la línea de comandos para instalar y gestionar versiones de Ruby.

Para instalarlo en el terminal debemos introducir la siguiente instrucción.

curl -sSL https://get.rvm.io | bash -s stable

Para instalar Ruby.

rvm install ruby-2.3.3
cd wpscan
sudo gem install bundler && sudo bundle install --without test

Con estas 3 líneas hemos instalado Ruby, hemos entrado en el directorio donde se ha clonado el repositorio de WPScan y hemos instalado la Gem Bundler para que gestione y mantenga actualizadas las dependencias del programa.

Si todo ha ido bien, dentro de la carpeta wpscan ya podremos auditar WordPress con WPScan en OSX.

ruby wpscan.rb --help
_______________________________________________________________
        __          _______   _____                  
        \ \        / /  __ \ / ____|                 
         \ \  /\  / /| |__) | (___   ___  __ _ _ __ ®
          \ \/  \/ / |  ___/ \___ \ / __|/ _` | '_ \ 
           \  /\  /  | |     ____) | (__| (_| | | | |
            \/  \/   |_|    |_____/ \___|\__,_|_| |_|

        WordPress Security Scanner by the WPScan Team 
                       Version 2.9.2
          Sponsored by Sucuri - https://sucuri.net
   @_WPScan_, @ethicalhack3r, @erwan_lr, pvdl, @_FireFart_
_______________________________________________________________

Help :

Some values are settable in a config file, see the example.conf.json

--update                            Update the database to the latest version.
--url       | -u <target url>       The WordPress URL/domain to scan.
--force     | -f                    Forces WPScan to not check if the remote site is running WordPress.
--enumerate | -e [option(s)]        Enumeration.
  option :
    u        usernames from id 1 to 10
    u[10-20] usernames from id 10 to 20 (you must write [] chars)
    p        plugins
    vp       only vulnerable plugins
    ap       all plugins (can take a long time)
    tt       timthumbs
    t        themes
    vt       only vulnerable themes
    at       all themes (can take a long time)
  Multiple values are allowed : "-e tt,p" will enumerate timthumbs and plugins
  If no option is supplied, the default is "vt,tt,u,vp"

--exclude-content-based "<regexp or string>"
                                    Used with the enumeration option, will exclude all occurrences based on the regexp or string supplied.
                                    You do not need to provide the regexp delimiters, but you must write the quotes (simple or double).
--config-file  | -c <config file>   Use the specified config file, see the example.conf.json.
--user-agent   | -a <User-Agent>    Use the specified User-Agent.
--cookie <string>                   String to read cookies from.
--random-agent | -r                 Use a random User-Agent.
--follow-redirection                If the target url has a redirection, it will be followed without asking if you wanted to do so or not
--batch                             Never ask for user input, use the default behaviour.
--no-color                          Do not use colors in the output.
--log                               Creates a log.txt file with WPScan's output.
--no-banner                         Prevents the WPScan banner from being displayed.
--disable-accept-header             Prevents WPScan sending the Accept HTTP header.
--disable-referer                   Prevents setting the Referer header.
--disable-tls-checks                Disables SSL/TLS certificate verification.
--wp-content-dir <wp content dir>   WPScan try to find the content directory (ie wp-content) by scanning the index page, however you can specify it.
                                    Subdirectories are allowed.
--wp-plugins-dir <wp plugins dir>   Same thing than --wp-content-dir but for the plugins directory.
                                    If not supplied, WPScan will use wp-content-dir/plugins. Subdirectories are allowed
--proxy <[protocol://]host:port>    Supply a proxy. HTTP, SOCKS4 SOCKS4A and SOCKS5 are supported.
                                    If no protocol is given (format host:port), HTTP will be used.
--proxy-auth <username:password>    Supply the proxy login credentials.
--basic-auth <username:password>    Set the HTTP Basic authentication.
--wordlist | -w <wordlist>          Supply a wordlist for the password brute forcer.
--username | -U <username>          Only brute force the supplied username.
--usernames     <path-to-file>      Only brute force the usernames from the file.
--cache-dir       <cache-directory> Set the cache directory.
--cache-ttl       <cache-ttl>       Typhoeus cache TTL.
--request-timeout <request-timeout> Request Timeout.
--connect-timeout <connect-timeout> Connect Timeout.
--threads  | -t <number of threads> The number of threads to use when multi-threading requests.
--max-threads     <max-threads>     Maximum Threads.
--throttle        <milliseconds>    Milliseconds to wait before doing another web request. If used, the --threads should be set to 1.
--help     | -h                     This help screen.
--verbose  | -v                     Verbose output.
--version                           Output the current version and exit.


Examples :

-Further help ...
ruby wpscan.rb --help

-Do 'non-intrusive' checks ...
ruby wpscan.rb --url www.example.com

-Do wordlist password brute force on enumerated users using 50 threads ...
ruby wpscan.rb --url www.example.com --wordlist darkc0de.lst --threads 50

-Do wordlist password brute force on the 'admin' username only ...
ruby wpscan.rb --url www.example.com --wordlist darkc0de.lst --username admin

-Enumerate installed plugins ...
ruby wpscan.rb --url www.example.com --enumerate p

-Enumerate installed themes ...
ruby wpscan.rb --url www.example.com --enumerate t

-Enumerate users ...
ruby wpscan.rb --url www.example.com --enumerate u

-Enumerate installed timthumbs ...
ruby wpscan.rb --url www.example.com --enumerate tt

-Use a HTTP proxy ...
ruby wpscan.rb --url www.example.com --proxy 127.0.0.1:8118

-Use a SOCKS5 proxy ... (cURL >= v7.21.7 needed)
ruby wpscan.rb --url www.example.com --proxy socks5://127.0.0.1:9000

-Use custom content directory ...
ruby wpscan.rb -u www.example.com --wp-content-dir custom-content

-Use custom plugins directory ...
ruby wpscan.rb -u www.example.com --wp-plugins-dir wp-content/custom-plugins

-Update the DB ...
ruby wpscan.rb --update

-Debug output ...
ruby wpscan.rb --url www.example.com --debug-output 2>debug.log

See README for further information.

Con todo esto ya podemos auditar WordPress con WPScan en OSX.

Ejemplos de uso de WPScan

Llegó la hora de divertirse. Yo normalmente lo uso para ver el estado de las webs de otras agencias o para echar un vistazo al estado general de WordPress que van a llegar a mis manos. O simplemente a veces solo para jugar.

Por ejemplo… decidme una web… va… venga. La web de Vertele (¿no sabíais que estaba montada en WordPress? Pues sí, así es. Vamos a descubrir los usuarios que tiene en la base de datos.

ruby wpscan.rb --url http://www.vertele.com --enumerate u
[+] Enumerating usernames ...
[+] Identified the following 1 user/s:
    +----+-------+---------+
    | Id | Login | Name    |
    +----+-------+---------+
    | 1  | admin | Vertele |
    +----+-------+---------+
[!] Default first WordPress username 'admin' is still used

Si señor… una web con un tráfico orgánico estimado brutal tiene como único usuario a admin.

También podemos ver los plugins vulnerables que tiene instalados, una opción más para auditar WordPress con WPScan en OSX.

ruby wpscan.rb --url http://www.vertele.com --enumerate vp

Además el propio WPScan en cada escaneo nos da información interesante del sitio web como cabeceras, versión de WordPress y otros datos de interés.

[+] URL: http://www.vertele.com/
[+] Started: Fri Dec 16 12:54:36 2016

[+] robots.txt available under: 'http://www.vertele.com/robots.txt'
[!] A wp-config.php backup file has been found in: 'http://www.vertele.com/wp-config.php.old'
[+] Interesting header: AGE: 33
[+] Interesting header: CF-RAY: 3121f11413422f2f-MAD
[+] Interesting header: SERVER: cloudflare-nginx
[+] Interesting header: VIA: 1.1 www.vertele.com:3128 (squid)
[+] Interesting header: VIA: 1.1 varnish
[+] Interesting header: X-CACHE: HIT from www.vertele.com
[+] Interesting header: X-CACHE-LOOKUP: HIT from www.vertele.com:3128
[+] Interesting header: X-POWERED-BY: PHP/5.3.29-1~dotdeb.0
[+] Interesting header: X-VARNISH: 616978048 616977441
[+] This site has 'Must Use Plugins' (http://codex.wordpress.org/Must_Use_Plugins)
[+] XML-RPC Interface available under: http://www.vertele.com/xmlrpc.php

[+] WordPress version 3.2.1 (Released on 2011-07-12) identified from advanced fingerprinting, meta generator, rss generator, rdf generator, atom generator, links opml
[!] 19 vulnerabilities identified from the version number

¡Bueno! Ya tenéis una herramienta más con la que pasar el tiempo probando cositas y haciendo auditorías de seguridad para WordPress. Ya sabéis auditar WordPress con WPScan en OSX.

Si tenéis dudas con la instalación hacédmelo saber y si sé os echaré una mano.

Seguridad en WordPress.

WordPress es el gestor de contenidos más usado en Internet, ya cerca del 27.1% de Internet usa WordPress para sus páginas web.

Esto es beneficioso por un lado ya que la comunidad crece y crece y más atención y mejoras le pueden dedicar a este CMS, pero por otro lado, como sucede en la mayoría de los casos en Internet… cuando un elemento es usado masivamente todos los ataques se ciernen sobre el.

WordPress tiene la fama de inseguro, por lo que la seguridad en WordPress cobra especial relevancia, y es que a lo largo de su historia ha tenido importantes agujeros de seguridad, no obstante hoy en día está todo bastante asegurado pero nunca viene mal incorporar una capa de seguridad propia.

En esta entrada vamos a hablar del Firewall 6G de Perishable Press.

¿Qué es un Firewall?

El concepto de Firewall o Cortafuegos es muy simple y se puede aplicar en cualquier entorno cuando hablamos de seguridad, incluida la seguridad en WordPress. Un cortafuegos son una serie de reglas que impiden el acceso ya sea a una web, a un ordenador o a cualquier otro elemento.

La descripción de firewall es bastante gráfica pues basta con imaginarse un cortafuegos en el monte. Impide que se propaguen problemas de seguridad.

Existen muchos tipos de cortafuegos pero en este caso vamos a hablar de los cortafuegos implementado en los ficheros de configuración de Apache.

Apache y el fichero .htaccess

Apache es un servidor HTTP, es uno de los mayoritarios en el mundo de Internet aunque nos podemos encontrar otros como NGINX o IIS. Este servidor se encarga de recibir, procesar y servir las peticiones HTTP.

Cuando escribimos una URL en la barra de direcciones y pulsamos Enter se realiza una solicitud HTTP al servidor con una serie de cabeceras, el servidor las interpreta y las devuelve al navegador, de esto se encarga Apache.

Dado que Apache se encarga de recibir y procesar las peticiones HTTP también puede filtrarlas y decidir si decide procesarlas o no.

Esto es básicamente lo que hace el Firewall 6G de Perishable Press: nos indica una serie de reglas a incluir en el fichero .htaccess para bloquear ciertas peticiones al servidor que se han visto pueden ser dañinas o el inicio de un ataque web o simplemente el proceso de una investigación para atacarnos.

El fichero .htaccess permite modificar la configuración de Apache a nivel de directorio y normalmente siempre nos encontramos este fichero en la raíz de nuestro sitio web aunque hay que saber que también puede haber uno por cada directorio que se quiera o necesite.

Módulos de Apache

Las reglas de este firewall usan algunos módulos de Apache que son bastante conocidos:

mod_rewrite: Este módulo permite reescribir URLs “al vuelo” de forma que cuando se recibe una petición Apache puede reescribir la URL que se ha pedido. Este módulo usa la potencia de las expresiones regulares para poder buscar patrones para reescribirlos.

mod_setenvif: Cuando este módulo está activo permite establecer variables de entorno cuando se cumple alguna condición que también puede ser buscada usando expresiones regulares.

mod_authz_core: Permite establecer autorizaciones de acceso a diferentes partes de la web.

Reglas del firewall 6G para la Seguridad en WordPress

Este firewall contempla las siguientes reglas:

• Query Strings: Bloquea todas las peticiones con query strings concretas, por ejemplo cuando se intenta acceder a alguna variable, por ejemplo este caso bloquea timthumb y otras reglas más.
• Modos de peticiones: POST y GET son modos de peticiones, esta regla lo que hace es bloquear todos los demás.
• Referencias: Bloquea referencias de los hosts que se indican.
• Request Strings: Es similar a Query String pero se mira toda la URL.
• Agentes de usuario: El User-Agent indica cual es el usuario que se está conectando a la web, los bots de internet tienen los suyos propios, así como los navegadores, etc…
• Bloqueo de IPs: Limita el acceso a diferentes modos de petición de la web a algunas IPs en concreto.

# @ https://perishablepress.com/6g/

# 6G:[QUERY STRINGS]
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{QUERY_STRING} (eval\() [NC,OR]
  RewriteCond %{QUERY_STRING} (127\.0\.0\.1) [NC,OR]
  RewriteCond %{QUERY_STRING} ([a-z0-9]{2000}) [NC,OR]
  RewriteCond %{QUERY_STRING} (javascript:)(.*)(;) [NC,OR]
  RewriteCond %{QUERY_STRING} (base64_encode)(.*)(\() [NC,OR]
  RewriteCond %{QUERY_STRING} (GLOBALS|REQUEST)(=|\[|%) [NC,OR]
  RewriteCond %{QUERY_STRING} (<|%3C)(.*)script(.*)(>|%3) [NC,OR]
  RewriteCond %{QUERY_STRING} (\\|\.\.\.|\.\./|~|`|<|>|\|) [NC,OR]
  RewriteCond %{QUERY_STRING} (boot\.ini|etc/passwd|self/environ) [NC,OR]
  RewriteCond %{QUERY_STRING} (thumbs?(_editor|open)?|tim(thumb)?)\.php [NC,OR]
  RewriteCond %{QUERY_STRING} (\'|\")(.*)(drop|insert|md5|select|union) [NC]
  RewriteRule .* - [F]
</IfModule>

# 6G:[REQUEST METHOD]
<IfModule mod_rewrite.c>
  RewriteCond %{REQUEST_METHOD} ^(connect|debug|delete|move|put|trace|track) [NC]
  RewriteRule .* - [F]
</IfModule>

# 6G:[REFERRERS]
<IfModule mod_rewrite.c>
  RewriteCond %{HTTP_REFERER} ([a-z0-9]{2000}) [NC,OR]
  RewriteCond %{HTTP_REFERER} (semalt.com|todaperfeita) [NC]
  RewriteRule .* - [F]
</IfModule>

# 6G:[REQUEST STRINGS]
<IfModule mod_alias.c>
  RedirectMatch 403 (?i)([a-z0-9]{2000})
  RedirectMatch 403 (?i)(https?|ftp|php):/
  RedirectMatch 403 (?i)(base64_encode)(.*)(\()
  RedirectMatch 403 (?i)(=\\\'|=\\%27|/\\\'/?)\.
  RedirectMatch 403 (?i)/(\$(\&)?|\*|\"|\.|,|&|&amp;?)/?$
  RedirectMatch 403 (?i)(\{0\}|\(/\(|\.\.\.|\+\+\+|\\\"\\\")
  RedirectMatch 403 (?i)(~|`|<|>|:|;|,|%|\\|\s|\{|\}|\[|\]|\|)
  RedirectMatch 403 (?i)/(=|\$&|_mm|cgi-|etc/passwd|muieblack)
  RedirectMatch 403 (?i)(&pws=0|_vti_|\(null\)|\{\$itemURL\}|echo(.*)kae|etc/passwd|eval\(|self/environ)
  RedirectMatch 403 (?i)\.(aspx?|bash|bak?|cfg|cgi|dll|exe|git|hg|ini|jsp|log|mdb|out|sql|svn|swp|tar|rar|rdf)$
  RedirectMatch 403 (?i)/(^$|(wp-)?config|mobiquo|phpinfo|shell|sqlpatch|thumb|thumb_editor|thumbopen|timthumb|webshell)\.php
</IfModule>

# 6G:[USER AGENTS]
<IfModule mod_setenvif.c>
  SetEnvIfNoCase User-Agent ([a-z0-9]{2000}) bad_bot
  SetEnvIfNoCase User-Agent (archive.org|binlar|casper|checkpriv|choppy|clshttp|cmsworld|diavol|dotbot|extract|feedfinder|flicky|g00g1e|harvest|heritrix|httrack|kmccrew|loader|miner|nikto|nutch|planetwork|postrank|purebot|pycurl|python|seekerspider|siclab|skygrid|sqlmap|sucker|turnit|vikspider|winhttp|xxxyy|youda|zmeu|zune) bad_bot
  
  # Apache < 2.3
  <IfModule !mod_authz_core.c>
    Order Allow,Deny
    Allow from all
    Deny from env=bad_bot
  </IfModule>

  # Apache >= 2.3
  <IfModule mod_authz_core.c>
    <RequireAll>
      Require all Granted
      Require not env bad_bot
    </RequireAll>
  </IfModule>
</IfModule>

# 6G:[BAD IPS]
<Limit GET HEAD OPTIONS POST PUT>
  Order Allow,Deny
  Allow from All
  # uncomment/edit/repeat next line to block IPs
  # Deny from 123.456.789
</Limit>

Estas reglas deben ser actualizadas frecuentemente, yo recomendaría una vez al mes tras ver Analytics, ver si tenemos Spam por Referrals o si están intentando hacer algo raro, también usaria alguna herramienta como Apache Log Viewer para analizar el trasiego de información que nos puede ofrecer el servidor para detectar intentos de peticiones fraudulentos.

Ya sabéis que tenéis toda la información en la web oficial del Firewall 6G y que quedo a vuestra disposición para cualquier duda que tengáis y recordad, la seguridad en WordPress es esencial… bueno, igual que en cualquier proyecto web.

Desde 2014 Google premia a los sitios bajo protocolo SSL, es decir, aquellas webs que todas sus peticiones se realizan mediante HTTPS, esto no quiere decir que penalice a las que no lo tienen pero teniéndolo contentamos a Google en uno más de sus factores para el posicionamiento.

Además que toda nuestra web esté bajo HTTPS da confianza a los usuarios, cada vez más estos están informados de lo que quiere decir que sus datos estén cifrados; huelga decir la confianza que da en los procesos de compra de los comercios electrónicos.

Let’s Encrypt. SSL Gratuito

A partir del 12 de Abril de este mismo año 2016 Let’s Encrypt dejo de ser Beta para convertirse en una nueva autoridad certificadora que tiene detrás a sponsors tan grandes e importantes como Cisco, Mozilla, Siteground, Facebook y Sucuri entre otros muchos importantes. Su intención es que el 100% de la web sea segura y nos ofrece una alternativa gratis para que así sea.

Let’s Encrypt está ofrecido por el Internet Security Research Group (ISRG) cuya misión principal es la de reducir las barreras tecnológicas, monetarias y de educación para hacer las comunicaciones en Internet más seguras.

Los seis principios de Let’s Encrypt son los siguientes:

• Gratuito: Cualquier persona con un dominio puede asignarle Let’s Encrypt.
• Automático: Si Let’s Encrypt está instalado en un proveedor de hosting o servidor este puede comunicarse con ellos para automatizar su renovación.
• Seguro: Funciona con las mejores prácticas de seguridad y asesora a los proveedores de hosting para mejorar su seguridad.
• Transparente: Los certificados revocados están a disposición del público para que los investiguen.
• Abierto: El protocolo de renovación se publica como un estándar para que los demás puedan usarlo.
• Colaborativo: Esta promovido por un conjunto de grandes empresas y desarrollado por un equipo, es un beneficio para la comunidad desarrollado por la comunidad.

¿Cómo funciona? ¿Cómo activarlo?

Vamos a verlo con un ejemplo, por ejemplo esté dominio (juanignacioalberola.com) con mi Hosting (Host-Fusion).

En este caso mi proveedor de hosting usa un CPanel como panel de gestión del alojamiento, Let’s Encrypt se encuentra bajo el apartado de Seguridad.

Cuando pulsamos sobre Let’s Encrypt se nos abre una nueva página donde podemos ver los certificados instalados, los días que le quedan y la posibilidad de instalar un nuevo certificado en un dominio.

En mi caso ya lo tengo instalado en mi dominio pero vamos a instalarlo en un subdominio que tengo para enseñaros cómo.

Solo tenemos que hacer clic en Install letsencrypt SSL Cert y elegir el dominio sobre el que lo queremos instalar. El proceso será automático y se instalará en cuestión de un breve minuto.

Así ya podemos acceder a nuestro sitio web a través del protocolo HTTPS y podemos ver el “flamante” candado sobre el cual podemos ver la información de nuestro certificado instalado.

¿Solamente con esto voy a mejorar el SEO?

¡No! Lleva mucho cuidado porque ahora mismo, con el certificado instalado tu sitio web es accesible tanto por HTTP como por HTTPS lo que para Google es contenido duplicado y es penalizado.

Lo primero que tenemos que hacer es en nuestro fichero htaccess de nuestro hosting o servidor apache forzar que cualquier petición por el puerto 80 se redirija a HTTPS.

Esto se debe poner antes de las reglas de reescritura que introduce WordPress en este fichero.

<IfModule mod_rewrite.c>
RewriteEngine On 
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://www.juanignacioalberola.com/$1 [R,L]
</IfModule>

Con esto cualquier petición HTTP se va a redirigir a HTTPS. Pero lleva cuidado, con esto habrás hecho una redirección 302 que para Google es una redirección temporal, lo que quiere decir es que en algún momento volverás a la anterior URL sin HTTPS pero toda la fuerza de la anterior URL no se le pasa a la nueva. Debemos hacer una redirección permanente 301.

<IfModule mod_rewrite.c>
RewriteEngine On 
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://www.juanignacioalberola.com/$1 [R=301,L]
</IfModule>

Con esto transmitiremos toda la anterior autoridad a la nueva URL.

Además acuérdate de cambiar el dominio en Ajustes -> General dentro de WordPress por HTTPS.

¿Y a Google le tengo que decir algo?

Por supuesto, tienes que crear una nueva propiedad en Search Console.

Esto es lo que nos encontraremos en Search Console si no creamos una nueva propiedad con HTTPS.

Y es que Google cuando empieza a indexar las páginas con HTTPS en lugar de las de HTTP por lo que perdemos datos de clics y CTR.

Debemos pues crear una nueva propiedad en Search Console y verificarla. Tras esto recomiendo subir de nuevo el sitemap.xml.

En Google Analytics debemos indicar también que la propiedad ha cambiado de protocolo.

Y con “toooooodo” esto ya tendríamos nuestro WordPress con Let’s Encrypt en nuestro Hosting y optimizado para el posicionamiento orgánico en Google.

¿Habéis comprobado vosotros un aumento de posicionamiento con el protocolo HTTPS?

NOTA: Si en vuestra plantilla en algún widget o en algún lugar tenéis una URL absoluta con HTTP acordaros de cambiarla a HTTPS.

Hoy os traigo un how-to bastante interesante, eso sí, es un poco avanzado ya que vamos a hacer algo de programación. Vamos a añadir iconos a los tags que tenemos en WordPress y vamos a modificar su visualización para que en el lugar donde aparezcan los tags se vean con el icono delante.

Para ello vamos a hacer uso de la fuente Dashicons que viene incluida en WordPress para asignar iconos a las etiquetas.

Recordad que todo el código en WordPress para modificar sus funcionalidades debe ir en el fichero functions.php o en archivos llamados desde el mismo.

Los pasos que vamos a seguir son los siguientes:

1. Añadir el campo de selección de icono en la pantalla de añadir etiqueta.
2. Añadir el campo de selección de icono en la pantalla de edición de etiqueta.
3. Modificar la función de guardado de la etiqueta.
4. Mostrar los iconos en el listado de etiquetas del panel de administración.
5. Mostrar los iconos en el listado de etiquetas de la parte pública de la web.

Empecemos… por el principio.

Desde la versión 4.4 de WordPress podemos añadir campos adicionales a las taxonomias, para ello tenemos que usar una acción que nos va a permitir modificar tanto la pantalla de nueva etiqueta como la de la edición.

Antes de nada quiero incluir un array que lo voy a usar para mostrar el listado de Dashicons en el campo de selección.

// A este array lo llamaremos cuando mostremos el selector de iconos
$iconos = array(
      'menu',
      'admin-site',
      'dashboard',
      'admin-media',
      'admin-page',
      'admin-comments',
      'admin-appearance',
      'admin-plugins',
      'admin-users',
      'admin-tools',
      'admin-settings',
      'admin-network',
      'admin-generic',
      'admin-home',
      'admin-collapse',
      'filter',
      'admin-customizer',
      'admin-multisite',
      'admin-links',
      'format-links',
      'admin-post',
      'format-standard',
      'format-image',
      'format-gallery',
      'format-audio',
      'format-video',
      'format-chat',
      'format-status',
      'format-aside',
      'format-quote',
      'welcome-write-blog',
      'welcome-edit-page',
      'welcome-add-page',
      'welcome-view-site',
      'welcome-widgets-menus',
      'welcome-comments',
      'welcome-learn-more',
      'image-crop',
      'image-rotate',
      'image-rotate-left',
      'image-rotate-right',
      'image-flip-vertical',
      'image-flip-horizontal',
      'image-filter',
      'undo',
      'redo',
      'editor-bold',
      'editor-italic',
      'editor-ul',
      'editor-ol',
      'editor-quote',
      'editor-alignleft',
      'editor-aligncenter',
      'editor-alignright',
      'editor-insertmore',
      'editor-spellcheck',
      'editor-distractionfree',
      'editor-expand',
      'editor-contract',
      'editor-kitchensink',
      'editor-underline',
      'editor-justify',
      'editor-textcolor',
      'editor-paste-word',
      'editor-paste-text',
      'editor-removeformatting',
      'editor-video',
      'editor-customchar',
      'editor-outdent',
      'editor-indent',
      'editor-help',
      'editor-strikethrough',
      'editor-unlink',
      'editor-rtl',
      'editor-break',
      'editor-code',
      'editor-paragraph',
      'editor-table',
      'align-left',
      'align-right',
      'align-center',
      'align-none',
      'lock',
      'unlock',
      'calendar',
      'calendar-alt',
      'visibility',
      'hidden',
      'post-status',
      'edit',
      'post-trash',
      'trash',
      'sticky',
      'external',
      'arrow-up',
      'arrow-down',
      'arrow-left',
      'arrow-right',
      'arrow-up-alt',
      'arrow-down-alt',
      'arrow-left-alt',
      'arrow-right-alt',
      'arrow-up-alt2',
      'arrow-down-alt2',
      'arrow-left-alt2',
      'arrow-right-alt2',
      'leftright',
      'sort',
      'randomize',
      'list-view',
      'excerpt-view',
      'grid-view',
      'hammer',
      'art',
      'migrate',
      'performance',
      'universal-access',
      'universal-access-alt',
      'tickets',
      'nametag',
      'clipboard',
      'heart',
      'megaphone',
      'schedule',
      'wordpress',
      'wordpress-alt',
      'pressthis',
      'update',
      'screenoptions',
      'cart',
      'feedback',
      'cloud',
      'translation',
      'tag',
      'category',
      'archive',
      'tagcloud',
      'text',
      'media-archive',
      'media-audio',
      'media-code',
      'media-default',
      'media-document',
      'media-interactive',
      'media-spreadsheet',
      'media-text',
      'media-video',
      'playlist-audio',
      'playlist-video',
      'controls-play',
      'controls-pause',
      'controls-forward',
      'controls-skipforward',
      'controls-back',
      'controls-skipback',
      'controls-repeat',
      'controls-volumeon',
      'controls-volumeoff',
      'yes',
      'no',
      'no-alt',
      'plus',
      'plus-alt',
      'plus-alt2',
      'minus',
      'dismiss',
      'marker',
      'star-filled',
      'star-half',
      'star-empty',
      'flag',
      'info',
      'warning',
      'share',
      'share1',
      'share-alt',
      'share-alt2',
      'twitter',
      'rss',
      'email',
      'email-alt',
      'facebook',
      'facebook-alt',
      'networking',
      'googleplus',
      'location',
      'location-alt',
      'camera',
      'images-alt',
      'images-alt2',
      'video-alt',
      'video-alt2',
      'video-alt3',
      'vault',
      'shield',
      'shield-alt',
      'sos',
      'search',
      'slides',
      'analytics',
      'chart-pie',
      'chart-bar',
      'chart-line',
      'chart-area',
      'groups',
      'businessman',
      'id',
      'id-alt',
      'products',
      'awards',
      'forms',
      'testimonial',
      'portfolio',
      'book',
      'book-alt',
      'download',
      'upload',
      'backup',
      'clock',
      'lightbulb',
      'microphone',
      'desktop',
      'tablet',
      'smartphone',
      'phone',
      'smiley',
      'index-card',
      'carrot',
      'building',
      'store',
      'album',
      'palmtree',
      'tickets-alt',
      'money',
      'thumbs-up',
      'thumbs-down',
      'layout');

Usaremos primeramente el gancho post_tag_add_form_fields que nos permite añadir campos extras a la pantalla de creación de nueva taxonomía.

function jiac_icon_field() {  
  $iconos = /* El array que he declarado anteriormente */
  ?>
  <div class="form-field">
    <label for="jiac_term_meta[tag_icon]">Icono:</label>		
    <select name="jiac_term_meta[tag_icon]" id="jiac_term_meta[tag_icon]">
    <?php
    foreach ($iconos as $i) {
      echo "<option value='dashicons-$i'>$i</option>";
    }		
    ?>
    </select>
    <p class="description">Elige el icono de la lista</p>
  </div>
<?php
}
add_action( 'post_tag_add_form_fields', 'jiac_icon_field', 10, 2 );

El resultado de esta acción la podemos ver a continuación.

Pero atención… si creamos una nueva etiqueta y la guardamos no se guardará este nuevo campo pues también tenemos que añadir la funcionalidad de que guarde esta nueva opción.

function guarda_meta_tag( $term_id ) {
  if ( isset( $_POST['jiac_term_meta'] ) ) { // Si el formulario pasa jiac_term_merta
    $t_id = $term_id;
    $term_meta = get_option( "datos_tag_$t_id" ); // Obtenemos los datos existentes
    $cat_keys = array_keys( $_POST['jiac_term_meta'] ); // Separamos en un array las diferentes keys, ahora solo existe tag_icon
    foreach ( $cat_keys as $key ) { // Para cada meta dato
      if ( isset ( $_POST['jiac_term_meta'][$key] ) ) { // Vemos si lo hemos pasado por el formulario
        $term_meta[$key] = $_POST['jiac_term_meta'][$key]; // Si es asi lo metemos en un array de metadatos
      }
    }
    // Para guardarlo posteriormente
    update_option( "datos_tag_$t_id", $term_meta );
  }
}  
add_action( 'edited_post_tag', 'guarda_meta_tag', 10, 2 );  
add_action( 'create_post_tag', 'guarda_meta_tag', 10, 2 );

Con esto ya tenemos en la base de datos de WordPress un array de opciones personalizada asociado al id de la etiqueta, para verlo tenemos que añadir una función más asociada con la pantalla de edición de la taxonomía.

function jiac_icon_field_edit_screen($term) {
 
  $iconos = /* Mismo array que anteriormente, lo mejor es meterlo en una variable de configuracion global */
  
  $t_id = $term->term_id;
  
  $term_meta = get_option( "datos_tag_$t_id" ); echo esc_attr( $term_meta['tag_icon'] );?>
  <tr class="form-field">
  <th scope="row" valign="top"><label for="jiac_term_meta[tag_icon]">Icono:</label></th>
    <td>
      <select name="jiac_term_meta[tag_icon]" id="jiac_term_meta[tag_icon]">
      <?php
      foreach ($iconos as $i) {
        $seleccionado = (esc_attr( $term_meta['tag_icon']) == "dashicons-$i")? 'selected="selected"' : '';
        echo "<option value='dashicons-$i' $seleccionado>$i</option>";
      }		
      ?>
      </select>
      
      <p class="description">Edita el icono</p>
    </td>
  </tr>
<?php
}
add_action( 'post_tag_edit_form_fields', 'jiac_icon_field_edit_screen', 10, 2 );

La cosa avanza, ahora mismo ya tenemos:

• El formulario de creación.
• El guardado del nuevo campo en los formularios de edición y creación.
• El formulario de edición.

Bueno, bueno, bueno, ahora debemos ‘simplemente’ hacer que se muestren estos iconos públicamente.

Tenemos que cargar los estilos de Dashicons en la parte pública de nuestro theme de la siguiente manera:

add_action( 'wp_enqueue_scripts', 'jiac_dashicons' );
function jiac_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

Y filtrar los enlaces de los tags cuando se muestra en WordPress haciendo uso del siguiente filtro:

function icons_to_tags( $term_links ) {

  $nuevos_links = array();
  
  $terms = get_terms("post_tag");
  
  foreach ($terms as $term) {
  
    $link = get_term_link($term);
    
    foreach ( $term_links as $term_link ) {
    
      if (strpos($term_link, $link) !== FALSE) {
      
        $t_id = $term->term_id;
        $term_meta = get_option( "datos_tag_$t_id" );
        $icono = "dashicons " . esc_attr( $term_meta['tag_icon'] );
        $nuevos_links[] = "<span class='$icono'></span>" . $term_link;
      
      } 
    	}
  }
  
  return $nuevos_links;
}
add_filter( 'term_links-post_tag', 'icons_to_tags' );

Como resultado tendremos…

Desde el 1 de Agosto de 2013 con la versión 3.6 a WordPress se le incorporó un corazón, se conoce como la HeartBeat API, o al menos un sistema que de “latidos” que mandan sangre o información a todos aquellos sitios de WordPress donde se requiere… y tras esta introducción tan médica, empezaré a explicarme un poco más.

La documentación del Codex es bastante pobre al respecto así que para encontrar algo más detallado hay que buscar en las tripas del código del gestor de contenidos, así tenemos la API en el fichero heartbeat.js dentro de wp-includes.

Esta API en su cabecera nos indica lo siguiente:

/**
 * Heartbeat API
 *
 * Heartbeat is a simple server polling API that sends XHR requests to
 * the server every 15 - 60 seconds and triggers events (or callbacks) upon
 * receiving data. Currently these 'ticks' handle transports for post locking,
 * login-expiration warnings, autosave, and related tasks while a user is logged in.
 *
 * Available PHP filters (in ajax-actions.php):
 * - heartbeat_received
 * - heartbeat_send
 * - heartbeat_tick
 * - heartbeat_nopriv_received
 * - heartbeat_nopriv_send
 * - heartbeat_nopriv_tick
 * @see wp_ajax_nopriv_heartbeat(), wp_ajax_heartbeat()
 *
 * Custom jQuery events:
 * - heartbeat-send
 * - heartbeat-tick
 * - heartbeat-error
 * - heartbeat-connection-lost
 * - heartbeat-connection-restored
 * - heartbeat-nonces-expired
 *
 * @since 3.6.0
 */

Para que nos entendamos:

Heartbeat es una API que envía peticiones XMLHttpRequest al servidor cada 15 – 60 segundos y lanza eventos con datos recibidos. Actualmente se gestiona el post locking, los avisos de expiración de sesion, autoguardados y tareas relacionadas cuando el usuario está logeado.

Con esto vemos que es el JavaScript junto con una serie de filtros ubicados en ajax-actions.php los encargados de gestionar esos mensajes que vemos en el Escritorio de WordPress cuando alguien está editando un post y nos indica quién, o la ejecución de cuando nuestras entradas se guardan automáticamente.

Algunos plugins también lo utilizan en la parte pública de la web, por ejemplo algunos plugins de distribución de contenido en redes sociales para obtener la cantidad de veces que ha sido una entrada compartida. Este caso en concreto me dio dolores de cabeza y luego explicaré por qué.

Un ejemplo de WordPress Heartbeat API

Os invito a mirar esta entrada en la que hablé del Customizer de WordPress y Genesis, usando HeartBeat API de WordPress vamos a mostrar en tiempo real los cambios en las coordenadas de la empresa en la consola de JavaScript de Chrome.

El proceso va a constar básicamente de 3 pasos:

1. Código del lado del servidor donde mandamos al lado del navegador la información.
2. Código del lado del navegador que se encarga de modificar con JavaScript el contenido.
3. Enlace de ambos.

En el primer paso en functions.php debemos crear el filtro adecuado y asociarlo a una función.

function jiac_datos_recibidos( $response, $data ) {
  
  // Vemos cual es la petición desd el navegador
  if ( 'dime_las_coordenadas' == $data['client'] ) {
  
    $coordenadas = array($get_option('latitud-empresa'),$get_option('longitud-empresa'));
    $response['server'] = $coordenadas;
  
  }
  return $response;
}

add_filter( 'heartbeat_received', 'jiac_datos_recibidos', 10, 2 );
add_filter( 'heartbeat_nopriv_received', 'jiac_datos_recibidos', 10, 2 );

Debemos crear ahora el fichero JavaScript y encolarlo en la parte pública de la web, lo he llamado cambia-coordenadas.js.

jQuery(document).ready(function() { 

  jQuery(document).on('heartbeat-send', function(e,data) { 
    data['client'] = 'dime_las_coordenadas';
  });
  
  jQuery(document).on('heartbeat-tick', function(e,data) { 
    console.log(data['server']);
  });
});

add_action('wp_enqueue_scripts', 'jiac_scripts');
function jiac_scripts() {
  wp_enqueue_script('heartbeat');
  wp_enqueue_script('dime-coordenadas', get_stylesheet_directory_uri() . '/cambia-coordenadas.js', array('heartbeat', 'jquery'), '1.0.0');
}
  
  
  
function jiac_datos_recibidos( $response, $data ) {
  
  // Vemos cual es la petición desd el navegador
  if ( 'dime_las_coordenadas' == $data['client'] ) {
  
    $coordenadas = array(get_option('latitud-empresa'),get_option('longitud-empresa'));
    $response['server'] = $coordenadas;
  
  }
  return $response;
}

Si vemos la consola de la herramienta para desarrolladores de Chrome vemos como cada minuto se han ido mostrando las coordenadas.

Pero cuando las cambiamos desde el Customizer de WordPress y esperamos hasta el siguiente tick es cuando sucede la magia.

Pensad en las utilidades de este tipo acciones, podemos mostrar en tiempo real la disponibilidad en un sistema de reservas o podemos intercambiar entre la visualización de un video o una imagen en tiempo real, también se me ocurre en que podemos mostrar la cantidad de visitantes que están en un momento determinado en una URL de nuestra web de forma que podamos generar estrés para la venta.

Si bien es una cosa de la que no debemos abusar y ahora explicaré por qué.

Controlando o desactivando HeartBeat API de WordPress

Como bien decía es una herramienta de la que no debemos abusar porque hace uso de admin-ajax.php y una petición constante a este archivo hace que la CPU de nuestro servidor se dispare, imaginaos un sitio web con hasta 50 visitas concurrentes cada una haciendo peticiones ajax cada 15 segundos, podemos sobrecargar el servidor facilmente.

Sin ir más lejos fue algo que tuve que solucionar en un WordPress que iba extremadamente lento, al final di con la solución con este plugin:

HeartBeat Control

Nos permite desactivar la API en determinados lugares o en cualquiera y también regular el tiempo entre peticiones desde 15 hasta 60 segundos. Con esto seguro que si hay problemas de saturación del servidor por este motivo conseguís, si no solucionarlo, si reducir bastante el problema.

¿Y a vosotros, donde se os ocurre que se puede utilizar?

Una de las primeras cosas que tenemos de los clientes es su logo, que muchas veces los diseñadores lo utilizan para definir la personalidad y diseño de todo el sitio, dejando a parte elementos de conversión que serían tema de otra entrada.

En mi día a día trabajando con Genesis Framework la primera cosa que tengo en cuenta tras programar la configuración del tema es la opción de incorporar el logo personalizado en Genesis Framework.

Logo personalizado en Genesis Framework

A WordPress a través de sus funciones internas se le puede indicar que soporte cabeceras personalizadas, esta es la primera acción que tenemos que hacer para tener un logo personalizado en Genesis Framework. Esto se debe hacer en una función asociada a la acción after_setup_theme que se ejecuta en la carga de cada página después de inicializar el tema.

La función de CallBack asociada a esta acción debe incluir todos los elementos de configuración del tema, entre ellos las funcionalidades que va a soportar la plantilla.

WordPress tiene una función en su Core que a la que se la llama con add_theme_support y puede recibir diferentes opciones.

• post-formats
• post-thumbnails
• custom-background
• custom-header
• automatic-feed-links
• html5
• title-tag

En este caso a nosotros nos interesa el soporte para custom-header que nos habilitará la opción de personalizar la cabecera.

El segundo parámetro de la función add_theme_support es una array de opciones. WordPress por defecto para custom-header soporta los siguientes atributos que no voy a entrar a detallarlos puesto que podéis verlos en el Codex.

$defaults = array(
  'default-image'          => '',
  'width'                  => 0,
  'height'                 => 0,
  'flex-height'            => false,
  'flex-width'             => false,
  'uploads'                => true,
  'random-default'         => false,
  'header-text'            => true,
  'default-text-color'     => '',
  'wp-head-callback'       => '',
  'admin-head-callback'    => '',
  'admin-preview-callback' => '',
);

En Genesis Framework además a estos parámetros le podemos pasar alguno más como header-selector que dice la clase contenedora del logo, o en este caso lo que es lo mismo, el elemento cuyo fondo sea la imagen del logo.

Para subir un logo personalizado tendremos que indicar la altura y la anchura con los parámetros height y width así como indicar que no queremos que no se muestre texto con header-text asociándolo a un valor false.

add_theme_support( 'custom-header', array(
  'header-selector' => '.site-title a',
  'header-text'     => true,
  'height'          => 80,
  'width'           => 320,
) );

Con el código anterior vamos a subir un logo personalizado que mida 320 x 80 pixeles. Si la imagen que subimos mide más podremos recortarla en el mismo lugar que seleccionamos la imagen.

Hay que tener en cuenta que para que se vea correctamente tenemos que modificar en la hoja de estilos el selector .header-image .site-title > a para que sin min-height y si width coincidan con lo indicado en los parámetros de add_theme_support.

Dentro de Genesis Framework nos podemos encontrar con la función que gestiona toda la parte de cabeceras personalizadas en el archivo lib/structure/header.php.

/**
 * Custom header callback.
 *
 * It outputs special CSS to the document head, modifying the look of the header based on user input.
 *
 * @since 1.6.0
 *
 * @uses genesis_html() Check for HTML5 support.
 *
 * @return null Return null on if custom header not supported, user specified own callback, or no options set.
 */
function genesis_custom_header_style() {

  //* Do nothing if custom header not supported
  if ( ! current_theme_supports( 'custom-header' ) )
    return;

  //* Do nothing if user specifies their own callback
  if ( get_theme_support( 'custom-header', 'wp-head-callback' ) )
    return;

  $output = '';

  $header_image = get_header_image();
  $text_color   = get_header_textcolor();

  //* If no options set, don't waste the output. Do nothing.
  if ( empty( $header_image ) && ! display_header_text() && $text_color === get_theme_support( 'custom-header', 'default-text-color' ) )
    return;

  $header_selector = get_theme_support( 'custom-header', 'header-selector' );
  $title_selector  = genesis_html5() ? '.custom-header .site-title'       : '.custom-header #title';
  $desc_selector   = genesis_html5() ? '.custom-header .site-description' : '.custom-header #description';

  //* Header selector fallback
  if ( ! $header_selector )
    $header_selector = genesis_html5() ? '.custom-header .site-header' : '.custom-header #header';

  //* Header image CSS, if exists
  if ( $header_image )
    $output .= sprintf( '%s { background: url(%s) no-repeat !important; }', $header_selector, esc_url( $header_image ) );

  //* Header text color CSS, if showing text
  if ( display_header_text() && $text_color !== get_theme_support( 'custom-header', 'default-text-color' ) )
    $output .= sprintf( '%2$s a, %2$s a:hover, %3$s { color: #%1$s !important; }', esc_html( $text_color ), esc_html( $title_selector ), esc_html( $desc_selector ) );

  if ( $output )
    printf( '<style type="text/css">%s</style>' . "\n", $output );

}

Y ya está! Con esto podemos entrar en el Customizer y seleccionar la imagen de cabecera. Recordad que debe medir lo indicado en los parámetros o se nos pedirá que la recortemos.