WordPress:ダッシュボード(ウェルカムパネル)に頻繁に利用するページへのリンクボタンを設置する方法

WordPress:ダッシュボード(ウェルカムパネル)に頻繁に利用するページへのリンクボタンを設置する方法

WordPressで管理画面ログイン後最初に表示されるダッシュボードの上部に、頻繁に確認するページや更新するページへすぐ飛べるリンクボタンを設置する方法です。
また、追加する際にデフォルトで「WordPressへようこそ!」などが表示されているウェルカムパネルのコンテンツを変更する形で設置していきます。

ウェルカムパネルにボタンを表示させた実装イメージ

実装後はこのイメージのようなボタンがダッシュボード上部に表示され、それぞれのボタンから各投稿タイプの一覧ページと新規追加ページ、固定ページの編集ページに飛ぶことができるようになります。

先述したように今回はウェルカムパネルのコンテンツを変更する形でボタンを追加するというもので、実装にはfunctions.phpに下記のように記述します。

functions.php

remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'add_links_welcome_panel' );
function add_links_welcome_panel() {
?>
  <h2>各種投稿</h2>
  <ul>
    <li><a class="button button-primary post-foo" href="edit.php?post_type=foo">投稿A 記事一覧</a></li>
    <li><a class="button button-primary post-foo" href="post-new.php?post_type=foo">投稿A 新規追加</a></li>
    <li><a class="button button-primary post-bar" href="edit.php?post_type=bar">投稿B 記事一覧</a></li>
    <li><a class="button button-primary post-bar" href="post-new.php?post_type=bar">投稿B 新規追加</a></li>
  </ul>
  <h2>下層ページ</h2>
  <ul>
    <li><a class="button button-primary page" href="post.php?post=10&action=edit">Xページ 編集</a></li>
    <li><a class="button button-primary page" href="post.php?post=20&action=edit">Yページ 編集</a></li>
    <li><a class="button button-primary page" href="post.php?post=30&action=edit">Zページ 編集</a></li>
  </ul>
<?php
}

まずwelcome_panelに対してremove_action()を行うことで、デフォルトで表示されている「WordPress へようこそ !」などのコンテンツを飛ばすことができます。
もしデフォルトで表示されているものが必要なのであれば、remove_action()を消せばデフォルトで表示されているコンテンツの下に追加される形になります。

次に同じくwelcome_panelに対してadd_action()を行い、ここで表示させたい任意のコンテンツを記述していきます。
今回のサンプルのようにカスタム投稿の各ページや固定ページにリンクする場合はそれぞれ下記のような指定をし、「投稿タイプ」と「ページID」となっている箇所(サンプルコードではハイライト表示している箇所)をそれぞれ任意のものに変更してください。

  • カスタム投稿 一覧ページ → edit.php?post_type=投稿タイプ
  • カスタム投稿 新規追加ページ → post-new.php?post_type=投稿タイプ
  • 特定の固定ページ → post.php?post=ページID&action=edit

ちなみに、上のコードではすべてベタのHTMLを出力する形にしていますが、例えば固定ページのように今後増える可能性が高いものを自動的に出したいとか単純に特定の固定ページではなくすべての固定ページを出したい場合は、下記のようにforeachを使って出力する形にしておけば今後固定ページが増減してもこの部分にいちいち手を加える必要がなくなります。

functions.php

remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'add_links_welcome_panel' );
function add_links_welcome_panel() {
?>
  <h2>各種投稿</h2>
  <ul>
    <li><a class="button button-primary post-foo" href="edit.php?post_type=foo">投稿A 記事一覧</a></li>
    <li><a class="button button-primary post-foo" href="post-new.php?post_type=foo">投稿A 新規追加</a></li>
    <li><a class="button button-primary post-bar" href="edit.php?post_type=bar">投稿B 記事一覧</a></li>
    <li><a class="button button-primary post-bar" href="post-new.php?post_type=bar">投稿B 新規追加</a></li>
  </ul>
  <h2>下層ページ</h2>
  <ul>
<?php
  $pages = get_pages();
  foreach( $pages as $page ) {
    echo '<li><a class="button button-primary page" href="post.php?post=' . $page->ID . '&action=edit">' . $page->post_title . ' 編集</a></li>';
  }
?>
  </ul>
<?php
}

表示させるコンテンツが決まったら、あとはCSSで見栄えを調整していきます。
上の実装イメージと同じ見栄えにしたい場合は下記のようなCSSで実装でき、先ほどのコードにstyle属性を使って記述したり、別途用意したCSSに記述するなどしてください。

※1〜7行目の記述はウェルカムパネルが非表示にならないようにするためのスタイルなので、必要ない場合は削除して問題ありません。

CSS

.welcome-panel-close,
#screen-options-wrap label[for="wp_welcome_panel-hide"] {
  display: none;
}
#welcome-panel {
  display: block;
}
.welcome-panel {
  padding: 20px 20px 10px;
}
.welcome-panel ul {
  margin-left: -20px;
  list-style: none;
}
.welcome-panel ul li {
  display: inline-block;
  margin-left: 20px;
}
.welcome-panel .button {
  position: relative;
  min-width: 150px;
  height: auto;
  padding: 40px 20px 5px;
  font-size: 15px;
  text-align: center;
}
.welcome-panel .button::before {
  position: absolute;
  top: 12px;
  left: 50%;
  font-size: 28px;
  font-family: 'dashicons';
  transform: translateX(-50%);
}
.welcome-panel .post-foo::before {
  content: '\f348';
}
.welcome-panel .post-bar::before {
  content: '\f331';
}
.welcome-panel .page::before {
  content: '\f105';
}
.welcome-panel .button[href^="post"]::after {
  position: absolute;
  top: 12px;
  left: calc(50% + 15px);
  content: '\f464';
  font-size: 24px;
  font-family: 'dashicons';
  transform: translateX(-50%);
}

CSSで調整する際に自身で追加したコンテンツでもWordPressの管理画面デザインとテイストと合わせたい場合は、各要素のclassなどを調べて追加コンテンツにそれらを指定すると多少CSSの調整が楽になります。
例えば今回のようにボタンであれば.button.button-primarya要素に指定すれば管理画面にある他のボタンと同じ見栄えにできます。
また、アイコンについてもWordPressで用意されているアイコンフォントであるDashiconsを使用すると手軽に表示でき、ここでも各ボタンに表示されているアイコンについてはそれを使用しています。

Close the search window,
please press close button or esc key.