テーマArkheとArkhe Pro Packを使ってみた【無料Arkheと有料プラグイン】

2022年3月2日

ワードプレスの無料テーマArkheは、人気有料テーマSWELLの制作者さんが制作したテーマなので以前から気になっていました。

SWELLがブロックエディターを使ったブログサイトを前提としていて機能が豊富なのに対し、Arkheはコーディングがある程度できる人がサイト制作しやすいように開発されたシンプルなテーマです。

しかしArkheでも有料プランであるArkhe Pro Packを使用すれば、使い勝手のよいブロックや機能を追加することができます。

この記事でわかること

テーマArkheとは
テーマAkkheの特徴
テーマArkheのテーマカスタマイザー
テーマArkheのダウンロード方法と子テーマ
有料プラグインセットArkhe Pro Packとは
Arke Pro Packの購入方法とダウンロード方法
Arkhe Pro Packで追加される機能

本記事で紹介する情報の各バージョンは以下の通りです。
（2022年2月26日現在の最新バージョン）

テーマArkhe：version2.0
プラグインArkhe Blocks Pro：version2.4
プラグインArkhe Toolkit：version1.6
プラグインArkhe CSS Editor：version1.1

1. テーマArkheとは
2. 有料Arkhe Pro Packとは
3. Arkhe Pro Packで追加される機能
4. まとめ

テーマArkheとは

公式サイト	公式サイトへ
制作者	株式会社LOOS
コンセプト	WEB制作者のベースに最適なテーマ
主な用途	お店や会社などのビジネスサイトおよび販売サイト
価格	テーマは無料。機能拡張用の有料ブラグインあり

株式会社LOOSはブログ用で人気の有料テーマSWELLも制作しています。

SWELLがプログラミングができない初心者でもおしゃれなサイトが制作できる高機能な有料テーマなのに対し、Arkheはプログラミングができる前提でサイト制作を進めるためのベーステーマの位置づけです。

したがってArkheは最低限の機能が準備されたシンプルなつくりのテーマです。あとは制作者の腕次第といった感じなので、ワードプレス初心者には向いていないでしょう。

とはいえテーマカスタマイザーを見ればわかるように、結構いろいろな設定ができるようになっています。

Arkheのデフォルトデザイン

次の画像は、私がブロック作成の練習に使用しているサイトのトップページです。テーマArkheの全くのデフォルト状態で使用していてカード型の記事一覧となっています。練習サイトなのでアイキャッチ画像は設定していません。

私は初めてこれを見たときに、シンプルながらもすごく心地よいデザイン設定だと感じました。パディングとか文字サイズとか、なんというかしっくりくるんです。これならブログサイトにも使ってみようかな、と考えています。

ちなみに記事一覧のデザインは、後述するようにテーマカスタマイザーでカード型でなくリスト型も選択できます。

主な特徴

サイト制作者の立場を考えた特徴となっています。

100％GPL
ワードプレス公式ディレクトリにも登録されていて安心
シンプルなデザインなので、CSSでの上書きによるデザインがしやすい
ワードプレスのコアブロック調整済（適切なパディング、文字サイズなどのほか機能も少し付加）
各テンプレートパーツが細かく分離、フックも多数準備とカスタマイズしやすい構造
マニュアル（サイト制作者向け）がある
機能拡張プラグインが準備されている

特徴の最後にあげたプラグインについては、後に詳しく紹介します。

テーマArkheのダウンロード方法

公式サイトで、”無料ダウンロード”ボタンをクリックするだけです。

トップページで少しスクロールすれば”無料ダウンロード”ボタンが現れます。

子テーマの作成方法

子テーマは無料では提供されていませんので自分で作成することになります。
（有料ブラグインを購入するとダウンロード可）

といっても、他のテーマ向けに子テーマを作成する場合と特に変わりません。私も以下の記事で紹介した方法で作成して使っています。

WordPressカスタマイズには子テーマを使おう！機能・役割と作成方法

ワードプレスで自分のWebサイトをつくったら、最初はデフォルトのテーマのままでもよいですが、慣れて ...

https://web-children.com/2020/11/29/child-themes/

テーマArkheのテーマカスタマイザー

テーマArkheのデフォルト状態でのテーマカスタマイザーの機能を紹介します。プラグインArkhe Toolkitを使うとさらに機能が追加されます（詳しくはこちら）。

テーマカスタマイザーの設定項目は12項目です。

このうちサイト基本情報、メニュー、ウィジェット、ホームページ設定、追加CSSに関しては、他テーマでもよくありますので説明は割愛します。

全体設定

できること

色設定
メインカラー、テキスト色、リンク色、背景色
コンテンツ幅
サイト幅（デフォルト1200px）
１カラム（スリム幅）時のコンテンツ幅（デフォルト960px）
NO-IMAGE設定
画像をアップロードする
パンくずリストの位置
ページ上部 or ページ下部
「ホーム」の文字列
（デフォルトでは”ホーム”）
「投稿ページ」を表示する
（デフォルトではOFF）
※「投稿ページ」が設定されている場合のみ有効

ヘッダー

できること

ヘッダーロゴ設定
（画像そのものはサイト基本情報でアップロード）
・画像サイズ（PC）：デフォルトでは48px
・画像サイズ（SP）：デフォルトでは40px
レイアウト設定
・メニューボタンの表示デバイス
（SPで表示、PCで表示。両方で表示も可能）
・検索ボタンの表示デバイス
（SPで表示、PCで表示。両方で表示も可能）
・メニューと検索ボタンの配置位置（以下から選択）
（左端にメニュー、右端に検索ボタン）
（右端にメニュー、左端に検索ボタン）
（右に両ボタン）
（左に両ボタン）
・グローバルナビゲーション
　PCでヘッダー下に移動のON（デフォルトではOFF）
ヘッダーの固定設定（以下の設定のON・OFF）
・ヘッダーを画面上部に固定（PC）：デフォルトではON
・ヘッダーを画面上部に固定（SP）：デフォルトではON
・グローバルナビを画面上部に固定：デフォルトではOFF
（グローバルナビがヘッダーの下にある時のみ有効）
オーバーレイ設定のON/OFF
デフォルトではOFF

フッター

できること

「ページトップへ」ボタンの表示ON・OFF
（デフォルトではON）
著作権テキストの入力

※下記画像にはサイドバーも含みます

サイドバー

できること

サイドバーを表示するか
（表示するなら以下にチェックを入れる）
・トップページ
・固定ページ
・投稿ページ
・アーカイブページ

※デフォルト設定では投稿ページとアーカイブページにサイドバー表示

投稿ページ

できること

タイトル下の各情報のON・OFF
・公開日（デフォルトではON）
・更新日（デフォルトではON）
・カテゴリーを表示（デフォルトではON）
・タグを表示（デフォルトではOFF）
・投稿者情報（デフォルトではOFF）
・アイキャッチ画像（デフォルトではON）
本文下のターム情報のON・OFF
（デフォルトではON）
前／次の記事へのリンク
・リンクの表示
（デフォルトではON）
・同じカテゴリーの記事のみを取得する
（デフォルトではOFF）
投稿者情報エリア
投稿者情報を表示（デフォルトではON）
関連記事エリア
関連記事を表示（デフォルトではON）
リスト（記事一覧）のレイアウト
カード型 or リスト型　を選択
関連記事の取得方法
カテゴリ or タグ
コメントエリアを表示
（デフォルトではON）

固定ページ

できること

タイトル位置の選択
コンテンツ上部 or コンテンツ内部
タイトル背景設定
・画像フィルター
ドット or なし　を選択
（デフォルトではドット）
・カラーオーバーレイの色、不透明度

※下記画像にはアーカイブも含みます

有料Arkhe Pro Packとは

Arkheには機能拡張用プラグインが準備されています。

プラグイン名	価格	主な機能
Arkhe Blocks Pro	5500円（買い切り）	ブロックエディターの機能拡張
Arkhe Toolkit	3300円（買い切り）	・パーツキャッシュ機能・カスタマイザーの設定項目追加・ウィジェットエリアの拡張など
Arkhe Pro Pack	6600円/年（個人ライセンス） 9900円/年（制作ライセンス）	Arkhe Blocks Pro、Arkhe Toolkitに加え、Arke CSS Editorがセットになっているサブスクリプションサービス

Arkhe Blocks ProとArkhe Toolkitは単体でも購入可能ですが、買い切り型で購入時のversionの機能となりアップデートは受けられません。

Arkhe Pro Packはサブスクプランですが、ライセンス期間中はアップデートが可能です。
Arkhe Blocks ProとArkhe ToolkitだけでなくArkhe CSS Editor（単体販売はなし）もセットとなっています。

