複数ユーザーでワードプレスを更新する時のプロフィールとソーシャルメディアの連携方法

  • このエントリーをはてなブックマークに追加
  • 156
WordPress

WordPress を複数のユーザーで使用したい場合、ブログ記事を投稿した人ごとにプロフィールが自動的に表示されたらいいと思いませんか?

というわけで、以前「複数ユーザーでワードプレスを更新するなら知っておくべき権限や個別プロフィール表示など」という記事でブログ記事ごとにプロフィールを表示させる方法をご紹介しました(テンプレートが Twenty Eleven の場合)。

Twenty Elevenの投稿に執筆者情報が表示される

しかし、実際表示されたプロフィールはなんだか味気ないものだったので、もっとちゃんと色々情報を表示して欲しい!ということで、ちょっとカスタマイズしましょう。

そしてついでに著者・ライターごとのソーシャルメディアなんかと関連づけを行ってみましょう。

不要なプロフィールを削除する

まずは、プロフィールの項目の中で不要な項目を削除しまう。

不要なプロフィール項目を削除

テンプレートフォルダを開いて、【 functions.php 】に下記を追記すればOKです。これで、上記の3項目、AIM・Yahoo!IM・Jabber/Google Talk というなんだか馴染みのないサービスの項目が消えます。

プロフィールにソーシャルメディアを表示させる

そしたら逆に馴染みのある項目をプロフィールに表示させたいと思いませんか? 例えば Facebook や Twitter、Google+ など。そんなソーシャルメディアの情報をプロフィールに表示させるために項目を追加します。

同じく【 functions.php 】を開いて下記のタグを追記。

これで、Twitter と Facebook と Google+ が追加されました。そして Twitter には Twitter の ID、Facebook には Facebook のユニークユーザーID、Google+ には Google+ の長ったらしい数字の ID を入力しておきます。

プロフにソーシャルメディアなどの情報を追加

他にも追加したい項目があれば、【 function 】と【 return 】の間に以下のコードを追加すれば OK です。

例えば電話番号を追加したい場合は、【 任意のパラメータ 】の部分に英数字で「number」などの名前をつけて、【 任意の表示名 】のところには、プロフィール編集画面上に表示させたい項目名を「電話番号」などのように入力します。

パラメータの部分に英数字で付けた名前は、プロフィールの情報をブログ上に呼び出すのに必要になります。これで連絡先情報にいくらでも好きな項目を追加させることができますね。

自由に著者連絡先情報を追加

投稿記事にプロフィールの詳細情報を表示させる

これで準備は OK です。あとは、入力したプロフィールの項目が、ちゃんと投稿者別に表示されればいいんですが、どうも Twenty Eleven の場合デフォルトじゃ表示してくれないみたいです。なので色々カスタマイズする必要があります。

プロフィールの連絡先情報など表示させるタグ

基本的に、著者の情報を表示させるテンプレートタグはこちらです。

ユーザーID は、ループの中で使う場合は指定する必要がないとなっています。つまりループ内でこのタグを使用した場合は、投稿者の ID が自動的に適用されるということになります。

ここでは投稿した人のユーザーID をそのまま反映してくれればいいので、指定する必要はないということになります。

例えば Twitter の ID を表示させる場合は、

Facebook の ID を表示させる場合は、

ということになります。パラメータの部分は、先ほどfunctions.phpの中で指定したパラメータを入力します。Twitter の ID は【 twitter 】、Facebook は【 facebook 】、Google+ は【 google_plus 】、電話番号は【 number 】にしてましたね。

これらは先ほど任意で指定したものなので、好きなように指定できますが、デフォルトで決まっているパラメータもいくつかあります。

例えば、、、

  • メールアドレス ⇒ user_email
  • ウェブサイトURL ⇒ user_url

などがそれぞれのパラメータになります。

連絡先情報タグの使い方

では実際どうやって表示させるのか?

表示させる方法はいたって簡単で、上記のタグを差し込めば、その場所にプロフィールの連絡先情報に入力した内容が表示されるというわけです。

ただ、ソーシャルメディア系の連絡先情報はあくまでも ID なので、それを表示させてもいまいち機能してくれません。ですので、それぞれの ID は各ソーシャルメディアのソーシャルプラグインと組み合わせて使う必要があります。

例えばTwitterのフォローボタンを表示させたい場合、フォローボタンのタグのIDの部分に先ほどの連絡先情報のテンプレートタグを埋め込みます。

上記は Twitter のフォローボタンのタグですが、このタグの中にあるID部分をTwitterのIDを吐き出してくれるテンプレートタグ

に置き換えると、記事の投稿者に合わせて Twitter の ID が適用されて、投稿者用のフォローボタンとして表示されるようになります。

Facebook や Google+ なんかも同じで、ソーシャルボタンを取得すると必ずIDに該当する部分がありますので、そこを該当するテンプレートタグに置き換えればユーザーが自分のプロフィール連絡先情報に入力したIDが適用され、投稿者ごとにソーシャルボタンのリンク先も変えることができるというわけです。

執筆者のプロフィールを表示させるテーマファイルは?

あとは、プロフィールに表示させたいこれらのタグをどこに書き込めばいいのか、ということですが、これはカスタマイズのしようによってはいくつか方法がありそうですが、今回は最も簡単そうなパターンをご紹介しておきます。

(1) content-single.php内の著者情報に関する記述

テーマファイルの【 content-single.php 】を開きます。すると、55 行目辺りから【 author-info 】というidが指定されているのが分かると思います。ここら辺が著者情報に関する記述のようですね。そこだけ抜き出してみると以下のようになっています。

(2) 著者情報を編集してみる

早い話が上記の部分にテンプレートタグを書き込めば表示されます。書き込む場合は好みにもよりますが、【 <div id=”author-description”> 】の間がいいでしょう。かつ、独自に追加した部分に関してはレイアウトを考慮して、別途idを指定しておいた方がいいと思いますし、ソーシャルプラグインを表示させる場合は、リスト表示にした方がいいと思います。

例えば、、、

あとは、必要に応じてテンプレートタグを埋め込んで行けば、ユーザープロフィールに入力した情報が、執筆者に合わせて表示されるというわけです。

連絡先情報を追加した著者プロフィール

これで複数ユーザーで記事を投稿していっても、個々人のアピールもでき、それぞれが読者とのつながりも生み出せて、運用の幅がひろがるのではないでしょうか?

ちなみに、リスト形式で追加した項目を CSS 側で編集したい場合(文字色や大きさを変えたりなど・・・)は、

  • #contact-info
  • #contact-info ul
  • #contact-info li
  • #contact-info li a

などで指定できます。

ぜひ活用してみてください。

参考にさせて頂いたブログ記事

WordPress のよくあるカスタマイズコード functions.php 多め

ありがとうございました!

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメント

  1. 寺尾 より:

    とても参考になりました。
    ありがとうございます。
    一点質問があるのですが、
    ユーザーによってはツイッターアカウントがない場合もあるのですが、
    その場合、値がなければ、id=contact-info内のタグを表示させないようにする方法を教えてもらえないでしょうか。
    条件分岐でできると思うのですが、記述方法がわかりません。
    よろしくお願いいたします。

    • PresentNote より:

      寺尾さん
      コメントありがとうございます。

      以下の条件分岐タグでソーシャルボタンをタグごと囲むことで実現できると思います。
      お試しください。

      < ?php if(get_the_author_meta('twitter') != ""): ?>
      <ソーシャルボタンのタグ>
      < ?php endif; ?>

コメントをどうぞ

メールアドレスが公開されることはありません。