ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

ワードプレスの無料テーマ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

テーマArkheとは

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

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

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

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

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

Arkheのデフォルトデザイン

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

Arkheブログトップページ事例

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

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

主な特徴

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

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

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

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

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

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

Arkheのダウンロード方法

子テーマの作成方法

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

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

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

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

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

テーマカスタマイザー設定項目

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

全体設定

できること
  • 色設定
    メインカラー、テキスト色、リンク色、背景色
  • コンテンツ幅
    サイト幅(デフォルト1200px)
    1カラム(スリム幅)時のコンテンツ幅(デフォルト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 なし を選択
    (デフォルトではドット)
    カラーオーバーレイ色、不透明度

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

固定ページ設定

アーカイブ

できること
  • リスト(記事一覧)のレイアウト
    カード型 or リスト型(デフォルトはカード型)
  • 投稿の情報のON/OFF
    公開日(デフォルトではON)
    更新日(デフォルトではOFF)
    カテゴリー(デフォルトではON)
    投稿者情報(デフォルトではOFF)
  • 抜粋の文字数
  • サムネイル画像の比率
    デフォルトは16:9
    他に白銀比、黄金比、1:1など計7種類から選択

有料Arkhe Pro Packとは

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

プラグイン名価格主な機能
Arkhe Blocks Pro5500円
(買い切り)
ブロックエディターの機能拡張
Arkhe Toolkit3300円
(買い切り)
・パーツキャッシュ機能
・カスタマイザーの設定項目追加
・ウィジェットエリアの拡張
など
Arkhe Pro Pack6600円/年
(個人ライセンス)
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円/年ですから、約2万円するSWELLの1/3だと考えれば安いですよね。プログラミング(といってもCSSと簡単なPHP・JSで十分)ができれば購入メリットがあると思います。

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

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

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

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

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

アカウントにログイン

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

ラインセンスキーを取得

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

ライセンスキーの取得

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

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

ライセンスキーの入力

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

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

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

Arkhe用プラグインのダウンロード画面

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

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

Arkhe Pro Packで追加される機能

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

ダッシュボードメニュー

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

3つのプラグイン有効化後のダッシュボードメニュー

プラグインArkhe Blocks Pro

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

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

独自ブロック

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

Arkhe Blocks Proの独自ブロック

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

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

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

コアブロックの機能拡張

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

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

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

段落ブロックツールバーの事例

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

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

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

Arkhe Blocksの書式設定

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

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

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

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

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

ブロックのスタイル追加

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

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

一般設定画面

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

Arkhe Blocks一般設定

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

プラグインArkhe Toolkit

Arkhe Toolkit設定画面での設定

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

拡張機能

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

高速化

Arkhe Toolkit高速化設定
できること
  • Lazyload(画像・動画・埋め込みの遅延読み込み)の設定
    (設定オフ、lazysizes.jsを使う、loading="lazy"から選択)
  • Prefetch機能を有効化する

キャッシュ設定

Arkhe Toolkitキャッシュ設定
できること
  • 各テンプレートパーツのキャッシュを設定する
    (ヘッダー、フッター、サイドバー)

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

停止させる機能

Arkhe Toolkit停止させる機能
できること

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

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

コード追加

Arkhe Toolkitコード追加設定
できること

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

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

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

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

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

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

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

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

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

  • サイドバー
  • ドロワーメニュー下部
  • フッター1
  • フッター2

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

  • 「固定ページ」のコンテンツ上部
  • 「固定ページ」のコンテンツ下部
  • 「投稿」のコンテンツ上部
  • 「投稿」のコンテンツ下部
  • 「最新の投稿」のコンテンツ上部
  • 「最新の投稿」のコンテンツ下部
  • 追尾サイドバー
Arkhe Toolkitでのウィジェットエリア追加

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

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

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

プラグインArkhe CSS Editor

Arkhe CSS Editorを有効化すると、カスタムCSS専用のエディターを使うことができます。

できること
  • フロント用(webサイト表示用)、エディタ用、および共通用のCSSをそれぞれ記述できる
  • カラー表示されて見やすい
  • Emmet(CSSコーディング補完機能)が使える

ダッシュボードメニューのCSS Editorを開けて使います。

Arkhe CSS Editor

まとめ

テーマArkheとその機能拡張プラグインセットArkhe Pro Packについて紹介してきました。

1記事の中に情報をちょっと詰め込み過ぎたので、各機能や使い方についての具体的詳細情報は別記事で追加紹介していく予定です。

Arkheは本来、独自のコーディングでサイト制作するためのベーステーマですが、Arkhe Pro Packのような便利で比較的安価なプラグインがあるとやはり使ってみたくなりますよね。

その上で独自のデザインやコンテンツ構築に注力すれば時短にもなるかと思います。サイト制作の今後の選択肢として考えてみてはいかがでしょうか。

Arkhe Pro Pack購入ページ

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる