swiperを導入後、最新の投稿を出力できない

最新の投稿を呼び出してスライドさせることができず困っております。

参考になるかわかりませんが、私がもし“最新の投稿”をSwiperを使ってスライダーにする場合は？として考えてみました。

1. my-snow-monkey.phpに必要なもの（SwiperのCSS、JSなど）をエンキュー（wp_enqueue_scripts）する
2. 最新の投稿をSwiperに最適になるように作成しつつ、ショートコードで呼び出せるようにする（add_shortcode）
3. 表示させたい場所にショートコードブロックを置いて表示

こんな感じで実装すると思います。

1.のエンキューは@藤田さんが提示されたブログ記事に書かれています

SnowMonkeyでリッチなスライダーを再現する方法【Swiper.js】

この記事では「SnowMonkey」で標準で準備されているスライダーではなく、「Swiper.js」を使用した独自でスライダーを実装する方法について解説しています。

web-log.site

2.はこちらの記事がわかりやすいと思います。

WordPress ショートコードを使った投稿一覧の表示方法 – by Takumi Hirashima

WordPress で本文中にショートコードを使って投稿一覧を表示する方法を紹介します。例えば、本文中に記事の紹介などを行いたいときに便利な方法です。

hirashimatakumi.com

3.は2.で作成したショートコードを【ショートコードブロック】で入れるだけです。

管理画面でスライダーは確認できませんが、この方法なら比較的簡単かと思います。
 
 
 
また別の方法として【クエリーループブロック】を使うと、以下のような構造のHTMLを出力してくれるので、これにSwiperのCSSとJSを当ててあげれば実装できそうです。

<div class="wp-block-query">
	<ul>
		<li>
			<figure>
				<a href="//記事URL">
					<img src="//アイキャッチ画像URL">
				</a>
			</figure>
		</li>
		<li>
			<figure>
				<a href="//記事URL">
					<img src="//アイキャッチ画像URL">
				</a>
			</figure>
		</li>
	</ul>
</div>

♥ 3

いいねをした人: