WordPressでオリジナルデザインのテーマを自作する場合に必要なファイル【まとめ】

WordPressでオリジナルデザインのテーマを自作する場合に必要なファイル【まとめ】

WordPressには有料・無料を問わずたくさんの便利なテーマ(テンプレート)があります。
ただ実際には既存のテーマでは対応が難しい、または仕様を上書いたりカスタムに手間取るくらいなら自作の方が早いのもあって、オリジナルデザインのテーマを自作するケースって結構多いんじゃないでしょうか。

自作するたびに色んなサイトを回って情報を集め直してというのは少々効率が悪いので、基本的な部分、必要なファイルなど簡単にまとめておこうと思います。

最低限必要なファイル

index.php

front-page.php、home.phpなどに変わってトップページ表示用に使うことは出来ますが、該当するテンプレートがない場合に最終的に表示されるテンプレートという認識です。

style.css

主にテーマの情報を記載します。また静的サイトと同様に使用するcssを記述出来ます。
基本的な記述内容はこんな感じです。

/*
Theme Name: ●テーマの名前
Description:●テーマの説明
Version: ●バージョン
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
License: ライセンス
License URI: ライセンスの URL
*/

色々記述する部分があり、案件にもよりますが最低限●の付いている3つを記述しておけば問題ないかと思います。

基本的なファイル

functions.php

WordPressをカスタムするならこれがないと話になりません。
functions.phpだけで一つの記事になってしまうので詳細は省きますがウィジェットやカスタム投稿など必要な設定を記述します。
あと以前の記事にも書きましたが、不要なタグを削除することも可能です。

WordPressでhead内に出力される不要なタグ(コード)を削除する

header.php

WordPressなどで便利なのはパーツを共通化できることですね。
header.phpではヘッダー関連の情報をまとめて記述します。参考までにベースでよく使うコードを載せて起きます。
呼び出すときは<?php get_header(); ?>と記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!--=============  FACEBOOK  ============-->
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:locale" content="ja_JP" />
<!--=============  CSS  ============-->
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<?php wp_head(); ?>
</head>
	
<body <?php body_class(); ?>>
<header id="header">
	<nav id="nav-area">
	<div id="openbtn"><span></span><span></span><span></span></div>
	<div id="g-nav">
		<p class="pc-none">MENU</p>
		<ul> 
			<li><a href="">ページタイトル</a></li>
			<li><a href="">ページタイトル</a></li>
			<li><a href="">ページタイトル</a></li>
			<li><a href="">ページタイトル</a></li>
		</ul>
	<!-- / #g-nav --></div>
	<!-- / #nav-area --></nav>
</header>
	
<div id="container">

使用頻度の高いフォントオーサムは最初からテンプレートに読み込んでます。
合わせてmobile用のハンバーガーメニューなどのベースを書いています。

footer.php

主にjsやSNS関連の記述をまとめています。
呼び出すときは<?php get_footer(); ?>と記述します。

</div><!-- / #container -->

<footer id="footer">
<!--=============  SNS BTN  ============-->
<!--=============  FOOTER NAVI ============-->
</footer>

<!--================== COMMON JS ================-->
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.12.1.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/common.js"></script>
<!--================== SNS =================-->
<!--================== ANALYTICS =================-->

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

sidebar.php

個人的にはサイドバーはなるべく使わない派ではありますが、必要に応じて使います。
呼び出すときは<?php get_sidebar(); ?>と記述します。

<aside class="sidebar">
	
	<!-- 出力したい内容 -->

</aside>

front-page.php

トップページの表示用に使用します。

<?php
/*
Template Name: トップページ用テンプレート
*/
get_header(); ?>

<main id="main-area">
	<div id="content">

	<!-- 出力したい内容 -->
		
	</div><!-- / #content -->
</main><!-- / #main-area -->

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

page.php

固定ページ表示用のテンプレート。
ベースはfront-page.phpと同じです。実際にはpage-○○.phpなどのファイルを作ってページ個別の内容を表示させるために使うことが多いです。

single.php

シングル(投稿)ページ用のテンプレート。
日付やタイトル、カテゴリーなど必要によって表示内容をカスタムします。

archives.php

一覧ページ表示用のテンプレート。
カテゴリー一覧ページ、タグ一覧ページ、日付別一覧ページなど細かい設定をしないのであればarchives.phpを使用しています。
例えばこんな風に記述します。

<?php
/*
Template Name: アーカイブ用テンプレート
*/
get_header(); ?>

<main id="main-area">
	<div id="content">

	<?php if(have_posts()): while(have_posts()):the_post(); ?>

	<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

	<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
	<p><?php the_category(', '); ?></p>
	<p><?php the_content('Read more'); ?></p>

	<?php endwhile; endif; ?>

	<?php previous_posts_link('新しい投稿ページへ'); ?>
	<?php next_posts_link('古い投稿ページへ'); ?>

	</div><!-- #content -->
</main><!-- / #main-area -->

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

細かく設定をする必要があればcategory.phpなど個別で作成します。

searchform.php

検索フォームを表示するためのテンプレートです。
そもそも検索フォームを置いていないサイトも多いですが、ブログ系などではあった方がいいですね。

<form method="get" id="searchform" action="<?php echo home_url('/'); ?>" >
	<input type="text" name="s" id="s" value="記事を検索">
	<input type="submit" class="btn search-btn" value="検索"><input type="image" src="<?php bloginfo('template_url'); ?>/img/blog/search_btn_pc.png" class="js-image-switch">
</form>

search.php

検索結果を表示するためのテンプレートです。

404.php

忘れがちですが、すごく大事なテンプレートです。
サイトリニューアルでのリダイレクト漏れ、テンプレートの設置漏れなどでうっかり表示されてしまう可能性がある404ページ。
たまにデザインが崩れまくっている残念なサイトがあるので気をつけたいところです。

screenshot.png

管理画面でテーマを選ぶ時に表示される画像です。
推奨サイズは880x660px。保存形式はjpgなども使えますが基本はpngです。

まとめ

いかがでしょうか。
ファイルの数が多いと感じた方もいらっしゃるかもしれませんが、最低限サイトの構成上必要であろうファイルをピックアップしました。
自作用のテンプレートを持っておけば毎回一から作る必要がなくなるのでオススメです。

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM