【WordPress】テーマのHTMLを編集する方法

HTMLファイルはどこにあるのか？どうすれば見た目を変更できるのか？と、頭を悩まされるのがWordPressです。
本記事では、WordPressのHTML（php）を編集する方法を紹介します。

WordPressの場合はphpファイルなので、「.html」という拡張子のファイルは存在しません。「.php」という拡張子のphpファイルの中にHTMLを記述されているので、実際に編集するのはphpファイルということになります。ですので、通常のHTMLのみのファイルと異なる部分があります。「<?php the_post_thumbnail(); ?>」のようにphpタグで囲まれている部分はphpコードになりますので、そこを変更すると、テーマが大きく崩れてしまう場合があるので注意が必要です。

Contents

1 簡単にHTML編集を編集する方法
2 ローカル環境でWordPressのHTMLを編集
3 Appendix

簡単にHTML編集を編集する方法

管理画面からWordPressのテーマのHTMLを変更することができます。

「外観」→「テーマエディタ」から、現在適応されているテーマのコードを一挙に表示、編集ができます。

初めにこのページを表示するとき、注意が表示されます。本当に編集したいのであれば「理解した」をクリックしてください。

中央部分でコードを編集し、右側の「テーマファイル」で変種したいファイルを選択します。

例えば、テーマファイルとして「ホームページ（front-page.php）」を編集すると、ホームの編集ができます。

WordPressでは、phpのファイルの種類によって、ホームページ(front-page.php)や投稿ページ(single.php)、固定ページ(page.php)などを区別しています。詳しくは「【WordPress】テンプレートやテンプレート階層とは何か？」を参照してください。

ローカル環境でWordPressのHTMLを編集

上記の方法は、簡単ではありますが、直接テーマのコードを編集するのでリスクが大きいです。

WordPressのHTMLを編集する最も良い方法は、サーバー上ではなくローカル環境（自分のPC）で開発、変更することです。そのためには２つのことが必須になります。

サーバーとファイルのやり取りをする（FTPソフト）
ローカルな開発環境（Local）

ローカル環境でコードを編集するなら、それをまた本番環境（外部のサーバー）に移さなければなりません。それをするのがFTPソフトです。私はCyberducを使用しています。

また、ローカル環境でコードを変更する時、見た目がどのように変わるのか、その場で確認する必要があります。そのためには、ローカルな自分のPC上に完全なWordPressのシステムを作らなければなりません。
つまり、ローカル環境にサーバーを構築する必要があります。そんな環境を簡単に構築してくれるのが、Localという WordPress開発者に大人気のソフトです。

Localに関しては、こちらの記事で詳しく解説しています。

実際のところ、 WordPressでHTMLを編集するためには、以下のようなWordPress特有の知識が必要になります。