ふとブログのSNSシェアボタンと、自分のSNSプロフィールへリンクするアイコンを、もう少しおしゃれなものに変えてみようかと思い立ちました。
以前は、シェアボタンは、WP Social Bookmarking Lightという有名プラグインを使ってお手軽に実装していて、アイコンのほうは、適当なフリー素材を見繕って作成していました。しかしどちらもデザインとしては取ってつけた感が否めない。
そこで調べてみたところ、今ではSNSボタンやアイコンは、Webフォントを使って自作できるようになっていて、それを使えば公式のシェアボタンを引っ張ってくるより軽いことが判明。しかも丸型のおしゃれなものが作れるらしい。
またこのブログでは、先日常時SSL化(https化)したこともあって、一部のシェアボタンはプラグインのものがまだSSL未対応で、使用できなくなくなっていました。
そのようなわけで、この機会に、プラグインをやめて、自作してみることに。
なお、このブログではSNSシェアボタンで、シェア数を表示していませんが、シェア数表示ありのも自作できるそうです。
今回のウェブフォントを使ったアイコン自作は、
■WordPress環境
■FTPソフト(FileZillaなど)を使ってファイルをサーバーにアップロードできる環境
が必要です。
作り方の解説の大部分は途中で紹介していく外部サイトに全部書かれているので、この記事では、それらを参考にすることを前提に、要所要所の工夫したポイントについて書いていきます。、
IcoMoonを使ってWebフォントのアイコン自作
まずは、IcoMoonを使って、必要なウェブフォントのセットを作ってダウンロード。具体的には、
Icon Font & SVG Icon Sets ? IcoMoon
にアクセスして、右上の「IcoMoon App」をクリックして、フリーのアイコンセットの中から、必要なものをクリックします。
今回使うことにしたのは、twitter、facebook、tumblr、RSS、Pinterestの各ボタン。これらは無料のアイコンセットの中にすぐ見つかったのですが、そのほかのLINE、Feedly、はてブ、Pocketのアイコンが見つからず。
探せば見つかったのかもしれませんが、こちらのサイトで配布してくださっていた中に含まれていました。
Webフォントを使ったSNSアイコンの作り方【はてぶ/Pocket/Feedly/LINE】
ここで配布されていた「Icomoon」圧縮フォルダをダウンロード。このまま使うこともできますが、このセットには不足しているアイコンも追加したいので、いったんIcoMoon Appにアップロードしなおして、さっき選択したものととマージして再度ダウンロードすることにします。
いまダウンロードしたフォルダを解凍した中にあるFontsフォルダの中に、Ivomoon,svgファイルがあります。
それを、さきほどのIcoMoon Appのアイコンセット作成画面の左上にある、「Import Icons」というボタンから、アップロード。
すると、作成画面に、はてブなどのアイコンも追加されているので、フリーのアイコンと一緒に選択。
とりあえず、SNSアイコンのほかにも、使うかもしれないアイコンを加えて、こんな感じのセットにしてみました。
それぞれのアイコンの名前は、後でコードで呼び出すときに使うので、わかりやすい名前にしておくようにしてください。もともとのフリーのアイコンには名前がついていますが、アップロードしたものは自分で再度名前を入力する必要があります。
すべて選び終わったら、右下からダウンロード。
ダウンロードするとき、上記サイトで配布されている「Icomoon」と同じ名前になってしまうので、そちらはあらかじめ消しておきます。
Webフォントをサーバーにアップロード
ダウンロードした「Icommon」フォルダを解凍したら、それをサーバーにFTPソフトでアップロード。
アップロードする方法については二通りあって、まず「Icommon」フォルダをまるごとアップロードする方法についてはこちらで説明されています。
丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】
しかし、フォルダをまるごとアップロードすると、フォルダの中にあるcssァイルをheader.phpで別途指定する必要があって、あとあと何をどうやったのか忘れそうなので、以下のサイトのほうの手法を選択。
アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法 | キャリコ
こちらは、フォルダ内のfonsフォルダだけをアップロードして、アップロードしなかったcssファイルを、子テーマのcssに書き込んでしまうというもの。こうすれば、最小限のファイルだけアップロードして、cssは一つにまとめておけるので、ややこしくならずにすみます。
上記サイトでも説明されていますが、フォルダ内のcssの内容をコピーして、子テーマのstyle.cssに書き込むときには、fontsフォルダをアップロードした場所のディレクトリの情報を書き換える必要があります。
もともと
src:url(‘fonts/…
になっていますが、たとえば子テーマのフォルダの中にfontsフォルダをアップロードした場合は、
src:url(‘/wp-content/themes/子テーマのフォルダ名/fonts/…
に修正する必要があります。
めんどくさいようなら、一つ目のサイトで説明されていた手順でやってしまってもいいかと思います。
テンプレートファイルを作る
次に、新しくテンプレートファイルのphpを作って、子テーマのフォルダ内にアップロードします。名前はSnsButton,phpなど適当に。
テンプレートファイルを作らずに、直接SNSボタンを表示させたいところにコードを記載することもできますが、コードが長いのと、いろいろな場所に表示させたい場合、テンプレートで呼び出せたら便利なのとで、別にphpファイルを作ります。
テンプレートファイルについて詳しくはこちらの記事などを参照してください。テンプレートファイルというのは、いわば定型文機能みたいなもので、同じコードを色んなところで呼び出せるようになります。
[WordPress]編集がし易くなる！テンプレートファイルの3つの管理方法
作ったテンプレートファイル SnsButton,phpには、以下のサイトなどで公開されているSNSボタン用のHTMLソースコードを記載。
(テンプレートファイルとは何なのか、どんなメリットがあるのかわからないような場合は、下記サイトの指示に添って、直接テーマファイルにソースコードを貼り付けるようお勧めします。わたしもテンプレートファイルについて知らないころはお手軽にそうやっていました)
丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】
丸いSNSシェアボタンを実装したらページが軽くなった！【テーマ：twenty-fourteen レスポンシブ】 | TomFac
それぞれ、SNSのWebフォントを呼び出しつつ、シェアボタンとしてのリンクをつけているソースコードですが、具体的には
<span class=”icon-フォント名”></span>
の部分でそれぞれのSNS用のフォントを呼び出しています。それぞれのフォント名は、さきほどアイコンセットを作ったときにつけた名前です。いましがた修正して追加したcssのコード内でも確認することができます。cssを見てみると、
.icon-フォント名:before {
という部分があります。ここでフォント名を確認できるので、必要なフォント名をコピーしてきて、さっきの<span class=”icon-フォント名”></span>の中に貼り付ければ、各Webフォントを引っ張ってこれます。
それぞれのフォントに、SNSのシェアボタンとしての機能を持たせるためのリンクは、上記サイトのコードを参考にしていますが、Pinterestなど、自分で作る必要があったものについては、こちらのサイトを参考にしています。
Facebook や Twitter などの SNS ボタンをオリジナルの画像やテキストで実装する方法 | BLOG | Takumi Hirashima Artworks
シェアボタンの設置方法（オリジナル画像用） | 集の一期一会
Pinterestは、とりあえずこんな感じのコードに。
[code]??? <li class=”sns_circle pinterest”><span class=”icon-pinterest”></span><a href=”https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $image[0]; ?>&description=<?php echo get_the_title(); ?>”>Pinterest</a></li>[/code]また、twitterのシェアボタンなどURL取得部分が、さっきのサイトのソースコードだと
url=<?php the_permalink(); ?>
になっていますが、このままでは日本語URLの記事がある場合は、ツイートしたときにリンクが無効化してしまうので、エンコード処理を入れて、
url=<?php $url = get_permalink(); echo urlencode($url); ?>
といったコードに変えておく必要があります。
詳しくはこちらを参照しました。
解決！チャットワークのシェアボタンとEightのシェアボタンで日本語URLの記事がエンコードできなかった件。 | WEBマスターの手帳
日本語エンコードに対応したtwitterのコード全体としてはこんな感じ。
[code]<li class=”sns_circle twitter”><span class=”icon-twitter”></span><a href=”https://twitter.com/share?url=<?php echo $url_encode ?>&text=<?php the_title(); ?>”></a></li>[/code]<?php echo $url_encode ?>部分が、エンコードしつつURLを取得、<?php the_title(); ?>部分が記事タイトル取得です。これで、日本語URLの記事でも、URLとタイトルをツイートできるシェアボタンになります。
他のtumblrのシェアボタンなども、先程のサイトのソースコードを参考にしつつ、URL取得部分に赤字のコードを、タイトル取得部分に青字のコードを貼り付けて作り変えます。
SNSのシェアボタンではなく、サイドバーなどに置く、自分のSNSプロフィールへのアイコンにする場合は、
[code]??? <li class=”sns_circle facebook”><span class=”icon-facebook”></span><a href=”自分のフェイスブックページのURL”></a></li>[/code]といった具合に、リンク部分のソースコードを、自分のプロフィールのURLに書き換えればOKです。
スタイルシートの記載
次に、やはりさきほどのサイト
丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】
丸いSNSシェアボタンを実装したらページが軽くなった！【テーマ：twenty-fourteen レスポンシブ】 | TomFac
で公開されているコードのうち、修飾用のcssコードも、子テーマのstyle.cssに追加。必要に応じて、フォントの大きさや、角の丸みなどを変えます。
Pinterestやtumblrなど追加する場合は、
[code].sns_circle.pinterest{??? background-color: #dd4b39;
}
.sns_circle.tumblr{
??? background-color: #35465c;
}[/code]
というようにSNSアイコンの色を調べて追加してやるとOK。
テンプレートタグで呼び出す
最後に、SNSボタンを挿入したい所に、テンプレートタグを記載して呼び出します。テンプレートファイルの名前をSnsButton,phpにした場合は、
[code]<!– IcoMoon SNSボタン –><?php get_template_part( ‘SnsButton’ ); ?>[/code]
といった記述を呼び出したい場所に挿入します。
記載する場所は、single.php、content.php、content-single.phpなどの単一記事の投稿や、page.phpなどページの投稿などのphpファイルの中の、記事冒頭なら</header>の下、記事下なら<footer>の上など。
使用しているテーマによって異なるので、バックアップを取りつつ、適切な位置に表示できるよう試してみてください。
うまくいけば、記載した場所にシェアボタンが表示されるようになります。
ちゃんとシェアボタンとしてリンクが機能しているか確かめるために、必ず自分で使ってみてください。また日本語URLのページがあるようなら、そちらでも別途正常に機能するか試しておく必要があります。
シェアボタンではなく、自分のSNSプロフィールページへリンクするアイコンを作る場合は、ウィジェットや通常の投稿記事やページ内ではテンプレートタグは使えません。
かといって、ソースコードをそのまま貼りつけようとすると、ウィジェットはともかく、投稿記事内ではうまくいきませんでした。
そこで、テンプレートファイルをショートコードで呼び出すよう指定する方法があったので、子テーマのfunction.phpに記述して、どこでも呼び出せるショートコードを作って、投稿記事内に貼り付ければ、無事表示されました。
テンプレートファイルをショートコードで呼び出す方法については、こちらの方の記事を参考にしました。
ショートコードで任意のテンプレートファイルを読み込ませる方法 ? y.o.designers-works
正直いって、テンプレートファイルやらショートコードやらをわたしが理解したのはけっこう最近なのですが、とてつもなく便利で、役立ちますね。覚えてよかった。
ここまでやっておいて…なのですが、結構SNSシェアボタンのリンクの作成などが大変で、考えてみれば、もしSNS側の仕様が変わったら、自分で修正しなければならなくなります。
自分のSNSプロフィールへのリンク用のアイコンぐらいなら、全然問題ないですが、シェアボタンのほうはけっこうややこしいので、デザインや読み込み速度にこだわらない限りは、WP Social Bookmarking Lightなどの有名プラグインにおまかせしておくほうが後々メンテナンスが楽かもしれないと思いました…。
