WordPress管理画面上のヘルプのタブに独自の項目や説明テキストを追加する実装方法を解説

みなさんこんにちは！エンジニアの高澤です！

今回は、WordPress管理画面上のヘルプのタブに独自の項目を追加する実装方法を解説したいと思います。

当記事での内容は、WordPressエンジニアにしてもなかなかマニアックな内容となりますので、あまり実装する機会はないかと思います。

ただ今回の内容を知っておくことで、ご自身でオリジナルのテーマやプラグインを開発する際や、Webサイト制作などでクライアントに「操作方法わからなかったら、ここのヘルプをご確認ください！」みたいなことが可能となり、柔軟に管理画面をカスタマイズすることが可能です。

このように、ユーザーが管理画面から独自のヘルプをご確認いただけるように実装できるメリットがあるかと思いますので、ぜひ当記事をWordPress管理画面のカスタマイズにご活用ください。

管理画面上のヘルプのタブの場所と実装イメージ

実装の前に、事前に管理画面上のヘルプのタブの場所や実装のイメージを解説できればと思います。

まずそもそも「管理画面上のヘルプのタブ」とは、下図のようにWordPress管理画面左メニュー「投稿」の「投稿一覧」の画面右上の「ヘルプ」というボタンのことをいいます。

下図のように、「表示オプション」と「ヘルプ」の二つがあるかと思います。この「ヘルプ」をクリックしていただくと、タブが開いてヘルプの文章として管理画面の操作方法などの解説文章が閲覧できるのを確認できるかと思います。

今回はこの「ヘルプ」をクリックすると、下図のように独自の説明テキストを追加することができる実装方法について解説いたします。

管理画面上のヘルプのタブに独自の項目と説明テキストを追加する実装方法

それでは早速、管理画面上のヘルプのタブに独自の項目と説明テキストを追加する実装方法について解説いたします。

以下のコードを、functions.phpにコピー＆ペーストしてください。

<?php
/**
 * 投稿一覧画面のヘルプタブに独自コンテンツを追加
 */
function add_custom_help_tab_to_posts_list() {
    $screen = get_current_screen();
    
    // 投稿一覧画面でのみ実行
    if ($screen->id !== 'edit-post') {
        return;
    }
    
    // カスタムヘルプタブを追加
    $screen->add_help_tab(array(
        'id'      => 'custom_post_help',
        'title'   => 'カスタム投稿ヘルプ',
        'content' => get_custom_post_help_content()
    ));
    
    // サイドバーにも独自コンテンツを追加 ※こちらは実装しません。参考程度にどうぞ。
    // $screen->set_help_sidebar(get_custom_help_sidebar());
}
add_action('current_screen', 'add_custom_help_tab_to_posts_list');

/**
 * カスタムヘルプコンテンツを取得
 */
function get_custom_post_help_content() {
    ob_start();
    ?>
    <h3>投稿管理について</h3>
    <p>このサイト独自の投稿管理に関するヘルプです。</p>
    
    <h4>投稿の書き方</h4>
    <ul>
        <li>タイトルは32文字以内で設定してください</li>
        <li>アイキャッチ画像は必ず設定してください（推奨サイズ：1200×630px）</li>
        <li>カテゴリーは必ず1つ以上選択してください</li>
        <li>メタディスクリプションは120文字以内で設定してください</li>
    </ul>
    
    <h4>SEO対策</h4>
    <ul>
        <li>見出しタグ（H2、H3）を適切に使用してください</li>
        <li>画像にはalt属性を必ず設定してください</li>
        <li>内部リンクを積極的に活用してください</li>
    </ul>
    
    <h4>公開前のチェックリスト</h4>
    <ul>
        <li>誤字脱字のチェック</li>
        <li>リンクの動作確認</li>
        <li>プレビューでの表示確認</li>
        <li>カテゴリー・タグの設定確認</li>
    </ul>
    
    <p><strong>困ったときは：</strong> <a href="mailto:admin@example.com">管理者に連絡</a>してください。</p>
    <?php
    return ob_get_clean();
}

上記コードは、WordPressの管理画面における「投稿一覧」画面にカスタムのヘルプタブを追加するコードになります。

ここでPHP処理の流れを解説します。

まず、add_action()関数によってWordPressのcurrent_screenフックに独自に定義した関数であるadd_custom_help_tab_to_posts_list()関数が登録されます。これは、管理画面が表示されるタイミングで実行される処理です。

add_custom_help_tab_to_posts_list()関数の中では、get_current_screen()関数を使って現在の管理画面の$screenオブジェクトを取得します。

取得した $screen->id が ‘edit-post’ と一致しているかどうかをif文で判定しており、この条件が満たされる場合にのみ処理が継続されます。つまり、投稿一覧画面であることを条件に、カスタムのヘルプタブを追加するという制御です。

