Coccon管理画面スタイル変更に！CSSを子テーマに導入コピペで簡単、実装方法

CocoonもSimplicityも、親テーマに管理画面上のスタイルを変更できるadmin.cssが付いてて、かなり簡単に管理画面のスタイルを変更できます。

一番オススメしたい人はWordPressエディタでタグを入れるひと。モバイルで編集する時、テキストエディタで範囲選択しタップする機会がある人などです。

導入方法はコードのコピペ。あとWindows用FFFTP・Mac・Windowsどちらでも使えるFileZillaなどのFTPソフトの設定が終わって使い方が分かるなら早いです。

admin.cssで出来る事は運営する上でも便利なので、後半の見出しをチェックしてくださいね。

これからやる事と注意点をチェック

• PC上でフォルダを作りその中にadmin.cssを入れてサーバーに置く作業
• functions.phpでちょっとした命令を書いて、サーバー上に反映させる

これだけで結構簡単です。

PHPファイルを触るときの注意点

今からfunctions.phpと言うファイルを触ります。最近のWordPressはPHPエラーの回避を自動でできるように変わりました。

管理画面上で触ろうとすると念には念を！と一見エラーが出たかのようなメッセージを出す事があります。※何度かテストしてもエラーは出ず快適な環境です。

変なメッセージを見ないため、FTPソフトかサーバー上にあるファイルマネージャ（Web上のFTP）を使ってくださいね。

• FTPソフトはPC上でファイルの変更保存
  • 保存したファイルなどをサーバーに転送する
• ファイルマネージャはWeb上にあるFTP。
  •  管理画面；外観・テーマの編集上にあるファイルを直接触って編集・転送せずに直接保存できる点が同じ。
  • （レンタルサーバーによっては使えない・置いてない）

まずバックアップをとって、復元できる準備をするのが一般的です。復元方法をチェックしておくと、3秒ほどで元に戻りますよ。

やった事ないひとは以下リンク先3章あたりをどうぞ❦

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

admin.cssの導入する

はじめにadmin.cssをサーバー上に置くので、フォルダとadmin.cssは作成せず、親テーマにあるフォルダを使います。

LINKCocoonダウンロード｜Cocoon

※FTPソフトでファイルをダウンロードしたものを使ってOK！

FTPソフトでCSSフォルダをダウンロード

親テーマからダウンロードするので、フォルダまでのパスをチェック！

• WordPressのフォルダ（/public_html）/wp-content/themes/cocoon-master/cssフォルダ

• 分かりやすくデスクトップにでもダウンロード

FTPソフトでアップロードするまでやる事

CSSフォルダをダウンロードできたら、不要なファイルを削除します。

1. fontawesome.min.cssは今回使わないので削除
   • CSSフォルダ内にadmin.cssだけ残す

1. CSSフォルダをそのまま、子テーマフォルダ内にアップロード。
   • themes/cocoon-child-masterフォルダ内

1. 管理画面『外観』『テーマの編集』『CSS』『admin.css』と開く
2. admin.cssの内容を全て消す

1. /*管理画面用CSS*/と間違い防止のため追記したらファイルを更新

今は導入しただけで有効化できてないので、管理画面だけ反映するように読み込ませます。

functions.phpで管理画面用CSSを反映させるよう追記

1. 親テーマにあるadmin.php (lib/admin.php)の一部をコピー
2. 子テーマfunctions.phpに貼り付け
3. 1行追記し保存だけでOK！

Cocoon親テーマのlibフォルダ内admin.phpのコピーし、1行追記

/wp-content/themes/cocoon-master/lib/admin.phpを開いてコピーする場所は以下画像の通りです。

/wp-content/themes/cocoon-child-masterフォルダ内のfunctions.phpにペーストしたら、以下の項目を検索してその下にコードを追記すればOK！

  wp_enqueue_style( 'admin-style', get_template_directory_uri().'/css/admin.css' );

  //この下に追記する
  wp_enqueue_style( 'child-admin-style', get_stylesheet_directory_uri().'/css/admin.css', array('admin-style') );

admin.cssを導入で、できる事

• テキストエディタの文字が小さいから大きくする
• モバイルで編集する機会がある人など

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

• 下書き保存と目立つ公開ボタンを間違えちゃいガチな人
• パーマリンク設定モロモロを忘れガチさん。などオススメ！！

LINKWordPress管理画面のカスタマイズ！CSSコピペで投稿ミスを防止しよう：Cocoon仕様

• 投稿編集画面のビジュアルにあるコードをスッキリさせたい

LINKWordPress管理画面ビジュアルエディタ上ボタンをスッキリさせるCSS：テーマCocoonで説明

さいごに

やると数分で出来ることですが、エラーが出る事もあるので必ずPHPを触るときはファイルのバックアップをとる習慣をつけてくださいね＾＾

LINK初心者向け！WordPressのバックアップ方法、記事をエクスポートする手順

と言っても、つい忘れた頃にエラーが出ちゃいます。以下リンクを一度チェックをしてみてください。

LINKバックアップがないのに、画面が真っ白、500 Internal Server Error！WordPress復元の対処

それでは。かうたっくでした！