【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、...

plu-plu.net

2018.12.04

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

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

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

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

posted with カエレバ

エビスコム ソシム 2014-10-28

Amazon

楽天市場

HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with ヨメレバ

服部 雄樹 技術評論社 2017-07-21

Amazon

Kindle

楽天ブックス

楽天kobo