WordPressの管理画面カスタマイズ時に見るチートシート目的のメモ第3弾です。

紹介している内容は、基本的にWordPress Ver 3.5.1で実装・確認したものになります。

February 20, 2014 追記

WordPress Ver 3.8になって管理画面がいろいろ変更されたことにより、紹介しているカスタマイズの一部が使用できなくなっている可能性がありますのでご注意ください。

ダッシュボードのドラッグ機能を無効にする

デフォルトではウィジェットを動かして自分好みのレイアウトにできると思いますが、それを無効にする（ドラッグ移動できなくする）方法です。
下記をfunctions.phpに記述してください。

functions.php
add_action( 'admin_init', 'disable_drag_metabox' );
function disable_drag_metabox() {
  wp_deregister_script('postbox');
}

ダッシュボードに最近の記事一覧を出す

ダッシュボードに最近投稿した記事の一覧を出す方法です。
下記をfunctions.phpに記述してください。

functions.php
function db_recent_posts() {
  global $post;
  $args = array( 'numberposts' => 5 );
  $recent_posts = get_posts( $args );
  echo '<ol>';
  foreach( $recent_posts as $post ) {
    setup_postdata( $post );
    echo '<li>（' . get_the_date( 'Y年n月d日' ) . '） <a href="' . get_the_permalink() . '">' . get_the_title() . '</a></li>';
  }
  echo '</ol>';
}
function add_db_recent_posts() {
  wp_add_dashboard_widget( 'db_recent_posts', __( 'Recent Posts' ), 'db_recent_posts' );
}
add_action( 'wp_dashboard_setup', 'add_db_recent_posts' );

上記記述後にダッシュボードを確認すると、最近の投稿が日付・タイトル・記事へのリンク付きで5件表示されます。
件数を変えたい場合は'numberposts' => 5部分の数値を変更し、日付フォーマットを変えたいとかリンクはいらないとかであればliタグで括っている部分を任意の内容に変更してください。

ダッシュボードに最近の記事一覧を表示したイメージ

イメージはこのブログのダッシュボードに実装したのをキャプチャしたもので、10件表示にした場合はこんな感じで表示され、日付の部分はフォーマットを変更してフロントと同じようにしています。

カスタム投稿タイプの記事数をダッシュボードに表示する

デフォルトではカスタム投稿タイプを追加しても記事数がダッシュボードに表示されませんが、それを「現在の状況」部分に表示させる方法です。
以下はサンプルとして「犬」と「猫」という2つのカスタム投稿タイプを作成してある場合です。
下記をfunctions.phpに記述してください。

functions.php
add_action( 'right_now_content_table_end', 'custom_post_dashboard' );
function custom_post_dashboard() {
  $dashboard_custom_post_types= Array(
    'dog',    'cat',  );

  foreach( $dashboard_custom_post_types as $custom_post_type ) {
    global $wp_post_types;
    $num_post_type = wp_count_posts($custom_post_type);
    $num = number_format_i18n($num_post_type->publish);
    $text = _n( $wp_post_types[$custom_post_type]->labels->singular_name, $wp_post_types[$custom_post_type]->labels->name, $num_post_type->publish );
    $capability = $wp_post_types[$custom_post_type]->cap->edit_posts;

    if (current_user_can($capability)) {
        $num = "<a href='edit.php?post_type=" . $custom_post_type . "'>$num</a>";
        $text = "<a href='edit.php?post_type=" . $custom_post_type . "'>$text</a>";
    }

    echo '<tr>';
    echo '<td class="first b b_' . $custom_post_type . '">' . $num . '</td>';
    echo '<td class="t ' . $custom_post_type . '">' . $text . '</td>';
    echo '</tr>';
  }
}

投稿タイプ名をハイライト表示部分のようにして指定し、今回は「犬＝dog」で「猫＝cat」なので2つのタイプ名を記述しています。
記述後に確認するとイメージのようにカスタム投稿タイプの投稿数が表示されます。

カスタム投稿タイプの記事数をダッシュボードに表示したイメージ

「表示オプション」を消す

「表示オプション」削除後のイメージ

管理画面右上にある「表示オプション」を消す方法です。
表示する必要がないものが幾つかあったり、クライアントにはできるだけ関係ない部分は触ってほしくないとかであれば、この方法で「表示オプション」自体を丸ごと消せます。

以前書いた「表示オプション」はそのままにして中身をひとつずつ指定して非表示にする方法もありますが、場合によっては必要ないものを作業しながら非表示にしていき、納品前にこれを使って操作できなくするとかのほうが手っ取り早いかもしれません。
下記をfunctions.phpに記述してください。

functions.php
add_filter( 'screen_options_show_screen', 'remove_screen_options' );
function remove_screen_options(){
  return false;
}

投稿ページに説明文を挿入する

投稿ページのタイトル下やエディタ下に任意で説明文をいれる方法です。
これを実装するフックはVer 3.5から追加されたものらしいので、それ以下のバージョンでは使用できません。 下記をfunctions.phpに記述してください。

functions.php
add_action( 'edit_form_after_title', 'after_title' );
function after_title() {
  echo '<p>これはタイトル下に表示される</p>';
}

add_action( 'edit_form_after_editor', 'after_editor' );
function after_editor() {
  echo '<p>これはエディタ下に表示される</p>';
}

上記を記述するとイメージのようにそれぞれ指定した説明文が表示されます。

編集画面のタイトル下とエディタ下に説明文を挿入したイメージ

こちらは以下を参考にさせてもらったのですが、参照先にもあるようにそれぞれ何をする領域なのかのちょっとした説明文を載せたりするのに良いと思います。
他にも記事の投稿時に絶対に忘れてほしくないことや確認してほしいことがあれば、CSSを使って赤文字やボールド指定とかで目立たせて書いておいたりしても良いですね。

ビジュアルエディタへスタイルを適用させる

スタイル未指定のビジュアルエディタのイメージ

デフォルトだとビジュアルエディタへ記述していってもイメージのように表示されると思いますが、これをスタイルを適用して実際の表示がイメージしやすいようにする方法です。
下記をfunctions.phpに記述してください。

functions.php
add_editor_style( 'editor-style.css' );

add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
function custom_editor_settings( $initArray ) {
  $initArray['body_class'] = 'editor-area';
  return $initArray;
}

上記を記述後にテーマ内にeditor-style.cssというCSSを作成し、そこへビジュアルエディタで適用させたいCSSを記述していきます。
CSSにスタイルを書く際は、先程のコードによってbody部分に.editor-areaというclassが割り当てられているので、このclassを用いて例えば下記のように記述してきます。

editor-style.css
.editor-area {
  color: #333;
  font-size: 14px;
  font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
  line-height: 1.6;
}
.editor-area h3 {
  margin-bottom: 20px;
  padding: 3px;
  border-bottom: 1px solid #ccc;
  border-left: 5px solid #55d5ac;
  font-size: 18px;
}
.editor-area h4 {
  margin-bottom: 10px;
  padding: 3px 8px 0;
  border-left: 5px solid #55d5ac;
  font-size: 16px;
}
.editor-area ul {
  margin: 0 0 0 -20px;
  list-style: circle;
}
.editor-area strong {
  color: #55d5ac;
}

スタイル指定後のビジュアルエディタのイメージ

CSSを記述してビジュアルエディタの表示を確認すると、イメージのようにスタイルが適用されているのが確認できます。
実際に表示されている部分が既に何らかのclassでわかりやすく括られているのであれば、その部分のスタイルを丸々引っ張ってきて、あとはfunctions.phpで.editor-areaというclass名を指定している部分にそのclass名を指定すれば手っ取り早く実装できますね。

ビジュアルエディタのフォーマットを変更する

同じくビジュアルエディタのカスタマイズで、フォーマット部分を変更する方法です。
デフォルトでは以下9つのフォーマットが用意されており、それぞれ使用されるタグは以下になります。

  • 段落 → p
  • アドレス → address
  • 整形済み → pre
  • 見出し1 → h1
  • 見出し2 → h2
  • 見出し3 → h3
  • 見出し4 → h4
  • 見出し5 → h5
  • 見出し6 → h6

このフォーマット機能自体は便利ですが、この中の「見出し」というのはh1～h6を使うことになります。
特にh1に関しては、一般的にほとんどのサイトではサイト名やページタイトル部分、ブログであればその記事のタイトルなどに使用していると思いますし、そもそも同じセクション内でh1を何度も使用するのはよくありません…。

今回はサンプルとして見出し1（h1）と見出し2（h2）をフォーマットから消してみます。
下記をfunctions.phpに記述してください。

