Nelio Content es un plugin de WordPress creado por el equipo de Nelio (es decir, nosotros mismos) que te ayuda a gestionar las entradas de tu blog y a promocionarlas en redes sociales. Si estás hoy aquí, imagino que ya lo conoces y sabes de qué va… pero si no te suena, puedes leer esta entrada de Toni, donde habla de su calendario editorial, y esta entrada de Ruth, donde te habla de su integración con redes sociales.
Una de las funcionalidades estrella de Nelio Content es el análisis de calidad del contenido. La idea es bastante sencilla, pero muy útil: cuando escribimos contenido en nuestra web, hay una serie de tareas que debemos hacer para garantizar que todo está más o menos bien. Por ejemplo, quizás queramos controlar la longitud de nuestras entradas, acompañarlas de elementos gráficos para hacerlas más amenas, añadir enlaces a nuestra propia web así como a fuentes externas o establecer una imagen destacada para que se vean bien cuando las compartimos en redes sociales, entre otras muchas tareas.
Como puedes imaginar, es fácil que pasemos por alto alguna de estas tareas y, a ver, seamos sinceros, aunque olvidar alguna de ellas no sea el fin del mundo, probablemente estés más alegre si sabes que todo está bajo control y no olvidas nada. En mi opinión, cuidar los detalles es una muestra de profesionalidad y buen hacer, ¿no crees?
Pues bien, en la entrada de hoy me gustaría explicarte algo que poca gente sabe: el análisis de calidad de Nelio Content puede personalizarse y extenderse con tus propios controles. Vamos a ver cómo añadir un nuevo control de calidad en Nelio Content basándonos en un ejemplo real que hemos implementado en nuestro flujo de trabajo.
Traducciones y textos fantasma
En este blog escribimos contenido con bastante asiduidad, lo cual ya lleva un cierto tiempo, con el añadido de que todas las entradas que publicamos están disponibles tanto en español como en inglés. Para conseguir una web multidioma, optamos por implementar un WordPress multisite con Multilingual Press para gestionar las traducciones. De esta forma, cada vez que alguno de nosotros tiene que escribir una nueva entrada, este es el proceso que seguimos:
- Escribimos la entrada en español
- Un compañero la revisa, corrige los fallos que vea, la programa y da el visto bueno al autor para traducirla
- El autor crea una «traducción» con Multilingual Press (básicamente, duplica el contenido de la entrada en español a la web en inglés)
- El autor traduce la entrada al inglés,
- Un compañero revisa la versión en inglés, corrige los fallos que vea y la programa
Tal y como te comentaba Toni en esta entrada, para agilizar el proceso de traducción implementamos un pequeño plugin, Nelio Translate, el cual traduce todos los bloques de nuestra entrada del español al inglés. Aquí puedes ver una pequeña animación con su funcionamiento:
El resultado de este proceso de traducción automático es una entrada en la que se intercalan los párrafos originales en español con sus traducciones en inglés. En ese instante, el autor de la entrada y encargado de traducirla, lee las traducciones automáticas que se han generado con Nelio Translate y corrige y mejora la traducción. Para cada párrafo que repasa, tiene la versión original en español arriba como referencia. Una vez da por bueno un párrafo, puede borrar la versión en español y seguir adelante.
Y es precisamente en este punto donde aparece el problema: a veces nos olvidamos de borrar alguno de los párrafos originales en español, con lo que existe el riesgo de que la entrada en inglés se publique con un fragmento fantasma en español. Normalmente no suele darse el caso, porque el revisor del paso 5 se da cuenta y lo corrige… pero estaría bien que pudiéramos controlarlo de forma automática, ¿no?
Cómo añadir un nuevo control de calidad a Nelio Content
Tal y como viene siendo habitual en el mundo WordPress, para extender Nelio Content y añadir un nuevo control de calidad deberemos crear un plugin. Este plugin será el encargado de añadir las personalizaciones que queramos a Nelio Content. He dejado preparado en GitHub una copia del proyecto que haremos hoy tú y yo, pero te recomiendo que intentes seguir los pasos desde cero conmigo:
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
1. Crear el plugin de personalizaciones
Crear un plugin es muy sencillo: puedes ver cómo hacerlo siguiendo esta entrada que compartí contigo hace un tiempo ya. Pero, bueno, ¿qué cuesta repasarlo una vez más, verdad?
En primer lugar, vamos a crear una carpeta en la que meter los ficheros de nuestro plugin. Yo, por ejemplo, voy a llamarla personalizaciones. A continuación, metemos el fichero PHP principal dentro, el cual podemos llamar llamar personalizaciones.php, con el siguiente contenido:
<?php
/**
Plugin Name: Personalizaciones
Description: Mis personalizaciones en un único sitio.
Version: 1.0.0
Author: David Aguilera
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}//end ifdonde ponemos un pequeño comentario con el nombre, la descripción, el número de versión y el autor del plugin. Con esto ya tenemos un plugin que no hace nada, pero que si lo metemos en un ZIP y lo subimos a WordPress, pues lo podemos ver y activar:
2. Inicializar el entorno JavaScript en el plugin
A continuación debemos preparar el plugin para funcionar con JavaScript. Esto es algo que ya expliqué en esta otra entrada. En esencia, lo único que tenemos que hacer es ejecutar npm init para crear un fichero package.json y luego instalar una única dependencia (aunque, según qué quieras hacer, quizás necesites instalar más): el paquete @wordpress/scripts (lo cual, por cierto, puedes hacer ejecutando npm i -D @wordpress/scripts). Finalmente, editamos el package.json para añadir los dos scripts con los que compilar nuestro código:
{
...,
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
}
}Una vez tenemos el entorno preparado, basta con crear una carpeta src dentro del plugin personalizaciones y meterle un fichero index.js vacío. Ahora cuando ejecutes npm run build (o npm run start para que el código se vaya recompilando mientras trabajas con él), verás que aparece una carpeta build con el resultado de la compilación.
3. Cómo usar el fichero JavaScript con nuestras personalizaciones en WordPress
Vale, ya tenemos todos los ficheros en su sitio. El siguiente punto es decirle a WordPress que tiene que, cuando estemos en Gutenberg usando Nelio Content, se encargue de añadir el fichero JavaScript con nuestras extensiones para Nelio Content. Esto lo haremos en dos pasos. En primer lugar, registraremos el script durante la acción admin_init:
add_action( 'admin_init', function() {
$url = untrailingslashit( plugin_dir_url( __FILE__ ) );
$dir = untrailingslashit( plugin_dir_path( __FILE__ ) );
$asset = include "{$dir}/build/index.asset.php";
wp_register_script(
'customizations',
"{$url}/build/index.js",
array_merge( $asset['dependencies'], [ 'nelio-content-edit-post' ] ),
$asset['version']
);
} );Y, a continuación, le diremos que lo encole en Gutenberg usando la acción enqueue_block_editor_assets:
add_action( 'enqueue_block_editor_assets', function() {
if ( ! wp_script_is( 'nelio-content-edit-post', 'enqueued' ) ) {
return;
} //end if
wp_enqueue_script( 'customizations' );
}, 99 );Estos dos pequeños fragmentos de código tienen algunas cosas interesantes que merece la pena comentar:
- Cuando registramos el script en la primera función, cargamos un fichero llamado
index.asset.php. Esto es un fichero que genera@wordpress/scriptsdurante la compilación y contiene una lista con los scripts de los que depende el nuestro. - Además, a esa lista de dependencias le añadimos, con un
array_merge, una dependencia más:nelio-content-edit-post. Como vamos a extender el análisis de calidad de Nelio Content, está claro que el propio Nelio Content pasa a ser una dependencia nuestra. - En el segundo fragmento, añadimos un pequeño control para encolar nuestro script únicamente cuando se ha encolado el de Nelio Content. Esto lo ponemos porque Nelio Content no siempre tiene por qué estar activo en Gutenberg, así que mejor nos curamos en salud y ponemos la comprobación.
4. Programando un nuevo control de calidad en JavaScript
Y, finalmente, por fin llegamos al punto que nos interesa: añadir un nuevo control de calidad a Nelio Content usando JavaScript. Para ello, basta con usar la función registerQualityCheck del objeto NelioContent.editPost:
/* global NelioContent */
const { registerQualityCheck } = NelioContent.editPost;
registerQualityCheck( 'customizations/spanish', {
icon: 'translation',
attributes: ( select ) => {
const { getContent } = select( 'nelio-content/edit-post' );
return { content: getContent() };
},
validate: ( attrs ) => {
const { content } = attrs;
const spanishWords =
content.match( /\bde\b|\blado\b|\bpuede\b|\btambién\b/g ) || [];
if ( spanishWords.length >= 5) {
return {
status: 'bad',
text: 'Spanish content detected',
};
} //end if
return {
status: 'good',
text: 'No Spanish content detected',
};
},
} );Tal y como puedes ver en el fragmento anterior, la función registerQualityCheck recibe dos parámetros. Por un lado, un nombre único con el que identificar el nuevo control de calidad (en el ejemplo, customizations/spanish). Por otro, un objeto con tres atributos: icon, attributes y validate. Veamos qué es cada uno de ellos:
- Icono. El atributo
iconespecifica el icono que se usará en la interfaz de usuario para acompañar a tu nuevo control. Puedes usar el dashicon que quieras. Yo, para nuestro ejemplo, he usadotranslation. - Selección de atributos. Un control de calidad se encarga de comprobar que las «cosas» de nuestra entrada están bien. ¿Qué cosas? Las que queramos. Así que esta primera función se encarga de seleccionar los atributos que son relevantes para evaluar el control de calidad. En nuestro ejemplo, como queremos comprobar que el contenido de nuestra entrada no contenga texto en español, simplemente recuperamos dicho contenido y lo devolvemos.
- Evaluación de calidad. La evaluación del control de calidad es otra función que recibe los atributos que hemos seleccionado y comprueba «que estén bien». En mi caso, he implementado una función sencilla para detectar si hay o no texto en castellano: busco las palabras de, lado, puede y también en el contenido y si hay 5 o más de ellas, supondré que hay fragmentos en castellano; sino, no. No es perfecto, pero parece funcionar 😉 El resultado de la evaluación de calidad es un objeto con dos atributos:
status: indica el resultado de la evaluación. Sus valores pueden sergood,improvableobad. Básicamente indican si todo está bien (se verá en verde), si es mejorable (en naranja) o si está mal (en rojo). Eres tú quien decide qué estados usar según lo que te interese.text: es el texto explicativo que acompaña al análisis de calidad.
Si lo has hecho bien y vuelves a compilar tu proyecto, verás tu nuevo control de calidad al final de todo en la sección correspondiente de nuestro plugin:
Conclusión
Nelio Content es un plugin muy potente que te ayuda a llevar el blog de una manera más profesional. Además, lo hemos implementado de tal forma que puedas extenderlo y adaptarlo a tus necesidades. Si no lo estás usando ya, ¿a qué esperas? Puedes descargarlo gratis en WordPress.org o suscribirte a alguno de nuestros planes y ayudarnos a seguir creciendo como equipo.
Imagen destacada de Glenn Carstens-Peters en Unsplash.
Deja una respuesta