2025年07月02日[水曜日]

固定ページを表示しよう! – WordPress関数の基本とPHPコードの書き方

  • 2025/07/01
  • BASICS
  • Wordpressの基礎
  • 0comments
  • 16views
  • 約7分で読めます
  • 11

前回の記事で、最小限のオリジナルテーマを作成し、WordPressのテーマがどのような仕組みで動作するかを体験しました。

しかし、管理画面で作成した固定ページの内容が表示されていない状態でした。

今回は、その問題を解決します!

WordPress関数を使って、管理画面で作成したコンテンツを表示する方法を学び、PHPコードの基本的な書き方も習得していきます。

今回の目標

  • PHPコードの基本的な書き方の理解
  • WordPress関数の使い方を習得
  • 固定ページのタイトルと本文を表示
  • ホームページ表示設定の理解と設定変更

この記事では、WordPressの核となる関数を実際に使いながら学習していきます。

PHPコードの基本的な書き方

前回作成したindex.phpファイルは、中身がすべてHTMLでした。

しかし、WordPressのコンテンツを表示するには、PHPという言語を使用する必要があります。

PHPコードの書き方ルール

基本ルール PHPのコードは、以下のように書きます

<?php
ここにPHPのコードを書く
?>

重要なポイント

  • PHPコードは <?php で始まり、?> で終わる
  • この記号で囲まれた部分だけがPHPとして実行される
  • 囲まれていない部分は、通常のHTMLとして出力される
  • PHPの命令文は必ずセミコロン(;)で終わる

セミコロンの重要性 PHPでは、すべての命令文の最後にセミコロン(;)を付ける必要があります。

これを忘れるとエラーが発生してサイトが表示されなくなります。

<?php
// 正しい書き方(セミコロンあり)
関数名();
?>
<?php
// 間違った書き方(セミコロンなし)- エラーになる
関数名()
?>

HTMLとPHPの混在例

<h1><?php /* ここにPHPコードが入る */ ?></h1>
<p>これは通常のHTMLです</p>

WordPressでのPHPの使い方

WordPressでは、関数を使ってコンテンツを表示します。

関数とは、特定の処理を行うためのコードのまとまりです。

関数の種類 PHPで使用できる関数には、大きく分けて2つの種類があります。

  1. PHP標準関数
    • PHPという言語に最初から備わっている関数
    • WordPressでなくても、PHPを使うどのサイトでも使用可能
  2. WordPress専用関数
    • WordPress独自の機能を提供する関数
    • WordPressでのみ使用可能
    • WordPressのコンテンツ(投稿、固定ページなど)を扱うために作られた関数

関数の呼び出し方 どちらの種類の関数も、同じ方法で呼び出します。

<?php 関数名(); ?>

セミコロンを忘れずに!

PHP標準関数もWordPress専用関数も、必ずセミコロンで終わることを忘れないでください。

これから学習する内容 今回の記事では、主にWordPress専用関数を使って、管理画面で作成したコンテンツを表示する方法を学習していきます。

固定ページのタイトルを表示する

それでは、実際にWordPress関数を使って、固定ページのタイトルを表示してみましょう。

index.phpファイルの修正

変更箇所 前回作成したsample-themeフォルダ内のindex.phpファイルを開き、以下の部分を変更します。

変更前:

<h1>サンプルテーマ</h1>

変更後:

<h1><?php the_title(); ?></h1>

the_title()関数について

the_title()関数の役割

  • 現在表示されているページのタイトルを出力
  • 固定ページの場合:固定ページのタイトル
  • 投稿の場合:投稿のタイトル
  • WordPressが自動的に適切なタイトルを判断して表示

WordPress専用関数です

the_title()WordPress専用関数です。

この関数はWordPressでのみ使用でき、WordPressのコンテンツ管理システムと連携してタイトルを取得・表示します。

使用方法

<?php the_title(); ?>

変更の保存と確認

1. ファイルの保存

  • index.phpファイルを保存

2. サイトの表示確認

  • 公開サイトを表示またはページを更新
  • ブラウザでサイトを確認

表示結果 ページを表示すると、<h1>部分に「Hello World」と表示されます。

あれ?予想と違う結果に!

「サンプルページ」のタイトルが表示されると思っていたのに、なぜか「Hello World」と表示されてしまいました。

これはいったい何が起こっているのでしょうか?

なぜ「Hello World」が表示されるのか?

タイトルに「Hello World」が表示されましたが、これは私たちが作成した固定ページ「サンプルページ」のタイトルではありません。

なぜこのような表示になるのでしょうか?

「Hello World」の正体

「Hello World」とは

  • WordPressのデフォルト投稿
  • WordPressをインストールした際に自動的に作成される
  • 現在、投稿が表示されている状態

ホームページ表示設定の確認

この現象の原因を探るために、WordPressの設定を確認してみましょう。

設定の確認方法

  1. WordPress管理画面にアクセス
  2. 左側メニューの「設定」をクリック
  3. 「表示設定」をクリック
  4. 「ホームページの表示」の項目を確認

現在の設定

  • 「最新の投稿」が選択されている

現在の設定状況 WordPressの設定で、トップページ(ホームページ)に何を表示するかが決まっています。

現在は「最新の投稿」が設定されているため、「Hello World」投稿が表示されています。

4. ホームページ表示設定の変更

固定ページを表示するために、現在開いている表示設定画面で、ホームページの表示設定を変更しましょう。

表示設定の変更手順

ホームページの表示設定を変更

  • 現在開いている「表示設定」画面で、「ホームページの表示」セクションの設定を以下のように変更
    • 「固定ページ」を選択(「最新の投稿」から変更)

