wordpress-logo

WORDPRESSの記事内にHTMLを記述する方法

投稿日:

WORDPRESSの記事の中にHTMLを記述する一番簡単な方法は「SyntaxHighlighter Evolved」というプラグインを導入する方法です。
インストールして有効化するだけで使用できるのでおすすめです。

SyntaxHighlighter Evolvedの使い方

プラグインをインストールして有効化すれば記事の中のHTMLを[ html ] [ /html ](実際に使用するときは空白を入れないように注意してください)で囲むだけです。

<div>
 <ul>
  <li></li>
  <li></li>
 </ul>
</div>

ショートコードパラメータ

ショートコードを使用することでリンクを有効化するなど自由に記述することができるようになります。
ショートコードはbool値(有効・無効など)の指定には true/1 または false/0 を渡してください。

lang または language — ハイライトするコードの言語。パラメータ指定だけでなく[ php ]code[ /php ]のように言語をタグとして記述できます。
autolinks — 自動リンクの有効・無効
classname — コードボックスに追加するCSSのclass
collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
firstline — 行番号の出力の際に、最初の行の番号を表す数値
gutter — 左側に行番号を配置するかどうか
highlight — ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例: 2,5-10,12
htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
title (v3のみ) — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
wraplines (v2のみ) — 折り返しの有効・無効

例:リンクを有効にする場合

<a href="http://wordpress.org/">WordPress</a>

行数が表示される設定にしていますが現在表示されていないようです・・。

まとめ

いかがでしたでしょうか?
とても簡単に導入できるのでおすすめのプラグインです。


サイトや記事に関するご意見・ご感想やライター希望者はFactotum(ファクトタム)までお気軽にご連絡ください。