WordPressでHeaderとFooterを作成する

wordpressで簡単なthemeを作成するための記事です。カスタマイズや高度なページを作るための記事は別にあるのでページ内のリンクから進んでください。

フォルダ構成
ヘッダーファイルを作成する
フッターファイルを作成する

フォルダ構成

前回作成したフォルダ構成は以下のようになっています。

your_theme
  |--index.php
  |--style.css
  |--screenshot.png

screenshot.pngはなくても問題ありません。

ヘッダーファイルを作成する

your_themeフォルダにheader.phpを追加します。

今まではwp-includeフォルダにあるheader.phpが代わりに呼ばれていたので、ヘッダーが自動で表示されていました。これはwordpressのデフォルトの仕様です。
なのでheader.phpを追加するとheader部分に表示されていたものが消えます。

ここからheader.phpを編集していきます。

<?php
?>
<!DOCTYPE html>
  <head>
    <title><?php bloginfo( "name" ); ?></title>
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <?php bloginfo( "name" ); ?>

以上です。
レスポンシブや文字コード、言語などの設定は後で追加すれば大丈夫です。
ここまで書いたらヘッダー部分とブラウザタブにブログのタイトルが表示されるはずです。

フッターファイルを作成する

your_themeフォルダにfooter.phpを追加します。

今まではwp-includeフォルダにあるfooter.phpが代わりに呼ばれていたので、ヘッダーが自動で表示されていました。これはwordpressのデフォルトの仕様です。
なのでfooter.phpを追加するとfooter部分に表示されていたものが消えます。

footer.phpを編集していきます。
<?php wp_footer(); ?>を忘れると管理用のバーが消えてしまうので注意です。

<footer>
  Copyright © 2020 meko All Right Reserved
</footer>
<?php wp_footer(); ?>

WordPressでHeaderにスタイルをつける

WordpressでHeaderを作成するの続きです。header.phpに必要なもの話cssファイルについてヘッダーのスタイルを作っていくまずheader.phpを編集していきます。<?php/** * Header file fo

Posted in

wordpress