WordPressのメニューに再利用ブロックリンクを追加する

WordPressがエディターとしてGutenbergを採用して以来、プラグイン等を使わなくても何ヶ所も使いまわしたい定形ブロックを再利用ブロックとして登録できるようになりました。

再利用ブロックは/ブロック名という形で簡単に呼び出すことができるので積極的に使っている人も多いはず。

しかしこの再利用ブロックを変更したい時、アクセスが非常に悪いので直接再利用ブロックへアクセスできるリンクを追加するコード＆プラグインを作成しました。

執筆時現在、WordPressテーマTHE SONICにおいては「再利用ブロック管理」というリンクが設定されていることを確認しております。それ以外のテーマの方はぜひご利用ください！

＼ココナラでWordPressエラー修正サービス始めました！／

ココナラでWordPressのエラー解決サービスを始めました！

追加オプション無しで3,000円から受け付けておりますが、新規会員登録で300円、僕の紹介コードを入力すると1,000円分のポイントが貰えるので実質1,700円から利用することができます！

突然画面が真っ白になった
英語のエラーが表示されてどうしたらいいかわからない
とにかく困っている

どんなことでもぜひお気軽にご相談ください！

紹介コード：K0GR23

ココナラでWordPress相談をする

そもそも再利用ブロックってなに・・・？
標準の再利用ブロックアクセス手段
再利用ブロックに管理画面メニューからアクセスできるようにする
1. functions.php / Code Snippets等を利用する場合
2. プラグインとして導入する
WordPressのメニューに再利用ブロックリンクを追加するまとめ

そもそも再利用ブロックってなに・・・？

このセクションはまだブロックエディター（Gutenberg）で再利用ブロックを使っていない方向けの解説です。

再利用ブロックを既に活用している、知っているという方は「標準の再利用ブロックアクセス手段」から読み進めてください。

再利用ブロックは一度設定すればどこにでも使い回せるブロック

ブログを書いていればいずれ過去に書いたものと同じ記述をすることがあります。

アフィリエイトブログのボタンリンク
同ジャンルの記事内に書く注意事項
毎度冒頭や締めに書く挨拶文
よく使う複数のブロックを組み合わせたレイアウト

このように何度も何度も使う文言や複数のブロックの組み合わせを事前に登録しておき、必要な場面で呼び出すだけで簡単にブロックを設置できる。

それが再利用ブロックです。

変更に強い

再利用ブロック最大の特徴は何らかの修正が必要になった時、1ヶ所変更すれば全てのブロックに変更が反映される点。

例えばアフィリエイトボタンのリンクタグが変更になった時、従来はショートコードを使わない限り全ページの編集が必要でした。

しかし全てのアフィリエイトボタンを再利用ブロックで管理していると、再利用ブロックを編集するだけで全てのリンクが簡単に差し替えできます。

複数ブロックを一括で管理できる

再利用ブロックの素晴らしい点は複数のブロックをまとめて管理できる点です。

例えば普段はこんな感じのボタンに限定キャンペーン情報をマイクロコピーとして入れたいとします。

その場合、再利用ブロックを編集してマイクロコピーブロックを追加し保存するだけでOK。

こんな感じで1ヶ所設定するだけで、サイト内のこの再利用ブロックを使っている場所全てが書き換わります。

キャンペーンが終了して外したくなっても同じく再利用ブロックを編集すればOK、とても簡単に管理ができますね。

通常ブロックに変換も可能

とは言えレイアウトは同じにしたいけど、中身は記事ごとに変えたいことも当然あります。

そこで便利なのが通常ブロックへの変換。

通常ブロックに変換すると再利用ブロック側で編集しても一括編集の対象にならないので、いつも同じブロックの組み合わせてレイアウトしているようなものはテンプレートとして登録しておくと執筆速度が向上します。

例えば上記の動画のように、いくつものブロックを組み合わせたレイアウトを事前に組んでおけば呼び出して通常ブロックに変換するだけでどんどん執筆可能です。

標準の再利用ブロックアクセス手段

再利用ブロックにアクセスする時、標準では記事編集画面右上のメニューから再利用ブロックページへアクセスできます。

しかし再利用ブロックだけ編集したいのにわざわざ記事ページを開くのもめんどうです、特にキャンペーン情報をまとめたブロックだけ更新したい！という場合は記事を開く必要無いですからね。

再利用ブロックに管理画面メニューからアクセスできるようにする

そこで簡単に再利用ブロックにアクセスできるようにしました。

非常に簡単なカスタマイズなので、再利用ブロックを利用されている方はぜひ取り入れてみてください！

