Tutorials

Meerdere WYSIWYG-editors op Content Edit scherm

Gisteren kreeg ik via Skype (niet helemaal letterlijk) de volgende vraag:

Ik heb 2 WYSIWYG-editors in het Content Edit scherm, ik wil ze graag beide apart stijlen. Kan dat?

Omdat ik het antwoord niet wist gooide ik meteen Google open en begon te zoeken. Helaas was er niet veel over te vinden. Het enige dat ik tegenkwam was allemaal veroudert (van ergens in 2008 tot halverwege 2011). Toen leek ik wat gevonden te hebben op StackExchange, maar dat bleek niet meer te werken vanaf WordPress 3.1, hadden we dus niks aan.

Uiteindelijk vond ik wat op de TinyMCE website zelf: je kunt via een var (in de TinyMCE JS) een body_class opgeven. Helemaal geweldig, want dat is wat we nodig hadden. Ik gevraagd of dat toegevoegd kon worden aan de code, maar dat lukte niet echt. Toen gevraagd hoe de editor wordt aangemaakt en toen kreeg ik een verrassend antwoord:

<?php
$settings = array (
 'textarea_name' => 'page_sidebar_box',
 'textarea_rows' => '8',
 'media_buttons' => false,
 'teeny' => true,
 'wpautop'=> false
);

wp_editor( $page_sidebar_box, 'page_sidebar_box', $settings );

?>

Nu vraag je je wellicht af wat het verrassende was aan dat antwoord. Nou, ik kende de [wp]wp_editor[/wp] functie helemaal niet :-)
Blijkbaar is die functie toegevoegd in WordPress 3.3 (dus best nieuw, niet zo gek dat ik ‘m nog niet tegen was gekomen ;-) ).

Dus: pagina in de Codex opgezocht en daar zag ik iets heel interessants staan:

tinymce(array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array()

Default: true

 Dus ik dacht, hee dat combineren we met wat ik op de TinyMCE website had gevonden, wie weet werkt dat wel:

<?php
$settings = array (
 'textarea_name' => 'page_sidebar_box',
 'textarea_rows' => '8',
 'media_buttons' => false,
 'teeny' => true,
 'wpautop'=> false,
 'tinymce' => array('body_class' => 'my_class') // <- dit dus toegevoegd
);
?>

En wat denk je? Het werkt! :-D

Zo kun je dus een realistischere WYSIWYG beleving geven aan je klanten (of jezelf natuurlijk ;-) ) omdat je in de [wp]add_editor_style[/wp] nu ook kunt richten op een specifieke WYSIWYG editor!

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Elke taal een eigen sidebar

Als je WPML gebruikt in een WordPress website met sidebars, dan wil je die sidebars ook graag mee veranderen als de bezoeker een andere taal selecteert. Om dit te realiseren zul je voor elke taal een eigen sidebar aan moeten maken.
Nou kun je natuurlijk de code daarvoor vast in de functions.php zetten, maar als jij (of je opdrachtgever etc.) op een later tijdstip besluit om een taal toe te voegen of te verwijderen, dan moet dit ook handmatig gebeuren.

Dynamische sidebars per taal

Het makkelijkst is dus om sidebars dynamisch aan te laten maken op basis van de talen die geactiveerd zijn. Dat doe je met de volgende code:

&amp;lt;?php

/*
 Register sidebars
*/
if ( function_exists('register_sidebars') )
{
    // WPML is active
    if ( function_exists('icl_get_languages') )
    {
        foreach ( icl_get_languages('skip_missing=0&amp;orderby=name&amp;order=asc') as $lang )
        {
            register_sidebar( array(
                'name'          =&amp;gt; __(sprintf('%s Sidebar',strtoupper($lang['language_code']))),
                'id'            =&amp;gt; 'sidebar-'.$lang['language_code'],
                'before_widget' =&amp;gt; '&amp;lt;li id="%1$s"&amp;gt;',
                'after_widget'  =&amp;gt; '&amp;lt;/li&amp;gt;',
                'before_title'  =&amp;gt; '&amp;lt;h4&amp;gt;',
                'after_title'   =&amp;gt; '&amp;lt;/h4&amp;gt;'
            ) );
        }
    }
    // WPML is not active
    else
    {
        register_sidebar( array(
            'name'          =&amp;gt; __('Sidebar'),
            'id'            =&amp;gt; 'sidebar-default',
            'before_widget' =&amp;gt; '&amp;lt;li id="%1$s"&amp;gt;',
            'after_widget'  =&amp;gt; '&amp;lt;/li&amp;gt;',
            'before_title'  =&amp;gt; '&amp;lt;h4&amp;gt;',
            'after_title'   =&amp;gt; '&amp;lt;/h4&amp;gt;'
        ) );
    } // end if/else
} // end if

