Как добавить свою иконку в шапку редактора (классического) Wordpress?

Создал несколько шорткодов для вставки на страницах Wordpress, а чтобы их не забыть хочу подключить их в шапку редактора, использую классический редактор, т.е. не гутенберг. Как это сделать через фильтр?
  • Вопрос задан
  • 153 просмотра
Решения вопроса 1
Tolly
@Tolly Автор вопроса
https://code.tutsplus.com/tutorials/guide-to-creat...
https://www.tiny.cloud/docs/quick-start/

functions.php
# Шорткод [youtube] - плеер youtube на странице сайта
function youtube_player($atts) {
  $atts = shortcode_atts( array(
        'vid' => 'k_okcNVZqqI', // id видео на ютубе
        'vol' => '20' // громкость от 0..100*/
    ), $atts );

  # генерируем уникальное id плеера
  $id = md5(uniqid(rand(),true));

  return "<div class=\"player_wrapper\"><div class=\"youtube_player\" data--video=\"id:'{$id}',videoId:'{$atts['vid']}',volume:'{$atts['vol']}'\"></div></div>";
}

add_shortcode('youtube', 'youtube_player');




# Добавление кнопок в редактор TinyMCE, проверка что находимся в админпанели
if ( is_admin() ) {
	add_action( 'init', 'setup_tinymce_plugin' );
}

# Дополнительные проверки, на предмет стоит ли вообще подключать плагин
function setup_tinymce_plugin() {

	# Проверяем, может ли залогиненный пользователь редактировать посты или страницы
	if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	  return;
	}

	# Проверяем пользуется ли пользователь визуальным редактором TinyMCE
	if ( get_user_option( 'rich_editing' ) !== 'true' ) {
		return;
	}

	# Подключаем фильтр
	add_filter( 'mce_external_plugins', 'wptuts_add_buttons' );
	add_filter( 'mce_buttons', 'wptuts_register_buttons' );
}


function wptuts_add_buttons( $plugin_array ) {
    $plugin_array['custom_link_class'] = get_template_directory_uri() . '/assets/js/tinymce.js';
    return $plugin_array;
}
function wptuts_register_buttons( $buttons ) {
    array_push( $buttons, 'dropcap', 'attention', 'youtube' );
    return $buttons;
}
tinymce.js
(function() {
  tinymce.create('tinymce.plugins.Wptuts', {
    init : function(ed, url) {
      ed.addButton('dropcap', {
        title : 'Буквица',
        cmd : 'dropcap',
        image : url + '/btn-dropcap.png'
      });

      ed.addButton('attention', {
        title : 'Выделение параграфа',
        cmd : 'attention',
        image : url + '/btn-attention.png'
      });

      ed.addButton('youtube', {
        title : 'Добавление youtube плеера на страницу',
        cmd : 'youtube',
        image : url + '/btn-youtube.png'
      });

      /* Добавляем в style.css и editor-style.css, стиль:
        .dropcap {
          float: left;
          font-size: 90px;
          padding-right: 7px;
          line-height: 72px; } */

      ed.addCommand('dropcap', function() {
        var selected_text = ed.selection.getContent();
        var return_text = '';
        return_text = '<span class="dropcap">' + selected_text + '</span>';
        ed.execCommand('mceInsertContent', 0, return_text);
      });

      ed.addCommand('attention', function() {
        var selected_text1 = ed.selection.getContent();
        var return_text1 = '';
        return_text1 = '<span class="two_column align_center"><i class="icon-attention"></i><p>' + selected_text1 + '</p></span>';
        ed.execCommand('mceInsertContent', 0, return_text1);
      });

      ed.addCommand('youtube', function() {
        var vid = prompt('Введите id ролика на youtube: ');
        if (vid.length > 7) {
          shortcode = '[youtube vid="' + vid + '"]';
          ed.execCommand('mceInsertContent', 0, shortcode);
        } else {
          alert("Длина id ролика должна быть больше 7 символов.");
        }
      });
    },
  });
    tinymce.PluginManager.add( 'custom_link_class', tinymce.plugins.Wptuts );
})();


Только средняя кнопка attention как-то работает не очень, не вставляем мою обертку и все ((
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
cesnokov
@cesnokov
<head>&nbsp;</head>
functions.php:
function add_shortcode_button() {
    echo '<a href="#" id="add_shortcode_button" class="button"> <span class="dashicons dashicons-editor-code" style="padding-top: 4px; padding-right: 4px;"></span> My Shortcode</a>';
}
function include_shortcode_button_files() {
    wp_enqueue_script('shortcode_js', get_template_directory_uri() . '/shortcodes.js', array('jquery'), '1.0', true);
    wp_enqueue_style('shortcode_css', get_template_directory_uri() . '/shortcodes.css', false, '1.0');
}
if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) {
    add_action('media_buttons', 'add_shortcode_button', 15);
    add_action('wp_enqueue_media', 'include_shortcode_button_files');
}

function shortcode_popup() {
?>
    <div id="shortcode_window"> Bla Bla Bla... </div> 
<?php
}
add_action( 'admin_footer', 'shortcode_popup' );


shortcodes.js:
jQuery(document).ready(function($) {
    $("#add_shortcode_button").click(function() {
        $("#shortcode_window").show();
    });
});


shortcodes.css:
#shortcode_window {
    display: none;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы