MENU
購入する
  1. ホーム
  2. Arkhe
  3. 【デモサイト有り】Arkhe(アルケー)でコーポレートサイトを作ってみた感想レビュー

【デモサイト有り】Arkhe(アルケー)でコーポレートサイトを作ってみた感想レビュー

Arkhe
実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。
FAQ
初心者

Arkheってどんなデザインのテーマなの？
デモサイトを見てみたい…

そんな人向けにWordPressテーマArkheを使って、コーポレート型のデモサイトを作ってみました。

この記事を書いた人
  • IT業界24年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【基本情報】Arkheって何？

【基本情報】Arkheって何？

まずはArkheの基本情報です。

Arkheは有料テーマSWELLの開発者さんが作ったWordPressテーマです。WordPress公式ディレクトリーに登録されていて、誰でも無料でダウンロードできます。

Arkhe基本情報
テーマ名Arkhe（アルケー）
価格無料
開発者ddryo_loos
公式サイトhttps://arkhe-theme.com/ja/
Arkhe基本情報

Arkheの意味は？

Arkheは「はじめ」「始原」「原初」などといった意味があります（参考：Wikipedia）。 テーマ公式サイトにはテーマの由来に関するハッキリとした説明は見当たりませんが、コンセプト的にこれらの意味を込めたんだろうと推測できます。

「Arkhe」のコンセプト

「WEB制作のベースに最適なテーマ」を目指して開発されました。「自由にサイトを組み立てたい」「でも細かい部分をいちいち整えるのは面倒だ」と、そんな方々が使いやすくなるようなテーマでありたいと思っています。

引用：Arkhe公式サイト

【デモサイト】コーポレートサイトを作ってみた

【デモサイト】コーポレートサイトを作ってみた

Arkheを使ったデモサイトを紹介します。

デモサイト

  1. 有料プラグインのポータルサイト
  2. フォトグラファーの写真販売サイト
  3. 不動産サイト
かんた

僕がArkheを使ってサイトを作ってみました！

【デモサイト①】プラグインのポータルサイト

Arkheデモサイト①

ArhkeとEC系のWooCommerceプラグインで作成しています。

デモサイトなので決済機能を無効可しています。

イメージしたのはWordPress有料プラグインのポータルサイト。検索システムを導入し、ユーザーの目的にあったプラグインをサクット見つけることができるサイトです。

構成

プロダクト名価格ダウンロード先
Arkhe無料テーマディレクトリー
WooCommerce無料プラグインディレクトリー
Arkhe Wookit3,300円Arkhe公式サイト
デモサイト①での制作に使ったもの

Arkhe公式サイトで販売している以下のプラグインは使っていません。

  • Arkhe Pro Pack
  • Arkhe Blocks Pro
  • Arkhe Toolkit
かんた

プラグインを使っても良かったんですが、使わない構成でどんな感じになるか試してみました。

【デモサイト②】フォトグラファーの写真販売サイト

【デモサイト②】フォトグラファーの写真販売サイト

デモサイトなので決済機能を無効可しています。

構成

プロダクト名価格ダウンロード先
Arkhe無料テーマディレクトリー
WooCommerce無料プラグインディレクトリー
Arkhe Pro Pack9,900円Arkhe公式サイト
Arkhe Wookit3,300円Arkhe公式サイト
デモサイト②での制作に使ったもの

デモサイト②では、公式サイトで販売している有料のArkhe Pro Packを導入しました。導入すると、「利用できるオリジナルブロックが増える」「カスタマイザー上の設定オプションが増える」といったメリットがあります。

ECサイトが簡単に作れる

ECサイトが簡単に作れる


デモサイトのようにArkheは無料プラグインのWooCommerceと組み合わせてECサイトを作ることができます。

WordPressテーマの中にはWoocommerceと相性が悪いものもあります。Arkheは専用プラグインを使うことでWoocommerceを利用することができます。

Arkhe公式サイトにあるプラグイン販売システムもWooCommerceで構築されています。

かんた

ArkheでのECサイトの作り方は次の記事で紹介しています。

あわせて読みたい
【サンプルあり】Arkhe(アルケー)とWooCommerceでのECサイト構築をした感想レビュー Arkheで作ったECサイトのサンプルを見たい…必要なものって何？お金はかかるの？ライセンスのこと知りたい… そんな疑問に答えます。 数日前にArkheとWooCommerceでECのサ…

SWELLとArkheの違い

SWELLとの違い

ArkheはSWELL開発者さんの開発したテーマです。

Arkheは無料、SWELLは有料。何が違うのといえば、テーマのポジションが全く違います。

かんた

SWELLとArkheを使って感じた、両テーマの違いを少し紹介します。

ざっくりした両テーマの違い

ArkheはWeb制作事業者向けのベース的なテーマ。公式サイトでも書いてありますが、まさにこの通り。一般的な有料テーマに搭載されているような独自ブロックなどはありません。

何もないベースから、クライアントサイトを作っていくテーマ。

自力で対応する

  1. レイアウトまわりの調整
  2. オリジナルブロックの開発

独自カスタマイズにはHTML＋CSSは基本として、PHPのコードが書けるスキルレベルが必要。

SWELLは完成したプロダクトです。

かんた

SWELLとArkheの違いは、次の記事で詳しく解説しています。

あわせて読みたい
【比較】ArkheとSWELLの違い|どっちのテーマを選ぶべきかを解説 ArkheとSWELLってどう違うの？Arkheって本当に無料なの？サイト制作に向いているのは、どっち？ そんな疑問に答えます。 ArkheとSWELLは同じ開発者さんが作ったWordPres…

【定番】コーポレートサイト向け独自カスタマイズ

コーポレートサイト向け独自カスタマイズ

デモサイトはArkheに独自カスタマイズを実装しています。

コーポレートサイトだと、ヘッダーまわりに電話番号や問い合わせボタン、サブメニューを設置することがありますよね？

独自カスタマイズ

  1. ヘッダーにサブメニュー
  2. メガメニュー
  3. ヘッダーに電話番号と問い合わせボタン
  4. ページごとにグロナビを変更
かんた

それぞれ解説します。

ヘッダーにサブメニュー

ヘッダーにサブメニュー

サブメニューはコーポレートサイトの定番ナビゲーションの1つです。グロナビに掲載するメニューを厳選したのち、それ以外のページヘの導線としてサブメニューを使うことがよくあります。

一般的に下層ページへの導線は、グロナビやがメインになります。グロナビに下層ページへの動線を全てまとめてしまうとゴチャゴチャしてしまうことあります。そういった構成だと、優先的に見てもらいたいページへユーザーを導くことができません。

サブメニューに設置するコンテンツ例

  • プライバシーポリシー
  • 会社紹介
  • 採用情報
  • アクセス

Arkheはヘッダー周りのテンプレートファイルにフックが通っているので、テンプレートファイルを編集しなくてもサブメニューを設置できます。

かんた

サブメニューの設定方法の詳細は次の記事で紹介しています。

