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

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

先日追加したカスタム投稿タイプを「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
インディーズでミュージシャンをやっていたのですがいつのまにか...

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

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました（笑）

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「ネットワーク・サーバー構築」や「 Office365製品の導入支援」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

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

名刺（Eight）