WordPressでのフォトギャラリー実装についての質問です。

前提・実現したいこと

下記の条件のフォトギャラリー機能を実装したいのですが、自分のスキル不足でどのようにしてよいか検討がつきません。
些細なことでもいいのでお力添えいただけますと幸いです。

実装内容

・複数枚の画像のフォトギャラリー記事への実装
・フォトスライダーのようなものをイメージ
・読者が写真を変えるごとにページの読み込みが行われる。（広告を複数回表示させるため）

参考サイト

https://www.soccerdigestweb.com/topics_detail9/id=71318&repeatCnt=1

上記の記事ページのような実装を行いたいです。
心当たりのある方、ぜひご助言いただ期待です。

行動規範の内容に同意します

回答2件

ベストアンサー

一例です。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        body {
10            text-align: center;
11        }
12
13        button {
14            margin:40px;
15        }
16
17        #mainImg {
18            display: block;
19            margin: 0 auto 30px;
20            cursor: pointer;
21        }
22
23        .tmbWrap {
24            width: 600px;
25            font-size:0;
26            margin: 0 auto;
27        }
28
29        .tmb {
30            display: inline-block;
31            width: 138px;
32            height:100px;
33            margin-bottom: 16px;
34            cursor: pointer;
35            box-sizing: border-box;
36        }
37
38        .addMargin {
39            margin-right: 16px;
40        }
41
42    </style>
43</head>
44
45<body>
46    <button id="prevBtn" disabled>←</button>
47    <span><span id="changeNum">1</span>/8</span>
48    <button id="nextBtn">→</button>
49    <img id="mainImg" src="https://dummyimage.com/600x400/0009ff/fff&text=1" alt="">
50    <div class="tmbWrap">
51        <a class="link"><img class="tmb addMargin" src="https://dummyimage.com/138x100/0009ff/fff&text=1" alt=""></a>
52        <a class="link"><img class="tmb addMargin" src="https://dummyimage.com/138x100/0009ff/fff&text=2" alt=""></a>
53        <a class="link"><img class="tmb addMargin" src="https://dummyimage.com/138x100/0009ff/fff&text=3" alt=""></a>
54        <a class="link"><img class="tmb" src="https://dummyimage.com/138x100/0009ff/fff&text=4" alt=""></a>
55        <a class="link"><img class="tmb addMargin" src="https://dummyimage.com/138x100/0009ff/fff&text=5" alt=""></a>
56        <a class="link"><img class="tmb addMargin" src="https://dummyimage.com/138x100/0009ff/fff&text=6" alt=""></a>
57        <a class="link"><img class="tmb addMargin" src="https://dummyimage.com/138x100/0009ff/fff&text=7" alt=""></a>
58        <a class="link"><img class="tmb" src="https://dummyimage.com/138x100/0009ff/fff&text=8" alt=""></a>
59    </div>
60    <script>
61        const mainImg = document.getElementById("mainImg");
62        const link = document.getElementsByClassName("link");
63
64        for (let i = 0; i < link.length; i++) {
65            const imgNum = i + 1
66            const url = location.href.split("?")[0];
67            link[i].setAttribute('href',  '' + url + '?img=' + imgNum);
68        }
69
70        const changeNum = document.getElementById("changeNum");
71        const prevBtn = document.getElementById("prevBtn");
72        const nextBtn = document.getElementById("nextBtn");
73
74        window.onload = () => {
75        if(location.href.split("?")[1]) {
76            const imgNum = location.href.split("?")[1].replace("img=","");
77            changeNum.innerText = imgNum;
78            mainImg.setAttribute('src', 'https://dummyimage.com/600x400/0009ff/fff&text=' + imgNum);
79            if(imgNum > 1) {
80                prevBtn.disabled = false;
81            }
82            if (imgNum == link.length) {
83                nextBtn.disabled = true;
84            }
85        };
86        }
87
88        nextBtn.addEventListener("click", () => {
89            const btnNum = changeNum.innerText;
90            link[btnNum].click();
91        });
92
93        prevBtn.addEventListener("click", () => {
94            const btnNum = changeNum.innerText;
95            link[btnNum - 2].click();
96        });
97
98    </script>
99</body>
100
101</html>

投稿2021/07/11 21:59

Jon_do

総合スコア1373

rikiya11

2021/07/12 08:15

ありがとうございます。参考にして少し改良を加えて、案件にマッチさせます！ご丁寧にありがとうございました。

行動規範の内容に同意します

WordPressは数多のテンプレートやプラグインがありますので、必要な条件に似合ったものを自分で探すしかないと思います。国内だけではなく海外のテーマやプラグインも漁った方が良いでしょう。スキル不足と言っても探すことくらいはできると思いますので、まずは時間をかけて探すことからだと思います。Google翻訳などを駆使すれば、時間はかかるかもしれませんが見つかる可能性はあります。

完全に条件に一致しなくても近いのがあれば、それを元にカスタマイズするなどして対応すればいいと思います。その時にはどうしてもPHPやHTML、CSS、JavaScript等のスキルが必要になるので、その時は覚悟を決めてスキル取得をめざすか、妥協するかになると思います。

投稿2021/07/11 18:04

AbeTakashi

総合スコア4594

rikiya11

2021/07/11 19:17

長文で回答いただきありがとうございます。日本語で見つかるものは試してみたのですが、海外のプラグインは頭にありませんでした。海外プラグインに目を向けて探してみようと思います。

AbeTakashi

2021/07/12 01:10 編集

あとは有料のプラグインです。これを解禁すると国内のテーマやプラグインにもかなり良いものがありますし、海外のテーマ・プラグイン探しはさらに幅が広がります。有料と聞くと尻込みするかもしれませんが、広告収入がある人気ブログはかなりの割合で有料テーマやプラグインを使っていると思います。一度だけ払えば終わりのものも多いですし、無料という固定観念があるなら、それを取り払って考えるのもありだとは思います。時は金なりで、時間を金で買うことは今は普通です。広告付けるのであればすぐに取り返せる可能性もありますし。

行動規範の内容に同意します

あなたの回答