SWELL(スウェル)の記事スライダーに固定ページを追加する方法

※当サイトにはプロモーションが含まれています。

クライアントクライアント

SWELLの記事スライダーに表示される記事に固定ページも追加してくれ!

にゃテックにゃテック

おけまるだにゃ

ワードプレス(WordPress)テーマのSWELL(スウェル)には、トップページで人気記事や新着記事などをスライドさせる「記事スライダー」という機能があります。

SWELL|記事スライダー

出典:SWELL DEMO2

しかし、記事スライダーで表示させることができる記事は“投稿ページ”のみです。

その為、記事スライダーに固定ページで作成した記事を追加する方法についてまとめました。

なお、検証したSWELLの環境は以下の通りです。

ワードプレス環境

SWELLバージョン:2.13
WordPressバージョン:6.7.x
PHPバージョン:8.2.x
サーバー:エックスサーバー

※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます

記事スライダーに表示される記事に固定ページを追加する方法

SWELLの記事スライダーに表示される記事に固定ページを追加する方法についてです。

①ファイル「loop_by_slider.php」を作成する

記事スライダー機能に表示される記事を設定しているのが、親テーマにあるloop_by_slider.phpです。

なお、loop_by_slider.phpは、概ね下記の場所にあると思います。

/home/(あなたが契約した名前)/(ドメイン名)/public_html/wp-content/themes/swell/parts/post_list

本来は、このファイルをダウンロードして、そのファイルを編集する説明をしたかったのですが、編集箇所が多いこともあり、コード一式を公開することにしました。

その為、親テーマにあるloop_by_slider.phpをダウンロードする必要はありません。

loop_by_slider.phpをカスタマイズしたコード

<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/**
* 記事スライダーの投稿リスト出力テンプレート
*/
$query_args = $variable['query_args'] ?? [];
$thumb_sizes = $variable['thumb_sizes'] ?? '';

// スライダーに追加したい固定ページのIDを指定
$include_page_ids = [2, 7]; // 固定ページのIDをここに指定

// 'post_type' を 'post' のみに設定(固定ページは別途追加)
$query_args['post_type'] = 'post';

// 'post_status' を 'publish' に設定
$query_args['post_status'] = 'publish';

// WP_Query で投稿を取得
$the_query = new WP_Query( $query_args );

// 指定した固定ページのみ取得
$additional_pages = get_posts([
'post_type' => 'page',
'post_status' => 'publish',
'post__in' => $include_page_ids,
'orderby' => 'post__in',
'numberposts' => count($include_page_ids),
]);

// 既存の投稿リストと固定ページを統合
$merged_posts = array_merge( $the_query->posts, $additional_pages );

// 表示設定
$show_date = SWELL_Theme::get_setting( 'ps_show_date' );
$show_modified = SWELL_Theme::get_setting( 'ps_show_modified' );
$show_author = SWELL_Theme::get_setting( 'ps_show_author' );
$cat_pos = SWELL_Theme::get_setting( 'pickup_cat_pos' );

// 表示枚数
$ps_num_sp = SWELL_Theme::get_setting( 'ps_num_sp' );

?>
<ul class="p-postSlider__postList p-postList swiper-wrapper">
<?php
$ct = 0;
foreach ( $merged_posts as $post_data ) :
$ct++;
$the_id = $post_data->ID;
$the_title = get_the_title( $the_id );
$post_date = date( 'Y年m月d日', strtotime( $post_data->post_date ) ); // 公開日
$post_modified = date( 'Y年m月d日', strtotime( $post_data->post_modified ) ); // 更新日
if ( mb_strwidth( $the_title, 'UTF-8' ) > 120 ) :
$the_title = mb_strimwidth( $the_title, 0, 120, '...', 'UTF-8' );
endif;
?>
<li class="p-postList__item swiper-slide">
<a href="<?php echo get_permalink( $the_id ); ?>" class="p-postList__link">
<?php
SWELL_Theme::get_parts(
'parts/post_list/item/thumb',
[
'post_id' => $the_id,
'cat_pos' => $cat_pos,
'size' => 'large',
'sizes' => $thumb_sizes,
'decoding' => 'async',
'lazy_type' => $ct > $ps_num_sp ? SWELL_Theme::$lazy_type : 'none',
]
);
?>
<div class="p-postList__body">
<h2 class="p-postList__title">
<?= wp_kses( $the_title, SWELL_Theme::$allowed_text_html ) ?>
</h2>
<div class="p-postList__meta">
<?php
// 日付表示
if ( $show_date ) :
echo '<span class="p-postList__date">公開日: ' . esc_html( $post_date ) . '</span>';
endif;
if ( $show_modified ) :
echo '<span class="p-postList__modified">更新日: ' . esc_html( $post_modified ) . '</span>';
endif;

