【保存版】WordPressテンプレートのカスタマイズ方法まとめ

WordPressでサイトを作ったけれど など、「WordPressは簡単」といってもある程度のカスタマイズをしようと思うとそれなりの知識や経験が必要な場合があります。 また、自作テーマなのかダウンロードテーマなのかによってもカスタマイズ方法は異なります。 この記事では、自作・ダウンロードテーマの場合に分けてWordPressのインストールの方法からテーマ変更・編集からページの追加方法など、サイトやブログ運用の比較的序盤に必要なカスタマイズ方法についてまとめました。

WordPressのインストール

まずは、大前提であるWordPressのインストールから段階を追って説明していきます。

レンタルサーバーの簡単インストール

最も簡単なインストール方法は、レンタルサーバーの簡単インストールです。 WordPressに限らず、ECサイト用のCMSも簡単インストールからインストールできる場合があります。 簡単インストールの方法については各レンタルサーバーで異なりますが、多くの場合は という手順になります。 「画面の手順に沿って進める」の段階でデータベースの作成も行うので、サーバーのルートにWordPressをインストールする場合にはディレクトリの用意も不要のため、事前の準備はサーバーとドメインの準備のみになります。 インストールした後のWordPressの管理画面や機能等については、もちろん手動でインストールした場合と全く（簡潔に記述します）同じです。

手動インストール

レンタルサーバーの簡単インストールを利用する他に、手動でインストールする方法があります。 手動でインストールする場合は、事前にWordPressのダウンロードやFTPソフト・データベースの準備が必要です。

手順

インストール完了後はログイン画面に切り替わりますので、インストール画面で入力したユーザー名・パスワードを入力してログインすると管理画面に進みます。 簡単インストールでも手動インストールでも結果は同じなので、どちらでも問題ありません。 ただ、少し余裕のある時には手動でインストールをしてみると、WordPressのディレクトリ構造が理解できるのでオススメです。

テーマの変更

WordPressをインストールしたら、次にするのはテーマの変更です。 管理画面の外観＞テーマからテーマの変更ができます。 これが、WordPressインストール直後のテーマメニューの画面です。（ver.5.3.2現在） インストール直後に表示されるテーマは、WordPressのインストール時にデフォルトで入っているのテーマです。 このデフォルトのテーマをカスタマイズして使っても問題ありませんが、多くの方は自作のテーマや自分で決めたダウンロードテーマに変更されるのではないでしょうか。 自作テーマやダウンロードテーマへの変更方法についてご説明します。 ここからは、FTPソフトでのファイルアップロードを前提にご説明します。 レンタルサーバーでアップロード作業等を行う場合には、使用レンタルサーバーのマニュアルに沿ってご利用ください。

自作テーマの場合

管理画面の外観＞テーマの中にある各テーマは、WordPressインストール時にサーバーにアップロードしたディレクトリのルート＞wp-contentフォルダ＞themesフォルダ内にあります。 自作テーマを適用したい場合には、FTPソフトでここにアップロードすればいいということになります。 themesフォルダ内にアップロードすると、下図のようになります。 （rasingフォルダ内にheader.php・index.php・footer.php・style.css他が入っています） アップロードした後に再度WordPressの管理画面からテーマを確認すると 「rasing」テーマが増えました。 これを有効化すると テーマが「rasing」に切り替わりました。 これで、自作テーマの適用は完了です。 ちなみに、既存テーマのサムネイルが入っている部分（rasingテーマの網掛けの部分）にサムネイルを設定することもできます。 すると、網掛けだった部分にサムネイルが表示されます。 見栄え的にもサムネイルは設定するようにした方がよいでしょう。

ダウンロードテーマを利用する場合

