Stinger8のカスタマイズ。トップページにオリジナルの文章を入れる

SHARE

Stinger8のカスタマイズ。トップページにオリジナルの文章を入れる

こんにちは。世界のヘイショーです。

本日はWebサイト制作、アフィリエイト関連のトピックで、WordPressのStinger8のカスタマイズについて。

Stinger 7の時はトップページのカスタマイズを簡単に行うことが出来たのですが、残念ながらStinger 8にはこの機能は無し、ということで本日はStinger 8のトップページのカスタマイズ方法を解説したいと思います。

実験台になるのはこちらのサイト。

今回のカスタマイズ内容は以下の通り。

  • メインカラムにアイキャッチ画像を入れる
  • アイキャッチ画像と記事一覧の間にサイトの紹介文を入れる

変更後はこんな感じ。

メインカラムにアイキャッチ画像を入れる

まずは今設定されているヘッダー画像を削除するところから始めてください。その後に、home.phpを編集します。

変更前

コード
<?php get_header(); ?>

<div id="content" class="clearfix">
	<div id="contentInner">
		<div class="st-main">
			<article>
				<div class="st-aside">
					<?php get_template_part( 'itiran' ); ?>
					<?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?>
				</div>

					<?php get_template_part( 'sns-top' ); //ソーシャルボタン読み込み ?>

			</article>
		</div>
	</div>
	<!-- /#contentInner -->
	<?php get_sidebar(); ?>
</div>
<!-- /#content -->
<?php get_footer(); ?>

 

<div class=”st-main”>と<article>の間に以下のコードを挿入します。

HTML

コード
<section class="topImage">
  <img width="800" src="画像のURL" alt="ヘッダー画像">
</section>

 

CSS

コード
.topImage{
	margin: -30px -50px 10px;
	position:relative;
}

.topImage img{
	width:100%;
	border-radius: 4px 4px 0 0 ;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
}

 

以上の内容を踏まえた変更後のhome.phpのコードはこんな感じになります。

変更後

コード
<?php get_header(); ?>

<div id="content" class="clearfix">
	<div id="contentInner">
		<div class="st-main">
		 <section class="topImage">
		    <img width="800" src="http://workstudyabroad.net/wp-content/uploads/2016/07/cropped-studyworkabroad_header.jpg" alt="海外就職トップ画像">
		 </section>
			<article>
				<div class="st-aside">
					<?php get_template_part( 'itiran' ); ?>
					<?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?>
				</div>

					<?php get_template_part( 'sns-top' ); //ソーシャルボタン読み込み ?>

			</article>
		</div>
	</div>
	<!-- /#contentInner -->
	<?php get_sidebar(); ?>
</div>
<!-- /#content -->
<?php get_footer(); ?>

 

これでメインカラムにアイキャッチ画像が入りました。

 

アイキャッチ画像の下に紹介文を入れる

次に、アイキャッチ画像と記事一覧の間に紹介文を入れます。

ここは簡単で、home.phpの中の<article>と<div class=”st-aside”>の間に文章を打ち込んでいくだけです。

<main></main>で囲っているのは、SEO対策のため。この中に文章をガンガン入れていくことで、トップページのSEO効果を高めることが出来ます。

完成後のコードはこんな感じ。

コード
<?php get_header(); ?>

<div id="content" class="clearfix">
	<div id="contentInner">
		<div class="st-main">
		  <section class="topImage">
		    <img width="800" src="http://workstudyabroad.net/wp-content/uploads/2016/07/cropped-studyworkabroad_header.jpg" alt="海外就職トップ画像">
		  </section>
		    <article>
                       <main>
                           <h2>このサイトについて</h2>
                              <p>ここに紹介文を書いて行く</p>
                              <p>テーマは以下の通り:</p>
                              <ul>
                              <li>テーマ1</li>
                              <li>テーマ2</li>
                              <li>テーマ3</li>
                              <li>テーマ4</li>
                              </ul>
                              <br /><br />
                       </main>
                            <h2>新着記事はこちら</h2>
				<div class="st-aside">
					<?php get_template_part( 'itiran' ); ?>
					<?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?>
				</div>

					<?php get_template_part( 'sns-top' ); //ソーシャルボタン読み込み ?>

			</article>
		</div>
	</div>
	<!-- /#contentInner -->
	<?php get_sidebar(); ?>
</div>
<!-- /#content -->
<?php get_footer(); ?>

 

完成後はこんな感じ。

 

箇条書きの箇所をCSSでスタイリングする

このままでも問題はありませんが、「テーマは以下の通り」の下にある箇条書きの部分が少し見栄えが悪いので、改善したいと思います。以下のCSSをコピペすればOK。

コード
.st-main main ul {
  padding: 0em 1em 0.5em 2.3em;
  position: relative;
}

.st-main main ul li {
  line-height: 1.5;
  padding: 0.3em 0;
  list-style-type: none!important;
}

.st-main main ul li:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #333;/*アイコン色*/
}

 

変更後はこちら。

少し見栄えが良くなりました。

 

2ページ目以降は記事一覧のみを表示させる

これでトップページの説明文の追加は完了ですが、このままではページャーの2ページ目、3ページ目をクリックした時に、記事一覧の上に同じように説明文が表示されてしまいます。

これを防ぐためには、<main></main>で囲まれた箇所を以下のコードで囲んであげてください。

コード
<!-- ページ分岐 -->
<?php if (is_home() && !is_paged()) : // 1ページ目 HOME ?>
<main>
〜〜〜
〜〜〜
〜〜〜
</main>
<h2>新着記事はこちら</h2>
<?php else : // 2ページ目以降 ?>
<br />
<h2>記事一覧</h2>

<?php endif; ?>

これで2ページ目以降は記事一覧のみが表示されるようになります。

 

カスタマイズは以上になります。

コメントを残す

メールアドレスが公開されることはありません。