WordPressテーマ「Ace」の特徴(準備中)

箇条書きにすると以下のような特徴があります。

  • Gutenberg対応
  • WooCommerce対応
  • カスタムブロック「Chat」など
  • カスタムウィジェット「Entries」など
  • カスタム投稿タイプ「CTA」など
  • 各ウィジェットに補助的な出力条件設定を追加
  • オプショナルウィジェットエリア
  • Google Fonts対応(テーマカスタマイザーで使用可)
  • レスポンシブレイアウト

  • Table of Contents

柔軟なレイアウト

テーマ「Ace」では、各ウィジェットに簡単な出力条件(「フロントページで表示」「固定ページでは非表示」「モバイルのみ」など)を設ける設定項目を追加して、ウィジェットの出力によってそのウィジェットエリアが有効性を判断していますので、その有無によりデフォルトのレイアウトからページごとに編集することが可能です。デモページでウィジェットエリアの出力位置が確認できます。

また、プラグインによるウィジェットの設定で非表示となる場合でもその影響を受け、ウィジェットが出力されないウィジェットエリアは自動的にレイアウトが修正されます。

最大3カラム(+両サイドのスライドバー)の構成となっておりますが、各ページ毎にオプションの設定項目としてウィジェットエリアを非表示にする機能もありますので、同じ「投稿ページ」や「固定ページ」という投稿タイプでもウィジェットエリアの有無によってレイアウトを簡単に変更できる仕組みで、各カラムの横幅はテーマカスタマイザーにて簡単に編集できます。

ウィジェットエリア「左カラム」との2カラムレイアウト

2カラムレイアウト(ウィジェットエリア「左カラム」)

左側のウィジェットエリアが表示されており、右カラムウィジェットエリアが表示されていない場合は、このように自動で2カラムのレイアウトに切り替わります。

2カラムレイアウト(ウィジェットエリア「右カラム」)

右カラムのウィジェットエリアを表示させている場合はこのようにコンテンツエリアが2カラムのレイアウトに切り替わります。

ウィジェットエリア「右カラム」との2カラムレイアウト

テンプレートを選ぶ必要が無く、追加したい場合もテーマ内の「template」フォルダを子テーマにコピーして編集することで行えますので、直接書き込みたいコードがあっても問題ありません。

更にオプションでウィジェットエリアをコンテンツ周囲に追加することが可能(管理画面での設定項目に用意しています)ですので、物足りない部分にウィジェットエリアを追加してちょっとした新着記事リストのウィジェットなどを追加する事のほか、HTMLを直接書き込むことも簡単に出来ますから、カスタマイズ出来ない死角をなるべく減らした形を取っています。

カスタムウィジェットを随時追加

僕自身も使用していますので、必要だと思うウィジェットは随時追加していこうと思います。

  • Entries
  • Table of Contents(JavaScriptで生成)
  • Author Card
  • Map
  • など

カスタムブロックは随時追加・更新

アイコンもブロック化しておりますので、簡単にコンテンツとして放り込むことができます。

ブロックで使用可能なアイコンは「Material Design Icons」で、選択肢は3000+。

ウェブフォントではなく、SVGで書き出していますので、リソースファイルを読み込む必要がありません。

アイコンはボーダーや丸み、配色などのオプションを加えたアレンジも可能。

もちろんサイズの変更も可能ですし、更新に伴うオプションの追加もできるように考えられて設計しており、大きさの違いが分かりやすいように、サイズの異なるアイコンを並べております。

右側のアイコンだけ少し大きいのが分かると思います。

ちょっと難しいのがアイコンの検索です。

3000以上の選択肢がありますので、実際に使用する場合は使い慣れて場所を覚える必要があるかもしれません。

Nora
Nora

アイコンの選択画面はこんな感じですので、カラムブロック内の横幅の狭い状態でアイコンを探すとスクロールが大変になります。

ブロックアイコンの選択肢

GutenbergがWordPressコアで使用されるようになりましたので、ブロックも随時追加してまいります。

必要ブロックがある程度揃ってきたら専用テンプレートを用意して、ページビルダー的な使い方をしてコンテンツ部分だけでなく1ページを丸ごと編集できるようにしようと思っています。

Nora
Nora

どんどん追加していきます٩(๑òωó๑)۶ カスタムブロックの詳細ページも用意しております。

ブロックの追加方法も紹介しておりますので、気になった方はブログもご利用ください。

ちょっとしたカスタマイズ方法を紹介しております。

詳細ページ:カスタムブロックの紹介ページ

関連ページ: ワードプレスのエディター「Gutenberg」にカスタムブロックを追加する方法

カスタムフォントの利用

テーマ「Ace」ではGoogle APIキーを使って気に入ったGoogleフォントを利用することが可能で、これをテーマカスタマイザーのフォント設定に反映させることが出来ますので、簡単に部分的にフォントを編集することが可能です。

Googleフォントの設定
Googleフォントの設定

まだまだ数は少ないですが、最近は日本語フォントも用意されておりますので、気に入ったものがあればぜひご利用ください。

また、特定のファイル形式であれば、直接アップロードして利用することも可能です。

設定も簡単

シンプルなテーマカスタマイザー

外観的には白をベースにしたシンプルなデザインで、部分的にセクションの区切りにツートーンなデザインを入れるなどしております。

テーマ「Ace」で読まれるJavaScriptはjQueryフリーになっており、他のスクリプトに依存せずに非同期的にロードされます。JavaScriptを無効にしている場合でもなるべくスタイルが崩れないように、スタイルはなるべくCSSに依存した形にしております。

デザインはテーマカスタマイザーで簡単に編集できるように意識しておりますので、更新しながらカスタマイズ要素も増やせればと思います。

管理画面で設定すべき必要な項目が非常に少ないので、セットアップに時間を食われることもありません。

シンプルな形を意識して作成しておりますので、マウス操作で簡単にセットアップは完了します。

テーマから出力されるimgタグの画像の遅延化は標準で設定されていますので、プラグインなどにより設定する必要はありません。

ワードプレスにおけるパーマリンクなどの基本設定や、プラグインによるSEO設定をしておくことだけは忘れないようにしてください。

プラグインフレンドリー

ワードプレスでは便利な機能を持ったプラグインが多数ありますので、メジャーなプラグインは使われる可能性が高いと想定してテーマも作成しています。

WooCommerceやBuddyPress、bbPressに関して、少しでも速度への負担を軽減するために、各ページ或いは関連するウィジェットが出力されていないことを条件にCSS・JSのエンキューをキャンセルします。

このため、必要最低限の機能以外は、管理画面で切り替えることが出来るようにしており、更新に伴う機能の追加があってもそれは同様です。

シンプルなデザインも、プラグインによるウィジェットコンテンツとの違和感が少なくなることを意識しています。