LoginSignup
35
28

More than 5 years have passed since last update.

Wordpress テーマファイルを作るのに必要最低限なファイル

Last updated at Posted at 2016-06-14

まえがき

Wordpressのテーマファイルは世の中に掃いて捨てるほど存在しています。
その中にはWordpressサイトを制作するうえで非常に便利なテーマもあると思います。
だけど最初から function.php にゴチャゴチャ書かれて、それを読み取るの面倒くさいです。
twentyforteen とかファイル数多過ぎ。
どのファイルがなんで必要なのか読み解くの面倒くさいです。
Wordpressのバージョン4.5.2にデフォルトで入っているテーマ twentysixteen になってからかなりファイル数が減ってスッキリしたけど相変わらず function.php に何書いているか全然わかりません。
一応コメントで説明書かれてるけど英語読めません。すみません。
だから、テーマ作るのに必要最低限のファイルで構築していき、足りないものを各々で追加していったほうが、どのphpファイルがなぜこのテーマに必要なのかを理解しつつ、テーマファイルを作成できると思います。

テーマ作成に必要なファイル

基本的に下記だけあればテーマを作成するにあたって弊害がないと思います。
Codex によると、 style.css と index.php だけで作れるみたいですけど…。

  • functions.php
  • header.php
  • index.php
  • 404.php
  • archive.php
  • category.php
  • page.php
  • search.php
  • single.php
  • sidebar.php
  • footer.php
  • style.css
  • screenshot.jpg

案件に寄りけりだとは思いますが、個人的には js と css(必須であるstyle.cssは除く)は wp-content 内に入れなくても良いと思っています。
少なくとも僕が Wordpress を扱ってきた案件でクライアント自身で管理画面 css をゴリゴリ書き換えたいとか、
js を追加したいという要望は無かったので、静的なサイトと同じようにサイト直下に common or asset フォルダか何か作ってそこに入れればよいと思います。
そうすることで、テーマファイル内でわざわざ <?php get_template_directory_uri(); ?> のような関数を使って書かなくても済むのでソースが綺麗に見えるのかなと思っています。

僕のWordpressサイトの制作フローとして、初めにhtmlで全体を作成してからパーツを分けてWordpressに組み込んで行くので組み込む過程で head 内の css ファイルを下記のように書き換えるのが好きじゃないのです。

<link rel="stylesheet" href="<?php get_template_directory_uri(); ?>/css/style.css">

テーマを作成する

各phpファイルに必要な記述を書き込みます。

functions.php

functions.php
<?php

// 閉じタグ無し

header.php

header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./js/viewport.js"></script>
<title><?php bloginfo('name'); ?></title>
<meta name="keywords" content="<?php bloginfo('keywords'); ?>">
<meta name="description" content="<?php bloginfo('description'); ?>">
<link rel="stylesheet" href="/common/css/style.css">
<?php wp_head(); ?>
</head>

footer.php

footer.php
<script type="text/javascript" src="/common/js/script.js"></script>
<?php wp_footer(); ?>
</body>
</html>

style.css

style.css
/*
Theme Name: テーマの名前(管理画面のテーマ選択で表示される)
Description: テーマの説明(管理画面のテーマ選択で表示される)
Version: 1.0
*/

基本的に /common/css/style.css を使うので上記の3行で事足りるかと思います。

それ以外のphp

other.php
<?php get_header(); ?>

それぞれのコンテンツの内容を記載

<?php get_footer(); ?>

終わり

これで最低限のものは表示されると思います。
もちろんWordpressサイトとして機能を発揮するには index.php とかに投稿を表示させるような記述をしなきゃなりませんが。

参考サイト

WordPress Codex日本語版(テーマの作成)

35
28
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
28