機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

WordPressにSNSシェアボタンを実装しました [メタ]

プログラミング

今まで僕は、SNSシェアボタンって表示してなかったんですけど、要望があったというかなんというか。
ブログ始めたての頃なんかは、シェアボタン表示するプラグイン5個位インストールしてどれか一番かっこいいかなーなんて選んだりしたもんですが、
今は直接PHP弄ったほうが早いっていう。

この記事をあなたが見ている現在、今回実装したこれがまだ生きているかわかりませんので、GIFをどうぞ。

https://yuis.xsrv.jp/data/GIF_lruFIfyyJ1NRW9V6S9532DMLY9zmA6il.gif

ということで、軽く書きましたので、コードをご紹介。

フォントサイズとかmarginとか、特にレスポンシブの部分なんかはテーマ依存の部分だと思うので、適当に書き換えてください。

機能

プログラミング
  • PC大画面とPC中画面~スマホの2種類にレスポンシブ対応
  • さりげなく記事タイトルをシェアタイトルにする配慮
  • WordPress以外のプレーンPHPやHTMLにも応用できるシンプルなコード
  • かっこいい。クール。ミニマリスト。
  • nofollow … WordPressプラグインでシェアボタン実装すると、nofollowがついてなくて困ったりするんですよね。以前のSEOにはやたら詳しいのにプログラミングはさっぱりな僕は頑張ってプラグイン探したけど結局見つからなくてそれでシェアボタン付けないようになった記憶がある。
  • [未実装]はてなブックマーク … fontawesomeがなかったっていうのが一番の理由です。ほんとははてブほしかったんだけどはてブの民ってウェブ詳しい人多そうだからブックマークレットとか使ってるでしょ。たぶん。
  • [未実装]JavaScript … もっと派手にすることもできますが面倒なので最低限な感じで。
  • [未実装]URLのエンコード … 忘れました。タイトル文字列に変な文字が含まれているとURLがバグるかも知れません。今の所なっていませんが。もし頻発するようであれば追記します。
  • [未実装]メタキーワードをハッシュタグにする … 実装したかったけどあと一歩のところで出来ませんでした。

参考

プログラミング

Icons | Font Awesome
はてなブックマークボタンの作成・設置について – はてなブックマーク
Simple HTML/CSS Social Media Buttons
Top 17 Free HTML5 & CSS3 Social Sharing Buttons Templates 2018 – Colorlib

コード

プログラミング

最近githubをはじめました。積極的にgistとか使っていきたいと思ってます。

github gist: https://gist.github.com/56319ba381d53ea0545513018cd32ddd#file-header-php

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する
WordPress タイトルに含む単語をそのままメタキーワードにする [SEO対策]


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu