\u0160is raksts ir paredz\u0113ts pieredz\u0113ju\u0161iem lietot\u0101jiem, un jums b\u016bs nepiecie\u0161amas pamata kod\u0113\u0161anas prasmes. \u0145emiet v\u0113r\u0101 ar\u012b to, ka eksperiment\u0113\u0161ana re\u0101l\u0101 vietn\u0113 nav laba ideja, jo pat maz\u0101k\u0101s k\u013c\u016bdas rezult\u0101t\u0101 j\u016bsu vietne var k\u013c\u016bt nepieejama. Bet, ja pl\u0101nojat uz\u0146emties risku, vispirms noteikti izveidojiet vismaz WordPress dubl\u0113jumkopiju.<\/p>\n
Izveidojiet savu pirmo TinyMCE spraudni<\/h2>\n
S\u0101ksim, izveidojot piel\u0101gotu pogu r\u012bkjoslai. Noklik\u0161\u0137inot uz \u0161\u012bs pogas, lietot\u0101js var\u0113s pievienot saiti ar piel\u0101gotu CSS klasi. Pilns pirmkods tiks sniegts \u0161\u012b raksta beig\u0101s, bet pirms tam soli pa solim izveidosim m\u016bsu spraudni. Vispirms map\u0113 wp-content\/plugins izveidojiet direktoriju un nosauciet to tinymce-custom-link-class.<\/p>\n
Spraud\u0146a nosaukums<\/h2>\n
Izveidojiet jaunu failu tikko izveidotaj\u0101 direktorij\u0101 un nosauciet to tinymce-custom-link-class.php Pievienojiet \u0161o kodu failam un saglab\u0101jiet to.<\/p>\n
\r\n\/**\r\n * Plugin Name: TinyMCE Custom Link Class\r\n * Plugin URI: https:\/\/coma.lv\r\n * Version: 1.0\r\n * Author: Coma.lv\r\n * Author URI: https:\/\/coma.lv\r\n * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor\r\n * License: GPL2\r\n *\/\r\n<\/pre>\n\u0160is ir vienk\u0101r\u0161i PHP koment\u0101rs, kas nor\u0101da WordPress spraud\u0146a nosaukumu, k\u0101 ar\u012b t\u0101 autoru un aprakstu. Sav\u0101 WordPress administratora panel\u012b aktiviz\u0113jiet jauno spraudni, atverot lapu Plugins \u2013 Installed Plugins un sada\u013c\u0101 TinyMCE Custom Link Class noklik\u0161\u0137inot uz saites Activate.<\/p>\n
<\/p>\n
M\u016bsu spraud\u0146u klases iestat\u012b\u0161ana<\/h2>\n
Ja diviem spraud\u0146iem ir funkcijas ar vien\u0101du nosaukumu, tas var izrais\u012bt k\u013c\u016bdu. M\u0113s izvair\u012bsimies no \u0161\u012bs probl\u0113mas, iek\u013caujot savas funkcijas klas\u0113.<\/p>\n
\r\nclass TinyMCE_Custom_Link_Class {\r\n \r\n \/**\r\n * Constructor. Called when the plugin is initialised.\r\n *\/\r\n function __construct() {\r\n \r\n }\r\n \r\n}\r\n \r\n$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;\r\n\r\n<\/pre>\nT\u0101d\u0113j\u0101di tiek izveidota PHP klase kop\u0101 ar konstrukciju, kas tiek izsaukta, kad sasniedzam rindu $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;<\/p>\n
Nevienai \u0161ai klasei pievienotajai funkcijai nevajadz\u0113tu b\u016bt pretrun\u0101 ar citiem WordPress spraud\u0146iem.<\/p>\n
M\u016bsu TinyMCE spraud\u0146a iestat\u012b\u0161ana<\/h2>\n
T\u0101l\u0101k mums j\u0101pasaka TinyMCE, ka v\u0113lamies vizu\u0101l\u0101 redaktora r\u012bkjoslai pievienot piel\u0101gotu pogu. Lai to izdar\u012btu, m\u0113s varam izmantot WordPress actions. \u0160aj\u0101 gad\u012bjum\u0101 action kuru sauc par init. Pievienojiet spraud\u0146a funkcijai __construct() \u0161\u0101du kodu.<\/p>\n
\r\nif ( is_admin() ) {\r\n add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );\r\n}\r\n<\/pre>\n\u0160\u012b funkcija p\u0101rbaud\u012bs, vai atrodamies administratora panel\u012b. Ja atbilde ir j\u0101, funkcija l\u016bdz palaist funkciju setup_tinymce_plugin m\u016bsu klas\u0113, tikl\u012bdz WordPress ir beidzis iel\u0101di. P\u0113c tam pievienojiet funkciju setup_tinymce_plugin:<\/p>\n
\r\n\/**\r\n* Check if the current user can edit Posts or Pages, and is using the Visual Editor\r\n* If so, add some filters so we can register our plugin\r\n*\/\r\nfunction setup_tinymce_plugin() {\r\n \r\n\/\/ Check if the logged in WordPress User can edit Posts or Pages\r\n\/\/ If not, don't register our TinyMCE plugin\r\n \r\nif ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {\r\n return;\r\n}\r\n \r\n\/\/ Check if the logged in WordPress User has the Visual Editor enabled\r\n\/\/ If not, don't register our TinyMCE plugin\r\nif ( get_user_option( 'rich_editing' ) !== 'true' ) {\r\nreturn;\r\n}\r\n \r\n\/\/ Setup some filters\r\nadd_filter( 'mce_external_plugins', array( $this, 'add_tinymce_plugin' ) );\r\nadd_filter( 'mce_buttons', array( $this, 'add_tinymce_toolbar_button' ) );\r\n \r\n }\r\n<\/pre>\n\u0160\u012b funkcija jau p\u0101rbaud\u012bs, vai pieteicies lietot\u0101js var redi\u0123\u0113t zi\u0146as vai lapas. Ja n\u0113, tad nav j\u0113gas re\u0123istr\u0113t m\u016bsu spraudni \u0161im lietot\u0101jam, jo \u200b\u200bvi\u0146\u0161 nekad neredz\u0113s vizu\u0101lo redaktoru. P\u0113c tam m\u0113s p\u0101rbaud\u0101m, vai lietot\u0101js izmanto vizu\u0101lo redaktoru, jo da\u017ei lietot\u0101ji to atsp\u0113jo sav\u0101 profil\u0101. Atkal, ja lietot\u0101js neizmanto vizu\u0101lo redaktoru, m\u0113s atgrie\u017eamies (exit), jo mums nekas cits nav vajadz\u012bgs. Visbeidzot, m\u0113s pievienojam divus WordPress filtrus – mce_external_plugins un mce_buttons, lai izsauktu funkcijas, kas iel\u0101d\u0113s nepiecie\u0161amo Javascript failu TinyMCE un pievienos atbilsto\u0161o pogu r\u012bkjoslai.<\/p>\n
Javascript faila un vizu\u0101l\u0101 redaktora pogas re\u0123istr\u0113\u0161ana<\/h2>\n
Pievienosim funkciju add_tinymce_plugin:<\/p>\n
\r\n\/**\r\n* Adds a TinyMCE plugin compatible JS file to the TinyMCE \/ Visual Editor instance\r\n*\r\n* @param array $plugin_array Array of registered TinyMCE Plugins\r\n* @return array Modified array of registered TinyMCE Plugins\r\n*\/\r\nfunction add_tinymce_plugin( $plugin_array ) {\r\n \r\n$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';\r\nreturn $plugin_array;\r\n \r\n}\r\n<\/pre>\n\u0160\u012b funkcija liek TinyMCE iel\u0101d\u0113t Javascript failus, kas atrodas \u0161\u016bn\u0101 $plugin_array. \u0160ie faili pateiks TinyMCE, kas j\u0101dara. Mums ar\u012b j\u0101pievieno kods funkcijai add_tinymce_toolbar_button, lai pazi\u0146otu TinyMCE par pogu, kuru m\u0113s v\u0113lamies pievienot r\u012bkjoslai.<\/p>\n
\r\n\/**\r\n* Adds a button to the TinyMCE \/ Visual Editor which the user can click\r\n* to insert a link with a custom CSS class.\r\n*\r\n* @param array $buttons Array of registered TinyMCE Buttons\r\n* @return array Modified array of registered TinyMCE Buttons\r\n*\/\r\nfunction add_tinymce_toolbar_button( $buttons ) {\r\n \r\narray_push( $buttons, '|', 'custom_link_class' );\r\nreturn $buttons;\r\n}\r\n<\/pre>\nT\u0101d\u0113j\u0101di TinyMCE pogu \u0161\u016bnai tiek pievienoti divi elementi: atdal\u012bt\u0101js (|) un m\u016bsu pogas nosaukums (custom_link_class). Saglab\u0101jiet spraudni un redi\u0123\u0113jiet lapu vai zi\u0146u, lai skat\u012btu vizu\u0101lo redaktoru. Visticam\u0101k, j\u016bs neredz\u0113sit r\u012bkjoslu.<\/p>\n
<\/p>\n
Neuztraucieties \u2014 ja skat\u0101ties brauzera inspektor\u0101, j\u016bs redz\u0113sit TinyMCE \u0123ener\u0113tu k\u013c\u016bdu 404, nor\u0101dot, ka t\u0101 nevar atrast m\u016bsu Javascript failu.<\/p>\n
<\/p>\n
T\u0101 paties\u012bb\u0101 ir laba z\u012bme, jo tas noz\u012bm\u0113, ka esam veiksm\u012bgi re\u0123istr\u0113ju\u0161i piel\u0101gotu TinyMCE spraudni un tagad mums ir j\u0101izveido Javascript fails, kas nor\u0101da TinyMCE, kas j\u0101dara.<\/p>\n
JavaScript spraud\u0146a izveido\u0161ana<\/h2>\n
Izveidojiet jaunu failu map\u0113 wp-content\/plugins\/tinymce-custom-link-class un pie\u0161\u0137iriet tam nosaukumu tinymce-custom-link-class.js, p\u0113c tam pievienojiet tam \u0161\u0101du kodu:<\/p>\n
\r\n(function() {\r\n tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {\r\n \r\n });\r\n})();\r\n<\/pre>\nTas izsauc TinyMCE Plugin Manager klasi, ko varam izmantot, lai veiktu daudzas ar spraud\u0146iem saist\u012btas darb\u012bbas. Jo \u012bpa\u0161i m\u0113s pievienojam savu spraudni TinyMCE, izmantojot funkciju add. Tam nepiecie\u0161ami divi elementi; spraud\u0146a nosaukums (custom_link_class) un anonimit\u0101tes funkcija. Ja esat iepazinies ar funkciju j\u0113dzienu kod\u0113\u0161an\u0101, tad anon\u012bma funkcija ir vienk\u0101r\u0161i funkcija bez nosaukuma. Piem\u0113ram, funkcija foobar () { … } ir funkcija, kuru m\u0113s varam izsaukt kaut kur citur koda iek\u0161pus\u0113, izmantojot foobar ().<\/p>\n
Izmantojot anon\u012bmo funkciju, m\u0113s nevaram izsaukt \u0161o funkciju nekur citur kod\u0101 – tikai izmantojot funkciju add(). Saglab\u0101jiet savu Javascript failu un s\u0101ciet redi\u0123\u0113t lapu vai zi\u0146u, lai redz\u0113tu vizu\u0101lo redaktoru. Ja viss str\u0101d\u0101, j\u016bs redz\u0113sit r\u012bkjoslu:<\/p>\n
<\/p>\n
\u0160obr\u012bd m\u016bsu poga nav pievienota r\u012bkjoslai. Tas ir t\u0101p\u0113c, ka m\u0113s tikai TinyMCE teic\u0101m, ka esam izveidoju\u0161i piel\u0101gotu spraudni. Tagad mums ir j\u0101pasaka TinyMCE, kas j\u0101dara, tas ir, r\u012bkjoslai j\u0101pievieno poga. Atjauniniet savu Javascript failu, aizst\u0101jot eso\u0161o kodu ar \u0161\u0101du:<\/p>\n
\r\n(function() {\r\n tinymce.PluginManager.add('custom_link_class', function(editor, url) {\r\n \r\n \/\/ Detect if ui.registry exists (v5+)\r\n if (editor.ui && editor.ui.registry && typeof editor.ui.registry.addButton === 'function') {\r\n \/\/ Modern TinyMCE (v5+)\r\n editor.ui.registry.addButton('custom_link_class', {\r\n text: 'Insert Button Link',\r\n tooltip: 'Insert Button Link',\r\n onAction: function() {\r\n editor.execCommand('custom_link_class');\r\n }\r\n });\r\n } else {\r\n \/\/ Legacy TinyMCE (v4)\r\n editor.addButton('custom_link_class', {\r\n title: 'Insert Button Link',\r\n cmd: 'custom_link_class'\r\n });\r\n }\r\n \r\n });\r\n})();\r\n<\/pre>\n\u0145emiet v\u0113r\u0101, ka m\u016bsu anon\u012bmajai funkcijai ir divi argumenti. Pirmais ir redaktors, kas ir TinyMCE vizu\u0101lais redaktors. T\u0101pat k\u0101 m\u0113s varam izsaukt da\u017e\u0101das funkcijas PluginManager, m\u0113s varam izsaukt da\u017e\u0101das funkcijas ar\u012b redaktor\u0101. \u0160aj\u0101 gad\u012bjum\u0101 m\u0113s izsaucam funkciju addButton, lai r\u012bkjoslai pievienotu pogu. Saglab\u0101jiet savu javascript failu un atgriezieties vizu\u0101laj\u0101 redaktor\u0101. No pirm\u0101 acu uzmetiena nekas nav main\u012bjies. Tom\u0113r, ja novietojat peles kursoru virs ikonas aug\u0161\u0113j\u0101 labaj\u0101 st\u016br\u012b, j\u016bs redz\u0113sit m\u0101jienu:<\/p>\n
<\/p>\n
M\u0113s esam veiksm\u012bgi pievienoju\u0161i pogu r\u012bkjoslai, ta\u010du tai ir nepiecie\u0161ams att\u0113ls. Pievienojiet \u0161\u0101du parametru funkcijai addButton zem title:<\/p>\n
image: url + ‘\/icon.png’,<\/em><\/p>\n
url ir m\u016bsu spraud\u0146a adrese. Tas ir noder\u012bgi, ja v\u0113lamies izveidot saiti uz att\u0113la failu no spraud\u0146a mapes. \u0160aj\u0101 gad\u012bjum\u0101 spraud\u0146a map\u0113 mums b\u016bs nepiecie\u0161ams att\u0113ls ar nosaukumu icon.png. Izmantojiet \u0161o ikonu:<\/p>\n
<\/p>\n
Restart\u0113jiet vizu\u0101lo redaktoru, un j\u016bs redz\u0113sit savu pogu ar ikonu:<\/p>\n
<\/p>\n
Nor\u0101diet palai\u0161anas komandu<\/h2>\n
\u0160obr\u012bd, ja noklik\u0161\u0137in\u0101siet uz pogas, nekas nenotiks. Pievienosim komandu, kas nor\u0101da TinyMCE, kas j\u0101dara. Pievienojiet t\u0101l\u0101k nor\u0101d\u012bto kodu m\u016bsu Javascript failam zem sada\u013cas editor.addButton beig\u0101m<\/p>\n
\r\n\/\/ Add Command when Button Clicked\r\neditor.addCommand('custom_link_class', function() {\r\n alert('Button clicked!');\r\n});\r\n<\/pre>\nAtk\u0101rtoti iel\u0101d\u0113jiet m\u016bsu vizu\u0101lo redaktoru, noklik\u0161\u0137iniet uz pogas, un tiks par\u0101d\u012bts pazi\u0146ojums, ka tikko noklik\u0161\u0137in\u0101j\u0101t uz pogas:<\/p>\n
<\/p>\n
Aizst\u0101sim pazi\u0146ojumu ar rindi\u0146u, kur\u0101 lietot\u0101jam tiek pras\u012bta saite, kuru vi\u0146\u0161 v\u0113las apvilkt ap atlas\u012bto tekstu vizu\u0101laj\u0101 redaktor\u0101.<\/p>\n
\r\n\/\/ Add Command when Button Clicked\r\neditor.addCommand('custom_link_class', function() {\r\n \/\/ Check we have selected some text that we want to link\r\n var text = editor.selection.getContent({\r\n 'format': 'html'\r\n });\r\n if ( text.length === 0 ) {\r\n alert( 'Please select some text to link.' );\r\n return;\r\n }\r\n \r\n \/\/ Ask the user to enter a URL\r\n var result = prompt('Enter the link');\r\n if ( !result ) {\r\n \/\/ User cancelled - exit\r\n return;\r\n }\r\n if (result.length === 0) {\r\n \/\/ User didn't enter a URL - exit\r\n return;\r\n }\r\n \r\n \/\/ Insert selected text back into editor, wrapping it in an anchor tag\r\n editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '<\/a>');\r\n});\r\n<\/pre>\nKodu bloks veic vair\u0101kas darb\u012bbas. Vispirms m\u0113s p\u0101rbaud\u0101m, vai lietot\u0101js ir atlas\u012bjis tekstu, ko iet\u012bt vizu\u0101laj\u0101 redaktor\u0101. Ja n\u0113, vi\u0146i redz\u0113s \u0161\u0101du zi\u0146ojumu.<\/p>\n
<\/p>\n
P\u0113c tam m\u0113s l\u016bdzam vi\u0146us ievad\u012bt saiti, v\u0113lreiz p\u0101rbaudot, ko vi\u0146i ir izdar\u012bju\u0161i. Ja vi\u0146i atc\u0113la vai neko neieviesa, tad ar\u012b m\u0113s neko nedar\u0101m.<\/p>\n
<\/p>\n
Visbeidzot, TinyMCE redaktor\u0101 palai\u017eam funkciju execCommand, izpildot darb\u012bbu mceReplaceContent. T\u0101d\u0113j\u0101di atlas\u012btais teksts tiek aizst\u0101ts ar m\u016bsu HTML kodu, kur\u0101 ir ietverta enkura saite ar class=”button”, izmantojot atlas\u012bto tekstu. Ja viss str\u0101d\u0101ja, j\u016bs redz\u0113sit atlas\u012bto tekstu, kas vizu\u0101laj\u0101 redaktor\u0101 ir saist\u012bts ar klasi, kas ir saist\u012bta ar pogu:<\/p>\n
<\/p>\n
Rezult\u0101ti<\/h2>\n
M\u0113s esam veiksm\u012bgi izveidoju\u0161i WordPress spraudni, kas pievieno pogu TinyMCE vizu\u0101lajam redaktoram WordPress. \u0160aj\u0101 apm\u0101c\u012bb\u0101 tika apskat\u012bti ar\u012b da\u017ei TinyMCE API un filtru integr\u0101cijas pamati. M\u0113s pievienoj\u0101m kodu, lai, kad lietot\u0101js noklik\u0161\u0137ina uz m\u016bsu piel\u0101got\u0101s pogas, vi\u0146am tiek pied\u0101v\u0101ts vizu\u0101laj\u0101 redaktor\u0101 atlas\u012bt tekstu, uz kuru var izveidot saiti p\u0113c saviem ieskatiem. Visbeidzot, m\u016bsu spraudnis aizst\u0101j atlas\u012bto tekstu ar t\u0101 atsauces versiju, kur\u0101 ir piel\u0101gota CSS klase ar nosaukumu button.<\/p>\n
\nM\u016bsu specialit\u0101te ir WordPress viet\u0146u izstr\u0101de un atbalsts. Kontakti bezmaksas konsult\u0101cijai \u2014 vadim@coma.lv<\/a>, +371 29394520<\/a><\/em><\/p>\n
\n","protected":false},"excerpt":{"rendered":"Ja esat WordPress izstr\u0101d\u0101t\u0101js, k\u0101d\u0101 br\u012bd\u012b jums var rasties nepiecie\u0161am\u012bba papla\u0161in\u0101t vai piel\u0101got vizu\u0101lo redaktoru. Piem\u0113ram, v\u0113l\u0113sities savai r\u012bkjoslai pievienot pogu, kas \u013cauj klientiem izmantot noteiktas funkcijas, neizmantojot HTML kodu. \u0160aj\u0101 rakst\u0101 m\u0113s jums pateiksim, k\u0101 WordPress izveidot spraudni TinyMCE. Pras\u012bbas \u0160is raksts ir paredz\u0113ts pieredz\u0113ju\u0161iem lietot\u0101jiem, un jums b\u016bs nepiecie\u0161amas pamata kod\u0113\u0161anas prasmes. \u0145emiet […]<\/p>\n","protected":false},"author":1,"featured_media":38201,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1226,1319,1302],"tags":[],"class_list":["post-34687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-pamacibas","category-spraudni"],"_links":{"self":[{"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/posts\/34687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/comments?post=34687"}],"version-history":[{"count":5,"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/posts\/34687\/revisions"}],"predecessor-version":[{"id":38221,"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/posts\/34687\/revisions\/38221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/media\/38201"}],"wp:attachment":[{"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/media?parent=34687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/categories?post=34687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coma.lv\/lv\/wp-json\/wp\/v2\/tags?post=34687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}