Editor completo para los extractos

Publicado por Fernando Tellado el 28 Oct, 2012

Tengo que reconocer que he redescubierto hace relativamente poco mi amor por los extractos en WordPress. Es algo que casi no usaba pero que cada vez tengo más en cuenta en todos los sentidos.

Además, que son un elemento muy importante a tener en cuenta para el SEO de tu web.

Pero hoy no toca hablar de SEO sino de cómo embellecer esas porciones de nuestro contenido que se muestran en la portada de nuestra web, cuando el tema WordPress soporta la visualización de extractos en vez del texto completo de la entrada.

Y es que, por si no lo sabías, la pequeña cajita de tu editor para los extractos soporta HTML, y las tags de estilo, enlaces, etc que uses en la caja se mostrarán en la web. Pero ¿y si los usas mucho y quieres facilitarte la vida?.

Pues entonces podemos habilitar un editor, como el principal, un TinyMCE, pero también para esa cajita del extracto. Para lograrlo solo hay que añadir el siguiente código a tu plugin de funciones:

//Editor para los extractos
function tinymce_excerpt_js(){ ?>
        <script type="text/javascript">
                jQuery(document).ready( tinymce_excerpt );
                    function tinymce_excerpt() {
                        jQuery("#excerpt").addClass("mceEditor");
                        tinyMCE.execCommand("mceAddControl", false, "excerpt");
                        tinyMCE.onAddEditor.add(function(mgr,ed) {
                            if(ed.id=="excerpt"){
                                ed.settings.theme_advanced_buttons2 ="";
                                ed.settings.theme_advanced_buttons1 = "bold,italic,underline,seperator,justifyleft,justifycenter,justifyright,separator,link,unlink,seperator,pastetext,pasteword,removeformat,seperator,undo,redo,seperator,spellchecker,";
                            }
                        });
                    }
        </script>
    <?php }
    add_action( 'admin_head-post.php', 'tinymce_excerpt_js');
    add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');
    function tinymce_css(){ ?>
        <style type='text/css'>
                    #postexcerpt .inside{margin:0;padding:0;background:#fff;}
                    #postexcerpt .inside p{padding:0px 0px 5px 10px;}
                    #postexcerpt #excerpteditorcontainer { border-style: solid; padding: 0; }
        </style>
    <?php }
    add_action( 'admin_head-post.php', 'tinymce_css');
    add_action( 'admin_head-post-new.php', 'tinymce_css');

    function prepareExcerptForEdit($e){
        return nl2br($e);
    }
    add_action( 'excerpt_edit_pre','prepareExcerptForEdit');

//Editor para los extractos

function tinymce_excerpt_js(){ ?>

jQuery(document).ready( tinymce_excerpt );

function tinymce_excerpt() {

jQuery("#excerpt").addClass("mceEditor");

tinyMCE.execCommand("mceAddControl", false, "excerpt");

tinyMCE.onAddEditor.add(function(mgr,ed) {

if(ed.id=="excerpt"){

ed.settings.theme_advanced_buttons2 ="";

ed.settings.theme_advanced_buttons1 = "bold,italic,underline,seperator,justifyleft,justifycenter,justifyright,separator,link,unlink,seperator,pastetext,pasteword,removeformat,seperator,undo,redo,seperator,spellchecker,";

}

});

}

</script>

<?php }

add_action( 'admin_head-post.php', 'tinymce_excerpt_js');

add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');

function tinymce_css(){ ?>

#postexcerpt .inside{margin:0;padding:0;background:#fff;}

#postexcerpt .inside p{padding:0px 0px 5px 10px;}

#postexcerpt #excerpteditorcontainer { border-style: solid; padding: 0; }

</style>

<?php }

add_action( 'admin_head-post.php', 'tinymce_css');

add_action( 'admin_head-post-new.php', 'tinymce_css');

function prepareExcerptForEdit($e){

return nl2br($e);

}

add_action( 'excerpt_edit_pre','prepareExcerptForEdit');

Lo que obtienes es un editor visual, con una línea de iconos para dar formato – y alegría – a tus extractos, incluso para añadir enlaces fácilmente y algunos detalles más. ¡Moola!

Luego, para rizar el rizo, le puedes añadir un contador de caracteres al extracto como ya vimos.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.