note（ノート）
【Arkhe(アルケー)】ヘッダーにサブメニューを表示するカスマイズ方法をサンプルコード付きで解説｜かんた🌊… ※2023年1月23日更新 最新バージョン（3.4.2）のArkheで利用できます。 SWELLマニアのかんた（@swell_mania）です SWELL開発者さんが公開している無料テーマArkhe(アルケ…

グロナビを展開するメガメニュー

グロナビにカーソルを合わせた時に展開されるのがメガメニューです。サブメニューをテキストで表示させるのがよくあるWordPressテーマの仕様です。それだけに画像が展開されるメガメニューはクライアント受けがものすごく良い印象です。

かんた

Arkheのメガメニューの導入方法は次の記事で解説しています。

note（ノート）
【Arkhe(アルケー)】ヘッダーにメガメニュー設置する方法｜かんた🌊SWELLマニア SWELLマニアのかんた（@swell_kanta）です。 WordPressテーマ「Arkhe（アルケー）」のグロナビに「メガメニュー」を付けるカスタマイズ方法をシェアします。 まずはメ…

ヘッダーに電話番号と問い合わせボタン

メガメニュー

営業時間、問い合わせようの電話番号などをファーストビューに設置することで、ユーザーが問い合わせしたいと思ったタイミングで即アクションがとれる定番フォーマットです。

Arkheはヘッダーまわりにカスタマイズ用の独自フックが通っています。テンプレートファイルを編集しなくても、かなり柔軟なカスタマイズができます。

かんた

ヘッダーに電話番号を設置する方法は次の記事で紹介しています。

note（ノート）
【Arkhe(アルケー)】ヘッダーに「電話番号」＋「問い合わせボタン」を表示するカスマイズ方法をサンプルコ… ※2023年1月23日更新 最新バージョン（3.4.2）のArkheでも利用できます！ SWELLマニアのかんた（@swell_mania）です。 WordPress無料テーマ「Arkhe(アルケー)」のカスタ…

ページごとにグロナビを変更する

「この固定ページだけはグロナビのメニューを変更したい」。

企業サイト制作をしていると、クライアントから相談を受けることがあります。

固定ページ以外にも、「特定のカテゴリーに属する記事だけはグロナビにメニューを追加したい」といった要望なんかもあります。固定ページでも、特定のカテゴリーでも、フックを使うことでグロナビをページ単位でカスタマイズできます。

かんた

グロナビのメニューのカスタマイズは次の記事で紹介しています。

note（ノート）
【Arkhe】グロナビのメニューをページごとに変更するカスタマイズ｜カテゴリーアーカイブ・記事・固定ペー… SWELLマニアのかんた（@swell_mania）です。 SWELL開発者さんが作った無料テーマ「Arkhe（アルケー）」の作業メモをシェアします。 仕事で「グロナビをページごとに変更…

【必須】独自カスタマイズに便利なテーマの独自フック

【必須】独自カスタマイズに便利なテーマの独自フック

Arkheには独自カスタマイズするユーザー向けに便利なフックが用意されています。

その中でも特に便利なarkhe_part__{$path}フックを紹介します。

arkhe_part__{$path}フック

Arkhe::get_part()で読み込まれたコンテンツの内容をガッツリ書き換えることができるフィルターフックです。

基本コード

add_filter( 'arkhe_part__{$path}', function( $parts_content, $args ) {
    /* $parts_content の書き換え処理... */
    return $parts_content;
}, 10, 2 );
かんた

このフックの特徴は、テンプレートを指定して内容を自由に編集できる点です。

【使い方】コードを一部変更する

記事ページのタイトル部分を置き換える場合を例に、具体的な使い方を解説します。

記事ページのタイトルはtemplate-parts/single/head/title.php経由で出力されます。

ファイルの中身は次の通りです↓

<?php
/**
 * 投稿タイトル
 */
?>
<div class="p-entry__title c-pageTitle">
	<h1 class="c-pageTitle__main"><?php the_title(); ?></h1>
</div>

h1にはc-pageTitle__mainのクラスが付いています。

これを全く別のクラス名（kanta）に変更する場合は次のようにフックを書きます↓

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
	$parts_content = str_replace(
			'c-pageTitle__main',
			'kanta',
			$parts_content
		);
    return $parts_content;
},
);

str_replace関数でc-pageTitle__mainを、kantaに置き換えているだけです。

既存のクラスを残したまま、新規クラスを追加したい場合にも使えます↓

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
	$parts_content = str_replace(
			'<h1 class="c-pageTitle__main">',
			'<h1 class="c-pageTitle__main kanta">',
			$parts_content
		);
    return $parts_content;
},
);

【使い方】テンプレートの出力の後にコードを追加したい

テンプレートファイルの出力はそのままで、その下にコードを追加したいといった場合の使い方です。

以下は<p>test</p>というコードをtitleテンプレートの出力後に追加させるコードです↓

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
	$parts_content .= '<p>test</p>';
    return $parts_content;
},
);

