メタ情報にSNSアイコンを表示する

2014cms187

COPYCAT.TOKYOは複数ユーザーで運営しています。

そこで、個別記事のmeta情報にもユーザーごとのSNSへのリンクアイコンを表示させてみました。
メンテナンス性を考えると管理画面で入力した内容がそのまま反映されると便利です。

表示させるために必要な手順は次の4つです。

  1. ユーザーページに入力項目を追加する
  2. 入力した項目の情報を取得
  3. 取得した情報からSNSへのリンクを表示
  4. 表示したリンクをアイコンに変更

1. ユーザーページに入力項目を追加する

項目の追加はfunction.phpに以下の書式でコードを追加します。

$contactmethods['フィールド名'] = '管理画面のラベル名';

具体的には、

function add_social_fields( $contactmethods ) {
    //項目の追加
    $contactmethods['twitter'] = 'twitter';
    $contactmethods['facebook'] = 'facebook';
    $contactmethods['google_plus'] = 'google_plus';
    $contactmethods['tumblr'] = 'google_plus';
    $contactmethods['git_hub'] = 'google_plus';
    $contactmethods['behance'] = 'behance';

    return $contactmethods;
}
add_filter('user_contactmethods','add_social_fields',10,1);

と記述します。
ちなみに、

add_filter('user_contactmethods','add_social_fields',10,1);

の最後の10,1は、add_filter関数の引数の初期値です。
今回は、おまじないだと思って試してください。
どうしても気になる方は、WP CODEXをのぞいてみてください。

エラーが無ければこんな風に項目が追加されるはずです。

2. 入力した項目の情報を取得

次に、1. で作成したSNSの項目に入力した情報を追加したいページで取得します。
COPYCAT.TOKYOでは今のところ記事詳細ページ(single.phpにだけSNSアイコンを追加しています。)

まず、管理画面で入力した内容を一番単純に取得する方法は、

<?php
    $['変数名'] = get_the_author_meta('管理画面のラベル名');
    echo '$['変数名']';
?>

と記述します。例えばtwitterのURLを取得したかったら、

<?php
	$twitter = get_the_author_meta('twitter');
	echo $twitter;
?>

と書きます。
で結果は、

こうなります。

管理画面で入力した文字列がそのまま表示されています。
まだリンクは設定していないのでクリックできない状態です。

3.取得した情報からSNSへのリンクを表示

このまま、文字列だけが表示されていてもここではあまり意味がないので、文字列にリンクを設定します。
リンクに変更するには、難しく考えず、HTMLのA(アンカー)タグを付け加えて出力できるように書き直します。

<?php
	$twitter = get_the_author_meta('twitter');
	echo '<a href=" '.$twitter.' ">TWITTER</a>';
?>

少し分かりにくいですが、ちゃんとリンクを設定できました。

get_the_author_meta();

は、author(記事を書いたユーザー)の情報を取得するWP関数です。
たとえば、名前、メールアドレス、自己紹介文などの管理画面から入力したユーザー情報を取得できるので、サイドバーに中の人(ブログを編集する人のことを「中の人」と呼ぶらしいです。)のプロフィールを表示するようなときにも使えます。

4.表示したリンクをアイコンに変更する

このままでもリンクが表示されているのでブログの運用上問題は無いのですが、わかりにくいし(個人的に)もう少し洒落た感じにしたいのでリンクをアイコンに変更します。
アイコンは画像を作成して変更しても良いのですが画像を用意するのが面倒なのでアイコンフォントを使用します。
アイコンフォントもCONDENSEIcoMoonなど調べると使いやすそうなアイコンがたくさんあっていつも迷うんですが、今回はFontAwesomeを使用します。
この記事はアイコンフォントの使い方ではないのでその部分はサラッと流して、アイコンフォントの楽しい使い方はまた別の機会に記事にします。
ということで、
まずhead(WPなら通常header.php)の

<head></head>

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

を追加します。
で、Twitterアイコンを追加したい場合には、

<i class="fa fa-twitter-square"></i>

を追加する(FontAwesomeのtwitterアイコンはラリーバードの周りが四角で囲まれているものと、ラリーバードのみの表示があります)。
これを3. までのツイッターへのリンクに適用すると、

<?php
	$twitter = get_the_author_meta('twitter');
	echo '<a href="'.$twitter.'"><i class="fa fa-twitter-square"></i></a>';
?>

これでTwitterへのリンクをTwitterアイコンに変更できました。

ただ、今の状態だとユーザーAはTwitterとFacebookを入力していてユーザーBはTwitterしか入力していない場合に、ユーザーBの記事にはリンクが設定されていないFacebookアイコンが表示されることになるので、「もし項目が入力されていたらアイコンを表示する」というif文を記述して切り分ける必要があります。

<?php
	$twitter = get_the_author_meta('twitter');
	$facebook = get_the_author_meta('facebook');

	if($twitter) {
		echo '<a href="'.$twitter.'"><i class="fa fa-twitter-square"></i></a>';
	}

	if($facebook) {
		echo '<a href="'.$facebook.'"><i class="fa fa-facebook-square"></i></a>';
?>

これで、ユーザーBがFacebookに入力していない場合にはアイコンが表示されません。

ここまでの内容を全て反映して入力項目のアイコンを表示させて下が完成したイメージです。

You may also like...