ホーム FAQ コデックス ドキュメント 動画 ダウンロード Demo サポート もっと見る 販売前のお問い合わせ 翻訳 互換性をリクエスト 更新履歴 ニュース サイトマップ より多くのツールを入手
HUSKY - Products Filter Professional for WooCommerce
ホーム › Codex › スマートデザイナー

スマートデザイナー

この拡張機能により、カスタムフィルター要素を作成できます

デモサイト: https://demo-sd.products-filter.com/

デフォルトでは、WOOF SD にはカスタマイズ用の 4 つの基本的な要素が用意されています。

  • チェックボックス (デフォルト)
  • ラジオ
  • スイッチ
  • 色

より多くのカスタム要素は以下で見つけることができます。 WOOF SD Gallery。もしあなたが アイデアがあります カスタム要素について、私たちに書いてください サポートで.

 

トップパネル

  • バック – 要素のリストに戻る
  • プリセット – 管理者は現在のオプションセットを保存し、他の要素に適用できます。 同じタイプ
  • ドロップダウン システム上のあらゆる種類の要素とともに。「」ボックスタグ」は、子 WordPress テーマに配置されたカスタム要素です。このような要素の作成方法については、以下をお読みください。
  • ショップのすべての実際のwoocommerceタクソノミーのドロップダウンリスト。フィルター要素の構築時の視覚的なヘルプのみを目的としています。また、要素タイプ「カラー」を使用して、このドロップダウンタクソノミーによって選択されたタームに色と画像を添付するためにも使用されます (「カラー」については以下をお読みください。)
  • リセット – if to click makes reset of all custom options to default one for the current filter element

作成して適用

  • タブ「拡張機能「拡張機能をアクティブにする」スマートデザイナー‘ (有効になっていない場合) して保存ボタンを押してください
  • ページ再読み込み後、「」タブに移動します。スマートデザイナー‘
  • ボタン「Elementを作成‘
  • 新しい要素のタイトルを設定（フィールドをクリック)
  • クリックして「編集」ボタンで新しい要素オプションを入力
  • 要素オプション内に入力した場合、そのタイプを選択する必要があります: チェックボックス、ラジオ、スイッチャー、カラー、または WordPress テーマにインストールされている要素に応じて他のもの (カスタム要素タイプは以下で説明します）。各タイプには、他の要素タイプと重複しない独自のオプションセットがあります！
  • スイッチャーを除くすべての基本要素にもレイアウトテンプレートがあります（リスト、タイル、またはラジオ、チェックボックス), あなたのニーズに合ったものを1つ選択してください。
  • 現在作成中の要素のタクソノミーを選択できます。
  • 説明を使用してオプションを操作し、希望するカスタマイズを作成してください。
  • すべての変更は AJAX によって自動的に保存されました
  • 十分だと判断したら、「プリセット」ボタンをクリックして、将来の要素のカスタムオプションをそこに保存します (新しい要素からやり直さないために)
  • 最後のステップは「タブ」に移動することです構造」と、作成したばかりの要素タイプをタクソノミにアタッチします。Smart Designerで作成されたすべての要素には、プレフィックス「」が付きますSD：‘
  • プレス 保存 下のボタン
  • ショップのフロントサイドに移動して楽しんでください 🙂

カスタマイズに関するヒント

  • テキストに適用するフォントファミリーがわからない場合は、「継承」これは現在のWordPressテーマのフォントファミリーを適用します。また、フォントファミリーを適用すると、それが現在のWordPressテーマでサポートされている必要があり、このフォントがサイトのwp-admin側に含まれている保証はないため、バックエンドとフロントエンドで視覚的な結果が100％同じになるとは限らないことに注意してください。
  • 透明なPNG背景画像の色の必要がない場合は、「」という単語を使用してください透明カラーの16進コードの代わりに
  • Googleで「背景パターン画像‘
  • 美しい色を探しているなら、例えばここで見つけることができます https://codebeautify.org/hex-to-pantone-converter
  • カラーコードコンバーター https://rgbacolorpicker.com/hex-to-rgba

プリセット

