\ Advertisements/

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

ブログ
この記事は約10分で読めます。

 

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

 

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

 

初心者必見!ワードプレス自作テーマを作るための環境を整えよう
この記事は「ワードプレス自作テーマ」作成のための環境作りをピックアップした記事です。 無料で、どの環境でも使えるツールを紹介してますので 自作テーマを作りたいと思っている人は参考にしてください。

 

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

 

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

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

 

初心者必見!ワードプレス自作テーマを作るための環境を整えよう
この記事は「ワードプレス自作テーマ」作成のための環境作りをピックアップした記事です。 無料で、どの環境でも使えるツールを紹介してますので 自作テーマを作りたいと思っている人は参考にしてください。
【知ってて損なし!】3分で覚えるCSSの基本の『きの字』について
ワードプレスでブログを始めたけど、テーマほいじるのに「CSS」をいじるのは仕切が高くて難しそう、、、、 そんなあなたの為に、CSSの基本を教えましょう! とても簡単にまとめてあるので、ぜひみてくださいね!

 

\ Advertisements/

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

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

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

 

むすめ
むすめ

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

おおもと
おおもと

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

 

\ Advertisements/

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』を使えば間違いはないです。

 

\ Advertisements/

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などにすると読み込めます。(投稿ページ・個別ページは後から記述します。)

 

はじめてのブログをワードプレスで作るための本を探す

 

\ Advertisements/

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と同じ内容を書きます。

 

\ Advertisements/

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

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

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

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

 

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

 

おおもと
おおもと

次回から、テンプレートごとに分けて追記して行くね

 

今回はここまで!それじゃまた!

 

初心者必見!ワードプレス自作テーマを作るための環境を整えよう
この記事は「ワードプレス自作テーマ」作成のための環境作りをピックアップした記事です。 無料で、どの環境でも使えるツールを紹介してますので 自作テーマを作りたいと思っている人は参考にしてください。
【知ってて損なし!】3分で覚えるCSSの基本の『きの字』について
ワードプレスでブログを始めたけど、テーマほいじるのに「CSS」をいじるのは仕切が高くて難しそう、、、、 そんなあなたの為に、CSSの基本を教えましょう! とても簡単にまとめてあるので、ぜひみてくださいね!

 

おおもと
おおもと

質問などがあれば、コント覧に書き込んでくださいね!

タイトルとURLをコピーしました