初心者SWELLのフォーラムで「フックがあります」ってコメントがあったけど、フックって何だろう？
誰にも聞けない…
ネットにも情報が見つからない….
そんな悩みを解決します。
フックって何だ？
フックを超初心者向けに説明すると、「テーマをカスタマイズするさいに使うプログラム」ぐらいで理解しましょう。
WordPressは管理画面にあるカスタマイザーからヘッダーやフッター、見出しのデザインなんかを設定しますよね？カスタマイザーを使っていると「アレ？この場所って変更するオプションがない？」なんてことがあります。
独自カスタマイズで仕上げる
どんなWordPressテーマを使っていてもカスタマイザーから設定できない場所があります。
どうしても意図したデザインや仕様に仕上げたい場合、テーマ内にあるテンプレートファイルを編集する独自カスタマイズという方法が必要になってきます。
独自カスタマイズは修正したいコードを出力しているテンプレートファイルを探し、記載してあるコードを書き換えるといった作業のことです。
この作業には「ファイルを特定するスキル」と「プログラムコードを書き換える」スキルが必要です。
かんた初心者向けの作業ではありません。
独自カスタマイズはメンテナンスが大変
テンプレートファイルの中身を書き換えた場合、テーマのアップデートで設定が上書きされるというデメリットがあります。
「上書き＝独自カスタマイズが消える」
せっかく独自カスタマイズしたのにテーマのアップデートの度に設定が消えたら大変ですよね？
独自カスタマイズしたテーマでサイトを運営するには神経を使います。
対策とすると、「テーマをアップデートしないズボラな運用」をするか、上書きされた独自カスタマイズを「テーマアップデートの度に再設定」という手間をかける選択になります。
- テーマをアップデートしない
- 上書きされたファイルに再度独自カスタマイズする
初心者どちらも問題が出そう。
ここでようやくフックの登場です。
フックを活用したカスタマイズは、独自カスタマイズのようにテンプレートファイルを直接編集しないで済む独自カスタマイズです。そのため、テーマのアップデートによる影響を受けないというメリットがあります。
フックはWordPress標準のものとテーマ固有のものがある
フックはWordPressテーマ共通のものとテーマ・プラグイン開発者が独自に用意しているものがあります。
WordPress共通のフックは公式ドキュメントにまとめてあります。SWELL固有のフックの一部はSWELL公式サイトに掲載しています。
ちなみにフックは色んなことができます！
フックのカスタマイズ例
- 任意の要素を足す
- 任意の要素消す
- HTMLを変更する
- データベースから値を持ってくる
かんたサイト訪問者が見るページだけでなく、管理画面をカスタマイズする時にもフックを使います。
テーマ固有のフックを特定する方法
テーマ固有のフックはそれぞれのテーマ開発者が用意していることがあります。
フックが利用できる場所とフック名を特定しない限りフックを使ったカスタマイズは出来ません。SWELLに限らずテーマ固有のフックを調べるには以下の方法があります。
フックを調べる方法
- 公式マニュアルをチェック
- テーマファイルの中身をチェック
- プラグインを使う
公式マニュアルをチェックするのが確実そうですが、テーマの独自フック一覧を紹介していても、コードの書き方を詳細に解説をしているテーマをあまり見たことがありません。
僕は気に入っているテーマに限りテーマの中身を見るのが好きなので、テンプレートファイルをチェックしつつフックを見たらメモしたりしています。あまり効率的な方法ではないので、③のプラグインを使う方法が初心者の方にはおすすめします。
フックを特定するプラグインは色々ありますが、視覚的にフックを把握するならShow Hooksプラグインが便利です。
【フックの実例】関連記事の表示件数を8→4に変更してみる
SWELLのフックを使ったカスタマイズをコード付きで紹介します。ツイッターでSWELLの開発者さんが以下のようなツイートをしていました。
ここは’swell_related_post_maxnum’というフックで外部から書き換えれるようにしている部分になるので、親テーマファイルを直接編集しなくても好きな数値に変えることができます…! 詳しくは「WordPress フック」でググってみてください
Twitter
「投稿記事の下に表示する関連記事の件数はswell_related_post_maxnumフックで指定できる」という内容です。実際にこのswell_related_post_maxnumフックを使い、関連記事の表示件数を調整する方法を紹介します。
事前準備
まずはカスタマイズの事前準備です。
すでにSWELLの子テーマでサイト運用している人は何の準備もいりません。もし子テーマ化していない人はCode Snippetsプラグインをインストールしましょう。子テーマはなくてもOKです！
子テーマを有効化している人でもCode Snippetsプラグインを使っても構いません。
テーマ編集には失敗時にサイトが真っ白になるといったリスクがあるので、子テーマ化している人でもCode Snippetsプラグインをおすすめします。
コードを追加する
Code Snippetsプラグインを有効化している人は Code Snippetsの管理画面で「Add New」をクリックしましょう。
子テーマ化している人でCode Snippetsプラグインを使っていない場合は、「外観」→「テーマエディター」をクリック、「functions.php」の編集画面を開きましょう。
以下が関連記事の表示件数をデフォルトの8個から4個に変更するコードです。
function example01(){
return 4;
}
add_filter( 'swell_related_post_maxnum', 'example01' );コード内にある「swell_related_post_maxnu」がSWELLで関連記事の表示件数を調整するフックです。2行目の「4」が表示件数です。この数値は3、6でも12でも好きな値を自由に指定できます。
コードを入力したら保存して作業終了です。
かんた投稿ページの関連記事の件数を確認してください。
SWELLのアクションフック・フィルターフック一覧
SWELL公式サイトに掲載のあるものと独自に調べたSWELLのアクションフック・フィルターフックをまとめました。
swell_top_area_lazy_off
フックの場所
固定ページや投稿ページで表示の上書き設定でタイトル位置が「コンテンツ上」の時のタイトル背景画像。
フックの解説
Lazyloadの設定フック。デフォルトの設定はTrueです。初期値（True）のままだとLazyloadが無効です。Lazyloadを有効化したい場合はフックでfalseに指定します。フックでfalseにすると#top_title_area imgでlazyloadが有効になります。
コード
function example01(){
return false;
}
add_filter( 'swell_top_area_lazy_off', 'example01' );swell_mv_single_lazy_off
フックの場所
トップページのメインビジュアル（.p-mainVisual__imgLayer img）。カスタマイザーで「トップページ」→「メインビジュアル」で「画像」を選択している場合有効なフックです。
フックの解説
メインビジュアルのLazyLoadの設定です。メインビジュアルはデフォルトでLazyLoadの設定は無効です。LazyLoadを有効化するにはフックにfalseを指定しましょう。
コード
function example01(){
return false;
}
add_filter( 'swell_mv_single_lazy_off', 'example01' );swell_post_slider_lazy_off
フックの場所
トップページの記事スライダーの背景画像（#post_slider img）。
フックの解説
カスタマイザーで記事スライダーを有効時に「記事スライダーエリアの背景画像」を指定している場合、デフォルトではLazyLoadは無効化されています。swell_post_slider_lazy_offフックを使うことでLazyLoadの設定を有効化できます。
コード
function example01(){
return false;
}
add_filter( 'swell_post_slider_lazy_off', 'example01' );swell_post_thumbnail_lazy_off
フックの場所
投稿ページのアイキャッチ画像（.p-articleThumb img）。
フックの解説
投稿でアイキャッチを有効化した場合、デフォルトでLazyLoadは無効です。swell_post_thumbnail_lazy_offフックでfalseを返すことでLazyLoadが有効化できます。
コード
function example01(){
return false;
}
add_filter( 'swell_post_thumbnail_lazy_off', 'example01' );swell_term_thumbnail_lazy_off
フックの場所
タームページのアイキャッチ画像。
フックの解説
タームページのアイキャッチ画像のLazyLoadのオン・オフを変更するフックです。デフォルト値のtrue時にはLazyLoadが無効です。有効化する場合はfalseを指定しましょう。
コード
function example01(){
return false;
}
add_filter( 'swell_term_thumbnail_lazy_off', 'example01' );swell_head_logo
フックの場所
ロゴ画像。
フックの解説
ロゴ画像のパスを変更するさいに使えるフックです。公式サイトではロゴ画像をSVGにする方法として swell_head_logo フックの使い方が紹介されています。
コード
add_filter('swell_head_logo', function($logo) {
return S_DIRE_URI . '/img/logo.svg';
});swell_inner_main_visual
フックの場所
トップページのメインビジュアル（.p-mainVisual__inner）と記事スライダー（#post_slider）間。
フックの説明
指定の位置に任意の要素を出力できるフック。
コード
function example01(){
echo '<div class="kanta-div">自由にアレンジしてください！</div>';
}
add_filter( 'swell_inner_main_visual', 'example01' );swell_parts_post_thumbnail
フックの場所
記事ページのアイキャッチ。
フックの説明
記事ページのアイキャッチを制御するフィルターフック。
コード
swell_before_post_head
フックの場所
投稿記事のタイトル（.c-postTitle）上部。
フックの説明
記事タイトル上部に任意の要素swell_before_post_thumbを出力できるフック。
コード
function example01(){
echo '<div class="kanta-div">自由にアレンジしてください！</div>';
}
add_filter( 'swell_before_post_head', 'example01' );2023年10月1日よりステルスマーケティング規制法が施工予定です。以後、アフィリエイト記事には広告やPRといった表記が必要になります。
このフックを使うと記事の上に広告やPRといった文字列を表示させることができます。
かんたこのフックの使い方は次の記事で解説しています。
swell_before_post_thumb
フックの場所
投稿記事のタイトル部分の公開日時（.p-articleMetas）とアイキャッチ（.p-articleThumb）間。
フックの説明
指定の位置間に任意の要素を出力するアクションフックです。
コード
function example01(){
echo '<div class="kanta-div">自由にアレンジしてください！</div>';
}
add_filter( 'swell_before_post_thumb', 'example01' );swell_get_the_term_links
swell_parts_page_title
swell_parts_term_title
swell_parts_catchphrase
swell_pager_range
フックの場所
投稿一覧ページのぺージャー（c-pagination）。
フックの説明
表示されるページャーの数を制御するフック。デフォルト値は2。
デフォルト値が2の場合、アクテイブなページャーの左右に表示されるページャーの数が左右ともに2になる仕様。1にすると、左右に1つつづの表示になる。表示するページャの数を少なくしたい場合はより小さい値にしましょう。
コード
function example01(){
return 1;
}
add_filter( 'swell_pager_range', 'example01' );コード
swell_parts_head_logo
フックの場所
ヘッダーエリアのサイト名（ロゴ画像）部分。
フックの説明
ヘッダーエリアのサイト名部分を調整するフィルターフック。
コード
function example01($return ){
$return = "自由にコードを書きましょう！";
return $return;
}
add_filter( 'swell_parts_head_logo', 'example01' );swell_related_post_args
フックの場所
投稿記事下部の関連記事エリア。
フックの説明
指定箇所のクエリ因数を変更するフック。デフォルトの仕様は標準投稿（post）限定。並び順はカスタマイザーの「関連記事エリアの設定」にある「並び順」で指定した通りの出力。
順番をランダムにする場合の書き方↓
コード
function example01($args){
$args['orderby'] = 'rand';
return $args;
}
add_filter( 'swell_related_post_args', 'example01' );カスタム投稿（products）記事の関連記事を、標準投稿（post）からカスタム投稿（products）に変更する書き方↓
コード
function example01($args){
if (is_singular( 'products' )){
$args['post_type'] = 'products';
return $args;
}
}
add_filter( 'swell_related_post_args', 'example01' );同じタクソノミー内の同じタームの投稿だけを表示する場合は次のように書く。
コード
function example02($args){
$term = array_shift(get_the_terms($post->ID, 'タクソノミー名'));
$args['taxonomy'] = 'タクソノミー名';
$args['term'] = $term->slug;
return $args;
}
add_filter( 'swell_related_post_args', 'example02' );swell_post_list_404_text
フックの場所
メインループで記事がない場合のテキスト。
フックの説明
該当箇所に記事がなかった場合に表示されるテキストを変更するフック。
コード
function example01(){
return '表示する内容';
}
add_filter( 'swell_post_list_404_text', 'example01' );
swell_posts_404_text
フックの場所
サブループで記事がない場合のテキスト。
フックの説明
該当箇所に記事がなかった場合に表示されるテキストを変更するフック。
コード
function example01(){
return '表示する内容';
}
add_filter( 'swell_posts_404_text', 'example01' );swell_related_post_404_text
フックの場所
投稿記事の関連記事エリア（h2.l-articleBottom__title c-secTitle直下）。
カスタマイザーの関連記事エリアの設定オプションにチェックが入っている場合で、表示している投稿記事に関連記事がないとき限定で出力。カスタマイズをしない場合は「関連する記事はまだ見つかりませんでした。」とpタグでマークアップされたテキストが表示されます。
フックの解説
上記フックの場所に任意の要素を出力するフック。
コード
function example01(){
return '表示する内容';
}
add_filter( 'swell_related_post_404_text', 'example01' );swell_sns_cta_message
フックの場所
投稿記事下部のSNSエリア内のテキスト（p-snsCta__message）。カスタマイザーの「記事下」でSNSアクションエリア設定オプションを有効化した時にのみ表示されます。
初期値のテキストは「この記事が気に入ったらいいねしてね！」。カジュアル過ぎるので企業サイトなどで変更したい場合に使えるフック。
フックの説明
指定箇所のテキストを任意のテキストに指定するフック。
コード
function example01(){
return 'コチラに入力！';
}
add_filter( 'swell_sns_cta_message', 'example01' );swell_post_list_type_on_term
フックの場所
タームのアーカイブページ。
フックの説明
swell_related_post_args
タームの一覧ページの投稿スタイルをアレンジするフック。デフォルト値はカスタマイザー。このフックを使うとタームのアーカイブページだけ投稿の表示形式を変更できる。
コード
function example01() {
return 'list';
}
add_filter( 'swell_post_list_type_on_term', 'example01', );- card：カード型
- list：リスト型
- list2：リスト型（左右交互）
- thumb：サムネイル型
- blog：ブログ型
- simple：テキスト型
特定のタームだけ表示形式を変更する場合のサンプルコード。
タクソノミーがgenre、タームがappleのアーカイブだけlist（リスト形式）。それ以外のタームはsimple（テキスト形式）。
function example01() {
if ( is_tax( 'genre', 'apple' ) ){
return 'list';
}else{
return 'simple';
}
}
add_filter( 'swell_post_list_type_on_term', 'example01', );swell_post_list_type_on_archive
フックの場所
年・月・日などアーカイブページ、カスタム投稿アーカイブページで出力される投稿エリア。
フックの説明
アーカイブページの投稿表示形式をアレンジするフック。
年・月・日のアーカイブページの出力をlist（リスト型）にする場合は次のように書く。
コード
function example01() {
return 'list';
}
add_filter( 'swell_post_list_type_on_archive', 'example01', );- card：カード型
- list：リスト型
- list2：リスト型（左右交互）
- thumb：サムネイル型
- blog：ブログ型
- simple：テキスト型
特定のカスタム投稿だけ表示形式をthumb（サムネイル型）に指定する場合は次のように書く。
function example01(){
if (is_post_type_archive('カスタム投稿')){
return 'thumb';
}
}
add_filter( 'swell_post_list_type_on_archive', 'example01',10,1 );swell_post_list_type_on_search
フックの場所
検索結果ページの投稿一覧。
フックの説明
検索結果ページに表示される投稿の表示形式を指定するフック。デフォルト値はカスタマイザー→「記事一覧リスト」→「リストのレイアウト設定」で指定したレイアウト形式。このフックでは他のページに影響がないよう検索結果のページだけ表示形式を変更することができる。
コード
function example01(){
return 'simple';
}
add_filter( 'swell_post_list_type_on_search', 'example01' );- card：カード型
- list：リスト型
- list2：リスト型（左右交互）
- thumb：サムネイル型
- blog：ブログ型
- simple：テキスト型
swell_post_list_type_on_author
フックの場所
authorテンプレートで出力される投稿者ページ上の投稿一覧。
フックの説明
投稿一覧の投稿表示形式をアレンジするフック。
コード
function example01() {
return 'list';
}
add_filter( 'swell_post_list_type_on_author', 'example01', );- card：カード型
- list：リスト型
- list2：リスト型（左右交互）
- thumb：サムネイル型
- blog：ブログ型
- simple：テキスト型
swell_get_search_title
フックの場所
検索結果ページのh1タイトル（※meta titleではないほうです。）
フックの説明
タイトル部分の出力を任意のものに変更するためのフィルターフック。
コード
function example11() {
return '検索結果';
}
add_filter( 'swell_get_search_title', 'example11', );「ちょいとオシャレに英語にしたい！」
そんな場合の書き方↓
コード
function example11() {
$s_query = get_search_query();
return "Search result of 「{$s_query} 」";
}
add_filter( 'swell_get_search_title', 'example11', );
swell_infobar_data
フックの場所
お知らせバー（.c-infoBar）上部。
フックの説明
カスタマイザーで「お知らせバー」を表示しない以外のオプションを選択している場合に有効。お知らせバー上部に任意の要素を出力するフック。
お知らせバーは各ページ共通のパーツですが、フックで記事ごとにお知らせバーのテキストとリンク先URLを変更することも可能です。
かんたお知らせバーを記事ごとに変更するカスタマイズ方法は次の記事で解説しています。
swell_after_copyright
フックの場所
フッターのコピーライト（.copyright）直下。
フックの説明
コピーライト直下に任意の要素を出力するためのフック。
コード
function example01(){
echo '<div class="kanta-div">自由にアレンジしてください！</div>';
}
add_filter( 'swell_after_copyright', 'example01' );swell_json_ld_data
フックの場所
JSON-LD。
フックの説明
JSON-LDの出力調整用フィルターフック。
コード
swell_json_ld_article_data
フックの場所
JSON-LD
フックの説明
JSON-LD調整用フィルターフック。
コード
swell_breadcrumb_list_data
フックの場所
パンくず。
フックの説明
パンくずの出力形式（$list_data）を変更するフック。
コード
function example01(){
}
add_filter( 'swell_breadcrumb_list_data', 'example01',10,1 );swell_post_content_class
フックの場所
固定ページのアウター（.post_content）。
フックの説明
指定箇所のアウターのクラス名を変更するフック。
コード
function example01(){
return 'class_name';
}
add_filter( 'swell_post_content_class', 'example01' );swell_searchform_placeholder
フックの場所
ウィジェットの検索ボックスのプレースホルダー。
フックの説明
検索ボックスのプレースホルダーのテキストを指定するフック。
コード
function example01(){
return '検索しょうぜ！';
}
add_filter( 'swell_searchform_placeholder', 'example01' );swell_table_scroll_hint
フックの場所
表（テーブル）ブロックで横スクロール設定を有効化している時に表示されるスクロールヒント（.c-scrollHint）。
フックの解説
スクロールヒント要素を自由に変更するフックです。
コード
function example01(){
return 'スクロールできますよ！';
}
add_filter( 'swell_table_scroll_hint', 'example01' );swell_post_list_cat_data
フックの場所
投稿リストブロック、アーカイブ系テンプレートに表示されるフォルダ内のカテゴリー。
フックの解説
カテゴリー部分を任意の仕様に変更できる。
例：親・子カテゴリーなど複数のカテゴリーを持っている場合に、親カテゴリーを表示するといったカスタマイズや、カテゴリーではなくタグを出力するといったカスタマイズができます。カテゴリー、タグといった標準の分類以外にもタクソノミーもこのフックで出力可能。
コード
function example01($args){
$cat=get_the_category();
$args['name'] = '';
$args['id'] = '';
return $args;
}
add_filter( 'swell_post_list_cat_data', 'example01' );標準ではカテゴリーが表示されます。この部分をタグに表示する場合は次のように書く。
コード
function example01($args){
$tags = get_the_tags();
$args['name'] = $tags[0]->name;
$args['id'] = $tags[0]->term_id;
return $args;
}
add_filter( 'swell_post_list_cat_data', 'example01' );標準投稿のタクソノミーを出力する場合は次のように書く。
コード
function example01($args){
$term = get_the_terms($post->ID,'タクソノミースラッグ');
$args['name'] = $term[0]->name;
$args['id'] = $term[0]->term_id;
return $args;
}
add_filter( 'swell_post_list_cat_data', 'example01' );カスタム投稿のアーカイブページで、ターム名を表示させる方法は次の記事で解説しています。
swell_pickup_post_args
フックの場所
トップページの記事スライダー。
フックの説明
記事スライダーの表示内容を任意の内容に変更するフック。
例えば、標準投稿（post）ではなくカスタム投稿（products）に変更する場合↓
コード
function example01($args){
$args['post_type'] = 'products';
return $args;
}
add_filter( 'swell_pickup_post_args', 'example01' );標準投稿（post）と、カスタム投稿（products）の両方を出力する場合↓
コード
function example01($args){
$args['post_type'] = array('products', 'post');
return $args;
}
add_filter( 'swell_pickup_post_args', 'example01' );swell_parts_scroll_arrow
フックの場所
トップページのメインビジュアル
swell_show_term_navigation
swell_root_attrs
swell_body_attrs
swell_content_attrs
swell_lp_content_attrs
swell_frame_class
swell_is_show_ttltop
swell_is_show_index
swell_is_show_toc_ad
swell_is_show_sidebar
swell_remove_url_to_card
swell_head_logo_sizes
SWELLのよくあるカスタマイズ
SWELLを使ったブログ、企業サイトの制作でよく使うカスタマイズを紹介します。
記事一覧にカスタムフィールドなどのHTMLタグを表示する
不動産サイト、ポータルサイト、料理レシピブログ、ガジェットブログ等だと定番のカスタマイズ。
カテゴリーなど記事一覧を表示するアーカイブページに、カスタムフィールドなどの任意のタグを表示したいことってありますよね？
WordPressのフィルターフックを使えば、デモサイトのように一覧ページにHTMLタグを追加できます。
かんた記事一覧にHTMLタグを表示させるカスタマイズは次の記事で解説しています。
投稿リストにカスタムフィールドやタームを表示する
投稿にひもづいたカスタムフィールドやタームの情報を表示するカスタマイズについてです。
不動産サイトだと、「家賃」「築年数」「エリア」「最寄り駅」などをカスタムフィールドやカスタムタクソノミーで設定してコンテンツを管理するケースはよくありますよね？
トップページ上に投稿リストブロックを使ってカテゴリーやタームごとの新着情報を表示させることは可能ですが、カスタムフィールドなど任意のHTMLを追加することはできません。
受注案件で、クライアントが追加したコンテンツ情報をカスタムフィールドを含めて指定の場所に自動的に表示したいといった場合は独自カスタマイズが必要です。
SWELLの親テーマを一切変更せずに、新着情報をカスタムフィールドやタームなどを含めて表示させる方法があります。
かんたこのカスタマイズについては次の記事で紹介しています↓
グロナビをページごとに変更する
特定のページだけ、グロナビを変更するといったケースです。
このページだけグロナビを変えたい…
- 特定の固定ページ
- LPページだけ
- カテゴリーアーカイブページだけ
- お知らせカテゴリーに属する記事だけ
フックでページごとにグロナビを変更することができます。グロナビ以外にもスマホメニューや、スマホのフッターメニューを特定のページだけ別のメニューに指定することができます。
かんたこのカスタマイズは次の記事で解説しています。
カテゴリ－・タグアーカイブページに並び替えボタンを付ける
アーカイブページにPV、投稿日、更新日などで並び替えするボタンを付けるカスタマイズです。
不動産サイトや、ガジェットサイトなどでよく見かける定番カスタマイズ。
このカスタマイズを実装しているデモサイト
かんたこの並び替えボタンの設定方法は次の記事で解説しています。
LPのURLから「lp」を削除するカスタマイズ
SWELLにはランディングページを作成するカスタム投稿が標準搭載されています。
作成されるページのURLはカスタム投稿のスラッグを含みます。
サイトアドレス/lp/パーマリンク
かんたURLに含まれる「lp」の文字列を削除する方法は次の記事で解説しています。
【裏技】フックのないテンプレートをフックで編集する方法
SWELLの独自フックとWordPressコアのフックを活用してもカスタマイズできない場所があります。
そんな時でもテンプレートを直接編集せず、スマートにカスタマイズしたいですよね？
かんたそんな時に使える裏技を紹介します。
テンプレート指定できる便利なフック
ざっくり概要説明すると、無料テーマ「Arkhe」のarkhe_part__{$path}フックをSWELLで使う方法です。
ArkheはSWELL開発者さんのプロダクトで、無料で使えるWordPressテーマです。
arkhe_part__{$path}フックはArkheの独自フックで、テンプレートを指定して、内容を書き換えることができるフィルターフックです。
Snow Monkeyユーザー向けに説明すると、snow_monkey_template_part_render_{slug}フックと同じ機能です。
通常のフックとの大きな違いは、テンプレートを指定できる点です。フックのないテンプレートでも、このフックで指定して出力をカスタマイズできます。
かんたSWELLでarkhe_part__{$path}フックを使う方法は、次の記事で解説しています。
アクションフックエリアをブログエディターで編集するカスタマイズ
アクションフックで出力する要素をfuctions.phpのechoではなく、ブロックエディターで編集するカスタマイズテクニックを紹介します。
全体の流れ
- ブログパーツで出力要素を作る
- 実行するアクションを追加する
- 出力要素をブログパーツで編集する
【手順①】ブログパーツで出力要素を作る
「ブログパーツ」→「新規追加」。
適当な名前でブログパーツを作成します。中身は後で編集してOKです。
【手順②】実行するアクションを追加
funtions.phpに以下のコードを追加します。blog_parts id=”1″の部分は、ブログパーツで作成した呼び出しコードです。
function example01(){
echo do_shortcode('');
}
add_filter( 'swell_infobar_data', 'example01' );【手順③】出力要素をブログパーツで編集する
作成済みのブログパーツを開き、出力したい要素を自由に追加してください。
ブログパーツの中身がサイトに表示されていれば作業終了です。表示されない場合は以下の項目ををチェックしましょう。
ミスしそうなポイント
- フック名
- 関数名
- ブログパーツの呼び出しコード
かんた以上で作業は完了です。
まとめ
SWELLのフックについて紹介しました。
テーマにない機能の追加やデザインの調整をする場合にはテンプレートファイルを編集する独自カスタマイズが必要です。テンプレートファイルのコードを編集してしまうと、テーマアップデートで上書きされます。
フックは使ったカスタマイズの場合、テンプレートファイルに手を加えず機能の追加や調整が可能です。サイト運営の観点からフックの利用がおすすめです。ぜひフックを使ったカスタマイズにチャレンジしてみください。
