@mami6500

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

[WordPress]コメントアウトが表示されてしまう

Q&A

Closed

解決したいこと

function.phpで作成したコードのコメントアウトが検証画面上のソースコードに反映されてしまう。

例)
現在WordPressで自作テーマを作成しているのですが、等のコメントアウト部分がソースコードに反映されてしまいます。
また、pタグも生成されてしまっている状況です。

発生している問題・エラー(検証画面一部抜粋)

<!-- wp:heading-->
<p></p>
<h2>menu</h2>
<p><!-- /wp:heading --></p>

実際のコード

register_block_pattern(
		'menu',
		array(
			'title'       => __('メニュー', 'my-plugin'),
			'content'     => '
			<div class="wp-block-column">
    			<!-- wp:heading-->
    			<h2>menu</h2>
    			<!-- /wp:heading -->
				<div class="wp-block-box">
					<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
					<figure class="wp-block-image size-large menu-img"><img src="' . get_template_directory_uri() . '/assets/images/white-creamy-latte.png" /></figure>
					<!-- wp:paragraph {"className":"concept"} -->
					<p class="menu-text">クリーミー・ホワイトラテ<br><span>ふわふわのミルクフォームと濃厚なエスプレッソを贅沢に合わせたホワイトラテ。ミルクの優しさとエスプレッソの深みが絶妙に調和し、ほっとする一杯です。</span></p>
					<!-- /wp:paragraph -->
				</div>
			</div>',
			'categories'  => array('menu'),
		)
	);

また、本件とは少しズレる話なのですが、現在ブロックエディタでテーマを作成しているのですが、クラッシックエディタとどちらが主流、おすすめ等ありましたらご教授いただけますと幸いです。

知識不足で解決方法がわからず、お力貸していただけますと幸いです。

0 likes

3Answer

コメントアウトが検証画面上のソースコードに反映されてしまう。

ちょっと意味が不明ですが、ソースコードをコメントアウトしても、その結果がブラウザの画面に反映されず、コメントアウトする前の画面になってしまうという意味と理解してレスします。

ブラウザのキャッシュの問題ではないのですか?(ソースを変更しても、ブラウザは変更前の html, css をキャシュから取ってくるので、変更が画面に反映されないということ)

ブラウザのキャッシュを削除してから試したらどうなりますか?

0Like

Comments

  1. @mami6500

    Questioner

    function.php

    register_block_pattern(
    		'menu',
    		array(
    			'title'       => __('メニュー', 'my-plugin'),
    			'content'     => '
    			<div class="wp-block-right">
    			<!-- wp:heading-->
    			<h2>menu</h2>
    			<!-- /wp:heading -->
    			<ul class="flex">
    				<li class="wp-block-box">
    					<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
    					<figure class="wp-block-image size-large menu-img"><img src="' . get_template_directory_uri() . '/assets/images/white-creamy-latte.png" /></figure>
    					<!-- /wp:image -->
    					<!-- wp:paragraph {"className":"concept"} -->
    					<p class="menu-text">クリーミー・ホワイトラテ<br><span>ふわふわのミルクフォームと濃厚なエスプレッソを贅沢に合わせたホワイトラテ。ミルクの優しさとエスプレッソの深みが絶妙に調和し、ほっとする一杯です。</span></p>
    					<!-- /wp:paragraph -->
    				</li>
    			</ul>
    			</div>',
    			'categories'  => array('menu'),
    		)
    	);
    

    検証画面

    <div class="wp-block-right">
    			<!-- wp:heading--><p></p>
    <h2>menu</h2>
    <p>			<!-- /wp:heading --></p>
    <ul class="flex">
    <li class="wp-block-box">
    					<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} --><p></p>
    <figure class="wp-block-image size-large menu-img"><img decoding="async" src="http://localhost/wp-content/themes/unique%20_cafe/assets/images/white-creamy-latte.png"></figure>
    <p>					<!-- /wp:image --><br>
    					<!-- wp:paragraph {"className":"concept"} --></p>
    <p class="menu-text">クリーミー・ホワイトラテ<br><span>ふわふわのミルクフォームと濃厚なエスプレッソを贅沢に合わせたホワイトラテ。ミルクの優しさとエスプレッソの深みが絶妙に調和し、ほっとする一杯です。</span></p>
    <p>					<!-- /wp:paragraph -->
    				</p></li>
    </ul></div>
    

    解決したいこと

    ・Pタグが自動生成されている原因を突き止め消去したい。
    <!-- wp:heading-->等のコメントアウトが検証画面で反映されているため消去したい

  2. 聞いたことに答えていただかないと話が通じなくなる一方なんですけど。

