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

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

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

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

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

広告

関連記事

無料アクセス解析 ace-analyzerの登録方法

完全無料で使えるアクセス解析 ace-analyzerの登録方法をご紹介いたします はじめに

記事を読む

no image

cssのハックと確認方法

自分のホームぺージは見る人によってブラウザが異なります。表示が崩れている場合の事も考えて確認方法とc

記事を読む

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

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

記事を読む

bxsliderの画像を中央揃え出来る簡単な方法

bxsliderを導入したものの画像が左側に寄ってcssで戻せない・・・ はじめに レスポンシブ

記事を読む

ワードプレスのメンテナンスモード

ワードプレスではプラグインだけでメンテナンスモードにする事が出来ます。 はじめに ワードプレスで

記事を読む

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

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

記事を読む

クリックで位置を強調する方法

プレゼンテーションや画面が小さい時に役立つ強調系ソフト紹介です。 はじめに 副業でよくある動画コ

記事を読む

Jetpackの購読

ブログの更新やコメントをした際にすぐに知らせてくれるのがこの購読機能です。 はじめに ワードプレ

記事を読む

サクラで日本語ドメインを使う方法

サクラサーバーで日本語ドメインを利用するちょっとした裏技をご紹介いたします。 はじめに

記事を読む

画像をクリックしてテキストを表示させる

画像をクリックしたらlightboxのようにテキストを表示させる方法をご紹介させて頂きます は

記事を読む

広告

Message

広告

現在の総記事数: 274件

gmailの裏技発見したったったwww

gmailの裏技発見したったったwww 登録したサイ

windows10でone driveを無効にする方法

こゆ意図せずに出てこられるのは非常に腹立たしい はじめに on

no image
WEBフォントはcss3で簡単に使えた

WEBフォントを使って好きなフォントをWEB上に公開しよう

ttfをwoffに簡単に変換できた!

ttfをwoffに簡単に変換できた! WEBフォントでttfはあ

ツイッターの最初に固定した内容を表示させる方法

ツイッターの初めに固定されたツイートと言う内容があると思いますが、これ

→もっと見る


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