ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

WordPressでカスタムフィールドからTwitterのウィジェットを生成する方法。

WordPressで記事本文にTwitterのツイートのURLを入れると、記事を表示した際に、自動的にウィジェットに変換されます。

この自動変換の機能を、本文ではなくカスタムフィールドでもできるようにしたいと思ったのですが、通常は本文以外に書いても変換してくれません。

よって今回は、カスタムフィールドの値を表示したときも、自動的にウィジェットに変換するための方法について。

広告

下準備。

今回、カスタムフィールドの追加は、もはや定番の「Advanced Custom Fields(以下、ACF)」で行っています。

カスタムフィールドのスラッグ名は「tweet」で、フィールドの型は「URL」としています。

カスタムフィールドにツイートのURLをそのまま入れる形式にしたいと思います。

ソースコード。

<blockquote class="twitter-tweet" data-lang="ja"><a href="{get_field('tweet')}"></a></blockquote>

single.phpにてウィジェットを表示させたい部分に、上記のコードを追加します。

aタグのhrefに、カスタムフィールドの値が入れられるようにしています。

なお、ACFを使っているため、カスタムフィールドの値を取得するためのコードは、get_fieldとなっています。

add_action("wp_enqueue_scripts", function() {
	wp_enqueue_script("twitter", "//platform.twitter.com/widgets.js");
});

そしてfunctions.phpに、上記のコードを追加します。

ウィジェットに変換するためのjavascriptが読み込まれることになります。

headタグでjavascript読み込みのためのコードを書くよりも、functions.phpで専用のコードを使った方が、見やすくなるでしょう。

そして実際にページを表示させたら、該当部分がウィジェットに置き換わっていることでしょう。

余談。この機能を使うことになった経緯。

たいていのブログでは、記事の最後にツイートボタンが設置されています。

ただ、ボタンを押したユーザが記事のURLを宣伝してくれても、記事の投稿者にはそのことが伝わりません。

ツイート本文に投稿者のアカウントを@つきで入れる方法もありますが、それでは投稿者宛のツイートのように見えてしまいます。

だから、投稿者がその記事のことを宣伝してるツイートを、記事を見てくれたユーザにリツイートさせる形にしました。

そうすれば、記事だけでなく投稿者のアカウントのことも知れ渡りますし、宣伝してくれたことが投稿者に通知させるのでわかりやすいです。

しかし、上記のコードはjavascriptが必要となるので、ampページで使えないのが難点でしょうか。

スマホから来るユーザの方が多いので、スマホでのページ表示を早くするampを外すわけにもいかず…。

ツイート

この記事が気に入ったら、ぜひリツイートを!