【Gush2】個別記事下に、SNSボタン付き「書いた人情報」を置いてみました。
「Stinger5 for Ladys」の雑記ブログと同様に、さらさらぶろぐも個別記事下に「書いた人情報」を入れたので、その方法を紹介します。
目次
PHPに、「書いた人情報」用の記述を追加
「名前、プロフィール画像、SNSボタンバー」をセットにした「書いた人情報」をauthor.phpというファイルにして、それを、個別記事用PHP「single.php」で呼び出す形にしました。
下記のコードを記述したファイル「author.php」を作ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- 自己紹介 --> <div class="center"> <span style="font-weight:bold;">書いてる人</span> 【自分の名前】<br> <img class="aligncenter" src="【プロフィール画像のURL】" width="150" height="150"" /> <div class="author-sns"> <!-- thnx! http://www.iconsdb.com/ --> <ul> <li><a href="https://twitter.com/【自分のツイッターID】" target="_blank"><i class="fa fa-twitter"></i> </a></li> <li><a href="https://www.facebook.com/【自分のフェイスブックID】" target="_blank"><i class="fa fa-facebook"></i> </a></li> <li><a href="https://plus.google.com/u/0/【自分のグーグルプラスID】" target="_blank"><i class="fa fa-google-plus"></i> </a></li> <li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i> </a></li> <li><a href='http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-white_2x.png' alt='follow us in feedly' width='28' height='28' title="feedlyに登録"> </a></li> </ul> </div> </div> |
【】で囲んでいるところ5箇所を自分用に書き換えてください。
【自分の名前】=さらさらり
【プロフィール画像のURL】=http://wpblog.sara2jp.com/wp-content/uploads/2015/03/hiyo_150.png
【自分のツイッターID】=sarasaralli
【自分のフェイスブックID】=sarasarablog
【自分のグーグルプラスID】=110794312530102325687
今回は、ソーシャルボタンの下に、「書いた人情報」を表示するようにしました。
下記のように、「書いた人情報」を呼び出す1行(水色の行)を、
「</div><!–//article_body–>」の下に入れます。
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<footer> <?php get_template_part('sns');?> </footer> <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> <!--ループ終了--> </article> </div><!--//article_body--> <?php get_template_part('author');?> <div id="relations"> <h3>関連記事-こちらもどうぞ</h3> |
author.phpは、single.phpと同じディレクトリに置きます。
ちなみに私の場合は、子テーマを作っていて、ディレクトリは
「/themes/Gush2-child」となってます。
CSSに、「書いた人情報のSNSアイコン」用の記述を追加
style.cssに、下記に水色で示した「書いた人情報のSNSアイコン用記述」を追加します。
すべての画面サイズで適用されるように「@media{}」の外側に書きます。先頭でもいいのですが、私は、「カスタマイズした分は後ろのほうに書く」ようにしてるので、一番後ろに入れました。
2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 |
/*----------------------------------- 記事下authorSNSアイコン ------------------------------------*/ .author-sns { margin-bottom: 12px; padding: 0.3em 0em; } .author-sns div { max-width:none; } .author-sns img { margin: 8px 0px 0px -8px !important; } .author-sns ul { display: table; table-layout: fixed; width: 240px; background-color:#7dffa0; margin:0 auto !important; padding:4px 18px 0px 30px; } .author-sns ul li { display: table-cell; vertical-align: middle; text-align: center; font-size:22px !important; margin: 0 !important; padding-left: 0 !important; text-indent: 0 !important; } .author-sns ul li a { color: #ffffff; text-shadow: -1px 1px 0 rgba(255, 255, 255, 1); } .author-sns ul li a:hover { color: #ff7ddf; text-shadow: -1px 1px 0 rgba(255, 255, 255, 1); } /*-------------------------------------- カスタマイズおつかれさまでした! 不具合があればご連絡ください^^ |
まとめ
サイドバーSNSアイコンは、もともとGush2で定義されていたものなので、CSSは変更しなくて大丈夫かと思ったのですけど、article_bodyの定義を継承しちゃって表示崩れが起き、それを直そうとside-snsの定義を変えるとサイドバーのSNSボタンが表示崩れを起こし… どうにもならないので、新しいクラスauthor-snsを作りました。
そんなわけで、「Stinger5 for Ladys」よりもずっと時間がかかっちゃいました。(^_^.)
この記事へのコメントはこちら