横から失礼します。
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というファイルの２行目から21行までを
削除して。
作成した関数 ここでは<?php slider();?> をいれます。
保存。これで１応は５枚横に動くはずです。
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というファイルの２行目から21行の
元のコードを消して 書く事になります。
そんな感じです。
やり切れないかも知れませんが、 頑張ってみてください。
”運営に頼むという裏技もあるかと思います。”