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

0
いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #106333
    藤田侑也
    参加者
    2

    【お使いの 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/

    こちらの記事を参考にしてトライするも、

    任意の画像出力しかできず最新の投稿が表示できない

     

    この件に関して回答をお示しいただけると非常に幸いです、

    必要な情報があればお渡しいたしますので何卒よろしくお願い致します。

    0
    いいねをした人: 居ません
    #106340
    GONSY
    参加者
    602

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

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

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

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

    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>
    3
    いいねをした人:
    #106343
    キタジマ タカシ
    参加者
    1629

    Snow Monkey Blocks の「最近の投稿」ブロックに、「カルーセル(リッチメディア)」というレイアウトがあり、そのレイアウトにすると最近の投稿をスライドさせる形で表示できます。Swiper にこだわりがあるのでなければ最近の投稿をスライドさせるのは多分この方法が一番簡単です。

    どうしても Swiper を使ってスライドさせないといけないということであれば、GONSY さんが書かれているようにショートコードをつくる形が簡単かなと思います。

    0
    いいねをした人: 居ません
    #106344
    藤田侑也
    参加者
    2

    GONSY様

     

    返信いただきありがとうございます。

    記載いただいた内容でコードを記入したところ

    確かに最新の投稿を呼び出すことができました!

    ありがとうございます!

    0
    いいねをした人: 居ません
    #106345
    藤田侑也
    参加者
    2

    キタジマタカシ様

    ありがとうございます。

    swiperでのこだわりもなかったので、この方法は知らなかったです・・・

     

    ずっと悩んでた問題も解決できました。

    ありがとうございます!

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「swiperを導入後、最新の投稿を出力できない」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