Wordpress

Migas de pan (Breadcrumb) en WordPress

Las «migas de pan» o «breadcrumb» son una funcionalidad que permite al visitante saber en qué página se encuentra y la ruta completa de cómo se llega a ella. Dentro de las utilidades disponibles para añadir esta característica a nuestro sitio, se encuentra el plugin Breadcrumb Trail. Aunque lleva dos años sin actualizarse, lo cierto es que gracias a su ligereza y sencillez tuvo bastante éxito en su momento. Tanto es así que muchos Themes integraron dicho código en su propia plantilla y a fecha de hoy sigue funcionando perfectamente salvo por un pequeño error.

¿Y cómo sabemos si nuestro tema usa dicho código? Pista: disponemos de la funcionalidad y no tenemos ningún plugin que la lleve a cabo. Esto significa que el tema se encarga de ello, y lo normal es que en algún archivo del tema encontremos los créditos. Algo así como: Seguir leyendo …

Ofuscar email en WordPress

Sin duda alguna, el llamado «correo basura» representa uno de los mayores quebraderos de cabeza para muchas personas. Un bombardeo continuo de correos electrónicos —publicidad, fraudes, etc.— llega a nuestra bandeja de entrada y todos nos preguntamos cómo obtienen nuestra dirección de correo. En primer lugar, más de una empresa vende nuestros datos al mejor postor sin el menor escrúpulo. En segundo lugar, los malos obtienen direcciones de correo mediante unas arañas que recorren millones de páginas todos los días con el único objetivo de capturar aquéllas.

Para quien tiene una página web, el problema se acrecienta pues solemos indicar nuestra dirección de correo para facilitar a los visitantes una forma de contacto. Además, la ley nos obliga a ello.

Si usas WordPress, la solución es bastante sencilla ya que tenemos una función específica para ello: antispambot.

NOTA IMPORTANTE: para ver los efectos de la ofuscación debemos acceder al código fuente de la página. Sólo allí veremos que la dirección de correo es iliegible.

1) En entradas o páginas

He escogido el plugin Anti-Spambot porque es muy sencillo (no tiene ajustes) y usa la función que trae por defecto WordPress. Solo un detalle: si queréis usar «hex encoding», hay que editar y hacer un cambio de forma que solo afecte a la dirección de correo usada como enlace. Buscamos la línea Seguir leyendo …

Hoy vamos a ver un método muy sencillo para evitar que en el área de administración aparezca el aviso de que hay una nueva actualización de WordPress. Me refiero en concreto a ocultar lo que aparece en la parte superior de cualquier página de la mencionada área y que vemos en la siguiente imagen:

Ocultar aviso actualización WordPress

El truco que vamos a aplicar es posible porque WordPress presenta un «hook» cuya función es administrar precisamente ese aviso y que se encuentra en el archivo «admin-filters.php» (wp-admin/includes):

add_action( 'admin_notices', 'update_nag', 3 );

Y la solución, por tanto, no es otra que remover dicha «action». Para ello, añade el siguiente código al archivo «functions.php» de tu tema activo o a tu plugin personal:

//Ocultar mensaje actualizacion
function hide_wp_update_nag() {
remove_action( 'admin_notices', 'update_nag', 3 );
}
add_action('admin_menu','hide_wp_update_nag');

No obstante, este truco no impedirá que en el menú «Escritorio – Actualizaciones» sigue apareciendo el aviso, tal y como vemos en esta otra imagen. Solo eliminará el aviso del resto de páginas.

Subir fotos a Instagram desde PC con FirefoxHoy tenemos un truco para Instagram que pude resultarnos muy útil. Vamos a ver como subir fotos a esa popular red social desde nuestro ordenador usando Mozilla Firefox:

1.- Instala el complemento User Agent Switcher. En realidad, Firefox ya incorpora dicho agente pero ninguno de los dispositivos a emular sirve a nuestro propósito. Y sí, el complemento lo que nos permite es emular determinados dispositivos en nuestro navegador.

2.- Accede a tu cuenta de de Instagram.

3.- Busca en la barra de herramientas del navegador Firefox el icono del complemento «User Agent Switcher» y haz clic en él. Selecciona «iPhone / Safari 12.1.1» tal y como puedes ver en esta imagen. Después refresca con F5.
Es posible que en el futuro, según se actualice el complemento, tengamos que seleccionar otro dispositivo. Es cuestión de ir probando cuál funciona porque no todas las emulaciones sirven para la tarea que deseamos.

