Home » Ask (Forum) » Cara Menambahkan Custom Style untuk WordPress Editor Visual?

Question

Hi, Perkenalkan saya sholeh
Saya adalah blogger aktif dan hampir setiap hari saya menulis artikel menggunakan visual editor di wp. Saya kadang merasa jenuh dengan melihat tampilan di visual editor karena memang berjam-jam saya melihat halaman tersebut. Mungkinkah ada rekan yang dapat membantu saya agar tampilan bisa sedikit berbeda akan bervariasi ?

Aug 25, 2016 (3 months ago) - Posted by 1 Comment

One Answer

  1. Yeni says:

    Hi,

    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.

    Register Member

Your Answer

Your email address will not be published. Required fields are marked *