WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

WordPress 管理画面の投稿をカスタマイズ

2020年05月01日

投稿者: アンディ

WordPressサイトを構築、カスタマイズしていくと、機能が増え、不必要な項目やメニューで管理画面がごじゃごじゃしていく場合があると思います。

その際に、クライアント目線での使いやすさの向上などでダッシュボードの不要なメニューを非表示にさせたり、新しくカスタム投稿を追加したり、カスタマイズする方法をご紹介します。

管理画面の不要なメニューを非表示にする

全く使わないメニューや触って欲しくない項目は最初から非表示にしておきましょう。

例えば、投稿することがないので投稿メニューを非表示にしたい場合は「functions.php」に以下のように追加します。

管理画面の投稿を非表示にする

WordPressでは、デフォルトで投稿が用意されています。しかし、クライアントによっては使用しない場合もあるため、その際は非表示にすると使いやすいのではないでしょうか。

管理画面から投稿を非表示にするには「functions.php」に以下のコードを記述します。

※functions.phpを編集する場合は必ず、バックアップを取ってください。

管理画面 投稿メニューを非表示

/*【管理画面】投稿メニューを非表示 */
function remove_menus () {
	global $menu;
	remove_menu_page( 'edit.php' ); // 投稿を非表示
}
add_action('admin_menu', 'remove_menus');

これで管理画面から「投稿」メニューがなくなりました。

投稿以外の項目も同じように非表示にすることができます。

管理画面の各項目を非表示にする

/*【管理画面】投稿メニューを非表示 */
function remove_menus () {
	global $menu;
	remove_menu_page( 'index.php' );//ダッシュボード
	remove_menu_page( 'edit.php' );//投稿
	remove_menu_page( 'upload.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' );// 設定
}
add_action('admin_menu', 'remove_menus');

カスタム投稿を追加する

投稿の種類にはお知らせや、製品紹介、スタッフ情報などサイトの目的やクライアントの要望によって様々だと思います。そのため要望や機能にあったカスタム投稿を追加する必要があります。

カスタム投稿を追加するには「functions.php」に下記のようば記述をしていきます。今回はイベント情報というカスタム投稿を追加してみます。

/*【管理画面】カスタム投稿を追加 */
/* 例)イベント情報を追加 */
function custom_post_type() {
	$labels = array(
		'name' => 'イベント情報',//管理画面に表示する名前
		'add_new' => '新規イベント追加',//新規追加ボタンの名前
		'add_new_item' => '新規イベントを追加',//新規追加ページのタイトル
		'edit_item' => 'イベントを編集',//編集ページのタイトル
		'new_item' => '新規イベント',//一覧ページの「新規追加」ボタンのラベル
		'view_item' => 'イベントを表示',//編集ページの「投稿を表示」ボタンのラベル
		'search_items' => 'イベントを検索',//一覧ページの検索ボタンのラベル
		'not_found' =>  '投稿されたイベントはありません',//一覧ページに投稿が見つからなかったときに表示
		'not_found_in_trash' => 'ゴミ箱にイベントはありません。',//ゴミ箱に何も入っていないときに表示
	);
	$args = array(
		'label' => __('Events'),
		'labels' => $labels,
		'public' => true,// 投稿タイプをパブリックにする
		'menu_position' => 4,//メニューに表示される順番
		'supports'=> array('title', 'thumbnail', 'excerpt', 'editor') ,
		'menu_icon' => 'dashicons-flag',//アイコンの設定
		'has_archive' => 'event'
	);
	register_post_type( 'events', $args);
}
add_action( 'init', 'custom_post_type' );

これでカスタム投稿のイベント情報が追加されました。

同じように新着情報や、スタッフ情報などのカスタム投稿を追加することができます。複数の投稿を追加するにはラベルを追加します。

カスタム投稿のアイコンの変更

管理画面に表示させるアイコンは、WordPress公式のdashiconsから選択することができます。ラベルの「menu_icon」を編集してください。

'menu_icon' => 'ここにクラスを記述',//アイコンの設定

カスタム投稿ページのplaceholderの変更

次に投稿ページのカスタマイズをしていきます。まずは、タイトルのプレスホルダーを分かりやすい項目に変更しておきます。デフォルトではタイトルを追加になっていますが、今回はイベント名に変更します。

「functions.php」に以下のようなコードを追加します。

// playceholderの変更
function title_placeholder_change( $title ) {
	$screen = get_current_screen();
	if ( $screen->post_type == 'events' ) {
		$title = 'イベント名';
	}
	return $title;
}
add_filter( 'enter_title_here', 'title_placeholder_change' );

「$title = ”;」の部分に変更したい文字を入れます。

これで「タイトル名」から「イベント名」に変更となりました。

カスタム投稿に入力エリアを追加する

次に先ほど追加したカスタム投稿に任意の入力エリアを追加します。

例としてイベント情報にイベント期間を入力する欄を設けます。「functions.php」に追記していきましょう。

カスタム投稿に入力エリアを追加

// 固定カスタムフィールドボックス
function add_event_fields() {

add_meta_box( 'event_setting', 'イベントの情報', 'insert_event_fields', 'events', 'normal');
}
add_action('admin_menu', 'add_event_fields');

// カスタムフィールドの入力エリア
function insert_event_fields() {
global $post;

//下記に管理画面に表示される入力エリアを作ります。「get_post_meta()」は現在入力されている値を表示するための記述です。
echo '期間: <input type="text" name="event_date" placeholder="例)4/21~5/21" value="'.get_post_meta($post->ID, 'event_date', true).'" size="50"><br>';
}

これでカスタム投稿ページにイベント期間を入力する項目が追加されました。

カスタム投稿に入力内容を保存

入力するエリアは追加されましたが、入力した値を保存しないといけないのでそのコードを記述します。

// カスタムフィールドの値を保存
function save_event_fields( $post_id ) {
if(!empty($_POST['event_date'])){
	update_post_meta($post_id, 'event_date', $_POST['event_date'] ); //値を保存
}else{
	delete_post_meta($post_id, 'event_date'); //値を削除
}

}
add_action('save_post', 'save_event_fields');

これでカスタム投稿ページにイベント情報・期間の入力エリアが表示され、入力された値を使用することができます。

カスタム投稿一覧ページのレイアウトを変更

カスタム投稿ページで新規にページを追加します。

すると一覧ページは下記のような表示になると思います

せっかくなので先ほど追加した、イベント期間とアイキャッチをイベント情報一覧ページで表示させます。

// イベント期間とアイキャッチの表示
function manage_events_posts_columns($columns) {
	$columns['event_date'] = '期間';
	$columns['thumbnail'] = 'アイキャッチ';
	return $columns;
}

function add_column($column_name, $post_id){
	if ( $column_name == 'event_date' ) {
		$date = get_post_meta($post_id, 'event_date', true);
	}
	if ( isset($date) && $date ) {
	echo ($date);
	}

	if ( 'thumbnail' == $column_name) {
        $thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:100px;height:auto;' ));
    } if ( isset($thum) && $thum ) {
        echo $thum;
    } else {
        echo __('None');
    }
}

add_filter( 'manage_events_posts_columns', 'manage_events_posts_columns' );
add_action( 'manage_events_posts_custom_column', 'add_column', 10, 2 );

これで入力したイベント期間と設定したアイキャッチが一覧ページに表示されました。

カスタム投稿の入力内容を表示させる

さきほどカスタム投稿のイベント情報に、期間を入力する欄を設けましたが、ここに入力された値をフロントで表示させるには下記のコードを使用します。

<?php echo get_post_meta($post->ID, 'event_date', true); ?>

まとめ

カスタム投稿を追加する方法とそれのカスタマイズを紹介しました。

これで目的にあったクライアント目線の投稿タイプを設けることができます。

カテゴリー別けやカスタムタクソノミーの機能を追加することも可能なので、またご紹介したいと思います。

この記事の投稿者

フロントエンドエンジニア

アンディ

WordPressの「メディアの追加」トラブル時の対処

2015年9月6日 TORAT

新着情報や更新情報を静的HTMLのトップページに表示する

2015年4月16日 TORAT

サイトのルート変更 URL変更 トップディレクトリ変更

2010年4月26日 TORAT

2020年1月7日 アンディ

ブログ一覧へ

書いた人

WRITERS