【wordpress】ショートコードを使ってレスポンシブなソーシャルボタンを組み込む

ショートコードを使ってレスポンシブなソーシャルボタンを作ってみました。モバイル環境ではアイコンボタンに、PC環境では文字付ボタンになります。

【wordpress】ショートコードを使ってレスポンシブなソーシャルボタンを組み込む

久しぶりの投稿です。
この間、Font awesomeがバージョン5になってこれまでのwebフォントからSVG化していましたね。新テーマを作っている最中のことだったので、コレを機に新バージョンを導入しようと四苦八苦しているところです。

それはともかく、今回は新テーマを作っている最中に練習がてらに作ったショートコードです。

いわゆるレスポンシブに対応しつつ、かつFont awesomeバージョン5に対応したソーシャルボタン群を表示するためのショートコードです。

SNSボタンを表示するショートコードを作る

プラグインの力を借りるのも良いのですが、ただでさえ重いwordpress。さらに重くなるのもナ……ということもあり、練習がてらにソーシャルボタンを表示するためのショートコードを作りました。投稿ページのタイトルとURLを取得して、各SNSにくっつけるという簡単な仕組みです。

今回は、各SNSのアイコンにFont Awesome ver.5を採用しています。したがって、returnの最後にFont awesome v5のjavascriptを読み込むようにしておきました。ページのどこかで既に使っている場合は、削除してしまっても問題ありません。

HTMLの基本構造は、<li><a><i></i><span></span></a></li>となっています。<span>の部分が、768px以下になると非表示になるようにCSSを作ります。

レスポンシブに対応するようにCSSを作る

横並びにdisplay: flexを使って、<span>部分はdisplay:noneで非表示。viewportが769px以上になったら、表示するようにCSSを作ります。各ボタンには、それぞれのブランドカラーを入れておきます。border-bottomの色は、それぞれのブランドカラーを15%暗くしたものです。

新しいテーマを作っている最中の練習で生まれたものですが、使いたい人がいましたら、ご自由にご利用くださいませ。