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

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

先日追加したカスタム投稿タイプを「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」にしています。この辺りも環境に応じて変更して下さい。

自己紹介

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

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

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

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

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