会員用マイページの作り方<プラグインなし>

つくってみた
つくってみた
この記事は約7分で読めます。

複数ユーザーが投稿するサイトを運営中。ユーザーが自分の投稿を管理画面を介さずフロントエンドから見れるマイページを作りたい。
ログインしているかどうかや、他のユーザーの投稿は見れない、などの条件分岐も付け加えたい。

会員サイトにはお決まりのマイページ。

ダッシュボード(Wordpressの管理画面)からではなく、会員がサイト上からユーザー自身のコンテンツが見られるマイページの作り方をご紹介します。プラグインなしで設定する方法です。プラグインを使わない方が個人的にはカスタマイズしやすいのでおすすめ。

ページ送りもプラグインなしでサクッと設定しましたが、使わなければSTEP 3を省きSTEP2に適宜変更を加えてくださいませ。

スポンサーリンク

STEP1.マイページ用の固定ページを作成

固定ページを作成してください。本文は空でOKです。
スラッグ名はSTEP2と3で使用します。

STEP2. page-スラッグ名.phpを作成

page-STEP1でつけたスラッグ名.phpを作ってください。
今回の場合は、page-mypage.phpになります。

作成したpage-スラッグ名.phpの中に下記コードをコピペ。

<?php get_header(); ?>

<?php if (is_user_logged_in()) { //ログインしているときの処理 ?>

<?php 
 $user_id = get_current_user_id(); //ログインユーザーIDの取得
 $l_username = get_user_meta( $user_id, 'last_name', true ); //ユーザーIDをもとにデータを取得
 $f_username = get_user_meta( $user_id, 'first_name', true );	
 ?>

<?php echo $l_username.$f_username.'さんのマイページ'; ?>

	<?php $paged = get_query_var('paged') ? get_query_var('paged') : 1; //pagination settings
	$args = array(
	'post_type'        => 'post',
	'post_status'      => 'publish',
	'author'	   => $user_id,
	'order'            => 'DESC',
	'posts_per_page' => 10, //※STEP3.functions.php内のposts_per_pageと同じ数字にする
	'paged' => $paged //pagination settings
	);
	$the_query = new WP_Query($args); ?>
		
        <?php if ( $the_query->have_posts() ) { ?>
	<?php while ( $the_query->have_posts() ) {
		$the_query->the_post(); ?>
~~~投稿があるとき、ここに表示したい内容~~~
	<?php }	; ?>

<?php //ページネーション設置
  $GLOBALS['wp_query']->max_num_pages = $the_query->max_num_pages;
  $args = array(
      'mid-size' => 2,
      'prev_text' => '≪前へ',
      'next_text' => '次へ≫',
      'screen_reader_text' => 'ページナビゲーション'
  );
  the_posts_pagination($args); ?>
					
        <?php wp_reset_postdata(); ?>

	<?php }else{ ?>
~~~投稿がないとき、ここに表示したい内容~~~
	<?php } ?>

	<?php }else{ //ログインしていないときの処理 ?>

~~~ログインしていないとき、ここに表示したい内容~~~

	                      <?php } ?>
<?php get_footer(); ?>

ログインしていなきゃそもそも投稿は見れないし、ユーザーは自分の投稿だけしか見れない仕様です !

ログインしていないときは、会員登録やログインフォームを表示するなどして、自由自在にカスタマイズできます。

7~8行目のget_user_metaで、ユーザーのデータ(名前など)を取得できます。

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

15~20行目のWP_Queryのパラメータをいじることで、投稿を取得できます。

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

38行目、the_posts_paginationでページ送りの表示を変えられます。

関数リファレンス/the posts pagination - WordPress Codex 日本語版

STEP3.ページネーションの設定

WP-PageNaviなどのプラグインを使用しない方法です。たった2工程でページ送りを実装できます!

‘posts_per_page’ の数字や、表示設定の数字に気を付けてください。

(1)functions.php内の設定

6行目のmypageにはSTEP1でつけたスラッグ名を入れてください。

//pagination settings
function pg_size( $query ) {
  if ( !is_admin() && $query->is_main_query() ) {
    	return;
  }
    if ( $query->pagename('mypage') ) {
      $query->set( 'posts_per_page', 10 ); //※STEP2.内のposts_per_pageと同じ数字にする
		return;
  }
  }
add_action('pre_get_posts','pg_size');

pre_get_postsについて詳しくは、「投稿タイプを指定して表示件数を変更」の箇所を参照。

プラグイン API/アクションフック一覧/pre get posts - WordPress Codex 日本語版

(2)ダッシュボード内の設定

ダッシュボード≫設定≫表示設定に進み、「1ページに表示する最大投稿数」を‘posts_per_page’よりも同じかそれ以下の数字に設定する。※大きい数字になると、404エラーになってうまく機能しないので注意。

~ 完成形 ~

ログインユーザーは、自分のページはこういう感じに見えるようになります。

なよいちゃん
なよいちゃん

条件分岐とクエリ操作でゴニョれば、色々便利な会員ページが作れそうですね!

この記事が気に入ったら、サポートをしてみませんか?
\ ワンコインからのAmazonギフト /

この記事への質問・コメントはこちら

タイトルとURLをコピーしました