WordPressにカスタムSNSボタンを設置する手順

「Post Snippets・PHP for Code・Header and Footerを使う方法」
から、
「Code SnippetsとHeader and Footerを使う方式」
にカスタムボタンの挿入法を変えました。
 前者の方式を使ったときに書いたエントリは、




 となります。

 なお、Code Snippetsにきりかえるにあたり、JavaScriptで作動させていたあたりをPHPで処理するようにしました。
 その大まかな手順を書きます。コードも貼っておきますが、コードの内容とかについて軽く説明をつけたものはまた別記事にしようと思います。

広告

1. Header and FooterとCode Snippetsを導入

 WordPressの公式プラグインディレクトリにあるので、WordPress上で「プラグイン」→「新規追加」からの、それぞれ「Header and Footer」「Code Snippets」をインストール・有効化。

2. Code Snippetsにコードを仕込む

 CSSは変更しません。なお、CSSはJetPackプラグイン等でカスタムCSSとして追記しています。
コードは以下:

function generateSnsArea($atts){
  $atts = shortcode_atts(
    array(
    "dim" => "horizontal",
    "align" => "right",
    ), $atts, "sns_area");
  $dim = $atts["dim"];
  $align = $atts["align"];
  $icc = "icondlfll";
  $permanentlink = esc_url(apply_filters('the_permalink', get_permalink()));
  $permalink = rawurlencode($permanentlink);
  $passurl = str_replace(array("https://","http://"), array("",""), $permanentlink);
  $pagetitle =get_the_title() . " | " . get_bloginfo('name');
  $titletext = rawurlencode($pagetitle);
$sns_area = <<< EOTS
<div class="social-buttons-area {$align}">
<ul class="social-buttons {$dim}">
<li class="twitter_share"><a class="sq_share_linker" href="https://twitter.com/intent/tweet?text={$titletext}&url={$permalink}&hashtags=d_switch&via=suquiya&related=suquiya,kiricoil" target="_blank"><span class="{$icc}"></span><span class="text">Twitter</span></a></li>
<li class="facebook_share"><a class="sq_share_linker" href="https://www.facebook.com/sharer/sharer.php?u={$permalink}" target="_blank"><span class="{$icc}"></span><span class="text">Facebook</span></a></li>
<li class="hatena_bookmark"><a class="sq_share_linker" href="http://b.hatena.ne.jp/entry/{$passurl}" target="_blank"><span class="{$icc}"></span><span class="text">はてな</span></a></li>
<li class="gplus_share"><a class="sq_share_linker" href="https://plus.google.com/share?url={$permalink}" target="_blank"><span class="{$icc}"></span><span class="text">Google+</span></a></li>
<li class="pocket_in"><a class="sq_share_linker" href="http://getpocket.com/edit?url={$permalink}" target="_blank"><span class="{$icc}"></span><span class="text">Pocket</span></a></li>
</ul>
</div>
EOTS;
  return $sns_area;
}
add_shortcode("sns_area","generateSnsArea");

コードの解説はまた後ほど、記事を書こうかと思っています。

3. Header and Footerを使ってコードを挿入

Postタブとpageタブから、ショートコードを挿入します。上のコードなら[sns_area]と書きます。デフォルトでは水平向き、つまり横長ボタンの右寄せになるようになっていますが、[sns_area dim=”vertical” align=”center”]などとすることで、調整が可能です。

このようにして、コードを挿入できました。
鈍色合字アイコンフォントをこのサイトに導入したときも思ったのですが、Header and Footerそうとう汎用性が高いですね…。これのおかげで外部CSSつっこむのも楽勝でしたし。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA