WordPress 3.9+ TinyMCE 4 რჩევები: სტილის, ღილაკების, შრიფტების დამატება, ჩამონგრევის დამატება და pop-ups

WordPress 3.9-ში ჩემი ერთ-ერთი საყვარელი განახლება იყო TinyMCE ვერსიის 4.0 ბირთვს. ახალი TinyMCE გამოიყურება სუფთა სუფთა (ნამდვილად ემთხვევა WP დაფა) და მას აქვს მართლაც შესანიშნავი დამატებით ფუნქციონირება. ჩემი ძველი თემების და მოდულების განახლება საჭირო იყო ახალ TinyMCE– თან სამუშაოდ, ასე რომ გავატარე დრო API და გაერკვნენ რამდენიმე მაგარი რამ. ქვემოთ მოგიყვანთ რამდენიმე მაგალითს, თუ როგორ შეგიძლიათ გააგრძელოთ TinyMCE ფუნქციონირება. მე არ ვაპირებ თქვენს ყველა ნაბიჯს გავარჯიშოთ, ან რას ნიშნავს კოდი ზუსტად (ეს განკუთვნილია დეველოპერებისთვის), მაგრამ მოგაწვდით ზუსტ კოდს, რომლის კოპირება / ჩასმა შეგიძლიათ თქვენს თემასა თუ მოდულში და შემდეგ, შესაბამისად, ჩავიცვი.


შრიფტის ზომისა და შრიფტის ოჯახის არჩევა

როგორც წესი, შრიფტი და შრიფტის ზომები არ არის დამატებული TinyMCE რედაქტორში. ქვემოთ მოყვანილი ფუნქცია დაამატეთ ორივე ჩამოთვლა მეორე რიგის რედაქტორის მარცხენა მარცხენა მხარეს. უბრალოდ შეცვალეთ იქ, სადაც ნათქვამია “mce_buttons_2”, თუ გსურთ იგი სხვა რიგში (მაგალითად: გამოიყენეთ “mce_buttons_3” მე -3 რიგისთვის).

// ჩართეთ შრიფტის ზომა და შრიფტის ოჯახი ირჩევს რედაქტორს
if (! function_exists ('wpex_mce_buttons')) {
ფუნქცია wpex_mce_buttons ($ ღილაკი) {
array_unshift ($ ღილაკი, 'fontselect'); // შრიფტის დამატება
array_unshift ($ ღილაკი, 'fontsizeselect'); // შრიფტის ზომის დამატება
$ ღილაკების დაბრუნება;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

პერსონალური შრიფტის ზომის დამატება

ნაგულისხმევი შრიფტის ზომები მითითებულია pt მნიშვნელობებზე, რაც ყოველთვის იდეალური არ არის. მირჩევნია პიქსელის მნიშვნელობები გამოვიყენო (12px, 13px, 14px, 16px..etc) და უფრო მეტი ვარიანტები მივცეთ grater მოქნილობისთვის. ქვემოთ მოყვანილი ფუნქცია შეცვლის შრიფტის ზომების პარამეტრების პარამეტრებს ჩამონგრევის სელექტორში.

// mce რედაქტორის შრიფტის ზომების მორგება
if (! function_exist ('wpex_mce_text_size')) {
ფუნქცია wpex_mce_text_size ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
დაბრუნება $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_size');

პირადი შრიფტების დამატება

შრიფტის ოჯახის შერჩევისას შრიფტის ნაგულისხმევი პარამეტრები არის ყველა “ვებ-უსაფრთხო” შრიფტი, რა თქმა უნდა, მაგრამ თუ გსურთ ამაზე მეტი შრიფტის დამატება. იქნებ რამდენიმე შრიფტი გქონდეთ? ჩვენ ნამდვილად მარტივია, რომ გადახედოთ ქვემოთ მოცემულ მაგალითს.

// დაამატეთ პერსონალური შრიფტები შრიფტების სიაში
თუ (! function_exists ('wpex_mce_google_fonts_array')) {
ფუნქცია wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, ჯერ; Arial = arial, helvetica, sans-serif; Arial Black = arial black, ავანგარდი; წიგნი Antiqua = წიგნის ანტიკა, პალატინო; კომიკური სან MS = კომიკური sans ms, sans-serif; კურიერი ახალი = კურიერი ახალი, კურიერი; საქართველო = საქართველო, პალატინო; Helvetica = helvetica; Impact = impact, chicago; Symbol = სიმბოლო; Tahoma = tahoma, arial, helvetica, sans-serif; ტერმინალი = ტერმინალი, მონაკო; Times New Roman = ჯერ ახალი რომანი, ჯერ; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = walddings, zapf dingbats ';
დაბრუნება $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

ყურადღება მიაქციეთ, როგორ დავამატე “ლათინო” ამ კოდის ჩამონათვალში? ეს მარტივია! ჩემს სულ WordPress თემაში, ფაქტობრივად, ვაკვირდები საიტზე გამოყენებულ ყველა ჩვეულ შრიფტს, როგორც ეს განსაზღვრულია თემატურ პანელში და ვამატებ მათ შერჩეულ ყუთში, ასე რომ ისინი ასევე ხელმისაწვდომია თქვენი პოსტების / გვერდების რედაქტირების დროს (ტკბილი). მაგრამ კოდი მხოლოდ შრიფტის ოჯახს აცნობებს მას ჩამოსაშლელად, რომ იგი ჯადოსნურად არ დატვირთავს სკრიპტს, ასე რომ, როდესაც შეცვლით ტექსტს რედაქტორში, შეგიძლიათ სინამდვილეში დაინახოთ, რომ მასზე გამოყენებულია ჩვეულებრივი შრიფტი … ეს არის ის, რაც ქვემოთ მოცემულია კოდი!

// დაამატეთ Google სკრიპტები რედაქტორთან გამოსაყენებლად
თუ (! function_exists ('wpex_mce_google_fonts_styles')) {
ფუნქცია wpex_mce_google_fonts_styles ()
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

ჩართეთ ფორმატები (სტილი) ვარდნის მენიუ და დაამატეთ ახალი სტილები

გაიხსენეთ WP 3.8-ში არსებული “სტილები”? ეს ძალიან მაგარი იყო! თქვენ შეგიძლიათ გამოიყენოთ ის, რომ დაამატოთ რამდენიმე მაგარი კლასი, რომელიც გამოიყენებს ფოსტის რედაქტორს (მე ვიყენებ მას WPExplorer- ზე, ღილაკებზე, ფერადი კოლოფებზე, ყუთებზე .. და ა.შ.). ჩვენ WP 3.9-ში თქვენ კვლავ შეგიძლიათ დაამატოთ სტილი, თუმცა, იგი დაარქვეს ახალ TinyMCE 4.0-ს “ფორმატებში”, ასე რომ, იგი მუშაობს ცოტა განსხვავებულად. ქვემოთ მოცემულია მაგალითი, თუ როგორ უნდა ჩართოთ ფორმატები ჩამოტვირთვის და ასევე დაამატოთ მას რამდენიმე ახალი ელემენტი.

WordPress TInyMCE ფორმატის ვარდნა მენიუ

ჩართეთ ფორმატის Dropdown მენიუ

ეს რეალურად კეთდება WP 3.9– ით ადრე, მაგრამ არ ვიცი, როგორ გააკეთო ეს.

// ფორმატის დამატება Dropdown მენიუს MCE
if (! function_exists ('wpex_style_select')) {
ფუნქცია wpex_style_select ($ ღილაკი) {
array_push ($ ღილაკი, 'სტილისაკრავი');
$ ღილაკების დაბრუნება;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

დაამატეთ ახალი ელემენტები ფორმატებში

ახალი ნივთების დამატება ძალიან მარტივია. გაითვალისწინეთ, თუ როგორ დავამატე “$ პარამეტრები [‘ style_formats_merge “] = ჭეშმარიტი;” ქვემოთ მოცემულ კოდში, ეს დარწმუნდება, რომ თქვენი რედაქტივები დაემატა ფორმატის ჩამოსაშლელ მენიუს სხვა დანარჩენებთან ერთად – ნუ გადაწერთ მთელ ნივთს (იქნებ სხვა დანამატებსაც სურთ გამოიყენონ იგი).

// ახალი სტილის დამატება მენიუს TinyMCE "ფორმატებში"
if (! function_exists ('wpex_styles_dropdown')) {
ფუნქცია wpex_styles_dropdown ($ პარამეტრები) {

// შექმენით ახალი სტილის მასივი
$ new_styles = მასივი (
მასივი (
'title' => __ ('Custom Styles', 'wpex'),
'საკითხი' => მასივი (
მასივი (
'title' => __ ('თემის ღილაკი', 'wpex'),
'selector' => 'a',
'კლასები' => 'თემის ღილაკი'
),
მასივი (
'title' => __ ('Highlight', 'wpex'),
'inline' => 'სპანი',
'კლასები' => 'ტექსტის მონიშვნა',
),
),
),
);

// ძველი და ახალი სტილის შერწყმა
$ პარამეტრები ['style_formats_merge'] = მართალია;

// ახალი სტილის დამატება
$ პარამეტრები ['style_formats'] = json_encode ($ new_styles);

// ახალი პარამეტრების დაბრუნება
$ პარამეტრების დაბრუნება;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

მარტივი MCE ღილაკის დამატება

TinyMCE რედაქტორზე ახალი ღილაკის დამატება განსაკუთრებით სასარგებლოა კატალოგებისთვის, რადგან როგორც მომხმარებელი, თქვენ არ უნდა გახსოვდეთ ნებისმიერი კოდი, შეგიძლიათ უბრალოდ დააჭიროთ ღილაკს და ის ჩადებს მას. მე არ ვამბობ TinyMCE– ს 100 ღილაკის დამატებაზე, თქვენი ყველა მალსახმობისთვის (მეზიზღება, როდესაც დეველოპერები ამას აკეთებენ, ეს ისეთი ცუდი პრაქტიკაა და საშინლად გამოიყურება), მაგრამ თუ დაამატებთ 1 ან რამდენიმე, ამას გავუშვებ pass თუ თქვენ გსურთ დაამატოთ თაიგული, შემდეგ თქვენ უნდა შექმნათ ქვემენიუ, როგორც ეს მოცემულია შემდეგ ნაწილში.

WordPress MCE ახალი ღილაკი

PHP კოდი – გამოაცხადეთ ახალი MCE მოდული WP

ეს კოდი გამოაცხადებს თქვენს ახალ MCE მოდულს, რა თქმა უნდა შეცვალეთ JavaScript ფაილის „mce-button.js“ ადგილმდებარეობა, რომ შეესაბამებოდეს თქვენი ფაილის ადგილმდებარეობას (რომელსაც მე მოგცემთ კოდი, როგორც შემდეგ ქვეპუნქტში), ასევე როგორც აშკარად დაარქვა წინას “ჩემი” რაღაც უფრო უნიკალურს!

// თქვენს ფუნქციებს აკრავს სწორი ფილტრები
ფუნქცია my_add_mce_button ()
// შეამოწმეთ მომხმარებლის უფლებები
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
დაბრუნების;
}
// შეამოწმეთ ჩართულია WYSIWYG
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// ახალი ღილაკის დამწერლობის გამოცხადება
ფუნქცია my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
დაბრუნება $ plugin_array;
}

// დაარეგისტრირეთ ახალი ღილაკი რედაქტორში
ფუნქციონირებს my_register_mce_button ($ ღილაკი)
array_push ($ ღილაკი, 'my_mce_button');
$ ღილაკების დაბრუნება;
}

JS კოდი – დაამატეთ ღილაკს MCE

ეს js კოდი გადადის jS ფაილში, რომელიც რეგისტრირებულია ზემოთ მოცემულ ნაწილში, “Symple_shortcodes_add_tinymce_plugin” ფუნქციით. ამას უნდა დაამატოთ ახალი ტექსტური ღილაკი, რომელიც ამბობს “ახალი ღილაკი” თქვენს რედაქტორს და როდესაც დააჭირეთ მას, ჩადებს ტექსტს “WPExplorer.com არის გასაოცარია!” (რა თქმა უნდა).

(ფუნქცია ()
tinymce.PluginManager.add ('my_mce_button', ფუნქცია (რედაქტორი, url) {
editor.addButton ('my_mce_button', {
ტექსტი: 'ახალი ღილაკი',
ხატი: ყალბი,
onclick: ფუნქცია ()
editor.insertContent ('WPExplorer.com გასაოცარია!');
}
});
});
}) ();

დაამატეთ პირადი ხატი თქვენს ახალ MCE ღილაკზე

ზემოთ ვაჩვენე, თუ როგორ უნდა დაამატოთ ახალი ღილაკი, რომელიც რედაქტორში გამოჩნდება როგორც “ახალი ღილაკი”, ეს ოდნავ კოჭლია … ამიტომ შეცვლილი კოდი გაჩვენებთ თუ როგორ შეგიძლიათ დაამატოთ თქვენი საკუთარი ხატი.

ჩატვირთეთ სტილის ფურცელი თქვენს CSS- ით

გამოიყენეთ ეს ფუნქცია, გამოიყენეთ ახალი სტილის ფურცელი თქვენს ადმინისტრაციულ პანელში გამოსაყენებლად – რამდენიმე მოდული / თემა შეიძლება უკვე დაამატეთ სტილის ფურცელს, ასე რომ, თუ თქვენი თემა / მოდული ამას აკეთებს, გამოტოვეთ ეს და უბრალოდ დაამატეთ თქვენი CSS და შეცვალეთ js (ნაჩვენებია ქვემოთ).

ფუნქცია my_shortcodes_mce_css ()
wp_enqueue_style ('Symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scriptts', 'my_shortcodes_mce_css');

თქვენი პირადი CSS

ეს არის CSS, რომ დაამატოთ მანამდე დატვირთული სტილის ფურცელი.

i.my-mce-icon
background-image: url ('თქვენი ICON URL');
}

Tweak თქვენი Javascript

ახლა მარტივი tweak javascript, რომელიც თქვენ დაამატეთ ადრე, რომ წაიშალოს ტექსტური პარამეტრი და იმის ნაცვლად, რომ ხატი ყალბად დააწეროთ, მისცეს მას პირადი კლასის სახელი.

(ფუნქცია ()
tinymce.PluginManager.add ('my_mce_button', ფუნქცია (რედაქტორი, url) {
editor.addButton ('my_mce_button', {
icon: 'my-mce-icon',
onclick: ფუნქცია ()
editor.insertContent ('WPExplorer.com გასაოცარია!');
}
});
});
}) ();

ქვემენიუს ღილაკის დამატება

MCE ღილაკი Submenu

ადრე აღვნიშნე, რომ TinyMCE შტრიხზე ტონის ახალი ხატების დამატება ცუდი იდეაა (და ეს არის), ასე რომ შეამოწმეთ ქვემოთ მოყვანილი კოდი, რომ ნახოთ, თუ როგორ შეგიძლიათ შეცვალოთ JavaScript, რომ შეცვალოთ ქვემენიუ თქვენი საკუთარი ღილაკისთვის. თუ გსურთ ნახოთ იგი მოქმედებაში, შეამოწმეთ ჩემი სიმბოლური კოდირების ვიდეო.

(ფუნქცია ()
tinymce.PluginManager.add ('my_mce_button', ფუნქცია (რედაქტორი, url) {
editor.addButton ('my_mce_button', {
text: 'Sample Dropdown',
ხატი: ყალბი,
ტიპი: 'მენუბუტტონი',
მენიუ: [
{
ტექსტი: 'პუნქტი 1',
მენიუ: [
{
ტექსტი: 'ქვე-პუნქტი 1',
onclick: ფუნქცია ()
editor.insertContent ('WPExplorer.com გასაოცარია!');
}
},
{
ტექსტი: 'ქვეპუნქტი 2',
onclick: ფუნქცია ()
editor.insertContent ('WPExplorer.com გასაოცარია!');
}
}
]
},
{
ტექსტი: 'პუნქტი 2',
მენიუ: [
{
ტექსტი: 'ქვე-პუნქტი 1',
onclick: ფუნქცია ()
editor.insertContent ('WPExplorer.com გასაოცარია!');
}
},
{
ტექსტი: 'ქვეპუნქტი 2',
onclick: ფუნქცია ()
editor.insertContent ('WPExplorer.com გასაოცარია!');
}
}
]
}
]
});
});
}) ();

