公式 YouTube →Click

ブロックエディターにクイックタグをつける

  • URLをコピーしました!
目次

スニペットに登録

// === ブロックエディター用カスタムマーカーボタン ===
function enqueue_custom_marker_buttons() {
    wp_enqueue_script(
        'custom-marker-buttons',
        get_template_directory_uri() . '/new-js/marker-buttons.js',
        array('wp-blocks', 'wp-dom-ready', 'wp-rich-text', 'wp-edit-post', 'wp-components', 'wp-element'),
        null,
        true
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_marker_buttons');

marker-buttons.js

テーマにアップロード

(function (wp) {
  const { registerFormatType, toggleFormat } = wp.richText;
  const { RichTextToolbarButton } = wp.blockEditor || wp.editor;

  const markers = [
    {
      name: 'marker-blue',
      title: '青マーカー',
      className: 'marker_blue',
      icon: 'edit',
    },
    {
      name: 'marker-pink',
      title: 'ピンクマーカー',
      className: 'marker_pink',
      icon: 'edit',
    },
    {
      name: 'marker-yellow',
      title: '黄マーカー',
      className: 'marker_yel',
      icon: 'edit',
    },
  ];

  markers.forEach((marker) => {
    registerFormatType(`custom/${marker.name}`, {
      title: marker.title,
      tagName: 'span',
      className: marker.className,
      edit({ isActive, value, onChange }) {
        return wp.element.createElement(RichTextToolbarButton, {
          icon: marker.icon,
          title: marker.title,
          onClick: () => {
            onChange(toggleFormat(value, { type: `custom/${marker.name}` }));
          },
          isActive,
        });
      },
    });
  });
})(window.wp);

CSSをテーマにアップロード

  • URLをコピーしました!

この記事を書いた人

カメラ・ガジェット購入レビュー・開封動画

目次