【WordPress】＜＞が勝手に変換されるときの対処｜ブログにコードを貼る

WordPressでプログラミングなどの記事を書いている時.phpのコードを紹介しようと思い、記事に貼り付けたところ、自動的に変換されてしまいました。

原因は、紹介したいコードの内容がブログのカスタマイズとして反映されてしまっているというものなのですが、今回はそういった時に<>を勝手に変換させずに表示する方法を紹介します。

はじめに

勝手に変換されてしまうコードに、<div 〜>があります。

このようなコードをテキストに貼り付けると、行として認識されてしまうので思った通りの動作をしてくれないことがあります。

では実際にテキストが自動的にコードとして認識されてしまった例を紹介します。

以下をご覧ください。

実際の例

register_sidebar( array(
'name' => __( 'ウィジェットの名前' ),
'id' => 'IDの名前',
'description' => __( 'どのようなウィジェットなのかの説明' ),
'before_widget' => '

',
'before_title' => '

', 'after_title' => '

',
) );

本当は1まとめにっているコードなのですが、一部div〜という内容があったために表示すらされなくなっています。

想定していた表示されるはずのコードは以下のようなコードでした。

register_sidebar( array(
'name' => __( 'ウィジェットの名前' ),
'id' => 'IDの名前',
'description' => __( 'どのようなウィジェットなのかの説明' ),
'before_widget' => '<div id="side_top">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

先ほどの失敗例では表示されていなかった箇所がいくつかあるのがわかると思います。

このコードはCrayon SyntaxHighlighterというプラグインを使って表示しているのですが、このようなコードを表示するプラグインを使っている人はやはり自動変換で悩まされたことがあるのではないでしょうか。

ちなみにこのコードは「ウィジェットエリアを追加する」という記事の中で紹介したものです。

こちらの気になる方は是非ご覧ください。

【WordPress】ウィジェットエリアを新たに作ればカスタマイズ性アップ！

2016.1.24

WordPressにはウィジェットという機能があります。 ウィジェットをサイドバーやフッターに追加することで「カテゴリー」や「タグ」「テキスト」などを簡単に追加することができます。 ですが、デフォルトではサイドバーとフッターにしかウィジェットを追加することはできないので、今回は新しくウィジェットエ...

では、どのようにすれば<>を直接入力することができるのか、その方法は大きく分けて2種類あります。

直接書き込む

1つ目の方法はコードを貼り付ける時に「テキスト」ではなく「ビジュアル」で貼り付けるという方法です。

テキストからコードを入力するとソースとして認識されますが、ビジュアルから書き込むことで文字として認識させることができるようです。

ですが、先ほども紹介した「Crayon Syntax Highlighter」のようにコードを表示するプラグインを使っている場合、コードがどこからどこまでなのかを判断させるために<pre></pre>などで囲むことがあります。

そういった時でもビジュアルに書き込むためには、<pre></pre>をテキストに書き込んだ状態で、ビジュアルに変更しコードを貼り付けるという方法があります。

この方法ならば、<>が勝手に変換されることはなくなります。

ですが、この方法だとテキストに直接<>を書き込むことはできないのかということになってしまいますが、そういうわけではありません。

2つ目の方法を使えば<>をテキスト欄に書き込むことができるようになります。

2つ目の方法

その方法とは、<>を変換させて書き込むというものです。

「<」はコードで書き込むと「&lt;」になり「>」は「&gt;」になります。

これを参考にして「<○○○>」というように書き込みたい時は「&lt;○○○&gt;」という書き方をしてあげることで、正しく表示することができます。

「;」を見落としがちなので注意してください。

他にも&は&amp;というように書いたりします。

このことを覚えておけば、PCに「コード」なのか「文字」なのかを判断させてあげることができるようになるので、是非覚えておきましょう。

まとめ

今回の方法は基本的にコードをいじる場合に必要な知識になります。

プログラミングの記事を書かない場合はあまり必要ない情報かもしれませんが、アドセンスの広告コードやブログのカスタマイズなど、サイトを持っていると様々な面でコードを使います。

そのような時に「&lt;」「&gt;」というように書かれていても慌てずに対処することができるようになりますね。

コードを紹介する時に、勝手に&amp;に変換されてしまうと、その記事を読んだ人は間違ったコードを使ってしまうことになります。

【アドセンス】関連コンテンツでエラー Uncaught SyntaxError: Unexpected token < が表示された

2017.1.29

先日、Googleアドセンスの関連コンテンツユニットをブログに設置したところ、Uncaught SyntaxError: Unexpected token <というエラーが発生しました。 アドセンスをウィジェットに配置しているだけでこのエラーが表示されるのはおかしいと思い原因を探ってみたとこ...

そういった危険を避けるためにも記事を見て&lt;のようになっていないか確認しましょう。

ではまた。