WordPressテキストエディタや管理画面のスタイルをSimplicity2子テーマ内で編集するカスタマイズ

WordPressのテキストエディタは文字が小さく見にくいので、wp-includes/cssフォルダ内にあるWPコアファイルeditor.min.cssを直接編集していました。

アップデート・アップグレードでカスタマイズが消えるのが面倒なので、子テーマ内で編集できないかと色々試しまくった結果、Simplicity2親テーマにあるadmin.cssで上書き可能だったので、案外シンプルな方法でカスタマイズができました。

テキストエディタ.wp-editor-areaと、管理画面のスタイルを子テーマで上書き変更するようPHPのコピペ・CSSの導入編集するだけ。ハードルは低めなので、好みの管理画面に変更してください＾＾

WordPress管理画面head内の親テーマCSS下にCSSを読み込む
1. functions.phpに管理画面用CSS導入コードをコピペ
  1. 管理画面からfunctions.phpの更新ができない場合
Simplicity子テーマに管理画面用CSSをアップロード
管理画面のカスタマイズ
1. テキストエディタのHTMLを見やすく変更するCSS
さいごに

WordPress管理画面head内の親テーマCSS下にCSSを読み込む

Simplicity2では管理画面用のスタイルシートをWordPressのダッシュボード内にだけ読み込まれるようになってました。

はじめにサクッと説明だけしておくと、親テーマlibフォルダ内にあるadmin.php：37～47行目に以下の項目があります。

//アイキャッチ画像の列の幅をCSSで調整
function customize_admin_css_list() {
    echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/admin.css" />'.PHP_EOL;
    //echo '<style TYPE="text/css">.column-thumbnail{width:80px;}</style>'.PHP_EOL;
}
//カラムの挿入
add_filter( 'manage_posts_columns', 'customize_admin_manage_posts_columns' );
//サムネイルの挿入
add_action( 'manage_posts_custom_column', 'customize_admin_add_column', 10, 2 );
//投稿一覧のカラムの幅のスタイル調整
add_action('admin_print_styles', 'customize_admin_css_list', 21);

2～5・11行目のコードを子テーマ側でゴニョゴニョして完了！

今からやる事

コードをコピーして子テーマ：functions.phpにペースト。確認したら更新

簡単ですけどfunctions.phpの編集前は、面倒でも必ずバックアップをとって、万が一の時用に復元できる準備をしてください。

見出し3.2：FTPソフトで簡易的バックアップとエラーが出たら5秒で復元

LINK簡易的バックアップ！初心者用WordPressファイル内説明と、5秒で復元する方法

アップロード・ダウンロード方法が不安でしたら、チェックしてください。

functions.phpに管理画面用CSS導入コードをコピペ

バックアップがとれたらコピペ。

//admin.css子テーマで追加
function customize_admin_css_list2() {
	echo '<link rel="stylesheet" href="'.get_stylesheet_directory_uri().'/admin.css" />'.PHP_EOL;
}
//親テーマadmin.css下に子テーマCSSを読み込む
function after_simplicity_parent() {
	add_filter( 'admin_print_styles', 'customize_admin_css_list2', 22 );
}
// 親テーマ実行後、子テーマを読み込む
add_action( 'after_setup_theme', 'after_simplicity_parent' );

コピペミスがないか確認後、子テーマ：functions.phpを更新！

管理画面からfunctions.phpの更新ができない場合

FTPソフトか、ファイルマネジャー（サーバー上にあるFTP）で編集保存します。

ダウンロード（サーバー側からPC内ローカルへ）・アップロード（PC内からサーバーへ上書き）するパス

/your-site.com（/public_html）/wp-content/themes/simplicity2-childフォルダ内functions.phpがある階層

FTPソフトで編集する場合

バックアップとは別フォルダにfunctions.phpをダウンロードし、TeraPadなどのテキストエディタで、PHPコードをコピペ・間違いなければ名前を変えずPC内に保存。※文字コード：UTF-8N

子テーマフォルダ内にアップロード。

ファイルマネジャー（サーバー上にあるFTP）で編集する場合も同じ。

LINK外出先で使えるロリポップFTP！ファイル編集やアップロード・ダウンロード・ファイル転送ができて便利な使い方

Simplicity子テーマに管理画面用CSSをアップロード

今からやる事

CSSファイルGet！子テーマ内にアップロード。CSSの編集

/wp-content/themes/simplicity2/admin.cssをFTPソフトでダウンロード。
そのまま/wp-content/themes/simplicity2-childフォルダ内へアップロード
子テーマ内にあるadmin.cssを開き編集

子テーマ内admin.cssをすべて消して、1行目に分かりやすいようコメントをする。

/* 管理画面・テキストエディタ用style */

2行目からstyleを書いていけばOK！

管理画面のカスタマイズ

公開前にチェックしておきたい、パーマリンク・カテゴリ・アイキャッチ・タグなど、項目を目立たせる事も可能です。

管理画面のチェック事項をカスタマイズ

雑ですが、例えばこんな感じとか。広い範囲を見るとチェック項目が目に入るから確認できたり。CSSの値を変更すれば好きにアレンジできます。

/* タイトルの文字変更 */
#titlediv #title {
	font-size: 1.2em;
}
/* パーマリンクを目立たせる */
#editable-post-name {
	color: #ff0606;
}
/* 公開・更新日など文字の変更 */
.hndle span {
	font-size: 1.5em;
	color: #ff0606; /*色を赤になど*/
}
/* 説明文 */
.inside .howto {
	font-size: 1.2em; /*フォントサイズを変更*/
	display: none; /*非表示にしたい*/
}