クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

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

f:id:clrmemory:20170422154635p:plain 

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

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

 

 

はじめに

 

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

 

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

 

実際の例

 

register_sidebar( array(
        'name' => __( 'ウィジェットの名前' ),
        'id' => 'IDの名前',
        'description' => __( 'どのようなウィジェットなのかの説明' ),
        'before_widget' => '
', 'after_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というプラグインを使って表示しているのですが、このようなコードを表示するプラグインを使っている人はやはり自動変換で悩まされたことがあるのではないでしょうか。

 

ちなみにこのコードは「ウィジェットエリアを追加する」という記事の中で紹介したものです。こちらの気になる方は是非ご覧ください。

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

 

直接書き込む

 

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

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

 

 

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

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

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

 

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

 

2つ目の方法

 

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

 

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

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

 

「;」を見落としがちなので注意してください。他にも&は&amp;というように書いたりします。

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

 

まとめ

 

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

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

 

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

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

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

 

ではまた。