Wordpress

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.

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 …