It's my pc life…

ふと気がつけばいつの間にやら PC と出会い20年超の、初級者以上中級者未満の徒然 PC 生活記録

【WordPress】個別投稿内アイキャッチ画像に任意のリンクを張る方法

  1. WebDesign ・ Coding

 WordPress のアイキャッチ画像を普通に出力した場合、テンプレートファイル(index.php 等)への記述で「そのアイキャッチ画像を設定した投稿記事へのリンク」等の一括指定はできるが、個別投稿記事ごとに別々の任意のリンクを設定することはできない。

 そこで今回はカスタムテンプレートを利用して、個別投稿記事ごとにそれぞれ別々の任意のリンクをアイキャッチ画像に設定してみた。

まずは通常のアイキャッチ画像の出力方法からおさらい

 通常 WordPress でアイキャッチ画像を利用できるようにするには、functions.php に

 上記のように記述して、アイキャッチ画像機能を有効化する(2行目はデフォルトのアイキャッチ画像サイズの指定で、数値は縦/横の画像サイズの指定、true は元画像の切り抜き設定、false は縦横比維持での縮小設定)。

 その後 index.php 等のテンプレートの任意の箇所に、

 上記の記述を追加すれば、その箇所にアイキャッチ画像が表示される(画像サイズID を指定すればそのIDのサイズの画像が表示され、指定しなければデフォルトのサイズで表示される)

 画像サイズID の種類は、

  • thumbnail
  • medium
  • large
  • full

 上記の4項目。各サイズは「設定」>「メディア」から変更可能。

 このままだと出力されるアイキャッチ画像には何のリンクも設定されていないが、例えばトップページ(index.php)等の記事一覧に表示されているアイキャッチ画像に、そのアイキャッチ画像が設定されている個別投稿記事ページへのリンクを追加したい場合、

 上記の用に記述すれば、<a href=”<?php the_permalink(); ?> がそのアイキャッチが設定されている個別投稿記事への URL を自動取得して、各個別投稿記事へのリンクを取得して出力できる。

 この方法で個別投稿記事ページ(single.php)内で表示されているアイキャッチ画像にもリンクを設定できるが、この方法だと個別投稿記事ごとに異なるリンク(例えば商品紹介のため、メーカーの商品紹介ページへのリンク等)は設定できない。

 そのため今回取ったのは、カスタムフィールドに入力した URL を取得し、それをアイキャッチ画像のリンクとして出力する方法。
 この方法なら個別投稿記事ごとに好きな任意の URL を設定し、それをそのページのアイキャッチ画像のリンクとして利用することができる。

カスタムフィールドへの URL 記述と、その値の取得・出力のための記述

 まずはカスタムフィールドに任意の「名前」を指定し、「値」に出力したい URL を記述する

160327-01a

 ここで指定した「名前」がカスタムフィールドの値を取得するテンプレートタグのパラメータに必要となる。「値」には取得したい URL を記述するが、リンクの終了タグ(</a>)は入力しないでおく(終了タグは single.php 内に直接記述するため)。

 次に個別投稿記事ページ用のテンプレートの single.php を開き、アイキャッチ画像出力用タグの前後に以下の記述を追加する。

 <?php echo get_post_meta($post->ID, ‘アイキャッチURL’, true); ?> がカスタムフィールドに入力した値を取得・出力するテンプレートタグになる。使用するパラメータは以下の通り。

  • $post_id : 取得対象の投稿IDを指定。ここでは $post->ID で現在表示中の投稿ID を指定
  • $key : データ取得対象となるカスタムフィールドの名前。ここでは「アイキャッチURL」
  • $single :カスタムフィールドの「値」の出力方法。falseで配列出力、true で文字列出力

 上記タグを用いることで、そのアイキャッチ画像が設定されている個別投稿記事のカスタムフィールド「アイキャッチURL」に入力した「値(URL)」を取得し、HTML 上に出力する。

 ただカスタムフィールドの「値」に入力した URL は終了タグ(</a>)は未入力なので、終了タグ(</a>)は single.php の <?php the_post_thumbnail(); ?> の直後に記述しておく。
 こうすることでアイキャッチ画像出力タグ <?php the_post_thumbnail(); ?> はカスタムフィールドの値に入力した URL のリンクタグで囲まれて、その URL へのリンクが出力されるようになる。

WordPress 初心者でも理解しやすく、かつコピペで可能な方法を模索して

 ここで紹介した他にも、アイキャッチ画像に任意のリンクを出力する方法は多くあるが、

  • エスケープ処理やら何やらと、初心者が理解しにくい手段での実現は極力避ける
  • 基本的にコピー&ペーストだけで可能な方法
  • カスタムフィールドに URL 記載時はリンク出力し、未記載時は出力しないようにする

 この条件下での方法を模索していくと、最終的にこの方法に落ち着いた。

 これならばカスタムフィールドに URL 記載時のみ、アイキャッチ画像にリンクが張られるようになる。
 また非リンク時に余計なゴミ(不要なタグ記述)にならないかと懸念していた single.php へのリンク終了タグ </a> の直書きも、全ての環境で確認したわけではないが取りあえず URL 未記載時には HTML 上には出ないようなので、一応は綺麗に収まっているかと。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント更新情報

トラックバック

トラックバックURL: http://itsmy.first-pclife.com/web-wordpress/webdesign-coding/post-313/trackback