SWELLのテーマにはフックがたくさん用意されているのが、良い点です。
他のWordPressのテーマだと子テーマを入れて、テンプレートを上書きするところを、フックでコードを上書きしてカスタマイズができます。
↓フックは全情報は下記の記事にあります。
では、実際によく使うフックとはどこでしょうか？
だいたいはウィジェットで配置できない場所にブログパーツを挿入することに使われます。
本記事ではそのフックの場所を一覧でまとめました。
フックの場所はしらこさんのサイトを参考しています。
引用元：しらこさんのSWELLサイト
SWELLのウィジェットエリア一覧まとめ 20選
フックを紹介する前にウィジェットの位置をおさらいします。
たとえばブログパーツにフッターのコンテンツを作成して、ショートコードをウィジェットに配置することはよくやります。
フックの前にウィジェットの場所を覚えておきましょう。
サイドバー系
| ウィジェットエリア名 | 説明 |
|---|---|
| 共通サイドバー | 全ページで共通のサイドバー表示 |
| 共通サイドバー【スマホ版】 | スマホ表示時の共通サイドバー |
| トップページ専用サイドバー | トップページだけに表示されるサイドバー |
| 追尾サイドバー | スクロールに追従するサイドバー（PCのみ） |
投稿・固定ページ系
| ウィジェットエリア名 | 説明 |
|---|---|
| 記事上部 | 投稿のタイトル上に表示される |
| 記事下部 | 記事本文の下部に表示される |
| 固定ページ上部 | 固定ページの冒頭に表示される |
| 固定ページ下部 | 固定ページの最後に表示される |
| 関連記事上 | 関連記事の前に表示される |
| 関連記事下 | 関連記事の後に表示される |
トップページ専用
| ウィジェットエリア名 | 説明 |
|---|---|
| トップページ上部 | トップページの上に表示される |
| トップページ下部 | トップページの下に表示される |
スマホ用・その他
| ウィジェットエリア名 | 説明 |
|---|---|
| スマホ開閉メニュー下 | スマホのメニューを開いた直後に表示 |
| CTAウィジェット | 記事下CTA専用のウィジェットエリア |
フッター系
| ウィジェットエリア名 | 説明 |
|---|---|
| フッター直前 | コピーライトの上に表示される |
| フッター（PC）1 | PC版フッターカラム1（左） |
| フッター（PC）2 | PC版フッターカラム2（中央） |
| フッター（PC）3 | PC版フッターカラム3（右） |
| フッター（スマホ） | スマホ表示時のフッター用 |
SWELLでフックを使ってコンテンツを挿入する場所一覧まとめ
ウィジェットでコンテンツが挿入できない場所、そこにフックが活躍します。
あとはカスタマイズの高度な設定からもコンテンツが挿入できるので合わせて紹介します。
ヘッダーの上にコンテンツを挿入したい
ヘッダー上に挿入できるフックはありません。
ただしカスタマイズの高度な設定から、コンテンツが挿入できます。
- headタグ終了直前に示する内容
- bodyタグ開始直後に表示する内容
メインビジュアル下にコンテンツを挿入したい
swell_before_post_headのフックから挿入できます。
add_action('swell_inner_main_visual', function() { ?>
echo do_shortcode('[blog_parts id="64"]');
<?php });フッターのコピーライト下にコンテンツを挿入したい
swell_after_copyrightのフックから挿入できます。
add_action('swell_after_copyright', function() {
echo do_shortcode('[blog_parts id="64"]');
});またはカスタマイズの高度な設定から、コンテンツが挿入できます。
- bodyタグ終了直前に出力するコード
投稿記事のタイトル上下にコンテンツを挿入したい
投稿記事の前に表示する内容
swell_before_post_headのフックから挿入できます。
add_action('swell_before_post_head', function() { ?>
echo do_shortcode('[blog_parts id="64"]');
<?php });アイキャッチの後に表示する内容
swell_before_post_thumbのフックから挿入できます。
add_action('swell_before_post_thumb', function() { ?>
echo do_shortcode('[blog_parts id="64"]');
<?php });応用│フックのない場所にフックを仕込む方法
実はフックは特定の場所に自作することができます。
それをするためにはSWELLのテンプレートのコードを上書きしてフックを仕込む必要があります。
サンプルとして固定記事上にswell_before_page_titleというフックを作成してみました。
作り方は別の記事に記載しています。
WordPressの本体に用意されているフックでコンテンツを挿入する
最後におまけです。
WordPressの本体に用意されているフックでコンテンツを挿入する方法もまとめておきました。
| 目的 | フック名 |
|---|---|
<head>に何か追加 | wp_head |
<body>開始直後 | wp_body_open |
| 本文前後に何か挿入 | the_content |
| 本文ループの前後に挿入（記事やカードの前後） | loop_start, loop_end |
| フッターにJS挿入など | wp_footer |
add_filter('the_content', function($content) {
return '<div class="custom-before">前</div>' . $content . '<div class="custom-after">後</div>';
});add_action('loop_start', function($query) {
if ( is_main_query() && !is_admin() ) {
echo '<div class="before-loop">ここにループ前のHTMLなど</div>';
}
});add_action('loop_end', function($query) {
if ( is_main_query() && !is_admin() ) {
echo '<div class="after-loop">ここにループ後のHTMLなど</div>';
}
});
