本ページはプロモーションが含まれています
PR
スポンサーリンク

ワードプレスで作成したブログ記事にショートコードを自動変換せずにそのまま表示させる方法

ブログ
ブログ
この記事は約6分で読めます。
ふくちゃん
ふくちゃん

ワードプレスで作成した記事にショートコードを自動変換せずにコードのまま表示させる方法を紹介します!

普通に入力するとワードプレスのお助け機能が働いて、ショートコードが自動変換されてしまうので、対策を紹介しています!

コードはビジュアルモードで入力する

コードはビジュアルモードで入力します。テキストモードだと正しく表示されないので注意しましょう。

エンティティ文字に変換しよう

ビジュアルモードでコードを入力してから、テキストモードにタブをスイッチすると、コードが自動で下記のようなエンティティ文字に自動変換されます。

普通に入力するとショートコードが自動変換されてしまう

ワードプレスのテキストモードでコードを入力すると、ショートコードが自動で変換されてしまいます。

背景が黄色で表示されている部分のショートコードが、自動変換されてしまい、下記のようになってしまいます↓

<div class="tab-wrap">
   <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">Yearly</label>
<div class="tab-content">

両面テープの正しい貼り方!すぐ剥がれてしまう時の対処方法
</div>
   <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">Monthly</label>
<div class="tab-content">
両面テープの正しい貼り方!すぐ剥がれてしまう時の対処方法
</div>
   <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">Weekly</label>
<div class="tab-content">
両面テープの正しい貼り方!すぐ剥がれてしまう時の対処方法
</div>
</div>

ショートコードを[]で囲むと自動で変換されなくなる

全てもショートコードの前後を[]で囲むと自動変換機能を解除できます。

背景を青でハイライトした部分なので、ご確認ください。

ショートコードを[]で囲むと、下記のようになります↓

<div class=”tab-wrap”>    <input id=”TAB-01″ type=”radio” name=”TAB” class=”tab-switch” checked=”checked” /><label class=”tab-label” for=”TAB-01″>Yearly</label> <div class=”tab-content”>[popular_list days=365 rank=1 pv=0 count=1 type=default] </div>    <input id=”TAB-02″ type=”radio” name=”TAB” class=”tab-switch” /><label class=”tab-label” for=”TAB-02″>Monthly</label> <div class=”tab-content”>[popular_list days=30 rank=1 pv=0 count=1 type=default] </div>    <input id=”TAB-03″ type=”radio” name=”TAB” class=”tab-switch” /><label class=”tab-label” for=”TAB-03″>Weekly</label> <div class=”tab-content”>[popular_list days=7 rank=1 pv=0 count=1 type=default] </div> </div>

preタグを使うと整形済みテキストが使える

テキストモードでエンティティ文字に変換されたコードにpreタグを追加します。

preタグを使うと下記のような整形済みテキストになります。

<div class="tab-wrap">
   <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">Yearly</label>
<div class="tab-content">[popular_list days=365 rank=1 pv=0 count=1 type=default]
</div>
   <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">Monthly</label>
<div class="tab-content">[popular_list days=30 rank=1 pv=0 count=1 type=default]
</div>
   <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">Weekly</label>
<div class="tab-content">[popular_list days=7 rank=1 pv=0 count=1 type=default]
</div>
</div>

最後に

ワードプレスにはショートコードを自動変換するお助け機能があるので、コードをそのまま表示させる場合、少々手順が必要になります。

詳しく紹介しましたが、ご不明点がございましたらお気軽にお問い合わせください!

タイトルとURLをコピーしました