【2ステップ図解】アイキャッチ画像を自動で記事内に投稿する簡単な方法!

ブログやサイトの見栄えを印象づけるアイキャッチ画像。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-10-20-20-56

これだとかなり殺風景な印象に。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-10-20-21-37

ただアイキャッチ画像があれば、見栄えも良くなり、ブログの各記事から見てもらいやすくなります。

 

そんなブログのpv数に大きく関係するアイキャッチ画像ですが、ワードプレスではアイキャッチ画像を選択出来ますよね?

ただ問題なのは、記事内に自動で投稿されないと言う事。

 

画像があった方がブログを見る方としてもみやすいと言われています。

アイキャッチ画像として記事内に自動で投稿されたら、見る方も見やすいし、ぱっと華やかな印象になりますよね。

そんな自動記事内にアイキャッチ画像を投稿する方法をご紹介します。

 

アイキャッチ画像の投稿の仕方

 

まず普通に記事を投稿してみますね。

 

%e6%96%b0%e8%a6%8f%e6%8a%95%e7%a8%bf%e3%82%92%e8%bf%bd%e5%8a%a0__%e9%9f%b3%e7%97%b4%e6%94%b9%e5%96%84%ef%bc%81%e3%82%ab%e3%83%a9%e3%82%aa%e3%82%b1%e6%8e%a1%e7%82%b9%e3%81%a7%e3%83%8f%e3%82%a4

投稿→新規追加をクリックして、新しい記事を投稿しようとすると、右下にアイキャッチ画像を設定と言うボタンが出て来ます。

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-10-20-20-56

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-10-20-21-37

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-10-20-28-36

ここのアイキャッチ画像を設定をクリックして、画像を選択すると、こんな風にアイキャッチ画像を簡単に設定出来ます。

 

でもこの方法でアイキャッチ画像を選択しても、記事の中には画像は自動で投稿されず、文字だけの殺風景な投稿になってしまうんですね。

アイキャッチ画像を設定しただけで、自動で記事の中の投稿にも反映されたら便利ですよね?

その為にはテーマ編集から個別投稿(single.php)という場所に、タグを入力するだけでオッケーなんです。

 

ワードプレス初心者の方にも分かりやすい様に図解付きで、次からアイキャッチ画像を設定すれば自動で記事内のトップページにアイキャッチ画像が投稿される方法を解説して行きます。

 

 

テーマ編集→個別投稿(single.php)

 

%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e7%b7%a8%e9%9b%86__%e9%9f%b3%e7%97%b4%e6%94%b9%e5%96%84%ef%bc%81%e3%82%ab%e3%83%a9%e3%82%aa%e3%82%b1%e6%8e%a1%e7%82%b9%e3%81%a7%e3%83%8f%e3%82%a4%e3%82%b9

まずアイキャッチ画像を自動で投稿する為には、ワードプレスの管理画面のトップページに行き、左側の外観→テーマの編集をクリックします。

 

 

%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e7%b7%a8%e9%9b%86__%e9%9f%b3%e7%97%b4%e6%94%b9%e5%96%84%ef%bc%81%e3%82%ab%e3%83%a9%e3%82%aa%e3%82%b1%e6%8e%a1%e7%82%b9%e3%81%a7%e3%83%8f%e3%82%a4%e3%82%b9

右側にいろんな項目が出てくると思いますが、その中にある個別投稿(single.php)と言う場所を探して下さい。

見つかったらクリック!

 

 

%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e7%b7%a8%e9%9b%86__%e9%9f%b3%e7%97%b4%e6%94%b9%e5%96%84%ef%bc%81%e3%82%ab%e3%83%a9%e3%82%aa%e3%82%b1%e6%8e%a1%e7%82%b9%e3%81%a7%e3%83%8f%e3%82%a4%e3%82%b9

個別投稿(single.php)のアルファベットが羅列されている中央部の場所を少しいじって行きます。

最初はなんだか良く分からないと思いますが、アイキャッチ画像を自動で投稿するには、コピペするだけで完了するので安心して下さい。

 

  <!--ループ開始-->
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div class="kizi">
    <h1 class="entry-title">
      <?php the_title(); ?>
    </h1>
    <div class="blogbox">
    </div>
