ワードプレスで投稿した写真をクリックすると拡大表示させる方法

WordPress

WordPressで作成した投稿ページの画像をクリックした際に、その画像が拡大表示されるようにする超簡単な方法を紹介します。

今回の方法では、JavaScriptやJQueryなどは一切使わずWordPressの標準機能のみで可能な方法なので、小難しい知識が無くても今すぐ出来るようになりますので、是非試してみて下さい。

画像の拡大表示

今回紹介する画像の拡大表示は、画像をクリックするとメディアページを表示して実寸サイズの画像データを表示するといった方法です。

仕組みは、ただメディアページのリンクを付けてそのページを見せるだけと非常に単純で、作業も超簡単です。

下記の写真をクリックすると実際に画像が拡大表示がされます。

(※投稿ページで実寸大の画像を表示させている場合は同じ大きさのものが表示されます。)

メディアページへのリンクの付け方

次にメディアページのリンクの付け方を紹介します。(エディタはGutenbergを使用します。)

  1. まずは投稿ブロックに画像を用意します。
  2. 画像ブロックの上にあるタブメニューからリンクマークをクリックしてメディアファイルを選択します。

これだけで完了です。

リンクの挿入については下記へ


以上が「ワードプレスで投稿した写真をクリックすると拡大表示させる方法」でした。

画像ページに飛ばさずに画像を拡大したい場合は、JQueryでギャラリーの作成やライトボックスの擬似的なページの作成などでやると良いと思います。

この辺のやり方も今後追加していきます。

今回の方法は、あくまで超簡単に画像を拡大表示する方法でした。

2020年3月13日WordPressGutenberg,WEB,WP

Posted by KT