(cache) 【STORK（ストーク）】Wordpressのテーマ標準の「この記事を書いた人」の場所を変更するカスタマイズ【アルバトロス】

どうも、「癒せるWeb屋さん」がみたかです＾＾

オープンケージで作られたWordpressのテーマには、ブログを見に来てくれた人に、少しでも自分のことを知ってもらったり、親近感を持ってもらうために「この記事を書いた人」という欄が標準で設定されています。

オープンケージのテーマ以外は、プラグイン「Fancier Author Box」を使うと簡単に設置できます。

この欄に簡単な自己紹介を書いておくことで、わざわざプロフィールのページに行かなくても、どんな人が書いているのか？ということをお知らせすることができるんですね。

ですが、そのままだと少々気になる点があったので、ここではその点と解決法について書こうと思います＾＾

「STORK」は僕が持っていないため、クライアントさんに協力していただきましたm(_ _)m

この記事の目次

「この記事を書いた人」の問題点：後ろ過ぎて見られていない！？

この機能の問題点は、まずテスト投稿をキャプチャした画像を見ていただきましょう。

↓　↓　↓

思いっきりページの後ろにあるから読まれない可能性が高いんじゃね？

そうなんです。

後ろ過ぎて読まれているかどうか微妙な位置なんですね(^_^;)

しかもテスト投稿なので本文も短く、CTAも付けていません。

その結果、本来の記事だともっと後ろになるので、ウィジェットの「記事タイトル下（SNSボタンの下）」に自作で作ったものを入れたり、プラグイン「Fancier Author Box」を使って記事の先頭に表示させている人が大半だと思います。

でも、スマートに表示するなら標準だよな！

ってことで、

SNSボタン下に標準の「この記事を書いた人」を表示させるカスタマイズをご紹介します＾＾

これなら違和感無し！

「この記事を書いた人」の表示位置をカスタマイズする

今回はオープンケージのWordpressテーマで大人気の「STORK（ストーク）」と、このブログで使っている「アルバトロス」について解説します。

誰か「ハミングバード」での協力者を求むw

STORK（ストーク）の場合

サクッと済ませたい方は、こちらのzipファイルをダウンロードしていただき、中に入っているphpファイル

single.php　（2カラム　標準）
singleparts_full.php　（1カラム　バイラル風）

をFTP（もしくはサーバーのファイルマネージャー）を使って、テーマのディレクトリ（フォルダ）にアップロードしてください。

アップロード場所は、

/ドメイン.com/public_html/wp-content/theme/jstork_custom　子テーマ（推奨）
/ドメイン.com/public_html/wp-content/theme/jstork　親テーマ

になります。

アップデートをすると、カスタマイズしている部分が消えてしまうので、子テーマに入れておくことをオススメします。

zipファイルをダウンロードする！

アップロードが完了すると、このようになると思います。（画像はアルバトロス）

STORK（ストーク）枠線付きの場合

画像はアルバトロスですが、このように枠線をつけたい場合は、こちらのzipファイルをダウンロードしてお使いください＾＾

Zipファイル（枠線付き）をダウンロードする！

後ろ側の「この記事を書いた人」を非表示にする場合

後ろ側にある「この記事を書いた人」を非表示にする場合「parts_singlefoot.php」の画像の部分を「<!– 〜 –>」でコメントアウトすると消えるはずです。

STORK（ストーク）の場合（カスタマイズ済み）

もし「single.php（singleparts_full.php）」がすでに何かしらのカスタマイズを施している場合はこちらの方法で追記すると良いでしょう。

1-1.下記のコードをコピー

<!--この記事を書いた人--> 
<div class="authorbox wow animated fadeIn" data-wow-delay="0.5s">
<div class="profile cf"> 
<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>

1-2.枠線付きのコードこちらです。

<!--この記事を書いた人--> 
<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>

2-1.「single.php」の画像の部分にコピーしたコードを貼り付ける。

2-2.「singleparts_full.php」はこちら。

アルバトロスの場合

やることはSTORK（ストーク）の時と同じくzipファイルをダウンロードして、テーマのディレクトリ（フォルダ）にアップロードします。

zipファイルをダウンロードする！

枠線付きのzipファイルはこちらをダウンロードしてください。

Zipファイル（枠線付き）をダウンロードする！

アルバトロスの場合（カスタマイズ済み）

1.すでに「single.php」をカスタマイズされている場合は、こちらのコードをまるっとコピーします。

<!--この記事を書いた人--> 
<div class="authorbox"> 
<div class="inbox"> 
<div class="profile cf"> 
<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"> 
<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> <!--ここまで-->

枠線付きのコードはこちらです。

<!--この記事を書いた人--> 
<div class="authorbox"> 
<div class="inbox"> 
<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"> 
<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> 
</div> <!--ここまで-->

2.「single.php」のこの部分に貼り付けて保存します。

下側の「この記事を書いた人」を非表示にする場合は、「paets_singlefoot.php」の画像の部分を「<!– 〜 –>」でコメントアウトすることで非表示にできます。

