WordPressのボディにHTMLを追加する方法は？
紹介
WordPressサイトのボディにカスタムHTMLを追加することで、機能性や見た目を強化することができます。このガイドでは、そのための方法をいくつか紹介します。
プラグインを使う方法
- "Header and Footer Scripts" プラグインをインストールして有効化します。
- 設定 > Header and Footer Scripts に移動します。
- "Scripts in Body" セクションまでスクロールします。
- 追加したいHTMLコードをこのフィールドに貼り付けます。
- "Save Changes" をクリックします。
テーマのfunctions.phpファイルを編集する方法
- FTPやcPanelのファイルマネージャーを使用してWordPressファイルにアクセスします。
- wp-content/themes/your-theme-name/ に移動します。
- functions.phpファイルを開きます。
- ファイルの最後に以下のコードを追加します：
function add_custom_body_html() {
echo '<div>Your custom HTML here</div>';
}
add_action('wp_body_open', 'add_custom_body_html');
- 'Your custom HTML here' を希望のHTMLに置き換えます。
- ファイルを保存します。
カスタムHTMLブロックを使う方法 (Gutenbergエディター)
- HTMLを追加したいページまたは投稿を編集します。
- 新しいブロックを追加し、"カスタムHTML" を選択します。
- ブロックにHTMLコードを入力します。
- ページを更新または公開します。
ベストプラクティス
- 変更する前にサイトのバックアップをとっておきます。
- カスタムHTMLをステージング環境でまずテストします。
- レイアウトの崩れを防ぐため、HTMLが正しいか確認します。
FAQ
Q: WordPressサイトのボディにカスタムHTMLを追加する理由は？
A: カスタムHTMLを追加することで、標準のWordPress設定やテーマオプションでは実現しにくいカスタムスクリプト、トラッキングコード、デザイン要素などを導入できます。
Q: カスタムHTMLの追加でサイトのパフォーマンスに影響がありますか？
A: 追加するHTMLによりますが、シンプルなHTMLなら目立った影響はありません。しかし、複雑なスクリプトや大量のコードを追加すると、サイトが遅くなる可能性があります。ステージングサイトでまず確認しましょう。
Q: functions.phpファイルを編集するのは安全ですか？
A: PHPに不慣れな場合、functions.phpの編集にはリスクがあります。変更前にバックアップをとるのが良いでしょう。また、子テーマを使用してカスタマイズすることが推奨されます。
Q: ヘッダーにHTMLを追加するのとボディに追加するのはどう違うのですか？
A: ヘッダーのHTMLは、メタタグやCSS、早期に読み込む必要のあるスクリプトなどに使われます。ボディのHTMLは、ページ上に表示されるコンテンツやページレンダリング後に読み込んでも問題ないスクリプトに使用されることが一般的です。
Q: ページごとに異なるHTMLを追加できますか？
A: 方法3（カスタムHTMLブロック）を使用すると、特定のページや投稿に個別のHTMLを追加できます。サイト全体に共通のHTMLを追加するには、方法1または2が適しています。
Q: 追加したHTMLが原因でサイトが壊れた場合はどうすればいいですか？
A: カスタムHTMLを追加してからサイトに問題が発生した場合、次の対応を考慮します：
- 事前にバックアップをとっている場合、バックアップに戻します。
- 方法1を使用している場合はプラグインを削除します。
- 方法2を使用している場合、functions.phpから追加したコードを削除します。
- 方法3を使用している場合、カスタムHTMLブロックを削除します。