?&amp;gt;

Met bovenstaande code zorg je ervoor dat er een standaard sidebar wordt aangemaakt als er geen talen actief zijn.

Meerdere sidebars

Gebruik je meerdere sidebars en wil je die allemaal vertalen? Dan herhaal je de code binnen in de foreach (de register_sidebar functie dus) en maak je de benodigde wijzigingen (naam & ID van de sidebar).

Een voorbeeldje van meerdere sidebars vertalen (een standaard sidebar en eentje voor de blogs):

&amp;lt;?php

/*
 Register sidebars
*/
if ( function_exists('register_sidebars') )
{
    // WPML is active
    if ( function_exists('icl_get_languages') )
    {
        foreach ( icl_get_languages('skip_missing=0&amp;orderby=name&amp;order=asc') as $lang )
        {
            register_sidebar( array(
                'name'          =&amp;gt; __(sprintf('%s Sidebar | Default',strtoupper($lang['language_code']))),
                'id'            =&amp;gt; 'sidebar-default-'.$lang['language_code'],
                'before_widget' =&amp;gt; '&amp;lt;li id="%1$s"&amp;gt;',
                'after_widget'  =&amp;gt; '&amp;lt;/li&amp;gt;',
                'before_title'  =&amp;gt; '&amp;lt;h4&amp;gt;',
                'after_title'   =&amp;gt; '&amp;lt;/h4&amp;gt;'
            ) );

            register_sidebar( array(
                'name'          =&amp;gt; __(sprintf('%s Sidebar | Blog',strtoupper($lang['language_code']))),
                'id'            =&amp;gt; 'sidebar-blog-'.$lang['language_code'],
                'before_widget' =&amp;gt; '&amp;lt;li id="%1$s"&amp;gt;',
                'after_widget'  =&amp;gt; '&amp;lt;/li&amp;gt;',
                'before_title'  =&amp;gt; '&amp;lt;h4&amp;gt;',
                'after_title'   =&amp;gt; '&amp;lt;/h4&amp;gt;'
            ) );
        }
    }
    // WPML is not active
    else
    {
        register_sidebar( array(
            'name'          =&amp;gt; __('Sidebar | Default'),
            'id'            =&amp;gt; 'sidebar-default',
            'before_widget' =&amp;gt; '&amp;lt;li id="%1$s"&amp;gt;',
            'after_widget'  =&amp;gt; '&amp;lt;/li&amp;gt;',
            'before_title'  =&amp;gt; '&amp;lt;h4&amp;gt;',
            'after_title'   =&amp;gt; '&amp;lt;/h4&amp;gt;'
        ) );

        register_sidebar( array(
            'name'          =&amp;gt; __('Sidebar | Blog'),
            'id'            =&amp;gt; 'sidebar-blog',
            'before_widget' =&amp;gt; '&amp;lt;li id="%1$s"&amp;gt;',
            'after_widget'  =&amp;gt; '&amp;lt;/li&amp;gt;',
            'before_title'  =&amp;gt; '&amp;lt;h4&amp;gt;',
            'after_title'   =&amp;gt; '&amp;lt;/h4&amp;gt;'
        ) );
    } // end if/else
} // end if

?&amp;gt;

Sidebar laden

Nou heb je natuurlijk niet zo heel veel aan vertaalde sidebars als je niet ook de juiste sidebar kan laden op de site. Open je sidebar.php en vervang de huidige code om de dynamische sidebar op te halen met de volgende code:

&amp;lt;?php

if ( function_exists('dynamic_sidebar') )
{
    // WPML is active
    if ( function_exists('icl_get_languages') )
    {
        // only load sidebar if it is active
        if ( is_active_sidebar('sidebar-'.ICL_LANGUAGE_CODE) ) dynamic_sidebar('sidebar-'.ICL_LANGUAGE_CODE);
    }
    // WPML is not active
    else
    {
        dynamic_sidebar('sidebar-default');
    }
}

?&amp;gt;
  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
1 2 3 6  Scroll to top