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

公開日: : 最終更新日: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ずつ表示されている方がわかりやすく見やすいですよね。

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

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

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

広告

関連記事

簡単にカスタムフィールドが使えるCustom Field Suite

カスタムフィールドを使ってみたいが、まったくもって意味がわからないと言う人のためのプラグインです。

記事を読む

A8の登録方法について

副業でアフィリエイトを始めたい人向け!必ず登録しておきましょう はじめに アフィリエイト

記事を読む

管理画面でお問合せメールの確認が出来るTrust Form

ワードプレス内でお問合せフォームからのメールの内容を確認出来るプラグインがございます。 はじめに

記事を読む

no image

副業するなら情報を売ろう

もしも、副業をするなら一番お勧めの方法は情報を売る事です。お勧めの理由はPC一台あれば出来ると言うと

記事を読む

SEO対策の実験サイトを制作しよう

集客する為のサイトを作る為に実験サイトを作る事でのちのちかなり役立つ資産になってきます。

記事を読む

no image

圧縮と解凍をしてみる

今回は圧縮と解凍を実際にしてみる内容になっております。PC初心者の方は「zip」ファイル送っておいた

記事を読む

メルカリの出品から発送までの流れ

メルカリに出品してみて入金されるまでの流れをご紹介させて頂きます はじめに あの

記事を読む

Jetpackのスペル&文法チェック

日本語であれば特に必要のない機能ですね。 はじめに 日本語は他国の言語に比べて文法が非常に難

記事を読む

youtubeの動画をダウンロードする方法

この動画が削除される前にダウンロードしておきたいって動画や、編集したいと言う動画がyoutubeにあ

記事を読む

FC2ショッピングカートの販売する為の設定

FC2ショッピングカートに登録し、ネットショッピング開設するまでの流れをご紹介いたします。 は

記事を読む

広告

Message

広告

現在の総記事数: 288件

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

yahooリスティング広告のキーワード単価を調べる方法

そのキーワードにいくら支払えばクリックが見込めるのかわかりやすツールで

yahooリスティング広告の広告費の決め方

広告費用って毎月いくら必要なのか?いろいろなパターンを考えてみました

yahooリスティング広告のキーワードを設定する際の考え方

yahooリスティング広告のキーワードを間違えると全然効果がないので気

yahooリスティング広告らくアドの利用方法

yahooリスティング広告の使い方がわからない方はらくアドを利用してみ

→もっと見る


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