WordPress:ダッシュボードのウェルカムパネル(WordPressへようこそ!)をカスタマイズする方法

WordPress:ダッシュボードのウェルカムパネル(WordPressへようこそ!)をカスタマイズする方法

ダッシュボード上部(特にWordPressのインストール直後)に表示されているウェルカムパネルをカスタマイズする方法で、デフォルトで表示されているものを任意のコンテンツに差し替えたり、CSSを使って非表示にされないようにしてみます。

ウェルカムパネルとは

ウェルカムパネル

基本的に非表示にしているという人も多いと思いますが、ウェルカムパネルとはイメージのようにインストール直後のダッシュボード上部に表示されている要素のことで、日本語の場合は表示パネルで「ようこそ」というボックス名になっているものです。

任意のコンテンツを追加する

任意のコンテンツを追加する

上のイメージのようにデフォルトで表示されているテキストやリンクなどのコンテンツはそのままで、その下に任意のコンテンツを追加していきます。
実装にはfunctions.phpに下記のように記述します。

functions.php

add_action( 'welcome_panel', 'custom_welcome_panel' );
function custom_welcome_panel() {
?>
  <div class="welcome-panel-content">
    <h2>My Welcome Panel</h2>
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
<?php
}

既存コンテンツを消去して、任意のコンテンツを表示

既存コンテンツを消去して、任意のコンテンツを表示

上のイメージのようにデフォルトで表示されているコンテンツを飛ばし、任意のコンテンツのみを表示させるもので、先ほど紹介した方法に加えてCSS使って非表示にしてしまうとかでも一応できますが、下記のようにremove_action()をひとつ加えると既存コンテンツを消去して、任意のコンテンツのみ表示させることが可能です。

functions.php

remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'custom_welcome_panel' );
function custom_welcome_panel() {
?>
  <div class="welcome-panel-content">
    <h2>My Welcome Panel</h2>
    <p>Lorem ipsum dolor sit amet, ...</p>
  </div>
<?php
}

非表示にされないようにする(常に表示させる)

デフォルトのウェルカムパネルと同様に、ユーザーが任意で表示・非表示をして構わないようなものであればそのままでいいですが、そうではなく常に表示しておきたいような内容にする場合に、非表示にされない(常に表示させる)ようにCSSを使って余計な箇所を目隠ししていきます。
CSSは上で紹介しているコードにstyle属性を使う形で記述したり、管理画面用CSSを用意して記述するなどしてください。

「非表示にする」を非表示に

ウェルカムパネルを非表示にするボタン

非表示にされたくないので、イメージのようにパネル右上に設置されている非表示にするボタン(?)が邪魔になってきます。
これは下記のようなCSSで非表示にしてしまいます。

CSS

.welcome-panel-close {
  display: none;
}

表示オプション内の表示項目を非表示に

ダッシュボード上部の表示オプション内にある表示選択のチェックボックス(日本語版では項目名が「ようこそ」)は、下記のような指定で非表示にできます。

CSS

#screen-options-wrap label[for="wp_welcome_panel-hide"] {
  display: none;
}

常に表示させる

新規の場合は必要ないと思いますが、既に稼働しているWordPressにこれらを適用する際にユーザーによっては現在非表示を選択している人もいる可能性があります。
その場合は下記を指定しておけば非表示を選択しているユーザーでも表示状態にすることができます。

CSS

#welcome-panel {
  display: block;
}

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