Stinger8

【WordPress】Stinger8で記事の最初にアイキャッチ画像を自動で追加する方法

割と便利だった、
「アイキャッチ画像を記事上部に表示する」
この機能、Stingerplus等では管理画面から設定することができました。

しかしstinger8では管理画面はありません。

そのため、いままで手動で画像を挿入していたのですが、
面倒になったので、自動でアイキャッチ画像を記事の一番上に挿入することにしたので、
アイキャッチ画像を自動で記事上に表示させる方法をご紹介します。

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

やり方は簡単!single.phpにコピペするだけ!

アイキャッチを自動で記事上に表示させる場合は、
以下のコードをsingle.phpに挿入するだけです。

<?php the_post_thumbnail( 'large' ); ?>

こちらのコードを、single.phpファイルの真ん中あたりにある
【div class=mainbox】の下にコピペしてください。

					<h1 class="entry-title"><?php the_title(); //タイトル ?></h1>
					<div class="blogbox">
						<p><span class="kdate">
							<?php if ( get_the_date() != get_the_modified_date() ) : //更新がある場合 ?>
								投稿日:<?php echo esc_html( get_the_date() ); ?>
								更新日:<time class="updated" datetime="<?php echo esc_attr( get_the_modified_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_modified_date() ); ?></time>
							<?php else: //更新がない場合 ?>
								投稿日:<time class="updated" datetime="<?php echo esc_attr( get_the_date( DATE_ISO8601 ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time>
							<?php endif; ?>
						</span></p>
					</div>

					<div class="mainbox">
	<?php the_post_thumbnail( 'large' ); ?>
							<div class="entry-content">
								<?php the_content(); //本文 ?>
							</div>
						<?php get_template_part( 'st-ad-on' ); //広告 ?>

							<?php //ページ改
									$defaults = array(
									'before'           => '<p class="tuzukicenter"><span class="tuzuki">' . __( '', 'default' ),
									'after'            => '</span></p>',
									'link_before'      => '&gt;&ensp;',
									'link_after'       => '&ensp;',
									'next_or_number'   => 'next',
									'separator'        => ' ',
									'nextpagelink'     => __( '続きを読む', 'default' ),
									'previouspagelink' => __( '前のページへ', 'default' ),
									'pagelink'         => '%',
									'echo'             => 1
									);
									wp_link_pages( $defaults );
							?>

					</div><!-- .mainboxここまで -->
	
						<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>

						<p class="tagst">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
							<?php the_tags( '<i class="fa fa-tags"></i>-', ', ' ); ?>
						</p>




					<?php endwhile; else: ?>
						<p>記事がありません</p>
					<?php endif; ?>
					<!--ループ終了-->
			</article>

					<div class="st-aside">

						<?php if ( comments_open() || get_comments_number() ) {
							comments_template(); //コメント
						} ?>

						<!--関連記事-->
						<?php get_template_part( 'kanren' ); ?>

						<!--ページナビ-->
						<div class="p-navi clearfix">
							<dl>
								<?php
								$prev_post = get_previous_post();
								if ( !empty( $prev_post ) ): ?>
									<dt>PREV</dt>
									<dd>
										<a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>"><?php echo $prev_post->post_title; ?></a>
									</dd>
								<?php endif; ?>
								<?php
								$next_post = get_next_post();
								if ( !empty( $next_post ) ): ?>
									<dt>NEXT</dt>
									<dd>
										<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>"><?php echo $next_post->post_title; ?></a>
									</dd>
								<?php endif; ?>
							</dl>
						</div>
					</div><!-- /st-aside -->

上記のコードだと14行目になります。

これだけで、アイキャッチ画像が、
記事の一番上に自動的に表示されます。
なお、アイキャッチ画像を設定していない場合には、
なにも画像は表示されません。

画像の大きさを変える場合

記事上に表示させる画像の大きさは、
先程挿入した以下のコードにある【large】という部分を、
mediumやthumbnailにすることで、
大きさを変えることができます。

<?php the_post_thumbnail( 'large' ); ?>

当記事作成時における大きさは、
【large】となっております。

記事上にアイキャッチ画像があるかないかは、
個人的には、結構重要だと思っています。

きれいな画像であったり、記事の内容に関する画像があることで、
記事に対する興味が高められるように感じます。

簡単にできますので、
おためしあれ~

Stinger8のカスタマイズ記事まとめはこちら!↓

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ
WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、...

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

コメント

  1. SK より:

    記事通りに実施して、アイキャッチが表示されるようになりました。
    STINGER8使い始めで、まだわからないことが多いので助かりました。
    ありがとうございます。

    • ぷるぷるぷるぷる より:

      SK さん

      コメントありがとうございます。

      お役に立ててよかったです。
      何かご要望などがありましたら、
      極力対応できるようにいたしますので、
      よろしくお願いします。
      (対応遅くなったらすみません笑)

  2. 中村 より:

    はじめまして。
    私もスティンガー8を使っているんですが、アイキャッチを最近になっていれた方がいいと言う事で、
    ぷるぷるさんのおっしゃる通りsingle.phpに挿入しようとしたんですが、うまく入りません。(はじかれます。)
    スティンガー3は、問題なく、single.phpに直接挿入する事ができたんですが、スティンガー8は仕様が変わっているみたいで、直接挿入する事が出来ません。single.phpをコピペして、sakuraエディターに落とし込んで、タグを挿入後、再びsingle.phpに戻せばいいかなぁ?と思いやってみたんですが、スゴイ事になってしまい、上書き保存をやめてしまいました。を挿入する為には、どのようにすればよいのでしょうか?教えて頂けないでしょうか?本当にこんな恥ずかしい質問で申し訳ないです。どうぞよろしくお願い申し上げます。

    • ぷるぷるぷるぷる より:

      中村 さん

      コメントありがとうございます。

      single.phpに挿入しようとすると、はじかれるということですが、それはWordPressの管理画面で【外観>テーマの編集】での編集の事という認識でよろしいでしょうか?

      それについてはちょっと前のアップデートによるwordpressのバグ?のようなものみたいで、私もその方法で編集することができませんでした。
      最近のアップデートの「wordpress4.9.2」に更新したら編集できるようになったので、まだ試してない場合は、アップデートしてみてください。

      それでもできないようであれば、お試ししてやめてしまった、sakuraエディターとFTPソフトを使用して編集するしかないですね・・・

  3. 中村 より:

    ぷるぷる様へご丁寧に教えて頂きまして誠にありがとうございます!
    早速やってみたいと思います。

    それともう1つご質問がありまして、ぷるぷるさんのように、目次のうえにアドセンスを一括して貼るのは、テーマの編集からどのようにすればいいのか?もし、ぷるぷるさんのサイトで、すでに紹介済みの記事があれば、そのページのURLを教えて頂きたいのですが。。かさねがさねご迷惑をおかけいたします。

    何卒よろしくお願い申し上げます。

    中村