LIGのメルマガ、はじめました!
LIGのメルマガ、はじめました!

PHPがわからなくても簡単!WordPressでオリジナルのソーシャルボタンを設置する方法

はやち

WordPressに組み込んでみよう

デザインが出来上がったところでWPに組み込んでみましょう( ˇωˇ)☝
共有用のURLを使用してリンクを設定します。

Facebookの設定の仕方

Facebookの設定はこちらです。

通常

<li class="fa">
    <a href="http://www.facebook.com/share.php?u=[記事のURL]&t=[記事のタイトル]" target="_blank">
        <i class="icon-fa"></i>
    </a>
</li>

WordPress用

<li class="fa">
    <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank">
        <i class="icon-fa"></i>
    </a>
</li>

はてなブックマークの設定の仕方

はてなブックマークの設定はこちらです。

通常

<li class="ha">
    <a class="hatena-bookmark-button social-bo" target="_blank"  href="http://b.hatena.ne.jp/add?mode=confirm&url=[記事のURL]&title=[記事のタイトル]" target="_blank">
        <i class="icon-ha"></i>
    </a>
</li>

WordPress用

<li class="ha">
    <a class="hatena-bookmark-button social-bo" target="_blank"  href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank">
        <i class="icon-ha"></i>
    </a>
</li>

Twitterの設定の仕方

Twitterの設定はこちらです。

通常

<li class="tw">
    <a href="http://twitter.com/share?url=[記事のURL]&text=[記事のタイトル]" target="_blank">
        <i class="icon-tw"></i>
    </a>
</li>

WordPress用

<li class="tw">
    <a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>" target="_blank">
        <i class="icon-tw"></i>
    </a>
</li>

Google+の設定の仕方

Google+の設定はこちらです。

通常

<li class="go">
    <a href="https://plus.google.com/share?url=[記事のURL]" target="_blank">
        <i class="icon-go"></i>
    </a>
</li>

WordPress用

<li class="go">
    <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">
        <i class="icon-go"></i>
    </a>
</li>

LINEの設定の仕方

LINEの設定はこちらです。

通常

<li class="go">
    <a href="http://line.me/R/msg/text/?[記事のURL]%0D%0A[記事のタイトル]" target="_blank">
        <i class="icon-li"></i>
    </a>
</li>

WordPress用

<li class="go">
    <a href="http://line.me/R/msg/text/?<?php the_permalink(); ?>%0D%0A<?php echo get_the_title(); ?>" target="_blank">
        <i class="icon-li"></i>
    </a>
</li>

まとめ

いかがでしたでしょうか。
WordPressで使用したタグは、リンクを設定する以下のものと、

<?php the_permalink();>

タイトルを設定する以下の2つだけでできちゃいました( ˇωˇ)✌<かんたん

<?php echo get_the_title(); ?>

今回は詳細ページや固定ページごとに向けた実装方法なので、一覧のページで実装するとなるとPHPの記述が必要になってしまいます。ご了承ください( ˇωˇ )<ごめんち

  • 1
  • 2
M o n g o