?等のコメントアウト部分がソースコードに反映されてしまいます。
また、pタグも生成されてしまっている状況です。

どこのpダグでしょうか?
コメントアウトされているpタグが見当たりませんが。

0Like

Comments

  1. @mami6500

    Questioner

    function.php

    register_block_pattern(
    		'menu',
    		array(
    			'title'       => __('メニュー', 'my-plugin'),
    			'content'     => '
    			<div class="wp-block-right">
    			<!-- wp:heading-->
    			<h2>menu</h2>
    			<!-- /wp:heading -->
    			<ul class="flex">
    				<li class="wp-block-box">
    					<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
    					<figure class="wp-block-image size-large menu-img"><img src="' . get_template_directory_uri() . '/assets/images/white-creamy-latte.png" /></figure>
    					<!-- /wp:image -->
    					<!-- wp:paragraph {"className":"concept"} -->
    					<p class="menu-text">クリーミー・ホワイトラテ<br><span>ふわふわのミルクフォームと濃厚なエスプレッソを贅沢に合わせたホワイトラテ。ミルクの優しさとエスプレッソの深みが絶妙に調和し、ほっとする一杯です。</span></p>
    					<!-- /wp:paragraph -->
    				</li>
    			</ul>
    			</div>',
    			'categories'  => array('menu'),
    		)
    	);
    

    検証画面

    <div class="wp-block-right">
    			<!-- wp:heading--><p></p>
    <h2>menu</h2>
    <p>			<!-- /wp:heading --></p>
    <ul class="flex">
    <li class="wp-block-box">
    					<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} --><p></p>
    <figure class="wp-block-image size-large menu-img"><img decoding="async" src="http://localhost/wp-content/themes/unique%20_cafe/assets/images/white-creamy-latte.png"></figure>
    <p>					<!-- /wp:image --><br>
    					<!-- wp:paragraph {"className":"concept"} --></p>
    <p class="menu-text">クリーミー・ホワイトラテ<br><span>ふわふわのミルクフォームと濃厚なエスプレッソを贅沢に合わせたホワイトラテ。ミルクの優しさとエスプレッソの深みが絶妙に調和し、ほっとする一杯です。</span></p>
    <p>					<!-- /wp:paragraph -->
    				</p></li>
    </ul></div>
    

    解決したいこと

    ・Pタグが自動生成されている原因を突き止め消去したい。
    <!-- wp:heading-->等のコメントアウトが検証画面で反映されているため消去したい

WordPressには現在、クラシックテーマとブロックテーマという二つの開発方法があり、質問者様の記述を見るに「ブロックテーマ」に該当するかと思います。
クラシックテーマと異なってブロックテーマは(色々割愛しますが)その名の通り「ブロック(要素)」を構築してサイトを開発していくものです。

質問者様の言うコメントアウトは以下の部分でしょうか?
この場合、これらは「WordPressが自動生成する(ブロック)コード」で、コメントアウトではありません。

<!-- wp:heading--> // <h>:見出しタグ
<!-- wp:paragraph {"className":"concept"} --> // <p>:段落タグ

function.phpで作成したコードのコメントアウトが検証画面上のソースコードに反映されてしまう

function.php内のブロックコードを削除すると自ずとコメントアウト(ブロックコード)も表示されないと思います。(※試していなので確実性はありません)

pタグも生成されてしまっている状況

上記に関してはエディタで改行をしているために生成されているのだと思います。
WordPressのエディタ上での段落内改行は「shift+enter」です。
ただ単にenterで改行すると段落タグが生成されます。

現在ブロックエディタでテーマを作成しているのですが、クラッシックエディタとどちらが主流、おすすめ等ありましたらご教授いただけますと幸い

エディタに関してはブロックエディタが主流だと筆者の肌感覚的には感じています。
質問者様はregister_block_patternでブロックを生成しているので必然的にブロックエディタとなると思います。

蛇足ですが、冒頭で少し触れました通り現状テーマが二つあり、それぞれ用途に応じて選ぶ状況です。
従来のようにコーディングして開発をしていく場合はクラシックテーマ、
ノーコードに近い開発をしていく場合はブロックテーマだと思います。

0Like

Your answer might help someone💌