なぜ今あえてWordPressとBluditを比較するのか

CMSといえば、まず名前が挙がるのはWordPressでしょう。
世界シェアは圧倒的で、プラグインエコシステムも巨大、テーマも豊富。エンタープライズ案件から個人ブログまで幅広く対応できる万能型CMSです。

しかしその一方で、開発者やインフラ担当者の間では次のような声も増えています。

・とにかく重い
・DB依存が強い
・アップデート管理が面倒
・セキュリティパッチ対応が追い付かない
・ちょっとしたサイトにオーバースペック

そこで近年再評価されているのが Flat-File CMS という思想です。

その代表例が Bludit です。

Bludit - Flat-File CMS

Bludit is a web application to build your own website or blog in seconds. It's free, open source, and supports Markdown.

www.bludit.com

Bluditはデータベースを使わず、ファイルベースで動作する極めて軽量なCMSです。
構造がシンプルで、設置も簡単。PHPが動けばすぐにサイトを構築できます。

本記事では、技術者視点でWordPressとBluditを構造レベルで比較し、なぜBluditが「早く・簡単に・シンプルに」構築できるのかを徹底解説します。

WordPressの構造的特性

WordPressは以下の構造で動作します。

• PHPアプリケーション
• MySQL / MariaDB データベース
• テーマレイヤー
• プラグインフックシステム
• オブジェクトキャッシュ
• REST API

ページを1回表示するだけでも、内部では複数のクエリが発行されます。

典型的な処理フロー：

1. index.php → wp-load.php
2. DB接続確立
3. オプションテーブル読み込み
4. 投稿データ取得
5. メタ情報取得
6. プラグインフック実行
7. テーマレンダリング

シンプルなブログページでも、数十〜数百クエリが走ることもあります。

その結果、

• DB I/O
• メモリ使用量
• CPU使用率

が増加します。

もちろんキャッシュ（WP Super CacheやRedis）を導入すれば改善できますが、それは「対策が必要な設計」であることを意味します。

Bluditの設計思想

BluditはFlat-File CMSです。

Flat-File CMSとは？

データベースを使用せず、コンテンツをファイルとして保存するCMSです。

Bluditでは、

• 各記事はフォルダ単位で管理
• JSON形式でメタ情報保存
• Markdownベースの本文

という構造です。

ページ表示時の流れは極めて単純です。

1. 対象ディレクトリを読み込み
2. JSONメタ読み込み
3. Markdown変換
4. テンプレート出力

DB接続処理が存在しません。

これが最大の違いです。

技術構造の違い（深掘り）

DB依存

WordPress
→ 必須（MySQL停止＝サイト停止）

Bludit
→ 不要（PHP + ファイルのみ）

つまり、

• DBバックアップ不要
• DB移行不要
• 接続エラーリスクゼロ

という大きな利点があります。

I/Oパターン

WordPressはランダムアクセス型。
Bluditはディレクトリ直読み型。

小規模サイトでは、BluditはほぼディスクI/Oのみで完結します。

SSD環境では極めて高速です。

メモリ使用量

WordPress（最小構成）
→ 約40MB〜

Bludit
→ 約5MB〜10MB

サーバ負荷が全く異なります。

同時アクセス耐性

WordPressはDBロックや接続数制限の影響を受けます。

Bluditはファイル読み込みのみなので、基本的にスケールしやすい。

CDNとの相性も良好です。

インストール比較

WordPress

1. DB作成
2. wp-config.php設定
3. パーミッション調整
4. 初期セットアップ
5. セキュリティ設定
6. キャッシュ導入

Bludit

1. ZIP解凍
2. アクセス
3. 管理者作成

終わりです。

セキュリティ設計の違い

WordPressは世界最大のCMSゆえに、攻撃対象になりやすい。

• XML-RPC攻撃
• プラグイン脆弱性
• SQLインジェクション
• 管理画面ブルートフォース

Bluditは攻撃対象としての規模が小さいうえ、DBを持たないためSQLインジェクションの心配がありません。

攻撃面積が圧倒的に小さい。

運用コスト比較

開発者視点でのカスタマイズ

WordPressはフック・アクション・フィルターが豊富。

一方でブラックボックス化しやすい。

Bluditはコードベースが小さく、全体把握が容易。

ソースを読むだけで挙動が理解できます。

これは技術者にとって非常に大きなメリットです。

パフォーマンス観点

キャッシュ無し前提での比較。

WordPress
→ TTFB 200ms〜600ms

Bludit
→ TTFB 50ms〜120ms

（環境依存）

初速が違います。

なぜBluditは「早い」のか

答えは単純です。

• DB接続がない
• クエリがない
• プラグイン依存が少ない
• コードベースが小さい

つまり無駄がない。

どちらを選ぶべきか

WordPressが向いているケース

• 大規模サイト
• EC機能
• 多人数編集
• 会員機能

Bluditが向いているケース

• 企業コーポレートサイト
• LP
• 技術ブログ
• 軽量メディア
• VPS最小構成

結論

WordPressは万能型プラットフォーム。
Bluditは軽量高速特化型CMS。

技術者が「最小構成で高速サイトを構築したい」と考えた場合、Bluditは極めて合理的な選択肢になります。

構造のシンプルさは正義です。

小さなサイトに巨大なエンジンは不要。

Bluditは「必要なものだけ」で構築する思想を体現しています。

そして怖いのは、これらの互換性問題の多くが“普段は気付かないまま進行している”という点です。ある日サーバ会社が PHP を 7.4 → 8.2 にバージョンアップした瞬間、管理画面が真っ白になり、企業サイトが全停止する。そのような事故が 2024〜2025 年にかけて急増しています。

本記事では、WordPress を安全に運用するために必須となる「PHP8 時代の互換性チェック項目」を、可能な限り丁寧に、そして実務者の視点で深く掘り下げて解説します。単に「アップデートしましょう」という表面的な話ではなく、実際の現場で何が起きているのか、そしてどう見抜き、どう改善すればよいのかを詳細に解説します。

この記事は、WordPress の開発者だけでなく、企業サイトの運用者、制作会社、フリーランスのエンジニア、または「自社サイトが突然壊れた」経験を持つ方にもきっと役に立つでしょう。

PHP8 で最初に起きる WordPress 障害とは？

PHP7 系から 8 系への移行で最も多いトラブルは、「非推奨関数の削除」や「型の厳格化」などによる Fatal error です。以下が代表的な症状です。

• サイトが真っ白になり何も表示されない
• 管理画面に入れず wp-admin が 500 error を吐く
• ContactForm7, Elementor, WooCommerce が突然動かない
• テーマの functions.php が致命的エラーを起こす
• json_decode や mbstring 系の関数で Warning → Fatal へ昇格
• 旧式の MySQL API（mysql_*）が完全に削除され落ちる

これらは「古いテーマ」「古いプラグイン」「独自に書かれた修正コード」が原因で起きることがほとんどです。

特に企業サイトでは、5 年前・10 年前に制作したテーマがいまだに稼働しているケースが多く、そこに埋め込まれた古い書き方が PHP8 で完全に非互換になっていることがよくあります。

PHP8 時代に突入した今、WordPress サイトを運用するなら、まずは「何が危険なのか」を具体的に知る必要があります。

PHP8 時代の WordPress 互換性チェック（総合フルリスト）

ここでは、PHP8 で WordPress サイトを安全に動かすために必要なチェックをすべて網羅します。これらの項目を順に確認することで、ほぼすべての互換性問題を把握できます。

チェック 1：WordPress バージョンは最新か？

WordPress 本体は PHP8.3 に対応しています。しかし、古い WordPress（5.9 以下）では PHP8 に対応しきれていないため、エラーが多発します。

• WordPress コアは 最低でも 6.x 系 にしておく
• テーマ／プラグインは古い WP で作られていると互換性が低い

WordPress 本体のアップデートを怠っている場合は、互換性リスクが非常に高くなります。特に 5.x 時代のテーマをそのまま使っているサイトは危険です。

チェック 2：テーマが PHP8 に対応しているか？

企業サイトで最も問題を起こすのが「独自テーマの古さ」です。以下を含むテーマは要注意です。

• 2018 年以前に作られたテーマ
• header.php や footer.php の構造が古い
• create_function を使っている
• get_theme_mod の使い方が古い
• isset より先に配列参照して notice を出す
• undefined offset が頻繁に出る

テーマ開発者の中には、WordPress 5.0 以前の書き方に固執したまま、PHP 7 時代の知識で制作したケースも多く、それが PHP8 で致命的エラーを引き起こします。

チェック 3：functions.php に独自の危険コードが混ざっていないか？

もっとも多いのが「過去に追加されたカスタムコード」が原因の例です。制作会社が去った後、別の担当者がネット記事を見て functions.php にコードを貼り付け、それが PHP8 で動かない…というケースが大量にあります。

要注意コードは次の通りです。

• remove_filter や add_filter の古い文法
• PHP7 の古い無名関数の書き方
• strtotime の誤った使い方
• date 関連の指定ミス
• PHP8 から strict になった関数の引数不整合

functions.php に知らないコードが入っている場合は、100% 精査すべきです。

チェック 4：プラグインの更新停止期間は？

プラグインはテーマ以上に互換性問題を引き起こします。

次の条件に当てはまるプラグインは危険です。

• 1年以上アップデートされていない
• 開発者がサポートを中止している
• 評価が低く、互換性の Issue が報告されている
• PHP8 の互換性が公式に保証されていない

特に Page Builder 系（Elementor, Divi, WPBakery）は JS・PHP 両方の負荷と互換性問題を抱えがちで、インストール数が多いにも関わらず不具合報告も多い領域です。

WooCommerce も PHP8 でエラーが出やすく、発送設定や支払い関連プラグインとの組み合わせで Fatal になる例も頻繁にあります。

チェック 5：Deprecated（非推奨）警告が出ていないか？

PHP8 では「Deprecated → Warning → Fatal」への昇格が顕著です。

特に以下の関数は要注意です。

• ereg, eregi 系（完全削除）
• split, spliti（完全削除）
• mysql_*（完全削除）
• create_function（非推奨から削除へ）
• implode 引数順逆
• mbstring 系で引数が厳格に
• filter_var の動作が厳格化

多くの WordPress 旧テーマはこれらを内部で使用しているため、PHP8 にアップデートした瞬間、エラーが噴出します。

チェック 6：WP_DEBUG を有効にしたことはあるか？

多くのサイトでは、「エラーが表示されていないだけ」で内部的には大量の警告が発生しています。

以下を wp-config.php に設定すると、PHP8 non-compat コードが判明します。

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

ログに Notice/Warning が出続けている場合は“未来の Fatal error 予備軍”です。

チェック 7：サイトの PHP バージョンは固定か？

レンタルサーバでは PHP のバージョンを手動で固定していない場合、メンテナンス時に自動的に PHP が上がることがあります。これが企業サイトにおける「突然のサイト停止」の主因です。

• PHP7.4 → PHP8.1（自動アップグレード）
• 古いテーマが耐えられず管理画面が真っ白
• その結果、会社の受付フォームが停止し問い合わせゼロに…

このような事故が現実に多発しています。

PHP8 への移行で“確実に壊れやすいコード”とは？

PHP8 は厳密な型チェックが強化されました。そのため、7 系まで“動いてしまっていた危険コード”が一斉に露出します。以下は特に壊れやすいコードです。

未定義の配列アクセス

$val = $arr['key'];

PHP8 はこれを厳しく扱います。。

bool が勝手に int に変換されるコード

strtotime(false);

これは PHP8 で Fatal になります。

null を渡してしまうコード

count(null);   // PHP8 では Warning → Fatal の可能性

非推奨関数の使用

create_function()
ereg()
split()

すべて削除済みです。

暗黙の型変換

PHP7までは許容されていた曖昧な型変換が PHP8 では Fatal に繋がります。

WordPress の古いフック書き方

add_filter('the_content', 'myfunc', 999, 1);
function myfunc() {  // 引数ミスマッチ
}

PHP8 では strict になり ArgumentCountError が発生しやすくなります。

“壊れる前に”やるべき実務的対策

ここからは WordPress サイトを健全に保つための具体的な対策を説明します。

1. 本番環境のコピーで PHP8 テストを行う
   いきなり本番で PHP バージョンを上げるのは危険です。
   かならずステージング（検証環境）でテストします。
2. テーマのコードレビューを実施
   functions.php
   single.php
   archive.php
   404.php
   header/footer/sidebar
   テンプレート階層
   独自の shortcodes
   独自のクラス
   これらのファイルは数千行に及ぶ場合が多く、プロのエンジニアでも時間がかかります。特に undefined offset、deprecated warnings、引数不一致は丁寧に見直す必要があります。
3. 不要なプラグインを削除
   動いているから OK ではありません。
   不要プラグインは将来の大事故要因です。
4. Page Builder を使うサイトは要注意
   Elementor
   Divi
   WPBakery
   これらは内部で大量の JS/PHP を利用しているため、互換性・速度・INP 指標の面で問題を起こしやすい領域です。
5. クラシックテーマからブロックテーマへ移行を検討
   ブロックテーマは軽量で、PHP8 に最適化されています。企業サイトでは段階移行が現実的です。
6. ログ監視を必ず行う
   wp-content/debug.log
   server error log
   PHP error log
   これらに Warning や Notice がある場合、その多くが将来 Fatal に変わる可能性があります。
   

これからの WordPress 運用に必須のマインドセット

2025 年の WordPress は「放置したら壊れる CMS」です。
しかし、「正しく向き合えば非常に安定し、高速で、安全な CMS」でもあります。

大切なのは、

• 古いテーマやプラグインを延命しない
• PHP バージョンアップに備えた準備を怠らない
• ブロックテーマやヘッドレス構成など新しい概念を理解する
• パフォーマンス（INP 含む）を継続監視する
• セキュリティ対策を自動化する

これらを徹底することです。

まとめ

PHP8 時代の WordPress は、多くのサイトで“互換性崩壊”のリスクを抱えています。しかし正しい手順でチェックを行えば、その多くは事前に痛みなく解決できます。

WordPress は進化している一方で“古い資産と未来技術の間のギャップ”が大きくなり続けています。このギャップを理解し、計画的にテーマとプラグインの見直しを進めることが、2025 年以降の WordPress 運用において最も重要な要素です。

もしあなたのサイトが現在 PHP8 移行に不安を感じているなら、今回のチェックリストを順に確認し、ひとつずつ解決していくことで、将来の大きなトラブルを未然に防ぐことができます。

そこで今回は、オリジナルテーマを初めて作成する方向けに、シンプルなテーマをベースに制作の流れをまとめました。サンプルも用意しているので、ぜひダウンロードして活用してください。

WordPress はバージョンアップを重ね、現在では 6.7 になっています。それに伴い、デフォルトのテーマも新たに TwentyTwelve へと変更されました（2013年1月）。オリジナルテーマを初めて作成しようと考えたとき、まず参考にしたくなるのがデフォルトテーマ。しかし、最近のデフォルトテーマは構造が複雑で、少しとっつきにくいと感じることもあるかもしれません。

私が WordPress を始めた頃のデフォルトテーマは、その名の通り「Default」というシンプルなものでした（現在は更新が停止）。当時は WordPress について深く理解していなくても、このテーマを参考にしながらオリジナルテーマを作成できたと感じています。

そこで今回は、WordPress で初めてオリジナルテーマを作る方向けに、シンプルなテーマを用いて作成の流れをまとめました。テーマ自体は、WordPress の基本となるブログ向けのものを採用しています。

HTML + CSS で、サイトのレイアウトを設計しよう

まずは WordPress のことは置いておいて、HTML + CSS だけで Webサイトのデザインを作っていきます。慣れてくると HTML + CSS + WordPress の作業をいっぺんにやることも多いですけど、初めてのときは WordPress のページの構造を理解するためにも、まずはおおまかでいいので、HTML + CSS でデザインを完成させておくといいと思います。

純粋な HTML + CSS の Webサイトを基準にしておけば、WordPress ではどこを変更する必要があるのか … ということが分かりやすくなると思うので、初めてのときはこの方法がいいんじゃないかな？と思います。

今回は下記の 3ページを、まずは HTML + CSS で作ってみました。

一応ダウンロードできるようにしてありますので、興味のある方はぜひ参考にしてみてください。 また、HTML + CSS を使ってサイトを作成する際は、レイアウトやページの機能を考慮し、以下の要素を最初からデザインに組み込んでおくと、WordPress のテーマ化がスムーズに進みます。

言葉だけでは分かりにくいかもしれませんので、以下の画像を参考にしてください。これはサンプルのトップページのデザインです。

トップページのデザイン

レイアウトは、シンプルな 2 カラム構成です。ヘッダーの下にはナビゲーションを配置し、例として「HOME」と「ABOUT」を設けました。 また、ヘッダーやサイドバーには検索フォームも追加しておきます。

メインカラムには、記事のサンプルを 2 つほど用意しておきましょう。ブログ形式なので、「古い記事」「新しい記事」へ移動できる ページネーション も忘れずに設置します。

サイドバーには、カテゴリーや最新記事のリストを仮置きしておくと、後々の調整がスムーズになります。

続いてひとつひとつのブログ記事ページです。

記事ページのデザイン

個別記事ページでは、記事の下にタグや投稿者情報を表示するようにしました。さらに、「次の記事」「前の記事」へ移動できるリンクも設置しています。

その下には、コメント一覧を表示し、訪問者がコメントを投稿できるフォームも用意しました。

なお、ヘッダー、サイドバー、フッターはトップページと共通のデザインを使用しています。

最後に固定ページのデザインです。

固定ページのデザイン

固定ページはブログの記事と違って、カテゴリーやタグの表示がありません。今回はページの性格上、日付の表示もなしにしています。また、ページャーやコメント一覧、コメント欄もなしにして、すっきりとしたレイアウトになってます。

作成したデザインを WordPress のテーマファイルに変換

それでは、作成した index.html を使って、WordPress のテーマ作成に取りかかりましょう！

まずは準備として、テーマフォルダを作成します。フォルダ名はテーマの名前を付けるのが分かりやすいでしょう。ここでは simplesimple という名前にします。

次に、この simplesimple フォルダに index.html とスタイルシート（CSS で画像を使用している場合は images フォルダも）を配置します。作業中にオリジナルのファイルを保持できるよう、コピーを作成しておくと安心です。

次に index.html のファイルの拡張子を .php に変更して、index.php にします。続いてスタイルシートの方は、style.css というファイル名にします。そして style.css の冒頭に、以下のようなコメントを入れます。

style.css

/*
Theme Name: テーマの名前
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

テーマ名は必須項目 なので、必ず記述しましょう。ここでは Simple Simple と設定します。

その他の項目は任意ですが、テーマを配布する場合は ライセンス情報 なども記載しておくと良いでしょう。

WordPress の Themes フォルダに移してみよう！

ここまで完了したら、作成した simplesimple フォルダを WordPress の wp-content/themes フォルダ に移動させます。

その後、WordPress の管理画面 で 「外観」→「テーマ」 を開いてみましょう…。

こんな風にスクリーンショット画像は載ってないけど、WordPress のテーマとして認識されています！WordPress では、最低 index.php 一枚と、テーマ名などを記述（さっき書きましたね！）した style.css という名前のスタイルシートがあれば、テーマとして認識してくれるんです！でもちょっと画像がないのがさみしいので、キャプチャを撮影しておきましょう。

キャプチャを撮影したら、screenshot.png という名前で自分で作ったテーマフォルダ（今回は simplesimple フォルダ）に保存します。images フォルダではないので注意してください。また、画像のサイズは 640 x 480px 以下が推奨されてます。

画像が表示されました

すると上記のように、スクリーンショットが表示されました！

 テーマを有効化して、サイトを確認してみよう！

テーマとして認識されたので、ここで試しにテーマを有効化して、サイトの表示を確認してみることにします。すると …。

この状態では、スタイルシートが適用されておらず、画像も表示されていません…。

実は、WordPress では基本的に相対パスが使用できません（※ただし、CSS 内のパス指定は例外です）。そのため、CSS や画像のパスを正しく指定するには、WordPress 特有の記述方法 を使う必要があります。

次に、その適切なパスの指定方法について解説していきます。

WordPress のテンプレートタグ

難しい説明は後にして、とりあえず index.php の style.css へのパスと、ファビコンへのパスを変更してみましょう。テキストエディタで index.php を開きます。

index.php – <head>内の一部

<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="style.css" media="screen">

上記のように相対パスで書かれてる部分を …

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">

こんな風に PHP のコードで書き直します。これは WordPress のテンプレートタグというもの。ここではふたつテンプレートタグを使っていますが、各テンプレートタグは下記のような役目をしています。

テンプレートタグ を使用して記述すると、実際には以下のように絶対パスで出力される ようになります！

<link rel="shortcut icon" href="http://example.com/wp-content/themes/simplesimple/images/favicon.ico">
<link rel="stylesheet" href="http://example.com/wp-content/themes/simplesimple/style.css" media="screen">

これで、スタイルシートとファビコンのパスが正しく通りました！
その結果、Webサイトがスタイルシートを適用した状態で表示されるようになりました。

CSSが反映された状態

記事内の画像については、あとで投稿画面から投稿するので、気にしなくて OK です。

WordPress のテーマ作成とは、静的な HTML コードを WordPress のテンプレートタグを使って書き換えていく作業 と言えます。

先ほどは テーマディレクトリやスタイルシートの URL を取得するテンプレートタグ を紹介しましたが、WordPress には 他にも多くのテンプレートタグ が用意されています。

すべてを暗記する必要はありませんが、何度もテーマを作成していくうちに自然と覚えていく でしょう！

WordPress の構造に合わせてテンプレートを分割しよう

次に、WordPress サイトの特徴のひとつでもある「index.php の分割」 を行います。「index.php を分割する」とは、ヘッダーやサイドバー、フッターなどを個別のファイルに分けて管理する方法 です。こうすることで、各パーツを再利用しやすくなり、効率的にサイトを構築できます。

この仕組みを 図を使って説明 していきます。

WordPress サイトの構造

このように、デザインの各パーツごとに別々のファイルに分割 されています。HTML ではあまり馴染みがないかもしれませんが、PHP では一般的な手法です。

この方法に従い、index.php を 4 つのパーツに分割 していきます。

ヘッダー部分を分割

まずは、ヘッダー部分を「header.php」として分割 します。

index.php の 1行目からヘッダーの終わりまで を切り取り、header.php という名前でテーマフォルダ内に保存 しましょう。

切り取った header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP PAGE</title>
... 省略 ...
</head>
<body>
<div id="container">
<!-- header -->
<div id="header" class="clearfix">
... 省略 ...
</div>
<!-- /header -->

header.php を切り取ってしまったので、index.php の方はヘッダー部分が丸ごとなくなってしまいました。そこで header.php（つまりヘッダー部分）を読み込むようにしてあげます。header.php を読み込むには、index.php に下記のように記述します。

index.php のヘッダー部分

<?php get_header(); ?>
<!-- main -->
<div id="main">
… 以下省略 …

get_header は、header.php を読み込むテンプレートタグ（読み込みタグなので、インクルードタグって呼んだりもします）。こんな風にして header.php を読み込んで、ヘッダー部分を表示します。

サイドバー部分を分割

先ほど header.php を分離したのと同様に、今度はサイドバーの部分を sidebar.php として切り出します。header.php のときと同じように、テーマフォルダ内に保存しましょう！

切り取った sidebar.php

<!-- sidebar -->
<div id="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div>
...省略...
</div>
<!-- /sidebar -->

そしてサイドバーがすっぽり欠けた index.php には、get_sidebar というテンプレートタグ（インクルードタグ）を記述します。

index.php のサイドバー部分

...省略...
<?php get_sidebar(); ?>
</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
...省略...
</div>
<!-- /footer -->
</body>
</html>

 フッター部分を分割しよう

最後にフッター部分を分割します。同じように index.php のフッター部分を切り取り、footer.php という名前でテーマフォルダ内に保存します。

切り取った footer.php

</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
<p id="copyright" class="wrapper">© Simple x Simple All Rights Reserved.</p>
</div>
<!-- /footer -->
</body>
</html>

すっぽりフッター部分が欠けた index.php には、get_footer というテンプレートタグ（インクルードタグ）を書き加えます。マークアップ的には、フッターはサイドバーの次に記述されていることが多いと思うので、下記のように get_sidebar と get_footer が並ぶことが多いと思います。

index.php のフッター部分

…省略...
</div>
<!-- /main -->
<?php get_sidebar(); ?>

これでページの分割ができました。なんでわざわざ分割するんだろう？と思う人もいるかもしれませんが、これはもうちょっと後で説明しますね！

WordPress のテンプレートファイルいろいろ

ここまでくると、テーマファイルの中には以下のファイルが並んでるはずです。

キャプチャ画像の screenshot.png、CSS用の画像を格納する images フォルダ、スタイルシート style.css、そして 4 つの PHP ファイルが含まれているはずです。これらの PHP ファイルは、WordPress において「テンプレートファイル」と呼ばれます。この用語は頻繁に登場するため、ぜひ覚えておきましょう！

先ほど、index.php を分割し、header.php、sidebar.php、footer.php という部品ファイルを作成しました。テンプレートファイルの中でも、こうした「部品」として機能するファイルは「モジュールファイル」と呼ばれることもありますので、あわせて覚えておくと便利です。

この時点では、ファイルを分割しただけなので、ページの見た目は HTML で作成した場合と変わりません。ここから、各テンプレートファイルに WordPress の機能を組み込んでいきましょう。

header.php をカスタマイズしてヘッダーを整える

前半では <head> 内のファビコンと CSS ファイルへのリンクを、テンプレートタグを用いて編集しました。しかし、これで header.php が完成したわけではありません。ロゴや検索フォームなどの部分も、WordPress のテーマとして適切な形に作り替えていく必要があります。

作業を進める際は、デザインと照らし合わせながら確認すると分かりやすいでしょう。そこで、ヘッダーのデザインを改めてチェックしてみましょう。

ヘッダーのデザイン

サイト名と紹介文の部分

ヘッダー部分はとてもシンプルです。サイト名とちょっとした紹介文があり、検索フォームとナビゲーションがあります。サイト名部分には、トップページへのリンクを貼ることにします。まずは直書きした HTML を確認してみます。

HTML – サイト名と紹介文の部分

<h1 id="logo">
<a href="#"><span>Simple x Simple</span></a>
</h1>
<p id="description">Just another WordPress site</p>

<h1> タグと <p> タグでマークアップされています。これを元に、サイト名やトップページへのリンク、紹介部分の部分をテンプレートタグを使って、書き直してしまいましょう。使うテンプレートタグは下記のものです。

header.php（一部）

<h1 id="logo">
<a href="<?php echo home_url('/'); ?>"><span><?php bloginfo('name'); ?></span></a>
</h1>
<p id="description"><?php bloginfo('description'); ?></p>

サイト名や紹介文には bloginfo というテンプレートタグを使います。ここで表示するサイト名や紹介文は、管理ページの 設定 → 一般 からいつでも変更することができます。

設定 → 一般

検索フォーム

続いて検索フォーム部分です。同じように直書きした HTML から見ていきましょう。

HTML – 検索フォーム

<form method="get" id="searchform" action="#">
<input type="text" placeholder="検索" name="s" id="s">
<input type="submit" id="searchsubmit" value="">
</form>

<form> 内には、テキストフィールドと送信ボタンが含まれています。テキストフィールドの type は 'text' になっていますが、'search' に変更しても問題ありません。

書き換える必要があるのは、action 属性の送信先 URL です。これはトップページの URL で問題ないため、先ほどと同様に home_url() を使用すればOKです。

また、検索フォームを作成する際に注意すべきポイントとして、name 属性の設定があります。検索キーワードは s というパラメータで渡されるため、必ず name="s" と指定しましょう。

header.php（検索フォームの部分）

<form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
<input type="text" placeholder="検索" name="s" id="s">
<input type="submit" id="searchsubmit" value="">
</form>

ここまでできたら、検索フォーム自体を部品化してしまいましょう！<form> ~ </form> の部分を index.php から切り取って、searchform.php という名前でテーマフォルダ内に保存します。そして header.php の方では、get_search_form() と記述して読み込むようにします。

header.php（検索フォームの部分）

<?php get_search_form(); ?>

 ナビゲーション部分

続いてナビゲーションの部分です。まずは基本となる HTML でのマークアップから見ていきます。

header.php – ナビゲーションの部分

<!-- Navigation -->
<div>
<ul class="menu">
<li class="current_page_item"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a>
<ul class="sub-menu">
<li><a href="#">CHILD#1</a></li>
<li><a href="#">CHILD#2</a></li>
<li><a href="#">CHILD#3</a></li>
</ul>
</li>
</ul>
</div>
<!-- /Navigation -->

<div> で全体を囲み、その中に <ul> と <li> を使ってマークアップされています。さらに、サブメニューがあるため、リストは入れ子構造になっていますね。

この <div> ～ </div> の部分をどのように記述するかというと…、ひとまず以下のコードに丸ごと置き換えてしまいましょう。

header.php – ナビゲーションの部分

<!-- Navigation -->
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
<!-- /Navigation -->

wp_nav_menu というテンプレートタグについては、後ほど詳しく説明しますが、この一行を記述するだけで、先ほどのように <div> で囲まれた <ul>・<li> のマークアップが生成され、ナビゲーションが表示されます。

まずは固定ページを1つか2つ作成し、サイトの表示を確認してみましょう。

固定ページを作成

ナビゲーション

こんな風に、作った固定ページがナビゲーションとして表示されます。出力される HTML は下記のような感じです。

出力される HTML

<div class="menu">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

menu というクラスのついた div で囲まれて、ul、li要素で固定ページへのリンクが表示されます。ここでチェックしたいのは、div タグに menu というクラスがつく … ということです（なんで注意したいのかは、後述します！）。

<head>内を作ろう！

さっきは <body> 以下のヘッダー部分を作りました。ちょっと前後しちゃいましたが、今度は <head> 内を作っていくことにします。現状ではファビコンとスタイルシートへのパスを、テンプレートタグで書き直しただけでした。

header.php – <head> 内のコード

<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
</head>

書き換えたいのは <title> タグの部分。タイトルはトップページ以下、色んなページで変わる部分ですよねー。まず、<title> タグにはサイト名を必ず入れる … という前提で、下記のように書きます。

header.php（<title> 部）

<title><?php bloginfo('name'); ?></title>

bloginfo('name') は、<h1> タグでサイト名を表示する際にも使用しましたね。これを <title> タグ内に記述すれば、サイト名を表示させることができます。

しかし、このままではすべてのページのタイトルが同じになってしまいます。そこで、wp_title というテンプレートタグを組み合わせて、ページごとに適切なタイトルを表示させましょう。

<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>

wp_title は、各ページのタイトルを表示してくれる便利なテンプレートタグです。()の中に '|' となっていて、'right' という記述があります。これはタイトルを下記のように表示するためです。

ページのタイトル | サイト名

ページタイトルの右側（right）に「|」という区切り文字を入れるっていう意味になってます。これで title タグの部分は完成です！

<head> 内に書いておきたい大事なもの

ここで、<head> 内に追加しておきたい重要な要素が2つあります。まず1つ目は、WordPress のコメント欄で必要となる JavaScript ファイルの読み込みに関する記述です。

どのような JavaScript ファイルなのかは後ほど説明しますが、<head> 内に以下のコードを追加しましょう。

header.php（一部）

...省略...
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
</head>

さらにもうひとつ、絶対に書いておかなくちゃいけないものがあります。

<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
<?php wp_head(); ?>
</head>

</head> の直前に wp_head() を追加しましょう。この関数は、WordPress が <head> 内に必要なコードを自動で出力するために欠かせないものです。

例えば、プラグインを使用した際に、そのスタイルシートのリンクを適切に挿入するなど、状況に応じた処理を行います。そのため、必ず記述するようにしましょう。

これで header.php の作業は完了です！

メインのコンテンツを管理する index.php を調整

index.php は、WordPress サイトに欠かせないメインのテンプレートファイルです。ファイルを分割する際に get_header() などを追加しましたが、メインコンテンツの部分はまだ HTML をそのまま記述した状態になっています。

index.php

<?php get_header(); ?>
<!-- main -->
<div id="main">
<!-- post -->
<div class="post">
<h2><a href="#">記事のタイトル</a></h2>
<p class="post-meta">
<span class="post-date">2012年12月23日</span>
<span class="category">Category - <a href="#">ケーキ</a>
<span class="comment-num"><a href="#">Comment : 0</a></span>
</p>
<p>... 記事の本文（画像を含む）...</p>
<p><a href="#" class="more-link">続きを読む »</a></p>
</div>
<!-- /post -->
...2つ目の記事（省略）...
<!-- pager -->
<div class="navigation">
<div class="alignleft"><a href="#">« PREV</a></div>
<div class="alignright"><a href="#">NEXT »</a></div>
</div>
<!-- /pager -->
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

記事の部分（上記の青い部分）… div.post の中に、いろいろなものが記述されています。ここで div の中の「表示したいもの」を、ちょっと整理してみましょう。

• 記事のタイトル
• 日付
• カテゴリー
• コメント数
• コンテンツ（画像を含む）

この部分を HTML の直書きではなく、WordPress のテンプレートタグを使って書き換えるのが次の作業です。しかし、その前に重要な「WordPress ループ」について確認しておきましょう。

「このコードをどこに書くのか？」はひとまず置いておき、まずはその概要を見ていきますね。

WordPress ループ

まず、WordPress では投稿画面で記事を作成しますよね？ そして、記事が存在すれば表示できますが、何も投稿されていなければ当然表示するものがありません。

そこで、まず ①「表示すべき記事があるか？」 をチェックし、記事があれば ② 記事を表示する処理 を実行します。逆に記事がなければ ③「表示する記事がありません」という処理 を実行する流れになります。これは PHP の基本構文である if 文を使い、記事の有無に応じて処理を分岐させているわけですね。

特に重要なのが ②の部分 です。トップページなどでは通常、複数の記事が表示されます。例えば、記事を2つ書けば2つ、3つ書けば3つ表示されるため、この部分は 繰り返し処理 になります。この仕組みを理解しておくと、WordPress の動作がより分かりやすくなります。

この一連の処理を 「WordPress ループ」 と呼びます。ループとは「繰り返し処理」を意味する言葉ですね！

それでは、index.php に戻りましょう。先ほど説明した WordPress ループ を index.php に記述し、実際に投稿した記事が表示されるようにしてみます。

index.php

<?php get_header(); ?>
<!-- main -->
<div id="main">
<?php if (have_posts()) :
while (have_posts()) : the_post();
// この部分で記事を表示する処理をします。
endwhile; // 繰り返し処理終了
else : ?>
<div class="post">
<h2>記事はありません</h2>
<p>お探しの記事は見つかりませんでした。</p>
</div>
<?php endif; ?>
<!-- pager -->
<div class="navigation">
<div class="alignleft"><a href="#">« PREV</a></div>
<div class="alignright"><a href="#">NEXT »</a></div>
</div>
<!-- /pager -->
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

メインカラムとなる div#main の中に WordPress ループ を記述しました（青い部分）。記事がない場合は、<p>お探しの記事は見つかりませんでした。</p> などと表示すれば問題ありません。

また、記事数が増えた際に必要となる「次のページ」「前のページ」へのリンクは、WordPress ループの後に記述し、後ほどテンプレートタグを使って実装します。

次に、ループの中で「表示したい情報」をテンプレートタグを使って記述していきましょう。使用するテンプレートタグは以下の通りです。

ちょっとたくさんありますが … たとえば記事のタイトルを <h2> でマークアップして、リンクで囲みたいなら下記のように記述します。

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

HTML タグと WordPress のテンプレートタグが混在していますが、整理して考えれば、それほど複雑ではありません。

では、index.php の WordPress ループ 内にテンプレートタグを追加していきましょう。もともとの HTML と比較しながら確認してみてくださいね！

もともとのHTML

テンプレートタグで書き直したもの

記事のタイトル、日付、カテゴリー、コメント数、そして本文（コンテンツ）を、テンプレートタグを使って書き直しました。これにより、矢印内の <div> ～ </div> の部分が、記事の数だけ繰り返し表示されるようになります。

また、div タグに the_ID() などのテンプレートタグを追加していますが、これについては後ほど説明しますね。

このように、WordPress のテーマ作成では 多くのテンプレートタグ を活用します。各テンプレートタグの使い方は WordPress Codex にまとめられているため、分からないものがあれば調べる習慣をつけておくと便利です。

ちょっと寄り道 – 日付を表示する the_date

日付を表示する the_date の表示形式は、管理画面の一般設定から行うことができます！

設定 → 一般 から日付の設定

ただし、the_date() には 同じ日付の記事が複数ある場合、2つ目以降の日付が表示されない という仕様があります。少し分かりにくいので、下の図を参考にしてみてください。

the_date での日付の表示

このようなレイアウトで日付とタイトルを表示する場合、the_date() を使うとスッキリして見やすくなるかもしれませんね！

しかし、一般的なブログのレイアウトでは すべての記事に日付を表示したい ことが多いでしょう。その場合は、the_date() の代わりに、次のように記述すればOKです。

<?php echo get_the_date(); ?>

the_date の代わりに、get_the_date を使います！

記事を投稿して表示を確認

ここまでできたら管理画面からいくつか記事を投稿して、トップページの表示を確認してみます。

そしてトップページを確認してみると …。

トップページの表示

こんな風に投稿した記事が表示されました！

ちょっと寄り道 – WordPress が自動で付けてくれるクラス

さっきの WordPress ループの中、記事を囲む <div> タグには、下記のようにいくつかテンプレートタグが記述されていました。

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

まず、id="post-<?php the_ID(); ?>" の部分について説明します。これは、各記事に 一意の ID を付与する ための記述です。the_ID() を使うと、WordPress が自動的に生成する記事の ID を出力できます。

また、その後にある <?php post_class(); ?> という記述も重要です。これを追加すると、WordPress が ページの種類に応じたクラス を自動で付与してくれます。たとえば、トップページではどのようなクラスが適用されるのでしょうか…。

• post … ブログ記事を意味するクラス
• type-post … 投稿のタイプを意味するクラス（post はブログ記事の意味）
• category-cake … 属するカテゴリーを表すクラス
  などなど …

ここで覚えておきたいのは post クラス です。ブログ記事を表示する場合、post というクラスが自動で追加されます。しかし、固定ページを表示するときは page クラス に変わるため、この違いに注意が必要です。

画像につくクラス

また、記事内の画像にもクラスがつくのはご存知だと思います。中でも重要なのは、レイアウトに関するクラスです。

メディアの挿入

画像を貼付けるとき、配置から「左」「右」「中央」を選ぶと、下記のようなクラスが <img> タグにつきます。

• alignleft … 左に配置
• alignright … 右に配置
• aligncenter … センターに配置

なので style.css で、各レイアウトにあわせて、float などを記述しておかないと、ちゃんとレイアウトできなくなっていまいますね！

次のページ、前のページへのページャーを付けよう！

少しクラスの話に寄り道しましたが、記事の表示部分が完了したので、次は 「次のページ」「前のページ」 のリンクを追加していきます。これは、記事が増えて 1ページでは収まりきらなくなった場合に表示される ものです。

ページャーの実装方法はいくつかありますが、一番シンプルなのは 「次のページ」「前のページ」 というリンクを表示する方法です。

「次のページ」「前のページ」

これもまず、直書きしたHTML をチェックしてみましょう。

index.php – ページャーの HTML

<!-- pager -->
<div class="navigation">
<div class="alignleft"><a href="#">« PREV</a></div>
<div class="alignright"><a href="#">NEXT »</a></div>
</div>
<!-- /pager -->

今回は大きく <div> で囲んで、中にふたつの <div> を入れ子にした状態でマークアップしてみました。それではいつものように、テンプレートタグを使って書き換えてみます。

index.php – ページャーの部分

<!-- pager -->
<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« PREV'); ?></div>
<div class="alignright"><?php previous_posts_link('NEXT »'); ?></div>
</div>
<?php endif; ?>
<!-- /pager -->

まず if文で大きく囲んでありますが、これは「もしページ数が 1ページより多かったら …」という意味の条件分岐です。ページが 1ページしかないなら、表示する必要がないので、今回はこんな条件を付けてみました。

チェックしたいテンプレートタグは以下のふたつです。

これらのテンプレートタグを使うと、<a> 要素のリンクが自動的に出力されます。また、() 内に表示したいテキストを指定することも可能です。

ここで注意したいのが、next_posts_link() は「前の（古い）ページ」へのリンク であり、previous_posts_link() は「次の（新しい）ページ」へのリンク になることです。名前のイメージと逆なので、少し混乱しやすいですね…。

ここまでで index.php はお終いです！

メインとなる index.php でのポイントは、やっぱり WordPress ループです。ループで繰り返される部分をキチンと把握すれば、それほど難しくないと思います！

サイトのフッターを footer.php でデザインしよう

やっとフッターまで来ましたね …。でも footer.php はとっても簡単です！今回はサイト名を Copyright と一緒に表示しているだけなので、以下のように記述します。

フッターのデザイン

footer.php

</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
<p id="copyright" class="wrapper">© <?php bloginfo('name'); ?> All Rights Reserved.</p>
</div>
<?php wp_footer(); ?>
</body>
code
</html>

もう何度か登場した bloginfo でサイト名を表示します！

忘れちゃいけない wp_footer

header.php では wp_head() を必ず記述する必要がありましたが、同様に footer.php には必ず wp_footer() を記述 します。この関数は wp_head() と同じように、WordPress がページの表示に必要なコードを出力する役割を持っています。

例えば、プラグインで使用する JavaScript ファイル なども、この記述がないと適切に読み込まれません。そのため、 タグの直前に 忘れずに wp_footer() を追加 しておきましょう！

記事ごとの表示レイアウトを管理する single.php を作成

フッターまで作成したので「もう完成？」と思うかもしれませんが、実は まだ終わりではありません…。

ここで一度、これまで作成したテンプレートファイルを振り返り、再確認 してみましょう。

この中で ページの核となるのは index.php だけ ですね。他のファイルはすべて 部品 となるものばかりです。実際、index.php さえあれば、ブログの 個別記事ページ や 固定ページ も表示できます。

しかし、個別記事ページ では コメント一覧やコメントフォーム が必要になりますし、固定ページ はブログ記事とは異なり、カテゴリーなどを表示しない ことが一般的です。

そこで、個別記事を表示するテンプレートファイル と 固定ページを表示するテンプレートファイル を作成しておきましょう。

single.phpを作ってヘッダーなどを読み込む

まずは、ブログの個別記事を表示するテンプレートファイル である single.php を作成します。はじめに作った single.html をコピーし、テーマフォルダに single.php という名前で保存しましょう。その後、index.php と同じように、ファイルを分割していきます。

ただし、すでに header.php、sidebar.php、footer.php は作成済みなので、single.php ではこれらの部分を削除し、インクルードタグで読み込むだけでOK です。

最初のうちは 「なぜファイルを分割するの？」 と思うかもしれませんが、このように 共通部分を「部品」として管理 しておけば、複数のテンプレートファイルを作成するときに 効率よく使い回せる からなんですね！

各パーツを読み込む インクルードタグ は、以下の通りでしたね。

各パーツを読み込むインクルードタグ（おさらい）

• ヘッダー部分の読み込み … get_header
• サイドバー部分の読み込み … get_sidebar
• フッターの読み込み … get_footer

WordPress ループを書き込む

次に、index.php と同じように WordPress ループ を記述します。すでに index.php で作成済みなので、該当部分を コピーして single.php にペースト すれば簡単に実装できます。

ペーストする場所は 記事を表示する部分 なので、div#main から コメント欄までの間 になります。index.php では ページャーの前 に記述しましたが、single.php では ページャーの位置に注意が必要 です。

この点については後ほど説明するので、まずは以下のように WordPress ループを貼り付け ましょう。

single.php – WordPress ループ

<?php get_header(); ?>
<!-- main -->
<div id="main">
<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
<p class="post-meta">
<span class="post-date"><?php echo get_the_date(); ?></span>
<span class="category">Category - <?php the_category(', ') ?></span>
<span class="comment-num"><?php comments_popup_link('Comment : 0', 'Comment : 1', 'Comments : %'); ?></span>
</p>
<?php the_content(); ?>
</div>
<?php endwhile; // 繰り返し処理終了
else : // ここから記事が見つからなかった場合の処理 ?>
<div class="post">
<h2>記事はありません</h2>
<p>お探しの記事は見つかりませんでした。</p>
</div>
<?php endif; // WordPress ループ終了 ?>
<!-- comment area -->
<div id="comment-area">
...省略...

ペーストするときに変更するのは一ヶ所だけです。index.php では下記のようになっていた部分を書き換えます。

the_content('続きを読む »');

the_content();

トップページなどでは 「続きを読む」 のリンクを表示する必要がありましたが、single.php では記事を全文表示するため、不要 です。そのため、the_content() の () 内は空にしておきましょう。

 タグと投稿者などを表示する

別記事ページでは、記事の終わりに タグと投稿者名 を表示してみましょう。もちろん、記事下ではなく タイトルの下 に配置しても問題ありませんが、今回はこのレイアウトで実装します。

さらに、その下には 「前の記事」「次の記事」 への ページャー も追加します。

記事の下の部分

まずはタグの表示と投稿者の表示に挑戦してみます。HTML の直書きのときは、下記のように記述していました。

single.html – タグと投稿者の部分

<p class="footer-post-meta">
Tag : <a href="#">タルト</a>, <a href="#">フルーツ</a>
<span class="post-author">作成者 : <a href="#">高橋 のり</a>
</p>

これをテンプレートタグを使って書き直してみます。まずタグの表示です。

single.php – タグの部分

<p class="footer-post-meta">
<?php the_tags('Tag : ',', '); ?>
</p>

記事に付けられたタグを表示するには、the_tags() というテンプレートタグを記述します。() 内に ‘Tags : ‘ と ‘, ‘ という記述がありますが、前者は実際に表示されるタグの前に付ける文字で、後者は各タグを区切るための文字です。これらの部分は自由に変更できるので、好みに合わせてカスタマイズしてください。また、the_tags() は、記事にタグが設定されていない場合は何も表示されません。

タグに続いて、投稿者を表示してみます。WordPress ループ内で投稿者の名前を表示するには、the_author というテンプレートタグを記述します。

でもこの投稿者名をクリックしたら、その投稿者が今まで書いた記事のページ（投稿者アーカイブ）を表示するようにしたいので、下記のように記述します。

single.php – 投稿者の部分

<span class="post-author">作成者 : <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>

これで 投稿者ページへのリンク付き で表示できるようになりました。

しかし、ひとりで運営しているブログであれば 投稿者の表示は不要 かもしれません。そこで、「複数の投稿者がいる場合のみ表示する」という条件をつけて制御します。

この場合、if ( is_multi_author() ): という条件分岐を使えばOKです。これで、複数の投稿者がいるときだけ表示されるようになります。

すべてまとめると、以下のようなコードになります。記述場所は WordPress ループの中 なので、その点にも注意してくださいね！

single.php

<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...ここに記事のタイトルなど...省略...
<?php the_content(); ?>
<p class="footer-post-meta">
<?php the_tags('Tag : ',', '); ?>
<?php if ( is_multi_author() ): ?>
<span class="post-author">作成者 : <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>
<?php endif; ?>
</p>
</div>
<?php endwhile; // ここまでが繰り返し処理
else : ...省略...

前の記事、次の記事へのリンクを表示する

index.php では、記事が多くなったときに 「前のページ」「次のページ」 というページャーを WordPress ループの外 に設置しました。

一方、single.php では 「前の記事」「次の記事」 というページャーを追加します。ただし、注意すべきポイントがあります。index.php のときは ループの外 に記述しましたが、single.php では ループの中に記述する必要がある という点です。

この違いを理解したうえで、適切な場所に記述しましょう。使用するテンプレートタグは以下の通りです。

index.php で使用したテンプレートタグは previous_posts_link() のように 複数形 でしたが、今回の single.php では 複数形ではない ことに注意してください。これはまったく別のテンプレートタグなので、混同しないようにしましょう。

さて、直書きした HTML では、ページャー部分は以下のようにマークアップされています。

single.php – ページャー部分の HTML

<!-- post navigation -->
<div class="navigation">
<div class="alignleft">
<a href="#">« Hello world!</a>
</div>
<div class="alignright">
<a href="#">生チョコレートケーキ »</a>
</div>
</div>
<!-- /post navigation -->

これをさっきのテンプレートタグを使って書き直すと …。

single.php – ページャー部分

<!-- post navigation -->
<div class="navigation">
<?php if( get_previous_post() ): ?>
<div class="alignleft"><?php previous_post_link('%link', '« %title'); ?></div>
<?php endif;
if( get_next_post() ): ?>
<div class="alignright"><?php next_post_link('%link', '%title »'); ?></div>
<?php endif; ?>
</div>
<!-- /post navigation -->

途中で if( get_previous_post() ): や if( get_next_post() ): を使い、「前の記事がある場合にのみ表示する」「次の記事がある場合にのみ表示する」 という条件を加えています。そのうえで、previous_post_link() と next_post_link() を使って 「前の記事」「次の記事」 へのリンクを表示しています。

記述する場所は、先ほど追加したタグや投稿者名の次 になります。

single.php（一部）

<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...ここに記事のタイトルなど...省略 ...
<?php the_content(); ?>
<p class="footer-post-meta">
...ここにタグ、投稿者名など...省略 ...
</p>
</div>
<!-- post navigation -->
<div class="navigation">
<?php if( get_previous_post() ): ?>
<div class="alignleft"><?php previous_post_link('%link', '« %title'); ?></div>
<?php endif;
if( get_next_post() ): ?>
<div class="alignright"><?php next_post_link('%link', '%title »'); ?></div>
<?php endif; ?>
</div>
<!-- /post navigation -->
<?php endwhile; // 繰り返し処理終了
else : ...省略...

WordPress ループ内が index.php に比べるととても長くなりました。これも single.php の特徴ですね！

コメント機能を追加し、ユーザーの声を反映しよう

ブログの個別記事には、通常コメントに関する部分を表示します。コメント一覧と、コメントを投稿するためのフォームです。まずはコメント一覧の表示の仕方から見ていきます。

コメント一覧の表示

まずは コメント一覧 を表示していきましょう。コメントの一覧を表示するのはとても簡単です！

wp_list_comments() というテンプレートタグを 1行追加するだけ で、 タグを使ってコメントをリスト表示してくれます。

コメント一覧

もちろん、アバターの表示・非表示の切り替えや、返信コメントのスレッド化（入れ子リストでの表示）などは、管理画面の「設定 → ディスカッション」 の設定が反映されます。

それでは、実際にコメント一覧を表示させてみましょう。今回は、HTML を直接書くのは省略し、いきなりテンプレートタグを記述 してみます。

WordPress Code

<div id="comment-area">
<?php if( have_comments() ): // コメントがあったら ?>
<h3 id="comments">Comment</h3>
<ol class="commets-list">
<?php wp_list_comments( 'avatar_size=55' ); ?>
</ol>
<?php endif; ?>
</div>

今回は、全体を div#comment-area で囲んでみました。その中に、if(have_comments()): という条件を加えています。これは 「コメントがある場合のみ表示する」 という条件分岐になっています。その後、<h3>タグを使って見出しを追加しました。

ここで注意したいのが、#comments という ID です。これは、トップページなどから #（ハッシュ）付きのリンク でコメントセクションに直接移動できるようにするためのものです。そのため、見出しなどに 必ず id=”comments” を設定 しておきましょう。

上記のコードの中で、実際に コメントを表示している部分 が以下の箇所になります。

<ol class="commets-list">
<?php wp_list_comments( 'avatar_size=55' ); ?>
</ol>

wp_list_comments() は、<li>要素を使ってコメントを表示するため、<ul> や <ol> で囲むのを忘れないようにしましょう。これを忘れると、適切なリスト構造にならず、デザインが崩れる可能性があります。

また、wp_list_comments(‘avatar_size=55’) と記述すると、アバターのサイズを指定 できます。この場合、アバター画像は 55px × 55px の大きさで表示されます。ただし、これは 管理画面の「ディスカッション設定」でアバターを「表示」にしている場合のみ有効 です。

comments.php を作る

これで コメント一覧の部分は完成 しましたが、single.php には直接記述しません。コメント一覧は部品化 して、comments.php という別のテンプレートファイルとして管理します。

まず、新しく comments.php を作成し、先ほどのコードを書き込んだら、テーマフォルダ内に保存 しましょう。

次に、single.php から comments.php を読み込む 記述を追加します。これにはcomments_template() というテンプレートタグを使用します。

記述する場所は WordPress ループの中 です。先ほど作成した 「前の記事」「次の記事」へのリンクの下に追加しましょう。

single.php – WordPress ループ

<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...タイトルやコンテンツなど（省略）...
<!-- post navigation -->
<div class="navigation">
...「前の記事」「次の記事」へのリンク（省略）...
</div>
<!-- /post navigation -->
<?php comments_template(); ?>
<?php endwhile; // 繰り返し処理終了
else : ...省略...

これで single.php でコメント一覧を表示 できるようになりました！

single.php の完成まで、あと少しです。

コメントフォームを表示しよう！

コメント一覧の次は、コメントフォームを表示してみます。このコメントフォームも、さっきのコメント一覧と同じように、少しのコードで表示させることができるんです！

記述するのは、コメント一覧の下なので、comments.php に記述します。使うテンプレートタ次は コメントフォーム を表示してみましょう。コメントフォームも コメント一覧と同じく、少しのコードで簡単に表示 できます。

記述する場所は コメント一覧の下 なので、comments.php に追加します。使用するテンプレートタグは comment_form() です。グは comment_form というタグです。

comments.php

<?php comment_form(); ?>

たったこれだけで、コメントフォームを表示してくれます。でもちょっとだけ工夫して、今回は下記のように書いてみました。

<?php $args = array(
'title_reply' => 'Leave a Reply',
'label_submit' => 'Submit Comment',
);
comment_form( $args ); ?>

title_reply の部分は、コメントフォームの見出しのテキストです。label_submit は送信ボタン内のテキストを指定できます。以下が実際の表示になります！

コメントフォームの表示

また、コメント一覧やコメントフォームは、管理画面の メニュー → 設定 → ディスカッション から、細かく設定することができます。

ディスカッション設定

wp_list_comments() や comment_form() を使って表示されたコメント欄は、管理画面の設定がある程度反映されます（”ある程度” の理由については後ほど説明します）。

例えば、「新しい投稿へのコメントを許可する」 のチェックを外すと、新しく作成した記事には コメントフォームが表示されなくなります。

コメントフォームを移動させる comment-reply.js

前半、header.php のところで、下記のようなコードを記述したのを覚えていますか？

<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>

実はこのコードは、コメント欄に関係したものだったんです。WordPress のコメント欄では、「返信」というリンクをクリックすると、コメントフォームが、返信したいコメントのすぐ下に移動してきます。

返信をクリックすると、フォームがすぐ下に移動します

この仕組みは、WordPress に はじめから組み込まれている comment-reply.js という JavaScript によって動作しています。

先ほどのコードは、この comment-reply.js を 適切に読み込むための記述 だったんですね！

この JavaScript ファイルが読み込まれていないと、コメントフォームが正しく移動しない ので、注意が必要です。

ここまでかなり長くなってしまいましたが、次が最後のテンプレートファイルです！

…「まだあるの？」なんて言わないでくださいねー！

固定ページ専用の page.php を作成し、個別ページを整理

これまでに、トップページなどを表示する index.php と ブログの個別記事を表示する single.php という、メインのテンプレート（部品ではないファイル）を作成してきました。

最後に、固定ページを表示する page.php を作成します。

とはいえ、index.php を少し変更するだけでOKです。まず、index.php をコピーして、page.php という名前でテーマフォルダ内に保存しましょう。

固定ページの場合、カテゴリーの表示は不要 ですし、ページの性質上 日付を表示する必要もほとんどありません。そのため、これらの部分は 丸ごと削除 します。

また、index.php で表示していた 「続きを読む」 のリンクも不要です。さらに、固定ページはブログのように 時系列に並ぶものではない ため、「次のページ」「前のページ」 というページャーも削除します。

最終的には、以下のように スッキリした構成 になります。

page.php

<?php get_header(); ?>
<!-- main -->
<div id="main">
<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
... ここにあったカテゴリーなどのコードは削除
<?php the_content(); ?>
</div>
<?php endwhile; // 繰り返し処理終了
else : // ここから記事が見つからなかった場合の処理 ?>
<div class="post">
<h2>記事はありません</h2>
<p>お探しの記事は見つかりませんでした。</p>
</div>
<?php endif; ?>
... ここにあったページャーのコードは削除
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

実際に表示するのは、ページのタイトルとコンテンツのみ ですね！ ただし、固定ページでも コメントを受け付ける 設定にしたい場合は、WordPress ループ内に comments_template() を記述 し、comments.php を読み込めばOKです。

このように コメント欄を部品化 しておけば、さまざまなテンプレートファイルで簡単に利用できます。これが、comments.php を別ファイルにしていた理由 なんですね！

また、WordPress ループの中にある div タグには post_class() というテンプレートタグが付いています。これは WordPress が自動的に適切なクラスを付与 してくれるものです。

以前にも説明しましたが、ブログ記事の場合は post クラス が付き、固定ページの場合は page クラス が付きます。

カスタムメニューを導入し、柔軟なナビゲーションを実現

サイトのメインナビゲーション ですが、現状では 作成した固定ページがただ並んでいるだけ です。せっかくなので、カスタムメニューの機能を有効化 しておきましょう。

カスタムメニューとは、管理画面の「外観 → メニュー」から編集できるナビゲーションメニュー のことです。これを使えば、ページの並び順を自由に変更したり、外部リンクを追加したり できます。

ただし、この機能も ウィジェットと同様に、テーマ側で適切な設定をしておく必要があります。

これを利用するには、functions.php に下記を追加します！

functions.php

<?php
// カスタムメニューを有効化
add_theme_support( 'menus' );
// カスタムメニューの「場所」を設定するコード
register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
?>

add_theme_support( ‘menus’ ) と記述すると、カスタムメニューの機能が有効化 されます。しかし、それだけでは どこにメニューを表示するのか が決まっていません。

次のコードにある 「カスタムメニューの場所」 とは何でしょうか？ ここでは ‘header-navi’, ‘ヘッダーのナビゲーション’ という形になっています。

実はこれが テーマ側とカスタムメニューを紐付ける設定 になります。ここで、もう一度 header.php を見てみましょう。

header.php の ナビゲーションを表示する部分 には、次のように ‘header-navi’ と記述されていました。

header.php

wp_nav_menu( array ( 'theme_location' => 'header-navi' ) );

つまり、管理画面の「テーマの場所」で「ヘッダーのナビゲーション（header-navi）」に設定したカスタムメニューを反映させる という意味になります。

少しややこしく感じるかもしれませんが、カスタムメニューは複数作成できる ため、フッターにも配置可能 です。そのため、どのメニューをどこに表示するかを区別するために 「テーマの場所」 が必要になるわけです。

カスタムメニューを 複数作成する 場合は、functions.php に以下のように 複数のメニューを登録 します。

functions.php

// カスタムメニューの「場所」を設定するコード
register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
register_nav_menu( 'footer-navi', 'フッターのナビゲーション' );

その上でフッターのナビゲーションを表示したい箇所には、下記のように記述します。

footer.php

wp_nav_menu( array ( 'theme_location' => 'footer-navi' ) );

今回はヘッダーのナビゲーションだけ設定しています。表示を確認してみると …。

カスタムメニューによる表示

ここで少し注意点があります。固定ページのナビゲーションでは <div> タグに .menu クラスが付いていましたが、カスタムメニューを使用すると <ul> タグに .menu クラスが適用されます。そのため、スタイルシートを記述する際に気をつける必要があります。統一されていればもっと楽なのに…

時間はかかりましたが、これでひとまずテーマの完成です！今回作成したテンプレートファイルは、以下の9つです。

かなりの数を作り込みましたね！本当にお疲れさまでした！

仕上げに Theme Check プラグインで最終確認

ここまで苦労して作り上げたオリジナルテーマ。問題はないはず…ですが、念のため Theme Check というプラグインを使って、不具合がないか確認してみましょう！
Theme Check は、テーマ内のコードをスキャンし、非推奨のタグなどを検出してくれる便利なプラグインです。

管理画面の 「プラグイン」 → 「新規追加」 から Theme Check をインストールし、有効化します。すると 「外観」メニュー に Theme Check という項目が追加されるはずです。

Theme Check の画面

Theme Check の画面でテーマのチェックを行う前に、WordPress のデバッグモードをオンにしておく 必要があります。
デバッグモードを有効にするには、WordPress をインストールしたディレクトリ内の wp-config.php をエディタで開きます。

すると、wp-config.php 内に以下のような記述があるはずです。

wp-config.php

define('WP_DEBUG', false);

デバッグモードをオンにするには、これを true にします。

define('WP_DEBUG', true);

デバッグモードを有効にしたら、Theme Check プラグイン を使ってテーマのチェックを実施しましょう！
テストに合格すると、以下のようなメッセージが表示されます。ただし、スクロールしていくと 「こうするともっと良くなるよ！」 というアドバイスも記載されているので、最後までしっかり確認しておきましょう。

検査結果

また、テストに合格しても 「必須項目が不足しています！」 と指摘されることがあります。こうした注意点もしっかり確認し、必要な修正を加えましょう。

今回も、以下の必須項目が不足していると警告されてしまいました。

必須項目抜けの注意

それでは上から順番に見ていって、悪い？ところを直していくことにします。初めてテーマ作りをしたときに、よく見落としがちなポイントばっかりです。

必須: コンテンツ幅が設定されていません。

これは functions.php で、サイトのメインカラムのコンテンツ幅を指定しておくコードです。今回のテーマは、メインカラムのコンテンツ幅が 600px なので、下記のように fuこれは functions.php で、サイトのメインカラムのコンテンツ幅を指定するコードです。

今回のテーマでは、メインカラムのコンテンツ幅を 600px に設定するため、functions.php に次のコードを追加します。

functions.php

if ( ! isset( $content_width ) ) $content_width = 600;

必須: このテーマにはコメントページネーションのコードがありません。

これはコメント一覧を複数ページに分けたときに必要な「ページャー」のこと。もうちょっと詳しく説明すると、設定 → ディスカッション には、下記のような設定がありますよね。

これにチェックを入れて有効にした場合は、ページャーがないと困ります。そこで comments.php のコメント一覧の下などに、下記のコードを追加しておきましょう。

comments.php

<div class="comment-page-link">
<?php paginate_comments_links(); ?>
</div>

<a>タグ、<span>タグでマークアップされたページャーが表示されます。

必須: wp_link_pages が見つかりませんでした。

これもページャーに関するものですねー。WordPress はひとつの記事を複数のページに分けることができますよね！

投稿画面で <!–nextpage–> と書く

投稿画面で <!--nextpage--> と記述すると、その部分でページが分割されます。
つまり、この機能を使う場合、ページ送り（ページャー）が必要になるというわけですね！

記事を分割したときのページャー

このページャーを表示するには、WordPress ループ内に下記のように記述します。

single.php

<?php $args = array(
'before' => '<div class="page-link">',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
);
wp_link_pages($args); ?>

こうすると、<a>タグと<span>タグでマークアップされたページャーが表示されます。

必須: language_attributes が見つかりませんでした。

これは<html>の開始タグに付ける lang 属性を出力するテンプレートタグです。

 <html lang=”ja”>と直書きしていましたが、下記のように書きましょう！という注意です。

<html <?php language_attributes(); ?>>

これは公式テーマとして登録する際には必須となりますが、個人のテーマなら気にすることはないので、今回はそのままにしておきます。

必須: body_class call in body tag が見つかりませんでした。

これは post_class と似たテンプレートタグで、各ページごとに タグへ自動的にクラスを追加 してくれるものです。
CSS でのスタイリングがしやすくなるため、ぜひ活用したいですね！

そこで、header.php の タグを、次のように書き換えました。

header.php

<body <?php body_class(); ?>>

必須:add_theme_support( ‘automatic-feed-links’ ) が見つかりませんでした。

これを忘れたら大変でした。これは <head> 内に RSS2 のフィードリンクを表示してくれるもの。functions.php に書き加えておきましょう。

functions.php

add_theme_support( 'automatic-feed-links' );

このほかにも、「WordPress 独自のクラスが style.css に記述されていません」 という注意を受けることがあるかもしれません。
記事内の画像のクラス alignleft や alignright について触れましたが、実は WordPress には他にも 自動で追加されるクラス があり、レイアウトに影響を与えるものもいくつか存在します。

WordPress のテーマ作りに慣れてくると、こうしたクラスの使い方が自然と分かるようになります（例えば、画像にキャプションをつけると、キャプションに対して特定のクラスが適用される など）。
最初は知らないクラスがあっても問題ありません。テーマのレイアウトが崩れなければ、大きな影響はないでしょう。

これで テーマチェック も無事クリアできました！

最後に …

今回作成したテーマは、特に追加の機能を付けていません。一方で、デフォルトテーマには カスタムヘッダー、カスタム背景、アイキャッチ画像、投稿フォーマット など、便利な機能が最初から組み込まれています。
こうした機能をテーマに追加するには、さらにコードを記述していく必要があります。

少しずつ機能を追加しながら、自分だけのテーマを作り上げていくのも WordPress テーマ開発の醍醐味 ですね！

また、WordPress のテンプレートタグは PHP で動作 しているため、PHP の基礎知識があると理解が深まります。
PHP を学びながらカスタマイズすれば、より自由度の高いオリジナルテーマ作り を楽しめるでしょう！

WordPressが支える大規模サイトの事例

WordPressは個人のブログや小さな企業のサイトだけでなく、大手メディアや世界的なブランドにも採用されています。例えば、BBC AmericaやTechCrunchなどの有名メディアサイトもWordPressを利用しており、膨大なアクセスを処理しながら高速な表示を実現しています。これらのサイトは単なるブログではなく、商業レベルの大規模なシステムとして構築されています。そのため、運用面での工夫が非常に重要となります。

BBC America: 高トラフィックを支えるWordPressの運用

BBC Americaは、英国のBBCが運営するアメリカ向けの放送局の公式サイトです。このサイトでは、番組情報、ニュース記事、動画コンテンツなど、多様なメディアが掲載されており、月間数千万以上のPV（ページビュー）を誇ります。WordPressを使用してこの規模のサイトを運営するには、通常の設定だけでは到底追いつきません。BBC Americaが導入した最適化技術には、キャッシュの最適化、CDN（コンテンツデリバリーネットワーク）の活用、マイクロサービスアーキテクチャの採用、クラウド環境の活用、コンテンツの自動管理、サーバーの分散化とロードバランシングの導入、コンテンツの動的生成と静的キャッシュの使い分けなどがあります。これらの技術的な工夫により、BBC AmericaのWebサイトは安定した高速表示と高いスケーラビリティを実現しています。

さらに、同サイトはデータベースの負荷分散技術を導入し、クエリの最適化を実施しています。WordPressの標準的なデータベース構造では、トラフィックが増大するとサーバー負荷が問題となりますが、BBC Americaではデータベースをクラウドベースのスケーラブルな環境に移行し、負荷の分散を行っています。これにより、トラフィックの増減に柔軟に対応できるシステムを構築しています。

BBC America | Watch TV Shows & Movies Online | Stream Current Episodes

Watch the latest full episodes and video extras for BBC America shows: Doctor Who, Killing Eve, Orphan Black, Luther, Pl...

www.bbcamerica.com

TechCrunch: コンテンツが命のニュースサイトの最適化

TechCrunchは、テクノロジー業界の最新ニュースを提供する有名なオンラインメディアです。毎日大量の記事が公開され、読者は即座に最新の情報を求めています。そのため、カスタム投稿タイプとカスタムフィールドの活用、AMP（Accelerated Mobile Pages）の導入、AIを活用したレコメンドシステム、リアルタイム分析の実施、広告最適化とマネタイズの工夫などが行われています。特に、広告の最適化においては、プログラマティック広告を活用し、読者の関心に合った広告を最適なタイミングで表示することで、広告収益を最大化する仕組みが導入されています。

TechCrunchの大きな特徴の一つとして、パーソナライズされたコンテンツの配信があります。AI技術を活用し、ユーザーの閲覧履歴やクリックデータを分析することで、個々のユーザーに最適な記事を自動的に表示する仕組みを構築しています。これにより、ユーザーのエンゲージメントが向上し、サイト滞在時間の増加にもつながっています。また、コンテンツのモデレーションにはAIを活用し、不適切なコメントやスパムを排除することで、よりクリーンなコミュニティを維持する努力も行っています。

TechCrunch | Startup and Technology News

TechCrunch | Reporting on the business of technology, startups, venture capital funding, and Silicon Valley

techcrunch.com

WordPressサイトを成功させるための総合戦略

WordPressで成功するための戦略として重要なのは、目的に応じた適切なプラグインの選定、パフォーマンス最適化、SEOとマーケティングの強化、セキュリティ対策の徹底、ユーザーエクスペリエンスの向上、マルチサイト機能の活用、データ分析とA/Bテストの導入などです。特に、パフォーマンスの最適化に関しては、キャッシュ機能やCDNの利用、画像圧縮を適用することで、読み込み速度を向上させることが不可欠です。また、SEO対策では、検索エンジン最適化だけでなく、SNSやメルマガなどの外部施策を取り入れることで、さらなる流入増加を狙うことが可能です。

加えて、WordPressの活用方法として、ヘッドレスCMSの導入が注目されています。フロントエンドをReactやVue.jsなどのモダンなJavaScriptフレームワークで構築し、バックエンドにWordPressのAPIを利用することで、より高度なインタラクションを備えたWebサイトの構築が可能になります。このアプローチを採用することで、コンテンツ管理の柔軟性を維持しつつ、最新技術を活用したパフォーマンス向上が実現できます。

WordPressの活用がもたらす未来

また、AI技術との融合も今後のWordPressサイトにおいて重要なポイントとなるでしょう。例えば、AIによるコンテンツの自動生成や翻訳機能の強化、ユーザー行動に基づくパーソナライズドコンテンツの配信などが考えられます。特に、Eコマースサイトにおいては、ユーザーの購買履歴を分析し、最適な商品をレコメンドするシステムの導入が急速に進んでいます。

さらに、ブロックチェーン技術を活用したセキュリティの強化も期待されています。例えば、デジタルコンテンツの所有権を証明するためのNFT（Non-Fungible Token）技術の導入が進んでおり、著作権の保護やコンテンツの不正利用を防ぐ手段として注目されています。

まとめ

WordPressは単なるブログツールではなく、大規模なメディアサイトから小規模な個人サイトまで、多様なニーズに対応できるCMSです。成功するためには、目的に応じた適切なカスタマイズと最適化が不可欠です。本記事で紹介した事例や戦略を参考に、自身のサイトに最適なWordPress運用を考えてみてください。今後のWeb技術の進化とともに、WordPressの可能性も広がり続けるでしょう。

ある日、ウェブ制作会社で働く佐藤さんは、本番環境とは別のステージング環境でWordPressサイトの開発を進めていました。開発中のサイトは、セキュリティやパフォーマンスのチェックのためにWordPress 5.2から導入された「サイトヘルス」機能が働いていました。しかし、佐藤さんの環境では、あまり意味をなさないアラートが頻繁に表示され、作業の邪魔になることもしばしば…。

「このアラート、開発中の環境では重要じゃないんだけど…」と頭を抱えた佐藤さんは、どうにかして管理画面上のサイトヘルスのアラートを非表示にできないかと考え始めました。

なぜサイトヘルスのアラートを消す必要があるのか？

WordPressのサイトヘルス機能は、以下のような場合に役立ちますが…

• 本番環境での安全管理
  サイトのセキュリティ対策やパフォーマンスの改善に役立つ情報を提供。
• 診断ツールとしての機能
  問題があれば、改善点を明確に教えてくれる。

しかし、開発やステージング環境では…

• 意図的な設定変更
  サイトヘルスが推奨する設定と、開発者が意図した設定が異なる場合。
• 一時的な警告
  テスト中の環境固有のエラーや警告が、本番では無視してもよい場合。

このようなシチュエーションでは、アラートが余計なノイズとなり、管理画面が煩雑になることもあるのです。

アラート非表示の方法

WordPressのコア機能をフックすることで、不要なアラートを非表示にする方法を見つけました。以下、2つの方法をご紹介します。

方法1: 管理画面のアラート自体を非表示にする

まずは、管理画面に表示されるサイトヘルスの通知を取り除く方法です。テーマの functions.php やコードスニペットプラグインに、以下のコードを追加します。

function my_remove_site_health_alert() {
    // WP_Site_Health クラスが存在する場合のみ処理
    if ( class_exists( 'WP_Site_Health' ) ) {
        remove_action( 'admin_notices', array( WP_Site_Health::get_instance(), 'maybe_display_message' ) );
    }
}
add_action( 'admin_init', 'my_remove_site_health_alert' );

このコードは、WordPressの管理画面にアラートを表示するためのアクションを解除することで、不要な通知を非表示にします。

方法2: サイトヘルスのメニューリンクを隠す

場合によっては、管理画面内の「ツール」メニューに表示される「サイトヘルス」へのリンク自体を非表示にしたいこともあります。こちらは次のコードで実現できます。

function my_remove_site_health_menu() {
    remove_submenu_page( 'tools.php', 'site-health.php' );
}
add_action( 'admin_menu', 'my_remove_site_health_menu', 999 );

このコードを追加すると、管理画面の「ツール」メニューから「サイトヘルス」ページへのリンクが消え、不要な情報にアクセスしてしまうリスクも減少します。

安心してカスタマイズ

こうして、佐藤さんは自分の開発環境に合わせた管理画面を構築し、余計なアラートに煩わされることなく、スムーズなサイト制作を進めることができました。もちろん、サイトヘルス機能は本番環境では非常に重要な診断ツールですので、無闇に全体を無効化するのではなく、必要な部分だけをカスタマイズすることが大切です。

「たけほのへなちょこ台帳」でも、より快適な運営を実現するために、選び抜かれたプラグインを駆使しています。今回は、サイト運営の裏側を支える強力なプラグインたちを詳しく紹介していきます。

ページの読み込み速度を加速する「Autoptimize」

Autoptimize

Autoptimize は、以下を最適化することでサイトの反応を高速にします。JavaScript、CSS、画像 (遅延読み込みを含む)、HTML、Google フォント、非同期 JavaScript、また邪魔な Emoji の除去など。

ja.wordpress.org

快適な閲覧体験を提供するためには、ページの表示速度が重要です。「Autoptimize」は、CSSやJavaScriptを圧縮・最適化し、サイトのパフォーマンスを向上させるプラグイン。特にモバイルユーザーにとって、遅延のない表示は訪問の継続率を高める鍵となるため、非常に頼れるツールです。

シンプルで高機能なお問い合わせフォーム「Contact Form 7」

Contact Form 7

お問い合わせフォームプラグイン。シンプル、でも柔軟。

ja.wordpress.org

読者とのコミュニケーションをスムーズにするために使用しているのが「Contact Form 7」。フォームのカスタマイズ性が高く、簡単に設置できるのが魅力です。問い合わせ内容を細かく設定できるため、読者とのやり取りを円滑にする役割を果たしています。

テーマのカスタマイズを効率化する「What The File」

What The File

What The File は、あなたが現在表示しているページに使用されているテンプレートファイルを見つけるために最適なツールです！

ja.wordpress.org

テーマファイルのカスタマイズ時に「どのファイルを編集すればいいのか？」と迷うことはありませんか？そんな悩みを解決してくれるのが「What The File」。現在表示しているページがどのテンプレートを使用しているかを簡単に確認できるので、カスタマイズ作業の手間を大幅に削減できます。

スパムコメントを徹底ブロック！「Akismet Anti-spam」

Akismet Anti-spam: Spam Protection

スパムのコメントやスパムをコンタクトフォームでブロックするための最善のスパム対策保護。WordPress と WooCommerce のための最も信頼されたスパム対策ソリューション。

ja.wordpress.org

ブログ運営者にとって頭を悩ませるのがスパムコメント。これを防ぐために導入しているのが「Akismet Anti-spam」です。高度なスパム検出機能を持ち、機械学習を活用して悪質なコメントを自動で振り分けてくれます。手動でスパムを削除する手間が大幅に削減され、健全なコメント欄を維持するのに欠かせない存在です。

詳細なアクセス解析を実現する「WP Statistics」

WP Statistics - The Most Popular Privacy-Friendly Analytics Plugin

Get website traffic insights with GDPR/CCPA compliant, privacy-friendly analytics Includes visitor data, stunning graphs...

wp-statistics.com

サイトの運営状況を把握するために欠かせないのがアクセス解析。「WP Statistics」は、訪問者の動向を詳細に記録し、どのページが人気なのか、どのルートから流入しているのかを可視化してくれます。これにより、効果的なコンテンツ戦略を立てやすくなります。

SEO対策に必須！「XML Sitemap Generator for Google」

XML Sitemap Generator for Google

Generate multiple types of sitemaps to improve SEO and get your website indexed quickly.

wordpress.org

Googleの検索結果に正しくインデックスされるためには、サイトマップの作成が欠かせません。「XML Sitemap Generator for Google」は、サイト全体の構造を自動でGoogleに伝え、検索エンジン最適化を強力にサポートします。検索順位の向上を目指す上で、非常に重要なプラグインです。

キャッシュ機能で爆速化！「WP Fastest Cache」

WP Fastest Cache Premium | The Fastest WordPress Cache Plugin

WP Fastest Cache Premium - The fastest and easiest wordpress cache plugin.

www.wpfastestcache.com

ページの表示速度向上に絶大な効果を発揮するのが「WP Fastest Cache」。キャッシュを利用して、ページの再読み込みを最小限に抑えることで、ユーザーにストレスのない閲覧体験を提供します。Googleの評価基準でもあるサイトスピードを改善することで、SEO効果も期待できます。

まとめ

「たけほのへなちょこ台帳」では、スパム対策から表示速度の最適化、SEO向上まで、多方面に渡るプラグインを駆使して、快適なブログ運営を実現しています。

適切なプラグインの導入は、単なる利便性向上に留まらず、サイトの成長にも大きく貢献します。今後も最新のツールを取り入れながら、より良いサイト作りを目指していきたいと思います。

AIライティングアシスタントの活用で記事作成を効率化！

Jetpack AI AssistantがWordPressに統合され、記事の下書きやリライトが簡単になりました。キーワードを入力するだけで、SEOに最適化されたコンテンツを生成できるので、記事作成の時間を大幅に短縮できます。

AI Assistant

Jetpack AI Assistant WordPress 向けの一番パワフルな AI ツール アイデアをあ…

jetpack.com

「足りない機能を補える」新エディタ拡張機能

WordPressのブロックエディタ（Gutenberg）は進化を続けていますが、「もう少しこうしたい…！」という痒い部分がありますよね。最新のプラグイン「Spectra 2.0」を使えば、便利なブロックが追加され、デザインの自由度がアップします。

「ブロックエディタが物足りない！」と感じている人には、必須級のプラグインです。

Introducing Spectra 2.0: Build incredible websites faster

Unlock limitless web designing possibilities with Spectra 2.0. Get started with Spectra, and create high-quality website...

wpastra.com

画像圧縮＆最適化でブログの表示速度を爆速化！

ブログ運営で意外と見落としがちなのが、画像の最適化。高画質な画像をアップしすぎると、サイトの表示速度が遅くなり、SEO的にも不利になります。

そこで活躍するのが、ImagifyやEWWW Image Optimizerといった最新の画像圧縮プラグイン！

「ブログの表示が遅いな…」と思ったら、まずは画像圧縮を見直しましょう！

Imagify - WordPress Image Optimizer Plugin

Use Imagify on your WordPress website with our plugin and make your images lighter right away.

imagify.io

EWWW Image Optimizer

Comprehensive image optimization that doesn't require a rocket science degree. Optimize images automatically for Faster ...

ja.wordpress.org

AIが自動でアイキャッチ画像を生成！デザイン不要の神機能

「アイキャッチ画像を作るのが面倒…」と思っているブロガーに朗報！最近のWordPressプラグインには、AIが自動でアイキャッチ画像を作ってくれる機能が登場しています。

おすすめは「Canva AI Image Generator」。

「アイキャッチに時間をかけずに、見栄えの良い画像を作りたい」という人には最適なツールです！

AI Image Generator – Easy image creation with AI

Create stunning images with AI Image Generator. Use our image generator powered by OpenAI and DALL-E to produce high-qua...

ja.wordpress.org

SNSシェアボタンの最適化で拡散力UP！

「SNSでシェアされる記事」と「されない記事」の違い、知っていますか？実は、シェアボタンの配置や見せ方を少し変えるだけで、拡散率が大幅にアップするんです！

シェアボタンは「目につく位置」に配置するのが鉄則！ 記事の上部・下部・サイドバーなど、読者がすぐ押せる場所に設置しましょう。

Shared Counts

Social sharing buttons that look great and load fast.

sharedcountsplugin.com

Monarch Social Sharing Plugin For WordPress

www.elegantthemes.com

まとめ

WordPressは日々進化しており、ブロガーの「ここが不便！」を解消する新機能やプラグインが続々登場しています。

• AIライティングで記事作成を時短！
• エディタ拡張でデザインを簡単に！
• 画像最適化でブログの表示速度UP！
• AIアイキャッチ生成でデザイン不要！
• SNSシェアボタンを工夫して拡散力UP！

どれも「痒いところに手が届く」ものばかりなので、ぜひ試してみてくださいね！

ブログが成長して多くの訪問者を迎え入れるようになると、これらの要素がしっかりしているかどうかが、サイトの成功に大きな影響を与えます。今回は、WordPressの基礎体力を高めるために必須とも言える、無料で使えるプラグインを5つご紹介します。それぞれが特定の分野を強化し、安定したブログ運営をサポートしてくれるものです。

プラグインの紹介

Yoast SEO

SEO対策を強化して、検索エンジンに強いブログに

Yoast SEOは、WordPressの定番SEOプラグインであり、検索エンジンでのパフォーマンス向上に貢献します。記事ごとのキーワード最適化やメタデータの設定、さらにはXMLサイトマップの自動生成など、SEOの重要な要素を簡単に管理できるのが魅力です。ブログの成長には、SEO対策が欠かせません。このプラグインを活用することで、検索エンジンでの順位向上を目指しましょう。

Yoast SEO – リアルタイムガイダンスと AI 搭載の高度なSEO

リアルタイムフィードバック、スキーマ、そして明確なガイダンスでSEOを改善しましょう。AI ツール、Google ドキュメントとの連携、そして24時間365日のサポートを追加料金なしでご利用いただけるアップグレードもご用意しています。

ja.wordpress.org

Wordfence Security

セキュリティの守護者、サイバー攻撃からブログを守る

セキュリティ関連のブログを運営するなら、まず自分のサイトが安全であることを示す必要があります。Wordfence Securityは、強力なファイアウォールやマルウェアスキャン機能を備えたセキュリティプラグインで、サイバー攻撃を防ぐための総合的な対策を提供します。不正アクセスのリスクを最小限に抑え、安心してブログを運営することができます。

Wordfence Security – Firewall, Malware Scan, and Login Security

ファイアウォール、マルウェアスキャナー、2要素認証、包括的なセキュリティ機能など、当社の24時間体制のチームがサポートします。Wordfence でセキュリティを最優先にしましょう。

ja.wordpress.org

UpdraftPlus

サイトの生命線、定期的なバックアップで万が一に備える

バックアップの管理は、WordPress運営において不可欠な要素です。UpdraftPlusは、簡単な操作でサイト全体をバックアップし、必要なときにはすぐに復元できるプラグインです。特にデータ損失やハッキングのリスクに備えて、定期的なバックアップを設定し、Google DriveやDropboxといったクラウドストレージに安全に保存することが可能です。万が一のトラブルにも備え、安定した運営をサポートします。

UpdraftPlus: WP Backup & Migration Plugin

WordPress サイトを別のホストまたはドメインにバックアップ、復元、または移行します。バックアップをスケジュールするか、手動で実行します。数分で移行できます。

ja.wordpress.org

WP Super Cache

パフォーマンス向上、速いページ表示でユーザー体験を向上させる

サイトの速度は、ユーザー体験やSEOに大きな影響を与えます。WP Super Cacheは、キャッシュ機能を利用して、ページの表示速度を向上させるプラグインです。キャッシュされたHTMLファイルをサーバーに負荷をかけずに提供することで、ページの読み込み時間を大幅に短縮できます。ブログ訪問者にスムーズな体験を提供し、離脱率を下げる効果も期待できます。

WP Super Cache

静的 HTML ファイルを生成する、WordPress の超高速キャッシュエンジン。

ja.wordpress.org

Akismet Anti-Spam

スパムを自動ブロック、クリーンなコメント欄を維持

スパムコメントは、ブログ運営者にとって厄介な問題です。Akismet Anti-Spamは、スパムコメントを自動的に検出・ブロックしてくれるため、スパムに煩わされることなくコメント欄を管理できます。ブログが成長するにつれて、スパムコメントが増えることもあるので、このプラグインを使ってクリーンなコミュニケーションの場を提供しましょう。

Akismet Anti-spam: Spam Protection

スパムのコメントやスパムをコンタクトフォームでブロックするための最善のスパム対策保護。WordPress と WooCommerce のための最も信頼されたスパム対策ソリューション。

ja.wordpress.org

総括

WordPressブログの成功には、サイトの「基礎体力」を強化することが不可欠です。今回紹介した5つのプラグインは、SEO対策、セキュリティ、パフォーマンスの向上、バックアップ管理、スパム対策など、ブログ運営のあらゆる面を支えるために役立ちます。これらを導入することで、ブログが成長しても安定した運営が可能になり、訪問者にとっても信頼できるサイトとなるでしょう。

自分のブログに合ったプラグインを選び、まずは基盤をしっかりと固めてから、さらなる成長を目指しましょう。

脆弱性の内容

脆弱性の原因は、キャッシュ処理における入力の不適切な検証にあります。攻撃者は、サイトへのアクセスを介して、キャッシュされたコンテンツに悪意のあるコードを挿入することができます。このコードが実行されると、サイトの制御が奪われ、データの盗難や改ざんが発生する可能性があります。

事例

実際の事例として、あるサイト管理者は、ユーザーがWordPressの管理者ページにアクセスする際に不審な動作が発生することに気付きました。調査の結果、LiteSpeed Cacheのキャッシュが不正なスクリプトで書き換えられており、管理者がそのスクリプトを実行してしまったため、サイトの制御が奪われ、コンテンツの変更やデータの漏洩が発生しました。

対策方法

1. プラグインの更新
   開発者はこの脆弱性に対応する修正パッチをリリースしています。まず、LiteSpeed Cacheプラグインを最新バージョンに更新することが最も重要です。常にプラグインを最新の状態に保つことで、既知の脆弱性からサイトを保護できます。
2. キャッシュの制御
   キャッシュ設定の見直しも重要です。キャッシュに関するアクセス制御を強化し、信頼できるユーザーだけがキャッシュの操作を行えるように設定を変更してください。
3. Web Application Firewall（WAF）の導入
   WAFを導入することで、悪意のあるリクエストをブロックし、脆弱性の悪用を防止できます。特に、LiteSpeedのようなキャッシュプラグインと連携することで、さらなるセキュリティが強化されます。
4. 定期的なセキュリティ監査
   WordPressのサイトにおいて、定期的にセキュリティ監査を行い、異常がないかを確認することが推奨されます。特にキャッシュ関連の設定やログの監視を強化し、潜在的な攻撃の痕跡を早期に発見してください。

脆弱性を放置するとサイト全体に深刻な影響を与える可能性があるため、迅速な対策が求められます。

キャッシュの導入

キャッシュを利用することで、サーバーへのリクエストを減らし、ページの読み込み速度を向上させることができます。

• キャッシュプラグイン
  WordPress用のキャッシュプラグインは、動的に生成されるページを静的HTMLファイルに変換し、訪問者が同じページを再度訪れた際に、その静的HTMLを表示することでサーバーの負荷を軽減します。代表的なプラグインには、WP Super Cache、W3 Total Cache、LiteSpeed Cacheなどがあります。
• ブラウザキャッシュ
  .htaccessファイルを使ってブラウザキャッシュを設定することで、ユーザーのブラウザに特定のリソース（画像、CSS、JavaScriptなど）をキャッシュさせ、再訪問時の読み込みを高速化できます。

画像の最適化

画像ファイルはページの読み込み時間に大きな影響を与えるため、最適化が重要です。

• 画像圧縮
  画像をアップロードする際に、SmushやEWWW Image Optimizerのようなプラグインを使って自動的に圧縮し、ファイルサイズを減らします。また、TinyPNGやJPEG Optimizerなどのオンラインツールを使用して事前に圧縮することも有効です。
• Lazy Loading
  Lazy Loadingとは、ユーザーがスクロールして画像が画面に表示される直前にのみ画像を読み込む技術です。これにより、ページの初期読み込みが軽くなり、体感速度が向上します。WordPress 5.5以降、この機能がデフォルトで有効になっていますが、必要に応じてプラグインで強化することもできます。

不要なプラグインやテーマの削除

WordPressにインストールされているプラグインやテーマが多すぎると、サイトのパフォーマンスが低下する可能性があります。

• プラグインの整理
  使用していないプラグインや、機能が重複しているプラグインを削除することで、サーバーの負荷を軽減できます。また、頻繁に更新されないプラグインはセキュリティ上のリスクもあるため、定期的に見直し、必要なものだけを残すようにしましょう。
• テーマの整理
  使用していないテーマも削除することで、データベースのサイズを減らし、パフォーマンスを向上させることができます。

データベースの最適化

WordPressのデータベースは、投稿リビジョン、スパムコメント、トランジエントオプションなどで時間とともに肥大化し、パフォーマンスに影響を与えることがあります。

• データベース最適化プラグイン
  WP-OptimizeやWP-Sweepなどのプラグインを使用して、不要なデータを削除し、データベースを定期的に最適化することが推奨されます。これにより、クエリの実行速度が向上し、ページの読み込みが速くなります。

軽量なテーマの選択

テーマの選択はサイトのパフォーマンスに直接影響します。

• 軽量テーマの使用
  デザインが複雑なテーマや、多機能なテーマはリソースを多く消費し、サイトの速度を低下させる可能性があります。Astra、GeneratePress、Neveなどの軽量テーマを使用することで、ページの読み込み速度を大幅に改善できます。これらのテーマは、コードが最適化されており、必要最低限のリソースで動作します。

これらの方法を実施することで、WordPressサイトのパフォーマンスを効果的に改善することができます。