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の設定色に変更できます。


関連記事

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

2018年5月30日

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

ワードプレスの記事投稿画面のエディタにボタンを追加する

2018年7月15日

ワードプレスのテーマを作っていると、記事投稿画面で便利な機能を追加したいと思う時があります。プラグインを追加すれば簡単にできるのでしょうが、今回は自作で作っていきます。ちなみにこのブログテーマは自作テーマ(KYO)なのですが、数種類のボタンを自作しています。 ビジュアルエディタにボタンを追加する functions.phpに以下のように書...

アフィリエイトに使えるワードプレスのテーマ

2018年5月13日

アフィリエイトに強く自由度の高い、ワードプレスのテーマを作りました。 ダウンロード   修正履歴 2018/05/25 記事本文がはみ出す現象を修正しました   テーマの名前はメリーラです。意味は特にありません。 アフィリエイトサイトに特化したテーマになっています。稼げるサイト作りに役立てて頂ければと思います。 &nb...

ワードプレス関連の記事

2018年5月14日

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

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

2018年5月25日

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

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

2018年5月24日

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