WordPressを利用すれば、開発経験や専門知識がない人でもウェブサイトを作成・管理することができますが、時にはサイトの見た目や機能を制御するためにコードの編集が必要になることも。そこで今回は、WordPressサイトのコードを編集する方法をご紹介していきます。
編集したい特定のコードがある場合は、目次から該当のセクションに移動してください。
WordPressのコードの編集方法について、動画での解説もご用意しています。
WordPressのコードを編集する方法（要約）
WordPressサイトのコードを編集することで、外観や機能など、さまざまな部分をカスタマイズすることができます。
- 個々の投稿や固定ページのHTMLコードは、Gutenberg（ブロックエディター）とクラシックエディターで編集可能。
- WordPressテーマのソースコードを編集するには、子テーマを使用する。
- テーマの<head>またはfunctions.phpファイルを編集する場合は、プラグインを使用するのが最善。
- カスタムCSSを追加するだけであれば、カスタマイザーの「追加CSS」エリアを使用するか、Simple CSSのようなプラグインを使用する。
投稿または固定ページのHTMLを編集する方法
まずはWordPressのHTMLを編集する方法で最もシンプルな、個々の投稿、固定ページ、その他の投稿タイプのソースコードにアクセスし、編集する方法から見ていきます。
ブロックエディター（Gutenberg）とクラシックエディター（TinyMCE）で方法が異なります。
ブロックエディター（Gutenberg）でHTMLを編集する
GutenbergでHTMLコードを編集する方法はいくつかあり、コンテンツの一部に独自のHTMLコードを加えるだけであれば、ソースコード全体を編集する代わりに、「カスタム HTML」ブロックを使用します。ブロックを追加してコードを貼り付けるだけでOKです。
別のブロックのHTMLコードを編集したい場合には（リンクにnofollowタグを適用するなど）、2つの方法があります。1つは、特定のブロックのオプションメニューをクリックして、「HTML として編集」を選択します。
これで、個々のブロックのHTMLを編集することができます。
投稿全体のHTMLを編集するには、画面右上にある3つの点をクリックし、「コードエディター」を選択します。または、キーボードショートカット（Ctrl + Shift + Alt + M）でコードエディターを切り替えることもできます。
注意点として、コードエディターでコード全体を編集する場合は、ブロックのマークアップ（<!-- wp:paragraph -->など）を回避する必要があります。
クラシックエディター（TinyMCE）でHTMLを編集する
クラシックエディター（TinyMCE）を使用している場合は、エディター部分の右上にある「テキスト」タブをクリックすると、投稿全体のHTMLコードを編集することができます。
テーマのソースコードを編集する方法
WordPressテーマのソースコードを編集するにあたっての注意事項として、コードに誤った編集を加えると、サイトが破損してしまう可能性があります。
最近のバージョンでは、この懸念点に対する改善が進んでおり、サイトが破損する可能性は軽減されていますが、万が一に備えて、サイトのソースコードは慎重に編集してください。
コードの編集には子テーマを使用すること
テーマファイルのコードを直接編集する場合は、親テーマではなく、子テーマを使用します。
親テーマでコードを編集すると、テーマの更新時に変更が上書きされてしまいますが、子テーマで編集すると変更内容を失うことなく、親テーマを更新することができます。
WordPressの子テーマに関する詳細はこちらをご覧ください。
子テーマでコードを編集する代わりにプラグインを使う手も
子テーマの動作を変更するには、子テーマのソースコードを編集します。サイトの<head>にトラッキングコードを追加したい、またはテーマのfunctions.phpファイルにコードを追加したいなど、別の理由でコードを編集するには、プラグインを使用することをお勧めします。
例えば、Head, Footer and Post Injectionsプラグインを使うと、必要な場所に簡単にコードを挿入することができます。追加するコードはプラグインのインターフェースから分離されるため、長期的な管理も容易です。
子テーマのfunctions.phpファイルにコードを挿入する場合は、無料のCode Snippetsプラグインを使用してみてください。
サイトのヘッド部（<head>）またはfunctions.phpファイルを編集する場合は、プラグインをお勧めします。その他のコードについては、以下の方法で編集してみてください。
WordPressのコードエディターを使用する
テーマのコードを直接編集する場合は、念のためサイトのバックアップ（サイト全体または編集するファイル）を作成してください。 その後、「外観」＞「テーマエディター」に移動します。すると、上で述べた内容の確認メッセージがポップアップで表示されます。
内容を確認の上、「理解しました」をクリックすると、コードエディターが開きます。右側にあるメニューでテーマファイル間を移動することができます。
SFTPを使用する
WordPress管理画面内のコードエディターの代わりに、SFTP経由でテーマファイルを編集することも可能です。この方法には、以下のような利点があります。
- 自分が使い慣れたコードエディターを使用できる
- 誤って何かを壊してしまってもすぐに修正できる（WordPress管理画面でコードを編集すると、まれに管理画面からロックアウトされ、問題の修正にSFTP経由での接続が必要になる可能性がある）
FTPでサイトに接続する方法はこちらをご覧ください。
接続したらテーマフォルダ「…/wp-content/themes/child-theme-name」を開き、編集したいファイルを見つけて右クリックします。ほとんどのFTPクライアントではファイルを編集するメニューが表示され、変更を加えると自動的にファイルが再アップロードされます。
しかし、変更により意図せず何かを壊してしまうことを想定し、念のため元のファイルをコンピュータにダウンロードしておくことをお勧めします（何かあっても、これを再アップロードすればOK）。
WordPressにカスタムCSSを追加する方法
WordPressのHTMLやPHPコードではなく、カスタムCSSを追加するだけであれば、コードエディターやSFTPは不要です。カスタマイザーを使用することができます。使い方がシンプルであるだけでなく、変更内容をリアルタイムでプレビューすることができます。WordPress管理画面の「外観」＞「カスタマイズ」に移動します。
カスタマイザーを開いたら、左側のメニューから「追加CSS」を選択します。
この画面で、必要なCSSを加えることができます。CSSコードを追加すると、変更に応じてプレビューがリアルタイムで自動的に表示されます。
別の方法として、Tom Usborne氏が開発したSimple CSSプラグインを使用する手もあります。WordPressのカスタマイザー同様の機能が組み込まれており、メタボックスを使って個々の投稿や固定ページにカスタムCSSコードを挿入することもできます。
また、何百、何千行といった大量のCSSコードを追加する場合は、独自のカスタムCSSスタイルシートを作成し、wp_enqueue_scriptsを使用してテーマに追加するのが効率的かもしれません。
まとめ
WordPressの個々の投稿や固定ページであれば、Gutenbergとクラシックエディターのどちらからでもコードを編集することができます。テーマのソースコードを編集する際は、以下の点に注意してください。
- 親テーマではなく子テーマでコードを編集する
- <head>やfunctions.phpファイルのコードの編集にはプラグインを使用する
これを踏まえて、コードを直接編集する場合は、WordPress管理画面で「外観」＞「テーマエディター」を開き、子テーマのソースコードを編集してください。SFTP経由でサイトに接続してコードを編集することも可能です。
カスタムCSSを追加したい場合は、テーマのコードを編集する必要はありません。カスタマイザーの「追加CSS」エリア、またはSimple CSSのようなプラグインを使用してください。
WordPressのコード編集方法についてご質問がありましたら、以下のコメント欄でお知らせください。
