WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ

Ads

今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。

今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。

WordPressスニペット

まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。

更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。

では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてください。

管理画面の右上の「ヘルプ」を非表示


デフォルトで用意されている「ヘルプ」の内容はWebに疎い方にとっては混乱の種になりがちです。この際、非表示にしてしまいましょう。

<?php
function disable_help_link() {
    echo '<style type="text/css">
            #contextual-help-link-wrap {display: none !important;}
          </style>';
}
add_action('admin_head', 'disable_help_link');
?>

管理画面の左メニューにオリジナルの項目とコンテンツを追加


ヘルプを消してしまえば混乱は招きませんが、使い方が分からない、という問題は解決できていません。そこで、メイン操作となる左メニュー内にオリジナルの項目を増やして使い方を書いてあげるといいかもしれません。

サンプルコードでは直接書いていますが、別途ファイルを用意して読み込むのもいいですね。

<?php
function test_menu_page() {
    $siteurl = get_option( 'siteurl' );
?>
<div class="wrap">
    <h2>ヘルプです</h2>
    <p>コンテンツ</p>
   </div>
<?php
}
function test_admin_menu() {
    add_menu_page( '管理画面のヘルプ', '管理画面のヘルプ', 'read',
		   __FILE__, 'test_menu_page' );
}
add_action( 'admin_menu', 'test_admin_menu' );

?>

ダッシュボードにオリジナルのボックスを追加


オリジナルページを作るほどでも無いならダッシュボードにボックスを追加して簡単に説明してあげるのもいいかもしれません。クライアントさんへの伝言板等にも使えるかもしれませんね。アイデアが広がります。

<?php
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

function my_custom_dashboard_widgets() {
global $wp_meta_boxes;

wp_add_dashboard_widget('custom_help_widget', '今日のお知らせ', 'dashboard_text');
}
function dashboard_text() {
echo '<p>foo様、こんにちは！今日のお知らせです。<br />今日はお問い合わせが3件ありました。ご返信をお願い致します。</p>';
}
?>

ダッシュボードのRSSを読み込むボックスのフィードを変える


これはカスタマイズではなく、デフォルトの機能ですが、知らない人が多い印象なのでおまけです。

デフォルトで用意されているボックスの「WordPress 開発ブログ」のタイトルとフィード先は管理画面内で変更可能です。マウスホバーで見出し右側に「設定」と出ますのでクリックすれば上図のような設定項目が出ます。非表示にするより自社ブログに変更した方がお得ですね。

注意を呼びかける


伝言板じゃなくて、常に気をつけて欲しい事がある、という場合は慣れるまでこのように一時的に注意を呼びかけるのも一つの手です。

<?php
function showMessage($message, $errormsg = false){
	if ($errormsg) {
		echo '<div id="message" class="error">';
	}else {
		echo '<div id="message" class="updated fade">';
	}	echo "<p><strong>$message</strong></p></div>";
} 
function showAdminMessages(){
    showMessage("【～様へお知らせ】～という記事のリンク先が違うようです。調整をお願い致します。", true);
}
add_action('admin_notices', 'showAdminMessages');
?>

via:Show an urgent message in the WordPress admin panel

管理画面の左サイドメニューのメニューテキストを任意のテキスト変更


Webに慣れていたり、WordPressを使ったことがある方には分かりますが、初めて触る方はやはり混乱しますし、「クリックしたらどうなるか分からないのが怖い」という理由で更新も疎遠になりがちです。

そこで、メインに利用される左サイドのメニューをクライアントさんにとって分かりやすいテキストに変更してあげましょう。

<?php
add_filter(  'gettext',  'change_side_text'  );
add_filter(  'ngettext',  'change_side_text'  );
function change_side_text( $translated ) {
     $translated = str_ireplace(  'ダッシュボード',  '管理画面TOP',  $translated );
     $translated = str_ireplace(  '投稿',  'ブログを書く',  $translated );
     $translated = str_ireplace(  'リンク',  'お気に入り',  $translated );
     $translated = str_ireplace(  'メディア',  '画像の管理',  $translated );
     $translated = str_ireplace(  '固定ページ',  'ページ追加',  $translated );
     $translated = str_ireplace(  '外観',  'デザイン管理',  $translated );
     $translated = str_ireplace(  'ユーザー',  'プロフィール設定',  $translated );
     $translated = str_ireplace(  '設定',  '各種設定',  $translated );
     return $translated;
}
?>

