VK Blocks のボタンブロックでは、サイズ・スタイル・色・アイコンなどを設定して、デザイン性の高いボタンを自由に作成できます。
ボタンサイズ
- プリセット：XS / S / M / L / XLの5段階あります
- 数値指定にも対応：任意の文字サイズを数値で指定できます
サブテキスト
ボタンテキストの下にサブテキストを表示できます。
インライン文字サイズも使用できます
ボタンのテキストにインライン文字サイズが使えます。インライン文字サイズだと、特定のテキストだけ大きく（小さく）できるため、サブテキストの機能を使わずに、以下のようなボタンも作れます。
ボタンの内側の余白
ボタンの内側の余白（パディング）を指定できます。
ボタンの位置
ボタンスタイル
「背景なし」を選択した場合はカスタムカラーで色を指定してください。
ボタンエフェクト
ボタンスタイルが「ベタ塗り」の時に、光るエフェクトを設定できます。
色
ボタンの背景色は「標準色（Bootstrap）」のプルダウンから選ぶか、「カスタムカラー」でお好きな色を指定できます。
ホバー時の背景色と文字の色
ホバー時の背景色と文字の色をカスタムカラーで指定できます。
枠線の色とホバー時の枠線の色
枠線の色とホバー時の枠線の色をカスタムカラーで指定できます。
アイコン
文字の前と後ろに Font Awesome のアイコンを表示できます。
前後のアイコンはサイズを変更できます。サイズの単位は、px / em / rem から選べます。
角丸の大きさ
ボタンの角丸の大きさを指定できます。
リンクURLの設定
リンクURLの設定はブロックツールバーから行えます。
[ クエリーループ内 ] ボタンのリンク先を各投稿のカスタムフィールドURLにできる
WordPress のクエリーループ（投稿テンプレート）内で VK Blocks のボタンブロックを使うときに、各投稿のカスタムフィールドに保存した URL （外部リンク等）へ飛ばせます。
こんなときに便利です
たとえば、トップページにクエリーループを使ってイベント情報の一覧を表示させているとします。
各イベントの「詳細・お申し込み」ボタンはそれぞれ別の申込ページ（外部のイベント告知・集客サイトなど）にリンクさせたい、といったケースです。
今回追加したカスタムフィールドURLを使うと、あらかじめ各投稿のカスタムフィールドに保存しておいたURLを、そのままボタンのリンク先として使えるようになります。
手順の例
- イベント情報の投稿にリンク先URLを保存するためのカスタムフィールドを用意します。（今回はカスタムフィールド名を
apply_urlと設定） - イベント情報の各投稿の編集画面にて、カスタムフィールドに申込ページのURLを入力します。
- トップページの編集画面で、クエリループ（投稿テンプレート）の中に VK Blocks のボタンブロックを配置します。
- ボタンを選択し、ツールバーのリンク設定を開きます。
- 「リンク先の選択」で「カスタムフィールドURL」を選びます。
- 表示された入力欄にカスタムフィールド名
apply_urlを入力し、ページを保存します。 - トップページを表示すると、投稿ごとに、それぞれのカスタムフィールドに保存されたURLへボタンがリンクするようになります。
「カスタムフィールドURL」は、クエリーループの中で VK Blocks のボタンブロックを使っている場合のみ表示されます。
値が空の投稿はどうなる？
カスタムフィールドに URL が入力されていない投稿については、リンク先のないボタンが表示されてしまうことを防ぐため、その投稿のボタンは自動的に非表示になります。