WordPressの管理画面をカスタマイズする時に使えるハック Part 3

WordPressの管理画面をカスタマイズする時に使えるハック Part 3

前回書いてから大分間が空きましたが、WordPressの管理画面カスタマイズまとめの第3弾です。

February 20, 2014 追記

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

functions.phpを使用するので、テーマ内にない場合は作成してください。

※以下で紹介している内容は、基本的にWordPress Ver3.5.1を使用したものです。

WordPressの管理画面をカスタマイズする時に使えるハック Part 3 目次

  1. ダッシュボードのドラッグ機能を無効にする
  2. ダッシュボードに最近の記事一覧を出す
  3. カスタム投稿タイプの記事数をダッシュボードに表示する
  4. 「表示オプション」を消す
  5. 投稿ページに説明文を挿入する
  6. ビジュアルエディタへスタイルを適用させる
  7. ビジュアルエディタのフォーマットを変更する
  8. 抜粋入力欄の高さを高くする
  9. 抜粋にエディタ機能を追加する
  10. フッターのテキストを変更する

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

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

functions.php

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

目次へ

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

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

functions.php

function db_recent_posts() {
?>
<ol>
  <?php
    global $post;
    $args = array( 'numberposts' => 5 );
    $myposts = get_posts( $args );
      foreach( $myposts as $post ) :  setup_postdata($post); ?>
        <li> (<? the_date('Y年n月d日'); ?>) <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; ?>
</ol>
<?php
}
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件表示されます。
件数を変えたい場合は、ハイライト表示している5の部分を変更すれば変更できます。
日付の見栄えだとか、リンクはいらないとかであればliタグで括っている部分を任意の内容に変更してください。

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

画像はこのブログのダッシュボードに実装したのをキャプチャしたもので、10件表示にした場合はこんな感じで表示されます。
日付の部分はちょっといじって表の画面と同じようにしています。

目次へ

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

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

functions.php

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>';
  }
}
add_action( 'right_now_content_table_end', 'custom_post_dashboard' );

タイプ名をハイライト表示部分のようにして指定し、今回は「犬=dog」で「猫=cat」なので2つのタイプ名を記述しています。
これ以上ある場合は同様にして追記していきます。

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

記述後に確認すると、上の画像のようにカスタム投稿タイプの投稿数が表示されます。
こちらは以下を参考にさせてもらいました。

目次へ

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

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

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

以前書いた「表示オプション」はそのままにして中身をひとつずつ指定して非表示にする方法(WordPressの管理画面をカスタマイズする時に使えるハック Part 1 – 10.ダッシュボードのウィジェットを非表示)もありますが、場合によっては必要ないものを作業しながら非表示にしていき、納品前にこれを使って操作できなくするとかのほうが手っ取り早いかもしれません。
下記をfunctions.phpに記述してください。

functions.php

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

目次へ

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

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

functions.php

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

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

上記を記述すると画像のようにそれぞれ指定した説明文が表示されます。
表示する説明文を変更したい場合は、コードのハイライト表示部分を変更してください。

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

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

目次へ

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

デフォルトのビジュアルエディタ

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

functions.php

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

上記を記述後にテーマ内に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", "MS Pゴシック", 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名を指定すれば手っ取り早く実装できますね。

以下を参考にさせてもらいました。

目次へ

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

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

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

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

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

functions.php

function custom_editor_settings( $initArray ) {
  $initArray['theme_advanced_blockformats'] = 'p,address,pre,h3,h4,h5,h6';
  return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
ビジュアルエディタのフォーマットを変更する

上記を記述することで画像のようにフォーマットから「見出し1」と「見出し2」を消すことができます。
普通こういったことをする場合は消したいものを記述することが多いですが、これは必要な物だけを記述する感じになります。
他にも消したいものがあればハイライト部分の箇所に記述しなければ消すことができ、逆にdivdivなどといった他のフォーマットを増やしたい場合にはここに記述することで追加できます。
ちなみに、他にどんなフォーマットを指定できるかは以下TinyMCEのドキュメントで確認できます。

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

functions.php

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;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

上記のハイライト部分のようにしてそれぞれのフォーマット名を指定します。
記述後に確認すれば画像のように指定した名前で表示されているのが確認できます。

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

目次へ

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

デフォルトでは小さめになっている抜粋部分の入力欄の高さを高くする方法です。
ブラウザによっては自分で入力欄の高さをドラッグで簡単に変更できますが、予め少し高さを出しておきたいときに。
下記を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になります。
高さを変更したい場合はハイライト部分の数値部分を変更してください。
記述後に確認すれば画像のように変更されています。

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

目次へ

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

デフォルトではついていないビジュアルエディタを抜粋にも追加する方法です。
下記を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:0px 0px 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' );
抜粋にエディタ機能を追加する

目次へ

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

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

functions.php

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

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

左下はadmin_footer_text、右下はupdate_footerで、それぞれハイライト表示部分で表示内容を指定します。
また、サンプルでadmin_footer_textに使用しているようにリンク設定もできます。

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

目次へ


以上、WordPressの管理画面をカスタマイズする時に使えるハック Part 3でした。
今回紹介しているスニペットはほとんどが以下のサイトで見かけたものになります。
内容は英語ですが翻訳機能とか使えば十分わかりますし、紹介している以外にもまだまだ沢山ある(現時点で608スニペット公開されているよう)ので、興味ある方は覗いてみると知らないスニペットが見つかるかもしれません :)

また、以前にも今回紹介した以外の管理画面カスタマイズをまとめています。
興味がある方はこちらもご覧になってみてください :)

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