if ( 'on_title' === $cat_pos ) :
SWELL_Theme::pluggable_parts( 'post_list_category', [
'post_id' => $the_id,
] );
endif;

if ( $show_author ) :
SWELL_Theme::pluggable_parts( 'post_list_author', [
'author_id' => $post_data->post_author,
] );
endif;
?>
</div>
</div>
</a>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>

この内容をコピーして、テキストに貼り付けて、loop_by_slider.phpという名称で保存します。

※ファイルの文字コードは、UTF-8(BOMなし)にしてください

※loop_by_slider.php以外のファイル名にしないでください。

②作成したloop_by_slider.phpを編集する

今、作成したloop_by_slider.phpを編集します。

編集箇所は、下記の1箇所です。

// スライダーに追加したい固定ページのIDを指定
$include_page_ids = [2, 7]; // 固定ページのIDをここに指定(例: 2)

固定ページは、“問い合わせフォーム”や“プライバシーポリシー”などを作成する事もあるので、この箇所で記事スライダーに含みたい固定ページを指定します。

例えば、 固定ページのIDが、10、20、30、40の記事を含めたいのであれば、下記のように記載します。

$include_page_ids = [10, 20, 30, 40]; // 固定ページのIDをここに指定(例: 2)

ちなみに、このページIDは、固定ページ一覧で確認する事ができます。

SWELL|固定ページ一覧

なお、IDを記載する数値は、必ず半角にしてください。

③子テーマ内にpartsフォルダ、post_listフォルダを作成

FTPソフトを使用して、子テーマ内に「partsフォルダ」を作成します。

作成方法は使用するFTPソフトによって違うと思いますが、概ね右クリックして「新規 > ディレクトリ」で作成できると思います。

子テーマ内にpartsフォルダを作成する

さらに続いて、作成したpartsフォルダ内に「post_listフォルダ」を新規作成します。

WinSCP|post_listフォルダの作成

WinSCPのダウンロード方法・使い方について

④編集したloop_by_slider.phpを子テーマのpost_listフォルダ内にアップロード

編集したloop_by_slider.phpを、前項で作成したpost_listフォルダ内にアップロードします。

WinSCP|loop_by_slider.phpを子テーマにアップロード

これで、記事スライダーに指定した固定ページが表示されているはずです。

もし、デザインが崩れるなどの不具合があった場合は、子テーマにアップロードしたloop_by_slider.phpを削除すれば元に戻ります。

何故なら、親テーマには一切変更を加えてないからです。

補足:swell_pickup_post_argsフックについて

SWELLには、テーマ独自のフィルターフックが用意されています。

swell_pickup_post_argsはその1つで、これを利用して、記事スライダーに表示される投稿の条件を動的に変更することができます。

フィルターフックとは?

WordPressのフィルターフックは、データを変更・加工するためのもので、add_filter() を使って特定の関数を登録し、適用される値を変更できます。

なお、下記のように、swell_pickup_post_argsを使って、固定ページ+投稿ページの記事をスライダーに表示させることができます。

function add_fixed_pages_slider( $query_args ) {
// 投稿 + 固定ページの両方を取得
$query_args['post_type'] = ['post', 'page'];

// 指定した投稿と固定ページのIDをセット
$query_args['post__in'] = [12, 7]; // 投稿ID 12 + 固定ページID 7 をスライダーに表示

// 指定した投稿・固定ページを優先表示
$query_args['orderby'] = 'post__in';

return $query_args;
}
add_filter( 'swell_pickup_post_args', 'add_fixed_pages_slider' );

上記のコードをfunction.phpに記載することで、指定した記事をスライダーに表示させることができます。

しかし、自分の力量では、「指定した固定ページ」+「デフォルトで設定されている投稿ページ」のフィルターフックを作成することはできませんでした。

つまり、上記のコード例だと、投稿ページもすべてID指定する必要があります。

その為、loop_by_slider.phpを修正することで今回は対応してみました。

ご支援のお願い
この記事が役に立ったと感じたら・・・

Ny@Tech(にゃテック)

この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。

ご購入いただいた商品の金額の一部が私に入り、より多くの有益な記事を作るための励みになります。

※商品は、ご自身の好きなものをご購入ください