თქვენს ღილაკზე pop-up ფანჯრის დამატება

ზემოთ მოცემულ მაგალითში შეიძლება შეამჩნიოთ, რომ ყველა ღილაკი უბრალოდ ჩასმულია ტექსტს “WPExplorer.com გასაოცარია!” რა არის მაგარი, მაგრამ რა ხდება pop-up ფანჯრის შექმნაზე, სადაც მომხმარებელს შეუძლია შეცვალოს ტექსტში ჩასმული ტექსტი? ახლა ეს კარგი იქნება! ეს არის ის, რაც მე დავამატე ჩემი Symple კოდირების 1.6 ვერსიაში, რაც მოდული გახდება უფრო მოსახერხებელი.

WordPress MCE pop-up ფანჯარა

(ფუნქცია ()
tinymce.PluginManager.add ('my_mce_button', ფუნქცია (რედაქტორი, url) {
editor.addButton ('my_mce_button', {
text: 'Sample Dropdown',
ხატი: ყალბი,
ტიპი: 'მენუბუტტონი',
მენიუ: [
{
ტექსტი: 'პუნქტი 1',
მენიუ: [
{
ტექსტი: 'Pop-Up',
onclick: ფუნქცია ()
editor.windowManager.open ({
სათაური: 'ჩადეთ შემთხვევითი მოკლე კოდი',
სხეული: [
{
ტიპი: 'textbox',
სახელი: 'textboxName',
ეტიკეტი: 'ტექსტური ყუთი',
მნიშვნელობა: '30'
},
{
ტიპი: 'textbox',
სახელი: 'multilineName',
ეტიკეტი: 'მრავალწლიანი ტექსტური ყუთი',
მნიშვნელობა: 'აქ ბევრი რამის თქმა შეგიძლიათ',
multiline: მართალია,
წთ სიგანე: 300,
min სიმაღლე: 100
},
{
ტიპი: 'სიის ყუთი',
სახელი: 'listboxName',
ეტიკეტი: 'სიის ყუთი',
'მნიშვნელობები': [
{ტექსტი: 'ვარიანტი 1', მნიშვნელობა: '1',
{ტექსტი: 'ვარიანტი 2', მნიშვნელობა: '2',
{ტექსტი: 'ვარიანტი 3', მნიშვნელობა: '3'
]
}
],
onsubmit: ფუნქცია (e)
editor.insertContent ('[[შემთხვევითი_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

ეს მაგარია… ახლა რა?

კარგი კითხვაა! ახლა დროა, გაითვალისწინოთ ეს გასაოცარია რჩევები და შექმენით რაიმე ეპიკური ან განაახლეთ თქვენი მოდული / თემები, რომ შეესაბამებოდეს WordPress 3.9– ს ახალ TinyMCE- ს. ნება მიბოძეთ გაეცანით ქვემოთ მოცემულ კომენტარებში!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me