【WordPress】記事のアイキャッチ画像に画像のリンクを追加する

やりたいこと

記事のアイキャッチ画像に高画質な画像を使用している。

画像そのものも見てほしいので、アイキャッチ画像をクリックしたときに、別タブ(ウィンドウ)で画像を表示させたい。

手順

wordpressのテーマファイルを編集する。

サムネイル画像を表示している部分では、以下の関数が使われている。

<?php the_post_thumbnail(); ?>

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail

まずは、外観のテーマエディタから、ページを生成しているphpファイルを見つける。

テーマにより異なる可能性があるが、基本的には投稿ページはsingle.php、固定ページはpage.phpが生成している。

【WordPress】記事のアイキャッチ画像に画像のリンクを追加する - yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 - 【WordPress】記事のアイキャッチ画像に画像のリンクを追加する
テーマエディタ画面

Modern ThemesのPortfolioテーマの場合、single-work.phpにてカスタム投稿タイプのworkのページを生成している。

サムネイル画像出力部分を見つけたら、外側にコードを追加する。

<a href="<?php the_post_thumbnail_url('full'); ?>" target="_blank">
    {the_post_thumbnail()のコード部分}
</a>

サムネイル画像に対して、サムネイル画像のアンカータグを追加している形となる。

https://developer.wordpress.org/reference/functions/the_post_thumbnail_url/

Modern Themes Portfolioテーマの場合

https://modernthemes.net/wordpress-demo/portfolio/

single-work.phpの57行目あたりを以下に置き換える。

<a href="<?php the_post_thumbnail_url('full'); ?>" target="_blank">
    <?php the_post_thumbnail( 'full', array( 'class' => 'single-thumb' ) ); ?>
</a>

コメントを残す

メールアドレスが公開されることはありません。