ホームページの選択

  • 「ホームページ」のドロップダウンメニューから
    • 「サンプルページ」を選択

投稿ページの設定

  • 「投稿ページ」
    • 未選択のまま(今回は設定しない)

設定の保存

  • 「変更を保存」ボタンをクリック

設定変更後の確認

公開サイトの表示

  • 公開サイトを表示またはページを更新

表示結果の確認

  • <h1>部分に「サンプルページ」と表示される
  • これは固定ページのタイトルが正しく表示されている証拠

おめでとうございます!

WordPress関数を使って、管理画面で作成した固定ページのタイトルが正しく表示されました。

ホームページ表示設定の推奨事項

固定ページ設定がおすすめの理由

  • コンテンツの管理が容易
  • トップページの内容を自由に編集可能
  • 企業サイトや個人サイトに適している
  • SEO対策がしやすい

なぜデフォルトは「最新の投稿」なの?

WordPressは元々ブログシステムとして開発されたため、デフォルト設定は「最新の投稿」になっています。

しかし現在では一般的なWebサイトでも広く使われるため、「固定ページ」設定を使用することが多いです。

固定ページの本文を表示する

タイトルの表示に成功しました!次は、固定ページの本文内容も表示してみましょう。

index.phpファイルの本文部分を修正

変更箇所 index.phpファイル内の<main>セクションを変更します。

変更前:

<main>
    <section>
        <h2>WordPressテーマ作成</h2>
        <p>このページは<strong>index.php</strong>ファイルで作成されています。</p>
        <p>PHPファイルですが、HTMLを書くことができます。</p>
    </section>
    
    <section>
        <h2>学習のポイント</h2>
        <ul>
            <li>PHPファイルでもHTMLが書ける</li>
            <li>普通のWebページと同じように表示される</li>
            <li>次回はWordPress関数を学習予定</li>
        </ul>
    </section>
</main>

変更後:

<main>
    <?php the_content(); ?>
</main>

the_content()関数について

the_content()関数の役割

  • 現在表示されているページの本文内容を出力
  • 固定ページの場合:固定ページの本文
  • 投稿の場合:投稿の本文
  • 管理画面で入力した内容がそのまま表示される

the_content()WordPress専用関数です。この関数はWordPressでのみ使用でき、WordPressの投稿や固定ページの本文コンテンツを取得・表示するために作られています。

使用方法

<?php the_content(); ?>

変更結果の確認

ファイルの保存

  • index.phpファイルを保存

公開サイトの表示確認

  • 公開サイトを表示またはページを更新

表示内容の確認

  • 管理画面で「サンプルページ」に入力した内容が表示される
  • 前回、管理画面で編集した固定ページの内容そのものが表示される

素晴らしい!

これで、管理画面で作成・編集したコンテンツが、オリジナルテーマで正しく表示されるようになりました。

まとめと次回予告

今回学習したこと

PHPの基本

  • PHPコードの書き方<?php?> で囲む
  • セミコロン(;)の重要性:すべての命令文の最後に必要
  • HTMLとPHPの混在が可能
  • WordPress関数の呼び出し方

WordPress専用関数の活用

  • the_title()関数:タイトルを表示(WordPress専用関数)
  • the_content()関数:本文を表示(WordPress専用関数)
  • 管理画面のコンテンツと表示の連携を実現

ホームページ表示設定

  • 「最新の投稿」「固定ページ」の違い
  • 固定ページ設定の推奨理由
  • トップページに表示するコンテンツの選択方法

現在の到達点

達成できたこと

  • オリジナルテーマで固定ページの内容を表示
  • 管理画面での編集内容がサイトに反映される仕組みを理解
  • WordPressの基本的な動作原理を体験

現在のindex.phpの状態

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>マイ・オリジナルテーマ</title>
</head>
<body>
    <header>
        <h1><?php the_title(); ?></h1>
    </header>
    
    <main>
        <?php the_content(); ?>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

次回予告:page.phpとfront-page.phpの役割を理解しよう

今回はindex.phpファイルだけを使用しましたが、WordPressにはもっと柔軟で効率的なテンプレートシステムがあります。

次回は、より専門的なテンプレートファイルについて学習します!

次回の内容予定

  • テンプレート階層の基本概念
  • page.phpファイルの役割と作成
  • front-page.phpファイルの特別な機能
  • トップページと他のページで異なるデザインを適用する方法
  • より効率的なテーマ構造の構築

なぜこれらのファイルが重要なのか?

現在は全ページが同じデザインですが、実際のWebサイトでは

  • トップページは特別なデザインにしたい
  • 固定ページには専用のレイアウトを使いたい
  • ページの種類に応じて表示を変えたい

WordPressのテンプレート階層を理解することで、これらのニーズに対応できるようになります。

準備していただくこと

  • 今回修正したsample-themeをそのまま保持
  • 次回の学習で新しいファイルを追加していきます

お疲れさまでした!

WordPressの関数を使ってコンテンツを表示できるようになりました。管理画面での編集内容がサイトに反映される仕組みが理解できたのではないでしょうか。次回のテンプレート階層も楽しみにしていてください!

この投稿をシェアする

コメントを残す

CAPTCHA



オリジナルテーマを作ってみよう! – WordPressテーマの仕組みを理解する

オリジナルテーマを作ってみよう! – WordPressテーマの仕組みを理解する  BASICS

WordPressのテーマとは何かを、実際に最小限のオリジナルテーマを作成しながら学びます。ファイル構造やテーマの役割、wp-contentやthemesフォルダの意味、style.cssとindex.phpの基本など、WordPressの仕組みを根本から理解する第一歩に最適な内容です。

  • 2025/07/01
  • 0comments
  • 411views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。