キャリコおすすめ

本日の人気記事

これでスッキリ！コピペだけで綺麗に統一した 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 で CSS をカスタマイズ可能にする子テーマの作成

キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

STINGER5 の新着記事をトップページだけ非表示にする方法

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

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

キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

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

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

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

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

sns.php をコピペする

HTML ソースを書き換える

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

Facebook と Google+ の場合

Feedly の場合

まとめ

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

おすすめ記事

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

【キ】 アドセンス用336px

【キ】 アドセンス用336px

関連記事

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

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

【キ】　アドセンス用336px

【キ】　アドセンス用336px