アルバトロスの場合は余計な影とか付いてしまうので、CSS（style.css）にこのコードを追記すると影が消えてスッキリします。

/*この記事を書いた人*/
.single .authorbox, .single .related-box {
 background-color: #fff;
 border: none;
 box-shadow:none;
}

枠線を変更する場合

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

このコードの部分を編集すると、枠線を変えることができるので、好みに応じていじってみてください＾＾

padding　枠線内側の余白を設定する。
margin-bottom 　底の枠線外側の余白を設定する。
border　枠線の種類。solid=一本線、double＝二重線、dotted＝点線など。
#ccc　枠線の色をカラーコードで指定する。#000000＝黒、#ffffff=白、#ff0000＝赤

枠線に関してはこちらのサイトを参考にしてみてください＾＾

→HTMLクイックリファレンス｜border

「この記事を書いた人」のカスタマイズまとめ

バババッと書いたのでまとまりがありませんが、上記のことを一通り行えば「この記事を書いた人」を上部SNSボタンの下に表示することができます。

もしそれでもできそうにない場合はカスタマイズの代行をいたしますので、お気軽にご相談ください＾＾

スポットサービスで依頼する！

では、今回はこの辺で！また次の記事でお会いしましょう＾＾

アクセスバーズ™️を詳しく知りたい？

アクセスバーズ™️を、わかりやすく解説したメルマガ講座やってます。

登録していただいた特典として、

アクセスバーズ™️のセッションを特別価格で受けていただけます＾＾

メルマガ講座の登録はこちらから！

アクセスバーズ™️を受けてみませんか？

バーズ™️ファシリテーターになって、ますますパワーアップ！？

アクセスバーズ™️セッションのお申し込みはこちらまで＾＾

アクセスバーズ™️を受ける？

【STORK（ストーク）】WordPressのテーマ標準の「この記事を書いた人」の場所を変更するカスタマイズ【アルバトロス】

ABOUTこの記事をかいた人

「この記事を書いた人」の問題点：後ろ過ぎて見られていない！？

「この記事を書いた人」の表示位置をカスタマイズする

STORK（ストーク）の場合

STORK（ストーク）枠線付きの場合

後ろ側の「この記事を書いた人」を非表示にする場合

STORK（ストーク）の場合（カスタマイズ済み）

アルバトロスの場合

アルバトロスの場合（カスタマイズ済み）

枠線を変更する場合

「この記事を書いた人」のカスタマイズまとめ

アクセスバーズ™️を詳しく知りたい？

アクセスバーズ™️を受けてみませんか？

関連

記事が気に入ったらシェアをお願いします＾＾

NEW POST最新の記事

【コスモテープ】これを貼ったら、視力が良くなったみたいにハッキリ見えます！【…

【STORK（ストーク）】Wordpressのテーマ標準の「この記事を書いた…

【緑の鍵】https対応のアフィリエイトリンクを使用しているASPと確認方法

「石上神宮」と「健康カフェ」に行ってきた

おすすめのサービス！

プロフィール

カテゴリー

Facebookページ（いいね！をお願いします）

ABOUTこの記事をかいた人

「この記事を書いた人」の問題点：後ろ過ぎて見られていない！？

「この記事を書いた人」の表示位置をカスタマイズする

STORK（ストーク）の場合

STORK（ストーク）枠線付きの場合

後ろ側の「この記事を書いた人」を非表示にする場合

STORK（ストーク）の場合（カスタマイズ済み）

アルバトロスの場合

アルバトロスの場合（カスタマイズ済み）

枠線を変更する場合

「この記事を書いた人」のカスタマイズまとめ

アクセスバーズ™️を詳しく知りたい？

アクセスバーズ™️を受けてみませんか？

関連

記事が気に入ったらシェアをお願いします＾＾

NEW POST最新の記事

【コスモテープ】これを貼ったら、視力が良くなったみたいにハッキリ見えます！【…

【STORK（ストーク）】Wordpressのテーマ標準の「この記事を書いた…

【緑の鍵】https対応のアフィリエイトリンクを使用しているASPと確認方法

「石上神宮」と「健康カフェ」に行ってきた

RECOMMENDこちらの記事も人気です。

Wordpressのテーマを変えてみました。

AMPのプラグインを拡張して、下がったPVとSNSボタンを取り戻せ！

Wordbookerが使えなくなったので…

アメーバプレスのその後（Xserver移行後）

ブログ記事が増えてきた時にやっておきたいユーザーに配慮したまとめ記事の作り方

SSL化をする時に混在コンテンツ「！」の原因がわからない時に確認する方法

【常時SSL化の仕上げ】新しくサーチコンソールに登録しても以前のプロパティは…

アメーバプレスの不具合解消！？（してませんｗ）

おすすめのサービス！

プロフィール

当ブログの人気記事！

カテゴリー

Facebookページ（いいね！をお願いします）

人気記事