テーマ「Ace」 – カスタムブロック

カスタムブロックは今後のアップデートでもスタイルを含めて選択肢を追加できるようにしていく予定です。

テーマ「Ace」ではGutenbergで編集する際はブロックの横幅は最大となります。

  • Table of Contents

コンテンツ系ブロック

コンテンツ系ブロックはカラムなどに放り込むアイテムです。

標準のブロックの例をあげるなら、パラグラフや見出しの他、画像やリストといったブロックの種類です。

Chat

Nora
Nora

このようにアバター付きの吹き出しブロックです。

会話するようにアバターの位置を反対側に移動させることもできます。

先生
先生

 設定項目は以下の通り。

  • セリフ
  • アバターイメージ
  • アバター名
  • アバターの位置

現状必要項目しか用意しておりませんが、その内スタイルの追加もして行く予定です。

アイコン

  • アイコンの種類
  • アイコンのサイズ
  • アイコンの色
  • 背景色
  • ボーダーの有無
  • ボーダーの幅
  • ボーダーの丸み
  • マージン
  • パッド

このオプションでアニメーションなども追加して行く予定です。

マップ

標準的に用意されているマップではなく、Googleマップを使用しています。

APIキーが必要で、テーマ「Ace」では設定にAPIキーを保存できる項目がありますので、有効なキーを保存することでマップが正しく機能します。

表示はシンプルで、検索キーワードのようなクエリを入力するだけでマップが表示されます。

上のマップではクエリを「大阪」に設定しています。

勿論住所入力も可能。

スライダー

「Swiper」を使ったスライダーです。

直接ブロック「スライダー」を使用してHTMLを生成することができる他、カスタム投稿タイプ「スライダー」にテンプレートとして保存することも可能です。

保存されたスライダーは「ブロック(登録済みスライダーを出力するブロックを別に用意しております)」「ウィジェット」「ショートコード」といった形でも使用可能となります。

スライド 1

スライド 2 : タブ1

スライド 2 : タブ2

スライド内ではあらゆるブロックを使用することができますので、

ただ、作成する際は編集画面でスライダーブロックが大きく表示されるため、

投稿タイプとして保存してコンテンツに使用する際は、

ブロック「登録済みスライダー」を使用して引用する形がベターです。

キューブ型などのオプションも用意しております。

縦に回ります。

ゴロゴロ

_(┐「ε:)_

CTA

追記

商品などのタイトル

商品の詳細はこちらに書くことが可能です。このCTAの下に用意しているボタンはダミーですので、リンク先が設定されておりません。

カスタム投稿タイプ「CTA」での使用の他、その場で即席CTAを生成するためのブロックも用意しております。

ブロック「CTA」の内装は他のブロックを使用して自由に編集可能です。

投稿リスト

投稿ページのリストをアーカイブにも用意しているスタイルで出力します。

スタイルは選択可能で、投稿数、カテゴリー、タグを指定することが可能です。

※ スライダーはブロック用のスタイルです。

レイアウト系ブロック

Section

項目毎など、任意の区分を作成し管理しやすくすることが出来、該当箇所に特定のスタイルなどを与えることができるようになります。

このようにコンテンツエリア内からウィンドウ幅まで突き抜けるようなセクションを設けるなどが可能です。

Columns

標準でカラムブロックは用意されていますが、オプションを用意しやすいようにカスタムカラムブロックを用意しました。

カラムのオプションにより、トップを揃えることが可能ですので、次のカラムをチェックしてみてください。

このような良くあるアイコンと一緒にカラムを並べる際は、上部を横一列に揃える方が見栄えも良くなります。

コンテンツの量などによる縦幅が異なる際のマージンルールもオプションに備わっています。

ここではアイコンを並べていますが、もちろんテキストや画像など他のブロックを持ってくることもできます。

カラムで上部が揃っていることだけご確認いただければと思います。

Tabs

tab 1 contents

tab 2 contents

tab 3 contents

tab 1 test

tab 2 test

tab 3 test

WordPress テーマ「Ace」

自作テーマ「Ace」です。コンテンツ作成においてプラグイン領域にも踏み込んだテーマとなっております。このサイト自身もデモとなっております。