/* $translated = str_ireplace(  '元々のテキスト',  '置き換えるテキスト',  $translated ); */

via:Replace menu text within the admin sidebar menu

管理画面の左サイドメニューから項目削除


項目のテキストを変更しても混乱するようならいっそ不要な物を削除しちゃいましょう。例えばプラグインの項目は概ね不要かと思いますので、消しておけば更新通知も表示されませんので不安にさせないで済みます。

<?php
add_action( 'admin_menu', 'remove_admin_menu_links' );
function remove_admin_menu_links() {
     remove_menu_page('index.php'); // ダッシュボード
     remove_menu_page('edit.php'); // 記事投稿
     remove_menu_page('upload.php'); // メディア
     remove_menu_page('link-manager.php'); // リンク
     remove_menu_page('edit.php?post_type=page'); // 固定ページ
     remove_menu_page('edit-comments.php'); // コメント
     remove_menu_page('themes.php'); // 外観
     remove_menu_page('plugins.php'); // プラグイン
     remove_menu_page('users.php'); // ユーザー
     remove_menu_page('tools.php'); // ツール
     remove_menu_page('options-general.php'); // 設定
}
?>

via:21 Most Useful WordPress Admin Page Hacks

管理画面にcssやjsファイルを読み込む

管理画面のデザインのオーダーもあるなら、CSSやjsを読み込みたい、という事もあるかと思います。以下のようにファイルを読み込んでください。

<?php
function wp_custom_admin_css() {
	echo "\n" . '<link href="' .get_bloginfo('template_directory'). '/css/foo.css' . '" rel="stylesheet" type="text/css" />' . "\n";
}
add_action('admin_head', 'wp_custom_admin_css', 100);
?>

このコードも含めてwpxtremeさんでいくつかまとまっていますのであわせてご覧下さい。

ちょっと余談なんですが、「～を非表示に」とかをわざわざPHPでやってるのを良く見かけますが、非表示にしたいだけならCSSでdisplay:none;にしちゃえばいいんじゃないでしょうかね。管理画面の左上のロゴとか管理バーそのものとか不要なボックスとか。FirebugでIDとかclass確認するだけで済みますしね。反論もあるでしょうけど。

フッターのテキストを任意のテキストに変更


あまり見られる場所ではないですけど、念には念を、という事でフッターも自社への連絡先にしておくと安心してくれるかもしれませんね。やって損する事は無いですし、当たり前のように施工したいところです。

<?php
function custom_admin_footer() {
    echo ' お困りの際は<a href="http://example.com/" target="_blank">弊社</a>までお気軽にお問い合わせ下さい。TEL:03-1234-5678';
}
add_filter('admin_footer_text', 'custom_admin_footer');
?>

管理画面の「こんにちは、～さん」を変更


管理画面のあいさつ文を変更します。「こんにちは」でもいいんですけど、納品物として自然では無いので変えておくのもいいかも。

<?php
function replace_hello_text( $wp_admin_bar ) {
    $my_account=$wp_admin_bar->get_node('my-account');
    $newtitle = str_replace( 'こんにちは、', 'お疲れさまです！', $my_account->title );
    $wp_admin_bar->add_node( array(
        'id' => 'my-account',
        'title' => $newtitle,
    ) );
}
add_filter( 'admin_bar_menu', 'replace_hello_text',25 );
?>

投稿画面のタイトルにあるテキストの変更


いわゆるプレースホルダーを設定します。

<?php
function title_text_input( $title ){
     return $title = 'ここに記事の題名を書きます';
}
add_filter( 'enter_title_here', 'title_text_input');
?>

