注目キーワード
  1. 体験談
  2. ブログ開設
  3. 仕事
ss アイキャッチ画像-ソースコード表示02

<--WordPress--> 3分で記事内にHTMLコードを表示させる方法

・この記事を読むと

自分のブログ記事内に、HTMLコード等のソースコードを紹介したい場合の方法が分かります。

この記事についてすべて実際に作業し、簡単に出来た内容を紹介しています!

 

★記事内にHTMLコードを表示させる方法

WordPress アイキャッチ画像

<pre>タグを使う方法

<pre>タグを使います。<pre>タグは、『preformatted text(整形済みテキスト)』の略で、そのまま表示させます。

<pre> ここに表示させたいコードを書く </pre>

 

例えば、WordPressの投稿エディタで次のように記述します。

<pre>

記事内で表示させたいHTMLコード

</pre>

<pre>タグを使った表示結果

結果は下記になります。

 

/* functions.php */
function hljs_load() {
if ( is_singular() ) {
wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css' );
wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js', array(), null, true );
wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
}
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

文字と識別されて表示されます。

★もう少し見た目をよくする方法

wordpress アイキャッチ画像-ソースコード表示03

<code>タグを追加する方法

 

<code>タグは、HTMLコードなどのプログラムコードであることを示すタグです。追加すると、見やすい表示になります。

例えば、WordPressの投稿エディタで次のように記述します。

<pre><code>

記事内で表示させたいHTMLコード

</code</pre>

<pre><code>タグを使った表示結果

 

/* functions.php */
function hljs_load() {
if ( is_singular() ) {
wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css' );
wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js', array(), null, true );
wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
}
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

それっぽい表示になりました。

いま上記の表示は、色がついていて(ハイライトされている)、さらに見やすくなっています。この表示方法は「highlight.js」というWebの構文強調表示をするjavascriptを使用しています。

その設定をしないとハイライトはされませんのでご注意ください。

 

ハイライトさせる方法はコチラの記事です!
<–WordPress–> 記事内のHTMLコード表示に色をつける方法

 

注意点

 

・HTMLコードについては、記事で表示するため特殊文字に変換する必要があります。注意してください!

HTMLコードの例

<、 >、 &、 など

 

変換の方法(その1)

・WordPressのエディターで変換する

  1. WordPressの投稿画面を開く
  2. ビジュアルモードにする
  3. 記事に表示させたいコードをペーストする
  4. テキストモードに切り替える
  5. ペーストしたコードを、<pre><code>と</code></pre>ではさむ
  6. ビジュアルモードで確認する

 

変換の方法(その2)

・特殊文字変換ツールを使用する

 

・こちらのサイトで変換出来ます

HTML特殊文字変換ツール

 

ss アイキャッチ画像-ソースコード表示02
最新情報をチェックしよう!