WordPressの投稿でコメントアウトを使用する

WordPressの投稿内でコメントアウトを使おうとして、意図したようにならないことがあったので、その時の対応策をメモしておきます。

サンプルコード

投稿内容を一時的に非表示にしたい場合や、運用で変更部分を分かりやすいようにする場合など、ウィジウィグ内でコメントアウトしたい時がたまにあります。
例として、以下のような投稿を行ってみます。

<!-- ○○の時は以下のタグを消してください -->

<ul>
<li>list1</li>
<!--<li>list2</li>-->
<li>list3</li>
</ul>

実際の表示を確認すると、以下のようにコメントアウトの前後をpタグで囲われてしまっていました。
pタグに余白のスタイルなどがあると、意図しないスペースができてしまいます。

<p><!-- ○○の時は以下のタグを消してください --></p>
<ul>
<li>list1</li>
<p><!--
<li>list2</li>
--></p>
<li>list3</li>
</ul>

対応策として、コメントアウト用のショートコードを作成しました。

functions.php

function comment_out($atts, $content = null) {
    $params = shortcode_atts(array(
        'output' => 'no'
    ), $atts);

    if($params['output'] === 'yes'):
        return '<!--' . $content . '-->';
    else:
        return null;
    endif;
}
add_shortcode('comment', 'comment_out');

コメントアウトとしてソース上に出力するかを設定できるようにしています。

先ほどの例をショートコードに書き換えて試してみます。

[comment output="yes"]○○の時は以下のタグを消してください[/comment]

<ul>
<li>list1</li>
[comment]<li>list2</li>[/comment]
<li>list3</li>
</ul>

outputの値をyesにするとソース上に出力されるようになります。

確認すると、意図した形でコメントアウトをすることができました。

<!--○○の時は以下のタグを消してください-->
<ul>
<li>list1</li>

<li>list3</li>
</ul>

【参考サイト】

• http://webtrace-cuisine.com/201612/commentout/