📚

WordPressの自作HP作成の手引き

2024/05/12に公開

PHP

WordPress

tech

このページではWordPressで自作のHPを作成するための方法を紹介します。

WordPressとは

WordPressは、PHPで作成されたCMSで、ブログやWebサイトを自作することができるサービスです。

CMSとは...

Contents Management System（コンテンツマネジメントシステム）の略で、ブログページなどのテンプレートを設定し、データベースからテキストや画像データを取得、反映させることで一元的にWEBサイトを管理するシステムのことです。

CMSを使用することで全てのページにそれぞれWEBページのデータを作成し、保存する必要がなくなり、作成の手間が大幅に削減されます。

既存のテーマを使用することでノーコードでもサイトの作成ができるためプログラミングの知識がなくても取り組みやすく、多少のPHPの知識を用いれば自作のテーマを作成することでカスタマイズ性能の高いサイトの作成もできます。
またプラグインが多数公開されているため、自作で実装するには高度なプログラミングの知識が必要な機能も簡単に利用できることも大きな利点です。
WordPressは世界のCMSの6割を超えるシェア^[1]を誇っており、CMSでのサイト制作の際のファーストチョイスといえます。

ここではWordPressで自作テーマを作成するときの流れと必要な知識についてまとめます。

WordPressでWEBサイトを作成するには

WordPressでサイトを作成するには次の手順に従って作成する必要があります。

1. レンタルサーバーの契約

作成するWEBサイトの容量に合わせて適切なレンタルサーバーとプランを選択し、購入します。

2. ドメインの取得と設定

「〇〇〇.co.jp」や「〇〇〇.com」などのWEBサイトの住所にあたるドメインを設定します。
WEBサイトの信頼度の高くなる独自ドメインを取得することを推奨します。

ドメインを取得した後は、契約したレンタルサーバーにドメインを接続します。

3. SSL設定

SSLを設定することでURLがhttp://～ではなく、https://～と表示されます。

SSL化せずともWEBサイトの公開はできますが、きちんと設定することで通信が暗号化され、ユーザーに安心感を与えるとともにSEOにも有利に働くため近年はほとんど全てのサイトで採用されています。

4. WordPressのインストール

レンタルサーバーによっては簡単にWordPressのインストールができる機能が用意されていることもあります。
そういった機能がない場合は、WordPress公式サイトのダウンロードページからファイルをダウンロードし、FTPソフトを介してサーバーのフォルダにアップロードする必要があります。

5. WordPressテーマの作成

WordPressには既存のテーマが多数あり、ノーコードでカスタマイズできるものも多くあります。もちろんそれらを使用してWEBサイトを作成してもいいのですが、やはり細かいデザインや構成については痒い所に手が届かないことがあります。
そこでここではこのテーマを自作し、思い通りにテーマをカスタマイズする方法について説明します。

6. コンテンツの作成

テーマが作成できたら、WordPressの管理画面から投稿内容や固定ページなどのコンテンツを作成し、WEBサイトを完成させます。

自作テーマの作成

上記のWordPressでWEBサイトで作成する中で、自作テーマを作成する方法について説明します。

まずはローカルで次の構成のフォルダを作成します。

テーマファイルの構成

theme_file
 ├ index.php（必須）
 ├ style.css（必須、テーマとして認識させるためのもの）
 ├ functions.php（空でも可）
 ├ screenshot.png（管理画面からテーマを表示するときにこの画像がサムネイルになります）
 └ assets
    ├ img（画像ファイルの格納）
    ├ css（cssファイルの格納）
    └ js（jsファイルの格納）

作成したテーマはzipファイルにし、WordPressの管理画面「外観 > テーマ > 新しいテーマを追加 > テーマのアップロード」からアップロードします。

style.css

style.cssにはテーマヘッダーが必要になります。
テーマヘッダーを記述することでWordPressがこのフォルダはテーマフォルダだと認識し、適切に読み込むことができます。

style.css

/* 
Theme Name: テーマの名前
Author: Chamii
Description: このテーマはChamii専用のテーマです。
Vesion: 1.0
*/

テンプレート階層

Wordpressは現在のURLでどのテンプレートを表示するかの優先順位を決めています。下図では左から右に向かって優先度が高くなっています。
左から右に向かっていったとき、それ以上右に優先度の高いテンプレートがないとそのときのテンプレートが表示されます。
WordPressのテンプレート階層
テンプレート階層^[2]

主なベーステンプレート

WordPressにははじめからよく使用されるテンプレートが用意されており、これらのファイルを使用することでより共通化した一元化されたテーマの作成ができます。

- index.php

テーマを作る上で必須のテンプレートです。
テンプレート階層で表示するテンプレートがなかった場合、全てこのindex.phpが表示されます。

- page.php

固定ページのテンプレートファイルです。
固定ページのテンプレートファイルを複数作成したいはpage-〇〇.phpをテーマ内に作成します。こうすることで固定ページのスラッグが「〇〇」のもに自動的にpage-〇〇.phpが適用されるようになります。

固定ページと投稿の違い

投稿：ブログ記事の作成はここから行います
固定ページ：一つの新しいページを作りたい時はここから行います

下図のようなページ構成になっており、投稿でページを作るとそれがトップページにも反映されるようになる。投稿ページが増えてくるとそれをまとめているカテゴリーページSEO的にも強くなっていく。

一方で固定ページはそれぞれ独立したページであり、お問い合わせページや会社紹介などのカテゴリーに分ける必要がないWebページに使われることが多い。

- single.php

固定ページ以外の個別ページのテンプレートファイルです。
single.phpとは別にsingle-〇〇.phpを作成することで、〇〇というカスタム投稿タイプ用の投稿ページのテンプレートファイルも作成できます。

- archive.php

一覧ページのテンプレートファイルです。
カテゴリーやタグでまとめて表示することができます。

- 404.php

URLに該当するページがない場合に表示されるテンプレートファイルです。
通常は「何も見つかりませんでした」等のメッセージを表示します。

- front-page.php

WEBサイトのトップページとして利用するためのテンプレートファイルです。

共通パーツ

上述のテンプレートにおいてテンプレートを跨いで共通部分がある場合、共通コードをパーツテンプレートに切り出して利用することができます。
これにより共通部分に修正が必要な場合に一度の変更で全体が修正されます。

WEBサイトにおいてヘッダーとフッターはどのページでも共通した要素を使用することが多いため、それぞれを共通の要素として書き出すことができます。

はじめに次のようなテンプレートを作成していたとします。

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>
<body>
    <header>
        <p>Here is header contents.</p>
    </header>
    <main>
        <p>Hello World!!</p>
    </main>
    <footer>
        <p>Here is footer contents.</p>
    </footer>
</body>
</html>

ここで、header要素までは全てのページで同じ構成を使用しするとすると、以下のようにheader.phpに書き出せます。

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>

<?php wp_head(); ?>

同様にしてfooter要素以降は全ページで共通だとするとfooter.phpは次のようになります。

footer.php

<?php get_footer(); ?>

    <footer>
        <p>Here is footer contents.</p>
    </footer>
</body>
</html>

上記のようにheader.phpとfooter.phpに共通要素を切り出した後、index.phpでは次のように<?php get_header(); ?>, <?php get_footer(); ?>のインクルードタグを使用することでそれらを呼び出すことができるようになります。

index.php

<?php get_header(); ?>
<main>
    <p>Hello World!!</p>
</main>
<?php get_footer(); ?>

これらのheader.phpやfooter.phpはindex.phpだけでなく、全てのテンプレートファイルで呼び出すことができるようになります。

複数のheader.phpを使用したいときは...

ヘッダーやフッターが複数種類必要な場合は、header-〇〇.php, footer-〇〇.phpを作成し、テンプレートファイルの読み込みには<?php get_header(‘〇〇’); ?>, <?php get_footer(‘〇〇’); ?>と記述することで複数のヘッダー、フッターを指定して呼び出すことができるようになります。

独自のパーツテンプレート

独自にパーツテンプレートを作成する場合には、共通パートをファイルに抜き出し、themes/custom_theme/template-parts/〇〇.phpのようにテーマ内に「template-parts」フォルダを作成し格納します。
この場合、get_template_part()関数を読み込むことでパーツテンプレートを呼び出すことができます。

