[WordPress]アイキャッチ画像設定

アイキャッチ画像を表示する設定

テーマにはアイキャッチ画像がデフォルトでは設定されていないので、自分で設定する必要がある。

1. functions.phpに設定を記載

うまくいった例

functions.php

<?php
add_action('init', function(){
   // 編集画面で表示された
   // 投稿タイプ（post type）が 投稿(post)と固定ページ(page)でアイキャッチ画像機能を有効にする、という宣言
   add_theme_support('post-thumbnails', ['post', 'page']);
});

*以下の記載では、編集画面でアイキャッチ画像設定項目が表示されなかったので、上記の記述に変更しました

うまくいかなかった例

functions.php

<?php
add_action('init', function(){
   // アイキャッチ画像が表示されなかった
   add_theme_support('post_thumbnails');
});

投稿タイプとは

① WordPressに最初からある「投稿タイプ（Post Type）」

これを ビルトイン投稿タイプ と言います。

投稿タイプ	スラッグ	役割
投稿	post	ブログ記事・お知らせ
固定ページ	page	会社概要・お問い合わせ
添付ファイル	attachment	画像・PDFなど
メニュー	nav_menu_item	ナビゲーション用
リビジョン	revision	下書き・履歴
カスタマイズ変更	custom_css, customize_changeset	カスタマイザ内部用

※ 管理画面で編集するのは通常 post と page だけです。

② よく使う投稿タイプは「カスタム投稿タイプ」

WordPressの特徴。これらは 自分で定義 します。

例：

お知らせ

実績

商品

イベント

スタッフ

2. ダッシュボードから画像を登録

各記事やメディアから画像を登録
*設定　→ メディア　から各画像サイズを設定できる

thumbnail
medium
large
full(アップロードした画像サイズ)

3. the_post_thumbnail()をsingle.phpなどに記載

<?php the_post_thumbnail(array(32,32), array('alt' => 'アイキャッチ画像')); ?>

リファレンス
https://developer.wordpress.org/reference/functions/the_post_thumbnail/

the_post_thumbnail( string|int[] $size = 'post-thumbnail', string|array $attr = '' )

Parameters optional

アイキャッチ画像URLを取得する方法（background-imageなどに使用）

1. functions.phpに設定を記載(上記と同じ)
2. ダッシュボードから画像を登録(上記と同じ)
3. コードを記載

<?php if (have_posts()): ?>
    <?php while (have_posts()): the_post(); ?>
      <!-- Page Header -->
      <?php
        if (has_post_thumbnail()):
          $id = get_post_thumbnail_id();
          $img = wp_get_attachment_image_src($id,'large');
        else:
          $img = wp_get_attachment_image_src(25);
        endif;
      ?>
      <header class="masthead" style="background-image: url('<?php echo $img[0]; ?>')">
        <!-- 中略-->
      </header>

      <!-- Post Content -->
      <article>
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
              <?php the_post_thumbnail(array(32,32), array('alt' => 'アイキャッチ画像')); ?>
            </div>
          </div>
        </div>
      </article>

      <hr>

    <?php endwhile; ?>
  <?php endif; ?>