- このトピックには4件の返信、3人の参加者があり、最後に
により2年、 5ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】 バージョン: 17.0.5
【お使いの Snow Monkey Blocks のバージョン】 16.0.1
【お使いの Snow Monkey Editor のバージョン】 8.0.1
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】 https://world-f.net/### 実現したいこと
swiperを導入していますが、最新の投稿を出力するようにしたいです。
### 発生している問題
上記のURLを読み込み、画像をスライドさせることができるようになりましたが、
最新の投稿を呼び出してスライドさせることができず困っております。
### 試したこと
・スライダーのカスタマイズ
・https://web-log.site/snowmonkey-slider/
上記の記事を参考に導入してみましたが、ページの一番上にしか表示できず、
任意の場所への呼び出しがわからない
・https://ippei-kusakari.com/web/snow-monkey/swiper-lazy-blocks/
こちらの記事を参考にしてトライするも、
任意の画像出力しかできず最新の投稿が表示できない
この件に関して回答をお示しいただけると非常に幸いです、
必要な情報があればお渡しいたしますので何卒よろしくお願い致します。
いいねをした人: 居ません最新の投稿を呼び出してスライドさせることができず困っております。
参考になるかわかりませんが、私がもし“最新の投稿”をSwiperを使ってスライダーにする場合は？として考えてみました。
my-snow-monkey.phpに必要なもの（SwiperのCSS、JSなど）をエンキュー（wp_enqueue_scripts）する- 最新の投稿をSwiperに最適になるように作成しつつ、ショートコードで呼び出せるようにする（
add_shortcode） - 表示させたい場所にショートコードブロックを置いて表示
こんな感じで実装すると思います。
1.のエンキューは@藤田さんが提示されたブログ記事に書かれています
2.はこちらの記事がわかりやすいと思います。
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>いいねをした人:
Snow Monkey Blocks の「最近の投稿」ブロックに、「カルーセル（リッチメディア）」というレイアウトがあり、そのレイアウトにすると最近の投稿をスライドさせる形で表示できます。Swiper にこだわりがあるのでなければ最近の投稿をスライドさせるのは多分この方法が一番簡単です。
どうしても Swiper を使ってスライドさせないといけないということであれば、GONSY さんが書かれているようにショートコードをつくる形が簡単かなと思います。
いいねをした人: 居ません
- トピック「swiperを導入後、最新の投稿を出力できない」には新しい返信をつけることはできません。