WordPressでHTMLを使いたい場面はさまざまです。ここでは、投稿や固定ページ、ウィジェット、テーマ、ショートコード、プラグインを使ったHTMLの使い方を詳しく説明します。それぞれの方法を紹介しますので、自分に合った方法を見つけてみてください！
目次
目次
1. 投稿や固定ページでHTMLを使用する
ブロックエディター（Gutenberg）の場合
カスタムHTMLブロックを利用する方法
- 投稿や固定ページの編集画面で「+」ボタンをクリックします。
- 「カスタムHTML」ブロックを選択します。
- HTMLコードを直接入力します。
- 「プレビュー」で表示を確認できます。
コードエディターを使用する方法
- 投稿画面右上の「︙（縦三点）」メニューをクリックします。
- 「コードエディター」を選択すると、記事全体をHTMLで編集可能です。
クラシックエディターの場合
投稿画面で「テキスト」タブを選択すると、HTMLを直接記述できます。
2. ウィジェットエリアでHTMLを使う
カスタムHTMLウィジェットを利用
- WordPress管理画面から「外観」→「ウィジェット」をクリックします。
- 「カスタムHTML」ウィジェットを選択し、サイドバーやフッターに追加します。
- 直接HTMLコードを記述して表示させることができます。
3. WordPressのテーマやテンプレートにHTMLを追加する
テーマファイルを編集する方法
WordPressの「外観」→「テーマエディター」から、必要なテーマファイル（例: header.php, footer.php）を編集できます。例えば、header.phpにカスタムHTMLを追加すると、それが全ページのヘッダーに反映されます。
子テーマを作成して編集
親テーマを直接編集すると、テーマの更新時に変更が失われます。ですので、子テーマを作成してから編集することをお勧めします。
4. HTMLをショートコードとして使う
ショートコードを使うと、記事内で簡単にHTMLを呼び出すことができます。以下は、ショートコードを作成する基本的な方法です。
|
1 2 3 4 |
function custom_html_shortcode() { return '<div>Hello, WordPress!</div>'; } add_shortcode('custom_html', 'custom_html_shortcode'); |
このコードを functions.php に追加すると、記事内で [custom_html] と書くだけで指定のHTMLが表示されます。
5. プラグインを使ってHTMLをカスタマイズする
<head>や<footer>などの特定の場所にHTMLを追加したい場合に便利です。
WP Code (旧名: Insert PHP Code Snippet)
HTMLとPHPを組み合わせたカスタマイズが可能ですので、より複雑な実装ができます。
まとめ
WordPressでは、用途に応じてさまざまな方法でHTMLを活用できます。以下は、その方法のまとめです。
- 記事やページ内: カスタムHTMLブロック / コードエディター
- ウィジェットエリア: カスタムHTMLウィジェット
- テーマカスタマイズ: テーマファイル編集 / 子テーマ
- ショートコードを作成: functions.php に追加
- プラグイン活用: Insert Headers and Footers など
「どの方法を試してみたいですか？また、具体的にやりたいことがあれば、ぜひ教えてください！」