複数行コードを追加したい場合です↓

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
  $parts_content .= '<p>1行目</p>';
  $parts_content .= '<p>2行目</p>';
    return $parts_content;
},
);

PHPのコードを出力することも可能です。

例えば、get_the_dateで取得した投稿日を追加表示させる場合は次のように記述します↓

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
	$parts_content .= '<p>投稿日：'.get_the_date('Y年n月j日') .'</p>';
    return $parts_content;
},
);

【使い方】コードをガッツリ変更する

部分的な置換ではなく「ガッツリ替えたい」といった場合の使い方についてです。

これまで解説したフックの書き方は「テンプレートファイル内部のコードの一部を書き換える」「出力の最後にコードを加える」という内容です。

既存のコードをゼロにして、出力するコードを全てフックで制御する場合は次のように記述します↓

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
ob_start();?>

// 処理をここに書く

<?php
    $parts_content = ob_get_contents();
    ob_end_clean(); 
    return $parts_content;
},
);

タイトル部分をシンプルに<h1>タイトル</h1>だけにしたい場合は次の通りです↓

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
ob_start();?>

<h1><?php the_title(); ?></h1>

<?php
    $parts_content = ob_get_contents();
    ob_end_clean(); 
    return $parts_content;
},
);

【注意点】パスの書き方

arkhe_part__フックは最初にテンプレートを指定します。この時のパスの書き方に注意しましょう。template-partsフォルダ内のsingle/head/title.phpを対象に指定する場合は次のように記述します。

add_filter( 'arkhe_part__single/head/title', function( $parts_content ) {
	//処理
    return $parts_content;
},
);

Snow Monkeyにもテンプレートの出力を書き換えるsnow_monkey_template_part_render_{path}フックがあります。Snow Monkeyはテーマフォルダのルートからパスを書くため、templateフォルダ内のパーツを指定するさいはtemplateをパスに含める必要があります。

機能が似たフックですが、パスの書き方に違いがあります。Snow Monkeyの経験者だとちょっと混乱しそうなポイントなので注意しましょう！

かんた

Snow Monkey開発者さんに教えていただきました↓

arkhe_part__フックのまとめ

フックの役割

  1. テンプレートファイルを指定してカスタマイズできる
  2. コードを部分的に変更できる
  3. コードを全て置き換えることができる
かんた

かなりカスタマイズの幅が広がるフックです！

arkhe_part__はSWELLでも使えるか？

このフックって、ものすごく便利。ArkheとSWELLは同一の開発者さんのプロダクトなので「もしかしてSWELLにも類似機能があるかも？」と調べてみましたが、SWELLにはありませんでした。

色々試してみたところ、SWELLにArkheのコードを移設するとこのフックが使えることがわかりました。

かんた

詳しくは次の記事で解説しています。

note（ノート）
【SWELL】arkhe_part__{$path}フックをSWELLに移設してみた｜かんた🌊SWELLマニア SWELLマニアのかんた（@swell_mania）です。 「SWELLのテンプレートファイルをガッツリ編集したいけど、フックが見つからない…」 「テンプレートファイルを直接編集し…

まとめ

WordPressテーマArkheのコーポレートサイト制作についてでした。

ArkheはSWELL開発者さんが無料公開しているWordPressテーマです。誰でもダウンロードできるので、気になる人はぜひ試してみてください！

Arkhe基本情報
テーマ名Arkhe（アルケー）
価格無料
開発者ddryo_loos
公式サイトhttps://arkhe-theme.com/ja/
Arkhe基本情報
あわせて読みたい
【解決】Arkhe Pro Packのライセンス形体は？複数サイトで使いまわしできるの？ Arkhe Pro Packに興味がある..複数サイトで使えるの？外注案件に関する制限があるかを知りたい… そんな疑問に答えます。 【【概要】Arkhe Pro Packって何？】 まずは基…
Arkhe
よかったらシェアしてね！
  • URLをコピーしました！
目次