2019.06.13こんにちは!だちたまです。WordPressでは、SNSのシェアボタンをプラグイン使って設置することができますが、自分の好みのデザインに出会う確率は低いです。それに、プラグインを使っているとブログ表示が重くなってしまう場合があります。そこで、今回はSNSのシェアボタンを、プラグインなしでカスタマイズしてみました。今回作成したのは、「Twitter」「Facebook」「はてなブックマーク」「Google+」「Pocket」のシェアボタンです。作成方法について書いていきたいと思います。カスタマイズは自己責任でお願いします。CSSのカスタマイズは子テーマを用意すると良いです。カスタマイズ前にはバックアップをおすすめします。コードを記入しても、環境によってうまく反映されない場合があるかもしれませんが、ご了承ください。月にサービスが終了していますので、「Google+」のシェアボタンを自作するコードを削除しました。一部写真が古いままですが、ご了承ください。基礎知識として、各SNSのシェア用のリンク先は以下のURLとなっています。これらを使ってソースコードを作成していきます。だちたまこちらは深く考えず、サラッと流してしまってOKです。Twitterhttps://twitter.com/intent/tweet?text=【投稿エリアに初期表示したい文字】&amp;url=【シェアする記事のURL】FaceBookhttps://www.facebook.com/sharer.php?src=bm&u=【シェアする記事のURL】&t=【投稿エリアに初期表示したい文字】はてなブックマークhttps://b.hatena.ne.jp/add?mode=confirm&amp;url=【シェアする記事のURL】&amp;title=【シェアする記事のタイトル】Pockethttps://getpocket.com/edit?url=【シェアする記事のURL】SNSシェアボタンを設定したファイルを作成するでは、上記のURLを使いつつ、シェアボタンを設定したphpファイルを作成していきましょう。ファイル名は何でも良いですが、私の場合は便宜上「sns-share.php」としました。ファイルの内容は以下のとおりです。fa-get-pocket"></i></a></li></ul></div>なお、各SNSのアイコンの表示には、「FontAwesome」のWebフォントを使用しています。はてなブックマークだけFontAwesomeのWebフォントが用意されていないので、自作しています。これについては後述しますね。Menus」を導入しましょう。Menusの使い方」の【1】をご覧ください。インストールして「有効化」しておくと、記事中にショートコードを入力するだけで「FontAwesome」のWebフォントを表示できるようになります。WordPressのブログデザインのカスタマイズにあたり、グローバルメニューの見出しにアイコンを表示する方法を探していたところ、以下...SNSシェアボタンを設定したファイルを配置する作成した「sns-share.php」ファイルを以下のフォルダに格納します。子テーマを作成しておくと良いです。sns-shar.phpの格納フォルダpublic_html/wp-content/themes/子テーマシェアボタンを表示するそれでは、作成した「sns-share.php」を記事に呼び出すことで、シェアボタンを表示してみましょう。表示したい場所に以下のコードを追加すると、シェアボタンを表示することができます。);私の場合は、ブログ記事を書き終わった後にシェアボタンを表示することにしました。Seventeen」でしたが、このテーマでは「content.php」内にコードを追加することで、上手く表示されました。content.phpの格納フォルダpublic_html/wp-content/themes/子テーマ/template-parts/postなお、コードを追加した場所は以下の場所です。ここまでで、ブログ記事に以下の様にシェアボタンの原型が表示されるようになりました。だちたまアイコンは表示されたけど、まだデザインを整える必要がありますね!画像を見るとはてなブックマークのみ表示されていませんが、ここからCSSデザインすることで表示されるようになりますので、ご安心ください。ボタンのデザインを整えていきましょう。月にサービスが終了していますので、「Google+」のシェアボタンを自作するコードを削除しました。一部写真が古いままですが、ご了承ください。SNSシェアボタンをデザインするデザインの修正は、「style.css」を修正していきます。以下のコードを追加してみてください。none;}コードの解説1行目から6行目で「はてなブックマーク」のアイコンを自作しています。公式のアイコンに近いフォントを太字にして使用しています。20行目から30行目では、シェアボタンの共通の表示設定を行っています。丸みを持たせて、影を表示するようにしました。53行目から58行目では、ボタンの表示幅と余白を設定しています。レスポンシブデザインにしており、ブラウザの幅を狭くするとボタンの幅も狭くなるようになっています。67行目から72行目では、カーソルをシェアボタンに重ねた時、ボタンを押すような動作にしました。【WordPress】SNSシェアボタンの完成これまでの対応で、このようにブログ記事にSNSのシェアボタンを表示することができました。だちたまプラグインなしでSNSシェアボタンを作成しておくと、デザインに飽きたらCSSをいじって改めてデザインを変更することができるので、自由度が高くて良いですよ♪SNSのシェアボタンを作ってみたい方は参考にしてみてくださいね。Plus」とデザインのカスタマイズdachoだちたまログマリオオデッセイの曲が名曲すぎる件。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。