WordPressでは、無料でもおしゃれなテーマが多数公開されています。 有料テーマの方が機能的にかなり優れているものが多いですし、継続課金（1年更新など）で頻繁にアップデートされどんどん細かなカスタマイズができるようになっているものもたくさんあります。 作りこみたい方は、買い切りでも継続課金でも有料テーマの方がいいかもしれませんが、「始めてみたい」、「細かな作りこみまでは必要ない」という方には無料テーマをオススメします。 テーマをダウンロードする場合も、外観＞テーマ画面上の「新規追加」から使いたいテーマを探します。 インターネットで使いたいテーマを事前に探していた方は右上の「テーマを検索」から検索することができます。 使いたいテーマが見つかったら、「インストール」→「有効化」します。 ダウンロードしたテーマの場合には、有効化後にテーマカラー等を自身のサイトに合わせていくカスタマイズが必要になります。 ダウンロードテーマは、基本的には管理画面から全てのカスタマイズが可能なためテンプレートを触ることはほとんどないでしょう。 （テンプレートをFTPソフト等を利用して直接カスタマイズされる場合には必ずバックアップを取りましょう。WordPressはもちろんHTML・CSS・PHPの知識が必要になります。） それでは、ダウンロードテーマのカラー等の変更の仕方をご紹介します。 カスタマイズするためのメニューは、外観メニューの中にあることが多いです。 テーマ作成者によってカスタマイズできる範囲は違いますし、作成者によってメニューの内容も異なる部分なので、一般的な設定を説明していきます。 まず、外観＞カスタマイズメニューです。 このメニューからは 先述の通り、テーマによってカスタマイズできる範囲が異なるのであまり深く説明はできませんが、多くは視覚的に分かりやすい設定内容なので適用したテーマでこのメニューを確認してみてください。 外観＞ウィジェット・メニュー・ヘッダー・背景については、先ほどのカスタマイズメニュー内と同じ設定内容なので省略します。 外観＞テーマエディターでは、このテーマに使用されているテンプレートの一覧とその内容が確認できます。 サーバーにアップロードされているものと同じものが確認・編集できるため、編集の際にはバックアップを取り、慎重に行う必要があります。 ダウンロードしたテーマを使用している方は、テンプレート編集の必要がない限り必要のないメニューです。

固定ページ作成

WordPressでの固定ページの作成方法についてご説明します。 固定ページとは、記事一覧ページ・記事詳細ページ以外のページのことです。 コーポレートサイトであれば、会社概要ページ・事業内容ページ・スタッフ紹介ページなどがあります。 場合によりますが、トップページも固定ページとして作成することがあります。 ここでは、会社概要ページを想定したページの作成（追加）方法をご説明します。 固定ページの作成方法としては、2パターンあります。 一つ目は、自作テンプレートとしてHTML・CSS・PHP等を使用してテキストエディタでコーディングしたものをWordPressに反映する方法です。 一つ目のパターンとは言いましたが、自作テンプレートを固定ページとする場合に限って言ってもWordPressに「このテンプレートがこのページ」と認識させる方法は複数あります。 全てを使える必要はないと思いますが、例えば他者が作成したWordPressサイトを触ることになったときにどの方法を用いているかは作成者によるので、複数の方法を知っておいて損はないはずです。 複数の方法を知らない場合、編集箇所に悩んだりどこかで躓いた時の原因究明が難しくなる可能性があります。 二つ目は、WordPressの管理画面からビジュアルエディタでページのレイアウト・内容をすべて作る方法です。 Ver.5.0.0にバージョンアップされてからブロックエディタが採用され簡単に幅広いレイアウトのページが作成できるようになりましたが、適宜プラグインを使用することでさらに自由なレイアウトのページが作成でき、且つ編集しやすいエディタにカスタマイズすることも可能です。 今回は、プラグインを使用しないデフォルトのエディタでの作成方法を実際の画面（ver.5.3.2現在）のスクリーンショットを交えてご説明していきます。

固定ページ作成の際の事前準備

事前準備は、2パターンに共通して必要なものです。 管理画面＞固定ページを開くと、2ページが勝手に作成されています。 これは、WordPressのインストール時にデフォルトで入っているものなので削除（ゴミ箱）しても問題ありません。 自分で固定ページを作成する際には、管理画面＞固定ページ＞新規追加もしくは、管理画面＞固定ページ一覧の左上「新規追加」から新しいページを作成します。 「タイトルを追加」の部分がページタイトルになります。 ここに「会社概要」と入力して、右上の「公開する」をクリックします。 公開すると、右サイドバー部分に「パーマリンク」が追加されます。 パーマリンク内の「URLスラッグ」が、そのページをサイト内で表示した際のドメイン以下の部分になります。（URLスラッグの下の「固定ページを表示」にあるのが、そのページのURLです） このパーマリンクが日本語だと、URLをコピーした際に文字化けするなどの問題が起きます。 おそらく、どのサイトも固定ページにあたるページのURLは半角英数字になっているので確認してみてください。 この記事では、会社概要ページのURLスラッグを「company」に設定します。 公開後にページの内容を変更した際には、必ずページ右上の「更新」をクリックしてください。（「更新」を押さずに他のページへいくと変更内容が反映されません） これは、WordPressに「このページを追加するよ」と伝えるものですが、2パターン目のビジュアルエディタでページを作成する場合には、またこの画面に戻ってきます。

自作テンプレートとして固定ページを作成する

固定ページのテンプレートを自作する場合、先ほどWordPress側に「このページを追加するよ」と伝えたページと自分で作成したテンプレートを紐づけする必要があります。 紐づけの方法は複数ありますが、そのうちの一つはテンプレートのファイル名で紐づけるという方法です。 この方法では、固定ページのファイル名を「page-〇〇（URLスラッグ）.php」で作成します。今回の場合は「page-company.php」を作成してサーバーへアップロードします。 これだけで、page-company.phpが会社概要ページのテンプレートということがWordPressに伝わります。 （「http://ドメイン/company」にアクセスすると、page-company.phpの内容が表示されます） Page-〇〇.phpでも、index.phpと同様にheader.phpとfooter.phpを読み込みましょう。 基本的にはメインコンテンツ部分が各ページのテンプレートの内容になります。 他にも、WordPress側で「このページのテンプレートにはこのファイルを使いますよ」と指定する方法があります。 WordPress側で指定する場合は、テンプレートファイルのファイル名は自由に付けることができます。（今後運用していくことを考えると分かりやすい名前がよいです） 今回は「company.php」とします。 これをサーバーにアップロードしただけでは、先ほどの方法みたいに紐づけできません。 このファイルのheader.phpを読み込んでいるコードを以下に書き換えます。

<?php
/* Template Name: Company */
get_header();
?>

このコードの「Company」がこのテンプレートの名前になります。 （ここは分かりやすい名前を付けて大丈夫です） このコードを記述したcompany.phpをサーバーにアップロードします。 すると、右サイドバーの下の方にページ属性＞テンプレートが追加されます。 ここのプルダウンをクリックすると 「Company」という名前のテンプレートが追加されているので、これを選択します。 すると、会社概要ページに「Company」という名前のテンプレート（company.php）を表示させることができます。 自作テンプレートを固定ページに利用したい場合には、これらの方法で固定ページを追加できます。

ビジュアルエディタで作成する場合

テキストエディタを使ってサーバーへアップロードする他にも、ビジュアルエディタで固定ページを作成することができます。 ビジュアルエディタは、先ほどの下準備の時にページタイトル等を入力した管理画面のページです。 ブロックエディタというのは、ver.5.0以上のWordPressで採用されているエディタのことです。 ブロックというかたまりを使ってコンテンツを作成していきます。 それ以前はクラシックエディタというエディタでした。 Ver.5.0へのバージョンアップによって大きくエディタの仕様が変わったことで、現在でもプラグインを利用して以前のクラシックエディタを使用しているサイトもあります。 ここでは、ブロックエディタを使ってページを作成していきます。（ページの構成・レイアウトはあくまで一例です） ただし、ビジュアルエディタで作成したページを実際のサイトで表示するためには「page.php」というテンプレートが必要になります。 先ほどご紹介した自作テンプレートのpage-〇〇.phpが存在しているもしくはテンプレートを指定している場合はそちらが優先されますが、それらがない場合にはpage.phpを利用してビジュアルエディタで作成した内容がサイトの該当ページで表示されます。 Page.phpの内容としては、最低限header.phpの読み込み・エディタの内容を表示させるためにループ・footer.phpの読み込みが必要です。 また、その他必要に応じてページタイトルやサイドバーを表示させることもできます。 今回は、ビジュアルエディタの内容を表示させることを目的として上記の最低限の内容でpage.phpを作成しました。

<?php get_header(): ?>

ヘッダー（header.php）の読み込み

<?php if (have_posts()) : ?>

 

<?php while (have_posts()) : the_post(); ?>

ループ開始 （エディタの内容がある場合にその内容を表示する）

<?php the_content(); ?>

本文（ブロックエディタ部分）を表示

<?php endwhile; endif; ?>

ループの終了

<?php get_footer(); ?>

フッター（footer.php）の読み込み 次に、ブロックエディタにページの内容を入れていきます。 まず、ブロックにそのまま文を入力すると「段落」というブロックが生成されます。 「段落」→文章という認識で大丈夫です。 ブロックを挿入すると、右サイドバーの「ブロック」に挿入したブロックに対応した項目が表示されるので、適宜設定します。 ブロックを追加したいときは、画面左上のプラスマークをクリックすると次に追加するブロックのタイプが選べます。 画像をクリックしてみましょう。 すると、このような画面になります。 アップロードは、自分のPC内にある画像ファイルを挿入したいときに選択します。 メディアライブラリは、既にWordPressに登録してある画像ファイルを挿入したいときに選択します。（一度アップロードした画像はメディアライブラリに保存されます） URLから選択では、画像のURLを貼り付けることで画像を挿入することができます。 次に、見出しです。 ブロック挿入時は見出しレベル2（h2）の見出しが挿入されますが、これも右サイドバーの「ブロック」内から変更ができます。 今回は「会社沿革」と入力します。 次に、表を挿入します。 表ブロックを選択すると、表の列数・行数を選んで作成します。（列数・行数はあとから変更できます） 4行2列の表が挿入されました。 ここに、内容を入力していきます。 次に、2カラム（左右の2段組）レイアウトを挿入してみます。 ブロック追加のレイアウト要素から「カラム」を選択します。 挿入時にレイアウトを選択することができます。（スキップすると、独自のレイアウトが可能です） 今回は、左に画像を、右に文章を入れてみます。 これで、2カラムレイアウトができました。 他にもいろいろなレイアウトが作れますので、ぜひ触ってみてください。 また、SNS等の埋め込みも簡単にできるようになりました。 ブロック追加画面から「埋め込み」を選択します。 「YouTube」を選択してみると 動画URLを貼り付けるだけで簡単にYouTube動画を挿入することができます。 他にも数多くのSNS等を埋め込むことができるので、会社概要のような固定ページだけでなく、ブログやお知らせ等の記事や広報にも有効です。

投稿ページ作成

管理画面から固定ページを作成する際と同様に、ビジュアルエディタを使用して記事を作成します。 ただし、記事には多くの場合は一覧ページと詳細ページがあります。 残念ながら記事ページのテンプレートは管理画面からは作成できませんが、基本的にダウンロードテーマを使用している場合には準備されているのでご安心ください。 自作テーマを使用してWordPressサイト・ブログを制作された場合には、自分で一覧ページ・詳細ページのテンプレートを作成する必要があります。 投稿については、デフォルトで管理画面に「投稿」が一つ用意されていますのでそこに投稿しますが、例えば「お知らせ」「施工実績」のように２つ以上の投稿を利用したい場合に「カスタム投稿」という機能があります。 「カスタム投稿」はプラグインを利用することで管理画面から増やせます。 また、テンプレートに追記することでも可能です。 今回はデフォルトの「投稿」についてご説明します。

アーカイブ（記事一覧）ページ

