WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

Web制作に関する企業オウンドメディア-WIING media

HOME 〉WordPress 〉WPテーマ制作の完全マップ【制作順に11記事で具体的に解説】

2019.12.03 Tue

WPテーマ制作の完全マップ【制作順に11記事で具体的に解説】

WordPressテーマ

WPテーマ制作の完全マップ【制作順に11記事で具体的に解説】

WPテーマファイルの構造や構築方法をいちから知識を得て制作したい人向け。

今回の記事は当社企業メディアサイトページで連載されていた全11回のWPテーマ制作についてのコラムをまとめたものです。
最初から順番に読んでいってもよいですし、興味のあるところだけ読んでもOKです。または一連の概要だけよんで、詳細は個別に別のサイト情報などを参照してもらってもいいかもしれません。

まったくWordPressテーマ制作を知らない状態からの記事ですが、基本的にはWordPress制作全般の知識や経験がないと理解しにくい点がいくつもあるので、その前提で読んでもらえるといいかもしれません。


WPテーマ制作の基礎編:構成ファイルと基本構造

最初に読んでおきたい、WordPressテーマファイルの基本構造と種類についてまとめてあります。

  • メインビジュアル1
  • WPテーマ制作[1]-WordPressテーマに必要な基本構成ファイル

    WordPressにデフォルトから入っているテーマファイルをダウンロードするとわかりやすいです。

    インストールディレクトリ以下の/wp-content/themes/twentyxxxxのフォルダをダウンロードしています。

  • メインビジュアル1
  • WPテーマ制作[2]-style.cssの記述

    WPテーマ制作[1]-オリジナルWordPressテーマに必要な基本構成ファイルで作成したstyle.cssに以下を記述します。

    フォルダルートのstyle.cssは必須ファイルです。

  • メインビジュアル1
  • WPテーマ制作[3]-基本構造の作成

    テーマフォルダをアップしてテーマを有効化したら、このままだと真っ白なページがルートに表示されます。

    ここではサイドメニューのないタイプ、ワンカラムでのWordPressサイトを前提にテーマを作成します。

ワードプレスの基本的な標準機能に準じて、どのようなファイルが必要で、どのような役割なのかがざっくりと把握できるようになります。そのことでやや敷居の高いオリジナルワードプレステーマも親しみやすくなり、自作テーマでよりカスタマイズや運営がしやすくなるでしょう。

WPテーマファイルの構造を知ると配布されているWPテーマがいかにファイル数が多いのかがわかります。

WPテーマの制御編:プログラム制御ファイルfunction.php

WPテーマは複数のphpファイルで基本構成されますが、ひとつだけ別枠のファイルがあります。それがfunction.phpです。
functionとは関数のことで、そのままワードプレスサイト全体に影響する関数などを書き込むためのファイルですね。

  • メインビジュアル1
  • WPテーマ制作[4]-function.phpのカスタマイズ

    function.phpではテーマファイルや読み込みファイルの制御からのサイトタイトル、アイキャッチ画像やナビゲーション、ウィジェットの項目制御や各種表示項目など、わりと自由にWordPress自体の制御を関数カスタマイズが可能です。

function.phpは何も書かなくても問題ないし、膨大な量の書き込みがあるテーマファイルもあります。個別に機能の制限や拡張を書き込める共通ファイルです。使い方によってはWordPressを大幅に改修できるので、いろいろなWP関数などを知っておくと、よりカスタマイズが上達するでしょう。

function.phpでワードプレスの必要ない標準機能などを制御できますよ。

WPテーマ制作の応用編:構成する基本構造ファイル群

