【WordPress】プラグイン無し!自作SNSボタンを作ろう【8種類】

こんにちは、まさき(@masaki_Prog)です。

このブログはバズ部さんの無料テーマ「Xeory Base」を使っています。

このテーマは非常に使いやすいのですが、SNSボタンはあまり見栄えがよく無いですし、数も少ないです。

そこでブログの軽量化もかねて自作のSNSボタンを作ってみました!

今までプラグインに頼っていた方にもおすすめですよ!



初期のSNSボタン

テーマをダウンロードした当初のSNSボタンはこんな感じでした。

数も最低限の4つで少ないし、Google+のボタンがガタガタしています。

また、思った以上に重いのか記事を開くとボタンの表示が遅れてしまいます。

そこで、軽いウェブフォントとCSSで自作することにします!

ウェブフォントをダウンロード

ウェブフォントとは、Webサーバー上にフォントファイルを置いて使えるようにしたものです。

僕が使っているテーマ「Xeory Base」は初めから「Font Awesome」をというWebフォントをサーバーから引っ張って来ています。

このページのSNS、サイト内検索などは全てWebフォントです。

このように本当にいろんなものを表示できます。

さらに、画像では無く文字なのでサイトも重くならず表示も早くなります。

詳しくはこちら

しかし、「Font Awesome」には今回必要なSNSのアイコンがなかったので別のものを使います。

それが、 「IcoMoon」です。

無料でも幅広いWebフォントがあり、自分で作ったフォントをアップロードして使えるようにできます。

今回は、SNSのアイコンを作って配布してくださっている方のものを使わせていただきます。

上のページからZipファイルをダウンロードし解凍します。

解答ができたら「IcoMoon」のサイトへ移動します。

公式サイトIcoMoon

左上の「Import Icons」を選択して、先ほど解凍したフォルダの、

/icomoon/fonts/icomoon.svg

のSVGファイルを選択します。

そうしたら、上の方に各種SNSのアイコンが追加されたと思いますので、そのほかにも使いそうなものを選んで「Generate Font」をクリックします。

今回は、プロフィール欄に使うように、

人のアイコン

メールのアイコン

も一緒に選んでおきました。

この先で僕と同じようにボタンを作るならそれっぽいのを選んでおいてください。

その後、実際に記事上で使う用の名前をつけて、ダウンロードします。

以下のようにあとでもわかりやすい名前をおすすめします。

ダウンロードしたら先ほどと同じように解凍しておきましょう。

Webフォントのアップロード

次は、解凍したフォルダをサーバー上にアップロードします。

ここからはファイルを編集しますので子テーマにアップロードしましょう。

FTPソフトなどを使って子テーマ直下にアップロードしましょう。

もしレンタルサーバーが「エックスサーバー」なら、独自のファイルマネージャサービスを使うこともできます。

XSERVERのFTPソフトはこちら

/自分のURL/public_html/wp-content/themes/xeory_base-child/

子テーマ直下にicomoonフォルダとその中身の全てをアップロードできたら、

「header.php」の中に<head>要素の中に

と書き込みます。
これでフォルダが読み込まれる状態になります。

SNSボタンを作る!

ボタンを作るに当たってこちらの記事を参考にさせていただきました。
ありがとうございました。

この記事では1行で4種類のボタンを実装していたので、2行にすることで8種類まで増やしました。

まずは、記事下に設置するボタンを作ります。

sns.phpというファイルを作り、以下をコピペします。

各種リンクはご自分のものに書き換えてください!
さらに、そのCSSをstyle.cssに記述します。
強引に書き足したため、かなり汚くなっています。
あとは、記事下ならばfooter.phpの好きな位置に
と記述します。

これで記事中のSNSボタンは設置完了です。

ウィジェットに追加

紹介したページのようにウィジェットにSNSボタンを表示します。

ただし今回は、sns.phpと同じボタンではなく、自己紹介ページとお問い合わせページを表示したかったため多少の変更をしています。

まずは、ウィジェットに追加するかめにfunction.phpに書き足していきます。

先ほどと同じように、今度はsns_sideber.phpという名前のファイルを作ります。

さらに、ウィジェット用のCSSとしてstyle.cssにさらに書き足します。

最後に、ウィジェットのSNSを追加しておしまいです。

まとめ

これでSNSボタンの設置は全て終了しました。

紹介した記事のコードにかなり助けらました。

ほんとうにありがとうございました!

初期のかっこ悪いボタンと比べてかなりよくなったと思います。

今後は、さらにこのブログをよくするためにカスタマイズしたいです!

それでは読んでいただきありがとうございます!

フォローなどしていただけると喜びます。

ではまた〜

スポンサーリンク
スポンサーリンク

コメントを残す

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