「記事に [注意] って書いたのに、公開したら消えてる…」
「コードの説明で [変数名] を使ったら表示されない！」
「角括弧が勝手にショートコードとして認識されてしまう」
WordPressで記事を書いていて、こんな経験ありませんか？
実は、WordPressにはショートコードという便利な機能があるのですが、これが意図しない動作を引き起こすことがあるんです。
この記事では、角括弧で囲んだ文字列が勝手にショートコードとして認識されてしまう問題と、その解決方法を詳しく解説していきます。記事作成がもっとスムーズになる知識をお届けしますよ。
ショートコードとは？WordPressの便利機能
まず、問題の原因となっているショートコードについて理解しましょう。
ショートコードの基本
ショートコードは、角括弧 [ ] で囲んだ短いコードを記述するだけで、複雑な機能を呼び出せる仕組みです。
例：
[gallery]このショートコードを投稿に書くだけで、ギャラリー（画像一覧）が自動的に表示されます。
プラグインやテーマが独自のショートコードを提供していることも多く、お問い合わせフォームやスライダーなどを簡単に挿入できるんです。
ショートコードの形式
ショートコードには主に2つの形式があります。
自己完結型：
[shortcode_name]囲み型：
[shortcode_name]ここに内容[/shortcode_name]パラメータを指定することもできます。
[gallery id="123" columns="3"]なぜ勝手にショートコードになるのか
ここが問題の核心です。
WordPressの自動処理
WordPressは、投稿や固定ページを表示する際、本文中の角括弧 [ ] を見つけると、自動的に「これはショートコードかもしれない」と判断します。
そして、登録されているショートコードと一致するものがあれば、それを実行してしまうんです。
一致しない場合は消える
もし、あなたが書いた [注意] や [変数名] が、実際には登録されていないショートコードだった場合、どうなるでしょうか。
WordPressは「このショートコードは存在しない」と判断して、その部分を空白に置き換えてしまいます。
だから、公開した記事を見ると、角括弧で囲んだ部分が消えているように見えるんですね。
予期しない実行のケース
逆に、たまたま使用中のプラグインが提供しているショートコードと同じ名前を書いてしまうと、意図しない機能が実行されることもあります。
例えば、プラグインが [button] というショートコードを提供していて、あなたが説明のために [button] と書いたら、実際のボタンが表示されてしまうわけです。
解決方法1：HTMLエンティティでエスケープする
最も確実な方法は、角括弧をHTMLエンティティに置き換えることです。
置き換える文字
[→[または[]→]または]
実際の使い方
記事の中で角括弧をそのまま表示したい場合：
記述する内容：
[注意]表示結果：
[注意]これで、WordPressはショートコードとして認識せず、角括弧がそのまま表示されます。
メリットとデメリット
メリット：
- 確実に表示できる
- どんな環境でも動作する
デメリット：
- 毎回書き換えるのが面倒
- 記事編集時に読みづらい
解決方法2：ショートコードをエスケープする
WordPressには、ショートコードをエスケープ（無効化）する方法が用意されています。
二重角括弧を使う
角括弧を二重にすることで、ショートコードとして認識されなくなります。
記述する内容：
[[注意]]表示結果：
[注意]外側の角括弧がエスケープ用として機能して、内側の角括弧がそのまま表示されるんです。
この方法の注意点
この方法は、WordPress 4.0以降で利用できます。
また、場合によっては外側の角括弧も表示されてしまうことがあるので、環境によってはうまく機能しないかもしれません。
解決方法3：codeタグやpreタグで囲む
コードやプログラムの説明をする場合は、HTMLの <code> タグや <pre> タグで囲むのが効果的です。
codeタグの使用
記述する内容：
<code>[変数名]</code>表示結果：
[変数名]コードとして表示され、ショートコードも実行されません。
preタグの使用
複数行のコードを表示する場合は、<pre> タグが便利です。
記述する内容：
<pre>
function example() {
return [配列];
}
</pre>改行や空白もそのまま保持されます。
コードブロックの活用
ブロックエディタ（Gutenberg）を使っている場合は、「コード」ブロックを使いましょう。
ブロック追加から「コード」を選択すれば、自動的にショートコードが無効化された状態でコードを記述できます。
解決方法4：プラグインを使う
ショートコードを無効化したり、コード表示を便利にするプラグインもあります。
Shortcode Disabler
特定の投稿や固定ページで、ショートコードを完全に無効化できるプラグインです。
コードの説明記事を書く際に便利ですね。
SyntaxHighlighter Evolved
プログラムコードを美しく表示するプラグインです。
ショートコードを使ってコードブロックを作成しますが、その中では他のショートコードは実行されません。
Code Embed
GitHub GistやCodePenなどのコードを簡単に埋め込めるプラグインです。
外部サービスを使うことで、ショートコードの問題を回避できます。
解決方法5：functions.phpでショートコードを無効化
テーマの functions.php ファイルにコードを追加して、特定の条件でショートコードを無効化することもできます。
全投稿でショートコードを無効化
追加するコード：
remove_filter('the_content', 'do_shortcode', 11);これで、投稿本文でのショートコード実行が無効化されます。
特定の投稿だけ無効化
カスタムフィールドを使って、投稿ごとに制御することもできますよ。
ただし、この方法は上級者向けなので、初心者の方は慎重に行ってください。
注意：functions.php の編集を間違えると、サイト全体が表示されなくなる可能性があります。必ずバックアップを取ってから作業しましょう。
予防策：記事作成時の注意点
問題が起きないように、普段から気をつけられることもあります。
エディタの選択
ブロックエディタ（Gutenberg）を使っている場合、「コード」ブロックや「カスタムHTML」ブロックを活用しましょう。
これらのブロックでは、ショートコードが自動実行されにくくなっています。
クラシックエディタを使っている場合は、「テキスト」モードで作業すると、HTMLタグを直接書けるので便利です。
プレビューで確認
記事を公開する前に、必ずプレビュー機能で確認しましょう。
角括弧で囲んだ部分が意図通り表示されているか、チェックすることが大切です。
使用中のショートコード一覧を把握
自分のサイトで使われているショートコードを把握しておくことも重要ですね。
プラグインをインストールするたびに、どんなショートコードが追加されるか確認しましょう。
よくある質問と追加の対処法
Q: テーマやプラグインが原因の場合は？
一部のテーマやプラグインが、独自のショートコードを大量に登録していることがあります。
問題が頻繁に起こる場合は、最近インストールしたプラグインを一時的に無効化して、原因を特定してみましょう。
Q: ウィジェットでも同じ問題が起きる？
はい、ウィジェット内のテキストでも同様にショートコードが実行されます。
ウィジェットで角括弧を使いたい場合も、同じ対処法が使えますよ。
Q: 過去の記事を一括修正したい
既に公開済みの記事が大量にある場合、データベースを直接操作して一括置換する方法もあります。
ただし、これは高度な技術が必要なので、バックアップを取った上で専門家に相談することをおすすめします。
関連する機能とトラブル
自動整形機能（wpautop）
WordPressには、改行を自動的に <p> タグや <br> タグに変換するwpautopという機能があります。
これもショートコードと同様に、意図しない動作を引き起こすことがあるんです。
ビジュアルエディタの自動変換
ビジュアルエディタで編集すると、HTMLタグが勝手に変更されることがあります。
コードを正確に記述したい場合は、テキストエディタやコードエディタを使うことをおすすめします。
キャッシュプラグインの影響
キャッシュプラグインを使っている場合、変更が反映されないことがあります。
対処法を試した後は、必ずキャッシュをクリアしてから確認しましょう。
まとめ：角括弧を安全に使おう
WordPressで角括弧を使う際の問題と解決策を理解できましたね。
この記事のポイント：
- WordPressは角括弧
[ ]をショートコードとして自動認識する - 存在しないショートコードは消える、存在するものは実行される
- HTMLエンティティ（
[]）で確実にエスケープできる - 二重角括弧
[[]]でもエスケープ可能 - コードは
<code>タグや「コード」ブロックで囲む - プラグインやfunctions.phpでも制御できる
- プレビューで確認する習慣をつける
最も簡単で確実なのは、HTMLエンティティを使う方法です。
コードの説明をする場合は、コードブロックや <code> タグを活用しましょう。
記事を書く際は、角括弧の使い方に少し注意するだけで、トラブルを避けられます。
この知識があれば、もうWordPressで角括弧が消える問題に悩まされることはありませんよ。快適な記事作成をお楽しみください！
コメント