記事:ブログリニューアルの裏側 vol.1 〜メンバー機能編〜のイメージ画像

ブログリニューアルの裏側 vol.1 〜メンバー機能編〜

web制作

Writing:
上間誠
出演:
上間誠

こんにちは。上間です。
ラソナ沖縄事業所でフロントエンドエンジニアしてます。
フロントと言いながらwordpressやconcrete5などのcmsが得意です。
よろしくお願いします。

今回のラソナ沖縄スタッフブログのリニューアルではwpへの組み込みを担当しました。
なので、見た目(フロントエンド)の事は置いといて、機能的な面のアップデート具合を紹介したいと思います。
wordpressでブログやサイトを製作した事がある人向けの記事なので、wordpressって?って人はこちらを先にご覧ください。

今回のリニューアルで機能的に大きく変わったのは下記です。

  • メンバー機能の強化
  • パーマリンク(URL)の大幅な変更
  • トップページにカルーセルスライダーを設置
  • グローバルナビの設置
  • wordpressのエディタ機能の強化

今回は、「メンバー機能の強化」の裏側を紹介します。

メンバー機能の強化

内容はざっくりとこんな感じです

  1. 個人のアカウントでブログを書けるようにしたい
  2. 個人のプロフィール枠を強化したい
  3. 書いた記事は、編集部の承認後に公開というフローを作りたい

一つ一つクリアして行きたい所ですがいろいろ絡んでくるので複合的に考えます。

まずはwordpressの、デフォルトメンバー機能を知ることからですね。

こちらの記事がかなりの情報量で参考になりました。
http://nskw-style.com/2014/wordpress/users-role-capability.html

今回重要なポイントは権限グループなので、実装していきます。
まずは管理画面からです。

権限グループの設定

wordpressには権限グループっていうのがあって、それぞれの権限グループで、何ができて何ができないのかをコントロールすることができます。
権限グループについてはこちらの記事がすごく見やすいです。
http://bazubu.com/how-to-setup-wp-users-23705.html

一部引用します。

WordPress でひとり一人のログインユーザーに与える権限は以下の5つから選ぶことができる。

  • 管理者:WordPress の全ての操作が可能。
  • 編集者:コメントやリンクの管理などコンテンツに関する全ての操作が可能。
  • 投稿者:記事の投稿や編集、公開が可能。
  • 寄稿者:記事の下書きと編集のみ可能。
  • 購読者:閲覧のみ可能。会員制サイトを作りたい時などに使う可能性がある。

それぞれのユーザーに、与えられている権限は以下の図の通りだ。

WordPressの権限内訳表 管理者 編集者 投稿者 寄稿者 購読者
テーマの変更や編集
プラグインの設定
ユーザーの追加や編集
各種設定の編集
コメントの承認
カテゴリーの管理
リンクの管理
既存の記事の編集
固定ページの編集
メディアライブラリの管理
新規記事の投稿
新規記事の作成や編集
閲覧

http://bazubu.com/how-to-setup-wp-users-23705.html

素晴らしいまとめ具合ですね。見習いたいです。
上記のまとめからすると、今回必要なのはこの3つです。

  • 管理者 = 開発チーム用のアカウント
  • 編集者 = 編集部のえらい人たち
  • 寄稿者 = 社員ひとりひとり

社員を寄稿者にしておけば、自分では公開できないので、編集者権限以上のアカウントによる承認が必要です。
デフォルトの機能だけで簡単にフローができました。素晴らしい。

ですが、1点だけ問題があって、デフォルト機能の寄稿者権限ではメディアライブラリの管理ができません。。
そういう場合はカスタマイズが必要ですね。

functions.phpに以下を記述します。

function allow_contributor_uploads() {
    $contributor = get_role('contributor');
    $contributor->add_cap('upload_files');
}
if ( current_user_can('contributor') && !current_user_can('upload_files') ){
    add_action('admin_init', 'allow_contributor_uploads');
}

このソースはこちらのサイトを参考にさせて頂きました。
https://unitopi.com/wordpress-contributor-media/

これで今回の依頼内容の1と3がクリアできました。

  1. 個人のアカウントでブログを書けるようにしたい
  2. 個人のプロフィール枠を強化したい
  3. 書いた記事は、編集部の承認後に公開というフローを作りたい

残りは2の、”個人のプロフィール枠を強化したい”です。

個人のプロフィール枠を強化

デフォルト機能では足りないのでカスタムするって話しですが、管理画面内に「枠」を追加する機能といえばカスタムフィールドです。
カスタムフィールドを追加する方法もいろいろありますが、今回はカスタムフィールド界では定番中の定番のプラグイン「 Advanced Custom Fields」を使用したいと思います。

インストールから基本的な使い方はここで書くより、参考サイトの方がわかりやすいと思うのでこちらをご覧ください。
http://kotori-blog.com/wordpress/advanced-custom-fields/

追加したい項目を作成後、ユーザーの所にカスタムフィールドを出したいのでこうします。
acfposition

そしてデフォルトのいらない機能を削除します。
functions.phpに下記を記述。

// ユーザー登録 不要項目の削除
function unset_profile_fields( $contactmethods ) {
    unset($contactmethods['aim']);
    unset($contactmethods['jabber']);
    unset($contactmethods['yim']);
    return $contactmethods;
}
add_filter('user_contactmethods','unset_profile_fields');

削除できないのもあるんですよね。。
wordpressの管理画面のカスタマイズ、実はcssやjsの力技でやることが多いです。

ちなみにデフォルトのアバターはGravatarというのに登録しないと使えないっぽいので却下。
メンバー全員に登録を依頼するとなるとかなりの手間ですしね。

というわけで非表示にするcssファイルを作って管理画面に読み込ませます。

テーマフォルダ/functions/custom_user_setting/style.css

#profile-page h2{
  display: none;
}
#profile-page .user-rich-editing-wrap{
  display: none;
}
#profile-page .user-admin-color-wrap{
  display: none;
}
#profile-page .user-comment-shortcuts-wrap{
  display: none;
}
#profile-page .user-admin-bar-front-wrap{
  display: none;
}
#profile-page .user-url-wrap{
  display: none;
}
#profile-page .user-description-wrap{
  display: none;
}
#profile-page .user-profile-picture{
  display: none;
}
#profile-page .user-sessions-wrap{
  display: none;
}
.users-php .avatar{
  display: none;
}

functions.php

function custom_user_setting(){
    wp_enqueue_style( 'custom_user_setting_style', get_template_directory_uri().'/functions/custom_user_setting/style.css' );
}
add_action( 'admin_enqueue_scripts', 'custom_user_setting' );

管理画面にオリジナルファイルを読みこませる系の記事はこちらが参考になります。
http://memocarilog.info/wordpress/7570

これで管理画面は完了です。
ここまでやるとこうなりました。かなりスッキリ!
profile

次は表示側です。

テンプレートの作成

作成したいページはこの2つです。

  • メンバー一覧
  • メンバー詳細

詳細用のテンプレートは「author.php」です。
一覧用のテンプレートはなぜかデフォルトでは用意されていないんですよね。。
なので、固定ページを利用してメンバー一覧ページを作るという方法をとりました。
こちらのサイトを参考にしました。
http://bge.jp/page-writer-archive/

参考サイトではデフォルトのアバターなどを取得してますが、今回はカスタムフィールドで拡張した項目が多いのでそのままでは表示されません。
また、並び順や卒業生(退職者)を非表示にするなどの縛りもあるのでちょっとした工夫が必要です。

固定ページの作り方やテンプレートの指定方法は参考サイトを見ればすぐにわかるので、ユーザー一覧を表示させるスクリプトの部分だけを説明付きで書いてみます。(実際のコードより簡略化してます)

<?php
  // メンバーの情報を取得するのは「get_users()」
  $args = array(
    // 並び順を追加したカスタムフィールドの入社日にする
    'meta_key' => 'joined',
    'orderby'=>'meta_value',
    'order'=> ASC
  );
  $users = get_users( $args );
?>
<?php foreach($users as $user): //一人ずつリストで表示させるのでループ ?>
  <?php
    $userID = $user->ID; // ユーザーID取得、カスタムフィールドの値を取得するのに使う
    $userNiceName = $user->user_nicename; // ユーザーの登録名取得、リンク先に使う
    $userDisplayName = $user->display_name; // ユーザーの表示名取得
    $acf_status = get_field('status', 'user_'.$userID); // 卒業生かどうかの条件分岐に使う
    $acf_avatar = get_field('avatar', 'user_'.$userID); // アバター画像取得
    $acf_cover = get_field('cover_image', 'user_'.$userID); // カバー画像取得
    $acf_job = get_field('job', 'user_'.$userID); // 役職の取得
  ?>
  <?php if( $acf_status != 'graduate' ): //卒業生だったら非表示 ?>
  <li class="user">
    <a href="<?php echo get_author_posts_url().'/'.$userNiceName; ?>">
      <div class="user_cover">
        <?php if($acf_cover): //カバー画像が有れば表示 ?>
          <img src="<?php echo $acf_cover['url']; ?>" alt="<?php echo $userDisplayName; ?>のカバー画像" width="1160" height="600">
        <?php else: //カバー画像がなければデフォルトカバー画像を表示 ?>
          <img src="/resource/img/user/cover_default.png" alt="No cover image" width="1160" height="600">
        <?php endif; ?>
      </div>

      <?php if($acf_avatar): //アバター画像が有れば表示 ?>
        <div class="user_avatar">
          <img src="<?php echo $acf_avatar['url']; ?>" alt="<?php echo $userDisplayName; ?>のアバター" width="220" height="220">
        </div>
      <?php else: //アバター画像がなければデフォルトアバター画像を表示 ?>
        <div class="user_avatar">
          <img src="/resource/img/user/avatar_default.png" alt="No avatar" width="220" height="220">
        </div>
      <?php endif; ?>
      <div class="user_info">
        <ul>
            <li class="user_name"><?php echo $userDisplayName; ?></li>
            <li class="user_category"><?php echo $acf_job; ?></li>
        </ul>
        <p class="user_link">この人を知る</p>
      </div>
    </a>
  </li>
  <?php endif; ?>
<?php endforeach; ?>

ポイントは2点です。

  • 「meta_key」 -> カスタムフィールドの値で並び替え
  • 「get_field(‘カスタムフィールドslug’, ‘user_’.$userID)」 -> ユーザーIDを入れないと取得できない

通常の企業サイトをwpで構築する案件では、メンバー機能を使う事はほとんどないので、カスタムフィールドの値をとるのにユーザーIDが必要とか初めて知りました。

一覧ページはこんな感じです。
次は詳細ページですが、一覧ページとほぼ同じ書き方なので割愛します。
違いは「get_users()」か「get_userdata($author)」かで、全員のユーザー情報か一人のユーザー情報かです。
もちろん一人の場合はループさせなくてOK。

以上でテンプレートまでできました。

プラグインでパーマリンクを変更する

最後はパーマリンクの設定です。
デフォルトでは「http://ドメイン/author/author名」です。
これを、「http://ドメイン/member/author名」に変更したいとのことです。
(「author」なんて単語、馴染み薄いですしね)

「Edit Author Slug」プラグインを使用します。
使い方はこちらが詳しいです。(後半あたりにありました)
http://www.adminweb.jp/wordpress-plugin/list/index23.html

管理画面からポチポチと変更するだけですね。
超簡単にパーマリンクの変更ができました。

まとめ

かなり大雑把に紹介しましたがいかがでしたでしょうか?
少しのやりたいことに対して、データが無かった場合の処理や足りない機能はカスタムするなど、考えなければいけない事がたくさんあります。それが裏側の仕事って感じですね。

そしてお気づきの通り、全てに参考ページがあり、少しのカスタマイズで実装しています。
先人たちの知恵は素晴らしいですね。(いつもありがとうございます!)
僕も有益な記事が書けるように精進したいと思います。

次は「パーマリンク(URL)の大幅な変更」について書こうと思います。