【WordPress】簡単に更新できるメンバー紹介ページの作り方
ワードプレスで簡単に更新ができるメンバー紹介ページの作り方の紹介です。
メンバー紹介ページとは、例えば美容院サイトでの美容師の紹介、サークルのメンバー紹介、スポーツチームの選手紹介等、複数人の簡単なプロフィールを掲載するページです。
あまりHTML等を知らないクライアントさんでも、フォームに入力するだけでメンバーの追加や削除が簡単に出来るシステムの作り方を解説していきます。
1. カスタム投稿タイプを作成する
名前や写真、プロフィール等を入力する為に、カスタム投稿タイプを使用します。
このカスタム投稿タイプで入力したものを固定ページで一覧表示したものがメンバー紹介ページとなります。
今回もカスタム投稿はプラグイン「Custom Post Type UI」を使います。
タイトルに名前、アイキャッチに顔写真、コンテンツ部分にプロフィールを入力する事を想定しています。
投稿タイプを追加
メニューの「CPT UI」から「投稿タイプを追加」と進みます。
投稿タイプは以下のように設定します。
| 投稿タイプスラッグ | member_profile |
|---|---|
| ラベル | メニュー |
2. メンバー一覧を表示する固定ページを作成する
今作ったカスタム投稿を表示するためのページを作ります。
2-1. 固定ページを新規追加
メニュー「固定ページ」から新規追加で固定ページを作成します。
設定内容は以下。
| ページ名 | メンバー一覧 |
|---|---|
| スラッグ | member |
| 内容 | 空白でも大丈夫 |
2-2. メンバー一覧ページ用のテンプレートファイルを作成する
今作った固定ページにカスタム投稿を表示するためのタグを追加するので、メンバー一覧用のテンプレートファイルを作成します。
- page.php をコピーします。
- ファイル名をpage-member.phpに変更します。memberの部分は固定ページのスラッグと合わせます。
これでファイルをアップロードすると、先ほど作成したメンバー一覧ページだけ page-member.phpを使って表示されるようになります。
（まだこの時点ではカスタム投稿は表示できていません。）
ワードプレスはページによって使われるテンプレートファイルが違います。慣れないうちは、どのページでどのファイルが使われているのか分からなくなりがちなので、各テンプレートファイルにコメントアウトでファイル名を書いておきましょう。そうすることにより、実際にブラウザを開いてソースを見れば、今どのファイルが使われているかが分かるのでとても便利です。
2-3. テンプレートファイルを編集する
カスタム投稿を表示するためにpage-member.phpを編集します。
今回は下記のようにテンプレートファイルを変更します。コードを丸っとコピペでOKです。
<?php get_header(); ?> から <?php get_footer(); ?> の間にコピペ
<?php the_content(); ?>
<?php
$paged = (int) get_query_var('paged');
$args = array(
'posts_per_page' => 5,
'paged' => $paged,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'member_profile',
'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="post">
<div class="fig"><?php the_post_thumbnail(); ?></div>
<div class="summary">
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div class="post">
<h3>Not Found</h3>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>
<?php endif; ?>解説
| 1行目 | 固定ページの投稿ページで入力した内容を表示するコードです。いらなければ消しても問題なし。 |
|---|---|
| 5行目 | カスタム投稿を表示する件数 |
| 9行目 | カスタム投稿に設定したスラッグ |
| 18行目 | カスタム投稿で設定したアイキャッチ（顔写真）を表示 |
| 20行目 | カスタム投稿で入力したタイトル（名前）を表示 |
| 21行目 | カスタム投稿で入力した内容（プロフィール）を表示 |
以上でテンプレートファイルの編集は終わりです。これでカスタム投稿で入力した項目がメンバー一覧ページに表示されるようになります。
次は、さらに細かい設定をしていきます。
3. 肩書き等の項目を追加する
プラグイン「Advanced Custom Fields」を使って、その他の項目の入力欄を作成します。
ここまでの設定で、投稿タイプのタイトルに名前、アイキャッチに顔写真、コンテンツにプロフィールを入力することを想定して作成しましたが、これに加えて肩書きや年齢、チーム名等、色々な項目も追加できるようにします。
とても便利なプラグインなのでお勧めです。
それではカスタム投稿に「肩書き・役職」という項目の入力欄を作ってみます。
3-1. Advanced Custom Fieldsの設定
- メニューの「カスタムフィールド」から「新規追加」をクリックし、フィールドグループを作ります。グループ名は分かりやすく「メンバー紹介」とします。
- 「フィールドを追加」をクリックして項目の設定をします。
- 「位置」を設定をします。
| フィールドラベル | 肩書き・役職 |
|---|---|
| フィールド名 | job_des |
| フィールドタイプ | テキスト |
今回はカスタム投稿タイプ「メンバー」の入力時に使うので、
下図のように設定します。
「更新」をクリックして設定を保存します。
メニュー「メンバー」から投稿ページにカスタムフィールドの入力欄が追加されていることを確認してみましょう。
入力項目を増やしたい場合は、上記の作業を繰り返してフィールドを追加します。
3-2. テンプレートファイルにカスタムフィールドを表示するコードを追記する
下記のコードをpage-member.phpに追記してカスタムフィールドを表示させます。
<?php the_field('フィールド名'); ?>「フィールド名」の部分には、フィールドを追加した時に設定したフィールド名を記述してください。
このコードを先ほどのpage-member.phpに追記すると、カスタム投稿を表示する部分（17〜23行目）は以下のようになります。
５行目に追記しただけです。
<div class="post">
<div class="fig"><?php the_post_thumbnail(); ?></div>
<div class="summary">
<h3><?php the_title(); ?></h3>
<p><?php the_field('job_des'); ?></p>
<p><?php the_content(); ?></p>
</div>
</div>3-3. フィールドラベルを表示させる場合
設定したフィールドラベルも表示したい場合は5行目を以下のように変更します。
<?php if( get_field('フィールド名') ) {
the_field('フィールド名');
$fielddata = get_field_object('フィールド名');
echo esc_html($fielddata['label']);
} ?>最後に
これでHTMLが書けなくても、ブロックエディタを使いこなせなくても、項目を入力するだけでページを更新出来るようになります。
メンバー一覧のように同じ内容が続くページでは、このようにフォーマット化した入力欄を用意すると、更新がとても簡単になります。
是非挑戦してみてください。
