ワードプレス自作テーマに必要な8つのテンプレートについて解説!

まいどおおきに!おおもと(@so88qa)です

この記事『初心者必見!ワードプレス自作テーマを作るための環境を整えよう』からの続きの記事です。

今回は、ワードプレステーマの骨組み(PHP・CSS)について解説します。

ブログを始めてみて、HTML・CSSに初めて触れて『いつか自分も自作テーマを作ってみたい!』と思っている人向けに書いている記事です。

興味のある人はぜひ最後まで読んでくださいね。

もくじ

自作テーマに最低限必要なテンプレート

ワードプレスでブログを作る時に必要なテンプレートは8つだけ

  • functions.php(ルールを決めるページ)
  • style.css(装飾)
  • header.php(ヘッダー)
  • footer.php(フッダー)
  • sidebar.php(サイドバー)
  • index.php(トップページなど)
  • single.php(投稿ページ)
  • page.php(固定ページ)
むすめのアイコン画像むすめ

たった8つでブログができるってすごいね!

おおもとのアイコン画像おおもと

実際にはもっと細かくなるんだけど、最大限にまとめると8つだけになるんだよ

functions.php・style.css

  • 「functions.php」はワードプレス内の関数を定義付けするためのテンプレート
  • 「style.css」はサイトのデザインを指定するためのテンプレート
おおもとのアイコン画像おおもと

style.cssは唯一CSSコードで書くテンプレートだよ!

ママのアイコン画像ママ

よくデザインを変える時に書き直すやつね

functions.php

ワードプレス内の関数に定義付け(ルールを決める)ためのテンプレート

functions.phpで記述に失敗すると『ブログが壊れる』のでfunctions.phpを触るときは、PHPファイルをコピーしてバックアップをとってください。

<?php
//テーマのセットアップ
// titleタグをhead内に生成する
add_theme_support( ‘title-tag’ );
// HTML5でマークアップさせる
add_theme_support( ‘html5’, array( ‘search-form’, ‘comment-form’, ‘comment-list’, ‘gallery’, ‘caption’ ) );
// Feedのリンクを自動で生成する
add_theme_support( ‘automatic-feed-links’ );
//アイキャッチ画像を使用する
add_theme_support( ‘post-thumbnails’ );
//エディッターに機能を追加する
add_editor_style();

最低限必要な機能を書いておきます。

style.css

ワードプレスのデザインに装飾をするテンプレート

唯一CSSで記述するテンプレートです。

@charset “utf–8”;
/*
theme Name:/*テーマの名前を書く*/
Description:/*必要ならディスクリプションを書く*/
Author:/*作成者の名前を書く*/
version:/*テーマのVerを書く*/
*/

style.cssは、文字エンコードを指定するために『@charset “utf–8”』を記入してください。

  • UTF–8(世界で一番使われている文字コード)
  • JISコード(メールでよく使われるコード)
  • Shift_JIS(マイクロソフトが開発した文字コード)

ブログでは、『UTF-8』を使えば間違いはないです。

header.php・footer.php・sidebar.php・index.php

  • 「header.php」はヘッダー部分を生成するためのテンプレート
  • 「footer.php」はフッター部分を生成するためのテンプレート
  • 「sidebar.php」サイドバー部分を生成するためのテンプレート
  • 「index.php」はトップ・カテゴリー・エラーページなどを部分を生成するためのテンプレート
むすめのアイコン画像むすめ

画像でみるとイメージがつきやすいね

おおもとのアイコン画像おおもと

今書いているテンプレートがどこに当たるのか考えながら書くといいよ

header.php

ヘッダーを生成するテンプレート

いろいろな機能の呼び出しに使うのでfunctions.phpよりごちゃごちゃするテンプレートだったりする・・・

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<?php wp_head(); ?>
</head>

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

<header>
<div class="header-inner">
</div>
</header>

header.php内には、ブログ内の情報を記載したheadタグを生成しておきましょう!

今回は、font-awesomeのスタイルシートの呼び出しをheadタグの最後に記載していますが、使わないなら記載する必要はないです。

<?php wp_head();?>はシステムやプラグインを呼び出すために必要不可欠なコードです。忘れずに</head>の前に記述してください。

footer.php

フッターを生成するテンプレート

<footer>
<div class="footer-inner">
</div>
</footer>

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

ここでも、ヘッダーと同じでシステム・プラグインを読み込むため<?php wp_footer(); ?>を記述しましょう。

sidebar.php

サイドバーを生成するためのテンプレート。ウェジェットの設定につかいます。

<aside id="sidebar">
<div class="sidebar-inner">
</div>
</aside>

index.php

トップ・カテゴリー・エラーページなどの一覧ページを生成するためのテンプレート

『home.php』・『category.php』・『archive.php』と個別で一覧ページを作れますが、作らない場合は全て『index.php』に適応されます。

<?php get_header(); ?>

<div class="contents">

</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

書くテンプレートを呼び出すための記述を書きましょう!

<?php get_○○(); ?>○○の部分をheade・footerなどにすると読み込めます。(投稿ページ・個別ページは後から記述します。)

single.php・page.php

  • 「single.php」はトップページを生成するためのテンプレート
  • 「page.php」は固定ページを生成するためのテンプレート
むすめのアイコン画像むすめ

トップページと固定ページって違うんだね

おおもとのアイコン画像おおもと

固定ページを使わなければ「page.php」を作る必要がないから別なんだと思う

single.php・page.php

トップページと個別ページを生成するためのテンプレート

<?php get_header(); ?>
<div class="container">
<div class="contents">

</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

今の時点では、single.php・page.phpどちらも、index.phpと同じ内容を書きます。

自作テーマに最低限必要なテンプレートのまとめ

ワードプレスでブログを作る時に必要なテンプレートは8つだけ

  • functions.php(ルールを決めるページ)
  • style.css(装飾)
  • header.php(ヘッダー)
  • footer.php(フッダー)
  • sidebar.php(サイドバー)
  • index.php(トップページなど)
  • single.php(投稿ページ)
  • page.php(固定ページ)

これ以外にもテンプレートを作ることができますが今回は、最低限のテンプレートだけにしました。

自分もワードプレスのテーマを作りたいと思っている人は参考にしてください。

この記事をシェアする

クリックして応援♪

このブログはSWELLで出来ています!

SWELLレビュー
  • 簡単におしゃれな文章が作れる
  • マウスだけで簡単におしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載
当ブログもSWELLで出来ています!
気になる人は公式サイトを覗いて見てくださいね♪

コメントを書いて応援♪

コメントする

CAPTCHA

もくじ
閉じる