WPテーマ制作[1]-WordPressテーマに必要な基本構成ファイル-Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

2019.10.13 Sun 2021.10.16

WPテーマ制作[1]-WordPressテーマに必要な基本構成ファイル

テーマファイルの構成について

WordPressにデフォルトで入っているテーマファイルをダウンロードするとわかりやすいです。 twentyで始まるこれらのテーマは、元々はWordPressコミュニティ内の既存テーマをベースに制作されているので、最小構成で配布されています。

インストールディレクトリ以下の/wp-content/themes/twentyxxxxのフォルダをダウンロードします。ただし近年のtwenty系はファイルやフォルダ構成がかなり増えているので、基本構成を知るためにはtwenty-sixteen以前のテーマをWordPress.orgからダウンロードしてファイル構成を確認したほうがよりわかりやすいでしょう。

Twenty Twelve前後が割とファイル構成がシンプルです。なければほかのテーマフォルダでよいですが、なるべくファイル数が少ないテーマがWordPressテーマの構成を理解しやすいのでお勧めです。

テーマフォルダ内部を見ると、いろいろなファイルがありますが、WordPressテーマは基本的に以下のファイル構成があればOKです。テーマファイルの構成はWordPressダッシュボードの[外観]-[テーマの編集]からも一覧が確認できます。

WordPressオリジナルテーマ制作に必要なファイル一覧

今回は当社のWordPressメディア用テーマ、WIING MEDIAを例に説明しています。以下のような拡張子ファイルを用意します。

[1]style.css スタイルシート/テーマ説明も記述する必須ファイル css/reset.css ブラウザごとの差分を初期化する(ファイル名変更可) css/base.css スタイルシート/PCサイト用(ファイル名変更可) css/base_res.css スタイルシート/レスポンシブ対応用(ファイル名変更可)
[2]js/utility.js javascriptファイル(ファイル名変更可)
[3]404.php エラーページ
[4]archive.php 一覧ページ
[5]footer.php　フッター
[6]function.php　関数を記述するページ
[7]header.php　ヘッダー
[8]index.php　トップページ
[9]page.php　固定ページ
[10]search.php　検索結果
[11]sidebar.php　サイドバーブロック
[12]single.php　投稿記事ページ
[13]screenshot.png　テーマ選択に表示させる画像 1200*900pxもあれば十分

不必要ファイルや機能をできるだけ使用しない構成です。

実はindex.phpとstyle.cssだけでページのみは表示できますが、あとで追加カスタマイズするのでとりあえず上記構成を準備しておくとよいでしょう。

上記16ファイルと3フォルダ、画像1点をコピー複製して、ないファイルがあれば別途制作します。すべてのファイルをWPテーマの親のフォルダを作成して中にすべてのファイルとフォルダを入れます。基本的には上記の構成をもとにして、用途や必要に応じてフォルダやファイルを追加、インクルードしていきますが、とりあえずファイル構成はこれで完成です。

テーマ構成ファイル名の変更

WordPressテーマの基本構成ファイル名(各PHPファイルとstyle.css)は変更やオリジナル指定ができません。それぞれのデフォルトのファイル名に対して組みこまれるべき機能や要件が本体のプログラムやプラグインなどで共通指定されているためです。
ファイル名の指定や個別のファイル名を指定したい場合は、個別に用意したファイル名のファイルをインクルードして、各基本ファイル内で実行させるようなイメージになります。

基本構成ファイルは標準的な構成で準備して、そのほか追加機能などはプラグインで装脱着可能な組み立てをしておくのが、WordPresテーマのファイル構成がほぼ同一構成で使用できるので、テーマを構成する独自ファイル名はあまり追加しすぎない方が、後々の運用や改修時に対応が迅速に可能になるでしょう。

オリジナルファイル名は可能な限り最小限にとどめる

SEOのためにMinify処理(軽量化)は非推奨

ページ軽量化や検索エンジン対策として、CSSやJavaScriptなどをHEADタグ内に圧縮して記述する方法が推奨されている場合がありますが、当社では以下の理由から、あまり推奨していません。

記述コードがかなり見づらくなる
圧縮コードの編集が困難になる
ヘッダ箇所がかなり長くなるためHTMLコード編集しずらい
レスポンシブCSS編集が非効率になる
ページスピードの恩恵が感じられない
SEO上の大きな利点が感じられない

あくまでも当社推奨なので断定するわけではありませんが、運用や検索エンジン順位、編集や改修、ページスピードの高速化や文法的適正化などのあらゆる点から実際に複数サイトを制作、運営において合理的判断をもとに到達したテーマファイル構成になります。

また、WordPressテーマはあくまでの目的に合致した構成がもちろん重要でもありますので、ファイルを再分化したり、CSSやJSファイルを分割やインポートさせたり、用途に応じて最適な構成が推奨されますが、いずれもテクニカル指向で煩雑化をするような構成よりも、運用上負担が可能なかぎり軽減されており、各種アップデート時などの不具合やコンフリクトなどに対処しやすいファイル構成がいちばん効率的で合理的なWordPressテーマになるのではないでしょうか。