4.- Ahora, en la parte inferior aparecerán los accesos para manejar nuestro Instagram como si estuviéramos en el móvil. Entre ellos, claro está, la posibilidad de subir una foto que tengamos almacenada en nuestro ordenador.

Plugin Broken Link Checker y PHP 7.3

El plugin Broken Link Checker es uno de esos complementos que nunca debe faltar en nuestras instalaciones de WordPress. Por desgracia, lleva más de seis meses sin actualizar y presenta dos problemas en la versión 1.11.8. Por un lado, el motor de almacenamiento debe ser MyISAM ya que de otra forma no funciona correctamente. Por otra, nos encontramos en su código con ciertas funciones obsoletas que es preferible sustituir.

Problemas con tipo de tablas

Archivo: /includes/admin/db-schema.php

En sentido estricto, no se trata de una incompatibilidad con una u otra versión de PHP sino de un problema que se presenta al activar el plugin. Para llevar a cabo su tarea, el plugin crea unas tablas en la base de datos de nuestro WordPress. Podemos identificarlas fácilmente ya que la estructura de su nombre consta de

  • Prefijo de nuestras tablas (normalmente «wp»)
  • Prefijo «blc».
  • Nombre de la tabla.

En la actual versión crea las siguientes tablas: wp_blc_filters, wp_blc_instances, wp_blc_links y wp_blc_synch.

Pues bien, el plugin no determina cual será el motor de almacenamiento de las tablas a crear por lo que aquél será definido por la configuración por defecto de nuestro servidor y aquí radica el problema ya que, si no se crean tipo MyISAM, el plugin no funcionará de forma adecuada. En concreto, no se almacenan los cambios efectuados. Para salvar este problema vamos a modificar el archivo «db-schema». Debe realizarse esta modificación ANTES DE ACTIVAR EL PLUGIN:

Debemos buscar todas las líneas que comienzan por CREATE TABLE IF NOT EXISTS pues es aquí donde se definen las instrucciones que permiten crear la tabla. Éstas finalizan siempre con {$charset_collate}

Solo tenemos que sustituir en todos los casos {$charset_collate}; por ENGINE=MyISAM {$charset_collate};


Problemas de compatibilidad con PHP

Como vamos a ver en los tres errores siguientes, estamos ante avisos tipo WARNING, es decir, ante advertencias en tiempo de ejecución (errores no fatales) que no detienen la ejecución del script. Se trata de funciones obsoletas que conviene sustituir ya que podrían dejar de funcionar en versiones futuras de PHP. Seguir leyendo …

CSS adicional en WordPressUna vez en el área de administración de nuestro WordPress, basta con acceder a Apariencia > Personalizar para disponer de la opción «CSS adicional».

Allí podemos insertar estilos y reglas de CSS que se aplicarán a la plantilla que estemos usando. Eso sí, el selector (clase, identificador o elementos HTML) debe estar presente en aquélla. Si añadimos la clase «entry-content» y establecemos determinadas propiedades, tal clase debe ser utilizada por la plantilla que tengamos activa.

El método que nos ofrece WordPress es bastante práctico y directo pero la «caja» de inserción es pequeña y, a pocas reglas que añadamos, la verdad es que no se controlan de forma rápida. Si además vamos a realizar numerosas adiciones o modificaciones de la hoja de estilos, es preferible añadir una nueva que cumpla la misma función que el «CSS adicional». Para ello, vamos a utilizar la función wp_enqueue_style.

Lo primero de todo será crear nuestra hoja de estilos («estilos-personales.css» en nuestro ejemplo) y subirla al servidor (normalmente dentro de la carpeta del tema).

En segundo lugar, insertaremos el siguiente código bien en el archivo «functions.php» del tema, bien en nuestro plugin personal:

add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles');
function custom_enqueue_styles() {
wp_enqueue_style( 'estilos-personales', get_template_directory_uri() . '/cod-personal/estilos-personales.css' );
}

Argumentos:

  • El primer argumento ($handle) es el nombre de la hoja de estilo. Obligatorio. Debe ser único.
  • El segundo argumento ($src) es también obligatorio y debemos introducir la URL de la hoja de estilos que vamos a añadir. Puede ser una URL absoluta o una relativa al directorio raíz de WordPress. En mi caso, he utilizado get_template_directory_uri() más la ruta hasta el archivo.
  • El resto de argumentos ($deps,  $ver y $media) son opcionales.

