この記事では、WordPress（ワードプレス）の投稿ページのテンプレートファイルの作成方法とその見本を紹介します。
WordPressではデフォルトで「投稿」と名前の投稿機能が付いています。しかしこの「投稿」から作成したコンテンツを表示させるにはsingle.phpが必要で、その中に「投稿」を取得する記述も必要です。この記事ではそれらの要素を説明致します。
サイト構成は以下です。
themes
┗original Thema
┗single.php
index.php
・
・
ファイルの構成に関しては以下のページを参考にして下さい。
投稿テンプレートの見本コード
早速でしが、初めに見本のコードから紹介します。以下が今回紹介するコードの全体です。
<!-- 投稿ページ -->
<?php get_header(); ?>
<main role="main">
<div class="container">
<div class="article_container m-md-5">
<div class="article_container_honnbunn m-md-5">
<?php
// カテゴリーカラー取得用
$cat = get_the_category();
// 取得した配列から必要な情報を変数に入れる
$cat_name = $cat[0]->cat_name; // カテゴリー名
$cat_slug = $cat[0]->category_nicename; // カテゴリースラッグ
?>
<div class="article_title">
<h1 class="<?php echo $cat_slug ?>"><?php the_title(); ?></h1>
</div>
<p>
<span class="ymd"><i class="far fa-calendar-alt"></i><?php the_time('Y年m月d日'); ?></span>
<span class="author"><i class="far fa-user"></i><?php $author = get_userdata($post->post_author); echo $author->display_name; ?></span>
</p>
<!-- SNSシェアボタン -->
<?php get_template_part( '/template-parts/sns-share' ); ?>
<?php if ( has_post_thumbnail() ): ?>
<img src="<?php the_post_thumbnail_url(); ?>" loading="auto" alt="<?php the_title(); ?>のサムネイル">
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<!-- 投稿コンテンツの取得 -->
<div class="maincontents">
<?php
if(have_posts()){
while(have_posts()){
the_post();
the_content();
}
} ?>
</div>
</div>
<!-- 投稿カテゴリー -->
<div class="category_container">
<?php
$terms = get_the_terms($post->ID,'category');
foreach($terms as $term){
echo '<ul class="category-list mr-md-5 ml-md-5"><li class="'.$term->slug.'"><a href="'.get_term_link($term->slug, 'category').'">' .$term->name.'</a></li></ul>';
}
?>
</div>
<!--投稿タグ-->
<div class="taglist_container">
<?php
$posttags = get_the_tags();
if( $posttags ){
echo '<ul class="tag-list mr-md-5 ml-md-5">';
foreach ( $posttags as $tag ) {
echo '<li><a href="' . get_tag_link( $tag->term_id ) . '"><i class="fas fa-tag"></i>' . $tag->name . '</a></li>';
}
echo '</ul>';
}
?>
</div>
<?php if( has_category() ) : //表示中の投稿に登録されているカテゴリがある場合のみ下記実行 ?>
<?php
$categories = get_the_category();
$cat_term_ids = array();
foreach($categories as $category){
$cat_term_ids[] = $category->term_id; //cat_ID も追加
}
$args = array(
'post_type' => 'post', //投稿を指定 （固定ページの場合は 'page'）
'posts_per_page' => '6', //取得する件数
'post__not_in' => array( $post->ID ), //除外する投稿（本記事）
'category__in' => $cat_term_ids, //対象となるカテゴリID（配列）
'orderby' => 'rand' //表示順をランダムにしてい（日付順の場合は 'date'）
);
$the_query = new WP_Query( $args );
?>
<?php if( $the_query->post_count > 1 ) : //該当する投稿が１件以上あったら下記出力 ?>
<h3 class="pt-md-5 pl-md-5 pr-md-5 kanren"><i class="fas fa-th-list"></i>関連記事</h3>
<div class="related_post_container">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<a class="related_post" href="<?php echo get_permalink(); ?>">
<?php
//アイキャッチ画像
if ( has_post_thumbnail() ):
the_post_thumbnail('thumbnail');?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt="noimg">
<?php endif; ?>
<p><?php echo get_the_title(); ?></p>
</a>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
</main>
<?php get_template_part( '/template-parts/sidebar' ); ?>
<?php get_footer(); ?>初めに必ず入れるべき要素
ます、 headerとfooterは全ページ共通で入れると思うので、以下の記述で呼び出しましょう。
これで投稿にもCSSとJSが効くようになるはずです。
<!-- header呼び出し -->
<?php get_header(); ?>
<!-- footer呼び出し -->
<?php get_footer(); ?>タイトル・日付・投稿者情報
まずは投稿コンテンツにはタイトルが必要だと思います。そのタイトルを以下のテンプレートタグコードで取得します。
<?php the_title(); ?>投稿日を取得する場合は以下のテンプレートタグコードを使います。
<?php the_time('Y年m月d日'); ?>投稿者名も表示したい場合は以下のコードを使います。
<?php $author = get_userdata($post->post_author); echo $author->display_name; ?>まとめるとこんな感じです。（別の要素も入ってますが好みで編集して下さい。）
<?php
// カテゴリーカラー取得用
$cat = get_the_category();
// 取得した配列から必要な情報を変数に入れる
$cat_name = $cat[0]->cat_name; // カテゴリー名
$cat_slug = $cat[0]->category_nicename; // カテゴリースラッグ
?>
<div class="article_title">
<h1 class="<?php echo $cat_slug ?>"><?php the_title(); ?></h1>
</div>
<p>
<span class="ymd"><i class="far fa-calendar-alt"></i><?php the_time('Y年m月d日'); ?></span>
<span class="author"><i class="far fa-user"></i><?php $author = get_userdata($post->post_author); echo $author->display_name; ?></span>
</p>投稿コンテンツの取得
見本のコードの39行目〜45行目にある以下の記述が投稿のコンテンツを取得表示してくれる関数になってます。
これによりWordPress管理画面から投稿したコンテンツが実際のWEBサイトで表示されるようになります。
<?php //投稿取得
if(have_posts()){
while(have_posts()){
the_post();
the_content();
}
}
?>投稿カテゴリーとタグを取得表示
「get_the_terms($post->ID,’category’)」を使えばWordPressデフォルトの「カテゴリー」の情報を取得表示出来ます。タグの場合は「get_the_tags()」で可能です。
<!-- 投稿カテゴリー -->
<div class="category_container">
<?php
$terms = get_the_terms($post->ID,'category');
foreach($terms as $term){
echo '<ul class="category-list mr-md-5 ml-md-5"><li class="'.$term->slug.'"><a href="'.get_term_link($term->slug, 'category').'">' .$term->name.'</a></li></ul>';
}
?>
</div>
<!--投稿タグ-->
<div class="taglist_container">
<?php
$posttags = get_the_tags();
if( $posttags ){
echo '<ul class="tag-list mr-md-5 ml-md-5">';
foreach ( $posttags as $tag ) {
echo '<li><a href="' . get_tag_link( $tag->term_id ) . '"><i class="fas fa-tag"></i>' . $tag->name . '</a></li>';
}
echo '</ul>';
}
?>
</div>その他の要素を入れ込む
その他に投稿ページでは、SNSシェアボタンや関連コンテンツなどを入れる事が多いかと思います。
SNSを作成したい場合は以下を見て下さい。
関連記事は見本コードの74行目〜117行目のコードです。（また別途で説明します。）
以上が「ワードプレステーマ作成で投稿ページを作成する方法（見本あり）」でした。
参考になれば幸いです。
