Wordpress

sidebar

Las plantillas nos suelen ofrecer diversas áreas de widgtet que van más allá de la barra lateral (sidebar) propiamente dichas (figura superior izquierda) y que pueden colocarse a la izquierda, derecha o incluso en la parte inferior. Hay ocasiones en que nuestra barra lateral contiene solo uno o dos elementos y nos gustaría que el texto fluyera por debajo de aquélla, tal y como podemos ver en la figura superior (derecha). Aunque puede haber otros motivos, lo importante es ver cómo insertar uno o varios widgets o un área completa de widgets (barra lateral) en una página o entrada utilizando un shortcode.

Para ello vamos a utilizar the widget, add_shortcode, register_widget, register_sidebar, dynamic_sidebar, ob_start y ob_get_clean.

1) Insertar uno o varios widgtes

Si el widgtet no dispone de opciones, el método es sencillo. Añadimos el siguiente código en nuestro plugin de funciones o en el archivo functions.php del tema:

function show_custom_widget( $atts, $content = null ) {
extract(shortcode_atts(array('name' => ''), $atts));
ob_start();
the_widget( $name );
$content = ob_get_clean();
return $content;
}
add_shortcode( 'widget-fluido', 'show_custom_widget' );

Después, en nuestra entrada o página simplemente escribimos el shortcode: [widget-fluido name=WP_Widget_Archives]. Como podéis ver, tenemos que indicar el nombre de clase PHP del widget (The widget’s PHP class name). Si se trata de un widget incluido por defecto en WordPress, tenemos ese valor en el codex. En caso contrario, buscaremos en los archivos del plugin que ha añadido el widgtet la función register_widget ya que esta función necesita indicar el valor que nosotros buscamos.

En caso de que el widget disponga de opciones, habría que añadir los argumentos justo antes de the_widget( $name ):

$args = array(
	'opcion-1' => 'opcion',
	'opcion-2' => 'opcion'
);

y después sustituir the_widget( $name ); por the_widget( $name, $args );

Ahora bien, en la mayoría de las ocasiones será difícil determinar sus opciones y sus correspondientes valores. Por ese motivo, cuando se trate de widgtes con posibilidad de configurar, es preferible utilizar el método que explicamos a continuación.

2) Insertar área completa de widgets (barra lateral)

El primer paso consiste en crear una nueva área de widgets en nuestro plugin de funciones o archivo functions.php del tema. El ejemplo que aparece es válido para cualquiera. Tan solo cambiar name, descripction e ID (tened cuidado de no usar uno que ya utilice el tema). Los campos relacionados con los estilos también podéis cambiarlos a vuestro gusto.

Ahora bien, muchos temas usan funciones especiales para realizar esta tarea. El registro de estas áreas suele estar en el archivo functions.php del tema. Buscad register_sidebar o register_sidebars. Podemos aprovechar para añadir nuestra área de la misma forma y así asegurarnos la compatibilidad del tema.

En la plantilla que yo uso, por ejemplo, definen primero la función function hybrid_register_sidebar( $args ) en el archivo functions-sidebars.php y luego la utilizan en el archivo functions.php para registrar las áreas. Yo solo he tenido que añadir dentro de la función el siguiente código:

hybrid_register_sidebar(
array(
	'id' => 'sidebar-personalizado',
	'name' => _x( 'Sidebar personalizado', 'sidebar', 'stargazer' ),
	'description' => __( 'Sidebar para shortcode', 'stargazer' ),
)
);

Además, de esta forma podremos tomar nota del ID de todas las áreas (sidebar) que crea el tema por si luego las queremos usar con nuestro shortcode.

El segundo paso será ir a Apariencia > Widgets e introducir en nuestra nueva área “Sidebar personalizado” los widgtes que queramos y por supuesto configurarlos.

El tercer paso es añadir el siguiente código en nuestro plugin de funciones o en el archivo functions.php del tema:

function sidebar_shortcode( $atts, $content = null ) {
	extract(shortcode_atts(array('id' => ''), $atts));
	ob_start();
	// echo '<div class="widget sidebar-fluido">';
	dynamic_sidebar( $id );
	// echo '<div>';
	$content = ob_get_clean();
	return $content;
}
add_shortcode('sidebar-fluido', 'sidebar_shortcode');
// Nota: descomentar los dos "echo" para añadir estilos propios. Para ello crear un nueva DIV llamada "sidebar-fluido" y darle los estilos que queráis.

Ahora nuestro shortcode queda así: [sidebar-fluido id=ID_SIDEBAR]. En nuestro ejemplo, dicho Id es sidebar-fluido.

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.

NOTA: para el caso de vídeos subidos a nuestro servidor la regfuera de nuestro servidor (Yotube, vimeo, etc), debemos usar “embed-wrap” en lugar de “wp-video”.