例えば独自のパーツテンプレートcontent.phpを呼び出すには以下のように記述します。

index.php

get_template_part(‘template-parts/content’);

functions.php

functions.phpは空白のままでもテーマとしては機能するが、加筆することでテーマ内における機能の設定や外部ファイルの読み込みなど見栄え以外の役割が追加されていきます。

ここでは一例として、次のような使い方を紹介する。

1. テーマの初期設定

Wordpressの機能でよく使うものでも初期状態では設定されていないこともあり、それらをここで設定することができます。

functions.php

<?php
/**
* テーマ初期設定
*
* テーマサポートの読み込み
* カスタムメニューの設定
*/
function wpro_setup() {
  // タイトルタグの出力（<head>内に<title>タグの記述がないときにURLごとにタイトルを命名）
  add_theme_support( ‘title-tag’ );
  // アイキャッチの利用
  add_theme_support( ‘post-thumbnail’ );
  // カスタムメニューの追加
  register_nav_menus(
    array(
      ‘primary’ => ‘メインナビゲーション’,
    )
  );
}
add_action( ‘after_setup_theme, ‘wpro_setup’ );

2. カスタムロゴの設定

add_theme_supportにおいて、custom-logoを設定すると「外観 > カスタマイズ > サイト基本情報 > ロゴ」からロゴの設置が可能になります。

functions.php

// カスタムロゴの設定
$logo_width = 300;
$logo_height = 100;

add_theme_support(
  ‘custom-logo’,
  array(
    ‘height’               => $logo_height,
    ‘width’                => $logo_width,
    ‘flex-width’           => true,
    ‘flex-height’          => true,
    ‘unlink-homepage-logo’ => true,

パラメータ	説明	デフォルト値
width	ロゴの予定される横幅（ピクセル単位）	null
height	ロゴの予定される高さ（ピクセル単位）	null
flex-width	ロゴ画像アップロード時に横幅をwidthにて設定したものから自由に変更できるか	false
flex-height	ロゴ画像アップロード時に高さをheightにて設定したものから自由に変更できるか	false
unlink-homepage-logo	常時ロゴからはTOPページにリンクされる。ただしTOPページを表示している場合のみリンクされない。	false

3. カスタムメニューの設定

Wordpressには簡単にメニューを設定できるカスタムメニューという機能があり、上述の「register_nav_menus」でカスタムメニューの登録ができます。

functions.phpで設定したカスタムメニューをheader.phpで呼び出す場合には次のように記述します。

header.php

<nav id=”site-navigation” class=”primary-navigation”>
  <?php
  wp_nav_menu(
    array(
      ‘theme_location’  => ‘primary’,
      ‘menu_class’      => ‘menu-wrapper’,
      ‘container_class’ => ‘primary-menu-container’,
      ‘items_wrap’      => ‘<ul id=”primary-menu-list” class=”%2$s”>%3$s</ul>’,
      ‘fallback_cb’     => false,
    )
  );
  ?>
</nav>

パラメーターにはPHPの連想配列を利用します。

パラメータ	説明	デフォルト値
theme_location	カスタムメニューの位置。先にregister_nav_menusで設定した連想配列のキーを利用	なし
menu_class	カスタムメニューを表示するul要素のクラス名	menu
container_class	カスタムメニューの外側のコンテナのクラス名	menu-{スラッグ}-container
items_wrap	カスタムメニューのHTML全体における全体の構成 - `%1s$s`に’menu_id’のパラメーターの値 - `%2s$s`に’menu_class’のパラメーターの値 - `%3s$s`にリスト項目の値	`<ul id=”primary-menu-list” class=”%2$s”>%3$s</ul>`
fallback_cb	メニューが存在しない時にコールバック関数を呼び出す。 falseにすると、メニューの存在がなくても何もしない。	wp_page_menu

4. ウィジェットの設定

Wordpressでウィジェットを利用するためには、以下のように設定を行う必要があります。

functions.php

/**
* ウィジェットの追加
*/
function wpro_widgets_init() {
  register_sidebar(
    array(
      ‘name’          => ‘サイドバー’,
      ‘id’            => ‘main-sidebar’,
      ‘description’   => ‘サイドバーで表示する内容をウィジェットで指定する’,
      ‘before_widget’ => ‘<section id=”%1$s” class=”widget %2$s”’,
      ‘afgter_widget’ => ‘</section>’,
      ‘before_title’  => ‘<h2 class=”widget-title”>’,
      ‘after_title’   => ‘</h2>’,
    )
  );
}
add_action( ‘widgets_init’, ‘wpro_widgets_init’ );

5. スタイルとスクリプトの読み込み

CSSやJavaScriptのファイルは通常HTMLのhead内に記述しますが、functions.phpに記述することでテーマ内のphpファイルには自動的にそれが読み込まれるようになります。

functions.php

<?php
/**
* スタイルとスクリプトの読み込み
*/
function wpro_scripts() {
  // スタイルの読み込み
  wp_enqueue_style( ‘wpro-style’, get_stylesheet_uri(), array(), ‘1.0.0’, ‘all’ );
  // スクリプトの読み込み
  wp_enqueue_script( ‘wpro-style’, get_template_directory_uri() . ‘/assets/js/script.js’, array(), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘wpro_scripts’ );

上のコードでテーマファイル直下の基本のCSSとassets/js/フォルダ内のscript.jsが呼び出され、テーマ内の全てのphpファイルのhead要素内に自動で記述されます。

- wp_enqueue_style()

CSSを読み込む際に利用します。

パラメータ	説明	デフォルト値
$handle	id名。複数のCSSを読み込む場合には重複しないように設定する必要あり。	なし
$src	CSSファイルのパス	‘’
$deps	依存する（先に読み込む必要のある）ファイルがある場合は指定	array()
$ver	任意のバージョン	false
$media	CSSのmedia属性	all

- wp_enqueue_script()

JavaScriptを読み込む際に利用します。

パラメータ	説明	デフォルト値
$handle	id名。複数のJSを読み込む場合には重複しないように設定する必要あり。	なし
$src	jsファイルのパス	‘’
$deps	依存する（先に読み込む必要のある）ファイルがある場合は指定	array()
$ver	任意のバージョン	false
$in_footer	falseだとwp_head()で読み込まれ、trueだとwp_footer()で読み込まれる	false

独自タグ

WordpressはPHPベースでコードが書かれていますが、その中にはWordPressが独自に実装しているタグがありそれを独自タグといいます。
独自タグを使いこなすことでWordPressの使える幅が格段に広がります。

独自タグは以下の３つに分類されます。

テンプレートタグ

タイトルの出力やクエリの発行などWordpress内で動的に情報を扱うものです。

テンプレートタグ	説明
get_the_title()	タイトルを返す
get_permalink()	記事のタイトルを返す
the_ID()	該当記事のID
post_class()	記事情報に基づくクラス(class)。投稿ごとにCSSを付与するなどして用いる。
the_parmalink()	記事のURLを表示
the_title()	記事のタイトルを表示
the_content()	記事の本文を表示
bloginfo()	サイトの情報を表示。パラメータにキーワードを入れると該当の情報が表示される。例：’charset’=>UTF-8, ‘name’=>設定>一般のサイトタイトル
esc_attr()	エスケープ処理。 phpでは演算子として認識される<>& ” ’などを文字として認識するように処理する。 HTMLの属性内の記述で利用する。その他にも`esc_html()`, `esc_url()`などがエスケープ処理として存在する。
the_post_navigation()	ページネーションを表示
sprintf()	フォーマットに内容を返す。第１引数で設定するフォーマットに第２引数以降の引数を返す関数。例えば下の場合、第１引数のhref=”%s”の箇所に第２引数で設定したリンクのURLが入るようになる `sprintf( ‘<h3 class=”entry-title”><a href=”%s”>’, esc_url( get_permalink() ) )`

条件分岐タグ

アイキャッチ画像の有無の判定や現在のページの判定など、主にif文を利用した条件分岐で利用します。
該当する場合にはtrueを返し、それ以外ではfalseを返します。

条件分岐タグ	説明
is_front_page()	サイトのTOPページかの判定
is_archive()	アーカイブページかの判定
is_search()	検索結果のページかの判定
is_404()	404ページかの判定
is_admin()	管理画面かの判定
is_single()	個別投稿のページかの判定（固定ページではfalseになる）
is_single(‘9’)	投稿IDが9の投稿かの判定
is_single(‘hoge’)	hogeというスラッグを持った投稿かの判定
is_single(array(9, ‘hoge’))	投稿IDが9もしくはスラッグがhogeかの判定
has_term()	現在のポストが指定の項目(term)を持つかの判定
has_post_thumbnail()	アイキャッチ画像の登録の判定
is_active_sidebar()	ウィジェットが有効化されているかの判定

インクルードタグ

ヘッダーやフッターなどテンプレートを呼び出すタグです。

インクルードタグ	説明
wp_head()	`</head>`の直前に配置する
wp_footer()	`</body>`の直前に配置する
wp_body_open()	bodyタグの直後に配置し、bodyの開始タグにコードを入れたい場合に利用する（Google Tag Managerを設定する場合など）

Wordpress関数の命名の大まかなルール

is_hoge()
テンプレートに基づく条件分岐で使用する際に用います。
has_hoge()
登録の有無を判定する際に用います。
get_hoge()
特定の情報を戻り値として返す際に用います。
the_hoge()
特定の情報を取得して表示する際に用います。

※get_とthe_とでは表示は同じになるが、単純にそのまま表示したい場合は「the_」を利用し、取得した後に何かPHPで処理をして表示したい場合は「get_」を利用します。

メインクエリとループ

メインクエリとは

メインクエリとはWordpressがデータベースにリクエストを送信し、データベースから返された情報の塊のことです。
メインクエリはURLをもとに呼び出されるが、それに対してURL以外のものを元にして呼び出される情報の塊（記事タイトル、抜粋情報など）のことをサブクエリと呼びます。

Wordpressではメインクエリで情報を取得し、ループを回すことでページの表示を表現することがよくあります。ここではメインクエリと一緒にループ表現についても紹介します。

ループ表現

<?php
 if ( have_posts() ) {
  // ループ開始
  while ( have_posts() ) {
    the_post();
    ?>
    hoge
    <?php
  }
  // ループ終了
} else {
  // コンテンツがない場合
  echo '<p>コンテンツがありません。</p>';
}

ループ表現でhave_posts()を投げかけることにより、アクセスしているURLにメインクエリを実行した場合にメインクエリが返されればif内に入り、返ってこない場合はelseに入ります。
またwhileで投稿があるうちはその中のコードが繰り返されるようになります。
the_post()関数はループのたびにメインクエリの情報より1件をセットし、ループを繰り返すたびに次の1件をセットします。

最後に

個人的にWordPressでWEBサイトを作成するときに見返したい内容をメインにまとめました。
内容に誤りなどがありましたらご指摘お願いいたします。

脚注

Usage statistics of content management systems｜W3Techs, https://w3techs.com/technologies/overview/content_management, (参照2024-05-12) ↩︎
テンプレート階層, https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/, (参照2024-05-12) ↩︎

WordPressの自作HP作成の手引き

WordPressとは

WordPressでWEBサイトを作成するには

1. レンタルサーバーの契約

2. ドメインの取得と設定

3. SSL設定

4. WordPressのインストール

5. WordPressテーマの作成

6. コンテンツの作成

自作テーマの作成

style.css

テンプレート階層

主なベーステンプレート

- index.php

- page.php

- single.php

- archive.php

- 404.php

- front-page.php

共通パーツ

代表的なパーツテンプレート（header.php, footer.php）

独自のパーツテンプレート

functions.php

1. テーマの初期設定

2. カスタムロゴの設定

3. カスタムメニューの設定

4. ウィジェットの設定

5. スタイルとスクリプトの読み込み

- wp_enqueue_style()

- wp_enqueue_script()

独自タグ

テンプレートタグ

条件分岐タグ

インクルードタグ

Wordpress関数の命名の大まかなルール

メインクエリとループ

メインクエリとは

ループ表現

最後に

Discussion