皆さま引き続きコロナには気をつけてお過ごしください!

【WordPress】すべてのカスタム投稿でもアイキャッチ画像を使いたい!

アイキャッチ画像 WordPress

アイキャッチ画像というのは、

記事を開いたときに、最初に表示される、読者の興味を引き付けるための画像のことです。

 

WordPressデフォルトの投稿ページや固定ページの編集画面には、

アイキャッチ画像を入れるための部品が表示されていますが、

自分で追加したカスタム投稿には表示されません。

 

今回は、カスタム投稿にアイキャッチ画像を入れたいと思います。

 

スポンサーリンク

前提

使っているテーマによっては、アイキャッチ画像をサポートしていない場合がありますので、

設定前に確認してください。

 

スポンサーリンク

必要な編集作業

記事編集画面を変更する必要があるため、

functions.php を編集する必要があります。

 

スポンサーリンク

カスタム投稿画面にアイキャッチ画像を入れよう

早速、functions.phpを編集したいと思います。

必ずバックアップを取ってから編集してくださいね。

なお、ここでは、Cocoonを利用していることを前提に、
それぞれの追加方法をご説明します。

 

方法①

コード追加手順①

①外観>テーマエディターの順にクリックする。

②編集するテーマが「Cocoon Child」であることを確認する。

③テーマのための関数 (functions.php)をクリックする。

④以下コードを追加し、保存する。

※「カスタム投稿xのスラッグ名」部分を、アイキャッチ部品を表示したいカスタム投稿のスラッグ名に変更します。

register_post_type(
'カスタム投稿1のスラッグ名',
  array(
  // 'supports'に'thumbnail'を追記
  'supports' => array('title','editor','thumbnail')
  )
);
register_post_type(
'カスタム投稿2のスラッグ名',
  array(
  // 'supports'に'thumbnail'を追記
  'supports' => array('title','editor','thumbnail')
  )
);


//アイキャッチ画像
add_theme_support( 'post-thumbnails', array( 'post','カスタム投稿1のスラッグ名','カスタム投稿2のスラッグ名'));

 

※上記は2つのカスタム投稿にアイキャッチ部品を表示させる記述です。

更に追加したい場合は、以下をコピーして追加し、スラッグ名を変更してください。

register_post_type(
'カスタム投稿2のスラッグ名',
  array(
  // 'supports'に'thumbnail'を追記
  'supports' => array('title','editor','thumbnail')
  )
);

 

方法②

もう1つの方法は、

カスタム投稿を作成した際の関数の中に追加するものです。

 

コード追加手順②

①外観>テーマエディターの順にクリックする。

②編集するテーマが「Cocoon Child」であることを確認する。

③テーマのための関数 (functions.php)をクリックする。

④追加済みのregister_post_type関数に赤字部分を追加し、保存する。

※「カスタム投稿タイプx」部分は、アイキャッチ部品を表示したいカスタム投稿のスラッグ名です。

add_action( 'init', 'create_post_type' );
function create_post_type() {
  //カスタム投稿タイプ1(ここから)
  register_post_type(
    'カスタム投稿タイプ1のスラッグ名',
    array(
      'labels' => array(
      'name' => __( 'カスタム投稿タイプ1のスラッグ名' ),
      'singular_name' => __( 'カスタム投稿タイプ1のスラッグ名' )
    ),
    'public' => true,
    'menu_position' => 4,
    'supports' => array('title','editor','thumbnail')
    )
  );
  //カスタム投稿タイプ1(ここまで)


  //カスタム投稿タイプ2(ここから)
  register_post_type(
    'カスタム投稿タイプ2のスラッグ名',
    array(
      'labels' => array(
      'name' => __( 'カスタム投稿タイプ2のスラッグ名' ),
      'singular_name' => __( 'カスタム投稿タイプ2のスラッグ名' )
    ),
    'public' => true,
    'menu_position' =>5,
  'supports' => array('title','editor','thumbnail')
    )
  );
  //カスタム投稿タイプ2(ここまで)
}

 

スポンサーリンク

コードの意味を確認しよう

 

// カスタム投稿を定義します。
register_post_type(
'カスタム投稿1のスラッグ名',
  array(
  // 'supports'に'thumbnail'を追記
  // titleは記事のタイトル、editorは内容の編集です。
  'supports' => array('title','editor','thumbnail')
  )
);

 

スポンサーリンク

表示されるか確認しましょう

カスタム投稿のメニューから記事編集画面を表示すると、

右側に以下部品が表示されていると思います。

表示されていれば、設定は完了です。

アイキャッチ部品

 

表示されていない場合は、

画面上部の表示オプションを開きます。

アイキャッチ画像のチェックボックスがあり、

チェックを入れると、先ほどのアイキャッチ部品が表示されます。

表示オプション

 

スポンサーリンク

まとめ

無事アイキャッチが登録できるようになったでしょうか?

 

サイトのデザインにもよりますが、

アイキャッチがあると、やはり目を引きますよね。

タイトルとURLをコピーしました