Mukautettu TinyMCE-editorin muotoilu WordPressissä

Joskus kun kirjoitat tekstilohkoa WordPress-editorilla, tarvitset sen näyttävän tietyltä, teemme tämän yleensä lisäämällä tekstinpätkiin tyylejä, mutta emme aina halua, että asiakkaamme joutuvat avaamaan tekstieditoria ja tee tämä manuaalisesti.

Tässä esimerkissä luomme pienen suodattimen, jonka voit lisätä functions.phptiedostoosi antaaksesi käyttäjälle ylimääräisiä muotoiluvaihtoehtoja, lisätäksesi mukautetun ’Lead’-kappaletyylin.

Mukautetun TinyMCE-muotoilun käyttäminen

Tässä on erittäin nopea esimerkki suodattimesta toiminnassa. Se näyttää sinulle:

• Työkalupalkin vaihtaminen, jotta näet Muotoiluvalikon
• Muotoilun käyttäminen Muotoilu-valikon avulla
• Kuinka tyhjentää tyylit

TinyMCE-muotoilu toiminnassa

Koodi

Koodi on todella yksinkertainen, liitä vain siihen tiny_mce_before_initja lisää mukautettu tyylisi style_formatstaulukkoon. Muista lisätä otsikko, käytettävän elementin tyyppi ja ennen kaikkea luokka.

function wholesomecode_tinymce_formatting( $settings) {
    $style_formats = array(
        array(
            'title'   => 'Lead Paragraph',
            'block'   => 'p',
            'classes' => 'lead',
            'wrapper' => false,
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );

Tyylit

Tietenkään mitään ei tapahdu ilman pientä muotoilua. Muista lisätä tyylit molempiin pääWordPressiin, styles.cssjotta liidi näkyy käyttöliittymässä, ja muista myös rekisteröidä editorin tyylisivu, jotta koodi näkyy editorissa (voit add_editor_style()tehdä tämän).

.lead {
    font-size: 120%;
}