テーマ「Ace」の特徴

外観を形成する機能をなるべくプラグインに頼らないように作成したワードプレステーマです。

リポジトリにアップロードしたテーマ「ShapeShifter」の特徴を引き継いでいるもので、僕が管理しやすい形としてテーマ１つにギュッと機能を詰め込んだ形となっておりますが、その分リポジトリにアップロードが出来ないので販売する形にいたしました。

SEO関連や管理用ツールに関しては便利なものが既にワードプレスのリポジトリにたくさん用意されておりますので、「Ace」ではあくまでもコンテンツ作成のためのテーマと意識して作成しており、スマホ対応のリキッドレイアウトになっています。

大凡の目安として768pxをモバイルとの分岐点にしています。

柔軟なレイアウト

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

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

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

２カラムレイアウト（ウィジェットエリア「左カラム」）

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

２カラムレイアウト（ウィジェットエリア「右カラム」）

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

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

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

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

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

Entries
Table of Contents
投稿者カード
Map
など

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

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

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

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

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

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

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

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

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

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

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

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

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

カスタムフォントの利用

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

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

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

設定も簡単

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

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

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

テーマカスタマイザーで簡単に編集できるような仕組みになっていますので、更新しながらカスタマイズ要素も増やせればと思います。

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

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

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

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

プラグインフレンドリー

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

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

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

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