超絶初心者(自分)のためのWordPressのテーマ作成-4
今回はどのようにして投稿を表示していくかについて書いていきます。
今回使う関数はこちらの二つ。
have_posts()
the_post()
the_title()
the_content()
the_category()
the_time()
body_class()
is_home()
is_front_page()*have_posts()は記事が一件でもあるか確認する関数。一件でもあればtrueを返す
*the_post()は記事を一件取り出すコード。ループで回すことによって一件一件取り出せる.
*the_title()はタイトルを表示する関数。
*the_content()は内容を表示する関数。
*the_category()は記事のカテゴリーを表示する関数
*the_time()は記事が投稿された時間を表示する関数。
*body_class()はbodyのクラスをカスタマイズするための関数。
*is_home()は投稿ページにいる場合trueを返す関数。
*is_front_page()関数は先頭ページにいる場合trueを返す関数。
記述開始
投稿表示のためのコードをindex.phpに記入する。
<?php get_header(); ?>
<?php
<!--記事が一件でもあったらif文実行 -->
if(have_posts()):
<!--記事がなくなるまでwhileでループし、the_post()で記事を一件一件取り出し。 -->
while(have_posts()): the_post(); ?>
<!-- the_time()で記事の投稿された時間を表示し、the_category()で記事のカテゴリーを表示 -->
<small>Posted on: <?php the_time(); ?><?php the_category(); ?> </small>
<!--記事のタイトル表示 -->
<h3><?php the_title() ?></h3>
<!--記事の内容表示 -->
<p><?php the_content() ?></p>
<hr>
<?php endwhile;
endif;
?>
<?php get_footer(); ?>
最初のif文で記事が一件でも存在するかを確認。
もし存在したらtrueを返すので、if文が実行される。
これでダッシュボードから投稿した記事が全件表示されるようになる。
*the_time()に引数を渡すことによって日にちを表示したり、表示したい時間をカスタマイズできる。
Homeページを静的ページに変更する方法
ダッシュボードから設定->表示設定ページに移動。
ホームページの表示の選択を最新の投稿から、固定ページに変更し、ホームページ、投稿ページを好きなページに変更する。
こうすることで、投稿ページに設定した固定ページで投稿が全て表示されるようになる。
カスタムbodyクラスの使い方
とっても簡単以下のコードをheader.phpの<body>タグのなかに追加してあげるだけ！
<?php body_class(); ?>追加後のheader.phpコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my_theme site</title>
<?php wp_head();?>
</head>
<body <?php body_class(); ?>>
<?php wp_nav_menu(array('theme_location'=>'primary'));?>
これを加えることでwordpressが勝手に以下のような有用なクラスを追加してくれる。
<body class="page-template-default page page-id-5 logged-in admin-bar no-customize-support">もしこれに自分のカスタムクラスを加えたかったら、以下のようにarrayで追加してあげる。
<body <?php body_class(array('IamSuper', 'my-class')); ?>>出力結果のhtmlが以下、しっかりIamSuperとmy-classがクラスに追加されているのが確認できる。
<body class="page-template-default page page-id-5 logged-in admin-bar no-customize-support IamSuper my-class">もしhomeページにだけクラスを付与したい場合はis_home()関数を使う。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my_theme site</title>
<?php wp_head();?>
</head>
<?php
if(is_home()):
$my_classes = array('thisIsHome', 'yeahIAmHome');
else:
$my_classes = array('IAmNotHome');
endif;
?>
<body <?php body_class($my_classes); ?>>
<?php wp_nav_menu(array('theme_location'=>'primary'));?>
このようにif文を使うことによって違うクラスを付与する。
**しかしwordpressでは投稿ページがホームページとして扱われので、投稿ページを変えてる場合は注意が必要。
もしフロントページにクラスを追加したかったら、is_front_page()関数をis_home()の代わりに使う。