ワードプレスのカスタム投稿タイプにページ送りを導入する方法

公開日: : 最終更新日:2016/08/09 副業で稼ぐ仕組みの作り方 ,

表示件数が多くなりすぎるとページ送りを導入した方がデザイン的にも見やすくなります。

はじめに

スタッフなどの情報をカスタム投稿タイプで作成したものの、人数が多くなればなるほどデザイン的に見づらくなってしまうので、ページ送りを導入してみました。今回も個人的に非常に勉強になりました。

注意事項

プラグインなどがおおすぎたりするとうまく表示されないかもしれないので気をつけてください。

今回やりたい事

今回私がやりたい事は

  1. カスタム投稿タイプを導入する
  2. カスタム投稿タイプで一覧表示をさせる
  3. カスタム投稿タイプの一覧ページにページ送りを実装させる

以上の内容になります。調べたところ、ページ送りってなんだかややこしそうでしたが、やってみると案外簡単だったのでご紹介させて頂きます。

プラグインをインストールしよう

まずはカスタム投稿タイプを導入するためにプラグインを導入いたします。

カスタム投稿タイプを簡単に作れるワードプレスプラグイン

プラグインのインストールは上記記事がわかりやすく説明しております。

設定しよう

インストールの有効化が完了しましたら、設定をします。

pageo

post type slug には横文字、plural Labelには日本語で入力します。

pageo1

そして、カスタム投稿タイプで一覧ページを表示させる為に

Has Archiveを必ず「True」にして下さい。

そして保存をして頂くとカスタム投稿側の設定は終了です。

情報を登録しよう

カスタム投稿タイプの設定が終了しましたら、情報を登録していきます。

私はスタッフと言う名前で登録しましたので、左側に「スタッフ」と言う項目が表示されています。

pageo2

今回はとりあえず15件ほどスタッフ情報を追加してみました。

pageo3

一覧ページ用のファイルを作成する

では、次は一覧ページ用のファイルを作成します。

pageo4

ファイルの名前は自由な名前ではなく

archive-○○.php

と言う形になります。この○○の部分はカスタム投稿タイプで設定したpost type slugと同じものになりますので、私の場合は

archive-staff.php

となります。

ファイルの内容を作ろう

まずは一覧情報を表示させる情報を入力します。

pageo5

ファイルの内容に関してはよくある感じですかね。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<section class="content">
<h3 class="heading"><?php the_title(); ?></h3>
      <article>

<?php the_content(); ?>

    	</article>
    </section>

<?php endwhile; endif; ?>

これで一覧の情報を表示させる事ができました。

ページ送りを表示させよう

次にページ送りを表示させる情報を先ほどの情報のすぐ下に入力します。

pageo6

<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 4,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '« 前へ',
        'next_text' => '次へ »',
    )); ?>
</div>

pageo7
するとこんな感じで登録している情報とページ送りが表示されましたね。

ページ送りを装飾しよう

次はページ送りを見やすく装飾します。

pageo8

.pagination{
    text-align: center;
	margin-bottom:15px;
}
a.page-numbers,
.pagination .current{
    background: #fff;
    border: solid 1px #ccc;
    padding:5px 8px;
    margin:0 2px;
    text-decoration: none;
}
.pagination .current{
    background: #8aaa16;
    border: solid 1px #8aaa16;
    color: #fff;
}

するとこのようなデザインになりました。
pageo9

表示件数を変える

これでカスタム投稿タイプとページ送りを実装することが出来ましたが、表示させる場合、10件じゃなく50件出したい、3件だけ出したいと色々と要望があるかと思います。

そんな場合は

pageo10

設定内にある表示設定をクリックします。

pageo11

1ページに表示する最大投稿数の数字をいじります。例えば3件にした場合は

pageo12

このように3件のみ表示されました。

以上でワードプレスのカスタム投稿タイプにページ送りを導入する方法の紹介終了いたします。

さいごに

見栄えも重要

今回は私はスタッフページでしたが、商品一覧ページなどでも100商品取り扱っていた場合、100全ての情報が出るよりも、20ずつ表示されている方がわかりやすく見やすいですよね。

ワードプレスではこういったかゆいところに手が届くので、ホームページを制作する際やクライアントからの要望にも答えられやすいのが嬉しいです。

私は稼げる副業でホームページの制作だけでなくショッピングサイトも運営しているので、クライアントからの要望のおかげで知識を増やす事が出来ますし、本当にありがたいお話ですよね。

私は今までワードプレスでこういったページ送りと言うのを実装する機会はほぼなかったので、意外と簡単に出来るもんなんだと驚きました。

広告

関連記事

カスタムフィールドを簡単に導入出来るAdvanced Custom Fields

カスタムフィールドって使ってみたいけど、どうやって使えば良いのかわからないなんてことありませんか?私

記事を読む

no image

最低限覚えておけば副業で使える簡単なソースコード

副業だけでなく、ブログなどでも見栄えをいじる時にちょっと覚えておけば簡単な修正だけでなく、カスタマイ

記事を読む

amazonのインスタントストアのちょっとしたテクニック

前回から説明しているAmazonインスタントストアのテクニックです。 はじめに Amazon

記事を読む

no image

メールソフトの設定【サンダーバード】

メールソフトをインストールするだけではメールの受信と送信は出来ません。流れとしてはオリジナルのメール

記事を読む

ユーザーIDで分岐させる方法 WordPress

ワードプレスを使ったサイトを構築中にユーザーによる分岐をするケースもありますよね。 はじめ

記事を読む

カスタムフィールドのループで出力数を決める

ループに登録されている情報を一部表示させたい場合に使えます。 はじめに カスタムフィール

記事を読む

ワードプレスとツイッターの連携が可能SimpleTweet

ワードプレスとツイッターを連携できるプラグインSimpleTweetの設置方法のご紹介 はじめ

記事を読む

ワードプレスをスマホと携帯に対応させるプラグイン

ブログを書いていてもガラケーやスマホに対応していないと見にくくなりますよね?そこで、プラグイン一発で

記事を読む

Gmailを使ったメールの振り分け方法

Gmailを使ったメールの振り分け方法をご紹介致します。 はじめに Gmailでメールの振り

記事を読む

記事の投稿方法【ワードプレス】

ワードプレスをインストールし、ブログを書く事が出来るになりました。ただ、通常のブログと違いますので記

記事を読む

広告

Message

広告

現在の総記事数: 304件

HEIC形式を簡単にjpgにする方法

web上でクッソ簡単にjpgに戻せました はじめに ア

メルカリの売り上げを自分の口座に振込む方法

売り上げが上がるだけだと意味がありません。メルカリから自分の銀行に振り

お名前ドットコム
お名前.comのWhois情報公開代行のご案内が悪質すぎる

お名前.comでドメインを取得した人は気を付けてくださいね。 情弱な

大型らくらくメルカリ便の登録から発送までの流れ

めったにはありませんが、大型メルカリ便を利用してみましたのでその時の流

メルカリで商品購入から評価までの流れ

メルカリで購入したいけど色々不安な人へ はじめに メルカリでは商品

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