MENU
HOME
TOP

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で確認してください。

僕はこんな感じでザックリ作ってみました。

最初に作っておくとその時の気分で変えれちゃうので便利かなっと思いました。

それでは、需要が無い記事をまた書きます。

じゃ、またよろしく!!(泣)

スポンサーリンク

この記事をかいた人

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

コメント一覧

2
  • お久しぶりです

    私にはさっぱり分かりませんが(笑)

    ツイートします

    あ、わたし・・・twitter始めたんですよ(笑)

    こんな形でしか、ケンジ先生にご恩をお返しできないので・・・

    題して、鶴の恩返し作戦です

    受けたご恩は一生忘れないタイプのmacaronです

    (注;ストーカーではありません)

  • どうもお久しぶりです。
    twitter始めたんんすね!僕も始めたばっかりです(ひとりぼっち)
    ツイートありがとうございました。
    ブログも苦手な僕ですが、もう少し分かりやすいように書いてみます。

コメントを閉じる

コメントを残す

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


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