WordPressテーマ「ストーク」をメディア風デザインにカスタマイズする方法

以前から気になっていたWordPressテーマのSTORK(ストーク)ですが、先日ついに購入しました!デザインが秀逸で、これは確かにテンション上がります!

私のブログは更新頻度が低いのでトップページで停滞感を見せないようにする必要があったのですが、ストークをカスタマイズしてメディアサイトのような感じに仕上げてみました。

変更前(ほぼデフォルトです)

変更後

  1. スライダーの上に見出しがある
  2. 新着記事の上に自分を選択した記事を置いている
  3. 新着記事と自分が選択した記事の上に見出しを置いてグルーピングをしている

新着記事が下の方に来るので新着記事への注目度が下がりますが、その分スライダーの記事と新着記事の上にある自分で選択した記事に注目が集まるので、更新頻度が低い人にはおすすめのデザインです。

それではカスタマイズ方法を説明していきます。

 

スライダーの上に吹き出しの見出しを入れる

見出しをつける理由

ストークのスライダーの記事一覧表示はデザイン的に好きなのですが、デフォルトのままでは何の記事が集められているかが分からないですよね。このままではクリック率が低いような気がします。なので見出しをつけて、例えば「まとめ記事」や「おもしろ記事」という風にカテゴリーでくくってあげるとユーザーに親切かなと思いました。

ちなみにこのスライダーはサイトスピードを遅くしてしまうので利用している人は少ないですが、ストークならではの機能なので私的には気に入っています。

 

カスタマイズ方法

編集箇所は、「parts_homeheader.php」です。赤字の箇所が挿入したタグになります。

コード
'opencage_toppage_headerjptext' ); ?></p>
			<?php endif; ?>
			<?php if ( get_option( 'opencage_toppage_headerlink' )) : ?>
			<p class="btn-wrap simple maru wow animated fadeInUp" data-wow-delay="1s"><a style="color:<?php echo get_theme_mod( 'opencage_toppage_btncolor' ); ?>;background:<?php echo get_theme_mod( 'opencage_toppage_btnbgcolor' ); ?>;" href="<?php echo get_option( 'opencage_toppage_headerlink' ); ?>"><?php if ( get_option( 'opencage_toppage_headerlinktext' )) : ?><?php echo get_option( 'opencage_toppage_headerlinktext' ); ?><?php else:?>詳しくはこちら<?php endif;?></a></p>
			<?php endif; ?>
		</div>
	</div>
</div>
<h2 class="topSliderHeading">Pick Up!! <span>注目記事</span></h2>
<?php endif; ?>
<?php endif; ?>

<?php if ( is_front_page() || is_home() ) : ?>
<?php		  
$args = array(
    'posts_per_page' => 16,
    'offset' => 0,
    'tag' => 'pickup',
    'orderby' => 'post_date',
    'order' => 'DESC',
    'post_type' => array('post','page'),
    'post_status' => 'publish',

次に以下のCSSを「style.css」に追加します。

コード
.topSliderHeading {
  position: relative;
  padding: 0.6em;
  background: #fff;
  text-align: center;
  width: 280px;
  margin: 20px auto;
 font-family: 'Concert One', cursive;
 border-radius: 20px;
}

.topSliderHeading:after {
 position: absolute;
 content: '';
 top: 100%;
 left: 42%;
 border: 15px solid transparent;
 border-top: 15px solid #fff;
 width: 0;
 height: 0;
}
.topSliderHeading span{
 font-family: nikumaru !important;
 font-size: 20px;
}

これでスライダーの見出しが入りました!

 

トップページの記事一覧の上に「注目記事」を置く

見出しを作成

上記の画像のように、「外観→ウィジェット→PC: トップページ丈夫」の箇所にカスタムHTMLを配置し、以下のHTMLを入力します。

コード
<div class="post-list-card cf">
<div class="lines-on-sides"><span>まとめ記事</span></div>
<br >

ここへは後で追加

<br >
</div>
<div class="lines-on-sides"><span>新着記事</span></div>

次に「外観→テーマの編集」からstyle.cssを編集し、以下のCSSを入力。

コード
.lines-on-sides{
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
	font-size: 28px;
font-family: nikumaru;
margin-bottom: 10px;
}
.lines-on-sides:before {
  content: "";
  display: block;
  border-top: solid 1px #333;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 1;
}
.lines-on-sides span {
  background: #fff;
  padding: 0 20px;
  position: relative;
  z-index: 5;
}
.lines-on-sides.sides_left{
  text-align: left;
}
.lines-on-sides.sides_left span{
  padding-left: 0;
}
.lines-on-sides.sides_right{
  text-align: right;
}
.lines-on-sides.sides_right span{
  padding-right: 0;
}

すると以下のような見出しが入ると思います。

 

先頭に置く記事のコードを取得する

次に先頭に置きたい記事のコードをディベロッパーツールから取得します。こんな感じ。articleタグで囲まれている箇所全てです。

ここのコードを「ここへは後で追加」というテキストと差し替えます。

コード
<div class="post-list-card cf">
<div class="lines-on-sides"><span>まとめ記事</span></div>
<br />
<article class="post-list cf animated fadeIn post-1911 post type-post status-publish format-standard has-post-thumbnail category-tour tag-30 article cf" role="article">
<a href="https://hawaii4good.com/2017/07/magicofpolynesia/" rel="bookmark" title="圧巻のイリュージョンショー!マジック・オブ・ポリネシアで大興奮" class="no-icon">


<figure class="eyecatch">
<img width="486" height="290" src="https://hawaii4good.com/wp-content/uploads/2017/07/luau-486x290.jpg" class="attachment-home-thum size-home-thum wp-post-image" alt=""><span class="cat-name cat-id-51">ハワイのオプショナルツアー</span>
</figure>

<section class="entry-content cf">
<h1 class="h2 entry-title">圧巻のイリュージョンショー!マジック・オブ・ポリネシアで大興奮</h1>

<p class="byline entry-meta vcard">
<span class="date gf updated">2017.07.04</span>
<span class="writer name author"><span class="fn">Ruan Ruan</span></span>
</p>

<div class="description"><p>ハワイで本格的なマジックが楽しめるショーがあるってご存知ですか? それはマジック界のオスカーとも言われる、栄誉…</p>
</div>

</section>
</a>
</article>


</div>
<br />
<div class="lines-on-sides"><span>新着記事</span></div>

こんな風に先頭に自分が選んだ記事が置けます。後はこれを繰り返して2個か4個置いておけば大丈夫です。

 

以上でカスタマイズ終了

いかがでしたでしょうか?私がストークを使うときは上記で編集した2つのセクションと、サイドバーに「人気記事」のリストを作って、合計15記事くらい推していくようにします。これを実施すれば巷によくあるメディアサイトのような構成になりますね。簡単にメディアサイトが作れるようになったものです。

ストークのデザインのカスタマイズは以上になりますが、次回は高速化とSEO対策でのカスタマイズを詳しく説明します。ご精読ありがとうございました。

コメントを残す

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