方法は以下の2種類を用意しました。

functions.phpやCode Snippets等のプラグインを使う
プラグインとして導入する

どちらの方法でも同じことが実現できます。

なおコードそのものの解説は次章の「functions.php / Code Snippets等を利用する場合」で行っています。

けんちゃん

functions.phpに書く方法は万が一今後テーマを変えた時に設定し直しになっちゃうから個人的にはCode Snippetsを使うか、2番目のプラグインとして導入するのをおすすめします！

functions.php / Code Snippets等を利用する場合

テーマファイルのfunctions.phpに追加する、もしくはCode Snippets等のPHPコード管理プラグインを使用する場合です。

以下のコードを追加してください。

GitHubでコードを見る

/* 再利用ブロックリンクをメニューに追加 */
function add_reusable_blocks() {
	if ( is_admin() ) {
		add_menu_page(
			'再利用ブロック',
			'再利用ブロック',
			'manage_options',
			'edit.php?post_type=wp_block',
			'',
			'dashicons-image-rotat',
			11
		);
	}
}
add_action( 'admin_menu', 'add_reusable_blocks' );

Code snippetsを使う場合、1行目の/* ~ */部分のコメントをタイトルとして設定すると良いと思います。

コードの解説を見る

if ( is_admin() ) {

3行目のis_admin()関数で管理画面なのかどうかの判定をし、フロントページ（記事や固定ページ等）では中身が実行されないように配慮しています。

 add_menu_page(
            '再利用ブロック',
            '再利用ブロック',
            'manage_options',
            'edit.php?post_type=wp_block',
            '',
            'dashicons-image-rotate',
            11
);

add_menu_page()関数は管理画面サイドバーのメニューに新しいリンクを追加できるWordPressのフックです。

add_menu_page()の構文

<?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); ?>

add_menu_page()関数は以下の7つの引数を取ります。

開いたページでタイトルとして表示される文字列
メニューとして表示される文字列
アクセスできる権限
アクセスするページのpath
実行する関数
メニュー表示に使うアイコン
表示する場所

開いたページでタイトルとして表示される文字列

1つ目の引数はリンク先のタイトルですが、再利用ブロックページは既にタイトルが「再利用ブロック」として決まっているので空欄でも構いません。

一応「再利用ブロック」と入力してありますが、変更しても変わりません・・・笑。

メニューとして表示される文字列

2つ目の引数はメニュー名に使われます。

アクセスできる権限

3つ目の引数はアクセスできる権限レベルを設定します。

今回設定しているmanage_optionsは通常管理者しか持たない権限なので、編集者や購読者には見れないように設定できます。

通常自分一人でWordPress運営をしている場合、自分が管理者ユーザーなのでmanage_optionsを指定しておけばOKです。

アクセスできるページのpath

'edit.php?post_type=wp_block'としておくことで、以下のURLが生成されます。

https://自分のサイトのURL/wp-admin/edit.php?post_type=wp_block

post_type=wp_blockは再利用ブロックの一覧が表示されるクエリです。

実行する関数

今回は既存の再利用ブロックページにアクセスするので空欄です。

メニュー表示に使うアイコン

再利用ブロック、ということで今回は'dashicons-image-rotate'を採用してみました。

好きなアイコンに変更されたい方は「Developer Resources: Dashicons」を参考に変更してください。

表示する場所

表示する場所を半角数字で指定します。

WordPressのメニューは画像のようにそれぞれ番号が設定されており、その番号より小さい数字を指定すれば上に、大きい数字を指定すれば下に表示されるようになります。

例えばツールの下、設定の上に表示したい場合は81～98までを指定します（小数点も対応しているので、80.1のような記述でもOKです）。

今回は11を指定しているので、メディアと固定ページの間に表示されるようになります。

ただしお使いのテーマやプラグインが既にその番号を使っている可能性もあるので、かぶらないように調整が必要になるかも知れません。

表示場所を変更したい場合、この数字を変更してください。

プラグインとして導入する

プラグインとして利用する場合は以下からダウンロードしてプラグインページからインストールしてください。

Add Reusable Blocksプラグインをダウンロード

コードの中身はfunctions.phpに記述する場合と全く同じです、設定画面等も一切ありません。

インストールして有効化するだけで後は何もしなくてOKです。

「WordPressはプラグインを入れると重い」の誤解を解く

「WordPressのプラグインは重くなるから使わないほうが良い」って本当？特にブログ初心者～中級者に多い、プラグインに対する誤解を解くべく実際に処理時間を測定して検証しました。正しい知識を持って便利なプラグインを使いこなしましょう！