Wordpress (Continuación)

Tras actualizar a WP 5.x y comenzar a probar el nuevo editor Gutenberg, me he encontrado con que el bloque central no ocupa todo el espacio disponible, tal y como podéis ver en la imagen:

Gutenberg anchura bloques

Para adecuar el ancho del bloque al espacio existente tenemos que hacer dos cosas:

1. Editamos nuestro plugin de funciones o el archivo functions.php de nuestro tema y añadimos lo siguiente:

//anchura bloque Gutenberg
add_theme_support('editor-styles'); // solo para el caso de que nuestro tema no lo soporte ya
add_editor_style( 'style-editor.css' ); // ruta relativa respecto al directorio del tema

2.- Creamos el archivo style-editor.css dentro de la carpeta del tema que estemos usando y añadimos las siguientes líneas:

/* Anchura bloque stylesheet */
/* Main column width */
.wp-block {
    max-width: 100% !important;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
    max-width: none;
}

Modificar los valores a vuestro gusto.

Y os dejo un enlace que me ha facilitado Roberto Vázquez para que podáis ampliar más la información.

Robots.txt, WordPress y un error muy común

Si utilizamos el buscador para encontrar cómo crear el archivo robots.txt, nos encontraremos con cientos de recomendaciones. La mayoría son correctas pero hay una de ellas muy extendida que provoca efectos no deseados. En muchos manuales se aconseja añadir unas líneas específicas para el bot de Google sin advertir de que esta adición deja sin efecto el resto de reglas generales existentes en dicho archivo. Ese comportamiento es debido al sistema de jerarquías utilizado por Google, tal y como puede verse en el documento Especificaciones de robots.txt.:

Solo hay un grupo de registros de miembro de grupo válido para cada rastreador. El rastreador debe determinar cuál es el grupo de registros correcto buscando el grupo que tenga el agente de usuario más específico con el que exista coincidencia. El rastreador ignorará los demás grupos de registros. El orden de los grupos dentro del archivo robots.txt es irrelevante. Seguir leyendo …

Reglamento de protección de datos (RGPD) y WordPress

Aunque fue hace casi dos años cuando entró en vigor el Reglamento General de Protección de Datos europeo 2016/679 (RGPD), será el próximo 25 de mayo de 2018 cuando comenzará a aplicarse. Este reglamento concierne a toda persona física o jurídica que sea titular de una Web en la que se recopile cualquier tipo de datos.

La adecuación de nuestros sitios comprende dos puntos (cookies e información sobre el tratamiento de los datos) y una idea que debe quedar clara desde el principio: es condición necesaria la aceptación expresa del visitante.

Discrepo de quienes aconsejan realizar explicaciones prolijas sobre las cuestiones que se tratan. Creo más bien que es necesario ser conciso y concreto. Como es obvio, no es lo mismo una Web que sólo recoge la dirección de correo en los comentarios que una tienda online. Seguir leyendo …

Hace cinco años ya hablábamos de cómo mostrar el excerpt (resumen) de forma automática y en esa ocasión recomendábamos el plugin Advanced Excerpt para mostrar algo más que texto plano en el resumen de nuestras entradas.

Desde entonces el autor del plugin ha ido actualizando hasta llegar a la versión actual (4.2.3) pero en el camino se olvidó de mantener la funcionalidad de la opción «Remove shortcodes from the excerpt. (recommended)».

¿Y cuál es el problema? Por lo pronto, digamos que es conveniente eliminar los shortcodes del resumen pero no podemos hacerlo debido a dicho error en el plugin.

En segundo lugar, puede ocurrir que en el resumen aparezca texto que no deseemos que lo haga. Por ejemplo, la leyenda (caption) de una imagen. Y eso es lo que sucede cuando la imagen está colocada en la parte superior de la entrada. En concreto, aparecerá siempre y cuando ese texto se encuentre dentro del rango de palabras que hayamos marcado en el plugin para mostrar en el resumen.

Cuando insertamos una imagen con leyenda es como si utilizáramos un shortcode ya que el código comienza con un corchete. La imagen propiamente dicha no aparece porque su etiqueta es <img> y ésta sí la neutraliza el plugin. Sin embargo, la leyenda se mantiene entre corchetes por lo que sí se muestra en el resumen.

Veamos dos imágenes para ilustrar el problema:

Advanced excerpt. Imagen en la parte superior de una entrada
Imagen en la parte superior de una entrada
Advanced excerpt. Resumen en el index. Se aprecia el error (la leyenda no debería salir)
Resumen en el index. Se aprecia el error (la leyenda no debería salir)

¿Cómo podemos solucionar el problema? Muy fácil:

1 ) Editamos el archivo «advanced-excerpt.php» que se encuentra en la carpeta «class» (no confundir con el archivo del mismo nombre que se encuentra en la raíz del plugin).

2) Buscamos las líneas 242 y 243

$text = get_the_content( '' );
$text = apply_filters( 'the_content', $text );

y las sustituimos por

$text = get_the_content( '' );
if(1 == $no_shortcode)
$text = strip_shortcodes($text);
$text = apply_filters('the_content', $text);

De esta forma, los shortcodes serán eliminados del resumen (y la leyenda dejará de mostrarse) si marcamos la opción «Remove shortcodes from the excerpt. (recommended)».

ACTUALIZACIÓN SEP/2018: la versión 2.4.5 resuelve este problema.

Como ya sabréis, WordPress usa el editor TinyMCE que, a partir de su versión 4.5.0, añade rel="noopener noreferrer" cuando el enlace tiene el atributo target="_blank". El motivo de tal adición es solucionar una vulnerabilidad que se produce cuando abrimos un enlace en una nueva ventana. Fernando lo ha explicado muy bien en ayudawp.com y os invito a leerlo antes de seguir con lo que aquí expongo.

La solución adoptada por WordPress a partir de la versión 4.7.4 presenta, a mi modo de ver, dos inconvenientes:

  1. La adición solo se lleva a cabo en las nuevas entradas a partir de que actualicemos a la mencionada versión. Las entradas antiguas no sufren ninguna modificación salvo que las editemos. Eso significa que la vulnerabilidad seguirá presente en nuestros sitios salvo que editemos todas nuestras antiguas entradas.
  2. La adición se lleva cabo tanto si el atributo «abrir en una nueva ventana» se aplica a un enlace externo como a uno interno. Esta circunstancia puede afectar a cualquier plugin que use el campo «rel». Por ejemplo, los que manejan imágenes.

Para evitar estos inconvenientes, propongo

  1. Desactivar la adición automática.
  2. Interceptar la salida mediante plugin de forma que la adición solo se aplique a los enlaces externos. Como es obvio, los enlaces a entradas de nuestro propio sitio no están afectadas por la vulnerabilidad aunque las abramos en una nueva ventana.

Para ello, haremos lo siguiente: Seguir leyendo …

Además de los servicios clásicos (email, print, google+, facebook, etc), el módulo «Compartir» nos permite añadir nuevos servicios de una forma bastante sencilla. Sin embargo, la última versión de este popular plugin (4.6) trae de regalo un molesto error.  Los servicios nuevos añadidos anteriormente dejarán de funcionar y tampoco podremos añadirlos de nuevo. Ya están trabajando en ello y es muy probable que se solucione en la próxima versión. Mientras tanto, podemos efectuar una reparación temporal. Para ello:

1) Archivo «modules/sharedaddy/admin-sharing.js» y sustituimos

document.location = document.location.href.replace( /&create_new_service=true/i, '' );

por

document.location.reload();

2) Archivo «modules/sharedaddy/sharing-service.php» y sustuimos

$options = array( 'global' => $this->get_global_options() );

por

$global_options = $this->get_global_options();
$options = array_merge( is_array( $options ) ? $options : array(), $global_options );

Entre las opciones de Jetpack, se encuentra la posibilidad de conectar con Google+ y compartir en esta plataforma nuestros artículos de la misma forma que en Facebook o en Twitter. Resulta, no obstante, que se publican como «Compartido solo contigo» lo que significa que sólo tú puedes verlos.

Como a otros tantos, me interesaba modificar ese aspecto para que fueran «públicos» y la verdad es que Google no nos lo pone fácil. En este caso, porque en la versión nueva de Google+ no aparece la opción de «Administrar aplicaciones» (yo al menos no la he encontrado). Tras muchos intentos, hoy he conseguido solucionarlo:

  1. Acceder a https://plus.google.com/u/0/apps
  2. En la columna «Tus aplicaciones» buscas «WordPress» y a la derecha clic en «Modificar». Selecciona la opción que más te interese.

Nota 04/03/2019: El servicio Google+ desaparece por lo que ya no es útil esta información

A partir de la versión 4.3.0 de wordpress muchos usuarios se han encontrado con el siguiente aviso:

"Notice: ¡El llamado método constructor para WP_Widget es obsoleto desde la versión 4.3.0! Utiliza __construct()".
O bien con su versión en inglés:
"Notice: The called constructor method for WP_Widget is deprecated since version 4.3.0! Use __construct()"

El motivo de dicho mensajes es debido a que los «constructores» tendrán a partir de la versión PHP 7 una nuevo estilo (los constructores del estilo antiguo están OBSOLETOS en PHP 7.0, por lo que serán eliminados en una futura versión). ¿Cómo solucionarlo? Lo primero de todo es identificar el plugin o tema responsable y para ellos activaremos el modo depuración en wordpress mediante la siguiente línea en el archivo wp-config. php:

define('WP_DEBUG', true);

Identificado el causante del error, buscaremos una estructura como esta:

class XXX {
    function XXX (){
      .......
      $this->WP_Widget(....)
      .......
    }
}

Lo que tenemos que hacer es sustituir «function XXX()» por «function __construct()» y «$this->WP_Widget» por «parent::__construct»

class XXX {
    function __construct() {
      .......
      parent::__construct(.....)
      .......
    }
}

Cuando usamos «iframe» para inserta un vídeo, centrarlo no es complicado porque basta con utilizar la sintaxis que usamos con cualquier párrafo, es decir

<p style="text-align: center;"><iframe...></iframe</p>

El problema es cuando usamos el reproductor de medios propio de WordPress. No podemos centrarlo ni tampoco alinearlo a la derecha o la izquierda porque su aspecto está definido en una hoja de estilos propia del sistema. En concreto, wp-mediaelement.css (dentro de wp-includes/js/mediaelement/). No obstante hay una solución:
1.- Editamos la hoja de estilos de nuestra tema (normalmente style.css).
2.- Añadimos las siguientes líneas:

NOTA: para el caso de vídeos subidos a nuestro servidor la regla válida es .videocentrado .wp-video, Para vídeos fuera de nuestro servidor (Yotube, vimeo, etc), es de aplicación .videocentrado .embed-wrap.

.videocentrado .wp-video, .videocentrado .embed-wrap {
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
margin-top:20px;
}

3.- Ahora, cuando editemos una entrada e incrustemos un vídeo, debemos hacerlo de la siguiente forma:

<div class="videocentrado">Código del vídeo</div>

La «div» la pondremos manualmente en la pestaña «Texto» del editor de texto.
4.- Para alinear a la izquierda o a la derecha:

.videoizquierda .wp-video, .videoizquierda .embed-wrap {
	margin-bottom:20px;
	margin-top:20px;
	margin-right:20px;
	float:left;
}
.videoderecha .wp-video, .videoderecha .embed-wrap {
	margin-bottom:20px;
	margin-top:20px;
	margin-left:20px;
	float:right;
}

En los dos últimos casos, si insertamos texto dentro de la «div», éste quedará «flotando» a la derecha o izquierda respectivamente.

Mismo sidebar, distinto contenidoHoy vamos a ver cómo se puede variar el contenido de un mismo sidebar según una página u otra. Como veremos, cabe añadir tanto texto como imágenes.

El caso más frecuente es si utilizamos wordpress no como blog sino como CMS para crear un sitio. En este caso, lo normal es usar «páginas» y no entradas, y también es conveniente, en caso de usar imágenes, poder incluir éstas en el sidebar. Pongamos un ejemplo para entendernos:

En el capítulo VI de «Liberalismo y romanticismo en tiempos de Isabel II» observamos que en el sidebar hay unas cuantas imágenes que incluso pueden ampliarse. Si nos vamos al capítulo VIII, nos encontramos con el mismo sidebar pero distintas imágenes. Observemos también que la página está dividida en tres partes (mediante <!–nextpage–>) y que se muestran distintas imágenes en cada una de éstas.

Veamos como hacerlo: Seguir leyendo …