【SWELL】フックって何だ?関連記事の表示件数を8→4に変更する方法

初心者

SWELLのフォーラムで「フックがあります」ってコメントがあったけど、フックって何だろう?
誰にも聞けない…
ネットにも情報が見つからない….

そんな悩みを解決します。

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

フックって何だ?

フックって何だ?

フックを超初心者向けに説明すると、「テーマをカスタマイズするさいに使うプログラム」ぐらいで理解しましょう。

WordPressは管理画面にあるカスタマイザーからヘッダーやフッター、見出しのデザインなんかを設定しますよね?カスタマイザーを使っていると「アレ?この場所って変更するオプションがない?」なんてことがあります。

独自カスタマイズで仕上げる

どんなWordPressテーマを使っていてもカスタマイザーから設定できない場所があります。

どうしても意図したデザインや仕様に仕上げたい場合、テーマ内にあるテンプレートファイルを編集する独自カスタマイズという方法が必要になってきます。

独自カスタマイズは修正したいコードを出力しているテンプレートファイルを探し、記載してあるコードを書き換えるといった作業のことです。

この作業には「ファイルを特定するスキル」と「プログラムコードを書き換える」スキルが必要です。

かんた

初心者向けの作業ではありません。

独自カスタマイズはメンテナンスが大変

テンプレートファイルの中身を書き換えた場合、テーマのアップデートで設定が上書きされるというデメリットがあります。

「上書き=独自カスタマイズが消える」

せっかく独自カスタマイズしたのにテーマのアップデートの度に設定が消えたら大変ですよね?

独自カスタマイズしたテーマでサイトを運営するには神経を使います。

対策とすると、「テーマをアップデートしないズボラな運用」をするか、上書きされた独自カスタマイズを「テーマアップデートの度に再設定」という手間をかける選択になります。

  • テーマをアップデートしない
  • 上書きされたファイルに再度独自カスタマイズする
初心者

どちらも問題が出そう。

ここでようやくフックの登場です。

フックを活用したカスタマイズは、独自カスタマイズのようにテンプレートファイルを直接編集しないで済む独自カスタマイズです。そのため、テーマのアップデートによる影響を受けないというメリットがあります。

フックはWordPress標準のものとテーマ固有のものがある

フックはWordPressテーマ共通のものとテーマ・プラグイン開発者が独自に用意しているものがあります。

WordPress共通のフックは公式ドキュメントにまとめてあります。SWELL固有のフックの一部はSWELL公式サイトに掲載しています。

ちなみにフックは色んなことができます!

フックのカスタマイズ例

  • 任意の要素を足す
  • 任意の要素消す
  • HTMLを変更する
  • データベースから値を持ってくる
かんた

サイト訪問者が見るページだけでなく、管理画面をカスタマイズする時にもフックを使います。

テーマ固有のフックを特定する方法

テーマ固有のフックはそれぞれのテーマ開発者が用意していることがあります。

フックが利用できる場所とフック名を特定しない限りフックを使ったカスタマイズは出来ません。SWELLに限らずテーマ固有のフックを調べるには以下の方法があります。

フックを調べる方法

  1. 公式マニュアルをチェック
  2. テーマファイルの中身をチェック
  3. プラグインを使う

公式マニュアルをチェックするのが確実そうですが、テーマの独自フック一覧を紹介していても、コードの書き方を詳細に解説をしているテーマをあまり見たことがありません。

僕は気に入っているテーマに限りテーマの中身を見るのが好きなので、テンプレートファイルをチェックしつつフックを見たらメモしたりしています。あまり効率的な方法ではないので、③のプラグインを使う方法が初心者の方にはおすすめします。

フックを特定するプラグインは色々ありますが、視覚的にフックを把握するならShow Hooksプラグインが便利です。

【フックの実例】関連記事の表示件数を8→4に変更してみる

【実例】関連記事の表示件数を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のアクションフック・フィルターフックをまとめました。

随時編集しています!

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)。カスタマイザーで「トップページ」→「メインビジュアル」で「画像」を選択している場合有効なフックです。

画像が1枚の時限定です。

フックの解説

メインビジュアルの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が有効化できます。

タイトルの位置をコンテンツ上に指定している場合に表示されるアイキャッチのLazyLoadのフックは「swell_top_area_lazy_off」です。

コード

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' );

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_FUNC.php

swell_parts_page_title

3.0で消滅予定のフック

swell_parts_term_title

3.0で消滅予定のフック

swell_parts_catchphrase

3.0で消滅予定のフック

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;
}
add_filter( 'swell_parts_head_logo', 'example01' );

swell_related_post_args

フックの場所

投稿記事下部の関連記事エリア。

フックの説明

指定箇所のクエリ因数を変更するフック。デフォルトの仕様は標準投稿(post)限定。並び順はカスタマイザーの「関連記事エリアの設定」にある「並び順」で指定した通りの出力。

カスタム投稿を追加した場合でも標準投稿が表示される仕様。カスタム投稿の記事で関連記事をカスタム投稿にする場合のフィルターフック。

カスタム投稿(products)記事の関連記事を標準投稿(post)からカスタム投稿(products)に変更する書き方。

コード

function example01($args){
if (is_singular( 'products' )){
$args['post_type'] = 'products';
return $args;
}
}
add_filter( 'swell_related_post_args', 'example01' );

条件分岐を入れないと標準投稿(post)側の関連記事もカスタム投稿の表示になるので注意が必要。

同じタクソノミー内の同じタームの投稿だけを表示する場合は次のように書く。

コード

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

フックの場所

メインループで記事がない場合のテキスト。

サブループのフックは「swell_posts_404_text」。

フックの説明

該当箇所に記事がなかった場合に表示されるテキストを変更するフック。

コード

function example01(){
return '表示する内容';
}

add_filter( 'swell_post_list_404_text', 'example01' );

swell_posts_404_text

フックの場所

サブループで記事がない場合のテキスト。

メインループのフックは「 swell_post_list_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

フックの場所

タームのアーカイブページ。

フックの説明

タームの一覧ページの投稿スタイルをアレンジするフック。デフォルト値はカスタマイザー。このフックを使うとタームのアーカイブページだけ投稿の表示形式を変更できる。

コード

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

フックの場所

年・月・日などアーカイブページ、カスタム投稿アーカイブページで出力される投稿エリア。

タームのアーカイブは「swell_post_list_type_on_term」。

フックの説明

アーカイブページの投稿表示形式をアレンジするフック。

年・月・日のアーカイブページの出力を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_infobar_data

フックの場所

お知らせバー(.c-infoBar)上部。

フックの説明

カスタマイザーで「お知らせバー」を表示しない以外のオプションを選択している場合に有効。お知らせバー上部に任意の要素を出力するフック。

コード

function example01(){
echo '<div class="kanta-div">自由にアレンジしてください!</div>';
}

add_filter( 'swell_infobar_data', 'example01' );

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

フックの場所

ウィジェットの検索ボックスのプレースホルダー。

フックの説明

検索ボックスのプレースホルダーのテキストを指定するフック。

WordPressインストール時に表示されるデフォルトの検索ボックスでは動作しない。

コード

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 example101($args){
$terms = get_terms($taxonomies);
	
$args['name'] = $terms[0]->name;
$args['id'] = $terms[0]->term_id;
return $args;
}

add_filter( 'swell_post_list_cat_data', 'example01' );

アクションフックエリアをブログエディターで編集するカスタマイズ

アクションフックエリアをブログエディターで編集するカスタマイズ

アクションフックで出力する要素をfuctions.phpのechoではなく、ブロックエディターで編集するカスタマイズテクニックを紹介します。

全体の流れ

  1. ブログパーツで出力要素を作る
  2. 実行するアクションを追加する
  3. 出力要素をブログパーツで編集する

【手順①】ブログパーツで出力要素を作る

「ブログパーツ」→「新規追加」。

適当な名前でブログパーツを作成します。中身は後で編集してOKです。

後ほどブログパーツの「呼び出しコード」をコピペします。

【手順②】実行するアクションを追加

funtions.phpに以下のコードを追加します。blog_parts id=”1″の部分は、ブログパーツで作成した呼び出しコードです。

function example01(){
echo do_shortcode('
'); } add_filter( 'swell_infobar_data', 'example01' );

親テーマのfunctions.phpに直接コードを書くとテーマのアップデートで消えてしまいます。
子テーマを有効化するか、Code Snippetsプラグインを使いましょう。

【手順③】出力要素をブログパーツで編集する

作成済みのブログパーツを開き、出力したい要素を自由に追加してください。

ブログパーツの中身がサイトに表示されていれば作業終了です。表示されない場合は以下の項目ををチェックしましょう。

ミスしそうなポイント

  • フック名
  • 関数名
  • ブログパーツの呼び出しコード
かんた

以上で作業は完了です。

まとめ

SWELLのフックについて紹介しました。

テーマにない機能の追加やデザインの調整をする場合にはテンプレートファイルを編集する独自カスタマイズが必要です。テンプレートファイルのコードを編集してしまうと、テーマアップデートで上書きされます。

フックは使ったカスタマイズの場合、テンプレートファイルに手を加えず機能の追加や調整が可能です。サイト運営の観点からフックの利用がおすすめです。ぜひフックを使ったカスタマイズにチャレンジしてみください。

よかったらシェアしてね!
もくじ
先頭へ
目次
閉じる