Propiedades en la hoja de estilos (background, height, position, width, etc):

  • Si no existe, se aplicará sin problemas.
  • Si existe, entonces es conveniente usar «!important» (debe ir siempre al final de la declaración, esto es, inmediatamente antes del punto y coma finales)

Crear nuestro plugin personalEn no pocas ocasiones, los usuarios de WordPress encontramos «porciones de código» que bien resuelven un problema, bien añaden alguna funcionalidad a nuestro sitio. Solemos añadir estas utilidades en el archivo «functions.php» del tema activo, pero eso tiene un serio inconveniente, a saber, que en caso de actualización o si cambiamos de plantilla, perderemos los cambios.

La solución más sencilla para evitar dichos problemas es crear nuestro propio «plugin» personal y añadir en él nuestros códigos. Veamos:

En primer lugar, crearemos un archivo que llamaremos funciones.php (en realidad, lo podéis llamar como queráis). Lo editamos y en la primera línea ponemos la etiqueta de apertura que indica a PHP dónde comienza el código: <?php

Nota: Si un fichero contiene solamente código de PHP, es preferible omitir la etiqueta de cierre de PHP al final del mismo. Así se previene la adición de espacios en blanco o nuevas líneas accidentales después de la etiqueta de cierre, lo cual causaría efectos no deseados debido a que PHP comenzará la salida del búfer cuando no había intención por parte del programador de enviar ninguna salida en ese punto del script.

Seguir leyendo …

Video responsive en WordPress

Caso 1: video subido a nuestro servidor

Editor clásico: «Añadir objeto», elegir o subir un video y seleccionar «Incrustar reproductor de medios». Después, podemos editarlo y acceder a más opciones.
Editor Gutenberg: insertamos el bloque «Video», seguimos las instrucciones y después, en la pestaña «Bloque», nos saldrán las opciones una vez insertado el video.

WordPress insertará el código necesario y ya no es necesario hacer nada más. El espacio ocupado por el video dependerá de su resolución pero, en cualquier caso, será «responsive» y se adaptará a todos los tipos de dispositivos.

Caso 2: video alojado en un servidor externo.

WordPress soporta un número bastante elevado de servidores y en este caso bastará con poner la URL del vídeo. Dicha URL debe estar sola en un párrafo y sin poner el hipervínculo. Ejemplo:

Video responsive en WordPress

Caso 3: resto de vídeos.

En todos aquellos casos en los que no podamos o no queramos subir el video a nuestro servidor y no esté soportado por WordPress, solo nos queda comprobar si el sitio ofrece el código necesario para embeberlo en nuestra página. Seguir leyendo …

Si usas WordPress y compartes tus entradas en Facebook, es muy probable que en dicha red social la URL del enlace a tu sitio aparezca con un parámetro nuevo que desvirtúa nuestro propio enlace.

Pongamos un ejemplo:

  • URL propia: https://www.almendron.com/blog/el-camino-de-santiago-primitivo/3/
  • URL desde Facebook: https://www.almendron.com/blog/el-camino-de-santiago-primitivo/3/?fbclid=IwAR2siZzCh_1hHPpgJT29WgCFMtjqLHTNtEvlw7PV6C8_c_CtN2dwti8USaw

Al parecer, se trata de un nuevo parámetro de seguimiento que Facebook empezó a incorporar al tráfico que comparte desde su red, aunque no siempre se aplica y puede dar problemas con el cache y CloudFlare. En cualquier caso, aunque no diera ninguno, es vergonzoso que modifique nuestras URL,s ofreciendo a nuestros visitantes una información manipulada. Por ello, debemos evitarlo. Veamos como hacerlo:

1) En Google Analitics, nos vamos a Administrar » Vista » Configuración de la vista, y en el cuadro «Excluir parámetros de consulta de URL» ponemos «fbclid» (sin las comillas).

2) Eliminar el parámetro de nuestras URL,s. Para ello debemos incluir unas instrucciones en el .htacces. Deben ir ANTES que las reglas de WordPress. Lo mejor es ponerlas al principio de dicho archivo:

RewriteEngine On
RewriteBase /
RewriteCond %{QUERY_STRING} ^(.*[^&]+)?(&?fbclid=[^&]+)(.*)$ [NC]
RewriteRule ^(.*)$ $1?%1%3 [R=301,L]

En el caso de que WordPress esté instalado en una subcarpeta, debéis modificar la línea RewriteBase / y cambiarla por RewriteBase /nombre-carpeta/.

El código es idea de kallookoo y podéis ver el debate en el foro de 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.