WPプレステーマを構成するファイルをひとつひとつ説明しています。ファイル名は基本的に役割が決まっているので、phpファイルの名前はそのまま使用します。
基本的にはあまりオリジナリティは必要ありませんので、ワードプレスの構造に沿った必要最低限のファイル構成でのテーマ制作がおすすめです。

  • メインビジュアル1
  • WPテーマ制作[5]-sidebar.phpのカスタマイズ

    最近はカラムなしのサイトも多いのですが、下層ページで2カラムにするサイトもあるので、いちおうサイドバーも設置しておきます。

    funciton.phpにはウィジェット機能で有効化しているので、以下を追加してインクルードしてサイドバーが表示されればOKです。

  • メインビジュアル1
  • WPテーマ制作[6]-page.phpとsingle.phpのカスタマイズ

    page.phpは固定ページ、single.phpは投稿記事ページに該当します。

    両方ともヘッダーとフッターを設置するので、以下の2つのWordPressタグは共通です。

  • メインビジュアル1
  • WPテーマ制作[7]-searchform.phpとsearch.phpのカスタマイズ

    searchform.phpとsearch.phpで検索フォームと結果を表示するページを制作します。

    WordPressに標準で実装されているWordPressタグ、get_search_form();を使用します。

  • メインビジュアル1
  • WWPテーマ制作[8]-404.phpのカスタマイズ

    ページが存在しない場合に表示させるテンプレートを作成してみましょう。

    通常はページがない場合はindex.phpが自動表示されますが、404.phpで独自ページを表示することができます。

  • メインビジュアル1
  • WPテーマ制作[9]-index.phpについて

    index.phpというテンプレートファイルは実はフロントページや404ページ、検索結果ページなどが存在しないときにすべて自動で表示させるページとなります。

    [表示設定]⇒[ホームページの表示]で[固定ページ (以下を選択)] を選択した場合は、ホームページと投稿ページはpage.phpで表示されます。

  • メインビジュアル1
  • WPテーマ制作[10]-archive.phpのカスタマイズ

    archive.phpページはカテゴリーやタグ、スラッグや日付などのアーカイブ(書庫)を表示する際に優先して読み込まれるファイルです。

    このページがない場合、以下のようなWPタグにて取得した情報からのリンクもindex.phpにリダイレクトされます。

オリジナルファイル名のPHPテーマファイルやディレクトリを作成して子要素PHPファイルを設置するなども可能です。その場合は以下のような記述でインクルードして呼び出します。

<?php include("ファイル名.php"); ?>

オリジナルファイル名のPHPテーマファイルやディレクトリを作成して子要素PHPファイルを設置するなども可能です。その場合は以下のような記述でインクルードして呼び出します。

WordPress公式テーマディレクトリへの申請する場合は、機能などをすべて埋め込まないといけないため複数のオリジナルファイルを埋め込んだり、拡張していく際には必須になります。

ちなみに当社WPテーマをWordPress公式テーマディレクトリへの申請を前提としていないのは、標準機能でプラグインが使用できないため、その分、機能拡張やメンテナンス、機能の増改築やカスタマイズが煩雑になりすぎるため、基本構造のみはワードプレスの標準機能を軸に、拡張機能は既存のプラグインを臨機応変に採用していくという方式で制作しています。

将来的に新しい機能や部分的な機能と取り換えが必要なとき、テーマ全体を作りかえる必要などがないように配慮しており、ワードプレス自体のバージョンアップにも、基本的に対応コストができるだけ発生しないことを考慮しているからですね。

WPテーマは外側と内部機能の橋渡しをするミドルウェア。全部組み込めば一蓮托生になってしまう。

WPテーマの完成編:出来上がった後にやること

WPテーマの基本的なファイル構成が完了したら、実際に設置してみて記事を投稿したりしてみます。またワードプレスの標準タグ:wp-headが余計なファイルを読み込んでいるので、最後の仕上げでヘッダ部の読み込みファイルの内容をfunction.phpに書き込みをして制御する方法です。

  • メインビジュアル1
  • WPテーマ制作[11]-WPオリジナルテーマ作成完成

    これまでのWPテーマ制作[1]~WPテーマ制作[10]工程でおおよそ基本的なWordPressオリジナルテーマのひな型が完成しました。

    あとはHTMLやCSSでデザイン反映をすればWordPressサイトは完成です。

ひな型はできるだけ管理や改修、カスタマイズしやすいのが一番です。これはできるだけ長く管理工数や負担を減らすためにもっともWordPressサイトを運営するために必要な投資のひとつでもあります。
どれだけ高機能で派手なサイトであっても、更新や機能変更するのにたくさんの費用や日数がかかってしまうとCMS利用の本末転倒となりえません。

function.phpでワードプレスの必要ない標準機能などを制御できますよ。

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。