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

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

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

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

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

広告

関連記事

WordPressでCSV登録が出来るReally Simple CSV Importer

とにかく沢山のデータをワードプレス上に登録しなければいけない場合、1つづつ入力するのってバカらしいで

記事を読む

URLを入力するだけでfacebookのようなリンクを表示させる方法

リンクを入力するだけでアイキャッチや文章を表示させる方法をご紹介いたします。 はじめに 自分の過

記事を読む

Gmailの取得方法

Gmailは無料で使えるメールアドレスです。取得方法を公開しています。 まずはGmailの取得

記事を読む

売れる商品画像は影が必須

ドロップシッピングやショッピングサイトを運営している方に一度やって頂きたい画像の作り方をご紹介いたし

記事を読む

Jetpackのパブリサイズ共有

ブログ投稿するだけじゃなく、ツイッターやフェイスブックにも共有したいですよね はじめに ワードプ

記事を読む

ワードプレスに任意の画像サイズを追加する方法

2種類のサムネイル画像を表示させたいなぁって時に使えた技です。 はじめに ワードプレスだと元々サ

記事を読む

スマホ画面の一番下にふわっとコンテンツを表示させる方法

スマートフォンでホームページを見た際に常に一番下に表示されているふわっとした広告枠の出し方を紹介いた

記事を読む

フォトショップで文字や人物が簡単に消せたったwww

フォトショップを使えば人物を消す事がこんなにも簡単に出来るとは思ってもみませんでした

記事を読む

ワードプレスにグーグルアドセンスを導入する方法

ワードプレスにアドセンスを導入する際に効率の良い導入方法をご紹介いたします。 アドセンスの設定をす

記事を読む

ワードプレスの記事やカテゴリなどの各IDを調べる方法

ワードプレスには記事やカテゴリ、タグなどそれぞれIDがございます。 はじめに プラグインの設定を

記事を読む

広告

Message

広告

現在の総記事数: 292件

GoogleのWEBフォントを導入してみた

過去にもwebフォントに触れている記事は多いですが、googleさんの

yahooリスティング広告のオプション登録は必須

広告の下に出てくるリンクは絶対に設定しておきましょう はじめ

2017年最新版 メルカリで受取評価してくれない時の対策

メルカリを利用していると変なお客さんにあたる場合があります はじめに

Googleアナリティクス一覧のセッションなどのデータが表示されなくなった

久々にGoogleアナリティクスを見たらデータが表示されなくなっていた

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

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

→もっと見る


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