サイトにWordPressを導入したいというご要望は年々増えています。
受託で制作するサイトでは、WEBに慣れない人でも更新作業を行えるように、WordPressの管理画面をより使いやすくする必要があります。
今回は、クライアントに納品する前にやっておきたい管理画面のカスタマイズをご紹介します。
目次
ログインURLを変更する
WordPressはデフォルトでは必ず「http://xxx.co.jp/wp-login.php」の形になっていて、ログインURLが分かってしまいます。誰でもログイン画面にアクセスできる状態は良くないので、ログインURLを独自のものに変更しましょう。
ログインURLを変更するには、Login rebuilderというプラグインを使用するのが一番簡単です。
プラグイン画面からLogin rebuilderをインストールし、有効化します。
プラグインの設定画面です。
「新しいログインファイル」の欄からURLを入力し、[稼働中]にチェックをいれて保存するとURLが変わります。
実際にログアウトして確認してみると良いでしょう。
詳細な内容は下記の記事にて取り扱っています。
▽WordPressのログインURLを変えるときは『Login rebuilder』を使おう
https://blog.8bit.co.jp/?p=18183
管理画面の不要なメニューを非表示にする
例えばコーポレートサイトでは、コメント機能はほぼ使用しません。管理画面からも触れないようにしてしまいましょう。
1 2 3 4 5 |
// 管理画面の不要なメニューを非表示にする add_action( 'admin_menu', 'remove_menus' ); function remove_menus(){ remove_menu_page( 'ページファイル名' ); } |
remove_menu_page( ‘ページファイル名’ ); で、メニューを非表示にすることができます。
カッコの中に、ページのファイル名を入れましょう。ページのファイル名を調べるには、実際にそのページを開いて、URL欄を確認します。コメントメニューの場合は edit-comments.php と記載します。
複数登録したい場合は、remove_menu_page()を追加します。
1 2 3 4 5 6 |
// 管理画面の不要なメニューを非表示にする(複数) add_action( 'admin_menu', 'remove_menus' ); function remove_menus(){ remove_menu_page( 'edit-comments.php' ); //コメントメニュー remove_menu_page( 'tools.php' ); //ツール } |
投稿のカテゴリー選択肢をradioボタンに変更する
投稿のカテゴリーはデフォルトではcheckboxになっています。サイトの構造上複数選択しないで欲しい場合は、radioボタンに変更しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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' ); |
管理画面の[タグ]を非表示にする
もし投稿の[タグ]メニューを使用する予定がなければ、こちらも非表示にしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 管理画面の[タグ]の非表示にする 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」を追加して、有効化しましょう。
プラグインの設定画面です。
ここから投稿タイプを選択して使用します。
詳細な使い方は、こちらの記事で紹介しています。
▽WordPressの投稿一覧画面をカスタマイズするなら『Admin Columns』
https://blog.8bit.co.jp/?p=19444
投稿タイトルのplaceholderを変更する
投稿やカスタム投稿のタイトルを入力するテキストフィールドですが、デフォルトでは「タイトルを追加」になっています。投稿の種類に合わせて変更しておくと、分かりやすくて親切です。
1 2 3 4 5 6 7 8 9 10 |
// 投稿タイトルの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文の条件を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 |
// 投稿タイトルの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の新しいブロックエディターですが、難しくて使いづらいというご意見をよく頂きます。変更するかどうかはクライアントのご要望次第ですが、クラシックエディターに変更しましょう。
1 2 |
// エディタをクラシックに add_filter( 'use_block_editor_for_post', '__return_false' ); |
また、クラシックエディターのビジュアルモードで使用できるタグは、h1~h6くらいまであります。
ここまでは使用しませんし、styleの設定も大変です。多すぎる場合は、不要なタグを削除しましょう。
こちらもあわせてfunctions.phpに追記します。
1 2 3 4 5 6 |
//テキストエディタ 不要なタグを削除 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を追加しましょう。
これは前項にも関連するのですが、クラシックエディターを使用しているか、ブロックエディターを使用しているかで記述方法が変わります。
クラシックエディターの場合
1 2 |
//テキストエデイターのstyle add_editor_style( 'editor-styles.css' ); |
ブロックエディターの場合
1 2 3 4 5 6 |
//テキストエデイターの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を適用したい場合は、記述内のファイル名を変更してください。