<!— ここまでアイキャッチ画像 —>
    <?php the_content(); ?>
    <?php wp_link_pages(); ?>
  </div>
  <div style="padding:20px 0px;">
    <?php get_template_part('ad');?>
  </div>
<div class="kizi02">
  <?php get_template_part('sns');?>
  </div>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
  <!--ループ終了-->

こんなタグがあると思いますが、ここの部分を下記の様に変更して行きます。

  <!--ループ開始-->
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div class="kizi">
    <h1 class="entry-title">
      <?php the_title(); ?>
    </h1>
    <div class="blogbox">
    </div>
<!— ここからアイキャッチ画像 —>
<div class=“post-thumbnail”>
  <?php the_post_thumbnail(‘full’);?>
</div>
<!— ここまでアイキャッチ画像 —>
    <?php the_content(); ?>
    <?php wp_link_pages(); ?>
  </div>
  <div style="padding:20px 0px;">
    <?php get_template_part('ad');?>
  </div>
<div class="kizi02">
  <?php get_template_part('sns');?>
  </div>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
  <!--ループ終了-->

 

 

 

訳が分からなかった方の為に詳しく説明すると、

 

<!— ここまでアイキャッチ画像 —>
    <?php the_content(); ?>
    <?php wp_link_pages(); ?>
  </div>

これをこうするだけ↓

<!— ここからアイキャッチ画像 —>
<div class=“post-thumbnail”>
  <?php the_post_thumbnail(‘full’);?>
</div>
<!— ここまでアイキャッチ画像 —>
    <?php the_content(); ?>
    <?php wp_link_pages(); ?>
  </div>

 

ラインが引いて<!- ここからアイキャッチ画像 ->と言う部分からそのまま全てをコピペすれば、自動でアイキャッチ画像が投稿される様になります。

 

%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e7%b7%a8%e9%9b%86__%e9%9f%b3%e7%97%b4%e6%94%b9%e5%96%84%ef%bc%81%e3%82%ab%e3%83%a9%e3%82%aa%e3%82%b1%e6%8e%a1%e7%82%b9%e3%81%a7%e3%83%8f%e3%82%a4%e3%82%b9

ワードプレスの画面から見るとこんな感じになります。

これはタグを変更する前ですね。

 

%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e7%b7%a8%e9%9b%86__%e9%9f%b3%e7%97%b4%e6%94%b9%e5%96%84%ef%bc%81%e3%82%ab%e3%83%a9%e3%82%aa%e3%82%b1%e6%8e%a1%e7%82%b9%e3%81%a7%e3%83%8f%e3%82%a4%e3%82%b9

これがタグを変更した後の個別投稿(single.php)の画面です。

 

<!— ここからアイキャッチ画像 —>
<div class=“post-thumbnail”>
  <?php the_post_thumbnail(‘full’);?>
</div>

↑このタグだけが追加されているのが確認出来ますよね?

この4行のタグを追加するだけで、自動で記事内にアイキャッチ画像が投稿される様になるんです。

 

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-01-10-20-59-10

確認してみると、しっかりと記事内に自動でアイキャッチ画像が投稿されているのが、確認出来ました。

 

是非コピペで終わる設定方法なので、やってみてください。

 

 

まとめ

 

アイキャッチ画像を自動で記事内に投稿する手順

  1. ワードプレス管理画面よりテーマ編集をクリック
  2. 個別投稿(single.php)にタグをコピペする

 

2つの手順で自動でアイキャッチ画像を記事の一番上の画像投稿する事が出来ます。

僕は最初アイキャッチ画像を選択して、更に記事の中に画像を張付けていたのですが、「何かめんどくさいな〜」と言う事で、色々調べていて出来る様になりました。

もちろんアイキャッチ画像を選択して、記事の中に手動で画像を投稿する方法でも、出来ない事は無いですが、これからどんどん記事を更新してくとなると、これほど無駄な作業は無いので、ワードプレス初心者の方であれば、すぐにしておきたい初期設定ですね。