ゲーム記事は「ゲーム女子」に移動しました

【STORKカスタマイズ】この記事を書いた人(ABOUT)を上に表示させる方法

どうも、あず(@yuuki_azusa)です

STORK(ストーク)」を始め、「ハミングバード」、「アルバトロス」、OPENCAGEには洗練されたテーマばかりで大人気ですね。

どんな人にも使いやすくて、モバイルファースト設定で、何もしなくてもオシャレ!

でも、そんな非のうちどころの無いようなSTORKですが、「この記事を書いた人」の表示位置が下すぎると思いませんか?

記事を読む前に、どんな人が書いているのか知ってもらうと親近感を持ってもらえたり、ファンになってもらえたりするチャンスもあるのにもったいない!

今回は、STORKで「この記事をかいた人」を上の方に表示させる方法をご説明します。

コピペで出来ますので、誰でも簡単に出来ますよ~!

MEMO
2017年9月25日に、このブログのテーマは「SANGO」に変更しています。

WPテーマをSANGOに変えてからやったカスタマイズまとめ

2017.10.01

この記事をかいた人の位置を変更する

それでは、早速やっていきます。

下準備

まず、single.phpをFTPなどを使用して子テーマに追加します。

エックスサーバーの場合は、ファイルマネージャーからSTORKのテーマ内に入り、single.phpをダウンロードして、そのままそのファイルを子テーマの中にアップロードすればOKです

↑こんな感じです。

MEMO
子テーマに適用させないと、テーマのアップデートがある度に設定しなおさなければいけません。

single.phpに記述する

以下のコードをコピーします。

php
<!--この記事を書いた人--> 
<div class="authorbox wow animated fadeIn" data-wow-delay="0.5s">
<div class="profile cf"> 
<div style="padding: 20px; margin-bottom: 10px; border: 1px solid #ccc;">
<h2 class="h_ttl"><span class="gf">ABOUT</span>この記事をかいた人</h2> 
<?php echo get_avatar(get_the_author_meta('ID'), 150); ?> 
<p class="name author"><?php the_author_posts_link(); ?></p> 
<div class="profile_description"> 
<?php the_author_meta("description" ); ?> </div> 
<div class="author_sns gf"> 
<ul> 
<?php if(get_the_author_meta('user_url')) : ?> 
<li><a href="<?php the_author_meta( 'user_url' ); ?>" target="_blank"><i class="fa fa-globe"></i>WebSite</a></li> 
<?php endif ;?> 
<?php if(get_the_author_meta('twitter')) : ?> 
<li><a href="<?php the_author_meta( 'twitter' ); ?>" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-lg"></i>Twitter</a></li> 
<?php endif ;?> 
<?php if(get_the_author_meta('facebook')) : ?> 
<li><a href="<?php the_author_meta( 'facebook' ); ?>" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-lg"></i>Facebook</a></li> 
<?php endif ;?> 
<?php if(get_the_author_meta('googleplus')) : ?> 
<li><a href="<?php the_author_meta( 'googleplus' ); ?>" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-lg"></i>Google+</a></li> 
<?php endif ;?> 
</ul> 
</div>
</div> 
</div>
</div>

これを、single.phpのこの位置に貼り付けます。

これだけで、「この記事をかいた人」が上部に表示されます。

さらにオリジナリティを出す

もっとオリジナリティを出したい場合は、枠線を変更してみるのがオススメです。

php

<div style="padding: 20px; margin-bottom: 10px; border: 1px solid #ccc;">

このコードの部分を変更すると、枠を変更出来るのでオリジナリティを出すことが出来ます。

  • padding 枠より内側の余白を設定する数値です
  • margin-bottom  底の枠より外側の余白を設定する数値です
  • border 枠線の種類を指定できます solid=一本線、double=二重線、dotted=点線など pxの数値を変えれば太さが変わります
  • #ccc 枠線の色をカラーコードで指定できます
参考

記事のタイトルサイト名

ちなみに私は、枠線の色や太さを変えたり、WebSite欄をMore PROFILEに変更しています。

php
<!--この記事を書いた人-->
<div class="authorbox wow animated fadeIn" data-wow-delay="0.5s">
<div class="profile cf">
<div style="padding: 5px; margin-bottom: 20px; border: 10px dotted #ffe5eb;">
<h2 class="h_ttl"><span class="gf">ABOUT</span>この記事をかいた人</h2>
<?php echo get_avatar(get_the_author_meta('ID'), 150); ?>
<p class="name author"><?php the_author_posts_link(); ?></p>
<div class="profile_description">
<?php the_author_meta("description" ); ?> </div>
<div class="author_sns gf">
<ul>
<?php if(get_the_author_meta('user_url')) : ?>
<li><a href="<?php the_author_meta( 'user_url' ); ?>" target="_blank"><i class="fa fa-heart" aria-hidden="true"></i>More PROFILE</a></li>
<?php endif ;?>
<?php if(get_the_author_meta('twitter')) : ?>
<li><a href="<?php the_author_meta( 'twitter' ); ?>" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-lg"></i>Twitter</a></li>
<?php endif ;?>
<?php if(get_the_author_meta('facebook')) : ?>
<li><a href="<?php the_author_meta( 'facebook' ); ?>" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-lg"></i>Facebook</a></li>
<?php endif ;?>
<?php if(get_the_author_meta('googleplus')) : ?>
<li><a href="<?php the_author_meta( 'googleplus' ); ?>" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-lg"></i>Google+</a></li>
<?php endif ;?>
</ul>
</div>
</div>
</div>
</div>

↑これが、私の使っているコードそのままです。

そのままコピペすると、このように表示されます。

下に表示されるABOUTを消すには?

2017年2月23日リリースのver1.1.1から、標準の投稿者情報を非表示にする機能が追加されました

「外観」→「カスタマイズ」→「投稿・固定ページ設定」の中に「記事下に投稿者情報を表示しない」という欄がありますので、そこにチェックを入れます。

これで記事の下の投稿者情報は表示されません。

記事の前に自己紹介を

STORK(ストーク)」は凄く良いテーマなんですが、その分使っている人も多くみんな一緒になってしまいがちです。

簡単に出来ることでも良いので少しでもカスタマイズして、他のSTORK使いに差をつけたいですね。

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

1 Comment

コメントを残す