【Gush2】個別記事下に、SNSボタン付き「書いた人情報」を置いてみました。

 

「Stinger5 for Ladys」の雑記ブログと同様に、さらさらぶろぐも個別記事下に「書いた人情報」を入れたので、その方法を紹介します。
 

PHPに、「書いた人情報」用の記述を追加

「名前、プロフィール画像、SNSボタンバー」をセットにした「書いた人情報」をauthor.phpというファイルにして、それを、個別記事用PHP「single.php」で呼び出す形にしました。

書いた人情報のPHPファイルauthor.phpを作成

下記のコードを記述したファイル「author.php」を作ります。

【】で囲んでいるところ5箇所を自分用に書き換えてください。

参考までに、さらさらぶろぐの場合を載せておきます。
【自分の名前】=さらさらり
【プロフィール画像のURL】=http://wpblog.sara2jp.com/wp-content/uploads/2015/03/hiyo_150.png
【自分のツイッターID】=sarasaralli
【自分のフェイスブックID】=sarasarablog
【自分のグーグルプラスID】=110794312530102325687

author.phpを呼び出す記述を、single.phpに追加

今回は、ソーシャルボタンの下に、「書いた人情報」を表示するようにしました。
下記のように、「書いた人情報」を呼び出す1行(水色の行)を、
「</div><!–//article_body–>」の下に入れます。

author.phpを、single.phpと同じディレクトリに置く

author.phpは、single.phpと同じディレクトリに置きます。
ちなみに私の場合は、子テーマを作っていて、ディレクトリは
「/themes/Gush2-child」となってます。

CSSに、「書いた人情報のSNSアイコン」用の記述を追加

style.cssに、下記に水色で示した「書いた人情報のSNSアイコン用記述」を追加します。
すべての画面サイズで適用されるように「@media{}」の外側に書きます。先頭でもいいのですが、私は、「カスタマイズした分は後ろのほうに書く」ようにしてるので、一番後ろに入れました。

まとめ

サイドバーSNSアイコンは、もともとGush2で定義されていたものなので、CSSは変更しなくて大丈夫かと思ったのですけど、article_bodyの定義を継承しちゃって表示崩れが起き、それを直そうとside-snsの定義を変えるとサイドバーのSNSボタンが表示崩れを起こし… どうにもならないので、新しいクラスauthor-snsを作りました。
そんなわけで、「Stinger5 for Ladys」よりもずっと時間がかかっちゃいました。(^_^.)

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。