2022年4月1日

森島

【WordPress】納品前に確認したい管理画面カスタマイズ

WordPress

facebook
twitter

サイトにWordPressを導入したいというご要望は年々増えています。
受託で制作するサイトでは、WEBに慣れない人でも更新作業を行えるように、WordPressの管理画面をより使いやすくする必要があります。

今回は、クライアントに納品する前にやっておきたい管理画面のカスタマイズをご紹介します。

1 ログインURLを変更する
2 管理画面の不要なメニューを非表示にする
3 投稿のカテゴリー選択肢をradioボタンに変更する
4 管理画面の[タグ]を非表示にする
5 投稿の一覧画面に表示する情報を整理する
6 投稿タイトルのplaceholderを変更する
7 テキストエディターをクラシックモードに変更する
8 記事の編集中もテーマと同じ見た目になるようにCSSを適用する
- 8.1 クラシックエディターの場合
- 8.2 ブロックエディターの場合

ログインURLを変更する

WordPressはデフォルトでは必ず「http://xxx.co.jp/wp-login.php」の形になっていて、ログインURLが分かってしまいます。
誰でもログイン画面にアクセスできる状態は良くないので、ログインURLを独自のものに変更しましょう。

プラグインLogin rebuilderを追加する

ログインURLを変更するには、Login rebuilderというプラグインを使用するのが一番簡単です。

プラグイン画面からLogin rebuilderをインストールし、有効化します。

プラグインの設定画面です。

「新しいログインファイル」の欄からURLを入力し、[稼働中]にチェックをいれて保存するとURLが変わります。
実際にログアウトして確認してみると良いでしょう。

詳細な内容は下記の記事にて取り扱っています。
▽WordPressのログインURLを変えるときは『Login rebuilder』を使おう
https://blog.8bit.co.jp/?p=18183

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

例えばコーポレートサイトでは、コメント機能はほぼ使用しません。
管理画面からも触れないようにしてしまいましょう。

編集するファイル：　functions.php

※functions.php はテーマフォルダの中にあります。外観メニューからも編集できます。

// 管理画面の不要なメニューを非表示にする
add_action( 'admin_menu', 'remove_menus' );
function remove_menus(){
    remove_menu_page( 'ページファイル名' );
}

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

add_action( 'admin_menu', 'remove_menus' );

function remove_menus(){

remove_menu_page( 'ページファイル名' );

}

remove_menu_page( ‘ページファイル名’ );　で、メニューを非表示にすることができます。
カッコの中に、ページのファイル名を入れましょう。ページのファイル名を調べるには、実際にそのページを開いて、URL欄を確認します。コメントメニューの場合は edit-comments.php と記載します。

複数登録したい場合は、remove_menu_page()を追加します。

// 管理画面の不要なメニューを非表示にする(複数)
add_action( 'admin_menu', 'remove_menus' );
function remove_menus(){
    remove_menu_page( 'edit-comments.php' ); //コメントメニュー
    remove_menu_page( 'tools.php' ); //ツール
}

// 管理画面の不要なメニューを非表示にする(複数)

add_action( 'admin_menu', 'remove_menus' );

function remove_menus(){

remove_menu_page( 'edit-comments.php' ); //コメントメニュー

remove_menu_page( 'tools.php' ); //ツール

}

投稿のカテゴリー選択肢をradioボタンに変更する

投稿のカテゴリーはデフォルトではcheckboxになっています。サイトの構造上複数選択しないで欲しい場合は、radioボタンに変更しましょう。

編集するファイル：　functions.php

function category_radio() {
?>
<script>
jQuery(function($) {
    $('#categorychecklist input[type=checkbox]').each(function() {
    $(this).replaceWith($(this).clone().attr('type', 'radio'));
  });
});
</script>
<?php
}
add_action( 'admin_head-post-new.php', 'category_radio' );
add_action( 'admin_head-post.php', 'category_radio' );

function category_radio() {

jQuery(function($) {

$('#categorychecklist input[type=checkbox]').each(function() {

$(this).replaceWith($(this).clone().attr('type', 'radio'));

});

</script>

<?php

}

add_action( 'admin_head-post-new.php', 'category_radio' );

add_action( 'admin_head-post.php', 'category_radio' );

管理画面の[タグ]を非表示にする

もし投稿の[タグ]メニューを使用する予定がなければ、こちらも非表示にしましょう。

編集するファイル：　functions.php

// 管理画面の[タグ]の非表示にする
function hide_taxonomy_from_menu() {
    global $wp_taxonomies;
    if ( !empty( $wp_taxonomies['post_tag']->object_type ) ) {
        foreach ( $wp_taxonomies['post_tag']->object_type as $i => $object_type ) {
            if ( $object_type == 'post' ) {
                unset( $wp_taxonomies['post_tag']->object_type[$i] );
            }
        }
    }
    return true;
}
add_action( 'init', 'hide_taxonomy_from_menu' );

// 管理画面の[タグ]の非表示にする

function hide_taxonomy_from_menu() {

global $wp_taxonomies;

if ( !empty( $wp_taxonomies['post_tag']->object_type ) ) {

foreach ( $wp_taxonomies['post_tag']->object_type as $i => $object_type ) {

if ( $object_type == 'post' ) {

unset( $wp_taxonomies['post_tag']->object_type[$i] );

}

return true;

}

add_action( 'init', 'hide_taxonomy_from_menu' );

投稿の一覧画面に表示する情報を整理する

投稿の一覧画面に表示される内容は、デフォルトでは使用しない情報が含まれていたり、足りなかったりします。
サイトの構成に合った内容を表示するように変更しましょう。

プラグインAdmin Columnsを追加する

一覧画面に表示する内容を変更するには、プラグインを追加するのが一番簡単です。
プラグインの「Admin Columns」を追加して、有効化しましょう。

プラグインの設定画面です。

ここから投稿タイプを選択して使用します。

詳細な使い方は、こちらの記事で紹介しています。
▽WordPressの投稿一覧画面をカスタマイズするなら『Admin Columns』
https://blog.8bit.co.jp/?p=19444

投稿タイトルのplaceholderを変更する

投稿やカスタム投稿のタイトルを入力するテキストフィールドですが、デフォルトでは「タイトルを追加」になっています。投稿の種類に合わせて変更しておくと、分かりやすくて親切です。

編集するファイル：　functions.php

// 投稿タイトルのplaceholderを変更
function change_default_title( $title ) {
	$screen = get_current_screen();
	$postType = $screen->post_type;
	if ( $postType == 'XXXXX' ) { 
		$title = 'ここにplaceholderで表示したい文言を記述';
	}
	return $title;
}
add_filter( 'enter_title_here', 'change_default_title' );

// 投稿タイトルのplaceholderを変更

function change_default_title( $title ) {

$screen = get_current_screen();

$postType = $screen->post_type;

if ( $postType == 'XXXXX' ) {

$title = 'ここにplaceholderで表示したい文言を記述';

}

return $title;

}

add_filter( 'enter_title_here', 'change_default_title' );

XXXXXの箇所には、変更したいposttypeを入力してください。
※デフォルトの投稿のplaceholderを変更したい場合は、「post」にします。
また、$titleには、placeholderに実際に表示させたい文字列を渡します。

複数変更したい場合は、下記のようにif文の条件を追加します。

// 投稿タイトルのplaceholderを変更
function change_default_title( $title ) {
	$screen = get_current_screen();
	$postType = $screen->post_type;
	if ( $postType == 'events' ) { 
		$title = 'イベントのタイトルを入力';
	}else if($postType == 'movie' ){
		$title = '動画のタイトルを入力';
	}
	return $title;
}
add_filter( 'enter_title_here', 'change_default_title' );

// 投稿タイトルのplaceholderを変更

function change_default_title( $title ) {

$screen = get_current_screen();

$postType = $screen->post_type;

if ( $postType == 'events' ) {

$title = 'イベントのタイトルを入力';

}else if($postType == 'movie' ){

$title = '動画のタイトルを入力';

}

return $title;

}

add_filter( 'enter_title_here', 'change_default_title' );

テキストエディターをクラシックモードに変更する

WordPressの新しいブロックエディターですが、難しくて使いづらいというご意見をよく頂きます。
変更するかどうかはクライアントのご要望次第ですが、クラシックエディターに変更しましょう。

編集するファイル：　functions.php

// エディタをクラシックに
add_filter( 'use_block_editor_for_post', '__return_false' );

1 2	// エディタをクラシックに add_filter( 'use_block_editor_for_post', '__return_false' );

また、クラシックエディターのビジュアルモードで使用できるタグは、h1～h6くらいまであります。
ここまでは使用しませんし、styleの設定も大変です。多すぎる場合は、不要なタグを削除しましょう。
こちらもあわせてfunctions.phpに追記します。

//テキストエディタ　不要なタグを削除
function custom_editor_settings( $initArray ){
 $initArray['block_formats'] = "大見出し=h2; 中見出し=h3; 小見出し=h4; 段落=p;";
 return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

//テキストエディタ　不要なタグを削除

function custom_editor_settings( $initArray ){

$initArray['block_formats'] = "大見出し=h2; 中見出し=h3; 小見出し=h4; 段落=p;";

return $initArray;

}

add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

記事の編集中もテーマと同じ見た目になるようにCSSを適用する

記事の編集中は、デフォルトのままだとテーマと見た目が異なるため、分かりにくいです。
エディターにも表の画面と同じCSSを追加しましょう。

これは前項にも関連するのですが、クラシックエディターを使用しているか、ブロックエディターを使用しているかで記述方法が変わります。

編集するファイル：　functions.php

クラシックエディターの場合

//テキストエデイターのstyle
add_editor_style( 'editor-styles.css' );

1 2	//テキストエデイターのstyle add_editor_style( 'editor-styles.css' );

ブロックエディターの場合

//テキストエデイターのstyle
add_action('after_setup_theme', 'block_editor_css');
function block_editor_css() {
	add_theme_support('editor-styles');
	add_editor_style( 'editor-styles.css' );
}

//テキストエデイターのstyle

add_action('after_setup_theme', 'block_editor_css');

function block_editor_css() {

add_theme_support('editor-styles');

add_editor_style( 'editor-styles.css' );

}

これで、editor-styles.css というファイル名のCSSがテキストエディターに適用されます。
いずれもCSSファイルはテーマフォルダの直下に置いて下さい。また、異なるファイル名のCSSを適用したい場合は、記述内のファイル名を変更してください。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

【WordPress】納品前に確認したい管理画面カスタマイズ

ログインURLを変更する

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

投稿のカテゴリー選択肢をradioボタンに変更する

管理画面の[タグ]を非表示にする

投稿の一覧画面に表示する情報を整理する

投稿タイトルのplaceholderを変更する

テキストエディターをクラシックモードに変更する

記事の編集中もテーマと同じ見た目になるようにCSSを適用する

クラシックエディターの場合

ブロックエディターの場合

関連記事

【PHP】PHPでExcelファイルを操作するお話その2

【PHP】PHPでExcelファイルを操作するお話その1

【Android】スプラッシュスクリーンを設定するお話

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

【WordPress】納品前に確認したい管理画面カスタマイズ

ログインURLを変更する

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

投稿のカテゴリー選択肢をradioボタンに変更する

管理画面の[タグ]を非表示にする

投稿の一覧画面に表示する情報を整理する

投稿タイトルのplaceholderを変更する

テキストエディターをクラシックモードに変更する

記事の編集中もテーマと同じ見た目になるようにCSSを適用する

クラシックエディターの場合

ブロックエディターの場合

関連記事

【PHP】PHPでExcelファイルを操作するお話 その2

【PHP】PHPでExcelファイルを操作するお話 その1

【Android】スプラッシュスクリーンを設定するお話

【PHP】PHPでExcelファイルを操作するお話その2

【PHP】PHPでExcelファイルを操作するお話その1