キャリコおすすめ
本日の人気記事
- 忍者 AdMax が Google AdSense よりも稼げる理由
- SimCity BuildIt(シムシティ ビルドイット)の美しい街の景観30選
- 【 ドレッドヘアのお手入れ方法 】よく聞かれる7つの質問にお答えします
- ソフトバンクの157で即オペレーターにつなぐ方法
- LAN ケーブルを変えるだけで通信速度が速くなるのは本当なのか?
- 缶詰ができて48年後に缶切りが発明されるという衝撃の事実w
- iPhone のテザリングでデスクトップパソコンをインターネットに接続する方法
- 日本神話における神産みの黄泉の国編が面白すぎるwww
- 次の13日の金曜日はいつ?2016年から20年先までの一覧
- ウユニ塩湖を楽しむための持ち物を3つでまとめとか言うんじゃない
これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法
2014/11/05
ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。
イギリスでは Golden Honey Nut Flakes って名前で売ってるんだけど、麻薬か何か入ってる?ってくらい依存性が強くて毎日食べちゃってます ^^;
さて、今日は昨日のエントリーの応用編と言いますか、単一記事の投稿で表示したものをトップページにも表示させます。それじゃラテ、よろしくね♪

こんにちは、ラテにゃ。
そういや SNS ボタンはトップページにもあったにゃと… せっかく単一記事に表示させてるからトップページにもという感じで実装してみたにゃ。
キャリコ
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法
Ads by Google
トップページに SNS ボタンを実装する
sns.php をコピペする
トップページにある SNS ボタンは home.php を見れば sns-top.php から呼び出してることがわかるにゃ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php get_header(); ?> <div id="content" class="clearfix"> <div id="contentInner"> <main> <article> <section> <?php get_template_part('itiran');?> </section> <!-- /section --> <?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?> <!-- ページナビ --> <?php if (function_exists("pagination")) { pagination($wp_query->max_num_pages); } ?> </article> </main> </div> <!-- /#contentInner --> <?php get_sidebar(); ?> </div> <!-- /#content --> <?php get_footer(); ?> |
昨日のエントリーで書き換えた sns.php を丸ごとコピペして sns-top.php に貼り付けるにゃ。
HTML ソースを書き換える
トップページを確認すると見た目は実装されたように見えるけど、このままだと記事一覧の一番下にある記事の URL が SNS ボタンに読み込まれてしまうにゃ。試しにツイートボタンを押してみると記事のタイトルと URL が入ってることに気付くにゃ。これをトップページの URL にするには PHP のショートコードを呼び出す記述を変更するにゃ。
Twitter とはてなブックマークの場合
1 |
<?php the_permalink(); ?> |
↓記事の URL を呼び出すコードを
1 |
<?php echo home_url(); ?> |
トップページを呼び出すコードに変更、そして
1 |
<?php echo get_the_title(); ?> |
↓記事のタイトルを呼び出すコードを
1 |
<?php bloginfo('name'); ?> |
ブログ名を呼び出すコードに変更するにゃ。
Facebook と Google+ の場合
1 |
<?php the_permalink(); ?> |
↓記事の URL を呼び出すコードを
1 |
<?php echo home_url(); ?> |
トップページを呼び出すコードに変更するだけにゃ。
Feedly の場合
そのままでオッケーにゃ。
これでトップページにも単一記事ページと同じく、綺麗に統一した SNS ボタンが実装されたにゃ。
まとめ
綺麗に統一した SNS ボタンをトップページにも配置できたかにゃ? sns-top.php を呼び出せばトップページや単一記事の上部、サイドバーなんかにも表示させることが出来るにゃ。あとは… 吹き出しの数字が増えるのを待つだけにゃ!
今日はここまで、じゃあにゃ~
この記事が気に入ったら
いいね!しよう
キャリコの最新情報をお届けします
Twitter でキャリコをフォローしよう!
おすすめ記事
【キ】 アドセンス用336px
【キ】 アドセンス用336px
関連記事
-
-
header.php を子テーマに作ってファビコンをオリジナル画像に設定する
絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …
-
-
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ
いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …
-
-
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …
-
-
STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた
1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …
-
-
STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法
絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …
-
-
STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する
○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …
-
-
STINGER5 で CSS をカスタマイズ可能にする子テーマの作成
病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …
-
-
STINGER5 でファビコンを導入するときの注意点
いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …
-
-
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …
-
-
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …