ヘッダー画像をスライドで複数枚の画像に



  • ヘッダー画像を複数枚のスライド式にカスタマイズしたいのですが、やり方がわかりません。
    ご教示いただけますでしょうか。
    よろしくお願いいたします。


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • 横から失礼します。
    swiper というjs を使う方法しかないかと思います。
    もしくは、ウジット。
    表示したいページに以下を足します。```
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
    <link rel="stylesheet" href=https://unpkg.com/swiper/swiper-bundle.css>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script>
    var swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    spaceBetween: 300,
    loop: true,
    centeredSlides: true,
    pagination: '.swiper-pagination',
    direction: 'horizontal',
    autoplay: true,

    autoplayDisableOnInteraction: false,
    disableOnInteraction: false,
    });
    </script>

    <script>の中が スライダーの動きを決めています。horizontalは横スクロールタグ。違うタグで 縦も行けます。

    ワードプレスの このテーマだと管理画面に、ないのでfunction.phpに
    関数を作ります。

           function slider() {
              ?> 
           <div class="mainvisual">
            
                      <div class="swiper-container">
            
                      <div class="swiper-wrapper"> class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
            <img src="画像のURL" width="640" height="360" class="alignnone size-large wp-image-687" />
             </div><!-- 各スライドswiper-slide -->
    
            <div class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
            <img src="画像のURL" alt="" width="640" height="480" class="alignnone size-large wp-image-208" />
            </div><!-- 各スライドswiper-slide -->
    
    
            <div class="swiper-slide" data-swiper-autoplay="5000" style="height:925px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
             <img src="画像のURL" alt="" width="640" height="853" class="alignnone size-large wp-image-86" />
             </div><!-- 各スライドswiper-slide -->
    
            <div class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
            <img src="画像のURL" alt="画像" width="1000" height="581" class="alignnone size-full wp-image-568" />
            </div><!-- 各スライドswiper-slide -->
            <div class="swiper-slide" data-swiper-autoplay="5000" style="height:525px;background-color:rgba(255,255,255,0.8); background-blend-mode:lighten;">
            <img src="画像のURL" alt="画像" width="660" height="370" class="alignnone size-full wp-image-700" />
            </div><!-- 各スライドswiper-slide -->
    
          </div><!-- swiper-wrapper -->
          <div class="swiper-pagination"></div>
          </div><!-- swiper-container -->
          </div><!--mainvisual-->
    
          <?php
          }?>
    

    このコードだと5枚の画像がながれます。

    header-image.phpというファイルの2行目から21行までを

    削除して。

    作成した関数 ここでは<?php slider();?> をいれます。

    保存。これで1応は5枚横に動くはずです。

    cssは 
    https://web改善事例.com/js-swiper-sample/
    を参考に作ってください。

    使いかってよく管理画面に入力欄を作る場合は、
    function.phpに
    add_menu_page() で作成します。
    参考:https://jajaaan.co.jp/wordpress/wordpress-admin-page/

    get_include_onece ()
    で 作ったファイルを呼び出してあげます。

    画像のURLのところを カスタムフィールド で作成してあげると、管理しやすくなります。

    どっちにしろ 大改造になります。

    ウジットでやれればいいですが、互換性とかいろいろあるかと思います。
    ショートコードを php に書く方法で、書く場所は
    header-image.phpというファイルの2行目から21行の
    元のコードを消して 書く事になります。

    そんな感じです。
    やり切れないかも知れませんが、 頑張ってみてください。

    ”運営に頼むという裏技もあるかと思います。”


 

});