拡張版 - WordPress テーマカスタマイザー
JavaScript PHP CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
admin
fields
inc
json
languages
.editorconfig
.gitignore
README.md
extend-theme-customizer.php
readme.txt
screenshot-1.png
screenshot-2.png

README.md

Extend Theme Customizer

  • WordPressのテーマカスタマイザーを拡張項目を追加
  • json ファイルからテーマカスタマイザーの設定を読み込み

テーマカスタマイザー API が実際の制作現場であまり使われていないため、 すこしだけでも楽に実装できるように制作しました。( 微妙ですが.. )

Github Upadter を別途インストールすることで、 管理画面からアップデート可能となります。

Installation

  1. Githubから zip をダウンロードし、管理画面からインストール・有効化
  2. コマンドラインにてプラグインディレクトリに移動後、 git clone
git clone https://github.com/1shiharaT/extend-theme-customizer.git extend-theme-customizer

Usage

  1. 別途設定ファイル( json )を作成します。

{
  "setting": {
    "capability": "edit_theme_options" // テーマカスタマイザーを利用できる管理権限
  },
  "sections": {
    "gg_general_settings": { // セクションID
      "title": "テキスト系", // セクションのタイトル
      "priority": 10, // セクションの順番
      "setting": {
        "general_keywords": { // セッティングID
          "transport": "postMessage", // javascriptでリアルタイム反映させる場合は "postMessage", リロードする場合は "refresh"
          "default": "", // 初期値
          "label": "通常のテキスト", // セッティングのラベル
          "type": "option" // セッティングのタイプ
          "output": {
            // セレクターとそれに対応するプロパティを記述することで、インライン CSS としてヘッダー内に吐き出します。
            ".logo" : "background-color"
          }
        }
      }
    }
  }
}

サンプル設定ファイル

  1. セッティングファイルを FTP などでサイト内にアップロード。 又は、Gist や Drop Box などに設置。

  2. 管理画面設定画面にて、上記設定ファイルの URL を 入力

Option Type

  • text : テキストボックス
  • textarea : テキストエリア
  • text-editor : テキストエディター
  • color : カラーピッカー
  • image : メディアアップロード
  • layout-picker : レイアウトピッカー
  • date-picker : 日付ピッカー ( HTML5 )
  • category-dropdown : カテゴリードロップダウン
  • google-font : Google Font
  • menu-dropdown : メニュードロップダウン
  • post-dropdown : 投稿ドロップダウン
  • post-type-dropdown : 投稿タイプドロップダウン
  • taxonomy-dropdown : タクソノミードロップダウン
  • user-dropdown : ユーザードロップダウン

TODO

  • 管理画面からGUIでオプションの設定を可能に
  • カスタマイザープレビュー用の javascript を自動出力
  • 設定に応じて動的にCSSを出力
  • ページ毎に設定項目の変更

Credit