HTMLサイトをWordPressテーマにする手順②(お知らせ等の投稿ページ)

①はトップページ、下層ページのうち固定ページを作っていくやり方の覚え書きでした↓

今回はさらに お知らせ更新等 投稿ページを作っていく手順なんですが
更新していきたいコンテンツが2種類以上(ひとつは新着情報、もう一つは施工事例など…)あるときはカスタム投稿を使います
なのでそのカスタム投稿の作り方について

カスタム投稿を作成

カスタム投稿を作成できるプラグイン「Custom Post Type UI」を入れる

プラグイン→新規プラグインを追加→検索してインストール、有効化

左側に出てくるメニューから「投稿タイプの追加と編集」で新規追加

基本的には一番上の「投稿タイプスラッグ」「複数形のラベル」「単数形のラベル」を設定することと、少しページを下に行って設定の中の「アーカイブあり」をtrueに変えればOK(最初はfalseになっている)
※ここを変えないとアーカイブ一覧で記事が出てこない

これで、ラベルのところに入力した名前で管理画面サイドメニューに出てきて 記事を入力していくことができます
呼び出すとき…
各投稿はsingle-〇〇〇(スラッグ名)-.php
記事一覧はarchive-〇〇〇(スラッグ名).phpを作成

single-〇〇〇(スラッグ名).php、archive-〇〇〇(スラッグ名).php

シングルページ、アーカイブページとも投稿の呼び出しは以下の通り

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

呼び出したい内容

<?php endwhile; endif; ?>

これでシングルページでは各投稿の詳細、アーカイブページでは記事一覧が出てきます

呼び出しでよく使うテンプレートタグ

投稿のタイトル

<?php the_title(); ?>

記事へのリンク

<?php the_permalink(); ?>

日付

<?php custom_date(); ?>

本文

<?php the_content(); ?>

アイキャッチ

<?php the_post_thumbnail( 'thumbnail' ); ?>

カッコの中のthumbnailは大きさの指定 thumbnail、medium、large、fullを設定できます
(画像のもとの大きさで出力できるfullを使うことが多いかも)

このカスタム投稿に対して、通常設定できる本文やアイキャッチだけでなく、さらに細かく項目を入力できるようにしたいというときにはそれ用のプラグインを入れます

カスタム投稿に項目を追加できるプラグイン「Advanced Custom Fields」を入れる

管理画面に「ACF」メニューが出てきたら「フィールドグループ」から項目を新規追加

「フィールドグループ」とあるようにひとつのグループに複数の項目を設定し、ページの下の方でグループ単位で「どの投稿に表示させるか」を設定できます
(カスタム投稿を作成していればそれも選択肢に出てくる)

カスタムフィールドの呼び出しについてはこちらで主なものをまとめています↓

気を付けておくのは「画像」のカスタムフィールドを作るとき

<?php the_field('フィールド名'); ?>

で呼び出すためには「戻り値の形式」を「画像URL」にします

トップページ等にカスタム投稿の記事一覧を出力するとき

<?php
global $post;
$args = array(
  'posts_per_page' => 3, /*←何件呼び出すか -1にすると全件表示されます*/
  'post_type'=> 'info' /*←カスタム投稿のスラッグ(ここではinfo)*/
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?> 
 
呼び出したい内容

		  
<?php
endforeach;
wp_reset_postdata();
?>

この次は いつも使うプラグインや気を付けることなどの覚え書きにしたいと思います

コメント