Arkhe Pro Packでは個人ライセンスには年10枚、制作ラインセンスでは無制限でフォーラムチケットが付与される特典もあります。

価格面でいうとArkhe Pro Packは個人ライセンスならば6600円/年ですから、約２万円するSWELLの1/3だと考えれば安いですよね。プログラミング（といってもCSSと簡単なPHP・JSで十分）ができれば購入メリットがあると思います。

ちなみに、これ以外にもWooCommerce対応用プラグインArkhe Wookitも販売されています。Arkheの公式販売ページにも使用されているので、販売ページの制作時に使用するとよいでしょう。定価は5500円ですが現在ベータ版のため若干安くなっています。

Arkhe Pro Packの購入とダウンロードの方法

Arkhe Pro Packを購入する手順は次の通りとなります。

Arkhe Pro Pack購入ページにアクセス
プランを選択（個人ライセンスまたは制作ライセンス）
”購入する”ボタンをクリック
”お支払いへ進む”をクリックして手続きをする

Arkhe Pro Packライセンス認証の入力

アカウントにログイン

購入するとしばらくしてメールが３つほど届きますが、そのうち”Arkheアカウントが作成されました”のメールを開けてアカウントのパスワードを設定し、ログインします。

ラインセンスキーを取得

画面左のメニューでダッシュボードを選ぶと、アカウント情報のライセンス情報にキーが表示されています。

ライセンスキーをワードプレスに入力

ワードプレスのダッシュボードメニュー　外観＞Arkhe＞”ライセンス認証”タブ　を開けてラインセンスキーを入力します。

これでこの後インストールするプラグインのアップデートが可能となります。

各プラグインのダウンロード

先ほどライセンスキーを取得したアカウント情報の下に、各プラグインのダウンロードボタンが表示されています。

Arkhe Blocks Pro、Arkhe Toolkit、Arlhe CSS Editorのほか、子テーマとプラグイン作成用の雛形もダウンロードすることができます。

また、Arkheコミュニティにも参加用のボタンも準備されています。

Arkhe Pro Packで追加される機能

Arkhe Blocks Pro、Arkhe Toolkit、Arlhe CSS Editor の３つのプラグインをダウンロードできたら、インストール・有効化しましょう。

ダッシュボードメニュー

ダッシュボードメニューに各プラグインの設定メニューが表示されます。

プラグインArkhe Blocks Pro

Arkhe Blocks Proは、ブロックエディターの機能を拡張するプラグインです。
（無料版Arke Blocksというプラグインの有料版）

独自ブロックが使えるようになるほか、元々ワードプレスが標準で準備しているコアブロックの機能も拡張します。

独自ブロック

2022年2月21日現在17種類の独自ブロックが使えるようになります。
（無料版Arlhe Blocksではそのうちの6種類が使用可）

詳しくは公式サイトのArkhe Blocks Proのページで参照できますが、ホームページのコンテンツ制作でよく使われるブロックが多いです。

なかにはブログカードのようにブログサイトで重宝するブロックもあったり、投稿リストブロックはArkheの心地よい記事一覧と同じレイアウトとなっているのも嬉しいところです。

※以下のブロックはテーマArkheのみで使用可能です。
・ブログカード
・投稿リスト
・固定ページリスト
・RSS

コアブロックの機能拡張

ワードプレス標準のコアブロックへの機能拡張は以下の通りです。

ほとんどのブロックのツールバーに”ブロック上の余白”ボタンが追加される
（ショートコード、カスタムHTML、再利用ブロックにはなし）
テキスト関連ブロック（段落や見出し、リストなど）に”Arkhe書式”ボタンが追加される
以下のブロックにはブロックスタイルが追加される
（画像・動画ブロック、リストブロック、メディアとテキストブロック）

ツールバーの機能拡張例

例として段落ブロックのツールバーで紹介します。

ブロック上の余白では、margin-topを変更設定できます。

Arkhe書式設定では、注釈サイズ（デフォルトより小サイズで薄くなる）、フォントサイズ（文字サイズの変更）、カーニング（文字間隔の変更）のほか、3種類のカスタム設定を登録することができます。

このカスタム設定はダッシュボードメニューのArkhe Blocks＞”書式設定”タブ　で設定することができます。

