WordPressで中サイズ画像を取得しアイキャッチ画像を自動で投稿に表示する
公開日:
:
WordPress
WordPress でブログやサイトをやっている人なら、冒頭にアイキャッチ画像を入れる人も多いと思います。今このブログ記事でも上のような画像の事です。
通常 WordPress ではまず投稿のアイキャッチ画像の設定画面で画像を登録し、投稿にも手動で img タグで画像を挿入するという方法が取られていると思います。それが、自動で投稿にアイキャッチ画像が表示されるようにすればとても便利なんです。わざわざ手動でアイキャッチ画像を挿入しなくても良くなるので一手間減って時短にもなります。
しかし既に始めてしまっているブログでやるとおかしな事になるので、新規に作る WordPress ブログで予めこのカスタマイズを組み込んでおくととても楽ちんです。
アイキャッチ画像を自動で表示するカスタマイズ
まず前準備として、WordPress 管理画面の設定からメディア設定を開いて、画像の中サイズを設定を変更しましょう。あなたのブログのコンテンツが入る部分の横幅のサイズを入力します。高さも同じ値で良いでしょう。
次に WordPress 管理画面の外観からお使いのテーマ編集を選び、個別投稿(single.php)を編集します。この部分はお使いのテーマによって若干異なります。
タイトルの下、メインコンテンツが入る div タグの上にアイキャッチ画像を表示する仕組みを入れます。
アイキャッチ画像を取得するには下記のように記述します。
<?php the_post_thumbnail(); ?>
しかし、これではサムネイルサイズの画像しか出力されません。ここでは先程メディア設定で設定した中サイズ画像を出力する必要があります。
<?php the_post_thumbnail('medium'); ?>
かっこの中に medium を加えると、中サイズ画像を出力してくれます。
おわりに
アイキャッチ画像を使うには予め宣言して有効化する操作が必要です。お使いのテーマによっては有効化されていて特別に設定は必要ありませんが、有効化されていない場合は別途設定が必要です。
有効化するには、テーマのための関数 function.php に以下のように追記します。
add_theme_support('post-thumbnails');
おすすめトピックス
関連記事
-
-
YARPPの関連記事サムネイルのアスペクト比(縦横比)がおかしい時の修正方法
YARPP(Yet Another Related Posts Plugin)は有名なプラグインなので WordPress でブログやサイトを運営している人なら目にした事もあるでしょう。関連記事を表示してページ回遊を促す […]
-
-
今何記事目?WordPressで公開記事数を表示する
WordPress で公開記事数を調べたければ管理画面(ダッシュボード)に行けばすぐにわかっちゃうのですが、サイト上に表示したいという人もいるかもしれません。 ブログならそんなに記事数をわざわざ閲覧者にアピールする必要も […]
-
-
WordPressで全記事一覧と投稿日を一緒に出力する方法
WordPress を使う前は Movable Type や Serene Bach を使用しておりましたが、その時は対して苦労しなかった「全記事一覧と投稿日を一緒に出力する」事が WordPress では結構実現に手間 […]
-
-
WordPressでリンク元によってデザインを変える、phpでリンク先に変数を送る方法
ちょっと変わったケースの依頼で1つの WordPress に2つのサイトを共存させ、一部ページは2つのサイトで共通に使いたいというものがありました。ようするに1つの WordPress 管理画面で2つのサイトを管理したい […]
-
-
【WordPress】テーマ「Stinger3」のスマホページでCSSが効かない
WordPress のテーマで Stinger3 というものがあります。これが結構人気テーマで、このブログでも使わせて頂いています。 「必要な物は、揃っている。」というキャッチコピーの通り、主要プラグインに類する機能、ス […]
-
-
WordPressのサイト内検索で各記事に検索キーワードを設定する【プラグインなし】
WordPress の各記事に検索キーワードを設定する事はできないだろうか?とふと思いました。通販サイトなどでは商品説明とは別に検索キーワードが個別に設定できるものです。これが WordPress でできないだろうかと。 […]