*

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');
  • Pocket

おすすめトピックス

関連記事

YARPPの関連記事サムネイルのアスペクト比(縦横比)がおかしい時の修正方法

YARPP(Yet Another Related Posts Plugin)は有名なプラグインなので WordPress でブログやサイトを運営している人なら目にした事もあるでしょう。関連記事を表示してページ回遊を促す […]

wordpress
今何記事目?WordPressで公開記事数を表示する

WordPress で公開記事数を調べたければ管理画面(ダッシュボード)に行けばすぐにわかっちゃうのですが、サイト上に表示したいという人もいるかもしれません。 ブログならそんなに記事数をわざわざ閲覧者にアピールする必要も […]

全記事一覧
WordPressで全記事一覧と投稿日を一緒に出力する方法

WordPress を使う前は Movable Type や Serene Bach を使用しておりましたが、その時は対して苦労しなかった「全記事一覧と投稿日を一緒に出力する」事が WordPress では結構実現に手間 […]

WordPressでリンク元によってデザインを変える、phpでリンク先に変数を送る方法

ちょっと変わったケースの依頼で1つの WordPress に2つのサイトを共存させ、一部ページは2つのサイトで共通に使いたいというものがありました。ようするに1つの WordPress 管理画面で2つのサイトを管理したい […]

wordpress
【WordPress】テーマ「Stinger3」のスマホページでCSSが効かない

WordPress のテーマで Stinger3 というものがあります。これが結構人気テーマで、このブログでも使わせて頂いています。 「必要な物は、揃っている。」というキャッチコピーの通り、主要プラグインに類する機能、ス […]

WordPressのサイト内検索で各記事に検索キーワードを設定する【プラグインなし】

WordPress の各記事に検索キーワードを設定する事はできないだろうか?とふと思いました。通販サイトなどでは商品説明とは別に検索キーワードが個別に設定できるものです。これが WordPress でできないだろうかと。 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
Illustratorでテキストをアウトライン化できない時に確認すること

Illustrator を使って印刷物などを作っている人ならテ

Gmailのエラー「Gmail requires one or more Google Play services that are not currently avaiable.」で開けない

あるいつもどおりの朝、スマートフォンで Gmail を開こうと

Amazonで自分の書いたレビューを一覧で確認する方法

世界的に最大級の通販サイト Amazon。私もよく使います。利

大垣カフェ「カフェ飯屋ピーナッツ」暖かく自然派なお食事が美味しいアットホームな場所でした

岐阜県大垣市の市民病院近くにオープンした「カフェ飯屋ピーナッツ

Illustratorで矢印に綺麗に境界線を付ける方法

Photoshop では矢印でも文字でも綺麗に境界線をつけるレ

→もっと見る