WordPressプログラミング入門|初心者が独自テーマ・機能追加を作れるようになる基礎知識
はじめに
WordPressは、ブログや企業サイト、ポートフォリオサイト、メディアサイトなど、さまざまなWebサイトを作れるCMSです。管理画面から記事を投稿したり、テーマを変更したり、プラグインを追加したりできるため、プログラミングの知識がなくてもサイト運営を始められます。
しかし、「デザインをもっと自由に変えたい」「独自テーマを作りたい」「サイトにオリジナル機能を追加したい」と考えるようになると、WordPressプログラミングの知識が必要になります。
WordPressプログラミングを学ぶと、既存テーマのカスタマイズだけでなく、自分だけのテーマ作成、カスタム投稿タイプの追加、ショートコード作成、管理画面の調整、簡単なプラグイン開発まで対応できるようになります。
この記事では、WordPressプログラミングをこれから学ぶ初心者向けに、必要な基礎知識、WordPressの仕組み、独自テーマ作成の流れ、機能追加の方法、学習ロードマップまでわかりやすく解説します。
1. WordPressプログラミングとは?初心者ができるようになること
WordPressプログラミングとは、HTML、CSS、PHP、JavaScriptなどのコードを使って、WordPressサイトの見た目や機能を自由にカスタマイズすることです。
WordPressは管理画面だけでも使えますが、コードを理解すると「用意された機能を使う側」から「必要な機能を作る側」へステップアップできます。
1-1. WordPressはプログラミングなしでも使えるが、コードを書くと自由度が上がる
WordPressは、テーマやプラグインを使えばプログラミングなしでもサイトを作れます。たとえば、無料テーマをインストールし、ブロックエディターでページを作り、お問い合わせフォーム用プラグインを入れれば、基本的なWebサイトは完成します。
ただし、ノーコードでできる範囲には限界があります。
「投稿一覧の表示形式を細かく変えたい」「特定のカテゴリーだけ別デザインにしたい」「管理画面に独自項目を追加したい」「不要な機能を削除して軽量化したい」といった要望は、テーマやプラグインの設定だけでは対応しにくい場合があります。
そこで必要になるのがWordPressプログラミングです。コードを書けるようになると、既存テーマの範囲に縛られず、自分の目的に合わせてサイトを設計できます。
1-2. WordPressプログラミングで作れるもの
WordPressプログラミングを学ぶと、次のようなものを作れるようになります。
独自デザインのブログテーマ、企業サイト用テーマ、ランディングページ、ポートフォリオサイト、実績一覧ページ、ニュース一覧ページ、カスタム投稿タイプ、ショートコード、独自ウィジェット、管理画面のカスタマイズ、簡単なオリジナルプラグインなどです。
たとえば、企業サイトで「お知らせ」「実績」「スタッフ紹介」を通常の投稿とは別に管理したい場合、カスタム投稿タイプを使えば管理しやすくなります。
また、記事内に何度も使うボタンや注意書きがある場合、ショートコードを作っておくと、短い記述だけで同じパーツを呼び出せます。
このように、WordPressプログラミングは「見た目を整える」だけでなく、「運用しやすいサイトを作る」ためにも役立ちます。
1-3. テーマ編集・独自テーマ作成・機能追加・プラグイン開発の違い
WordPressプログラミングには、いくつかの段階があります。
テーマ編集は、既存テーマのデザインやレイアウトを調整する作業です。CSSを追加したり、テンプレートファイルを一部変更したりします。初心者が最初に取り組みやすい分野です。
独自テーマ作成は、HTML、CSS、PHPを使って、自分でテーマを一から作る作業です。WordPressのテンプレート階層やループ処理を理解する必要がありますが、自由度が高く、実務でも役立ちます。
機能追加は、functions.phpや専用プラグインを使って、WordPressに新しい機能を加える作業です。メニュー対応、アイキャッチ画像対応、ショートコード作成、カスタム投稿タイプ追加などが代表例です。
プラグイン開発は、テーマに依存しない独立した機能を作る作業です。複数サイトで使い回したい機能や、テーマを変更しても残したい機能は、プラグインとして作るのが適しています。
1-4. 初心者がまず目指すべきゴール
初心者が最初から高度なプラグイン開発を目指す必要はありません。
まずは、HTMLとCSSで簡単な静的ページを作れるようになり、その後PHPの基本を学び、WordPressのテンプレートタグやループ処理を理解するのがおすすめです。
最初のゴールとしては、次の状態を目指すとよいでしょう。
既存テーマのCSSを安全にカスタマイズできる、子テーマを作れる、functions.phpに簡単なコードを追加できる、投稿一覧と投稿詳細ページを含むシンプルな独自テーマを作れる、カスタム投稿タイプやショートコードの基本がわかる。
ここまでできるようになると、WordPressプログラミングの基礎力が身につき、実践的なサイト制作にも対応しやすくなります。
2. WordPressプログラミングに必要な基礎知識
WordPressプログラミングでは、複数の技術を組み合わせて使います。すべてを完璧に覚える必要はありませんが、それぞれの役割を理解しておくことが大切です。
2-1. HTML:ページ構造を作るための基礎
HTMLは、Webページの構造を作るための言語です。
見出し、段落、画像、リンク、リスト、フォームなど、ページ内の要素を定義します。WordPressテーマを作るときも、最終的にブラウザへ出力されるのはHTMLです。
たとえば、記事タイトルは次のように表示されます。
HTML<h1>記事タイトル</h1>
<p>本文がここに入ります。</p>
WordPressでは、PHPを使って投稿タイトルや本文を取得し、それをHTMLの中に出力します。そのため、HTMLの基本構造を理解していないと、テンプレートファイルを正しく編集できません。
初心者はまず、h1〜h6、p、a、img、ul、li、div、section、header、footer、articleなどの基本タグを覚えるとよいでしょう。
2-2. CSS:デザインやレイアウトを調整する基礎
CSSは、HTMLで作った構造にデザインを適用するための言語です。
文字の色、背景色、余白、横幅、レイアウト、レスポンシブ対応などを指定します。WordPressテーマの見た目を調整するうえで、CSSは欠かせません。
たとえば、記事タイトルの文字サイズを変更する場合は、次のように書きます。
CSS.post-title {
font-size: 32px;
margin-bottom: 20px;
}
WordPressでは、テーマ内のstyle.cssや追加CSS、子テーマのCSSを使ってデザインを調整します。
初心者は、セレクタ、プロパティ、クラス、ID、余白、Flexbox、Grid、メディアクエリを学んでおくと、テーマカスタマイズがしやすくなります。
2-3. PHP:WordPressの動きを理解するための必須言語
PHPは、WordPress本体やテーマ、プラグインで使われているサーバーサイドのプログラミング言語です。
WordPressプログラミングでは、PHPの理解が非常に重要です。投稿データを取得したり、条件分岐で表示を変えたり、関数を使って機能を追加したりする場面でPHPを使います。
たとえば、WordPressで投稿タイトルを表示するには、次のようなテンプレートタグを使います。
PHP<?php the_title(); ?>
投稿本文を表示する場合は、次のように書きます。
PHP<?php the_content(); ?>
PHPを学ぶときは、変数、配列、if文、foreach文、関数、include、return、文字列の扱いなどを重点的に理解しましょう。
WordPressでは独自の関数が多く用意されていますが、基本はPHPです。PHPの基礎がわかると、WordPressのコードも読みやすくなります。
2-4. JavaScript:動きのあるUIやブロックエディター対応に役立つ言語
JavaScriptは、ブラウザ上で動きをつけるためのプログラミング言語です。
メニューの開閉、スライダー、タブ切り替え、モーダルウィンドウ、入力フォームの動的な処理などに使われます。
WordPressでは、フロントエンドの動きだけでなく、ブロックエディターのカスタマイズでもJavaScriptが重要です。特にブロック開発に進む場合は、Reactの知識が必要になることもあります。
初心者の段階では、まず基本的なJavaScriptで十分です。クリックイベント、クラスの付け外し、DOM操作、外部ファイルの読み込み方を理解しておきましょう。
2-5. MySQL・データベースの基本
WordPressの投稿、固定ページ、コメント、ユーザー情報、設定情報などは、MySQLなどのデータベースに保存されています。
通常のWordPress制作では、SQLを直接書く機会は多くありません。多くの場合、WordPressの関数を使ってデータを取得・保存できます。
ただし、データベースの基本を理解しておくと、WordPressの仕組みがわかりやすくなります。
たとえば、投稿データは主にwp_postsテーブル、投稿に関する追加情報はwp_postmetaテーブル、カテゴリーやタグはwp_terms関連のテーブルに保存されます。
初心者は、WordPressは「テンプレートファイルがデータベースから情報を取り出してページを表示している」というイメージを持つことが大切です。
2-6. WordPress独自の関数・テンプレートタグ
WordPressには、テーマ制作や機能追加に使える独自の関数が多数用意されています。
代表的なテンプレートタグには、次のようなものがあります。
PHP<?php bloginfo('name'); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php the_permalink(); ?>
<?php the_post_thumbnail(); ?>
<?php wp_nav_menu(); ?>
これらの関数を使うことで、サイト名、投稿タイトル、本文、リンク、アイキャッチ画像、メニューなどを簡単に表示できます。
WordPressプログラミングでは、PHPそのものの文法に加えて、WordPress独自の関数を覚えていくことが重要です。
3. WordPressの仕組みを理解しよう
WordPressプログラミングを効率よく学ぶには、WordPressがどのような仕組みで動いているかを理解する必要があります。
3-1. WordPress本体・テーマ・プラグインの関係
WordPressは、大きく分けると「WordPress本体」「テーマ」「プラグイン」の3つで構成されています。
WordPress本体は、管理画面、投稿機能、ユーザー管理、データベース操作など、CMSとしての基本機能を担当します。
テーマは、サイトの見た目や表示構造を担当します。どのテンプレートを使って投稿を表示するか、ヘッダーやフッターをどう見せるかなどを決めます。
プラグインは、WordPressに機能を追加するための仕組みです。お問い合わせフォーム、SEO設定、セキュリティ対策、キャッシュ機能、会員機能などを追加できます。
WordPressプログラミングでは、この3つの役割を分けて考えることが重要です。デザインに関する処理はテーマ、サイト全体で使う機能はプラグインに分けると、保守しやすい構成になります。
3-2. 投稿・固定ページ・カスタム投稿タイプの違い
WordPressには、コンテンツを管理するための複数の種類があります。
投稿は、ブログ記事やお知らせなど、時系列で更新されるコンテンツに向いています。カテゴリーやタグで分類できるのが特徴です。
固定ページは、会社概要、サービス紹介、お問い合わせ、プライバシーポリシーなど、あまり時系列に依存しないページに向いています。
カスタム投稿タイプは、通常の投稿や固定ページとは別に、独自のコンテンツ管理を作る仕組みです。実績、商品、スタッフ、セミナー、よくある質問などを管理するときに便利です。
たとえば、企業サイトで「実績一覧」を作る場合、通常の投稿で管理するよりも「実績」というカスタム投稿タイプを作ったほうが、管理画面も見やすくなります。
3-3. テンプレート階層の基本
テンプレート階層とは、WordPressがページを表示するときに、どのテンプレートファイルを使うかを決めるルールです。
たとえば、トップページ、投稿一覧、投稿詳細、固定ページ、カテゴリー一覧、検索結果ページでは、それぞれ読み込まれるテンプレートが異なります。
代表的なテンプレートファイルには、次のようなものがあります。
index.php
front-page.php
home.php
single.php
page.php
archive.php
category.php
search.php
404.php
たとえば、投稿詳細ページではsingle.phpが優先的に使われます。固定ページではpage.phpが使われます。該当するテンプレートがない場合は、最終的にindex.phpが使われます。
独自テーマを作るときは、最初にindex.phpだけでも動きますが、ページごとに適切なテンプレートを用意すると、柔軟なサイト制作ができます。
3-4. ループ処理とは何か
WordPressのループ処理とは、投稿データを取得して表示するための基本的な仕組みです。
投稿一覧ページでは、複数の記事を順番に表示します。投稿詳細ページでは、対象の記事を1件表示します。このときに使われるのがWordPressループです。
基本形は次のようになります。
PHP<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; ?>
<?php endif; ?>
have_posts()で投稿があるかを確認し、while文で投稿を1件ずつ処理し、the_post()で投稿データをセットします。
WordPressプログラミングでは、このループ処理を理解することが非常に重要です。投稿一覧、カテゴリー一覧、検索結果、カスタム投稿一覧など、多くの場面で使います。
3-5. functions.phpの役割
functions.phpは、テーマに機能を追加するためのファイルです。
たとえば、アイキャッチ画像を有効化したり、ナビゲーションメニューを登録したり、CSSやJavaScriptを読み込んだり、ショートコードを追加したりできます。
例として、アイキャッチ画像を有効化するコードは次のようになります。
PHP<?php
add_theme_support('post-thumbnails');
メニューを登録する場合は、次のように書きます。
PHP<?php
register_nav_menus(array(
'global-menu' => 'グローバルメニュー'
));
functions.phpは便利ですが、書き間違えるとサイト全体にエラーが出ることがあります。編集前には必ずバックアップを取り、ローカル環境で確認してから本番に反映するのが安全です。
3-6. フック・アクション・フィルターの基本
WordPressには、フックという仕組みがあります。フックを使うと、WordPress本体やテーマ、プラグインの特定のタイミングに処理を追加できます。
フックには大きく分けて、アクションフックとフィルターフックがあります。
アクションフックは、特定のタイミングで処理を実行するための仕組みです。たとえば、CSSやJavaScriptを読み込むときにはwp_enqueue_scriptsというアクションフックを使います。
PHP<?php
function my_theme_scripts() {
wp_enqueue_style('main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
フィルターフックは、値を加工して返すための仕組みです。たとえば、投稿本文の出力内容やタイトルの表示内容を変更したい場合に使います。
フックを理解すると、WordPress本体を直接編集せずに、安全に機能追加やカスタマイズができるようになります。
4. WordPressプログラミングを始める準備
WordPressプログラミングを始める前に、開発しやすく安全な環境を整えましょう。本番サイトを直接編集すると、エラーでサイトが表示されなくなる危険があります。
4-1. ローカル開発環境を用意する
ローカル開発環境とは、自分のパソコン上でWordPressを動かす環境のことです。
ローカル環境を使えば、本番サイトに影響を与えずにテーマ編集や機能追加を試せます。エラーが起きても公開中のサイトには影響しないため、初心者ほどローカル環境で練習することが大切です。
代表的なローカル開発環境には、Local、XAMPP、MAMP、Dockerなどがあります。
初心者には、設定が比較的簡単なLocalのようなツールが使いやすいでしょう。PHPやMySQLの細かい設定に慣れてきたら、Dockerを使った開発環境にも挑戦できます。
4-2. テスト用WordPressをインストールする
ローカル環境を用意したら、テスト用のWordPressをインストールします。
テスト用サイトでは、本番では試しにくいテーマ編集、プラグイン導入、functions.phpの変更、独自テーマ作成などを自由に試せます。
学習用のWordPressでは、サンプル記事、カテゴリー、固定ページ、メニュー、アイキャッチ画像などをあらかじめ作っておくと、テーマ制作の練習がしやすくなります。
たとえば、ブログテーマを作るなら、10件程度の記事、複数のカテゴリー、固定ページを用意しておくと、一覧ページや詳細ページの表示確認ができます。
4-3. コードエディタを準備する
WordPressプログラミングでは、コードエディタを使ってファイルを編集します。
代表的なエディタには、Visual Studio Code、PhpStorm、Sublime Textなどがあります。初心者には、無料で拡張機能が豊富なVisual Studio Codeが使いやすいです。
コードエディタを使うと、入力補完、構文チェック、ファイル検索、コード整形などができるため、作業効率が上がります。
PHP、HTML、CSS、JavaScriptに対応した拡張機能を入れておくと、コードの書き間違いにも気づきやすくなります。
4-4. 子テーマとバックアップの重要性
既存テーマをカスタマイズする場合は、親テーマを直接編集せず、子テーマを使うのが基本です。
親テーマを直接編集すると、テーマ更新時に変更内容が上書きされて消えてしまう可能性があります。子テーマを使えば、親テーマの機能を引き継ぎながら、安全にカスタマイズできます。
また、コードを編集する前には必ずバックアップを取りましょう。特に本番サイトでは、ファイルとデータベースの両方をバックアップしておくことが重要です。
WordPressプログラミングでは、小さな変更でもエラーにつながることがあります。バックアップがあれば、問題が起きても元に戻せます。
4-5. エラー表示・デバッグ設定の基本
WordPressでプログラミングをするなら、デバッグ設定も理解しておきましょう。
開発環境では、wp-config.phpに次のような設定を追加すると、エラーの確認がしやすくなります。
PHPdefine('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
WP_DEBUGをtrueにすると、WordPressのデバッグモードが有効になります。WP_DEBUG_LOGをtrueにすると、エラー内容がログファイルに記録されます。
ただし、本番サイトでエラーを画面に表示するのは避けましょう。サイト訪問者にエラー内容が見えてしまうと、セキュリティ上のリスクになる場合があります。
5. 独自テーマ作成の基本ステップ
WordPressプログラミングを学ぶうえで、独自テーマ作成は非常に良い練習になります。WordPressのテンプレート階層、ループ処理、テンプレートタグ、functions.phpの使い方をまとめて学べるからです。
5-1. 独自テーマに必要な最低限のファイル
WordPressの独自テーマを作るために最低限必要なファイルは、style.cssとindex.phpです。
テーマフォルダの構成は、最初は次のようにシンプルで構いません。
my-theme/
style.css
index.php
style.cssにはテーマ情報を記述します。index.phpは、ページを表示するための基本テンプレートです。
この2つのファイルがあれば、WordPressの管理画面からテーマとして認識されます。
5-2. style.cssとindex.phpを作成する
style.cssの先頭には、テーマ名などの情報を書きます。
CSS/*
Theme Name: My Theme
Author: Your Name
Version: 1.0
*/
index.phpには、まず基本的なHTMLとWordPressループを書きます。
PHP<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
wp_head()とwp_footer()は、WordPressテーマでは重要な関数です。プラグインやWordPress本体が必要なコードを出力するため、基本的に必ず入れます。
5-3. header.php・footer.php・sidebar.phpに分割する
テーマ制作では、共通部分をテンプレートファイルに分割します。
ヘッダー部分はheader.php、フッター部分はfooter.php、サイドバー部分はsidebar.phpに分けるのが一般的です。
index.phpでは、次のように呼び出します。
PHP<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
共通部分を分割しておくと、複数ページで同じヘッダーやフッターを使い回せます。保守性も高くなり、修正作業も楽になります。
5-4. 投稿一覧ページを作る
投稿一覧ページでは、複数の記事を表示します。home.phpやarchive.phpを作成すると、投稿一覧用のテンプレートを分けられます。
基本的な投稿一覧のコードは次のようになります。
PHP<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h2>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>投稿がありません。</p>
<?php endif; ?>
一覧ページでは、the_content()ではなくthe_excerpt()を使うと、本文の抜粋を表示できます。
また、the_permalink()を使うことで、各投稿の詳細ページへのリンクを出力できます。
5-5. 投稿詳細ページを作る
投稿詳細ページには、single.phpを使います。
single.phpでは、投稿タイトル、投稿日、カテゴリー、アイキャッチ画像、本文などを表示します。
PHP<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<p><?php echo get_the_date(); ?></p>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('large'); ?>
<?php endif; ?>
<div>
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
投稿詳細ページでは、記事本文をしっかり表示するためにthe_content()を使います。関連記事や前後記事リンクを追加すると、ブログとしての使いやすさも向上します。
5-6. 固定ページ用テンプレートを作る
固定ページにはpage.phpを使います。
会社概要、お問い合わせ、サービス紹介など、固定ページ用の表示を整えたい場合に作成します。
PHP<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
特定の固定ページだけデザインを変えたい場合は、カスタムページテンプレートを作ることもできます。
PHP<?php
/*
Template Name: LP用テンプレート
*/
このように書いたPHPファイルをテーマ内に作成すると、固定ページ編集画面からテンプレートとして選択できます。
5-7. CSS・JavaScriptを正しく読み込む
WordPressテーマでは、CSSやJavaScriptを直接HTMLに書き込むのではなく、functions.phpでwp_enqueue_style()やwp_enqueue_script()を使って読み込むのが基本です。
PHP<?php
function my_theme_enqueue_files() {
wp_enqueue_style(
'my-theme-style',
get_stylesheet_uri()
);
wp_enqueue_script(
'my-theme-script',
get_template_directory_uri() . '/js/main.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_files');
この方法で読み込むと、WordPressやプラグインとの競合を避けやすくなります。
CSSやJavaScriptが反映されない場合は、ファイルパス、キャッシュ、読み込み順、関数名の書き間違いを確認しましょう。
5-8. アイキャッチ画像・メニュー・ウィジェットに対応する
テーマを実用的にするには、WordPressの基本機能に対応させる必要があります。
アイキャッチ画像を有効にするには、functions.phpに次のように書きます。
PHP<?php
add_theme_support('post-thumbnails');
メニューを登録するには、次のように書きます。
PHP<?php
function my_theme_setup() {
register_nav_menus(array(
'global-menu' => 'グローバルメニュー'
));
}
add_action('after_setup_theme', 'my_theme_setup');
テンプレート側では、次のようにメニューを表示します。
PHP<?php
wp_nav_menu(array(
'theme_location' => 'global-menu'
));
?>
ウィジェットエリアを追加する場合は、register_sidebar()を使います。
これらに対応しておくと、管理画面からサイトの内容を調整しやすいテーマになります。
6. WordPressに機能追加する基本
WordPressプログラミングでは、テーマの見た目を作るだけでなく、機能追加も重要です。functions.phpやプラグインを使えば、サイトに独自の機能を加えられます。
6-1. functions.phpでできる代表的なカスタマイズ
functions.phpでは、さまざまなカスタマイズができます。
代表的な例は、アイキャッチ画像の有効化、メニュー登録、CSS・JavaScriptの読み込み、ショートコード作成、カスタム投稿タイプ追加、管理画面の調整、不要な機能の削除などです。
ただし、functions.phpはテーマに紐づくファイルです。テーマを変更すると、functions.phpに書いた機能も使えなくなります。
そのため、デザインに関係する機能はfunctions.php、テーマを変えても残したい機能はプラグインとして作る、という考え方が大切です。
6-2. ショートコードを作成する
ショートコードとは、短い記述で特定のHTMLや機能を呼び出せる仕組みです。
たとえば、記事内に共通のボタンを表示したい場合、次のようなショートコードを作れます。
PHP<?php
function my_button_shortcode($atts) {
$atts = shortcode_atts(array(
'url' => '#',
'text' => '詳しく見る'
), $atts);
return '<a class="button" href="' . esc_url($atts['url']) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('my_button', 'my_button_shortcode');
投稿本文では、次のように使えます。
[my_button url="https://example.com" text="サービスを見る"]
ショートコードを使うと、よく使うパーツを効率よく管理できます。
6-3. カスタム投稿タイプを追加する
カスタム投稿タイプを使うと、通常の投稿とは別に独自のコンテンツを管理できます。
たとえば「実績」という投稿タイプを追加するコードは、次のようになります。
PHP<?php
function create_works_post_type() {
register_post_type('works', array(
'labels' => array(
'name' => '実績',
'singular_name' => '実績'
),
'public' => true,
'has_archive' => true,
'menu_position' => 5,
'supports' => array('title', 'editor', 'thumbnail')
));
}
add_action('init', 'create_works_post_type');
このコードを追加すると、管理画面に「実績」というメニューが表示されます。
企業サイトやポートフォリオサイトでは、カスタム投稿タイプを使うことで、情報を整理しやすくなります。
6-4. カスタムフィールドを活用する
カスタムフィールドは、投稿や固定ページに追加情報を持たせる仕組みです。
たとえば、実績ページに「制作期間」「担当範囲」「クライアント名」「URL」などの情報を追加できます。
WordPress標準のカスタムフィールドを使うこともできますが、初心者にはカスタムフィールド用プラグインを活用する方法もわかりやすいです。
テンプレート側では、get_post_meta()などを使って値を取得できます。
PHP<?php
$client = get_post_meta(get_the_ID(), 'client_name', true);
if ($client) {
echo '<p>クライアント:' . esc_html($client) . '</p>';
}
?>
カスタム投稿タイプとカスタムフィールドを組み合わせると、WordPressを単なるブログではなく、柔軟なCMSとして活用できます。
6-5. お問い合わせフォームや会員機能を追加する考え方
お問い合わせフォームや会員機能は、WordPressサイトでよく使われる機能です。
ただし、これらはセキュリティや個人情報の取り扱いが関係するため、初心者が最初から完全自作するのはおすすめしません。
お問い合わせフォームであれば、信頼できるプラグインを使い、必要に応じてデザインや表示位置をカスタマイズする方法が現実的です。
会員機能も、ログイン、権限管理、パスワード管理、メール通知、不正アクセス対策などを考慮する必要があります。まずは既存プラグインを活用し、仕組みを理解してから必要な部分だけカスタマイズするのが安全です。
6-6. プラグインを使うべきケースと自作すべきケース
WordPressプログラミングでは、何でも自作すればよいわけではありません。
プラグインを使うべきケースは、セキュリティや決済、フォーム、SEO、キャッシュ、バックアップなど、専門性が高く、信頼性が求められる機能です。
一方で、自作に向いているのは、サイト独自の表示パーツ、簡単なショートコード、管理画面の軽微な調整、独自のカスタム投稿タイプ、テーマ固有の機能などです。
重要なのは、保守しやすさです。プラグインを入れすぎるとサイトが重くなったり、競合が起きたりする場合があります。しかし、複雑な機能を無理に自作すると、セキュリティリスクや不具合の原因になります。
目的に応じて、プラグインと自作を使い分けましょう。
7. 初心者がつまずきやすいポイントと対策
WordPressプログラミングでは、初心者がつまずきやすいポイントがいくつかあります。原因を知っておくと、エラーが出たときに落ち着いて対処できます。
7-1. 画面が真っ白になる原因
WordPressで画面が真っ白になる現象は、PHPエラーが原因で起きることが多いです。
特にfunctions.phpやテンプレートファイルに文法ミスがあると、サイト全体が表示されなくなる場合があります。
よくある原因は、セミコロンの付け忘れ、括弧の閉じ忘れ、関数名の書き間違い、PHPタグのミス、存在しない関数の呼び出しなどです。
対策としては、デバッグモードを有効にし、エラーログを確認しましょう。また、本番サイトを直接編集せず、ローカル環境で確認してから反映することが重要です。
7-2. functions.phpの書き間違いによるエラー
functions.phpは便利ですが、少しの書き間違いで大きなエラーにつながります。
たとえば、次のようにセミコロンが抜けているとエラーになります。
PHP<?php
add_theme_support('post-thumbnails')
正しくは次のように書きます。
PHP<?php
add_theme_support('post-thumbnails');
また、同じ関数名を複数回定義するとエラーになることがあります。関数名は他と重複しないように、テーマ名や接頭辞を付けると安全です。
PHPfunction mytheme_setup() {
add_theme_support('post-thumbnails');
}
functions.phpを編集するときは、一度に大量のコードを追加せず、少しずつ追加して動作確認するのがおすすめです。
7-3. CSSやJavaScriptが反映されない原因
CSSやJavaScriptが反映されない場合、主な原因はファイルパスの間違い、キャッシュ、読み込み順、ブラウザ側の保存データなどです。
WordPressでは、CSSやJavaScriptをfunctions.phpで正しく読み込む必要があります。
また、ブラウザキャッシュやキャッシュ系プラグインが原因で、古いCSSが表示され続けることもあります。その場合は、キャッシュを削除して再読み込みしましょう。
開発中は、ファイルの更新を反映しやすくするために、バージョン番号を変更する方法もあります。
PHPwp_enqueue_style(
'main-style',
get_template_directory_uri() . '/css/style.css',
array(),
'1.0.1'
);
7-4. テンプレートが思った通りに読み込まれない原因
テンプレートが想定通りに読み込まれない場合は、WordPressのテンプレート階層を確認しましょう。
たとえば、投稿詳細ページを変更したいのにindex.phpを編集している場合、single.phpが存在するとsingle.phpが優先されます。
固定ページならpage.php、カテゴリー一覧ならcategory.php、カスタム投稿タイプの詳細ならsingle-{post_type}.phpが使われる場合があります。
どのテンプレートが読み込まれているかを確認するには、テンプレート内に一時的なコメントやテキストを入れて確認する方法もあります。
ただし、本番環境では不要な表示を残さないように注意しましょう。
7-5. プラグインやテーマ更新でカスタマイズが消える原因
親テーマやプラグイン本体を直接編集すると、更新時に変更内容が上書きされて消えることがあります。
テーマをカスタマイズする場合は、子テーマを使いましょう。機能を追加する場合は、必要に応じて自作プラグイン化することも検討します。
また、プラグインのファイルを直接編集するのは基本的に避けるべきです。どうしても表示を変えたい場合は、フックやテンプレート上書き機能が用意されていないか確認しましょう。
WordPressプログラミングでは、更新に強いカスタマイズ方法を選ぶことが大切です。
7-6. セキュリティ上やってはいけない書き方
WordPressプログラミングでは、セキュリティを意識したコードを書く必要があります。
特に、ユーザーが入力した値をそのまま表示したり、URLやHTMLを無条件で出力したりするのは危険です。
出力時には、esc_html()、esc_url()、esc_attr()などを使ってエスケープ処理を行いましょう。
PHPecho esc_html($title);
echo esc_url($url);
echo esc_attr($value);
フォーム処理では、nonceを使った検証や、権限チェックも重要です。
また、WordPress本体、テーマ、プラグインを古いまま放置することもセキュリティリスクになります。コードの書き方だけでなく、運用面の対策も意識しましょう。
8. WordPressプログラミングの学習ロードマップ
WordPressプログラミングは、順番を間違えると難しく感じやすい分野です。初心者は、基礎から段階的に学ぶことが大切です。
8-1. まずHTML・CSSの基礎を学ぶ
最初に学ぶべきなのは、HTMLとCSSです。
WordPressはPHPで動いていますが、最終的に表示されるページはHTMLとCSSで作られています。HTMLとCSSがわからないままWordPressテーマを編集しようとすると、どこを変更すればよいのか判断しにくくなります。
まずは、簡単な静的サイトを作れるレベルを目指しましょう。
トップページ、見出し、画像、ボタン、カード型レイアウト、ヘッダー、フッター、レスポンシブ対応まで作れるようになると、WordPressテーマ制作に入りやすくなります。
8-2. PHPの基本文法を学ぶ
次に、PHPの基本文法を学びます。
WordPressプログラミングでは、PHPを使って投稿データを取得したり、条件によって表示を切り替えたりします。
初心者が覚えるべきPHPの基本は、変数、配列、if文、while文、foreach文、関数、文字列結合、include、returnなどです。
最初から難しいオブジェクト指向まで完璧に理解する必要はありません。まずは、WordPressテーマ内に書かれているPHPコードを読める状態を目指しましょう。
8-3. WordPressのテンプレートタグを覚える
PHPの基本がわかってきたら、WordPressのテンプレートタグを覚えます。
the_title()、the_content()、the_permalink()、get_header()、get_footer()、wp_nav_menu()、the_post_thumbnail()などは、テーマ制作で頻繁に使います。
すべてを暗記する必要はありません。よく使う関数から実際にコードを書きながら覚えるのがおすすめです。
テンプレートタグを使えるようになると、投稿タイトルや本文、画像、リンク、メニューなどを自由に表示できるようになります。
8-4. 既存テーマをカスタマイズして練習する
いきなり独自テーマを作るのが難しい場合は、既存テーマのカスタマイズから始めましょう。
子テーマを作成し、CSSを変更したり、テンプレートファイルを一部上書きしたりすると、WordPressの構造を実践的に学べます。
ただし、親テーマを直接編集しないことが重要です。必ず子テーマを使い、変更内容を安全に管理しましょう。
既存テーマのコードを読むことも勉強になります。どのテンプレートファイルで何を表示しているのかを確認すると、独自テーマ作成のイメージがつかみやすくなります。
8-5. 簡単な独自テーマを作る
基礎が身についてきたら、簡単な独自テーマを作ってみましょう。
最初は、トップページ、投稿一覧、投稿詳細、固定ページだけのシンプルなテーマで十分です。
必要なファイルは、style.css、index.php、header.php、footer.php、single.php、page.php、functions.phpあたりから始めるとよいでしょう。
最初から完璧なデザインや高度な機能を目指す必要はありません。WordPressのテンプレート階層、ループ処理、CSS・JavaScriptの読み込み、アイキャッチ画像対応、メニュー表示を理解することが目的です。
8-6. functions.phpで機能追加を試す
独自テーマの基本ができたら、functions.phpで機能追加を試します。
アイキャッチ画像対応、メニュー登録、CSS・JavaScript読み込み、ショートコード作成、カスタム投稿タイプ追加などに挑戦してみましょう。
この段階では、「WordPressに機能を追加するにはフックを使う」という考え方を身につけることが大切です。
コードを追加するときは、一度に多くを書かず、1つずつ動作確認しながら進めましょう。
8-7. 小さなプラグイン作成に挑戦する
functions.phpでの機能追加に慣れたら、小さなプラグイン作成に挑戦してみましょう。
たとえば、独自ショートコードを追加するだけのプラグイン、管理画面に注意文を表示するプラグイン、カスタム投稿タイプを登録するプラグインなどが練習に向いています。
プラグイン化すると、テーマを変更しても機能を残せます。WordPressプログラミングを仕事や副業に活かしたい場合、プラグインの基本構造を理解しておくと対応できる範囲が広がります。
9. WordPressプログラミングで作れる実践例
WordPressプログラミングを学ぶと、実際にどのようなサイトや機能を作れるのでしょうか。ここでは、初心者が目標にしやすい実践例を紹介します。
9-1. オリジナルブログテーマ
最初の実践例としておすすめなのが、オリジナルブログテーマです。
ブログテーマでは、投稿一覧、投稿詳細、カテゴリー一覧、タグ一覧、検索結果、プロフィール欄、関連記事、前後記事リンクなどを作ります。
WordPressの基本機能を幅広く使うため、テーマ制作の練習に最適です。
デザインはシンプルで構いません。まずは、記事が読みやすく、スマートフォンでも見やすいテーマを目指しましょう。
9-2. 企業サイト用テーマ
企業サイト用テーマでは、トップページ、会社概要、サービス紹介、実績一覧、お知らせ、お問い合わせページなどを作ります。
企業サイトでは、固定ページとカスタム投稿タイプを組み合わせることが多いです。
たとえば、お知らせは通常の投稿、実績はカスタム投稿タイプ、会社概要やサービス紹介は固定ページで管理すると、運用しやすい構成になります。
WordPressプログラミングを仕事に活かしたい人は、企業サイト用テーマの制作に挑戦すると実務に近い経験を積めます。
9-3. ポートフォリオサイト
ポートフォリオサイトは、Web制作やデザイン、写真、イラスト、ライティングなどの実績を見せるためのサイトです。
WordPressでポートフォリオサイトを作る場合、カスタム投稿タイプで「制作実績」を管理すると便利です。
実績ごとに、タイトル、画像、説明文、担当範囲、制作期間、使用技術、URLなどを登録できるようにすると、見やすく管理しやすいサイトになります。
自分の学習成果を公開する場としても、ポートフォリオサイトはおすすめです。
9-4. カスタム投稿を使った実績一覧
カスタム投稿タイプを使えば、実績一覧、商品一覧、スタッフ紹介、セミナー情報、FAQなどを管理できます。
たとえば、実績一覧を作る場合、archive-works.phpで一覧ページを作り、single-works.phpで詳細ページを作ります。
archive-works.php
single-works.php
このようにファイルを分けることで、通常の投稿とは異なるデザインや構成にできます。
カスタム投稿タイプは、WordPressを業務用CMSとして使うときに非常に重要な機能です。
9-5. ショートコードを使ったパーツ管理
ショートコードを使うと、記事や固定ページ内で共通パーツを簡単に呼び出せます。
たとえば、ボタン、注意ボックス、料金表示、CTA、関連記事リンクなどをショートコード化できます。
毎回HTMLを手入力する必要がなくなるため、更新作業が楽になります。また、デザインを変更したい場合も、ショートコードの出力部分を修正すればまとめて反映できます。
運用者がコードを書かなくてもパーツを使えるようになるため、クライアントワークでも役立つ考え方です。
9-6. 管理画面を使いやすくするカスタマイズ
WordPressプログラミングでは、表側のデザインだけでなく、管理画面の使いやすさも改善できます。
たとえば、不要なメニューを非表示にする、投稿一覧にカスタムフィールドの値を表示する、管理画面に説明文を追加する、権限ごとに表示内容を変える、といったカスタマイズが可能です。
管理画面を使いやすくすると、サイト運営者が迷わず更新できるようになります。
特に企業サイトやクライアント向けサイトでは、「作って終わり」ではなく「運用しやすい状態にする」ことが重要です。
10. WordPressプログラミングを学ぶときの注意点
WordPressプログラミングは便利ですが、間違った方法でカスタマイズすると、エラーやセキュリティ問題、保守性の低下につながります。
10-1. WordPress本体のファイルを直接編集しない
WordPress本体のファイルは、絶対に直接編集しないようにしましょう。
wp-adminやwp-includes内のファイル、WordPress本体のコアファイルを変更すると、アップデート時に上書きされます。また、セキュリティや動作に重大な問題が起きる可能性もあります。
WordPress本体の動きを変更したい場合は、フックやプラグインを使うのが基本です。
本体を直接編集するのではなく、WordPressが用意している拡張の仕組みを使ってカスタマイズしましょう。
10-2. 親テーマを直接編集しない
既存テーマをカスタマイズする場合、親テーマを直接編集するのは避けましょう。
親テーマを直接編集すると、テーマ更新時に変更内容が消えてしまいます。
カスタマイズする場合は、子テーマを作成して編集します。子テーマを使えば、親テーマの機能を引き継ぎながら、自分の変更内容を安全に管理できます。
独自テーマを作る場合でも、今後の保守を考えて、どのファイルを変更したかがわかりやすい構成にしておくことが大切です。
10-3. コードを追加する前にバックアップを取る
コードを追加する前には、必ずバックアップを取りましょう。
特に本番サイトでは、ファイルだけでなくデータベースのバックアップも重要です。WordPressでは、投稿や設定情報の多くがデータベースに保存されているためです。
バックアップがあれば、エラーが起きても元の状態に戻せます。
初心者のうちは、少しのコード変更でも予期しないエラーが起きることがあります。バックアップ、ローカル環境、テスト環境を活用して、安全に作業しましょう。
10-4. セキュリティ対策を意識する
WordPressは多くのサイトで使われているため、攻撃対象になりやすいCMSでもあります。
WordPressプログラミングでは、セキュリティを意識したコードを書くことが欠かせません。
ユーザー入力をそのまま保存・表示しない、出力時にエスケープする、フォームではnonceを使う、権限チェックを行う、不要な情報を表示しない、といった基本を守りましょう。
また、WordPress本体、テーマ、プラグインを定期的に更新することも重要です。古いバージョンを使い続けると、脆弱性を突かれるリスクがあります。
10-5. 表示速度やSEOへの影響を考える
WordPressプログラミングでは、表示速度やSEOへの影響も考える必要があります。
不要なCSSやJavaScriptを大量に読み込むと、ページの表示が遅くなります。画像サイズが大きすぎる場合も、ユーザー体験やSEOに悪影響を与えます。
また、HTML構造が不自然だったり、見出しタグの使い方が乱れていたりすると、検索エンジンにもユーザーにもわかりにくいページになります。
WordPressで上位表示を目指すなら、デザインや機能だけでなく、軽量なコード、適切なHTML構造、内部リンク、モバイル対応、読みやすいレイアウトも意識しましょう。
10-6. 保守しやすいコードを書く
WordPressプログラミングでは、動けばよいという考え方だけでは不十分です。
あとから見ても理解しやすいコード、変更しやすい構成、役割が分かれたファイル設計を意識しましょう。
関数名には意味のある名前を付ける、同じ処理を何度も書かない、コメントを適度に入れる、テーマ固有の処理とプラグイン向きの処理を分ける、といった工夫が大切です。
保守しやすいコードは、将来の修正や機能追加を楽にします。自分だけでなく、他の人が見ても理解しやすいコードを書くことを意識しましょう。
11. WordPressプログラミングに関するよくある質問
ここでは、WordPressプログラミングを学び始める初心者からよくある質問に答えます。
11-1. WordPressにプログラミングは必須ですか?
WordPressを使うだけなら、プログラミングは必須ではありません。
テーマやプラグイン、ブロックエディターを使えば、コードを書かなくてもブログや簡単なWebサイトは作れます。
ただし、デザインを細かく調整したい、独自テーマを作りたい、オリジナル機能を追加したい、表示速度やSEOを改善したい場合は、プログラミングの知識があると大きな強みになります。
WordPressを自由に扱いたいなら、HTML、CSS、PHPの基礎は学んでおくべきです。
11-2. 初心者はPHPから学ぶべきですか?
WordPressはPHPで動いているため、PHPは重要です。
ただし、完全な初心者がいきなりPHPから始めるよりも、まずHTMLとCSSを学ぶほうが理解しやすいです。
おすすめの順番は、HTML、CSS、PHP、WordPressテンプレートタグ、JavaScriptの基本です。
HTMLとCSSでWebページの構造とデザインを理解したうえでPHPを学ぶと、WordPressテーマのコードが読みやすくなります。
11-3. 独自テーマ作成にはどれくらいの期間が必要ですか?
学習時間や経験によって異なりますが、HTMLとCSSの基礎がある人なら、シンプルな独自テーマは数週間から1〜2か月程度で作れるようになることが多いです。
ただし、実務レベルのテーマを作るには、レスポンシブ対応、SEO、表示速度、セキュリティ、管理画面の使いやすさ、保守性なども考える必要があります。
最初は完璧を目指さず、投稿一覧と投稿詳細が表示できる小さなテーマから始めるのがおすすめです。
11-4. プラグイン開発まで学ぶ必要はありますか?
初心者の段階で、いきなり本格的なプラグイン開発まで学ぶ必要はありません。
まずは、テーマカスタマイズ、独自テーマ作成、functions.phpでの機能追加を学ぶことが優先です。
ただし、テーマを変更しても残したい機能を作りたい場合や、複数サイトで使い回せる機能を作りたい場合は、プラグイン開発の基礎を学ぶ価値があります。
小さなショートコードプラグインやカスタム投稿タイプ登録プラグインから始めると、無理なく学習できます。
11-5. WordPressプログラミングは副業や仕事に活かせますか?
WordPressプログラミングは、副業や仕事に活かしやすいスキルです。
WordPressは多くの企業サイト、ブログ、メディアサイトで使われているため、テーマカスタマイズ、サイト修正、ページ追加、表示崩れ対応、機能追加などの需要があります。
特に、HTML、CSS、PHP、WordPressのテンプレート階層、カスタム投稿タイプ、カスタムフィールド、セキュリティの基本を理解していると、対応できる案件の幅が広がります。
ただし、仕事として受ける場合は、バックアップ、テスト環境、納品後の保守、セキュリティ対策まで責任を持って対応する必要があります。
まとめ
WordPressプログラミングを学ぶと、WordPressをただ使うだけでなく、自由にカスタマイズし、独自テーマやオリジナル機能を作れるようになります。
初心者はまず、HTMLとCSSでページ構造とデザインを学び、次にPHPの基本文法を理解しましょう。そのうえで、WordPressのテンプレートタグ、テンプレート階層、ループ処理、functions.php、フックの仕組みを学ぶと、テーマ制作や機能追加がしやすくなります。
独自テーマ作成では、style.cssとindex.phpから始め、header.php、footer.php、single.php、page.php、functions.phpへと少しずつ構成を広げていくのがおすすめです。
また、WordPressプログラミングでは、セキュリティ、バックアップ、子テーマ、表示速度、SEO、保守性も重要です。コードが動くだけでなく、安全で管理しやすいサイトを作る意識を持ちましょう。
最初は難しく感じるかもしれませんが、小さなカスタマイズを積み重ねれば、WordPressの仕組みは少しずつ理解できます。既存テーマの編集から始め、簡単な独自テーマ、functions.phpでの機能追加、小さなプラグイン作成へと進めていけば、WordPressプログラミングの実践力を着実に伸ばせます。

