【ワードプレス】テーマの作り方②：ヘッダー・フッター・サイドバーを追加する

ワードプレステーマの作り方②のアイキャッチ

SHARE

このページにはプロモーションが含まれています

テーマの作り方①では、テーマとしてワードプレスに認識させ、ページを表示するまでの手順を解説しました。

ワードプレステーマの作り方①のアイキャッチ 【ワードプレス】テーマの作り方①：まずは簡単なテーマを作ってページを表示する

このページでは、ページにヘッダー・フッター・サイドバーを表示させる方法について解説します。

ページの構造

まずはページの構造について解説します。基本的にウェブページは下のようにヘッダ・フッター・サイドバー・記事本文の４つで構成されている場合が多いです。

基本的なページの構成

記事本文部分（コンテンツ）については、テーマの作り方①で have_posts() ・the_postループ（メインループ）を用いて出力する方法を既に解説しています。そのため、このページではそこにヘッダー・フッター・サイドバーを追加する方法を解説していきます。

ヘッダー・フッター・サイドバーの追加

まずは追加方法について解説します。

スポンサーリンク

ファイルの準備

事前にヘッダー・フッター・サイドバーを追加するためにファイルの準備を行います。

ファイルのコピー

下記の場所に header.php と footer.php と sidebar.php があります。

wp-includes/theme-compat/

コピー元のファイルの場所

これら３つのファイルをテーマフォルダにコピーしてください。テーマ名が「TestTheme」であれば、コピー先のフォルダは下記になります。

ワードプレスインストールフォルダ/wp-content/themes/TestTheme

ファイルコピーの様子

これらの header.php・footer.php・sidebar.php がどういうファイルであるかはヘッダー・フッター・サイドバーが表示される仕組みで解説します。

ファイルの編集

コピーしてきた header.php・footer.php・sidebar.php の３ファイルの先頭付近に下記のコードがありますので、この部分は丸ごと削除してください。

index.php footer.php sidebar.php 
_deprecated_file(
	/* translators: %s: template name */
	sprintf( __( 'Theme without %s' ), basename( __FILE__ ) ),
	'3.0.0',
	null,
	/* translators: %s: template name */
	sprintf( __( 'Please include a %s template in your theme.' ), basename( __FILE__ ) )
);

wp-config.php でデバッグモードを ON にしている場合、上記のコードがあるとヘッダーフッターサイドバーを追加する際に下の図のような警告が表示されてしまいます。

デバッグモードON時のヘッダーがない時のエラー表示

これはテーマフォルダ内に index.php・footer.php・sidebar.php が無いという警告です。ですが、テーマフォルダ内には既にこれらのファイルはコピーしてきていますので、この警告が表示されないように上記のコードは消してしまって問題ありません。

ヘッダーの追加

では実際にページへのヘッダーの追加を行なっていきます。ワードプレスでは get_header 関数を実行することでヘッダーを追加することが可能です。

早速 index.php を下記のように編集してページを表示してみましょう。表示するのはどのページでもオーケーです。

index.php 
<?php
get_header();
while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}
?gt;

ページ表示すればウェブサイトの名前などのヘッダーが表示されるようになったことが確認できると思います。

ヘッダーが表示される様子

フッターの追加

ワードプレスでは get_footer 関数を実行することでフッターを追加することが可能です。

index.php を下記のように編集してみましょう。

index.php 
<?php
get_header();
while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}
get_footer();
?>

ページ表示すると、今度はページの下の表示が増えたことが確認できると思います。

フッターが表示される様子

さらに、ワードプレスにログインした状態でページを表示すると、ワードプレスの管理バーが表示されるようになります。実はこの管理バーはフッターの一部として表示されているようです。

管理バーが表示される様子

スポンサーリンク

サイドバーの追加

ワードプレスでは get_sidebar 関数を実行することでサイドバーを追加することが可能です。

index.php を下記のように編集してページを表示してください。

index.php 
<?php
get_header();
while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}
get_sidebar();
get_footer();
?>

ページ表示してみると、サイドバーらしきものは表示されるようになりますが、サイドではなく下の方に表示されてしまっているかもしれません。

サイドバーが下側に表示される様子

これはスタイルシートの設定がまだ行われていないためです。サイドバーという要素は追加されたものの、それをどこに配置して表示するかは指定されていない状態です。この配置の指定はスタイルシートで行われます。

とりあえず暫定で下記のように index.php と style.css を変更してやれば、サイドバーが右側に表示されるようになるはずです。

index.php 
<?php
get_header();

echo "<div id=\"content\">\n";

while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}

echo "</div>\n";

get_sidebar();
get_footer();
?>
style.css 
#content {
	width : 70%;
	float : left;
}

#sidebar{
	width : 25%;
	float : right;
}

#footer{
	clear : both;
}

これによりサイドバーが右側に表示されるようになります。ちょっとウェブサイトっぽくなりましたね！

サイドバーが右側に表示される様子

ヘッダー・フッター・サイドバーが表示される仕組み

関数を実行するだけでヘッダー・フッター・サイドバーが表示されるようになりましたが、なぜ表示されるようになったかを解説したいと思います。

get_header・get_footer・get_sidebar 関数の動き

ヘッダー・フッター・サイドバーは、それぞれ get_header 関数・get_footer 関数・get_sidebar 関数を実行することで表示することができました。

それぞれの関数は主に下記を行なっています。

◼️get_header 関数

header.php を実行する

 

◼️get_footer 関数

footer.php を実行する

 

◼️get_sidebar 関数

sidebar.php を実行する

つまり、これらの関数の実行によりヘッダー・フッター・サイドバーが表示されるようになった理由は、「header.php・footer.php・sidebar.php にそれぞれヘッダーを出力するプログラム・フッターを出力するプログラム・サイドバーを出力するプログラムが記述されているため」と言えます。

ヘッダーフッターサイドバーが出力される仕組み

スポンサーリンク

実行される header.php・footer.php・sidebar.php の場所

さらに、これらの関数では、テーマフォルダ内にファイルが存在する場合はテーマフォルダ内の header.php・footer.php・sidebar.php が実行されます。

テーマフォルダにheader.php等がある場合の実行先

ちなみにですが、テーマフォルダに header.php も footer.php も sidebar.php も存在しない場合は、下記のフォルダ内に存在するファイルが実行されます。

ワードプレスインストールフォルダ/wp-includes/theme-compat/

テーマフォルダにheader.php等がない場合の実行先

もともとヘッダーフッターサイドバーを表示するための仕組みがワードプレスインストール時点で用意されているというわけです。

注意

必ずテーマフォルダに header.php・footer.php・sidebar を用意し、編集する場合もテーマフォルダのファイルを編集するようにしてください

theme-compat フォルダのファイルを変更すると、ワードプレスのアップデートで上書きされてしまう・アップデートがうまくできなくなる可能性があります

実行される PHP プログラムの中身

このページの最初のファイルの準備でコピーしてきた header.php・footer.php・sidebar.php がどのような処理を行っているかを見てみましょう。

これらがどのように動作しているかを知っておけば、今後 header.php・footer.php・sidebar.php を編集してヘッダー・フッター・サイドバーの表示を変更するときの参考になると思います。プログラムが長いのでここではポイントだけ説明します。

header.php

主に header.php には下記の２つのことが記述されます。

  • ページ表示に必要な記述の出力
  • ページのヘッダーに表示する要素の出力

前者は<!DOCTYPE html>から</head>の部分に記述され、後者はそれ以降に記述されています。

「ページ表示に必要な記述」とは、例えば HTML のヘッダーが挙げられます。wp-includes/theme-compat/header.php では、下記で HTML としてのヘッダーが出力されていることが確認できます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<link rel="profile" href="http://gmpg.org/xfn/11" />

また、「ページ表示に必要な記述」としてはスタイルシートやスクリプトの読み込みが挙げられます。例えば下記ではスタイルシートを読み込みを行う HTML が出力されています。こういった HTML として必要な情報はヘッダーで出力するのが一般的です。

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />

ワードプレスのヘッダーにおいて一番重要になるのは下記の wp_head 関数の実行です。

<?php wp_head(); ?>

