📷

WordPressでPinterest風のいい感じなギャラリーを作る

に公開
WordPress
tech

WordPressサイト制作の案件で記事の中に写真のギャラリーを作りたいというリクエストがあり、ブロックをいじってみたらとても簡単に作ることができたのでメモ。
プラグイン無し・2ステップでできます。
※プラグインの代わりにテーマ独自ブロックを使います

やりたいこと

  • 複数の画像をPinterestのように入り組んだレイアウトで並べる
    • クライアントが自由に画像を追加・変更できるようにする
    • レスポンシブ対応
  • 画像をクリックすると拡大表示される

制作環境

  • WordPressバージョン：6.8.3
  • 使用テーマ：unitone 24.2.0

手順

  1. unitoneのメイソンリーブロックで画像を挿入
  2. 各画像にWordPress標準機能のクリックで拡大を設定
    • 最初に1つの画像に設定して、それを大量に複製→画像置換するのがスムーズかも

動作サンプル

参考にしたページ

調整したいこと（近日中にやってみる）

  • このレイアウトを採用する＝載せる写真が多いので、ローカルの写真を一気に選択して直接エディタにドラッグして追加する可能性あり
    • その場合デフォルトではクリックで拡大がオフになっているので、一つずつ設定するのはかなり面倒
    • メイソンリーブロック内の画像はデフォルトでクリックで拡大がオンになるようにしたい

Discussion