先日、カスタム投稿タイプを追加したのですが、一覧ページを用意していなかったので固定ページテンプレートを利用して作成してみました！

固定ページテンプレートの追加

先日追加したカスタム投稿タイプを「contentinfo」としているので、ファイル名は「page-contentinfo.php」としました。
テーマフォルダに「page-contentinfo.php」を作成します。

固定ページテンプレートの記述

以下の記述で固定ページテンプレートとして追加できます。

<?php
/*
 * Template Name: contentinfo
 */
get_header(); ?>

子テーマで作成する場合は、親テーマの固定ページテンプレートでイメージに近いものをコピぺでいいと思います。テーマ名はわかりやすく「contentinfo」としました。その他カスタム投稿タイプ名やクラス名も環境に応じて変更して下さい。

<?php
/*
 * Template Name: contentinfo
 */
get_header(); ?>

<!-- 既存テーマの場合、同じテーマ内の他のテンプレートからコピペ -->

<div class="contentinfo">
  <div class="content-item">
    <?php $args = array(
        'numberposts' => 20,     //表示する記事の数
        'post_type' => 'contentinfo'    //カスタム投稿タイプの指定
    );
    $customPosts = get_posts($args);
    if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?>
	    <hr>
        <a href="<?php the_permalink(); ?>" rel="bookmark">
            <div class="content-img left">
                <?php the_post_thumbnail( array(240, 120) ); ?> //横240px 縦120pxのサムネイル
            </div>
            <p class="title"><?php the_title(); ?></p>
        </a>
	<?php endforeach; ?>
    <?php else : //記事が無い場合 ?>
        <p>表示できる記事がありません。</p>
    <?php endif;
    wp_reset_postdata(); ?>
  </div>
</div>

<!-- 既存テーマの場合、同じテーマ内の他のテンプレートからコピペ -->

<?php get_footer(); ?>

CSSはこんな感じで作成しました。

div.contentinfo { margin: 2px; }
div.contentinfo .content-item a {
    text-decoration: none;
    display: block;
    padding: 2px 0;
    overflow: hidden;
}
div.contentinfo .content-item a:hover { background-color: #eef3fd; }
div.contentinfo .content-item img {
    width: 65px;
    margin: 0;
    padding: 0 2px;
    box-shadow: none;
}
div.contentinfo .content-item p {
    margin: 0 0 2px;
    width: auto;
}
div.contentinfo .content-item .title {
    font-weight: bold;
	overflow: hidden;
    padding: 0 2px;
}
div.contentinfo .content-item .left { float: left; }
div.contentinfo hr {
    margin: 0;
    padding: 0;
}

テンプレートを使用して固定ページを作成

「固定ページ」→「新規作成」からテンプレートを利用してページを作成します。テンプレートの部分を作成した「contentinfo」に変更します。パーマリンクも「contentinfo」にしています。この辺りも環境に応じて変更して下さい。

自己紹介

Dai と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています(^_^)。

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表取締役兼二児のパパ。社畜ながらイクメン目指して、公私ともに慌ただしくしています（笑）

お問い合わせはJTクラウドシステムホームページからお願いします。

お問い合わせ