ねかつちう。

お金や節約に敏感な20代30代のための物欲系雑記ブログ

トップ > Wordpress > 【プラグイン不要】Wordpressで使えるシェアボタンのサンプルコード

【プラグイン不要】Wordpressで使えるシェアボタンのサンプルコード

Wordpress

[PR]このページにはアフィリエイトプログラムによる商品・サービス等の広告を掲載しています

Wordpressで使えるシェアボタンのサンプルコードを共有します。

関数で記事名とURLを取得してくれるシンプルなコードが欲しかったのですが、希望どおりのものが見つからないので作ってしまいました。

完成イメージ

f:id:nekatsu:20210829120429p:plain

余計な要素を入れていないので、軽量で設置も簡単かと思います。Twitter IDなどのユーザー情報も一切不要なコードなので、テンプレかphpの使えるテキストウィジェットなどにそのままコピペして使ってください。（全部のボタンを表示するとスマホ画面では2段になってしまうので、4つまでにしておくのが無難です）

  1. <!-- twitter -->
  2. <a href="https://twitter.com/share?url=<?php echo get_the_permalink(); ?>&text=<?php echo get_the_title(); ?>"rel="nofollow noopener"target="_blank" class="button_all button_tw"><i class="fab fa-twitter"></i><span>Twitter</span></a>
  3. <!-- facebook -->
  4. <a href="http://www.facebook.com/share.php?u=<?php echo get_the_permalink(); ?>" rel="noopener noreferrer" target="_blank" class="button_all button_fb"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
  5. <!-- hatena -->
  6. <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow" class="button_all button_hb"><i class="fas fa-bold">!</i><span>Hatena</span></a>
  7. <!-- pocket -->
  8. <a href="http://getpocket.com/edit?url=<?php echo get_the_permalink(); ?>&title=<?php echo get_the_title(); ?>" rel="nofollow" rel="nofollow" target="_blank" class="button_all button_pk"><i class="fab fa-get-pocket"></i><span>Pocket</span></a>
  9. <!-- feedly -->
  10. <a href="https://feedly.com/i/subscription/feed/<?php echo get_feed_link(); ?>" target="blank" rel="nofollow" class="button_all button_fd"><i class="fas fa-rss"></i><span>Feedly</span></a>
  11. <!-- line -->
  12. <a href="https://social-plugins.line.me/lineit/share?url=<?php echo get_the_permalink(); ?>" class="button_all button_li"><i class="fab fa-line"></i><span>LINE</span></a>

なお、twitterにIDやハッシュタグを入れたい場合は、以下のコードとしてください。（オレンジ部分が上記との差分となります）

  1. <a href="https://twitter.com/share?url=<?php echo get_the_permalink(); ?>&via=ここにツイッターIDを記述（＠は不要）&text=<?php echo get_the_title(); ?>&hashtags=ここにハッシュタグを記述（#は不要）"rel="nofollow noopener"target="_blank" class="snsbutton_all snsbutton_tw"><i class="fab fa-twitter"></i><span>Twitter</span></a>

最後に、CSSで見た目を整えます。（CSSに関してはこちらのサイト様を参考にさせていただきました）

若干補足すると、全てのボタンに共通のクラス（button_all）と、ボタンごとのクラス（button_twほか）を使用しています。ボタンの形を変更したり動きをつけたい場合には前者を、ブランドカラーなどボタンごとの設定を変更したい場合は後者をいじってください。

  1. /* シェアボタン共通 */
  2. .button_all{
  3. border-radius:4px;
  4. position:relative;
  5. display:inline-block;
  6. font-family:'Verdana',sans-serif;
  7. font-size:14px;
  8. color:#fff!important;
  9. text-decoration:none;
  10. text-align: center;
  11. width:100px;
  12. margin: 2px -5px 3px 5px;
  13. padding:6px 0;
  14. }
  15. /* Twitter */
  16. .button_tw{
  17. background:#55acee;
  18. }
  19. /* Facebook */
  20. .button_fb{
  21. background:#3b5998;
  22. }
  23. /* Pocket */
  24. .button_pk{
  25. background:#ef3f56;
  26. }
  27. /* はてブ */
  28. .button_hb{
  29. background:#1ba5dc;
  30. }
  31. /* Feedly */
  32. .button_fd{
  33. background:#6cc655;
  34. }
  35. /* LINE */
  36. .button_li{
  37. background:#00c300;
  38. }
  39. @media print, screen and (max-width: 599px) {
  40. .snsbutton_all{
  41. font-size: 12px;
  42. width: 80px;
  43. }

以上となります。