どうも、若干一昔前のHTMLには若干覚えのあるYnek0です。
現在HTMLのversionは5
もはや僕が覚えていたHTMLとは別物になってしまいました。
SCSSやらJSでjQueryやらもうWebの世界は
何か別物になってしまいました。
阿部寛さんのサイト見たいなのが沢山あった時代では
なくなってしまったのですよ。
おっと、話がそれましたね。今回はHTMLタグを
綺麗にするコツをご紹介出来ればと思います。
グーテンベルクを使っていた時の残骸
WordPressになってから一応記事はビジュアルエディタで
書いていたりするのですが、
たまに動作がおかしい場合はHTMLタグを確認するため
テキストモードに移したりします。
特にリライト作業の時はテキストモードを見ると
やけにコメントアウトの記述が目立つのですよ。
<!-- wp:なんたら -->
こんな記述が沢山です。
これ何かと言いますと、次世代WordPress5.0で標準化されるテキストエディタ
『グーテンベルク』を使用するとテキストモードエディタがブロック形式で
編集出来る様になります。
そのため、ブロック1つ作る事にわざわざHTMLコメント
おまけ付きのタグを用意するというなんとも面倒くさい
仕様になっているわけです。
例：グーテンベルクの1段落作成時のHTMLタグ
<!-- wp: なんたらかんたら -->
<p></p>
<!-- /wp: なんたらかんたら -->
これらが連なるとどうなるかと言いますと、
画像の様にワチャワチャとしたテキスト画面が広がるわけなんですよ。
そして何より、公開している記事のソース画面にも表示されるのですよ。
あぁー見る人が見たら『きったねぇなこいつのソース』とか言われるに違いない。
ほんと怖いです。
一度作成した記事を見直すとこう言ったコメントアウトが数多く存在していて
非常に目障りだったりします。
解決策
このコメントを一括で削除したい場合はどうすれば良いでしょう。
。。。そういえば以前こんな記事を書きましたね。
察しが良い方は気付かれたかと思います。
そうです、『正規表現』を使います。
正規表現を使用する事によりコメントアウトされたタグを一括で削除します。
ではその方法を今回はご紹介させて頂きます。
解決策手順
まず、WordPress管理画面の記事一覧より
いずれかの記事をテキストモードで表示させ、
それをすべてコピーします。
次にGoogleドキュメントを開きます。
Googleドキュメントは無題でも構いません、何か適当に新しいドキュメントを
作成して下さい。
作成したドキュメントにコピーした記事を貼り付けて下さい。
次にショートカットキーを使用して置換画面を表示させます。
WindowsとMacで表示が違いますので注意して下さい。
Mac : Command + Shift + h
ショートカットキーを入力するとポップアップ画面が表示されると思います。
そのポップアップ画面を画像の様に入力して下さい。
正規表現を使用するにチェックを入れる。
検索欄に『<!-- .* -->』を入力。
次に変更には何も入れない
すべて置換ボタンをクリック。
すると、コメントアウトが綺麗に削除されます。
あとはこの綺麗になったテキストを
WordPressの記事に上書きすれば、コメントアウトが消えた綺麗な
テキストが仕上がるという事です。
作業を終えて
これでChrome画面からsauce見られても
『こいつコメントアウト滅茶苦茶多くね？』
とか言われなくて済みます。
誰も見ないとかそういうことは無いでしょう。
見る人は見るのです。
結構スッキリする事が出来ました。
ちょっとニッチな部分ではありますが、同じ所でお悩みの方は
一度試してみてはいかがでしょうか。
では以上となります。
また次回、ご贔屓に。
