WordPress 3.9+ – dodavanje funkcionalnosti u TinyMCE 4 editor

WordPress 3.9 je predstavio nekoliko zanimljivih novosti, od lakšeg uređivanja slika, predpregleda galerija, audio/video playlista pa sve do poboljšanog vizaulnog uređivanja teksta. Popis novosti u WordPress verziji 3.9 pogledajte na web stranici hr.wordpress.org.

U ovom članku stavljamo naglasak na vizualno uređivanje, odnosno uvođenje TinyMCE verzije 4.0 u jezgru WordPressa. Novi TinyMCE izgleda puno skladnije, radi brže, nudi mobilnu podršku i, što je još bitnije, automatski čisti “neuredne” stilove, redovito kopirane iz MS Worda.

TinyMCE ima novi API i sadrži mnoge cool funkcionalnosti. Upravo zbog novog API mnogi pluginovi i teme koji nisu uskladili svoj kod s istim, od nove verzije WP-a su počeli raditi probleme ako su svoje funkcionalnosti “odrađivali” putem MCE editora (custom shortcode-ovi i sl.).

Dodavanje odabira veličine fonta (Font Size) i obitelji fonta (Font Family)

Po defaultu, ove su opcije onemogućene i TinyMCE editoru. Dodavanjem slijedećeg koda u functions.php datoteku možete dodati odabir navedenih opcija iz padajućeg izbornika. Stavke će biti dodane lijevo u drugi red. Ukoliko ih želite postaviti u treći red, promjenite dio koda gdje piše “mce_buttons_2” u “mce_buttons_3“.

// Aktiviraj odabir veličine i obitelji fonta u MCE editoru
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

U uređivaču članaka ćete vidjeti dva nova padajuća izbornika.

Dodavanje prilagođenih veličina fonta (custom font size)

Po defaultu veličina fonta je definirana u point vrijednosti (pt). Jedan pt je isto što i 1/72 inch-a.

Mnogi korisnici ipak više vole koristiti dobre stare vrijednosti u pixelima (px). Jedan pixel je najmanji element na ekranu, jedna točkica.

Najveću fleksibilnost vam ipak pruža definiranje veličine fonta u em vrijednostima. No, to je već tema za neki drugi članak.
[clear]

Dodavanjem slijedećeg koda možete dodati odabir prilagođene veličine fonta (u pixelima) iz padajućeg izbornika:

// Prilagođene veličine fonta
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 11px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

Dodavanje prilagođenih fontova (Custom fonts)

Po defaultu, TinyMCE editor dodaje tzv. “web-safe” fontove.

Obratite pažnju na početak koda gdje sam upisao tri Google fonta: Open Sans, Roboto i PT Sans.

POZOR! Ovaj kod će raditi samo ako vaša tema već koristi dotične fontove, odnosno ako vaša web stranica učitava skriptu za navedene fontove. Ako ne znate kako dodati Google fontove, pročitajte članak Kako dodati Google fontove u WordPress temu.

[clear]

Dodavanjem slijedećeg koda u functions.php datoteku moći ćete dodavati i druge fontove, poput popularnih Google fontova.

// Dodavanje custom fontova u padajući izbornik
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
	function wpex_mce_google_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'Open Sans=Open+Sans;Roboto=Roboto;PT Sans=PT+Sans;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
            return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );?>

Ne znam kako/ne želim editirati functions.php datoteku

U slučaju da se odlučite koristiti gore navedeni kod, obavezno ga koristite u functions.php datoteci vaše child teme (a ne parent teme) kako nadogradnjom teme ne biste izgubili sve dodane funkcionalnosti.

Ako ne znate kako/gdje dodati navedeni php kod ili uopće ne želite mjenjati functions.php datoteku vaše teme, kreirali smo za vas ultra jednostavan plugin (veličina 1kB) koji će vam omogućiti sve spomenute funkcionalnosti. Downloadajte ga, instalirajte ga kao svaki drugi plugin (upload zip datoteke) , aktivirajte i uživajte u novim funkcionalnostima TinyMCE editora.

U slučaju da želite izvršiti bilo kakve izmjene, na primjer dodati drugi Google font, reorganizirati poredak fontova, dodati/ukloniti veličinu fonta, samo unutar plugin foldera Tinymce 4 fonts otvorite datoteku imena tinymce-4-fonts.php i izvršite potrebne izmjene. U slučaju da nešto pogrešno upišete, plugin će se automatski deaktivirati.

U jednom od slijedećih članaka ću pisati o tome kako “upogoniti” Font awesome ikone i ubacivati ih putem TinyMCE editora u članke/stranice. Također ću pisati o tome kako aktivirati TinyMCE editor u sekciji komentara.