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

WordPress管理画面・テキストエディタのカスタマイズ

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

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

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

スポンサーリンク

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

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

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

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

今からやる事

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

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

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

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

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

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

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

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

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

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

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

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

  1. FTPソフトで編集する場合

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

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

  1. ファイルマネジャー(サーバー上にある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行目に分かりやすいようコメントをする。

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

管理画面のカスタマイズ

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

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

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

テキストエディタのHTMLを見やすく変更するCSS

テキストエディタのカスタマイズ前後

子テーマにもCSSを導入すればアップデートが来てもスタイルは消えないし、HTMLタグの確認のときなど、テキストエディタが見にくかったものがいきなり見やすくなります。

WordPressのエディタで記事を書いて、装飾したいときテキスト画面を開くと見にくい!またスマホやタブレットで書いてると、文字が小さく行間...

さいごに

ブログの管理画面で要素の検証で色々見てたら、結局PHPを触るハメになっちゃったけど、これでWordPressのテキストエディターが見やすくなって結果オーライ!

admin.cssでテキストエディタの編集ができるのも知らなかったし、その前に色々検索しても具体的な情報を見つけられなかったので、これはこれで良かったのかも。

カスタマイズお疲れさまです。かうたっくでした^^

トップへ戻る