MENU
HOME
TOP

WordPress 新エディタ「Gutenberg」でインライン文字色の変更ボタンを設ける方法

はい、まいど!!またGutenbergネタです。(ごめんねっ!)

実はわたくし、前回こんな記事を書いたのですが。
WordPressの新エディタ「Guternberg」で見出し選択項目を設ける方法
WordPressの新エディタ「Guternberg」で見出し選択項目を設ける方法
どうもこんにチワワ。Gutenberg使ってますか?? あ~もう!!クッソ使いにくいですね!(めっちゃ使いやすい。) 今回TinyMCEを少しアップグレードしたような感じでいんじゃないかなと思ったので、またもや、けんじのキモイ記録かよ!!と思ってください。 大したことはしないだけど、こんな風に使えばいいんじゃないかな?的な日記。 新聞の四コマより内容が無いようなのでサラッと見てくれたらと思います。 必要ファイルの読み込み とりあえず、適当なファイルの読み込みです。 特にかっこつけなければ、functions.phpにこんな感じで追記すればイケます。 function add_kenji_assets_to_block_editor() { wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/assets/block_style.css' ); wp_enqueue_script( 'block-custom', get_stylesheet_directory_uri() . '/assets/block_custom.js', array('wp-blocks') ); } add_action( 'enqueue_block_editor_assets', 'add_kenji_assets_to_block_editor' ); 毎度おなじみのenqueue_style!enqueue_script!です。 子テーマでのカスタマイズなのでget_stylesheet_directory_uriにしてます。 親テーマ直接の場合は、get_template_directory_uriにすればOKっす。 スタイルの追加 で、中身は何でもいいんですけども、今回は見出しに引っ掛けたいので登録されているcore/headingを使います。 他にも段落とかボタンなどのスタイルにしたい場合は以下を参考にいじってみてください。 参考 WordPressのブロックエディタ、Guternbergで初期登録されているブロックやカテゴリーの名前(ID)一覧 で、今回は勝手に指定したディレクトリは/assets/block_style.cssですのでご注意くださいませ。 スタイルは分かりやすいように、h2だけ超シンプルなボーダーとベタ塗り二つ用意しますね。 とりあえず、センスとかガレージに置いといて、分かるようにスタイリング。 h2.simpleheadline{ padding: 15px; font-size: 26px; border-top: 2px solid #345; border-bottom: 1px solid #345; margin: 40px 0 20px; } h2.betaheadline{ background: #3b5998; color: #fff; } で、好みのスタイルは適当に変更してくださいさい。 ※公開側のスタイルも忘れずに。 基本的には.is-style-(クラス)を引っ付けてください。 簡単に言えば上記のスタイルに.is-style-クラスです。 ブロックスタイルの追加 先ほどのスタイルをサイドバーのスタイルに追加します。 冒頭でほざいてた通り、/assets/block_custom.jsに置きます。 (function () { wp.blocks.registerBlockStyle('core/heading', { name: 'simpleheadline', label: '標準(デフォルト)' }); wp.blocks.registerBlockStyle('core/heading', { name: 'betaheadline', label: 'ベタ塗り(青色)' }); })();})(); 引用元は旧エディタの独自スタイル選択ボックスをブロックエディタ「Guternberg」で再現する方法という記事を参考にしました。 元のやつとデフォルトをかぶせてベタ塗りの追加です。なのでデフォルトは使ってるテーマの物を入れないと三個になります。 動作の確認 プラグインとか最近あるけど、プレビューで確認できるこっちの方が執筆者からしたら分かりやすくていんじゃないかな? なんかそんな感じ! めっちゃ重たいけど、パラパラとした方が分かりやすいと思ったので、GIFで確認してください。 僕はこんな感じでザックリ作ってみました。 最初に作っておくとその時の気分で変えれちゃうので便利かなっと思いました。 それでは、需要が無い記事をまた書きます。 じゃ、またよろしく!!(泣)

この方法だと、Gutenbergのブロック要素のスタイルになるので、部分的に↓こういう

関連やら 参考 バッジを付けたりだとか、文字色を赤色に変更したり、アンダーマーカーを引いたり….etc.

そんな普通の事ができないんですねぇ。(´;ω;`)

まったく面倒なことしてくれますな。ええ。

ということで今回は、Gutenbergでインライン装飾ボタンを設ける方法をサラッと書き残しておきます。

今回やりたいこと

今回の目標はこんな感じで勝手に進めていきます。

  • 子テーマでのカスタマイズで完結させる
  • Gutenbergのツールバーにボタンを追加する
  • スパンタグで文字色を変更する

ややこしくなるので、今回はコレだけ!

ファイルのディレクトリ

とりあえず、ファイルの参照からですね。

今回はこんな感じにしましょう。

child-theme/functions.php

child-theme/assets/style.css

child-theme/assets/editor.js

子テーマにassetsフォルダを作ってその中にstyle.cssとeditor.jsを作ってください

ファイルの読み込み

とりあえず、何も考えずに、functions.phpに追記ください。

add_action( 'enqueue_block_editor_assets', function () {
    wp_enqueue_style( 'new-theme-editor-css', get_theme_file_uri( 'assets/style.css' ) ); 
    wp_enqueue_script( 'new-theme-editor-js', get_theme_file_uri( 'assets/editor.js' ), [
        'wp-element',
        'wp-rich-text',
        'wp-editor',
    ] );
} );

これで、jsとCSSを読み込みます。

JavaScriptの編集

で、Javascriptの編集です。ここ一番大事なとこね。

こちらはさんのGutenbergエディタ(ブロックエディタ)にボタンを追加するから引用させていただきました。

ありがとうございます!お世話になっております。

(function (richText, element, editor) {
    const name = 'new-addto/new-addto';
    const title = 'new-title';
    const className = 'new-class';
    richText.registerFormatType(name, {
        title: title,
        tagName: 'span',
        className: className,
        edit: function ({isActive, value, onChange}) {
            return element.createElement(editor.RichTextToolbarButton, {
                icon: 'admin-customizer',
                title: title,
                onClick: function () {
                    onChange(richText.toggleFormat(value, {
                        type: name
                    }));
                },
                isActive: isActive,
            });
        },
    });
}(
    window.wp.richText,
    window.wp.element,
    window.wp.editor
));

変更するならばnew-titleがエディタに出るタイトルで、new-classがタグに付くクラスなので自分用に変更してもらったらいいですね。

スタイルの編集

とりあえず、エディタにスタイル書けないと分からないので、簡単に太い赤文字にするだけのコードを追加しておきましょう。

.new-class{
    color: red;
    font-weight: bold;
}

動作の確認

こんな感じでツールバーにボタンが追加されていますね。

これをクリックすると以下のHTMLが追加されます。

<span class="new-class">赤字にしたい文字</span>

もう一度クリックすると消えます。

これで付けたり消したりできるという仕組みです。

gifで見るとこんな感じですね。

またさんの、Gutenbergエディタ(ブロックエディタ)にボタンを追加するで紹介されているマーカーも同じ要領で追加が可能なのでトライしてみてください。

こんな感じで使いやすいですよ。

おしまいに

オープンソースとはいえ、今回はさんのコードを引用してばっかりですが、Gutenbergに関してはまだ新しく特に型が無いので、色んな方の目に入り、そして独自に改革していき皆さんの使いやすいものになるよう願っております。

今回はこれでおわりです。

それではまた!!

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください