【WordPress 自作テーマの作り方】header.php/footer.phpを作成する【003】

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の管理画面の「外観」->「メニュー」のところで作成したものを表示します。

関連のある記事

スポンサーリンク

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。