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ではそれができないのと、スムーススクロールの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は無料テーマとしては完成度がとても高いと思いますが、カスタマイズが前提となっていますので、初心者向けではないと思います。
コメント