例えば黄色マーカーの文字装飾を登録しておきたい場合、

クラス名：arkb-format-1 のところの表示名を”黄色マーカー”として、カスタム書式用CSS欄に

.arkb-format-1 {
    background: linear-gradient(transparent 60%,#fff352 60%);
}

と記述しておけば、黄色マーカーを呼び出して文字単位で装飾できるようになります。

※このほかテキスト編集関連の機能として、テキスト改行のデバイスごとのコントロール用ショートコードが、このあと紹介するArkhe Toolkitに準備されています（詳しくはこちら）。

ブロックのスタイル追加

画像、動画、メディアとテキスト、リストの各ブロックでは、画面右の設定サイドバーでスタイルを選択変更することができます。

画像と動画のブロックスタイル — **画像ブロックと動画ブロックのブロックスタイル**

メディアとテキストおよびリストブロックのブロックスタイル — **メディアとテキストブロックおよびリストブロックのブロックスタイル**

一般設定画面

ダッシュボードメニューのArkhe Blocks＞”一般設定”タブ　では各追加機能のON/OFFが選択できます

※FSE用ブロックやブロックパターンなど通常あまり使用しない機能はデフォルトでOFFされており、ここでONできます。

プラグインArkhe Toolkit

Arkhe Toolkit設定画面での設定

ダッシュボードメニューのArkhe Toolkitを開けると、様々な機能が設定できるのがわかります。

拡張機能

できること

ウィジェットエリアの拡張
（固定ページ、投稿、最新の投稿、追加サイドバー）
画像をクリックで拡大表示できるようにする
空のpタグを自動除去する
構造化データ（JSON-LD）を自動生成する
パンくずリストの構造をJSON-LDに含める
ユーザープロフィールに役職の設定を追加する
ユーザープロフィールにSNSのURL情報を追加する

高速化

できること

Lazyload（画像・動画・埋め込みの遅延読み込み）の設定
（設定オフ、lazysizes.jsを使う、loading="lazy"から選択）
Prefetch機能を有効化する

キャッシュ設定

できること

各テンプレートパーツのキャッシュを設定する
（ヘッダー、フッター、サイドバー）

※キャッシュ設定によりページ表示の高速化が期待できます。

停止させる機能

できること

ワードプレスの標準機能のうち、以下の機能を停止設定する。

ワードプレスのバージョン出力
絵文字用のスクリプトの読み込み
Windows Live Writeとの連携
EditURI(RSD Link)
セルフピンバック
コアのサイトマップ機能
REST API用linkタグの出力
“srcset"の出力
rel="prev/next"の出力
記号の自動変換(wptexturize)
RSSフィード

コード追加

できること

以下のHTMLタグ内に追加するコードを入力

<head>タグ
<body>タグ開始直後
</body>タグ終了直前

※GoogleアナリティクスやAdsenseのコードを記述するのに便利です。

Arkhe Toolkitによるテーマカスタマイザー追加項目

Arkhe Toolkitにより追加されるテーマカスタマイザーの項目は以下の通りです。

ヘッダー設定の中に、”ドロワーメニューの展開方式”が追加
・フェードイン
・左からスライド
・右からスライド
・ヘッダーより下に表示する
が選択できるようになる（プラグインなしの場合は、フェードインのみ。）
投稿ページにSNSシェアボタンを表示
Facebook・Twitter・はてブ・Pocket・Pinterest・LINE・URLコピーボタン
（記事上・記事下　を設定）

Arkhe Toolkitによるウィジェットエリアの追加

ウィジェットエリアが、デフォルトの4カ所から11カ所となります。

デフォルトのウィジェットエリア

サイドバー
ドロワーメニュー下部
フッター１
フッター２

追加されるウィジェットエリア

「固定ページ」のコンテンツ上部
「固定ページ」のコンテンツ下部
「投稿」のコンテンツ上部
「投稿」のコンテンツ下部
「最新の投稿」のコンテンツ上部
「最新の投稿」のコンテンツ下部
追尾サイドバー

Arkhe Toolkitによるショートコードの追加

以下のショートコードが使えるようになります。

ショートコード	機能
[reuse_block id="100″]	再利用ブロックの呼び出し
[pcbr]	PCサイズのみ改行
[spbr]	スマホサイズのみ改行
[icon class="hoge"]	アイコン<i>タグの出力