【WordPress】 自作テーマ 03:header.php/footer.phpを作成する

  • 投稿 : 2016-11-10
  • 更新 : 2020-11-18

本記事は広告およびアフィリエイトプログラムによる収益を得ています

手順

01:作るときに、最低限必要なファイルについて
02:記事ページ/固定ページを作成する
03:header.php/footer.phpを作成する <=今回
04:コメント欄 comments.phpを作成する
05:ウィジェットを追加できるようにする sidebar.php
06:記事の一覧関連を作成する  

型枠を作成する

Twenty Fifteen — 無料の WordPress テーマ
Twenty Fourteen — 無料の WordPress テーマ

上記あたりを参考にして型枠を作りましょう。
header.php/footer.phpは、divタグがまたがっている場合がほとんどなので、一緒にみて構造だけつくると良いかもと思います。

header.php ↓↓
<html <?php language_attributes(); ?> class="no-js">
<head>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="page" class="hfeed site">

<header id="masthead" class="site-header" role="banner">
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</header><!-- #masthead -->

<div id="content" class="site-content">
</div><!-- .site-content -->
</div><!-- .site -->

<footer id="colophon" class="site-footer" role="contentinfo">

</footer><!-- .site-footer -->


<?php wp_footer(); ?>
</body>
</html>
footer.php ↑↑

header.phpでは、headタグの中で、必ずwp_head()を呼び出してください。
footer.phpでが、</body>の前あたりで、必ずwp_footer()を呼び出してください。

そのほかは特にルールとかはなかったと思います。body_class()とかは呼び出しておいたほうが良いと思う。

ブログタイトやタイトル画像は、header.phpのheaderタグの中に書かれています。あと、グローバルナビゲーションを設置する場合は、header.phpのheaderタグの次あたりに書かれてることが多いと思います。

テンプレートタグ/body class - WordPress Codex 日本語版

titleタグは、Wordpressにお任せしましょう

add_theme_support( 'title-tag' );

テーマファイルの「 functions.php 」に上記を追加するだけで、タイトルタグはWordpressが自動で生成してくれるようになります。Wordpress4.1以降の機能です。特に問題がなさそうなので、私はこれを使っています。

グローバルナビゲーション

テンプレートタグ/wp nav menu - WordPress Codex 日本語版

wp_nav_menuという関数が用意されているので、それを使うとよいと思います。

Twenty Twelve — 無料の WordPress テーマ

昔ながらのグローバルナビなら、Twenty Twelveを参考にすればよいかと思います。

<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

こんな感じで実装できます。メニューはWordpressの管理画面の「外観」->「メニュー」のところで作成したものを表示します。

追記:テーマ作りたい人は、本買ったほうが早いかも

追記:2018/04/16

参考:【書籍レビュー】WordPress 仕事の現場でサッと使える!デザイン教科書 – ブログ運営のためのブログカスタマイズ

参考:【書籍レビュー】エンジニアのためのWordPress開発入門 – ブログ運営のためのブログカスタマイズ

標準テーマやネットでいろいろ調べながら作成しましたが、あとから本を読んでみて、上記の2つのどちらかを購入すれば時間短縮できて、かつそのものズバリかなぁと思いました。前者が多くの人がテーマ作成するのに参考になりそうに思います。テーマの作り方そのままというか、Wordpressをつかってサイト構築するデザイナー向けに書かれてるので、そうなると思います。Amazonのレビューや、実際に書店で内容を確認してもらえれば、とよいかと思います。

スポンサーリンク