ギャラリーページを動的にする（WordPress化）

WordPress

ギャラリーページを作成後に更新出来るようにするにはWordPress化する必要があります。

今回の仕様

  • wordpress側から画像を追加出来る
  • サムネイルをクリックしたらモーダルで拡大画像が表示
  • モーダルにはFancyBoxを使用
  • 投稿記事のタイトル、日付、アイキャッチ画像、タグの4つを表示

高機能モーダルウィンドウ「Fancybox」のCDN

今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。
fancybox CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />


fancybox JS

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

リファレンス
obu.edu



 

静的コード

index.html

<header>
<h1>ギャラリーページをWordPress化</h1>
</header>

<div class="wrapper">
<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
</a>
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</div><!-- /.box -->


<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</a>
</div><!-- /.box -->

<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</a>
</div><!-- /.box -->


<div class="box">
<a href="https://placehold.jp/800x600.png" data-fancybox="images">
<h2>タイトル</h2>
<p class="date">2024/11/12</p>
<div class="img-box">
<img src="https://placehold.jp/800x600.png" alt="">
</div><!-- /.img-box -->
<div class="tag_list"><a href="#">タグ1</a><a href="#">タグ2</a></div>
</a>
</div><!-- /.box -->

</div><!-- /.wrapper -->


style.css

body,a{
color: #222;
}
header{
background-color: #5e5a4d;
color: #FFF;
text-align: center;
padding: 30px 0;
margin-bottom: 100px;
}
.wrapper{
width: 94%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(340px,2fr));
gap: 80px 20px;
}
.box{
border: 1px solid	#ddd;
padding: 12px;
transition: 0.2s;
&:hover{
box-shadow: 0 0 10px #ccc;
}
>a{
display: block;
color: #000;
>h2{
font-size: 22px;
}
>.date{
text-align: right;
margin: 5px 0;
}
}
>.tag_list>a{
margin-right:5px;
&:hover{
text-decoration: underline;
}
}
}