Presets を使用すると、同様の要素に適用するためのオプションを保存できるため、制作時間を短縮できます。次のことができます。

  • プリセットを作成する
  • 新しい要素に同じタイプのプリセットを適用する（チェックボックス、ラジオ、カラー、スイッチャー、カスタムタイプ) – タイトルをクリックするだけです。たとえば、ラジオ用に作成されたプリセットは、チェックボックスでは見えず、その逆も同様です。
  • プリセットをテキスト情報として他人に共有する (開発者、同僚、サイトなど…）。目のボタンをクリックします。
  • 誰かが共有したプリセットコードをインポートします。編集ボタンをクリックします。コードを貼り付けます。ボタン「」を押しますインポート‘.

色

カラー要素 – 独自の機能を持つ特別な要素です – 選択したタクソノミーの各タームに色と画像を割り当てます (リセットボタンの前のドロップダウンを参照してください）ポップアップを使用して

データは特別なタームメタキーに保存されます：

  • woof_sd_color
  • woof_sd_color_image

これらのキーは、現在のWordPressテーマのfunctions.phpファイルでオーバーライドできます。これは、用語に独自のカラーオプションをすでに設定している場合に役立ちます。次のフックを使用してください：

  • get_woof_sd_term_color_key – ストレージタクソノミータームのカラーデータを保存するためのフック 
    add_filter('get_woof_sd_term_color', function ($term_id) {
    $meta_key = '__YOUR_OWN_KEY__';
    $color = get_term_meta($term_id, $meta_key, true);//you can use your own code to get term color using its $term_id
    return $color ? $color : 'inherit';
});
  • get_woof_sd_term_color_image_key– 分類用語の画像データを保存するためのフック 
    add_filter('get_woof_sd_term_color_image', function ($term_id) {
    $meta_key = '__YOUR_OWN_KEY__';
    $img = get_term_meta($term_id, $meta_key, true);//you can use your own code to get term color using its $term_id
    return $img ? $img : '__YOU_CAN_PLACE_HERE_YOUR_DEFAULT_IMAGE_LINK__';
});

開発者専用カスタム要素

WOOF SDにより、開発者は独自のカスタム要素を作成できます。必要なのは、優れたCSS+HTMLコードを作成することだけです。ここに1つの例があります： https://codepen.io/quinlo/pen/ReMRXz – フィルター要素を作成するにはこれで十分です。フィルター要素は デモサイト -> 「商品タグ‘

下の画像で、この要素をシステムに追加する方法を見ることができます：

  • 現在の WordPress テーマで (チャイルドテーマの使用をお勧めします）「woof」フォルダを作成する
  • フォルダ内のwoof「フォルダを作成」ext‘
  • フォルダ内のext「フォルダを作成」smart_designer‘
  • フォルダ内のsmart_designer‘ elementsフォルダを作成
  • フォルダ内の要素」フォルダを作成し、必要に応じてアンダースコアを使用します
  • カスタム要素タイプフォルダーには次のファイルが必要です:
    • css/styles.css – 要素のすべてのCSSコード
    • js/ie.js – IE を拡張する JS クラスです。コピー＆ペーストしてください。 
      'use strict';
import {IE, Helper} from '../../../import.js';//created automatically
//This class is for constructor on backend
//!!Rename class and put its name into file data.php field js_class
export default class Boxtags extends IE {
    draw() {
        super.draw();

        Helper.ajax(null, {}, template => {
            let terms = this.visor.sd.demo_taxonomies_terms;
            let block = this.assemble_terms(terms, template);

            this.container.insertAdjacentHTML('afterbegin', block);
            if (this.container.querySelectorAll('input')) {
                this.container.querySelectorAll('input')[0].setAttribute('checked', true);//for visual test
            }

            this.container.className = `woof_list_${this.template_folder}_sd_${this.template_num}`;
            this.wrapper.appendChild(this.container);
        }, false, this.template_url);
    }
}

      JS クラスの名前を変更します (Boxtags の代わりに）、これは重要であり、file data.php で使用されます

    • templates/tpl.php – 必要に応じてさらに多くのファイルを持つこともできます。tpl-1.php、tpl-2.php などと名前を付けてください。すべてのテンプレートファイルは data.php ファイルで宣言する必要があります。
    • data.php – ここにオプションの配列があります。そのキーはファイルで使用されます css/styles.css およびテンプレートも 
      <?php

if (!defined('ABSPATH'))
    die('No direct access allowed');
//View is managed by the Data!
return [
    'title' => 'Box tags', //!!
    'prefix' => 'boxtags_', //!!unique prefix for css vars
    'js_class' => 'Boxtags', //!!important, class name from ie.js
    'templates' => [
        0 => [
            'title' => esc_html__('Template #1', 'woocommerce-products-filter'),
            'use_subterms' => 0//will subterms display or only parent terms depending of the current taxonomy
        ]
    ],
    'template' => 0,
    'demo_taxonomies' => [
        0 => esc_html__('Example terms by real taxonomy', 'woocommerce-products-filter')
    ],
    'selected_demo_taxonomy' => 0, //demo data for visor
    'sections' => [
        [
            'title' => esc_html__('Terms', 'woocommerce-products-filter'),
            'table' => [
                'header' => [
                    [
                        'value' => esc_html__('Options', 'woocommerce-products-filter'),
                        'width' => '50%',
                        'action' => 'save_custom_element_option'
                    ],
                    [
                        'value' => esc_html__('Description', 'woocommerce-products-filter'),
                        'width' => '50%',
                    ],
                ],
                'rows' => [
                    'padding_vertical' => [
                        ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')]
                    ],
                    'padding_side' => [
                        ['value' => ['element' => 'ranger', 'value' => 12, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Padding horizontal', 'woocommerce-products-filter')]
                    ],
                    'font_family' => [
                        ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''],
                        ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'font_size' => [
                        ['value' => ['element' => 'ranger', 'value' => 13, 'min' => 8, 'max' => 24], 'measure' => 'px'],
                        ['value' => esc_html__('Text font size', 'woocommerce-products-filter')]
                    ],
                    'font_weight' => [
                        ['value' => ['element' => 'select', 'value' => 400, 'options' => [
                                    '100' => '100',
                                    '200' => '200',
                                    '300' => '300',
                                    '400' => '400',
                                    '500' => '500',
                                    '600' => '600',
                                    '700' => '700',
                                    '800' => '800'
                                ], 'conditions' => []]],
                        ['value' => 'Text font weight'], //cell
                    ],
                    'color' => [
                        ['value' => ['element' => 'color', 'value' => '#adadad']],
                        ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
                    ],
                    'margin_right' => [
                        ['value' => ['element' => 'ranger', 'value' => 5, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Margin right', 'woocommerce-products-filter')]
                    ],
                    'margin_bottom' => [
                        ['value' => ['element' => 'ranger', 'value' => 5, 'min' => 0, 'max' => 30], 'measure' => 'px'],
                        ['value' => esc_html__('Margin bottom', 'woocommerce-products-filter')]
                    ],
                    'bg_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color red channel', 'woocommerce-products-filter')]
                    ],
                    'bg_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color green channel', 'woocommerce-products-filter')]
                    ],
                    'bg_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 255, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color blue channel', 'woocommerce-products-filter')]
                    ],
                    'bg_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 9, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Background color opacity', 'woocommerce-products-filter')]
                    ],
                    'bg_image' => [
                        ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
                        ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
                    ],
                    'border_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 2, 'min' => 0, 'max' => 10], 'measure' => 'px'],
                        ['value' => esc_html__('Border width', 'woocommerce-products-filter')]
                    ],
                    'border_style' => [
                        ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [
                                    'dotted' => 'dotted',
                                    'dashed' => 'dashed',
                                    'solid' => 'solid',
                                    'double' => 'double',
                                    'groove' => 'groove',
                                    'ridge' => 'ridge',
                                    'inset' => 'inset',
                                    'outset' => 'outset',
                                    'none' => 'none',
                                    'hidden' => 'hidden'
                                ]]],
                        ['value' => 'Border style'],
                    ],
                    'border_radius' => [
                        ['value' => ['element' => 'ranger', 'value' => 25, 'min' => 0, 'max' => 50], 'measure' => 'px'],
                        ['value' => esc_html__('Border radius', 'woocommerce-products-filter')]
                    ],
                    'border_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color red channel', 'woocommerce-products-filter')]
                    ],
                    'border_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color green channel', 'woocommerce-products-filter')]
                    ],
                    'border_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 139, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color blue channel', 'woocommerce-products-filter')]
                    ],
                    'border_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 3, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Border color opacity', 'woocommerce-products-filter')]
                    ],
                    'checkbox_font_family' => [
                        ['value' => ['element' => 'text', 'value' => 'Font Awesome 5 Free'], 'measure' => '', 'before' => '"', 'after' => '"'],
                        ['value' => esc_html__('Checkbox font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'checkbox_font_size' => [
                        ['value' => ['element' => 'ranger', 'value' => 12, 'min' => 8, 'max' => 72], 'measure' => 'px'],
                        ['value' => esc_html__('Checkbox font size', 'woocommerce-products-filter')]
                    ],
                    'checkbox_content' => [
                        ['value' => ['element' => 'text', 'value' => "\f067"], 'measure' => '', 'before' => '"', 'after' => '"'],
                        ['value' => esc_html__('Checkbox content', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'checkbox_content_selected' => [
                        ['value' => ['element' => 'text', 'value' => "\f00c"], 'measure' => '', 'before' => '"', 'after' => '"'],
                        ['value' => esc_html__('Checkbox content selected', 'woocommerce-products-filter'), 'help' => '#']
                    ],
                    'transition' => [
                        ['value' => ['element' => 'ranger', 'value' => 200, 'min' => 0, 'max' => 1000], 'measure' => 's'], //cell
                        ['value' => esc_html__('Transition (ms)', 'woocommerce-products-filter')] //cell
                    ],
                ]
            ]
        ],
        [
            'title' => esc_html__('Hovered(Selected) Terms', 'woocommerce-products-filter'),
            'table' => [
                'header' => [
                    [
                        'value' => esc_html__('Options', 'woocommerce-products-filter'),
                        'width' => '50%',
                        'action' => 'save_custom_element_option'
                    ],
                    [
                        'value' => esc_html__('Description', 'woocommerce-products-filter'),
                        'width' => '50%'
                    ],
                ],
                'rows' => [
                    'selected_color' => [
                        ['value' => ['element' => 'color', 'value' => '#ffffff']],
                        ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 18, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color red channel', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 187, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color green channel', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 212, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Background color blue channel', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 10, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Background color opacity', 'woocommerce-products-filter')]
                    ],
                    'selected_bg_image' => [
                        ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
                        ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
                    ],
                    'selected_border_color_r' => [
                        ['value' => ['element' => 'ranger', 'value' => 27, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color red channel', 'woocommerce-products-filter')]
                    ],
                    'selected_border_color_g' => [
                        ['value' => ['element' => 'ranger', 'value' => 219, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color green channel', 'woocommerce-products-filter')]
                    ],
                    'selected_border_color_b' => [
                        ['value' => ['element' => 'ranger', 'value' => 248, 'min' => 0, 'max' => 255], 'measure' => ''],
                        ['value' => esc_html__('Border color blue channel', 'woocommerce-products-filter')]
                    ],
                    'selected_border_color_op' => [
                        ['value' => ['element' => 'ranger', 'value' => 10, 'min' => 0, 'max' => 10], 'measure' => ''],
                        ['value' => esc_html__('Border color opacity', 'woocommerce-products-filter')]
                    ],
                    'selected_border_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 2, 'min' => 0, 'max' => 10], 'measure' => 'px'],
                        ['value' => esc_html__('Border width', 'woocommerce-products-filter')]
                    ],
                    'selected_border_style' => [
                        ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [
                                    'dotted' => 'dotted',
                                    'dashed' => 'dashed',
                                    'solid' => 'solid',
                                    'double' => 'double',
                                    'groove' => 'groove',
                                    'ridge' => 'ridge',
                                    'inset' => 'inset',
                                    'outset' => 'outset',
                                    'none' => 'none',
                                    'hidden' => 'hidden'
                                ]]],
                        ['value' => 'Border style'],
                    ],
                    'selected_scale' => [
                        ['value' => ['element' => 'ranger', 'value' => 100, 'min' => 50, 'max' => 200], 'measure' => ''], //cell
                        ['value' => esc_html__('Scale', 'woocommerce-products-filter')] //cell
                    ],
                ]
            ]
        ],
        [
            'title' => esc_html__('Counter', 'woocommerce-products-filter'),
            'table' => [
                'header' => [
                    [
                        'value' => esc_html__('Options', 'woocommerce-products-filter'),
                        'width' => '50%',
                        'action' => 'save_custom_element_option'
                    ],
                    [
                        'value' => esc_html__('Description', 'woocommerce-products-filter'),
                        'width' => '50%',
                    ]
                ],
                'rows' => [
                    'counter_show' => [
                        ['value' => ['element' => 'switcher', 'value' => 'inline-flex', 'yes' => 'inline-flex', 'no' => 'none']], //cell
                        ['value' => esc_html__('Show counter', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 14, 'min' => 10, 'max' => 72, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'],
                        ['value' => esc_html__('Min width', 'woocommerce-products-filter')]
                    ],
                    'counter_height' => [
                        ['value' => ['element' => 'ranger', 'value' => 14, 'min' => 10, 'max' => 72, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'],
                        ['value' => esc_html__('Min height', 'woocommerce-products-filter')]
                    ],
                    'counter_top' => [
                        ['value' => ['element' => 'ranger', 'value' => -2, 'min' => -100, 'max' => 100, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Top', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_right' => [
                        ['value' => ['element' => 'ranger', 'value' => -3, 'min' => -100, 'max' => 100, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'],
                        ['value' => esc_html__('Right', 'woocommerce-products-filter')]
                    ],
                    'counter_font_size' => [
                        ['value' => ['element' => 'ranger', 'value' => 9, 'min' => 8, 'max' => 48, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Text font size', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_color' => [
                        ['value' => ['element' => 'color', 'value' => '#777777', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]], //cell
                        ['value' => esc_html__('Text color', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_font_family' => [
                        ['value' => ['element' => 'text', 'value' => 'consolas', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => ''], //cell
                        ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter')], //cell
                    ],
                    'counter_font_weight' => [
                        ['value' => ['element' => 'select', 'value' => 500, 'options' => [
                                    '100' => '100',
                                    '200' => '200',
                                    '300' => '300',
                                    '400' => '400',
                                    '500' => '500',
                                    '600' => '600',
                                    '700' => '700',
                                    '800' => '800'
                                ], 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]],
                        ['value' => 'Text font weight'], //cell
                    ],
                    'counter_side_padding' => [
                        ['value' => ['element' => 'ranger', 'value' => 0, 'min' => 0, 'max' => 48, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Side padding', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_bg_color' => [
                        ['value' => ['element' => 'color', 'value' => '#ffffff', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]], //cell
                        ['value' => esc_html__('Background color', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_bg_image' => [
                        ['value' => ['element' => 'image', 'value' => '', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'before' => 'url(', 'after' => ')'], //cell
                        ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_width' => [
                        ['value' => ['element' => 'ranger', 'value' => 1, 'min' => 0, 'max' => 10, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => 'px'], //cell
                        ['value' => esc_html__('Border width', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_radius' => [
                        ['value' => ['element' => 'ranger', 'value' => 50, 'min' => 0, 'max' => 50, 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]], 'measure' => '%'], //cell
                        ['value' => esc_html__('Border radius', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_color' => [
                        ['value' => ['element' => 'color', 'value' => '#adadad', 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]], //cell
                        ['value' => esc_html__('Border color', 'woocommerce-products-filter')] //cell
                    ],
                    'counter_border_style' => [
                        ['value' => ['element' => 'select', 'value' => 'solid', 'options' => [
                                    'dotted' => 'dotted',
                                    'dashed' => 'dashed',
                                    'solid' => 'solid',
                                    'double' => 'double',
                                    'groove' => 'groove',
                                    'ridge' => 'ridge',
                                    'inset' => 'inset',
                                    'outset' => 'outset',
                                    'none' => 'none',
                                    'hidden' => 'hidden'
                                ], 'conditions' => [
                                    'hide' => [
                                        'counter_show' => 'none'//if this selected element will be hidden
                                    ]]]],
                        ['value' => 'Border style'], //cell
                    ],
                ]
            ]
        ],
    ]
];
    • ファイル内 data.php フィールドに注意してください: タイトル – 要素の名前 SD のトップパネルで, 接頭辞 – CSS 変数のユニークなプレフィックス、 js_class – 重要、クラス名が ie.js
    • ファイル内の次: tpl.php HTMLコードを追加: 
      <?php $custom_postfix = 'boxtags'; ?>
<div class="woof-sd-ie woof-sd-ie-<?php echo $custom_postfix ?> woof-sd-ie-<?php echo $custom_postfix ?>___TERM_ID__ __CLASS__">
    <input type="checkbox" hidden id="__ID__"
           data-tax="__DATA_TAX__" 
           name="__SLUG__" data-term-id="__TERM_ID__" 
           value="__VALUE__" __CHECKED__ __DISABLED__
           onchange="woof_checkbox_process_data(this, this.checked)"
           hidden
           />
    <label for="__ID__">
        <span>__CONTENT__ <span class="woof-sd-ie-count">__COUNT__</span></span>
    </label>

    <input type="hidden" value="__TERM_NAME__" data-anchor="woof_n___DATA_ANCHOR__" />

</div>

      $custom_postfix 変数を要素のフォルダ名に変更することを忘れないでください (file data.phpの同じプレフィックスフィールド).

      • テンプレートには、WOOF SD がフロントにタグを印刷する際に動的に置き換えられる特別な文字列があります:
        • __TERM_ID__ – 現在表示されているタームのID
        • __CLASS__ – システム CSS クラス
        • __DATA_TAX__ – 現在の用語タクソミー名
        • __SLUG__ – 現在のタームのスラッグ
        • __ID__ – ラベルの自動生成 ID
        • __VALUE__ – ここで選択した値
        • __CHECKED__ – チェックボックスまたはラジオで選択または非選択にする必要があります。
        • __DISABLED__ – チェックボックスまたはラジオボタンで定義する必要があり、無効にするかしないかを設定します。
        • __CONTENT__ – 顧客に表示する用語のタイトル
        • __COUNT__ – 用語の数
        • __RESET_RADIO_BTN__ – ラジオボタンのみに使用され、フロントエンドで選択されたラジオボタンをリセットします。
        • __DATA_ANCHOR__ – hidden input には常に必要です
        • __TERM_NAME__ – 現在のターム名
      • 上記の例と同じ div ラッパーを使用し、HTML コードの中に配置してください。チェックボックスまたはラジオ + 非表示入力の両方の入力は常に必要です！

  • フィールド：

    • テンプレート – 同じ要素のレイアウトテンプレート、またはその動作を追加します (radio または checkbox).
    • テンプレート – デフォルトで選択されたテンプレートの数
    • demo_taxonomies – コード内でそのまま使用、コンストラクタでショップのタクソミーを表示する必要がある
    • セクション – ここで行にはオプションが配置され、独自のユニークなキー (file data.php に関連して) であり、それらが異なるタイプの場合:
      • レンジャー – からレンジャースライダーを作成できます。 min へ 最大 
        'padding_vertical' => [
      ['value' => ['element' => 'ranger', 'value' => 8, 'min' => 0, 'max' => 30], 'measure' => 'px'],
      ['value' => esc_html__('Padding vertical', 'woocommerce-products-filter')]
  ],

        フィールド「測定」には、適切な単位が必要です

      • テキスト – テキストフィールド 
        'font_family' => [
    ['value' => ['element' => 'text', 'value' => 'Segoe UI'], 'measure' => ''],
    ['value' => esc_html__('Text font family (theme must support)', 'woocommerce-products-filter'), 'help' => '#']
],
      • 選択 – 事前定義された値のいずれかを選択するためのドロップダウン 
        'font_weight' => [
    ['value' => ['element' => 'select', 'value' => 400, 'options' => [
                '100' => '100',
                '200' => '200',
                '300' => '300',
                '400' => '400',
                '500' => '500',
                '600' => '600',
                '700' => '700',
                '800' => '800'
            ], 'conditions' => []]],
    ['value' => 'Text font weight'], //cell
],
      • color –カラー入力を生成します 
        'color' => [
    ['value' => ['element' => 'color', 'value' => '#adadad']],
    ['value' => esc_html__('Text color', 'woocommerce-products-filter')]
],
      • 画像 - テキスト入力とボタンを生成し、サイトのメディアギャラリーから画像を選択できるようにします。 
        'bg_image' => [
    ['value' => ['element' => 'image', 'value' => ''], 'before' => 'url(', 'after' => ')'], //cell
    ['value' => esc_html__('Background image', 'woocommerce-products-filter')] //cell
],
      • すべての要素フィールド値には、styles.css と同じデフォルト値があります。
      • cssファイル内のすべてのキーは、プレフィックス ' を付けて使用する必要があります。–woof-sd-ie-‘ + prefix taken from file data.php -> field ‘接頭辞「」！
  • ファイル woof/ext/smart_designer/import.js はシステムによって自動的に作成されるため、手動で変更しないでください!!
  • 簡単には、～できます カスタム要素の例をダウンロード 、独自のCSSとHTMLを使用して再作成します