[WordPress] Arkhe カスタマイズノート

2022年2月11日2023年8月3日

WordPressのテーマ Arkhe(アルケー）をカスタマイズする際に役立つかもしれない情報です。Arkheに関わらずWordPressのテーマ全般の情報ですが、「何が付いていないか」を踏まえて、随時更新予定です。有料版の追加機能で簡単に実装できる様になるのかもしれないので、深堀はしません。ヒント的な感じの覚書です。（お商売の邪魔になってしまうので）

素人なのでノーコードも良いですが、やっぱりコードを書いて表示が変わっていくのって楽しい♪Arkheはファイル構成が分かり易く、カスタムしやすいです。

テーマについて

[WordPress] カスタマイズしやすい国産テーマ Arkheを使ってみた無料のテーマ Arkhe(アルケー）を触ってみました。 WordPressテーマ「SWELL」のリョウさんが手がけたテーマです。SWELLはブログで使用する事を前提に作られていて、コ…

INDEX

ブレイクポイント

親テーマの中の、src/scss/foundation/mixin/_media.scss　を参照。変更もあり得るので、あえて詳細は書きません。ファイルでご確認下さい。

フックについて

公式ガイド

アクションフック・フィルターフック一覧 | Arkhe このページでは、WordPressテーマ「Arkhe（アルケー）」に用意されているアクションフック・フィルターフックを紹介しています。

大変参考になります

無効なURLです

フック、フィルターの見つけ方

テーマによってはフック一やフィルターリストが提供されていますが、無い場合は検索する事でテーマファイルの何処に設置されているのか分かります。

VSCなどのエディタで「apply_filters」や「do_action」と検索すればOKです。

ロゴのサイズ

Arkhe公式サイトでは、1024 x 371pxのロゴ画像を使用しています。

WordPressはSVGは使えません。ロゴをSVGでアップロードしたい場合はファイルに追記が必要です。

CSS

Swellの様に、ボタン一つで実装出来るという訳ではないのですが、沢山のCSSが設定されています。「高度な設定」の所に書き足せばOKです。

Arkhe

CSS設計 | Arkhe このページでは、WordPressテーマ「Arkhe（アルケー）」のCSS設計について解説しています。

src/scss/object/utility/ここにファイルがいろいろあるので、開いて確認します。例えば、こんな感じ。PCだけ表示する。スマホだけ表示するとかしないとか。

@include pc {

	.u-only-sp {
		display: none !important;
	}

	.u-hide-pc {
		display: none !important;
	}
}

@include sp {

	.u-only-pc {
		display: none !important;
	}

	.u-hide-sp {
		display: none !important;
	}
}