絞り込みプラグイン
このプラグインでは下記要素を使用して絞り込み検索を行うことができます。
ブロックエディタを使用して検索フォームを構築することが可能です。
- 「投稿」・「固定ページ」・カスタム投稿タイプなどの投稿タイプ
- 「カテゴリ」・「タグ」・カスタム分類などのタクソノミー
- キーワード
また、このプラグインを有効化すると投稿タイプ「VK Filter Search」が追加されます。
このプラグインには下記4つのブロックが搭載されています。
- Filter Search
- Post Type Search
- Taxonomy Search
- Keyword Search
検索フォームの大本となるブロックです。 プルダウン方式で絞り込み対象の投稿タイプを指定する事が可能です。
このブロックの中でのみ下記3つのブロックが使用可能です。
- Post Type Search
- Taxonomy Search
- Keyword Search
インナーブロックに Keyword Search ブロックがない場合は空のキーワードを秘密裏に付与します。
その結果、キーワードがない場合でも検索結果ページ扱いされるように計らっています。
また、フォームが登録された投稿IDを秘密裏に付与しておき、検索結果ページでもその投稿を表示します。
ただし、該当検索結果がない場合には検索フォームは表示されません。
サブミットボタンを押すと検索結果ページに飛びます。
Filter Search ブロックのインナーブロックとしてのみ使用可能。
チェックボックス方式で絞り込み対象の投稿タイプを指定できます。
チェックした投稿タイプからなるプルダウンが生成されます。
何もチェックしていない場合は警告文が表示されます(編集画面のみ)。
Filter Search ブロックのインナーブロックとしてのみ使用可能。
プルダウン方式で絞り込み対象のタクソノミーを指定できます。
選択したタクソノミーのタームからなるプルダウンが生成されます。
選択したタクソノミーにタームがない場合は警告文が表示されます(編集画面のみ)。
Filter Search ブロックのインナーブロックとしてのみ使用可能。
設定項目はありません。
キーワード用のテキストフォームが生成されます。
- XAMPP 7.4 系をインストール:https://www.apachefriends.org/download.html
- Composer をインストール:https://www.apachefriends.org/download.html
- VS Code で Git Bash を使えるようにしておく:https://qiita.com/daikiozawa/items/48a9fe0e2898c7dd78ae
- Composer
- Docker
- NodeJS、NPM
- @wordpress/env をグローバルインストール(例:
npm install -g @wordpress/env
) - wp-cli をグローバルインストール (例:
composer global require wp-cli/wp-cli-bundle
)
npm install
npm run build
npm start
※ wp-cliのインストールが必要です
npm run make-pot
または、PoEdit Pro等関連アプリやサービスで生成できます。
npm run translate
editorとfront(style.css)共通のスタイルは /src/scss/_common.scss
に記載。
※ 暫定の命名規則です。
- プリフィックス__対象element名--属性値
- vkfs__element--attributeValue
vkfs
をprefixとします。
ex) .vkfs__labels .vkfs__outer-wrap--col-md-6 .vkfs__input-wrap--checkbox
- VK Blocks と違って __ と -- 連結
- VK Blocks と違って 属性名は省略する
https://www.vektor-inc.co.jp/post/class-name-rule-for-general-purpose/