via:Change default “Enter title here” text within post title input field

アイキャッチ画像のメタボックスに任意のテキストを含める


アイキャッチ画像と言われてもWebに疎い人にはピンと来ません。ピンとこないと使い方をなかなか覚えられないものです。なので、使い方を書いてあげましょう。

<?php
add_filter( 'admin_post_thumbnail_html', 'add_featured_image_instruction');
function add_featured_image_instruction( $content ) {
    return $content .= '<p>アイキャッチ画像として画像を追加するとサムネイルが表示されるようになります。<br />サイズは横300px、縦200pxになるようにしてください。</p>';
}
?>

via:Add or Change Content in the Featured Image Meta Box

投稿エディタのスタイルを変更


投稿エディタのスタイルの変更方法です。上記はメイリオにして背景をグレーにした例。

CSSファイルを追加するのが一番短いコードで済みますが、一応jquery併用の方法も書いておきます。

/////////////////////////CSSファイルを追加//////////////////////////////////////
<?php
//ビジュアルリッチエディタ用のスタイルシートにフォントスタイルを追加する
add_editor_style('admin-style.css');
?>

/////////////////////////jqueryで変更//////////////////////////////////////
add_action( 'admin_head-post.php', 'devpress_fix_html_editor_font' );
 add_action( 'admin_head-post-new.php', 'devpress_fix_html_editor_font' );
   function devpress_fix_html_editor_font()
 { ?> 

<?php
//ビジュアルリッチエディタのフォントをjQueryで変える
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('iframe').contents().find("*").css({ 'font-family': 'Meiryo !important' });
})
</script>
 <?php }
?>

/////////////////////////HTMLエディタのスタイルの変更//////////////////////////////////////
<?php
//HTMLエディタのスタイルの変更
add_action( 'admin_head-post.php', 'devpress_fix_html_editor_font' );
 add_action( 'admin_head-post-new.php', 'devpress_fix_html_editor_font' );
   function devpress_fix_html_editor_font()
 { ?> 
<style type="text/css">
#post-body-content ,
.wp-editor-area,
#content_ifr html {
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "Osaka", sans-serif !important;
font-size:16px;}</style>

 <?php }
?>

via:How to change WordPress editor font

投稿画面に任意のコンテンツボックスを追加


投稿画面の使い方を伝えるなら投稿画面に書いたほうが親切です。ボックスを追加して好きなコンテンツを作ってみては如何でしょう。ショートコードの使い方、記事投稿の手順など、用途は色々あります。

下記コードの「foo」というのはカスタム投稿タイプを使っている場合に必要なコードです。fooを投稿タイプ名に変更してください。

<?php
function add_my_box() {
    global $post;
    echo '<p>ここに好きなコンテンツを入れることが出来ます</p>';

}
function add_my_box_hooks() {
    //add_meta_box('my_box', 'タイトル', 'add_my_box', '投稿タイプ', 'normal', 'high');
    add_meta_box('my_box', '好きなコンテンツ', 'add_my_box', 'post', 'normal', 'high');
    add_meta_box('my_box', '好きなコンテンツ', 'add_my_box', 'page', 'normal', 'high');
    add_meta_box('my_box', '好きなコンテンツ', 'add_my_box', 'foo', 'normal', 'high');
}
function add_my_box_init() {
    add_action('admin_menu', 'add_my_box_hooks');
}
add_action('init', 'add_my_box_init');
?>

下層権限ユーザーにカテゴリ作成の権限を与える

クライアントさんには投稿権限だけ与えている、という契約をする制作者さんもいらっしゃると思います。その際、多くの場合はクライアントさんに「投稿者」の権限で利用してもらう事が大半かと思います。

ただ、投稿者はカテゴリを作成出来ません。逐一連絡されるのも大変ですので、作成権限を与えてあげましょう。

<?php
get_role('author')->add_cap('manage_categories');
?>

同じ方法でいろいろ応用できますね。
via:【編集者に管理パネル設定へのアクセスを許可を与える】

