処理の流れと関数

ホーム＞ WordPressの記事

WordPressはPHPファイルごとに役割が与えられています。その詳細についてはこちらで説明しました。ここでは、そのファイル別の記述方法をまとめています。

header.php

ページの先頭に記述される内容を格納したPHPファイルです。
通常のHTMLの内容に加えて、wp_head()というPHPの関数を実行しておく事をお勧めします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>私のホームページ</title>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css" media="all">
<?php
wp_head();
?>
</head>
<body>

wp_head()は、使ってもいないような不必要な外部ファイルを読み込んだりします。テンプレートを自作する場合、省略してしまう人も多く、省略してもだいたい問題なく動きます。

しかし、wp_head()を読み込んでいる事を前提に作られたプラグインは結構多く、この一言を書いておかなかったばかりに、不可解なエラーに悩まされたり、公開時は正常だったはずが、公開後にプラグインのアップデートを行った事で、急にエラーが出てサイト全体が動かなくなったりします。

そんな悲劇を起こさないためにも、wp_head()は実行しておく事をお勧めします。

不愉快な改行について

ホームページの上に余計な余白がはいる場合、以下のようにマージンを０にして解決する事も多いです。

html,body {
margin:0;
padding:0;
}

余白は大抵がどこかのCSSで設定されているものなので、犯人のタグを探し出し、そのタグにimportantとかで上書き設定するなどして対処します。WordPressの場合は、なんらかの機能がスペース余白とか、余分な改行を入れたりするので、その部分を探し出して、スペースを消したり、関数などを追記する箇所を調節すれば解決されたりします。

でも、あらゆる手を尽くしたけど、どうしても解決されない不思議な余白がある場合、それはBOMが原因かもしれません。UTF-8などのUnicode形式のテキストファイルにはBOMという付加設定があります。

秀丸の場合、右下のほうのテキストエンコード変更メニューの中にBOMという選択肢があるので、それを解除する事で、BOMを無効化する事ができます。

BOMとはByte Order Markの略で、Unicodeのデータがバイトの並び方の方式を指定する３バイト程度の設定です。これがPHPファイルの先頭に入っていると、HTMLでは改行とみなしてしまいます。

footer.php

ページの最後に記述される内容を格納したPHPファイルです。
通常のhtml内容に加えて、wp_footer()というPHPの関数を実行しておいたほうが、なんらかの動作不良を起こす恐れもなくなるので、安全です。

<?php
wp_footer();
?>
</body>
</html>

個別ページテンプレート

各ページの基本的なテンプレートは以下の通りの内容です。header.phpとfooter.phpの間に挟み込まれるHTMLを記述します。

<?php
/*
　個別ページテンプレート
*/
get_header();・・header.phpを読み込みます

if (have_posts()) :・・ページが存在するかどうかの判別
　while (have_posts()) : the_post();・・必要な数をループ

		the_title();・・タイトルの表示
		the_content();・・コンテンツ内容の表示

endwhile;・・必要な数をループ閉じる
endif;・・ページが存在するかどうかの判別閉じる

get_footer();・・footer.phpを読み込みます

?>

WordPressはURLによって必要なページデータを判別し、読み込むようになっています。共通のパーマリンク設定に基づいたパーマリンク名で、それぞれのページを認識して表示するので、テンプレートは全く同じ内容でも、表示される内容はページごとに入力した別々のものが表示されます。

対象ファイルは

page.php・・固定ページ
single.php・・投稿ページ
single-####.php・・カスタム投稿ページ

もし、同じレイアウトを使いまわすのであれば、固定ページも投稿ページも全く同じ内容で問題ありません。

実用例

実際は、タイトルをhタグで挟み込んだり、CSSを適用するためにdivタグで囲んだりしてHTMLを成型する事になりますので、実際に使っているソースの具体例は、例えば、以下のようなものになります。

<?php
get_header();
?>
<!-- コンテンツ -->
<article>

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

  <div class="page-head"><h1><?php the_title();?></h1></div>

<?php remove_filter ('the_content', 'wpautop'); ?>
↑WordPress特有のpタグなどを除去するフィルターです
<?php the_content();?>

<?php
  endwhile;
endif;
?>

 <div class="go-top"><a href="">一番上にもどる</a></div>

</article>
<?php get_footer(); ?>

共通ページ用テンプレート

WordPressはパーマリンクで表示内容を決めています。では、パーマリンクが存在しないようなページに、投稿内容を表示したい場合はどうすれば良いのでしょうか？

例えばそれは以下のようなページです。

index.php・・トップページ
sidebar.php・・サイドバー
●●●●.php・・独自に用意したphpファイル

トップページにニュースを表示したい時や、サイドバーにブログの新着記事や、他に作ったカスタム投稿のなんらかの情報を表示したい時。header.phpやfooter.phpの中に記述して、ホームページの上や下に投稿情報を表示したい事もあるでしょう。

そんな時のために、パーマリンクやURLに関係なく、投稿タイプや表示種目、昇順降順、件数、または更に細かい条件をANDやORで指定して、表示させる事ができる方法が用意されています。

例えば、BloodyNursesというバンド名で、来場者数が100人以上のライブイベント投稿タイプの最新10件を表示する。といった条件の場合。

$args = array(
 'post_type' => 'liveevent',・・ライブイベント投稿タイプ
 'posts_per_page' => 10,・・表示させる件数
 'order' => 'DESC',・・表示順
 'meta_query' => array(・・条件指定
  'relation' => 'AND',・・両方一致する場合
   array(
    'key' => 'visitor',・・来場者数
    'value' => '100',・・指定数
    'compare' => '<='・・指定した以上
   ),
   array(
    'key' => 'bandname',・・条件
    'value' => 'bloodynurses',・・バンド名
    'compare' => '='・・一致した場合
   )
  )
);

$the_query = new WP_Query($args);

if($the_query->have_posts() ):
while($the_query->have_posts() ): $the_query->the_post();

～ここからループ処理～


the_content();・・内容表示


～ここまでループ処理～

endwhile;
endif;

wp_reset_postdata();・・投稿データリセット

次はfunctions.phpの中身について説明します。

一番上にもどる