ヘルプタブの追加は$screen->add_help_tab()メソッドによって行われます。このメソッドには配列形式で3つの情報が渡されており、idにはこのタブの識別子、titleにはヘルプタブに表示されるタイトル、contentには実際に表示されるHTMLコンテンツが設定されます。

コンテンツの取得には別で独自に定義した関数であるget_custom_post_help_content()関数が使われており、この関数内では ob_start()関数とob_get_clean()関数によってHTML出力をバッファリングし、文字列として返しています。

このように、PHP側では「いつ」「どの画面に」「どんな内容の」ヘルプタブを表示するかをロジックとして明確に定義しており、管理画面上のユーザー支援機能として柔軟にカスタマイズ可能な設計になっています。画面ごとに$screen->idを変えれば、他の管理画面にも応用が可能です。

ペーストして保存できたら、WordPress管理画面左メニュー「投稿」の「投稿一覧」の画面右上の「ヘルプ」をクリックしてみてください。

すると、下図のように独自の項目「カスタム投稿へルプ」とその説明サンプルテキストが表示されることを確認できるかと思います。

これで実装は完了です。お疲れ様でした！

特に難しいことはないかと思います。

あとは、このままだとサンプル状態となっておりますので、ご自身のお好きなように項目名や説明テキストやリンクを修正していただければと思います。

管理画面の他ページにて独自のヘルプを表示させたい場合

次はちょっとした応用として、管理画面の他ページにて独自のヘルプを表示させたい場合のカスタマイズ方法を解説いたします。

先ほどのサンプルコードだと「投稿」の管理画面に追加するパターンとして解説しましたが、例えば、固定ページ一覧の画面やプラグイン一覧の画面、ユーザー一覧の画面などにも表示させたい場合があるかと思います。

その場合は、先ほどのコードの以下の箇所に注目しましょう。

    // 投稿一覧画面でのみ実行
    if ($screen->id !== 'edit-post') {
        return;
    }

上記コードによって、if文で条件分岐させて投稿一覧画面でのみ実行するようにしております。

要はこの条件分岐をカスタマイズすることで、他の管理画面のページでも独自のヘルプを実装することができます。

ここでは、以下の内容でそれぞれ解説いたします。

• 固定ページ一覧のみ表示させたい場合
• コメントのみ表示させたい場合
• メディアのみ表示させたい場合
• 外観のみ表示させたい場合
• プラグインのみ表示させたい場合
• ユーザーのみ表示させたい場合
• ツールのみ表示させたい場合
• 設定のみ表示させたい場合

それぞれ解説いたします。

固定ページ一覧のみ表示させたい場合

固定ページ一覧のみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'edit-page') {
    return;
}

コメントのみ表示させたい場合

コメントのみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'edit-comments') {
    return;
}

メディアのみ表示させたい場合

メディアのみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'upload') {
    return;
}

外観のみ表示させたい場合

外観のみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'themes') {
    return;
}

プラグインのみ表示させたい場合

固定ページ一覧のみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'plugins') {
    return;
}

ユーザーのみ表示させたい場合

ユーザーのみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'users') {
    return;
}

ツールのみ表示させたい場合

ツールのみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'tools') {
    return;
}

設定のみ表示させたい場合

設定のみ表示させたい場合は、先ほどのサンプルコードの「// 投稿一覧画面でのみ実行」の条件分岐部分を、以下のコードに置き換えてください。

if ($screen->id !== 'options-general') {
    return;
}

これで、それぞれのパターンを想定した条件分岐の実装方法の解説は以上になります。

もし理想の挙動にならなかったら柔軟にカスタマイズできますので、ご自身で試しに実装してみてください。

$screen->idを確認するサンプルコード

最後にかなり荒っぽいですが、$screen->idを確認するためのサンプルコードをここでのっけておきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしていただければ、管理画面左メニューの上部にページのIDが表示されるので、確認することが可能です。

add_action('current_screen', function($screen) {
  echo '<div style="color:#fff;position:relative;z-index:999999999999;">' . $screen->id . '</div>';
});

下図のような感じです。

コードとしては雑かもしれませんが、手軽に確認することが可能なのでよろしければご活用ください。

まとめ

今回は、WordPress管理画面上のヘルプタブに独自の項目を追加する方法について解説しました。

ややマニアックな内容ではありますが、オリジナルのテーマやプラグインを開発する際、あるいはクライアント向けのサイト制作で「操作に迷ったらこのヘルプを見てください」と案内できるようになるなど、実務で役立つシーンもあります。

管理画面のユーザー体験をより良くするためにも、こうした柔軟なカスタマイズ方法を知っておくことは大きな強みになります。

ぜひ今回の内容を、あなたのWordPress開発やサイト運用にお役立てください。