こんにちは、オトナ帝国です。
以前、カスタマイズのススメを出しておりましたが、
今回はWordpressのカスタマイズ、における投稿ページとアーカイブページを作成していくための内容を記載していきます。
Wordpressにはいくつかのファイルがあって、それらがテンプレートを作り出しております。投稿の内容はsingle.phpというファイルで制御することになっています。果たしてなぜsingleなのか・・
このあたりのsingleは 個々の,別々の,それぞれの.とかの意味ですが、、そういうこと?やはり納得はいかない・・まぁかといってpostは他で使うし無理か、、と思いつつ・・七不思議に認定しようと思います。
まずはオーソドックスなテンプレート
//phpファイル
<?php get_header();?>
<?php if (have_posts()) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h1 class="noteContent__head"><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
<?php get_footer();?>
まずは投稿ページのテンプレートとしてタイトルと中身だけ表示するようなソースだけを上では記載してます。
//phpファイル
<?php get_header();?>
<?php get_footer();?>
ヘッダーテンプレートとfooterテンプレートで上下をはさんであげます。これはheader.phpの中身とfooter.phpの中身が読み込まれている状態です。この書き方は基本的にページ系のテンプレートではどこでも記載されることになります。
//phpファイル
<?php if (have_posts()) : ?>
<?php while ( have_posts() ) : the_post(); ?>
コンテンツエリアコンテンツエリア
<?php endwhile; endif; ?>
上記の部分はいわゆる分岐とループを表現するエリアになっています。この間の中でそれぞれのコンテンツのエリアが表示されます。
このコンテンツのエリアに、最初に変数エリアで$imageにサムネイルリンク、$titleに記事タイトル、$contentに記事の中身を格納してあげて、
//phpファイル
<?php if (have_posts()) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
$image = get_the_post_thumbnail_url();
$title = get_the_title();
$content = get_the_content();
?>
<h1><?php echo($title); ?></h1>
<h1><?php the_title(); ?></h1>
<?php if (has_post_thumbnail()) : ?>
<p><img src="<?php echo($kv);?>" alt="キービジュアル"></p>
<?php endif; ?>
<div><?php echo($contentValue) ; ?></div>
<?php endwhile; endif; ?>
それぞれをechoで呼び出してあげる、みたいな書き方が個人的には好みです。一応titleだけ2行参考に書いてますが、個人的には好みだと思っています。
//phpファイル
<h1><?php echo($title); ?></h1>
<h1><?php the_title(); ?></h1>
個人的にはphpによるデータの取得のエリアとhtmlによる表示のエリアの役割は明確に分離させておくほうが、ソースのどこで何を取得したか、を考えなくていいので個人的には好きですね。まぁtitleぐらいならいいか、という例外もありますけど。
あるいはこれは記事に限らず、テンプレートファイルを作る場合に、ファイル前半部分取得したものを後からも使う、みたいなときとかは、先に変数に格納しておいたほうがよさそうなイメージです!!
まぁ好みな気がします、ただ表示させたい時と変数に格納するためにデータを取得する場合の関数は異なる(the_title(); とget_the_title();の違い)ことは注意が必要です。
今回はsingle.phpによるという高ページの制御について書いてみました。一般的な投稿の話ではありますが、またカスタム投稿などジャンルを広げていければと思います。
オトナ帝国では、昔のゲームなどの懐かしい体験ができる秘密基地を運営中。
浅草葦拠点では現在セールを実施しています。お部屋の詳細だけでも見てください~