ブログBlog

WordPressテーマカスタマイザー、カラーピッカーで透過色へ対応

今回掲載する内容は、Wordpressで独自テーマを作成するテーマ作成者向けの内容です。
Wordpressで独自テーマを作成する際、テーマカスタマイザーという機能を使うのですが、標準のカラーピッカーでは透過色の設定ができません。
しかしながら、GitHubを確認しますと、既に透過色に対応したカラーピッカーを公開されている方がいらっしゃいましたので、その内容をご紹介させていただきます。
ご利用については、ライセンスをご確認頂き、自己責任でお願いいたします。

 

1.Alpha Color Picker Customizer Controlとは

標準のカラーピッカーでは、以下の通り透過色を指定することができません。
ヘックス値による16進数表記しかできません。

ヘックス値による16進数表記のみ

ヘックス値による16進数表記のみ

 

本「Alpha Color Picker」のライブラリを取り込み実装すると、以下のようにカラーピッカーで、rgbaで透過の指定もできるようになります。

rgbaで透過の指定

rgbaで透過の指定

 

2.Alpha Color Picker Customizer Controlの設置

1)モジュールのダウンロード

以下のGitHubのサイトからコードを取得します。
/BraadMartin/components/

 

2)モジュールの設置

各テーマに合わせて設置します。以下は弊社テーマ(rishun)で設置した例です。
今回は、rishunテーマのlib配下に設置しています。

Wordpressテーマ(rishun)配下

WordPressテーマ(rishun)配下

 

3.Alpha Color Picker Customizerの修正

設置した場所に合わせて、メインモジュールの「alpha-color-picker.php」のJSとCSSの読み込み箇所のファイルパスを変更する必要があります。
(Enqueue scripts and stylesの部分)

 

上記を変更しましたら、次にテーマから呼び出せるようにします。

 

4.テーマのカスタマイザーへの導入

今回のテーマでは、以下のファイルで実装していますので、本ファイル内にalpha-color-picker.phpを読み込む必要があります。なお、Wordpressのカスタマイザーのライブラリも読み込む必要があります。

/rishun/lib/customizer.php

 

これで準備は完了です。Customize_Alpha_Color_Control クラスが使えるようになります。

 

5.利用方法

通常のカラーピッカーと同じ実装方式で、WP_Customize_Color_Control の new 部分を Customize_Alpha_Color_Controlクラスに変更し、オプション指定で show_opacityをtrue(透過色を許容)に指定すれば完了です。

 

以上、皆さまのお役に立てれば幸いです。

 

 

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥100,000!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU