WordPressの記事にタグ・コードを埋め込む方法(プラグインなし)

WordPressの投稿記事で、ちょっとしたHTML/ CSSなどのコードを表示したいときに使えるHTMLタグを紹介します。

プラグインでコードを表示する方法もありますが、プラグインは増やしすぎるとサイトが重くなるなどのデメリットも。

こんな人におすすめです。

  • コードを埋め込むことが少ない
  • ちょっとしたコードなので、プラグインを入れるまでもない

WordPressでHTMLタグを表示させる際の注意点

まずWordPressでHTMLタグを使うには、投稿画面のテキストエディタで入力していきます。

ただそのままHTMLタグを打ち込んでも、画面には何も表示されません

実際にテキストエディタでこのタグで<strong>文字が強調</strong>されますと打ち込んでみましょう。

「プレビュー」から確認すると、このように表示されます。

タグが表示されるのではなく、文字の効果になってしまっていますね。

記号を文字として表示するには

半角の「<」「>」などの記号を文字として表示するには、割り当てられた表記方法があります。

表示したい記号 HTMLで入力する文字列
< &lt;
> &gt;

その他の記号は下記を参照>>
特殊文字一覧 – ウェブランサー

タグを文字として表示するには、テキストエディタにはこのように表記します。


プレビュー画面で確認してみましょう。

これをふまえて、コードを表示したい場合の入力方法を見ていきます。

短いコードを表示したい場合

<code></code>を使います。

表示例

<strong>テキスト</strong>

テキストエディタでの表記方法

<code>&lt;strong&gt;テキスト&lt;/strong&gt;</code>

テキストエディタの編集画面を開くと、上に「code」と書かれたボタンが表示されます。ここをクリックしてもタグが挿入されます。

<code>を使用すると通常時とフォントが変わります。テーマによってはデフォルトで背景色が設定されていることもありますが、この記事のように自分で背景色を設定することもできます。
>>codeに背景色を付ける方法にスキップ

長めのコードを表示したい場合

<pre></pre>を使います。
インデント(行の前にある空白)も編集画面のまま表示されるので、複数行あっても見やすいのが特徴です。

表示例

<table>
    <tbody>
        <tr>
            <th>テキスト</th>
            <td>テキスト</td>
        </tr>
    </tbody>
</table>

テキストエディタでの表記方法

<pre>
&lt;table&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th&gt;テキスト&lt;/th&gt;
            &lt;td&gt;テキスト&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</pre>

codeに背景色を付けたい場合

表示例

<code></code>

テーマによっては<code>タグの背景色がデフォルトで設定されていますが、もしなければ設定するとより分かりやすくなります。

WordPressのカスタマイズCSSにCSSを追加

WordPressダッシュボードの「外観」→「カスタマイズ」を選択

プレビュー画面が右に、メニューが左に出てくるので「追加CSS」を選択(テーマにより違う可能性がありますが下の方にあります)。

下記のコード(画像下でコピペ可能)を書いて「公開」をクリック

【コードの詳細】

code {
  background-color: #eee;
  border: 1px solid #ccc;
}

今回は背景色に加えて周りに枠線を付けていますが、なくてもいい場合はborder: 1px solid #ccc;を削除します。