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

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

鈍色スイッチ

SNSアイコンをWordPressにプラグインで追加する

https://donsyoku.com/website/sns-icon-with-plug-in.html

このブログ解説から少しして、SNS共有アイコンをPostの上下に追加してみました。（ウィジェットはJetPack使用）使ったプラグインよくあるWordPress用のSNS共有アイコン追加を主とした専用プラグインは使っていません。（ウィジェットは除く）じゃあなに使ったんだよ、というと、もう少し汎用的なプラグインです。要するに、コード書いて作動させる順番から言うと、PHP Code For PostsCode SnippetsHeader and Footerです。いずれも人気プラグインですね。全てWordPressの公式プラグインディレクトリからインストールできます。どうやっ...

鈍色スイッチ

カスタムSNSボタン、配置！

https://donsyoku.com/website/custom-sns-button0.html

かねてより考えていたカスタムSNSボタンを、ついに配置いたしましたー！IcoMoonでがんばってアイコンフォントを作成してのものです。またそのうちソースコードを張ろうと思いますが、とりあえずあれです、Post Snippetsは使ったので、PHPの変数はちょいと使ってるかもしれませんが、SNSボタンのためのパーマリンク取得とかはJavaScriptでやってみました。ふと、静的ホスティングしか出来ない環境ならどうSNSボタン設置したらいいのかなと思ったもので…。でもまあ、JavaScriptって結局ブラウザ側で処理してもらう感じなので、それもどう...

鈍色スイッチ

カスタムSNSボタンについて

https://donsyoku.com/zakki/code-of-custom-sns-button-1.html

またのちのち組み替えるつもりですが、カスタムSNSボタンを構築するのに使ったコードを書いておきます。なお、PHPは一部で、タグの属性をJavaScriptを使って適宜書き換える形です。多分普通のブログとかでも、アイコンを画像で代用とかすれば、それなりに使えるときは使えるのではないかなあ。あとアイコン部分に使うアイコンフォントは勿論鈍色合字アイコンフォントです。HTML:<div class="social-buttons-area {align}"><ul class="social-buttons {bsdim}"><li class="twitter_share"...

　なお、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つっこむのも楽勝でしたし。