LoginSignup
5
5

More than 1 year has passed since last update.

【初心者向け】Wordpressテーマを自作する際に分かってると良いかもしれないこと

Last updated at Posted at 2022-12-22

お客様からの要望で「自分で更新を行いたい」と言われる事が多く、最近はどこの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">&copy; 2022 <?php bloginfo('name'); ?></span>

最近、CopyRightAllRightReserved.がいらなくなったことを知ったので、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のバージョンが変わったりすると使えなくなったりするので、再利用する時は、コードの見直しも定期的に行うようにすると良いです。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5