これでスッキリ！コピペだけで綺麗に統一した 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 のショートコードを呼び出す記述を変更するにゃ。