• 妊娠・出産・育児
    ネスタリゾート神戸のイルミネーション「ネスタイルミナ」を動画付きレポ♡
    2018年04月19日
  • ゲーム
    【とび森】ゆうたろうが登場する魔法のランプの入手方法は?
    2018年03月27日
  • ゲーム
    【とび森amiibo+】アプデで楽になった住民厳選!指定追い出しも出来る!
    2018年03月27日
  • 奈良のこと
    にぼしこいし|奈良一煮干しの濃いラーメン店に行ってきた♡
    2018年03月25日
  • 副業・在宅ワーク
    iPadでイラストを描くなら、aibowの極細タッチペンがコスパ最高でオススメ!
    2018年03月26日
  • ブログ運営
    読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切
    2018年02月08日
  • 奈良のこと
    奈良市の新施設「ミ・ナーラ」のテナント情報!イオン系列なの?
    2018年04月19日
  • あずのおすすめ
    書評|フリーランスを代表して申告と節税について教わってきました。
    2018年02月28日
  • ブログ運営
    コピペで簡単にできるSANGOのカスタマイズ方法まとめ
    2018年02月09日
  • あずのおすすめ
    無名の主婦ブロガーがpolcaで10万円の支援をしてもらえた理由と今思うこと
    2017年08月16日
【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から、標準の投稿者情報を非表示にする機能が追加されました

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

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


▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

記事の前に自己紹介を

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

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

最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメント一覧
  1. […] 「この記事を書いた人」を設定する →【STORKカスタマイズ】この記事を書いた人(ABOUT)を上に表示させる方法 […]

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

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

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

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

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

    ひとつ質問です。

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

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

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

    宜しくお願い致します。

コメントを残す