【AFFINGER4-カスタマイズ】カスタム投稿を追加し、トップページに一覧表示させる
本日のカスタマイズ記事は、カスタム投稿タイプを追加しトップページに一覧表示させる方法です。
カスタム投稿追加も一覧表示もそんなに難しくないので、実現したい方はぜひ導入してみて下さい！
プラグインは使いません。あくまでもソース修正のみで実装します。
では、早速開始です！
まずはカスタム投稿の追加
記事を追加する前に、とにかくカスタム投稿ページを作成しましょ。
カスタム投稿の追加は「functions.php」をカスタマイズします。
例：ツール関連（スラッグ：tools）を追加したい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*-------------------------------- カスタム投稿を追加 ---------------------------------*/ add_action( 'init', 'custom_post_type' ); function custom_post_type() { //ツール関連 register_post_type( 'tools', array('labels' => array( 'name' => __( 'ツール関連' ), 'singular_name' => __( 'ツール関連' ) ), //投稿タイプの設定 'public' => true, 'menu_position' => 5, 'hierarchicla' => false, 'has_archive' => true, //投稿編集ページの設定 'supports' => array('title','editor','thumbnail', //タイトル，編集，アイキャッチ 'custom-fields','excerpt','author','trackbacks', //カスタムフィールド，抜粋文＆作成者，トラックバック 'comments','revisions','page-attributes') //コメント，リビジョン，作成者,表示順のボックス ) ); // おすすめツールタクソノミーの設定 register_taxonomy( 'tools-cat', 'tools', // 上記で指定したカスタム投稿名 array('hierarchical' => false, // trueだと親子関係が使用可能。falseは親子関係使用不可 'label' => 'ツール関連カテゴリー', 'singular_label' => 'ツール関連カテゴリー', //カテゴリーの設定 'public' => true, 'hierarchical' => true, ) ); // おすすめツールタグの設定 register_taxonomy( 'tools_tag', 'tools', // 上記で指定したカスタム投稿名 array( 'label' => 'ツール関連タグ', 'labels' => array( 'popular_items' => 'よく使うツール関連タグ', 'edit_item' =>'ツール関連タグを編集', 'add_new_item' => '新規ツール関連を追加', 'search_items' => 'ツール関連を検索', ), 'public' => true, 'hierarchical' => false, ) ); } |
変更が必要なのはラインが引いている箇所。
スラッグや日本語名なんかを変更して下さい。
※スラッグは一覧表示時のパーマリンクにもなりますので、関連する文字列を設定した方がいいです。
追加出来ると、管理画面のサイドバーに「ツール関連」のような追加したカスタム投稿名が表示されます。
こちらで記事を追加すると、追加したカスタム投稿に紐づきます。
一覧表示方法
カスタム投稿一覧を取得する為の専用テンプレートを作成しましょう。
今回はスラッグ「tools」を作成しましたので、テンプレート名は「tools-list.php」にします。
「tools-list.php」にはカスタム投稿を取得するロジックを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php $args = array( 'post_type' => 'tools', //投稿タイプの指定 'posts_per_page' => 5 //取得記事数 ); $myposts = new WP_Query($args); if($myposts->have_posts()) : ?> <p id="scroll-title">ツール関連一覧</p> <div class="scroll-content"> <?php while($myposts->have_posts()) : $myposts->the_post(); ?> <article class="scroll-content"> <figure class="scroll-thumbnail"> <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'st_thumb300' ); ?></a> </figure> <div class="post-info"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </div> </article> <?php endwhile; ?> </div> <?php else : ?> <p>記事が存在しません。</p> <?php endif; wp_reset_postdata(); ?> |
3行目は必ず、追加したカスタム投稿のスラッグ名を設定して下さい。
カスタム投稿取得用のテンプレートが作成出来たら、後は追加したい場所にテンプレートを呼び出すだけで、一覧が取得出来ます。
ヘッダー下部に追加してみた
私の場合は、ヘッダー下に追加してみました。
追加前
追加後
追加方法は、ソースコードを参照し追加した場所にテンプレート呼び出しロジックを追記します。
|
1 |
<?php get_template_part('tools-list'); //関連ツール記事 ?> |
「header.php」の一番下なり、「index.php」の記事取得前なり、自由な場所に追加してみて下さい。ｎ
アイキャッチ画像を設定していない為、タイトルとリンクのみ取得されております。
後はcssでデザインを調整すれば完成です！
ウィジェットで追加できるようにしてみた
追加する場所が決まっていないけど、とりあえず導入して後でウィジェットで追加したい！
という方の為にウィジェットでテンプレートを取得し、自由な位置へ表示させる方法を載せておきます。
方法は、新規ウィジェットを作成し、先ほど追加したテンプレート「tools-list.php」を呼び出すロジックにします。
「AFFINGER4」には「09_STINGERカスタム投稿一覧」のウィジェットが既にありますが、ここではあえて、方法を載せておきますので「AFFINGER4」を利用していない方でも導入できるかと。
「functions.php」に以下のロジックを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
class Custom_Originalpost_Widget extends WP_Widget { /*コンストラクタ*/ function __construct() { parent::__construct( 'custompostentry__originalwidget', // Base ID __( '[o]ツール一覧カスタム投稿取得', 'default' ), // Name array( 'description' => __( 'ツール一覧のカスタム投稿記事を取得します。', 'default' ), ) // Args ); } /* ウィジェットを配置した時の表示用コードを書く */ public function widget( $args, $instance ) { get_template_part( 'tools-list' ); } /* 管理画面の設定 */ public function custompostentry__originalwidget( $instance ) { ?> <?php } /* 管理画面で設定を変更した時の処理 */ public function update( $new_instance, $old_instance ) { $instance = array(); return $instance; } } /* ファンクションが定義されていれば、ウィジェットを有効にする */ function register_custompostentry__originalwidget() { register_widget( 'Custom_Originalpost_Widget' ); } add_action( 'widgets_init', 'register_custompostentry__originalwidget' ); |
各ポイントを説明します。
- 1行目のclass名「Custom_Originalpost_Widget」は任意の名前でＯＫだが、29行目の設定と一致している必要がある
- 6行目はウィジェットのタイトル、7行目がウィジェットの説明になる
- 5行目のIDはベースとなるので、15行目・28行目と一致している必要がある
- 31行目のinitパラメータ「register_custompostentry__originalwidget」は28行目のファンクション名を設定すること
そんな方は、ロジックを変更せず、そのまま利用して下さい。
6行目のタイトルと説明ぐらいは変更した方がいいですが…。
「functions.php」を更新すると、ウィジェットに無事追加されていますので、任意の場所に設定します。
今回はサイドバーへ設定。
無事にカスタム投稿の記事が取得出来ていれば、ＯＫです！
デザイン（style.css）の調整
こんな感じに横並びでデザイン調整を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
#scroll-title { position: relative; margin: 18px 0 1em; padding: .2em; font-size: 1.25em; font-weight: bold; color: #143877; border-bottom: 2px solid #143877; } #scroll-title:before, #scroll-title:after { content: ''; border-right: 18px solid #fff; border-top: 15px solid #143877; bottom: -15px; position: absolute; left: 26px; } #scroll-title:after { border-top-color: #fff; border-right-color: transparent; bottom: -11px; left: 28px; } .scroll-content { list-style: none; padding: 0; max-height: 111px; width: 100%; margin-left: 3px; margin-bottom: 20px; position: relative; display: -webkit-box; } figure.scroll-thumbnail { display: inline; float: left; margin: 0; border: 0; } img.attachment-st_thumb300.size-st_thumb300.wp-post-image { width: 172px; height: 111px; } .post-info { position: absolute; max-height: 47px; width: 97%; bottom: 0; z-index: 1; margin: 0; padding: 3px; background-color: rgba(79,129,189,0.7); overflow: hidden; } .post-info a { color: #fff; text-decoration: none; font-weight: bold; font-size: 12px; } |
52行目のカラーコードを変更すれば、文字列の背景色を変更できますので、好みに合わせて変更下さい。
