WordPress visual Editor dilengkapi dengan pilihan format dasar. Namun, terkadang Anda mungkin perlu gaya kustom Anda sendiri untuk menambahkan tombol atau button CSS, blok konten, slogan, dll. Beralih dari Visual editor teks dan menambahkan CSS secara manual sangatlah memakan waktu. Pada artikel tutorial wordpress ini, Saya akan menunjukkan cara untuk menambahkan Custom Style untuk WordPress editor visual, sehingga Anda dapat menambahkan editor visual custom anda sendiri di setiap konten anda.

Baca : Menambah Fitur TinyMCE WordPress [no plugin]

Catatan: Tutorial ini membutuhkan pengetahuan dasar CSS.

Menambahkan Custom Styles WordPress Visual Editor

Kita akan mulai dengan menambahkan Style custom dan pilihan format anda sendiri di WordPress editor visual tanpa menginstal plugin baru.

Karena anda akan mengedit file theme yang anda gunakan. Pada tutorial ini, saya akan menambahkan style blok konten dan tombol CSS custom di pos.

Hal pertama yang perlu anda lakukan adalah menambahkan custom style drop down menu di WordPress editor visual.

Cukup copy dan paste kode berikut dalam file functions.php theme wordpress anda.

function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');

Code ini akan membuat menu drop down styleselect di baris kedua dari tombol tinymce. Anda akan perlu untuk mengklik tombol kitchen sink untuk melihatnya.

Setelah menambahkan menu drop-down untuk custom style anda, langkah selanjutnya adalah mengisinya dengan pilihan. Cukup copy dan paste code ini di file functions.php anda.

/*
* Callback function to filter the MCE settings
*/

function my_mce_before_init_insert_formats( $init_array ) {  

// Define the style_formats array

	$style_formats = array(  
		// Each array child is a format with it's own settings
		array(  
			'title' => 'Content Block',  
			'block' => 'span',  
			'classes' => 'content-block',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Blue Button',  
			'block' => 'span',  
			'classes' => 'blue-button',
			'wrapper' => true,
		),
		array(  
			'title' => 'Red Button',  
			'block' => 'span',  
			'classes' => 'red-button',
			'wrapper' => true,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

Dalam kode ini saya telah menambahkan tiga pilihan untuk menu drop down. Blok konten, blue button, dan red button.

Jika Anda mempelajari kode ini, Anda akan melihat bahwa setiap format gaya memiliki title, blok, class, dan wrapper. Tit;e adalah apa yang akan Anda lihat di TinyMCE drop down menu di editor visual Anda.

Block adalah nama dari elemen block untuk menghasilkan teks yang dipilih. Saya telah menggunakan span, Anda dapat menggunakan setiap elemen lain yang Anda inginkan. Classes akan menambah class CSS untuk elemen..

Setelah menambahkan kode ini, Silahkan lihat post editor dan lihat akan melihat menu dropdown baru. Namun, memilih pilihan ini tidak akan membuat perubahan apapun dulu. Anda perlu menambahkan aturan CSS untuk stylesheet theme anda.

Berikut adalah kode CSS yang saya gunakan untuk tutorial.

.content-block {
    border:1px solid #eee;
    padding:3px;
    background:#ccc;
    max-width:250px;
    float:right;
    text-align:center;
}
.content-block:after {
    clear:both;
}
.blue-button {
	background-color:#33bdef;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

.red-button {
	background-color:#bc3315;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	padding:6px 24px;
	text-decoration:none;
}

Copy dan paste CSS ini ke theme atau stylesheet style.css file theme anda. Editor stylesheet mengontrol tampilan konten Anda dalam editor visual.

Sekaran coba tambahkan salah satu custom style pada konten anda, dan lihat hasilnya. Jangan ragu untuk bermain-main dengan kode dengan menambahkan unsur-unsur dan style Anda sendiri.

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.