キャリコおすすめ

これでスッキリ！コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

2014/09/13 2014/11/05

ハニーナッツクランチにハマってるキャリコ（ @calicocatxyz ）です。

ケロッグハニーナッツクランチ 180g×5個

ケロッグ

イギリスでは Golden Honey Nut Flakes って名前で売ってるんだけど、麻薬か何か入ってる？ってくらい依存性が強くて毎日食べちゃってます ^^;

さて、今日は昨日のエントリーの応用編と言いますか、単一記事の投稿で表示したものをトップページにも表示させます。それじゃラテ、よろしくね♪

こんにちは、ラテにゃ。

そういや SNS ボタンはトップページにもあったにゃと… せっかく単一記事に表示させてるからトップページにもという感じで実装してみたにゃ。

キャリコ
これでスッキリ！SNS ボタンのデザインをコピペだけで綺麗に統一する方法

Ads by Google

トップページに SNS ボタンを実装する

sns.php をコピペする

トップページにある SNS ボタンは home.php を見れば sns-top.php から呼び出してることがわかるにゃ。

<?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(); ?>

<?php get_header(); ?>

<main>

<?php get_template_part('itiran');?>

</section>

<?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?>

<?php if (function_exists("pagination")) {

pagination($wp_query->max_num_pages);

} ?>

</article>

</main>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

昨日のエントリーで書き換えた sns.php を丸ごとコピペして sns-top.php に貼り付けるにゃ。

HTML ソースを書き換える

トップページを確認すると見た目は実装されたように見えるけど、このままだと記事一覧の一番下にある記事の URL が SNS ボタンに読み込まれてしまうにゃ。試しにツイートボタンを押してみると記事のタイトルと URL が入ってることに気付くにゃ。これをトップページの URL にするには PHP のショートコードを呼び出す記述を変更するにゃ。

Twitter とはてなブックマークの場合

<?php the_permalink(); ?>

1	<?php the_permalink(); ?>

↓記事の URL を呼び出すコードを

<?php echo home_url(); ?>

1	<?php echo home_url(); ?>

トップページを呼び出すコードに変更、そして

<?php echo get_the_title(); ?>

1	<?php echo get_the_title(); ?>

↓記事のタイトルを呼び出すコードを

<?php bloginfo('name'); ?>

1	<?php bloginfo('name'); ?>

ブログ名を呼び出すコードに変更するにゃ。

Facebook と Google+ の場合

<?php the_permalink(); ?>

1	<?php the_permalink(); ?>

↓記事の URL を呼び出すコードを

<?php echo home_url(); ?>

1	<?php echo home_url(); ?>

トップページを呼び出すコードに変更するだけにゃ。

Feedly の場合

そのままでオッケーにゃ。

これでトップページにも単一記事ページと同じく、綺麗に統一した SNS ボタンが実装されたにゃ。

まとめ

綺麗に統一した SNS ボタンをトップページにも配置できたかにゃ？ sns-top.php を呼び出せばトップページや単一記事の上部、サイドバーなんかにも表示させることが出来るにゃ。あとは… 吹き出しの数字が増えるのを待つだけにゃ！

今日はここまで、じゃあにゃ～

ライター紹介

ラテ　Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

- STINGER5 SNS, Web 関連, カスタマイズ

この記事が気に入ったら
いいね！しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう！

Follow @calicocatxyz

これでスッキリ！コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

トップページに SNS ボタンを実装する

sns.php をコピペする

HTML ソースを書き換える

Twitter とはてなブックマークの場合

Facebook と Google+ の場合

Feedly の場合

まとめ

おすすめ記事

関連記事

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

STINGER5 でファビコンを導入するときの注意点

STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

STINGER5 の誰にも気づかれない自己満足カスタマイズ

ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ

STINGER5 の記事公開日の後ろに「あとで読む」の Pocket リンクを挿入する方法

ファビコンを設定したならアップルタッチアイコンも作ろう

STINGER5 でアドセンスを記事内に導入するときの注意点

これでスッキリ！コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

トップページに SNS ボタンを実装する

sns.php をコピペする

HTML ソースを書き換える

Twitter とはてなブックマークの場合

Facebook と Google+ の場合

Feedly の場合

まとめ

この記事を気に入ってもらえたらシェアしていただけると嬉しいです(*ΦωΦ*)

おすすめ記事

当ブログは不定期更新なのでこちらのボタンから購読するのが便利です(*ΦωΦ*)

【キ】 アドセンス用336px

【キ】 アドセンス用336px

関連記事

この記事を気に入ってもらえたらシェアしていただけると嬉しいです(ΦωΦ)

当ブログは不定期更新なのでこちらのボタンから購読するのが便利です(ΦωΦ)

【キ】　アドセンス用336px

【キ】　アドセンス用336px