ツイッターのアカウントを自動でリンクにするには[WordPress]



ツイッターのアカウントを自動でリンクにする

例えば、Twitterで見かけた記事を引用するとき、または、記事の内容を引用するために誰の記事から引用したのかを明記するために、Twitterのアカウントをリンクにして、その人のTwitterのページヘ誘導したい、なんてことはよくあるはず。

例えば、投稿画面で「@sakanoueno_maro」と入力すると、「@sakanoueno_maro」のようにしたいわけです。

Twitterのアカウントのページは
https://twitter.com/アカウント名
になっているので、
<a href=”https://twitter.com/アカウント名”>@アカウント名</a>
のように書けば、リンクになります。

しかし、いちいち上のように書くのは面倒くさいので、自動でリンクに変換できないものかな?とやり方を探していました。

PHPでプログラムを書くときは正規表現というものを使って、文字列のパターン(今回はTwitterのアカウント名)に一致するものを別の文字列に変換することができます。
preg_replace()
という関数を使います。
参考URLpreg_replace(PHP マニュアル)

「http(s)://~」といったURLをリンクに変換するときもこの関数を使うんだけど、関数を使う方法は知っていても、WordPressのどこにどうやって書けばいいのかわからなかったんです。

ググってみると、こちらの記事に載っていました。

WordPressで記事内に書かれたTwitterアカウント名を、@Anywhereを使わずに自動リンク化する方法。正規表現で置換します。

参考にさせていただいて、設定してみたいと思います。

function.phpに追記する

今回みたいに機能を追加するときは、「function.php」に記述を追加すればいいようですね。
早速追記して試してみたいところなんですが、「function.php」に記述しちゃうと、テーマを更新した時に消えちゃいますよね?こういう場合はどうすればればいいか?

テーマを更新してから、追記し直す。

はっきり言って、これは面倒くさいです。忘れる可能性もあるし。
こういう時のために、「子テーマ」というものがあるのですね。

「子テーマ」は「親テーマ」の設定を引き継ぎ、「親テーマ」にない機能やデザインを追加するためのものです。
ぼくはSimplicityというテーマを使っているんだけど、子テーマに追加のCSSを記載しています。

Simplicityの子テーマにも「function.php」がありました。こちらに記述を追加してみます。

子テーマのfunction.phpの一番末尾に下記の記述を追記します。

ただこれだとツイッターのアカウントをクリックした時に同じウインドウで遷移してしまいますから、別ウインドウで開くようにしてみましょう。

「target=”_blank”」を追加することで、別ウインドウで開くようになります。

ついでだからTwitterのアイコンも入れたい

これでTwitterのアカウントをクリックすると、そのユーザーのTwitterのページヘリンクするようになったわけですが、どうせならもう一手間加えてツイッターのアイコンを前に表示するようにしてみましょうか。

Twitterのアイコンを表示するには「Webアイコン」というものを使います。Webアイコンについては、@MrYhiraわいひらさんのこちらの記事に詳しく載っています。

日本のブログでの利用頻度は高いけど、アイコンフォントがないfeedly、はてブ、ポケット、LINEフォントなどをダウンロードできるようにしました。あとそれの利用方法です。

今回はとりあえずTwitterのアイコンを表示したいだけなので、Twitterのフォントのみダウンロードしました。

ファイルは「icomoon」フォルダごと、「Simplicity-Child」へアップロードしました。
わいひらさんの記事に従って、「header-insert.php」に下記の記述を追加します。

このままだとフォントが黒く表示されるので、Twitterの色に合わせてみます。「style.css」に下記の記述を追加します。

さて、これでfunction.phpに記述したadd_twitter_link()関数の内容を下記のように書き換えます。

<span class=”icon-twitter”></span>
と書かれているところがTwitterのアイコンを表示している部分です。
classの”icon-twitter”は、ダウンロードしたフォントに名前がつけられていますので、その名前を指定します。

これで、Twitterのアカウントが下記のようなリンクで表示されるはずです。

@sakanoueno_maro

なるほどね

子テーマのfunction.phpに追記して機能を追加できるなら、本体のfunction.phpをいじる必要はないですね。
いろいろいじってみるかな?という気になってきますね。

ファイルをいじる際は、必ずバックアップを取ってからにしてくださいね!

「週末写真愛好家」兼「週末Web随筆家」。

ちっちゃい花を撮ることがめっちゃ大好き。愛機はCanon EOS Kiss X7。50mm単焦点レンズと60mmマクロレンズで小さな花を撮ることに喜びを感じています。
職業はWEBのシステム屋。「まろ」と呼んでいただけるとうれしいです。

いわゆる「画像直リンク」、画像の複製は固くお断りいたします。
スポンサーリンク
この記事が気に入ったら
いいねをお願いします!

最新記事をお届けします。

シェアしていただけるとうれしいです

フォローよろしくお願いします

関連記事



スポンサーリンク