「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

固定ページや投稿ページの画像をポップアップ表示させる方法

Q.固定ページや投稿ページの画像をポップアップで表示させたい

A.下記の手順でカスタマイズください。

1.下記箇所を変更します。
編集するファイル:header.php
編集する箇所:

<?php if(is_front_page() || is_post_type_archive('gallery') || is_singular('gallery')||is_post_type_archive('menu') || is_singular('menu') || is_tax('menu_category')) { ?>

  ↓

<?php if(is_front_page() || is_post_type_archive('gallery') || is_page() || is_singular('gallery')||is_post_type_archive('menu') || is_singular('menu') || is_tax('menu_category')) { ?>

※固定ページで使用する場合は「is_page()」を追加します。ブログ(投稿記事)で使用する場合は「is_post()」を追加。

2.固定ページの編集画面で画像を挿入する手順

  • 「タイトル」には表示したいタイトルを入力する
  • 「リンク先」で「メディアファイル」を選択(このリンク先がポップアップする画像となる)
  • 「固定ページに挿入」ボタンを押し、ページに画像を挿入する
  • 挿入した画像についているaタグに「class=”lightbox”」というクラスを設定する。(※ビジュアルエディタを使用している場合はテキストエディタに切り替える)

例) 

<a class="lightbox" href="http://●●●●.jp/sweety_demo/wp-content/uploads/2015/11/251.jpg"><img src="http://●●●●.jp/sweety_demo/wp-content/uploads/2015/11/251-150x150.jpg" alt="25" width="150" height="150" class="alignnone size-thumbnail wp-image-376" /></a>

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事