ブログのテーマを変更しました!WordPressテーマ:Cocoon利用中

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行目に以下の項目があります。

//アイキャッチ画像の列の幅を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がある階層

  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行目に分かりやすいようコメントをする。

/* 管理画面・テキストエディタ用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; /*非表示にしたい*/
}

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

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

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

WordPress投稿のテキスト画面が、超見やすいCSSカスタマイズ!スマホ・タブレットでミスタップを防ぐコード
WordPressのエディタで記事を書いて、装飾したいときテキスト画面を開くと見にくい!またスマホやタブレットで書いてると、文字が小さく行間がないから、別の場所をミスタップ! 5分の作業でWor

さいごに

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

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

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

コメント

トップへ戻る