Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

Cocoon管理画面用の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フォルダ

CocoonCSSフォルダをダウンロード

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

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

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

FFFTPソフト上でfontawesome.min.cssを削除

FFFTPソフトで削除のポップアップ画面

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

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

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

『外観』『テーマの編集』『CSS』『admin.css』

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

内容を削除後、追記した様子

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

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

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

ポイント

はじめに適当なフォルダをデスクトップに作成してfunctions.phpのバックアップを保存してください。

  • コピペミスでもエラーが出ます。復元の準備が整ったら開始❦
  1. 親テーマにあるadmin.php (lib/admin.php)の一部をコピー
  2. 子テーマfunctions.phpに貼り付け
  3. 1行追記し保存だけでOK!
 親テーマでadmin.phpの追加変更があれば反映しません。反映させるには今回と同じ工程をする必要がある。
※コピペしなかった場所の変更はスルーOK!

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

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

コピーする箇所:追記箇所

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

上の画像は以下コードを追記済み。サーバーのFTPで直接編集❦
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') );
チェック!

上コードはページ内(コード)検索用。child-admin-styleの1行を追記

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

WordPress管理画面にある『投稿一覧』の『作者名』非表示・投稿編集で未設定防止で『パーマリンク』や『文字列』をCSSでハイライトした様子

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

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

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

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

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

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

さいごに

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

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

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

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

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

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る