プラグインを使わずにWordPressにシェアボタンを付ける方法

せっかく書いた記事は広くシェアしてもらいたいですよね。

なので、ブログにTwitterやfacebookのシェアボタンを付けたいところですが、プラグインは増やしたくないですよね。

そもそもシェアボタンくらいは自分でコーディングしましょうというお話もあるので、とても簡単な書き方ですが、ご紹介させて頂きます。

通常のSNSのシェアボタンの作り方

順を追って説明するために、まずは普通のシェアボタンの記述を再確認します。今回は、TwitterとfacebookとLINEのボタン設置に挑戦します。

Twitterのシェアボタン

以下の{タイトル}部分にシェアする際の文章を、{URL}にシェアするページのURLを書きます。

<a href="http://twitter.com/share?text={タイトル}&url={URL}">シェア</a>

記号の{}は実際には書かないです。

facebookのシェアボタン

<a href="http://www.facebook.com/sharer.php?u={URL}&t={タイトル}">シェア</a>

Twitterと同じような感じです。

LINEのシェアボタン

<a href="https://social-plugins.line.me/lineit/share?url={URL}">シェア</a>

LINEのシェアボタンはスマホからでないと反応しません。

これらの記述をワードプレスに組み込んでいきます。

ページのURLとタイトルを取得して代入する。

あとはページのURLとタイトルさえ取得できればできそうですよね。
下記の２つの関数を使います。

ページURLの取得

<?php echo get_the_permalink();?>

ページタイトルの取得

<?php echo get_the_title(); ?>

たったこれだけです。簡単ですね。全部書くとこのようになります。

<!-- Twitter -->
<a href="http://twitter.com/share?text=<?php echo get_the_title(); ?>&url=<?php echo get_the_permalink();?>">シェア</a>
<!-- facebook-->
<a href="http://www.facebook.com/sharer.php?u=<?php echo get_the_permalink();?>&t=<?php echo get_the_title(); ?>">シェア</a>
<!-- LINE-->
<a href="https://social-plugins.line.me/lineit/share?url=<?php echo get_the_permalink();?>">シェア</a>

ボタンのデザインをする

今の状態だと、シェアという文字を押すボタンになっています。ここに画像を入れてボタンにしたいと思います。WordPressの投稿以外の所にオリジナルの画像を入れるときには、こちらのコードが便利です。

<?php echo get_template_directory_uri(); ?>

この関数で、テンプレートのルートディレクトリを取得できます。そのためテンプレートフォルダの直下にimgというフォルダを作って画像を入れておけば、このように取得ができます。

<img src="<?php echo get_template_directory_uri(); ?>/img/icon_twitter.png" alt="Twitterにシェア">

ボタンの画像は、自分でデザインするか、それぞれのSNSの公式サイトからアイコンをダウンロードすると良いと思います。

このサイトの記事の下のシェアボタンはこの方法で作っています。シンプルが一番ですね。