toscho.design

WordPress-Plugin: Icon to Link

28.12.2010 in: Javascript, Webdesign und WordPress • 10 Kommentare
Letzte Änderung: 29.12.2010, 22:06 Uhr.

Die Icons über dem Editor in WordPress sparen zwar Platz, verstanden werden sie leider nicht immer. Müde dieser Art Support habe ich kleines Plugin verzapft, das aus den Icons klassische Textlinks macht: Plugin Icon to Link auf GitHub.

So wirkt es:

Und das ist der gegenwärtige alte Code, den man im Archiv herunterladen kann:

<?php
/*
Plugin Name: Icon to Link
Plugin URI: http://toscho.de/2010/wordpress-plugin-icon-to-link/
Description: Changes upload icons in the edit screen into text links.
Version: 0.3
Author: Thomas Scholz
Author URI: http://toscho.de
*/
add_action( 'admin_head', 'itb_change' );
function itb_change()
{   ?>
<script type="text/javascript">jQuery(document).ready(function($){
    $('a#add_image').text( '<?php _e('Image'); ?>' );
    $('a#add_video').text( '<?php _e('Video'); ?>' );
    $('a#add_audio').text( '<?php _e('Audio'); ?>' );
    $('a#add_media').text( '<?php _ex('File', 'column name' ); ?>' );
});</script>
    <?php
}

Auf zwei Details sei hingewiesen: Dazu braucht man kein jQuery. Aber da es ohnehin geladen wird, habe ich es um der Kürze gleich verwendet.
Und der Text File wird seltsamerweise nicht übersetzt, obwohl er genau so in der Sprachdatei steht. Das finde ich noch heraus …
File wird nur ersetzt, wenn man den passenden Kontext angibt, hier column name.

Update 29.12.

Ich habe das Javascript jetzt in eine separate Datei ausgelagert, einen Filter für die Namen eingebaut und sichergestellt, daß der Code nur auf Seiten mit einem Editor und dort erst am Seitenende geladen wird.

PHP-Code

<?php
/*
Plugin Name: Icon to Link
Plugin URI: http://toscho.de/2010/wordpress-plugin-icon-to-link/
Description: Changes upload icons in the edit screen into text links.
Version: 0.4
Author: Thomas Scholz
Author URI: http://toscho.de
*/
add_action( 'admin_init', 'itb_change' );
function itb_change()
{
    // Load the script on editor pages only.
    if ( empty ( $GLOBALS['pagenow'] )
        or ! ( 'post.php' == $GLOBALS['pagenow']
            or 'post-new.php' == $GLOBALS['pagenow'] )
    )
    {
        return;
    }
    $handle  = 'icon-to-links';
    wp_register_script( $handle, plugins_url( 'itl.js', __FILE__ ), 'jquery', '0.4', TRUE );
    wp_enqueue_script( $handle );
    // Localize
    $text = array (
        'image' => __( 'Image' )
    ,   'video' => __( 'Video' )
    ,   'audio' => __( 'Audio' )
    ,   'file'  => _x( 'File', 'column name' )
    );
    // To change the names, add a filter for 'itl_names'.
    $text = apply_filters( 'itl_names', $text );
    wp_localize_script( $handle, 'i2l', $text );
    return;
}
/**
 * Sample filter:
add_filter( 'itl_names', 'change_itl_names', 10, 1 );
function change_itl_names( $names )
{
    $names['image'] = 'Foto';
    return $names;
}
*/

Javascript (itl.js)

jQuery(document).ready(function($){
    $('a#add_image').text( i2l.image );
    $('a#add_video').text( i2l.video );
    $('a#add_audio').text( i2l.audio );
    $('a#add_media').text( i2l.file  );
});

10 Kommentare

  1. Steffen am 28.12.2010 · 18:52

    Danke… :)

  2. Alex am 28.12.2010 · 19:18

    Richtig nettes Plugin! Leider verstehen die meisten Blogger/Texter nicht die Icons und es kommt jedesmal zu Fragen. Daher ist es wirklich eine Problemlösung, die hoffentlich auch in WordPress selber integriert wird.

    Danke dir!

  3. Frank am 29.12.2010 · 00:09

    Schöne Idee und schöne Umsetzung, nur das Script wünschte ich mir via wp_enqueue_script(), da es dann im Backend gepackt ausgeliefert werden kann und dies spart wieder ein klein wenig Zeit.

  4. David am 29.12.2010 · 09:45

    Man kann doch auch die HTML-Daten des Backends komprimieren.

  5. Thomas Scholz am 29.12.2010 · 22:09

    @David: Welchen Ansatz man hier geht, ist wohl eine Frage des Stils. Bei langen Scripten ist es oft praktischer, sie zu separieren. Hier hingegen kommt beim Trennen genauso viel Inline-Code heraus – und ein Request mehr, denn WordPress bündelt das Script nicht mit anderen. Vielleicht habe ich auch etwas übersehen?
    Es gibt aber Plugins, die das Zusammenfassen übernehmen, insofern stört es auch nicht besonders.

    Ich habe Franks Anregung jetzt übernommen. Da der Code insgesamt immer noch sehr einfach ist, mag er vielleicht als kleine Referenz dienen.

  6. Martin am 24.01.2011 · 00:03

    naja wenn man sich einmal 2 minuten zeit nimmt und sich mit der artikel-funktion von wordpress beschäftigt, weiß man auch was die icons bedeuten und man kann sich die ganze arbeit des änderns sparen.

  7. Chrissi am 28.01.2011 · 09:49

    naja wenn man sich einmal 2 minuten zeit nimmt und sich mit der artikel-funktion von wordpress beschäftigt, weiß man auch was die icons bedeuten und man kann sich die ganze arbeit des änderns sparen.

    Ich würde eher sagen wenn man mit der Maus über die Buttons fährt kommen doch nette Beschreibungen wie "Bild hinzufügen", "Audio hinzufügen" oder nicht?

    Verstehe nicht ganz wie man das "nicht" hinkriegen kann ...

  8. Martin am 27.06.2011 · 02:00

    Cool find ich praktisch, wie wärs mit nem "gefällt mir" Button? =)

  9. Thomas Scholz am 27.06.2011 · 02:24

    @Martin: Facebook finde ich asozial, und der Code für den Button verletzt praktisch jedes Prinzip, das ich hier je vertreten habe.

  10. Alex am 14.11.2011 · 15:59

    @Chrissi: Dann nimm dir mal einen Kunden zur Hand, der WordPress vorher noch nie gesehen hat und nicht so webaffin ist wie du ;). Ich musste bisher jedem, der das System noch nicht kannte, erklären, was diese Buttons da zu bedeuten haben. Von daher finde ich diese Idee gut!

←   →