Wordpress

Añadir metaetiqueta description en WordPress

Una de las metaetiquetas de las que Google puede extraer información es la llamada «description»:

<meta name="description" content="Descripción de la página" />

Añadirla a nuestra cabecera permitirá a Google poder utilizarla en el fragmento que se muestra en los resultados de la búsqueda. Saber si la va a usar o no es uno de esos misterios insondables que nadie acierta a resolver :-)

En cualquier caso, para añadirla bastará con poner en el archivo «functions.php» de nuestro tema o en nuestro plugin personal el siguiente código:

add_action('wp_head','head_meta_des');
function head_meta_des() {
	$excerpt = '';
	if ( is_single() ) {
		$post_id = get_queried_object_id();
		$excerpt = wp_strip_all_tags ( get_the_excerpt ( $post_id ), true );
	} else {
		$excerpt = get_bloginfo ( 'description' );
	}
	if ( $excerpt != '' ) {
		echo '<meta name="description" content="' . esc_attr( $excerpt ) . '" />'; 
	}
}

En este caso, nos sirve para nuestras entradas individuales. Para el resto, tomará el valor del campo «Descripción corta» (Ajustes generales). Hemos usado el gancho wp_head y las funciones get_queried_object_id, get_the_excerpt y wp_strip_all_tags. Esta última es muy interesante porque elimina de la descripción texto superfluo. Por ejemplo, la leyenda de la imagen colocada en la cabecera del artículo.

Convertir tablas MyISAM a InnoDB en WordPress

Como usuario de WordPress deberías saber que el «contenido» de nuestros sitios web se guarda en una base de datos a la que se accede cada vez que un visitante quiere leerlos. Por ese motivo, el rendimiento de aquélla es vital para ofrecer rápidamente el contenido. Entre los factores que influyen se encuentra el llamado «motor de almacenamiento (storage-engine)» ya que es el encargado  de almacenar, manejar y recuperar información de una tabla. Los motores más conocidos son MyISAM e InnoDB

El pasado día 3 de marzo, Fernando Tellado publicaba un estupendo artículo en el que exponía las razones para usar uno u otro tipo de motor de almacenamiento así como tres formas distintas para convertir tablas MyISAM a InnoDB (comandos SQL, phpMyAdmin y WP-CLI). Pero.. ¿y si ninguna de ella funciona?. A veces se producen errores que impiden la conversión y por eso vamos a explicar aquí una cuarta forma de realizar dicho cambio.

1. Copia de seguridad

Accedemos a phpMyAdmin, una herramienta que encontrarás en el panel de control de tu hosting. Seleccionamos la base de datos correspondiente, sección «EXPORTAR» y seleccionamos la opción «Rápido – mostrar sólo el mínimo de opciones de configuración» y el formato «SQL». Guardamos el archivo generado en nuestro ordenador.

Convertir tablas MyISAM a InnoDB en WordPress

2. Crear una nueva base de datos:

Aprovechamos que ya estamos en phpMyAdmin y creamos una nueva base de datos. Será en ésta donde volquemos el fichero SQL que hemos generado una vez hayamos modificado ciertas instrucciones como ahora veremos.

Tomamos nota del nombre de la base de datos (DB_NAME), del nombre de usuario de MySQL (DB_USER), de la contraseña de MySQL (DB_PASSWORD) y del host de MySQL (DB_HOST).

3. Modificar motor de almacenamiento.

Editamos el fichero SQL que hemos descargado. Según el tamaño, nos va a costar bastante tiempo tanto abrirlo como hacer modificaciones en él. Aconsejo editarlo con WordPad porque en la parte inferior izquierda se muestra el progreso de la carga.

Por cada tabla de la base de datos nos vamos a encontrar, además de los datos propiamente dichos, unas instrucciones para crearlas. Por ejemplo:

CREATE TABLE `wp_commentmeta` (
  `meta_id` bigint(20) UNSIGNED NOT NULL,
  `comment_id` bigint(20) UNSIGNED NOT NULL DEFAULT '0',
  `meta_key` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `meta_value` longtext COLLATE utf8mb4_unicode_ci
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Fijaros la última línea:

) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

y en concreto en ENGINE=MyISAM. Es aquí donde se establece el motor de almacenamiento con el que se creará la tabla.

Nosotros, simplemente, vamos a CAMBIAR EN CADA TABLA la palabra MyISAM por InnoDB.

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Solo modificamos, como podéis ver, el nombre del motor de almacenamiento. El resto de la línea no la tocamos. IMPORTANTE: se deben respetar las mayúsculas y minúsculas.

4. Importar y configurar.

Una vez modificado el archivo SQL, nos vamos de nuevo al panel de control de nuestro hosting para acceder  a la herramienta phpMyAdmin para, desde allí, seleccionar la base de datos que creamos en el punto 2 y proceder a la importación. De esta forma, la base de datos original no la tocamos en ningún momento.

Editamos el archivo «wp-config.php» (antes, como siempre, copia de seguridad del archivo). Allí encontraremos la sección «Ajustes de MySQL» que deberemos modificar con los datos que tomamos al crear la nueva base de datos (punto 2 de esta guía). Lo más sencillo y efectivo es «comentar» la línea que vayamos a modificar y luego añadir la nueva. Por ejemplo:

//define('DB_NAME', "base-de-datos-original");
define('DB_NAME', "base-de-datos-nueva");

Lo mismo para DB_USER, DB_PASSWORD y DB_HOST. De esta forma, conseguimos que nuestro WordPress conecte con la nueva base de datos en las que el motor de almacenamiento de todas las tablas será ya InnoDB. Si alfo fallara, podríamos volver sin problemas a la base de datos original ya que los datos de acceso siguen estando a mano en el «wp-config.php».

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 …