お問い合わせ

ArkheをWeb制作に使った時の課題が見えてきた

Arkheを使ってWeb制作する時は、課金した方がいいのでしょうか?

Arkheは有料ライセンスを使うとSWELLに近い機能が使えるようになります。

有料ライセンスというのは、Arkhe Pro packのことです。

Arkhe Pro packには以下の3つのプラグインが含まれています。

  • Arkhe Blocks Pro
  • Arkhe Toolkit
  • Arkhe CSS Editor

これらのプラグインがあるとProブロックや拡張機能が追加されます。

しかし、実際に課金しても、サイト制作する時に必須と言えるほどの機能は無く、フリーライセンスでArkheを使って企業サイトを制作しました。

有料プラグインの記事はこちら

課金してその機能を使ってしまうと、その機能がWordpressのバージョンやテーマのバージョンアップのタイミングで動かなくなった時に、追加のサブスクリプション料金が発生するのを避けるためです。

有料プラグインを使った時のリスクについてはこちらの記事をご覧ください。

なるべく課金しないまま制作するのが王道です。

この記事では、Arkheを無課金で企業サイトを制作した時の課題や問題点についてまとめています。

Arkheはjavascriptで実装された機能が外せない

Arkheは無料テーマですが、独自のjavascriptで実装された機能がいくつかあります。

主には、スムーススクロールやスクロール検出などです。

これらのjavascriptで実装された機能は、main.jsで提供され、コードは圧縮されています。

これらの機能を外したい時には、main.js自体を差し替えるしかありません。

main.js自体はadd_actionをremoveすれば、差し替えることが可能でした。

なお、SWELLではスムーススクロール機能のON/OFFが選べますが、Arkhe Toolkitを導入してもその機能は追加されません。

Arkheはmain.jsに組み込まれた機能をOFFにすることは出来ません。

問題点

スムーススクロールの問題点

スムーススクロールは、ヘッダーサイズを計算して、ジャンプ位置を調整するようになっています。

しかし、ヘッダーサイズは常に変更されないという前提になっていて、ページ読み込み時にサイズ計算しています。

スクロール中にヘッダーサイズが変更されるケースでは、ジャンプ後に位置がずれる問題が起きます。

ヘッダーサイズを別途指定できればいいのですが、Arkheではそれができないのと、スムーススクロールのjavascriptだけを差し替えることも出来ません。

スクロール検出の問題点

ArkheやSWELLはページ先頭に要素を配置して、それを検出することでスクロール検出をしています。

この部分にはintersection observerが使われていますが、あまり良い実装ではなく、チャタリングする問題があります。

この部分も書き換えたくても、main.jsにあるため書き換えられません。

解決方法

Arkheはmain.jsの非圧縮ソースコードが同梱されています。そのmain.jsを書き換え問題を解消した後、常にそちらを読み込むようにします。

Arkheのenqueスクリプトを差し替えて、main.min.jsのところを読み込ませたいjsに書き換えます。

namespace Arkhe_Theme;
remove_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_front_scripts', 8 );

add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_front_scripts_xxx', 8 );
function enqueue_front_scripts_xxx() {
	$setting = \Arkhe::get_setting();

	// wp-block-libraryを読み込み
	wp_enqueue_style( 'wp-block-library' );

	// main.css
	wp_enqueue_style( 'arkhe-main-style', ARKHE_THEME_URI . '/dist/css/main.css', array(), \Arkhe::$file_ver );
	wp_add_inline_style( 'arkhe-main-style', \Arkhe::output_style( 'front' ) );

	// ヘッダーオーバーレイ時
	if ( \Arkhe::is_header_overlay() ) {
		wp_enqueue_style( 'arkhe-overlay-header', ARKHE_THEME_URI . '/dist/css/module/-overlay-header.css', array(), \Arkhe::$file_ver );
	}

	// Lazysizes
	wp_enqueue_script( 'arkhe-lazysizes', ARKHE_THEME_URI . '/dist/js/plugin/lazysizes.js', array(), \Arkhe::$file_ver, true );

	// main.js
	wp_enqueue_script( 'arkhe-main-script', get_stylesheet_directory_uri() . '/dist/js/main.js', array(), \Arkhe::$file_ver, true );
	wp_localize_script( 'arkhe-main-script', 'arkheVars', \Arkhe::get_front_global_vars() );

	// コメント用
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}

Arkheのコード内に機能があるのに有効化されていないものがある

Arkheは、ロゴと一緒にサイトのキャッチフレーズを表示する機能がテーマファイルにはありますが、テーマの設定からは有効化できません。

Arkheは、カスタマイズしないと、サイトのキャッチフレーズが常に表示されません。

これは、Arkhe Toolkitで有効になるのか謎なのですが、フックで書き換えてあげれば、キャッチフレーズが表示できるようになります。

add_filter('arkhe_part_args__header/logo',function($args){
	//var_dump($args);
	$args['show_tagline']=1;
	$args['show_tagline_sp']=1;
	return $args;
	
});

まとめ:ArkheをWeb制作に使った時の課題

Arkheは、Arkhe Toolkitが使う機能がテーマのコード内部に転がっている場合があるので、自分でフックを使ってスイッチを書き換えると使えるようになります。

Arkheは無料テーマとしては完成度がとても高いと思いますが、カスタマイズが前提となっていますので、初心者向けではないと思います。

Arkheの有料版はSWELLの同じ機能が使えますか?

Arkheはまだまだ発展途上のテーマです。

SWELLにある機能がArkheにあるとは限りません。むしろ無い機能の方が多いといえます。

Arkheを使うメリットは何ですか?

Arkheを使うメリットは、SWELLでは多機能すぎて遅いテーマだと感じいて、SWELLの機能やデザインを取り払ったベーステーマを必要としている場合には、ベストマッチになります。

Arkheは初心者でも使いこなせますか?

Arkheは低機能ですので、使いこなすのは初心者でも大丈夫です。

しかし、カスタマイズしてArkheのポテンシャルを全て使い切るには高度な知識とスキルが必要になります。

Arkheをカスタマイズする自信がないのであれば、低機能なArkheを使うぐらいならSWELLを使う方がいいでしょう。

役に立ったら他の人にもシェア!
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次