KYO

テーマカスタマイザでカラーコントロールを使って色を指定する

2018年7月27日 ワードプレス , ,

ワードプレスの自作テーマを作ってたんですが、テーマカスタマイザというのを最近知りました。
テーマカスタマイザとはヘッダー画像とか設定する「外観」→「カスタマイズ」の部分です。プレビュー見ながらテーマの設定を変更する画面のことです。

これは視覚的にテーマをカスタマイズできるので、初心者でもテーマカスタマイズをしやすくなるというメリットがあります。

テーマカスタマイザにオリジナルの項目を追加する

カラーコントロールとはクリックすると色がわんさか出てきて色選択できるやつです

テーマカスタマイザにオリジナルの項目を追加するときは
customize_registerというアクションフックを使います。

フックする関数の引数に$wp_customizeを指定しましょう。テーマカスタマイザのことですね。こいつにadd_settingと、add_sectionとadd_controlを使っていきます。

値の設定とセクションの設定とコントロールの作成が流れになります

functions.phpに記載していきます

ひな形はこんな感じです。この引数の$wp_customizeの関数を使って項目を増やしていきます。

ちょっと駆け足でやっていきますがコメントのとおりです。

これで項目が追加されていますが、もう一つ同じセクションで同じようにセッティングキーを扱えるようにします

これを関数内に追記します.
セクションは既に定義済なので定義する必要はないですね
新しいセッティングキーを設定して、新しいコントロールを作成するだけです

カラーコントロールもしっかり表示されています。
このカラーコントロールはクリックすると、ペイントとかでよくある例のあれが出てきます。

指定した色をCSSで使う方法

次にセッティングキーの取得をやってみます。
今回は文字色を変えるということでやっていきます

カラーコントロールで指定した値をcssファイルから読み取れないので、functions.phpに以下のような関数を作ってアクションフックを使います

 

こうすることで.study要素の文字色をmy_kyo_study_colorの設定色に変更できます。


関連記事

ワードプレス関連の記事

2018年5月14日

関連記事に表示されます。

ワードプレスのカスタムウィジェットでSNSシェアリンクを作る方法

2018年5月24日

環境:WordPress 4.6.1   ワードプレスで自作テーマを作っていると、ウィジェットを自作すればもっと開発効率が上がるのにな。と思うことがあると思います。 ワードプレスにはウィジェットエリアという便利な機能があるので、これを使いこなすことは自由度が高く、カスタマイズ力のあるテーマを作ることが可能になります。  ...

ワードプレスのフィルターフックの基本を理解する

2018年5月25日

ワードプレスでテーマを作っているとフックという言葉を見かけます。 私はよくわからずにスルーしていましたが、勉強したので備忘録的にまとめます。     ワードプレスで自作テーマを作っていると、この機能のこれが邪魔だな!と思うことがあったりして、知らず知らずのうちにフィルターフックを使っていることがあります。 例えば、記事...

ワードプレスのアクションフックの基本

2018年5月26日

先日、フィルターフックについて書きましたが、今回はアクションフックについて書きます。 ワードプレスのフィルターフックの基本を理解する   アクションフックを使いこなすと、高度なプラグインとかが作成できるようになりそうですね。 ワードプレスのアクションに関連して関数を呼び出せるようになります。   具体的には、記事を投稿...

ワードプレスでお店のホームページを作るならゲール

2018年6月23日

ワードプレスのテーマを作りました。 テーマの名前はゲールです。   ゲール紹介ページ デモページ   主に飲食店や美容系のお店をターゲットにしています。 普通のブログには向いていないのですが、ビジネスサイトを作るならば、とてもオススメのテーマになっています。   今のところは飲食店や美容系などのお店のホームペ...

ワードプレスでソースコード書くなら Crayon Syntax Highlighter一択

2018年5月30日

プログラム系のブログを書いていると、プログラムのソースコードを表示させたい場面があります。 しかし綺麗にソースコードを書くのは困難です。   ワードプレスでは記事編集モードで、ソースコードを入力しようとすると様々なトラブルが起こります(笑) 例えば、変な位置で改行されたりされなかったり、空白が消えたり、特殊文字に変換されたりと、...