Adiós, Rank Math

Tabla de contenidos sin plugin

Si no quieres usar un plugin y prefieres complicarte un poco la vida puedes intentarlo con estos dos métodos (1) y (2). Yo lo intenté de ambas formas y decidí optar por el plugin porque algunos errores me convencieron de que el plugin era el camino más rápido, efectivo y seguro.

Si no tienes muchas tablas solo tendrás que sustituirlas una a una a mano.

Sin embargo, si tienes muchas (como era mi caso) puedes localizarlas fácilmente. Para ello acudes a phpMyAdmin, seleccionas tu base de datos y en la pestaña "Buscar" en palabras o valores escribes "rank-math/toc-block" (1), seleccionas "la frase exacta como subcadena" (2) y la tabla "wp-posts" (3) y le das a "Continuar" (4).

Esto te mostrará una lista de todas aquellas entradas donde añadiste un bloque de tabla de contenidos de Rank Math, la fecha el título del post o página e incluso el slug de la url.

Reemplazo de tablas de contenido

Ahora toca sustituirlas, en mi caso las reemplacé por un bloque reutilizable que maqueté con GenerateBlocks Pro metiendo el bloque de Simple TOC dentro de un contenedor al que le di estilo para que coincidiera con el aspecto de las tablas que había puesto con Rank Math. Puedes ver el formato en la tabla que encabeza este post.

Así puedo insertarlas automáticamente donde quiera y que se muestren, o no, según los encabezados que tenga cada post gracias a los Elementos de GeneratePress, ya que es algo que el plugin Simple TOC no nos permite hacer.

Sobre el bloque de tabla de contenidos nativo en WordPress

Este bloque se añadió como bloque experimental en Gutenberg 13.3.0 en mayo de 2022 y en algunos blogs se dijo entonces que se integraría en WP 6.1, pero no era cierto. La cuestión es que alguien creyó que se la había quitado la etiqueta de "experimental" pero no apareció en su día porque WordPress 6.1 integró desde la versión 13.1 a la 14.1 y la tabla de contenidos forma parte de la 14.4.0 de Gutenberg. A día de hoy no tiene fecha. Así que habrá que seguir esperando a que sea estable y se integre como parte del núcleo.

El otro día pregunté en el repositorio si había alguna hoja de ruta al respecto y esto fue lo que me contestó Birgit Pauli-Haack.

"El bloque de tabla de contenido sigue siendo un proyecto en curso. Aún no hay plazos disponibles para que el bloque salga de su fase experimental".

Si quieres probarlo, de momento sólo se puede hacer instalando el plugin de pruebas de Gutenberg.

SEO de imágenes

Rank Math tiene un módulo llamado SEO de imágenes. Aunque no todos los que se dedican al posicionamiento le dan demasiado valor a este aspecto, para un blog como este, con un gran volumen de viñetas, es interesante posicionar imágenes porque generan un nada despreciable tráfico orgánico que suele ser relativamente estable.

En realidad es un poco placebo porque lo que hace es inyectar el título del post en el ALT para el html resultante.

Es decir, que se aplica dinámicamente sólo cuando se muestra el contenido, el contenido guardado no se modifica. No rellena los campos ALT faltantes en WordPress, pero es mejor que nada mientras vas rellenando aquellos que dejaste olvidados.

Esto mismo puede hacerse con un par de funciones y filtros que añadiremos al functions.php de nuestra plantilla.

Snippet para añadir ALT (título de la entrada) a todas las imágenes

//Establecer el título de la entrada como texto alternativo de imagenes en post y páginas. Si existe Alt no hará nada

function add_alt_tags( $content ) {
  preg_match_all( '/<img (.*?)\/>/', $content, $images );
  if ( ! is_null( $images ) ) {
    foreach ( $images[1] as $index => $value ) {
      if ( preg_match( '/alt=""/', $value ) ) {
        $new_img = str_replace(
          'alt=""',
          'alt="' . esc_attr( get_the_title() ) . ' '. $index . '"',
          $images[0][$index] );
        $content = str_replace(
          $images[0][$index],
          $new_img,
          $content );
      }
    }
  }
  return $content;
}
add_filter( 'the_content', 'add_alt_tags', 99999 );

Snippet para añadir ALT (título de la entrada) a la imagen destacada

//Establecer el título de la entrada como ALT de la imagen destacada

function lwp_37481_featured_alt_text($metadata, $object_id, $meta_key, $single) {
    if(isset($meta_key) && $meta_key == '_wp_attachment_image_alt'
        && get_post_thumbnail_id() == $object_id
        && $single === true
    ){
        $original_value = get_post_meta(
            $object_id, '_wp_attachment_image_alt', false
        );
        if(empty($original_value)){
            return get_the_title();
        }
    }
    return $metadata;
}
add_filter('get_post_metadata', 'lwp_37481_featured_alt_text', 10, 4);

Editor visual de etiquetas y categorías

Otra opción curiosa e interesante si posicionas etiquetas (cosa que los SEO´s suelen descartar y hasta aconsejan no indexarlas) que puede dar alguna alegría trabajándolo bien es que Rank Math añadía el editor TinyMCE a las categorías y etiquetas para poder añadir imágenes y darle un formato más atractivo al texto, como si de un post se tratara.

Al desinstalar Rank Math el editor desaparece, pero se puede recuperar, también con un par de funciones a colocar en functions.php.

Aviso: para las categorías, el código funciona como debe, pero para las etiquetas no oculta el campo antiguo de la descripción y falla al añadir el "caption" o leyenda de la imagen así que, si no se añade o se añade como un párrafo simple debajo de la imagen por lo demás funciona.

Aquí tienes el resultado. A la izquierda el editor simple de etiquetas nativo y a la derecha el TinyMCE después de añadir el snippet.

Snippet para las etiquetas:

/* Añade editor TinyMCE a etiquetas */

if( is_admin() ) {
// Eliminar filtrado de HTML
remove_filter( 'pre_term_description', 'wp_filter_kses' );
remove_filter( 'term_description', 'wp_kses_data' );
// Agregar nuevo campo de descripcion
add_filter('edit_tag_form_fields', 'filter_wordpress_tag_editor');
function filter_wordpress_tag_editor($tag) {
    ?>
    <table class="form-table">
        <tr class="form-field">
            <th scope="row" valign="top"><label for="description"><?php _ex('Description', 'Taxonomy Description'); ?></label></th>
            <td>
            <?php
                $settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'description' );  
          wp_editor(html_entity_decode($tag->description , ENT_QUOTES, 'UTF-8'), 'description1', $settings);
            ?>
            <br />
            <span class="description"><?php _e('The description is not prominent by default; however, some themes may show it.'); ?></span>
            </td>
        </tr>
    </table>
    <?php
}
// Oculta el campo antiguo de descripción
add_action('admin_head', 'remove_default_tag_description');
function remove_default_tag_description()
{
    global $current_screen;
    if ( $current_screen->id == 'edit-tag' )
    {
    ?>
        <script type="text/javascript">
        jQuery(function($) {
            $('textarea#description').closest('tr.form-field').remove();
        });
        </script>
    <?php
    }
}
}

Y el de las categorías:

/* Añadir editor TinyMCE a  categorías */

if( is_admin() ) {
// Eliminar filtrado de HTML
remove_filter( 'pre_term_description', 'wp_filter_kses' );
remove_filter( 'term_description', 'wp_kses_data' );
// Agregar nuevo campo de descripcion
add_filter('edit_category_form_fields', 'filter_wordpress_category_editor');
function filter_wordpress_category_editor($tag) {
    ?>
    <table class="form-table">
        <tr class="form-field">
            <th scope="row" valign="top"><label for="description"><?php _ex('Description', 'Taxonomy Description'); ?></label></th>
            <td>
            <?php
                $settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'description' );  
          wp_editor(html_entity_decode($tag->description , ENT_QUOTES, 'UTF-8'), 'description1', $settings);
            ?>
            <br />
            <span class="description"><?php _e('The description is not prominent by default; however, some themes may show it.'); ?></span>
            </td>
        </tr>
    </table>
    <?php
}
// Oculta el campo antiguo de descripción
add_action('admin_head', 'remove_default_category_description');
function remove_default_category_description()
{
    global $current_screen;
    if ( $current_screen->id == 'edit-category' )
    {
    ?>
        <script type="text/javascript">
        jQuery(function($) {
            $('textarea#description').closest('tr.form-field').remove();
        });
        </script>
    <?php
    }
}
}

*Lamento no recordar dónde encontré estos snippets para dar crédito a sus autores, si los localizo, así lo haré.

Este artículo continúa en la página 3