functions.php
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
function custom_editor_settings( $initArray ) {
  $initArray['theme_advanced_blockformats'] = 'p,address,pre,h3,h4,h5,h6';
  return $initArray;
}

上記を記述することでイメージのようにフォーマットから「見出し1」と「見出し2」を消すことができます。

ビジュアルエディタのフォーマット部分カスタマイズ前後のイメージ

普通こういったことをする場合は消したいものを記述することが多いですが、これは必要な物だけを記述する感じになります。
他にも消したいものがあれば$initArray['theme_advanced_blockformats']に含まなければ消すことができ、逆に他のフォーマットを増やしたい場合にはここに記述することで追加できます。
ちなみに、他にどんなフォーマットを指定できるかは以下TinyMCEのドキュメントで確認できます。

 

先程の方法でフォーマットから「見出し1」と「見出し2」を消すことができましたが、そうなるといきなり「見出し3」から始まる表示になります。
なので、現在「見出し3」となっている箇所を「見出し1」に、「見出し4」となっている箇所を「見出し2」にというように各フォーマット名を変更してみます。
下記のようにfunctions.phpに記述します。

functions.php
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
function custom_editor_settings( $initArray ) {
  $initArray['theme_advanced_blockformats'] = 'これはp=p,これはaddress=address,これはpre=pre,見出し1=h3,見出し2=h4,見出し3=h5,見出し4=h6';
  return $initArray;
}

上記の$initArray['theme_advanced_blockformats']のように記述してそれぞれのフォーマット名を指定します。
記述後に確認すればイメージのように指定した名前で表示されているのが確認できます。

ビジュアルエディタのフォーマット部分カスタマイズ後のイメージ

抜粋入力欄の高さを高くする

デフォルトでは小さめになっている抜粋部分の入力欄の高さを高くする方法です。
ブラウザによっては自分で入力欄の高さをドラッグで簡単に変更できますが、予め少し高さを出しておきたいときに使えます。
下記をfunctions.phpに記述してください。

functions.php
add_action( 'admin_head', 'excerpt_textarea_height' );
function excerpt_textarea_height() {
  echo '<style type="text/css">#excerpt { height: 200px; }</style>';
}

デフォルトでは大体40pxぐらいなのですが、上記を記述することで入力欄の高さが200pxになります。
記述後に確認すればイメージのように変更されています。

抜粋入力欄の高さを高くしたイメージ

抜粋にエディタ機能を追加する

デフォルトではついていないビジュアルエディタを抜粋にも追加する方法です。
下記をfunctions.phpに記述してください。

functions.php
function tinymce_excerpt_js(){ ?>
<script type="text/javascript">
  jQuery(document).ready( tinymce_excerpt );
  function tinymce_excerpt() {
    jQuery('#excerpt').addClass('mceEditor');
    tinyMCE.execCommand('mceAddControl', false, 'excerpt');
  }
</script>
<?php }
add_action( 'admin_head-post.php', 'tinymce_excerpt_js');
add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');

function tinymce_css() {
?>
  <style type='text/css'>
    #postexcerpt .inside { margin: 0; padding: 0; background: #fff; }
    #postexcerpt .inside p { padding: 0 0 5px 10px; }
    #postexcerpt #excerpteditorcontainer { border-style: solid; padding: 0; }
  </style>
<?php
}
add_action( 'admin_head-post.php', 'tinymce_css' );
add_action( 'admin_head-post-new.php', 'tinymce_css' );

抜粋をビジュアルエディタに変更したイメージ

フッターのテキストを変更する

フッターのテキストを変更したイメージ

管理画面のフッターにはデフォルトだと左下に「WordPress のご利用ありがとうございます。」、右下に現在のバージョン情報が表示されていますが、それを任意のものへ変更する方法です。
下記をfunctions.phpに記述してください。

functions.php
add_filter( 'admin_footer_text', 'custom_footer_admin' );
function custom_footer_admin () {
  return 'Lorem ipsum... <a href="#">Link Text</a>';
}

add_filter( 'update_footer', 'custom_footer_update', 11 );
function custom_footer_update () {
  return 'Lorem ipsum';
}

左下はadmin_footer_text、右下はupdate_footerでそれぞれ表示内容を指定し、サンプルコードのadmin_footer_textで指定しているようにリンク設定もできます。

WordPressの管理画面カスタマイズについては以下エントリーでもまとめています。