ユーザー用カスタムフィールドを作る＠WordPress

WordPressでカスタムフィールド（他にタクソノミー、ポストタイプ等も）を作るのに便利なプラグイン「Toolset Types」ですが、「ユーザーフィールド」にも対応してます。

この場合の「ユーザー」はWordPressサイトのユーザーです。（管理者や編集者、投稿者といった）

なので、利用するケースとしては複数人の投稿者で運営しているメディアサイトとか。

講師やセラピストを集めたサイト、とにかく「投稿者の情報自体もコンテンツとして扱う」場合に使えると思います。

Toolset Typesの導入はこちら

blog.showzine.co

Toolset Typesでカスタムフィールドを作る例はこちら

blog.showzine.co

ユーザーフィールドを作る

管理画面の左側メニュー「Toolset」から「ユーザーフィールド」へ進みます。

f:id:showjinx:20160707134142p:plain

遷移先の画面で「新規追加」または「新規グループを追加」をクリックします。

f:id:showjinx:20160707134159p:plain

「新規のUser Field Groupを追加」画面でこのように入力して保存します。

f:id:showjinx:20160707134217p:plain

架空のセミナー紹介サイトで、そこに登録しているセミナー講師たちの詳細な情報を管理、制御するためのユーザーフィールドという設定です。

「このグループの表示場所」はこのままで問題ありません。「全てのユーザー役割に表示済み」というのは翻訳がちょっとおかしいですが、ようするに「全てのユーザーグループに表示＝利用可能」ということです。

逆にいうと、ここを設定することでユーザーグループごとにユーザーフィールドを分けて作ることが出来るということです。ユーザーグループもWordPressデフォルトで用意されているものだけでなく、例えばプラグイン「User Role Editor」なんかを使って新規に作ることも出来るので、これらを組み合わせるとより柔軟に設定出来ます。

このUser Field Groupを保存したら、あとはオレンジ色の「新しいフィールドを追加する」をクリックして、必要なフィールドを追加していきます。このへんの操作は前述で紹介している「カスタムフィールド」の実装例と同様です。

f:id:showjinx:20160707134232p:plain

こんなフィールドを作ってみました。WordPressのデフォルトでもユーザー名、姓名、ニックネーム、プロフィール情報は設定出来るので、そこを組み合わせて使います。

フィールドを追加したら保存し、ユーザーの編集画面を確認してみます。

f:id:showjinx:20160707134249p:plain

既存のフィールドのあとに、今回作成した「講師情報」というユーザーフィールドが追加されています。

担当（専門性）と講師ランクだけ必須としています。（講師ランクは初期値を設定）

こんな感じに登録してみました。

f:id:showjinx:20160707134305p:plain

「プロフィールを更新」して、このデータをユーザー情報に反映させます。

ユーザープロフィールを表示する

ユーザー情報（プロフィール）を表示するテンプレートは「テーマディレクトリ/author.php」です。このテンプレートがない場合はindex.phpが使用されますが、分けたほうが何かとやりやすいので、author.phpを作ります。

まずはauthor.phpを作ってデフォルトのユーザープロフィールを表示出来るようにします。

author.php

<?php
    // get_userdata関数を使ってユーザ情報を取得し、変数user_dataに代入
    $user_data = get_userdata($author);
?>
<table class="user">
    <tr>
        <th>ユーザー名</th>
        <td>
            <?php
                echo ($user_data->user_login);
            ?>
        </td>
    </tr>
    <tr>
        <th>ユーザーID</th>
        <td>
            <?php
                echo ($user_data->ID);
            ?>

        </td>
    </tr>
    <tr>
        <th>ブログ上の表示名</th>
        <td>
            <?php
                echo ($user_data->display_name);
            ?>

        </td>
    </tr>
    <tr>
        <th>氏名</th>
        <td>
            <?php
                echo ($user_data->last_name);
                echo '&nbsp';
                echo ($user_data->first_name);
            ?>

        </td>
    </tr>
    <tr>
        <th>ユーザーグループ</th>
        <td>
            <?php
                echo implode($user_data->roles);
            ?>
        </td>
    </tr>
    <tr>
        <th>プロフィール情報</th>
        <td>
            <?php
                // デフォルトのプロフィール情報を出力（nl2brを使ってp要素で段落をマークアップ）
                echo nl2br(($user_data->description));
            ?>
        </td>
    </tr>
</table>

ユーザー名、ユーザーID、ブログ上の表示名などなど、デフォルトで用意されているユーザーフィールドの値を出力してみました。この他にもありますが、それは必要に応じてCodexの関数リファレンスを確認してください。

関数リファレンス/get userdata - WordPress Codex 日本語版

ユーザープロフィールを確認する

ユーザープロフィールをフロント側で確認するには

WordPressサイトURL/author/ユーザー名

になります。

前述のコードだとフロント側ではこんなふうに表示されます。

f:id:showjinx:20160707134440p:plain

ユーザーフィールドを出力する

追加したユーザーフィールドを出力するように記述を追加していきます。

公式リファレンス wp-types.com

APIを利用して以下のように記述します。第一引数がフィールドのスラッグになります。

<?php echo(types_render_usermeta_field("speciality", array())); ?>

デフォルトのユーザーフィールドと組み合わせて整形しました。

<?php
    $user_data = get_userdata($author); // get_userdata関数を使ってユーザ情報を取得し、変数user_dataに代入
    $uid = $user_data->ID; // ユーザーIDを取得し変数uidに代入（プロフィール画像の取得に使用）
    $firstname = $user_data->first_name;
    $lastname = $user_data->last_name;
?>
<table class="user">
    <tr>
        <th>担当（専門性）</th>
        <td>
            <?php echo(types_render_usermeta_field("speciality", array())); ?>
        </td>
    </tr>
    <tr>
        <th>講師氏名</th>
        <td>
            <?php
                echo ($user_data->last_name);
                echo '&nbsp';
                echo ($user_data->first_name);
            ?>

        </td>
    </tr>
    <tr>
        <th>講師ランク</th>
        <td>
            <?php echo(types_render_usermeta_field("grade", array())); ?>
        </td>
    </tr>
    <tr>
        <th>プロフィール情報</th>
        <td>
            <?php
                // デフォルトのプロフィール情報を出力（nl2brを使ってp要素で段落をマークアップ）
                echo nl2br(($user_data->description));
            ?>
        </td>
    </tr>
    <tr>
        <th>講師のホームページ</th>
        <td>
            <?php echo(types_render_usermeta_field("web-site", array())); ?>
        </td>
    </tr>
    <?php
        $img_profile = types_render_usermeta_field("profile", array("user_id" => $uid, "width" => "215", "height" => "215", "alt" => $lastname . $firstname));
        if($img_profile){
            echo "<tr><th>講師近影</th>";
            echo "<td>" . $img_profile . "</td></tr>";
        };
    ?>

</table>

画像はユーザーのプロフィール画像なので、ユーザーの氏名（WordPressデフォルトのフィールド）を変数に格納しておき、Toolset TypesのAPI利用でaltも出力しています。

画像の出力におけるオプションは後述します。

このコードでフロント側を確認するとこうなっています。（画像が登録されていない場合には「講師近影」の行がまるまる表示されません）

必須でないものは未入力の際に「空」の状態が出力されるのが見苦しいような場合はこのようにフィールドの値があるかないかで判別してif文で出力を分けるといいと思います。

f:id:showjinx:20160707134552p:plain

画像のサイズをコントロールする

前段の「講師近影」の写真は実寸は400x400ピクセルのものを縦横どちらも215ピクセルに指定してリサイズして出力しています。

縦横比を固定（決めて）という運用ルールが徹底できればいいですが、そうじゃない場合も出てきます。その場合には

縮小（サイズ指定）してクロップ（切り抜く）
縦横比を固定してリサイズ

この二通りの制御ができるので、用途、デザインとの兼ね合いで選びます。

縮小（サイズ指定）してクロップ（切り抜く）

表示領域を730x270でデザインしている場合は以下のように記述します。

<?php
echo types_render_usermeta_field("image_billboard", array("user_id" => $author, "alt" => $alt_name, "width" => "730", "height" => "270" ));
?>

中心から測って、わりといい具合に縮小、クロップされます。指定したサイズ（縦、横どちらも）を超えることがないので、出力する画像のサイズを固定でデザインしている場合にはこちらが適しているかと思います。

縦横比を固定してリサイズ

<?php
echo types_render_usermeta_field("image_billboard", array("user_id" => $author, "alt" => $alt_name, "width" => "730", "height" => "270", "proportional" => "true" ));
?>