公開日:2017年8月21日Plusers作成中のWordPressテーマのデモサイトはこちらWordPressのテーマを作成するためには、はじめに最低限テーマとして動作させるためのファイルをアップロードする必要があります。このアップロードするファイルは、WordPressのサイトをphpで生成する際に必ず呼び出される、サイトの骨組みとも言えるテンプレートファイルなので事前にローカル上(自分のパソコン上)で準備しましょう。今回は、WordPrssテーマを構成するための基本的なテンプレートの作成方法と役割についてご紹介していきます。CONTENTSテーマに必要な最低限のテンプレートを作成する作成するテンプレートstyle.cssfunctions.phpheader.phpfooter.phpsidebar.phpindex.phpsingle.phpWordPressにテーマファイルをアップロードするWordPressの管理画面からアップロードする場合ローカル環境のWordPressに直接アップする場合(XAMPP)テーマを作成する準備が完了したら中身を作成テーマに必要な最低限のテンプレートを作成するテーマに必要な最低限のテンプレートファイルを作成しましょう。最低限ブログとして機能させるために必要なテンプレートは、『functions.php』『index.php』『single.php』『header.php』『footer.php』『style.css』の6つですが、サイトにサイドバーを表示させる場合は『sidebar.php』も同時に作成します。作成するテンプレートテーマフォルダstyle.cssfunctions.phpheader.phpfooter.phpindex.phpsingle.phpsidebar.php(サイドバーを出力する場合のみ)WordPressのテーマを作成する際は、まずは上記の7つのテンプレートを、必要最低限な要素を加えながらテーマフォルダの中に作成していきます。テーマの名前を付けたフォルダをローカル上で一つ作成し、その中に各テンプレートファイルを追加してください。各テンプレートの説明と記述するソースコードは下記の通りです。style.cssサイトのデザインを指定するcssを記述するためのテンプレートです。サイトのデザインを決めるCSSは、このテンプレートに記述していきます。テーマの情報も最初に記述しておいきます。"utf-8";』を一番最初に記入してください。その後、コメントアウト(/*~*/)の中にテーマの概要を記述していきます。テーマ概要は、テーマを選択する際に表示されるテーマの名前や作成者・バージョンなどの情報なので記述しておきましょう。Name:』は必ず記述しておいてください。テーマの概要を記述したらcssを記述していきましょう。各ブラウザが自動で出力するCSSをリセットするためのCSSを記述しましょう。このCSSを記述することで、各ブラウザのデフォルトCSSによるデザインの崩れを防止することができます。#ccc;}リセットするためのCSSを記述したら、続いてサイト全体に共通する基本となるCSSを記述していきます。auto;}bodyとはサイト全体の枠組みです。『body』で設定したcssはサイト全体に反映されます。『font-family』は、左から優先順位が高くなり、左のフォントがなければ右へという順で適応されるので好みに合わせてフォントの指定をしてください。上記のソースでは、標準的なフォント指定で設定しています。デフォルトの文字色と行間は、自分の好みで設定してください。bodyで設定する行間は広くしすぎると、デザインの調整がしづらくなってしまうため広げすぎないように注意してください。100%;』を指定し、画面サイズからはみ出ないように指定しています。functions.phpWordPressサイトで使う、オリジナルの関数の定義付けをするためのテンプレートです。機能を追加したりルールを決める場合は、functions.phpに記述します。ここの記述にエラーがあると、WordPressがきちんと機能しなくなるので、関数を記述する際には必ず一時的にバックアップをとっておきましょう。);functions.phpを記述する際は、一番最初にphpの開始タグである『<?php』から記述を初めます。phpの終了タグである『?>』は、基本的に全ての関数を記載した後に記述するか省略します。WordPressのfunctions.phpでは、最後のPHPの閉じタグ(?>)は省略することを推奨しているようです。header.phpサイトの共通部分である、ヘッダーを生成するテンプレートです。後述の、index.phpとsingle.phpで呼び出して使用します。header-inner--></header>header.php内にはサイトの情報を記載したheadタグを作成しておきましょう。ここには、検索エンジンやSNSにサイトの情報を伝えるためのmetaデータや、各種ファイルを読み込むための記述をしていきます。);』が同じ役割を果たすため今回は記述の必要はありません。name="viewport"~』は、レスポンシブデザインのサイトを作成する上では必要不可欠なコードです。viewportを記述しておくことで各デバイスの画面の横幅を認識してページを表示してくれますので必ず記述しておいてください。今回作成するwordpressテーマでは『font-awesome』のWebフォントでアイコンを出力していきます。版のスタイルシートも一緒に呼び出しましょう。(ver5.0.13)有料版のアイコンもありますが、今回は無料のアイコンのみを使って作成します。?>』を『</head>』の前に記述することで、システムやプラグインが情報を出力しています。この記述がないと、システムやプラグインとの連携ができなくなるので、必ず記述してください。footer.phpサイトの共通部分である、フッターに使用されるテンプレートです。後述の、index.phpとsingle.phpで呼び出して使用します。?>』もシステムやプラグインが情報を出力するのに必要になりますので、必ず記述しておきましょう。フッターではヘッダーに記述した『body』と『html』タグを忘れずに閉じてください。sidebar.phpサイドバーを出力するときに使用されるテンプレートです。一般的には、WordPressのデフォルト機能であるウィジェットを出力することが多いのですが、直接記述することもできます。後ほどウィジェットの設定を行いますので、ここでは要素のみ作成しておきましょう。後述の、index.phpとsingle.phpで呼び出して使用します。id="sidebar">』で記述します。asideは本文と関連はあるが違うエリアであることを示すタグです。index.phpトップページやカテゴリ・タグ・エラーページなどの一覧ページを生成するためのファイルです。『home.php』や『category.php』『tag.php』『archive.php』などの個別テンプレートを作成していない場合は、自動的に『index.php』が適応されます。?>『index.php』には、ヘッダーとフッター・サイドバーを呼び出すためのコードを記述しておきます。各要素は、『header.php』『footer.php』『sidebar.php』のテンプレートに分けて作成していくため、それぞれのテンプレートを呼び出すためのwordpress独自の関数で出力しましょう。?>single.php投稿ページ(記事ページ)を生成するためのテンプレートです。記事を開いたときはこのテンプレートが呼び出されて反映されます。class="contents">~</div>』の中身で、記事用のページにレイアウトします。WordPressにテーマファイルをアップロードするここから基本の骨組みとなるテンプレートの作成が完了したら、WordPressにテーマファイルをアップロードしましょう。WordPressの管理画面からアップロードする場合WordPressの管理画面上からアップロードする場合は、テーマフォルダをZipファイルに圧縮してください。Zipファイルへの圧縮は下記の方法で行うことができます。テーマのアップロード』よりファイルを選択し、WordPressにインストールして有効化してください。ローカル環境のWordPressに直接アップする場合(XAMPP)Cドライブ上にあるXAMPPフォルダ内のWordPrssのテーマが入っているフォルダ内に直接テーマフォルダをドラックしましょう。(Zipに圧縮する必要はありません)デフォルトの設定のままの場合は、ファイルまでのパスが『C:\xampp\htdocs\任意のWordPressフォルダ\wp-content\themes』になるかと思います。ファイルをアップロードしたら管理画面上にテーマが表示されるようになりますので、有効化しておきましょう。現在の時点では、テーマを有効化してブラウザで確認しても真っ白な状態で表示されますが、要素が何も入っていないので、何も表示されていない状態となっているだけです。各要素を入れて行くことで、きちんと表示されるようになります。テーマ作成2では、サイトのレイアウトを決め、レスポンシブデザインになるように骨組みを調整していきます。下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。