記事一覧ページのことをアーカイブページといい、アーカイブページに適用されるテンプレートは「archive.php」です。 固定ページの場合と同じく、ファイル名でWordPressに自動的にアーカイブページのテンプレートとして認識されます。 Archive.phpに必要な内容は、固定ページと同じく記事を出力するためのループです。 また、記事タイトル・アイキャッチ（サムネイル）画像・本文（もしくは抜粋）・カテゴリーなどを表示させるためのWordPressタグもあります。 あくまで一例ですが、archive.phpの中身です。

<?php while ( have_posts() ) : the_post(); ?>

ループ開始

<?php the_post_thumbnail('full'); ?>

アイキャッチ画像表示 （fullがサイズ指定）

<?php the_time('Y/n/j'); ?>

投稿日表示 （2000/01/01という形式で表示されます）

<?php the_title(); ?>

記事タイトル

<?php the_excerpt(); ?>

本文抜粋

<?php endwhile; ?>

ループ終了 ループの内側が各記事の内容になりますので、管理画面等で指定した件数分、この内容が繰り返し表示されるようになります。

シングル（記事詳細）ページ

記事詳細ページのことをシングルページといい、シングルページをWordPressに認識させる際のファイル名はsingle.phpです。 Single.phpもarchive.phpと同様にループ・各情報を表示させるタグで構成されます。 single.phpの中身の一例です。 Archive.phpと違うのは、<?php the_content(); ?>です。これは、本文（ブロックエディタ部分）を表示させるタグです。 固定ページ（page.php）の時に使用したものと同じです。 あとは、固定ページをブロックエディタで作成したときと同様の手順で記事を作成すれば表示されます。

ウィジェット追加

WordPressには、ウィジェットという機能があり、大半のダウンロードテーマには最初からウィジェットの機能が入っています。 自作テーマを使用している場合には、テンプレートにウィジェット機能を表示させるための記述が必要になります。 この時に記述するテンプレートは「functions.php」というファイルです。 まず、ファイルを新規作成し、「functions.php」というファイル名をつけて保存します。 このfunctions.phpの中には、htmlやcssなどは記述しません。記述するのはphpのみです。 そのため、functions.phpの外枠には<?php ~ ?>を使用します。（ページ用テンプレートのように、header.phpやfooter.php等の読み込みは必要ありません。） ウィジェットを追加するための記述は以下です。

/*ウィジェットエリア追加*/
register_sidebar(array(
     'name' => 'Banner' ,
     'id' => 'banner' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));

これを、functions.phpの中に記述します。 各項目は、自由に設定して大丈夫です。 ‘name’→管理画面に表示される名前です。（複数のウィジェットを区別するためのもの） このファイルをサーバーにアップロードすると、WordPressの管理画面の外観の中に「ウィジェット」というメニューが追加されます。 左側のメニューが、ウィジェットに追加できるメニューです。 サイト内検索の検索窓や記事のカテゴリー一覧、カレンダーなどを表示するときに便利です。 ドラッグ＆ドロップで簡単に追加したいウィジェットにメニューを追加できます。 また、これらはプラグインを利用して増やしたりカスタマイズしたりすることもできます。 ウィジェットを上手に利用することでコードを書くよりも圧倒的にシンプルなテンプレートになるので、ぜひ活用してみてください。

ウィジェットの出力

作成したウィジェットを出力するのは、テンプレートのウィジェットを表示したい場所にたった1行のコードを追加するだけです。 追加するコードは

<?php dynamic_sidebar('Banner'); ?>

表示したいウィジェットの’name’（今回は‘Banner’）で区別します。 「機能を追加する」や「カスタマイズをする」となると難しく聞こえますが、実際に使ってみると非常にシンプルです。 いかがだったでしょうか？ この記事では解説していませんが、プラグイン等を利用することでさらにカスタマイズの幅が広がり、より細かな設定ができるようになります。 WordPressに明るくない方でも視覚的に分かりやすいカスタマイズが可能になるプラグインも多数公開されていますので、ぜひプラグインについても調べてみてくださいね。