お客様からの要望で「自分で更新を行いたい」と言われる事が多く、最近はどこのWEBサーバでもWordPressのインストール機能がついていたりするので、99%の確率でWordPressでWEBサイトを構築しています。(残りの1%は、他CMSだったりHTMLだったり)
フルスクラッチだと、工数が多くなりがちなので、工数を減らすための最小限のテーマファイルだったり、コードだったりを常に考えています。
この記事は、その工数を減らす目的で簡単にそれっぽいWEBサイトがWordpress(以下、WP)で作れることをテーマとして書きました。自分であちこち探す手間を減らすため、備忘録も兼ねています。
コードを入れてしまうと長くなるので、コードと解説は別記事にしています。
説明はいらないから、コードだけ欲しいと言う方は、ページ最後の各ファイル内コードをご覧ください。
ファイル構造
WordPress Codexを参考にした最小のファイル構造です。
../themes/original/
├─images/(画像用)
| ├─***.jpg
| ├─***.png
| └─***.svg...
├─inc/(パーツ用)
| ├─parts-***.php
| ├─parts-***.php
| └─parts-***.php... ※必要なパーツごとファイル化
├─fnc/(functionsのパーツ用)
| ├─fnc-admin-control.php
| ├─fnc-custom-post.php
| └─fnc-bredcrumb.php...
├─js/(jsファイル用)
| └─***.js...
├─css/(cssファイル用)
| ├─style-small.css
| ├─style-medium.css
| ├─style-large.css
| └─style-navigation.css...
├─index.php
├─home.php
├─header.php
├─footer.php
├─sidebar.php
├─archive.php
├─singular.php
├─search.php
├─style.css
└─functions.php
参考
フォルダおよびファイル解説
images/
WEBサイトの画像素材はすべてここに格納。
WPからアップロードするのは、wp-content/uploads
に自動的に格納されるので、投稿や固定ページの記事中に入れている画像はここには入れません。あくまでもWEBサイトのデザインに関わる画像のみ
です。
inc/
出来るだけメンテナンスしやすくするために、投稿のnewsカテゴリを表示
やおすすめ記事の表示
等、一般的なWEBサイトで使うloopを記載したファイルをパーツ化しています。
表示させるページによってデザインの調整が日必要な場合は、パーツの中で条件分岐させます。
コードを見た時に、パーツファイルだとわかるようにファイル名の頭にはparts-
を必ず付与しています。
fnc/
functions.php
に入れなきゃないけど、あまりにも長くなりすぎて、メンテナンス性が悪くなるから別ファイルにした方が良いよねってコードを、ファイル名の頭にfnc-
を付与して保存してるフォルダ。
大体、パンくずリスト(fnc-breadcrumb.php)
とカスタム投稿(fnc-custom-post.php)
周り。
パンくずリスト(fnc-breadcrumb.php)
パンくずリスト(fnc-breadcrumb.php)
は、プラグインもあるけど、過去にPHPのバージョンが古いサーバにあるサイトの改修をする時があって、プラグインの導入ができなかったと言う教訓と、作ってみたら案外簡単!と言うので、最近はずっとプラグインは使ってないです。
自分で書いていれば、表示の仕方のカスタムも簡単にできるので、プラグインの設定でごたごたしなくて済むのも良いです。
カスタム投稿(fnc-custom-post.php)
カスタム投稿(fnc-custom-post.php)
は、パンくずリスト
同様、プラグインでやった方が手軽だけど、欲しい機能によっては有料になることが多々ある。
事前にパーツとして用意しておけば、コードを全部書かなくて良いし、テーマファイルを読み込めばすぐに使えるようになるので、敷居はぐっと下がるかなと言う理由で。
管理画面(fnc-admin-control.php)
fnc-admin-control.php
は、管理画面のコントロールをする部分を別ファイルにしています。
ログイン画面の色やロゴマークだったり、ダッシュボードのWPのバージョン非表示、コメントの非表示、投稿一覧へのアイキャッチ表示等、ブログとしてではなく、コーポレートサイトとしてWPを使用する場合に活用できるファイル。
js/
jsファイルの格納用フォルダ。
css/
CSSファイルの格納用フォルダ。
私の場合は、PC表示、タブレット表示、スマホ表示でCSSを分けていますが、基本(色や画像の表示等)はstyle.css
に書いて、表示するサイズに関わる部分をそれぞれのCSSファイルに書くといった形にしています。
なので、ディスプレイサイズに依存しないスタイルはstyle.css
に書きます。
ただ、汎用性の高いパーツ、例えばカスタムナビをドロワーメニューにすると言ったコードは、別ファイルにして、流用しやすくしています。
CSSだけでドロワーメニューを実装したい人は、こちらの過去に書いた「CSSだけでドロワーメニューを実装する」をどうぞ
index.php
これがないと始まらない。テーマファイルのベース。
テーマを読み込む時一番最初に読み込むので、自作テーマを作る上で必須ファイルになります。
私の場合は、404 エラー
の際もindex
内で分岐させているので、elseif('404'):
も書いてます。
404.php
は別に用意することもできます。
home.php
TOPページ専用テーマファイル。
index.php
よりも優先されてTOPページとして利用されます。
front-page.php
と言うのもありますが、index.php
の方が優先度が高いのでindex.php
使うかなぁ。
front-page.php
使用用途がイマイチ分かってないです。
header.php
自作テーマを作る上で必須ファイルになります。
直接コードを書くと、行数が増えてしまいメンテナンス性が損なわれるのと、お客様側でもある程度編集ができるようにするために、出来るだけWP関数で情報を読み込んでいます。
WebフォントやCSS等ファイルlinkはfunctions.php
で読み込むようにしています。
サイトのデザインによって、ナビゲーションのコードやメインビジュアル等読み込みますが、<head>
の中にはwp_head();
を忘れずに。(私も良く忘れてしまうので)
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php
//StylesheetやWebfontはfunctions
wp_head(); ?>
</head>
ちなみにGoogleFontsを利用するために必要な
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
は、functions.php
で読み込ませることができなかったので、header.php
に書いています。
複数のGoogleFontsを利用する場合でも、これだけ記載していれば大丈夫です。
footer.php
自作テーマを作る上で必須ファイルになります。
WEBサイトの一番下の部分「フッター」用のファイルです。
jQueryでbody
タグ内で読み込まなければならないコードは、基本的にここに記載します。
<span id="copy">© 2022 <?php bloginfo('name'); ?></span>
最近、CopyRight
にAllRightReserved.
がいらなくなったことを知ったので、copy
部分はシンプルです。
2022
も入れる必要がなかったのですが、このサイトが作られた記録として入れています。
(リニューアルの場合は、新規で立ち上げた「年」を入れています)
さらに私はよくカスタム投稿が乱立しているサイトの条件分岐の確認(どのテーマファイル使われてるか)のために、以下のコードをおまじないで入れてます。
<p>
<?php
//なんのテンプレート使ってる?
global $template;
$template_name = basename($template, '.php');
?>
ここで使用しているテンプレートは「<?php echo $template_name; ?>」です
</p>
このままだとここで使用しているテンプレートは~
の部分が普通にフッター部分に表示されてしまうので、コメントアウトするのを忘れずに。
sidebar.php
自作テーマを作る上で必須ファイルになります。
ワンカラムサイトでは不要なのですが、このファイルがないとWPで「sidebar.phpがありません」的なエラーメッセージを出すので、空のファイルを置いておきます。
ナビゲーション、サイドバーウィジェット等のコードを記載します。
archive.php
category.php
taxonomy.php
tag.php
date.php
を兼用できるファイル。
それぞれのファイルを作成すると、そちらが優先されて読み込まれます。
カスタム投稿のアーカイブの場合はarchive-***.php
(***はカスタム投稿名)
カテゴリ―や年、月等の様々な条件で一覧表示するためのファイルです。
特にカテゴリ名等指定しなくても、一覧表示の際にはこのファイルを読み込みます。
例/category/news/
を一覧表示等
singular.php
single.php
(個別ページ) page.php
(固定ページ)を兼用できるファイル。
各投稿ページで作成した記事をそのまま表示するだけなら、このファイルひとつでOK。
カスタム投稿の個別ページも兼用できます。
style.css
自作テーマを作る上で必須ファイルになります。
私の場合は、前述した通り、色や画像表示等、表示サイズに依存しないスタイルをこのファイルに書いて、表示サイズに関連するスタイルは/css/
内のファイルに書いています。
functions.php
WPの管理画面から投稿画面、WEBサイトの表示に至るまで、色んなコントロールをしてくれるファイル。
自作テーマを作る上では必須ではありませんが、カスタマイズしていくと必ずと言っていいほどfunctions.php
と言われるので、実質必須ファイルじゃないかと思ってます。
私は、CSSファイルの読み込み、WebフォントのCDN読み込みの他、カスタムナビゲーション、アイキャッチ、ウィジェットのONadd_theme_support
をこのファイルに書いています。
他の長文になりがちな、前述したパンくずリスト、管理画面のカスタマイズはfnc
フォルダに格納して、functions.php
内でget_template_part
で読み込んでいます。
各ファイル内コード
各ファイル内に書いているコードについては、記事が煩雑になってしまうのを避けるため、別記事にしています。
以下のリンクから参照ください。
記事を投稿したら都度更新します。(2023Jan10tue)
▼パンくずリストはこちらで記事にしています。
まとめ
WPのテーマと言うとどうしてもファイル数が多くなりがちなので、兼用できるファイルは出来るだけ兼用して、loop
は出来るだけ再利用する様に汎用性の高いものはパーツ化するを徹底すると、工数が減って幸せになれるよと言う記事でした。
ただ、関数等はWPのバージョンや対応PHPのバージョンが変わったりすると使えなくなったりするので、再利用する時は、コードの見直しも定期的に行うようにすると良いです。