この wp_head 関数では、JavaScript やスタイルシートが読み込まれるなど、プラグイン等が動作するために必要な処理が行われています。ですので、header.php を編集する場合でも、この wp_head 関数の実行は必ず行うようにしましょう。

「ページのヘッダーに表示する要素」は例えばウェブサイトのサイト名が挙げられます。wp-includes/theme-compat/header.php では下記でウェブサイトのサイト名が出力されています。

<h1><a href="<?php echo home_url(); ?>/"><?php bloginfo( 'name' ); ?></a></h1>

ウェブサイトを象徴する画像やウェブサイトのサブタイトルみたいなものがあるのであれば header.php で出力すると良いと思います。

footer.php

主に header.php には下記の２つのことが記述されます。

  • ページのフッターに表示する要素の出力
  • ページ読み込み後に実行する処理

前者は主に<div id="footer">から</div>の部分に記述され、後者はそれ以降に記述されています。

footer.php で重要なのは「ページ読み込み後に実行する処理」の一つである wp_footer 関数の実行を行うことです。

<?php wp_footer(); ?>

この wp_head 関数同様に、ワードプレスとして動作させるために必要な処理が実行されています。例えば管理バーの出力もこの wp_footer 関数で行われています。ですので、footer.php を編集する場合でも、この wp_footer 関数の実行は必ず行うようにしましょう。

sidebar.php

wp-includes/theme-compat/sidebar.php では、検索フォームやカテゴリーの一覧等の出力が行われているようです。

例えば下記で検索フォームを表示するための HTML が出力されています。

<?php get_search_form(); ?>

また下記でカテゴリーの一覧が表示のための HTML 出力が行われています。

<?php
wp_list_categories(
  array(
    'show_count' => 1,
    'title_li'   => '<h2>' . __( 'Categories' ) . '</h2>',
  )
);
?>

他にも様々な出力が行われていますが、header.php の wp_head 関数や footer.php の wp_footer 関数のように sidebar.php で実行が必須になる関数はありません。ですので sidebar.php は他に比べて自由に編集することができます。

ヘッダー・フッター・サイドバーの編集

最後にヘッダー・フッター・サイドバーを自分で編集する方法と注意点について説明しておきます。

スポンサーリンク

ヘッダー・フッター・サイドバーの編集の仕方

ここまで解説してきた通り、ヘッダー・フッター・サイドバーはそれぞれ header.php・footer.php・sidebar.php が出力しています。

ですので、これらのファイルを編集すれば、ヘッダー・フッター・サイドバーの表示を変更することが可能です。

PHP編集による表示結果が変わる様子

このページではヘッダー・フッター・サイドバーの追加方法に焦点を当てておりますので、作り込みについては解説しませんが、また後ほど作成するページで具体的な作り込み方法についても解説したいと考えています。

もし編集する場合は下記の２点に注意してください。

注意点１：編集するのはテーマフォルダ内のファイル

実行される header.php・footer.php・sidebar.php の場所で解説した通り、header.php・footer.php・sidebar.php は wp-includes/theme-compat 以下にも用意されていますが、こちらを編集するのは危険です。

ですので、このページの最初のファイルの準備でファイルをコピーする作業を行ってもらいました。

ヘッダーフッターサイドバーの表示を変更するためにファイルを編集する場合は必ずテーマフォルダ内のファイルを編集しましょう。

注意点２：ヘッダー・フッターで欠かせない処理

前述の通り、ヘッダーやフッターの編集をする場合にも header.php では wp_head 関数を、footer.php では wp_footer 関数を必ず実行するようにしましょう。これらの関数ではプラグインやワードプレスが動作するために必要な処理が実行されています。

wp_head 関数と wp_footer 関数で行われていること

ここからは補足ですが、wp_head 関数と wp_footer 関数で実行されている処理について解説したいと思います。

これらの wp_head 関数と wp_footer 関数では、事前にフックされた（分かりやすく言うと事前に登録された）関数が実行されます。

ワードプレスでページ表示する上で必ずフックされる関数は下記のファイルに記載されています。

ワードプレスインストールフォルダ/wp-includes/default-filters.php

