リンク先　動的表示イメージページ

●遷移元（一覧ページ）

リンク元の一覧からは、リンクにパラメータ（下記画像参照）を設定

●遷移先（動的表示ページ）

ショートコードのようなユニークなコード
（pdf-link、file-linkなど）を準備し、カスタムhtmlに記述。

↓
それをページ表示時にｊｓで置き換える・・・という処理をしています。

---

↑こんな感じ

---

一覧へ戻る　←一覧に戻ってやり直す場合ここをクリックして戻ってください

●swellを使う想定です

swellを使うのであれば、対象ページの下部js部分に記述でもよい・・・と思う
（別ファイル化して参照する場合は、それに合わせてご調整を・・・）

以下、実際のコードです・・・

document.addEventListener("DOMContentLoaded", () => {
    // 現在のURLのクエリパラメータを取得
    const params = new URLSearchParams(window.location.search);

    // "file" パラメータを取得
    const fileParam = params.get("file");

    if (fileParam) {
        // ページ全体のHTMLを取得
        let bodyHTML = document.body.innerHTML;

        // iframeを使用したPDF表示用HTML (枠線追加)
        const pdfViewerHTML = `
            <iframe
                src="/wp-content/uploads/2025/03/${fileParam}.pdf#navpanes=0"
                width="100%"
                height="600px"
                frameborder="1"
                style="border: 1px solid #000;"
            ></iframe>
        `;

        // 各ショートコードをHTMLコードに置換
        const updatedHTML = bodyHTML
            .replace(/\[pdf-link\]/g, pdfViewerHTML)
            .replace(
                /\[file-link\]/g,
                // ダウンロードウィンドウを開くためにdownload属性を追加
                `<a href="/wp-content/uploads/2025/03/${fileParam}.pdf" target="_blank" rel="noopener noreferrer" download>PDFをダウンロード</a>`
            );

        // ページのHTMLを更新
        document.body.innerHTML = updatedHTML;
    } else {
        console.warn("クエリパラメータ 'file' が指定されていません。");
    }
});

end