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

WordPress

スポンサーリンク

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

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

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

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

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

wordpress_html_編集
WordPressのHTML編集画面

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

スポンサーリンク

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

WordPressのHTML編集画面
コードの編集とファイルの選択

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

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

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

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

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

  1. サーバーとファイルのやり取りをする(FTPソフト)
  2. ローカルな開発環境(Local)

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

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

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

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

  • テンプレート階層
  • テンプレートタグ
  • WordPress関数
  • WordPressループ
  • etc….

しっかりと学びたい場合は、系統的に学習する必要があります。
最後に、系統的なWordPress学習に最適な本を紹介します。

Appendix

参考文献:[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]

WordPress 仕事の現場でサッと使える! デザイン教科書
著者:中島 真洋
価格:2905円(Kindle)

この本は、今まで読んだワードプレス本の中で最も実践的でわかりやすかったものです。ご参考までに。

スポンサーリンク