Anda tidak dapat meningkatkan daftar drop-down formatselect
. Tetapi Anda dapat meningkatkan dengan kait tiny_mce_before_init
drop down kedua styleselect
, ada menyembunyikan di instalasi WordPress default. The dokumentasi daftar semua default dan kemungkinan.
- inline - Nama elemen inline yang akan diproduksi misalnya "span". Pilihan teks saat ini akan dibungkus dalam elemen inline ini.
- block - Nama elemen blok yang akan diproduksi misalnya “h1 ″. Elemen blok yang ada dalam seleksi akan diganti dengan elemen blok baru.
- pemilih - pola pemilih CSS 3 untuk menemukan elemen dalam pemilihan oleh. Ini dapat digunakan untuk menerapkan kelas ke elemen tertentu atau hal-hal kompleks seperti baris ganjil dalam tabel.
- class - Daftar kelas yang dipisahkan spasi untuk menerapkan elemen yang dipilih atau elemen inline / blok yang baru.
- styles - Nama / objek nilai dengan item tyle CSS untuk diterapkan seperti warna dll.
- atribut - Nama / objek nilai dengan atribut untuk diterapkan ke elemen yang dipilih atau elemen inline / blok baru.
- exact - Menonaktifkan fitur gabung serupa gaya saat digunakan. Ini diperlukan untuk beberapa masalah pewarisan CSS seperti dekorasi teks untuk garis bawah / coret.
- wrapper - Menyatakan bahwa format saat ini adalah format wadah untuk elemen blok. Misalnya pembungkus div atau blockquote.
Tombol Gaya
Perhatikan bahwa, secara default, dropdown Style disembunyikan di WordPress. Mula-mula tambahkan tombol untuk format khusus ke bilah menu TinyMCE, misalnya baris 2 dengan kait mce_buttons_2
.
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
Gaya Kustom
Kemudian tingkatkan drop down tombol ini. Selain bermanfaat peningkatan melalui nilai tambahan dalam array, lihat kodeks untuk contoh ini.
/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Download Link',
'selector' => 'a',
'classes' => 'download'
),
array(
'title' => 'My Test',
'selector' => 'p',
'classes' => 'mytest',
),
array(
'title' => 'AlertBox',
'block' => 'div',
'classes' => 'alert_box',
'wrapper' => true
),
array(
'title' => 'Red Uppercase Text',
'inline' => 'span',
'styles' => array(
'color' => 'red', // or hex value #ff0000
'fontWeight' => 'bold',
'textTransform' => 'uppercase'
)
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
Hasil
Menu Drop down yang disempurnakan
Anda juga dapat meningkatkan drop down dengan menu pohon. Buat var dari contoh sumber di atas dengan lebih banyak struktur dalam array, seperti ikuti sumber.
$style_formats = array(
array(
'title' => 'Headers',
'items' => array(
array(
'title' => 'Header 1',
'format' => 'h1',
'icon' => 'bold'
),
array(
'title' => 'Header 2',
'format' => 'h2',
'icon' => 'bold'
)
)
),
array(
'title' => 'Download Link',
'selector' => 'a',
'classes' => 'download'
)
);
Untuk lebih banyak kemungkinan dan parameter, lihat nilai default bidang Format Format turun bawah (tulis dalam javascript).
var defaultStyleFormats = [
{title: 'Headers', items: [
{title: 'Header 1', format: 'h1'},
{title: 'Header 2', format: 'h2'},
{title: 'Header 3', format: 'h3'},
{title: 'Header 4', format: 'h4'},
{title: 'Header 5', format: 'h5'},
{title: 'Header 6', format: 'h6'}
]},
{title: 'Inline', items: [
{title: 'Bold', icon: 'bold', format: 'bold'},
{title: 'Italic', icon: 'italic', format: 'italic'},
{title: 'Underline', icon: 'underline', format: 'underline'},
{title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
{title: 'Superscript', icon: 'superscript', format: 'superscript'},
{title: 'Subscript', icon: 'subscript', format: 'subscript'},
{title: 'Code', icon: 'code', format: 'code'}
]},
{title: 'Blocks', items: [
{title: 'Paragraph', format: 'p'},
{title: 'Blockquote', format: 'blockquote'},
{title: 'Div', format: 'div'},
{title: 'Pre', format: 'pre'}
]},
{title: 'Alignment', items: [
{title: 'Left', icon: 'alignleft', format: 'alignleft'},
{title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
{title: 'Right', icon: 'alignright', format: 'alignright'},
{title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
]}
];
Tambahkan Custom Stylesheet ke editor
Sekarang adalah poin terakhir, bahwa Anda memasukkan custom css untuk format ini, melalui hook mce_css
.
/**
* Apply styles to the visual editor
*/
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {
if ( ! empty( $url ) )
$url .= ',';
// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';
return $url;
}
Jangan lupa untuk menambahkan aturan stylesheet ini juga ke stylesheet ujung depan.
Hapus Tombol Format
Sebagai perangkat tambahan, Anda dapat menghapus tombol formatselect
drop down melalui cek untuk nilai dalam array tombol. Tambahkan sumber ikuti ke fungsi fb_mce_editor_buttons
di hook mce_buttons_2
.
$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
foreach ( $buttons as $key => $value ) {
if ( 'formatselect' === $value )
unset( $buttons[$key] );
}
}
formatselect
Dropdown. Dropdown ini tidak memiliki fungsi untuk membangun menu, adalah nilai statis di tinymce.js dari WP.$settings['style_formats_merge'] = true;
ke »fb_mce_before_init ()«.Per jawaban ini , kunci untuk mendapatkan gaya muncul di dropdown adalah untuk
unset($settings['preview_styles']);
sumber
Sangat membantu dan terima kasih atas
defaultstyles
petunjuk. Saya menemukan bahwa menggabungkan array tidak berfungsi sampai mengubah opsi-opsi default itu menjadi JSON yang valid (bukan JavaScript yang valid). Di bawah ini memungkinkan menambahkan drop-down WordPress tinymce alih-alih digantiOpsi default (JSON):
Dalam functions.php mengembalikan hash opsi yang lebih besar:
sumber
$settings['style_formats_merge'] = true;
ke »fb_mce_before_init ()«.