iPadでイラストを描いてます♡
WPカスタマイズ

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

▼ 楽しくブログを運営したいあなたに
▼ 英語に興味のあるあなたへ

こんにちは✨
主婦ブロガーのあず(yuuki_azusa )です。

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

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

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

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

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

あずさん
あずさん
コピペで出来るので、誰でも簡単に出来ますよ~!

スポンサーリンク

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

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

下準備

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

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

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

single.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のこの位置に貼り付けます。

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

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

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

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

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

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

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

<!--この記事を書いた人-->
<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つだけ買うなら

20万円以上を有料テーマ購入に使った私が、「1つだけ」有料テーマを購入したいあなたにおすすめ!

Diver」なら、WordPress初心者でもブログもアフィリエイトサイトも思いのままに作れます。

詳細ページ公式ページ

ABOUT ME
あずさん
あずさん
7歳・2歳・1歳の娘がいる主婦ブロガーです。「あずさんち」では自分の経験を元に、今後同じ悩みを持った主婦やママの助けになるようなブログを書いていきます。在宅ワークという働き方の選択肢を広めたい!

POSTED COMMENT

  1. […] 「この記事を書いた人」を設定する →【STORKカスタマイズ】この記事を書いた人(ABOUT)を上に表示させる方法 […]

  2. 黒石ツキツキキ より:

    おかけでこの記事を書いた人が作れました。良い記事をありがとうございます。

  3. ウツノミヤ タケナオ より:

    こんにちは。宇都宮と申します。
    ブログ拝見しました、ありがとうございます。

    ストークを使い、この記事書いた人を上部に表示させたいのですが
    なかなかうまくいきません。

    ひとつ質問です。

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

    そっくりそのまま、コピーして貼り付けでよかったでしょうか?

    そのまま、貼り付けし、FTPでストークの子テーマにアップしましたがうまくいきません。

    宜しくお願い致します。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です