閉じる

WordPressでオリジナルテーマ作成!カスタム投稿ループ指示コード一覧。

カスタム投稿ループコード

今回はWordpressのカスタム投稿を出力できるようにするコードなど。

調べたら出てくるものもほとんどなので、備忘録のような意味合いもかねて一覧で記載します。

ログイン前で閲覧ができない方へ。当記事は下記の項目の内容を記載しております。

■ カスタム投稿を一覧で出力  archiveページ・singleページの場合
■ カスタム投稿をfront-page.phpなどの指定の位置に出力の場合
■ カスタム投稿の表示順をランダム表示にしたい場合 (関連記事を作る場合などに便利)
■ カスタム投稿 出力したコンテンツの文字数制限
■ カスタム投稿一覧ページのページネーション

目次 [ close ]

コード

カスタム投稿を一覧で出力  archiveページ・singleページの場合

ファイル名とカスタム投稿のスラッグ名が連携されるため、ループしたい箇所を下記のように囲むだけでOK。

<!--メインループ-->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

内容

 <?php endwhile; endif; ?>

例えば、カスタム投稿で【ブログ】を作り、【ブログ】のカスタム投稿スラッグが”blog”の場合。

archive-blog.phpやsingle-blog.phpのように、スラッグ名をいれておけば、上記の記述だけでループ内は、
WordPressの管理画面からカスタム投稿【ブログ】で作った投稿内容が反映される。
※もちろんループの記述だけでは出力されないので、タイトルやアイキャッチ画像を出力したい時は、それぞれ出力用のコードを記述する必要がある。(別記事参照)

[swpm_protected custom_msg=’ここから先の閲覧にはログインが必要です。ナレッジの会員登録がまだの方はナレッジについてをご確認くださいませ。’]

カスタム投稿をfront-page.phpなどの指定の位置に出力の場合

ループを出力したい場所に、下記を記述

 <?php
 $the_query = new WP_Query(array(
'post_status' => 'publish',
'post_type' => '○○', //カスタム投稿タイプの名称を入れる
'posts_per_page' => 12, // 表示件数 -1だと全表示
 'order' => 'DESC',//投稿の並び順 逆にしたい場合はASC
  ));
 if ($the_query->have_posts()) : ?><?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

内容

<?php endwhile; ?><?php endif; ?>

ファイル名でカスタム投稿との連携が出来ない為、’post_type’ => ‘○○’, のところにカスタム投稿スラッグを入力することで連携できる。カスタム投稿スラッグが【blog】の場合は

'post_type' => 'blog'

ループ内の投稿の表示数は、Wordpressの管理画面の【設定】→【表示設定】で指定した数字になる。
archive.phpなどで表示数を分けたい場合は、archive.phpのファイルでも、上記の他の固定ページで表示する場合のコードで呼び出すことで表示数は柔軟に変更できる。

カスタム投稿の表示順をランダム表示にしたい場合 (関連記事を作る場合などに便利)

'orderby' => 'rand'

上記を記述するだけ。

例はこのような感じ。

 <?php
 $the_query = new WP_Query(array(
'post_status' => 'publish',
'post_type' => '○○', //カスタム投稿タイプの名称を入れる
'posts_per_page' => 12, // 表示件数 -1だと全表示
 'orderby' => 'rand',//ランダム表示
  ));
 if ($the_query->have_posts()) : ?><?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

内容

<?php endwhile; ?><?php endif; ?>

※投稿順の並び替えプラグイン、Post Types Orderのプラグインを使用する場合は新着順になるのでランダム表示するなら、こちらも必要。

<?php
 $the_query = new WP_Query(array(
'post_status' => 'publish',
'post_type' => '○○', //カスタム投稿タイプの名称を入れる
'posts_per_page' => 12, // 表示件数 -1だと全表示
 remove_all_filters('posts_orderby'),//Post Types Orderのプラグインを使用する場合は新着順になるのでランダム表示するなら必要
 'orderby' => 'rand',//ランダム表示
  ));
 if ($the_query->have_posts()) : ?><?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

内容

<?php endwhile; ?><?php endif; ?>

カスタム投稿 出力したコンテンツの文字数制限

 <?php the_excerpt(); ?>

文字数制限したい部分に上記を記入。
そして、functions.phpに下記を記述。数字が制限文字数。

function my_length($length){  return 70; } add_filter('excerpt_mblength','my_length');
function my_more($more){  return '…'; } add_filter('excerpt_more','my_more');

上手くいかない場合は、【WP Multibyte Patch】プラグインを追加/有効化する 

カスタム投稿一覧ページのページネーション

ページネーションの出力方法は複数あるみたいです。
私自身も理解しきれていない部分もあるので、こちらは普段私が使っているコードをコピペで使いまわししてくださませ。
※CSSの記述は省きますので、お好きにスタイリングはしてください。

functions.phpに下記


//-----------Pagenation-----------//
function pagination($pages = '', $range = 2)
{
    $showitems = ($range * 2) + 1; //表示するページ数(5ページを表示)
    global $paged; //現在のページ値
    if (empty($paged)) $paged = 1; //デフォルトのページ
    if ($pages == '') {
        global $wp_query;
        $pages = $wp_query->max_num_pages; //全ページ数を取得
        if (!$pages) //全ページ数が空の場合は、1とする
        {
            $pages = 1;
        }
    }
    if (1 != $pages) //全ページが1でない場合はページネーションを表示する
    {
        echo "<div class=\"archive_pagenation\">\n";
        echo "<ul>\n";
        //Prev:現在のページ値が1より大きい場合は表示
        if ($paged > 1) echo "<li class=\"archive_pagenation_prev\"><a href='" . get_pagenum_link($paged - 1) . "'><span class=\"icon-angle-right\"></span></a></li>\n";
        //        ◀を変更したい場合、↑を変更する。

        for ($i = 1; $i <= $pages; $i++) {
            if (1 != $pages && (!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems)) {
                //三項演算子での条件分岐
                echo ($paged == $i) ? "<li class=\"archive_pagenation_active\">" . $i . "</li>\n" : "<li class=\"archive_pagenation_noactive\"><a href='" . get_pagenum_link($i) . "'>" . $i . "</a></li>\n";
            }
        }
        //Next:総ページ数より現在のページ値が小さい場合は表示
        if ($paged < $pages) echo "<li class=\"archive_pagenation_next\"><a href=\"" . get_pagenum_link($paged + 1) . "\"><span class=\"icon-angle-right\"></span></a></li>\n";
        //        ▶を変更したい場合、↑を変更する。

        echo "</ul>\n";
        echo "</div>\n";
    }
}

ページネーションを表示したい部分に下記

<div class="archive_pagenation">
<?php if (function_exists("pagination")) {
 pagination($additional_loop->max_num_pages);
} ?>
 </div>

[/swpm_protected]

CONTACT

お問い合わせはエールクエスト公式サイトよりお願いいたします。