このファイル内で、下記のように第一引数に “wp_head” が指定されている部分が wp_head 関数に対してフックしている部分になります。

add_action( 'wp_head', '_wp_render_title_tag', 1 );

第二引数が wp_head 関数が実行される際に実行される関数名で、第三引数が優先度（値が小さいほど優先度高い。優先度高いほど早く実行される）になります。 例えば上記の add_action 関数実行により、 wp_head 関数が実行される際に _wp_render_title_tag 関数が優先度 “1” で実行されることになります。

default-filters.php では複数の関数が wp_head 関数に対してフックされ、wp_head 関数実行時に、その複数のフックされた関数が実行されます（私が動作確認した時は23個の関数がフックされていました）。

wp_footer 関数も同様にフックされた関数を実行しています。wp_footer 関数へのフックは下記のように実行されています（見方は wp_head の時と同様なので解説は省略します）。

add_action( 'wp_footer', 'wp_admin_bar_render', 1000 );

これの中の関数にはプラグインやワードプレスが正しく動作するために必要な処理が含まれていますので、まずは wp_head 関数や wp_footer 関数はそのまま実行しておく方が無難だというわけです。

関数のフックを追加・フックを削除

とは言え、ワードプレスのテーマ開発に慣れてくると、wp_head 関数や wp_footer 関数に、さらに関数をフックさせたい場合やフックされている関数を削除したい場合も出てくるかもしれません。追加したい場合は add_action 関数を、削除したい場合は remove_action 関数を実行するとで、wp_head 関数や wp_footer 関数でフックする関数の追加・削除が行えるようになります。

例えば index.php を下記のように編集してみてください。

index.php 
<?php
add_action( 'wp_head', 'print_test', 1 );

get_header();

echo "<div id=\"content\">\n";

while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}

echo "</div>\n";

get_sidebar();
get_footer();
?>

<?php
function print_test() {
	echo "フック関数追加しました！！\n";
}
?>

ページを表示すると「フック関数追加しました！！」という文字列がウ出力されるようになっているはずです。

フックの追加

これは add_function 関数により print_test 関数を wp_head 関数にフックしたためです。

次は index.php を下記のように編集してみてください。

index.php 
<?php
remove_action( 'wp_footer', 'wp_admin_bar_render', 1000 );

get_header();

echo "<div id=\"content\">\n";

while ( have_posts() ) {
	the_post();
	the_title();
	the_content();
}

echo "</div>\n";

get_sidebar();
get_footer();
?>

続いてダッシュボードにログインした後にページを表示すると管理バーが表示されなくなっていることが確認できると思います。これは remove_function 関数により wp_footer 関数へフックしている関数から wp_admin_bar_render を削除したためです。

フックの削除

管理バーがないと困ると思いますので、動きが確認でき次第すぐ remove_action 関数の部分は削除しておいてください。

割と上級者向けのカスタマイズになると思いますが、覚えておくといつか役に立つと思います。

フックについては下記で詳細を解説していますので、興味がある方は是非読んでみてください。

ワードプレスのフック解説ページのアイキャッチ ワードプレスのフックとは？使い方は？初心者向けに分かりやすく解説します！

スポンサーリンク

まとめ

今回はページにヘッダー・フッター・サイドバーを追加する方法を解説しました。

ヘッダー・フッター・サイドバーの表示を変更するためには、それぞれ header.php・footer.php・sidebar.php を編集することになります。編集時には wp_head 関数と wp_footer 関数の実行を削除してしまわないように注意しましょう。

次回のテーマの作り方③では、テンプレートファイルを追加することでページの種類ごとに表示するページのひな形を変更する方法について解説します！

ワードプレステーマの作り方③のアイキャッチ 【ワードプレス】テーマの作り方③：テンプレートファイルでページの種類ごとに表示を切り替える

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

ワードプレステーマの作り方①のアイキャッチ
【ワードプレス】テーマの作り方①：まずは簡単なテーマを作ってペ…

次の記事

【ワードプレス】テーマの作り方③：テンプレートファイルでページ…
ワードプレステーマの作り方③のアイキャッチ