投稿フォーマットのテキストを変更


投稿フォーマット自体ほとんど使われていない気もしますが、個人的には好きなのでおまけ的に書いておきます。テキストを好きな物に変更して使いやすくしてみます。

<?php
function rename_post_formats( $safe_text ) {
         // if ( $safe_text == '元々のテキスト' )  return '変更したいテキスト';
	if ( $safe_text == '標準' )  return '通常投稿';
	if ( $safe_text == 'アサイド' )  return 'ツイート';
	if ( $safe_text == 'リンク' )  return 'Webサイト';
	if ( $safe_text == 'ギャラリー' )  return '動画';
	if ( $safe_text == 'ステータス' )  return 'コード';
	if ( $safe_text == '引用' )  return '名言';
	if ( $safe_text == '画像' )  return 'イメージ全般';
    return $safe_text;
}
add_filter( 'esc_html', 'rename_post_formats' );
?>

/*既に投稿フォーマットが登録されている必要あり*/

via:WordPressの投稿フォーマットのラベル（テキスト）を変更する

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


ダッシュボードに記事数が表示されますが、カスタム投稿タイプの項目はありません。必要なら追加してあげましょう。

<?php
add_action( 'dashboard_glance_items', 'add_custom_post_dashboard_widget' );
function add_custom_post_dashboard_widget() {
  $args = array(
    'public' => true,
    '_builtin' => false
  );
  $output = 'object';
  $operator = 'and';

  $post_types = get_post_types( $args, $output, $operator );
  foreach ( $post_types as $post_type ) {
    $num_posts = wp_count_posts( $post_type->name );
    $num = number_format_i18n( $num_posts->publish );
    $text = _n( $post_type->labels->singular_name, $post_type->labels->name, intval( $num_posts->publish ) );
    if ( current_user_can( 'edit_posts' ) ) {
      $output = '<a href="edit.php?post_type=' . $post_type->name . '">' . $num . '&nbsp;' . $text . '</a>';
    }
    echo '<li class="post-count ' . $post_type->name . '-count">' . $output . '</li>';
  }
}
?>

via:WordPress のカスタム投稿タイプの記事数をダッシュボードに一括で表示設定する方法

投稿一覧や固定ページ一覧のテーブルにアイキャッチの列を追加


過去記事の編集の際、記事一覧テーブルに画像があると認識しやすくなります。アイキャッチを使っているなら列を追加してあげるといいですね。

<?php
if ( !function_exists('AddThumbColumn') && function_exists('add_theme_support') ) {

    add_theme_support('post-thumbnails', array( 'post', 'page' ) );

    function AddThumbColumn($cols) {

        $cols['thumbnail'] = __('Thumbnail');

        return $cols;
    }

    function AddThumbValue($column_name, $post_id) {

            $width = (int) 35;
            $height = (int) 35;

            if ( 'thumbnail' == $column_name ) {
 
                $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
                $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
                if ($thumbnail_id)
                    $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
                elseif ($attachments) {
                    foreach ( $attachments as $attachment_id => $attachment ) {
                        $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
                    }
                }
                    if ( isset($thumb) && $thumb ) {
                        echo $thumb;
                    } else {
                        echo __('None');
                    }
            }
    }

    // 投稿
    add_filter( 'manage_posts_columns', 'AddThumbColumn' );
    add_action( 'manage_posts_custom_column', 'AddThumbValue', 10, 2 );

    // 固定ページ
    add_filter( 'manage_pages_columns', 'AddThumbColumn' );
    add_action( 'manage_pages_custom_column', 'AddThumbValue', 10, 2 );
}
?>

wordpress.stackexchange

最後に

明日もWordPress関連の記事と宣伝をさせて頂く予定です。今週はWP週間ですが、宜しくお願い致します。

WordPressスニペット

Resources & Tools

Resource全記事 →

OSS

OSS全記事 →

AI

AI全記事 →

CSS snippet

CSS全記事 →

JavaScript snippet

JavaScript全記事 →

WordPress Code

WordPress全記事 →