WordPressカスタムカラーの停止

カスタムカラーはcssファイルに手を加えることなく各部の色を変更できるので、ウェブサイト制作初心者の方にはとても便利な機能ですが、次のような問題があります。

cssファイルでカラー変更できない
『親テーマstyle.css』 < 『子テーマstyle.css』 < 『カスタムカラー』という優先順位であり、カスタムカラーはあらかじめ変更できる箇所が定められているので、『style.cssファイル』を変更しても反映されません。

カスタムカラーの設定がヘッダー情報に出力される
SEO対策や更新のしやすさなどを考慮して、cssは別ファイルにすることが一般的ですが、カスタムカラーは直接phpファイルに出力されます。

これらの問題があるので、ウェブサイト制作経験者の中には、カスタムカラー機能を使わずにcssで色変更したいとお考えの方もいると思います。

そこで、カスタムカラー機能の停止方法について説明いたします。

直接、style.cssで色変更することにより、より自由なカラーリングができるのでおすすめです。

（1）functions.phpをコピーする

改造に失敗して元に戻せなくなるといけないので、必ず『functions.php』をコピーしてください。

phpはプログラムファイルなので、少し間違えただけで真っ白な画面が表示されます。

既にカスタマイズ済みの『functions.php』の改造に失敗した場合、それまでのすべての作業が無駄になってしまうので、どんな小さな作業を行う場合でも保険としてのコピーは徹底しましょう。

ドリームウィーバーやTeraPadで『functions.php』を開いてください。

注意

メモ帳でcssファイルやphpファイルを開いて変更してはいけません。エラーの原因となります。PHPやCSSに最適のテキストエディタを参考にしてください。

//改造前
add_action('wp_head', 'flashworks_customize_css');

//改造後
//add_action('wp_head', 'flashworks_customize_css');

508行目に上記のコードがあるので、先頭にスラッシュを2つ重ねてコメントアウトしてください。

削除してもいいのですが、これだけでカスタムカラーのcssは出力されませんし、再び使用する場合のことも考慮してこの対応でいいでしょう。

//カスタム背景
add_theme_support('custom-background', $custom_background);

なお、上記は背景色をカスタマイズするためのコードですが、WordPressで使用することが推奨されているので削除しないでください。

「便利なのでカスタムカラー機能は使いたいけど、この機能に含まれているパーツひとつの色をcssで設定したい」というときもあるでしょう。

しかし、カスタムカラー（ベースカラー）では複数のパーツの色をまとめて出力するようになっているため、ピンポイントで色を変更できません。

例えば、検索ボタンの色を変えたい場合は、『外観 » カスタマイズ » カスタムカラー » ベースカラー』で設定しますが、望まない『ページトップへ戻るボタン』などの色も変わってしまうのです。

『style.css』 < 『カスタムカラー』の関係のため、『style.css』を変更しても反映されません。

そこで、その場合は、『functions.php』のcss出力部分のコードから、該当するクラスを削除する必要があります。

447行目の//collor outputを見つけてください。

#page-top a	ページトップへ戻るボタン
.pagination a:hover	ページ送り（マウスオーバー）
.pagination .current	ページ送り（現在のページ）
.tagcloud a	タグクラウド（ウィジェット）
.searchform input[type=”submit”]	検索ボタン
.searchform input[type=”text”]	検索フォームのフレーム

上記を参考にして、クラス名を削除し、『style.css』で同じクラスの設定を変更すればピンポイントでカラーを変えられます。

その下にはその他のクラスも設定してありますが、追加や削除をして思い通りの仕様に変更することも可能です。

ぜひ、試してみてください。

前へ / 次へ