WordPress 「テーブル内での自動整形の振る舞い」

投稿日:2019年6月22日 更新日:

テーブル「セル」や<div>タグ中にショートコードとテキスト(文章)を混在させたときに、Google HTMLエラーチェッカで確認すると構文エラーが発生するときがあります。 

この原因は、Wordpressのビジュアルエディターとテキスト画面を行き来すると通常は自動整形されますが、要素内では自動整形機能が働かないことが原因のようです。 この要素内でのエラーを回避する注意点をブログします。

我が家の環境は、WordPress(4.9.10)、Affinger5テーマ、TinyMCE Advanced(バージョン 5.1.0)で 「段落タグの保持」を選択しています。

 

 

スポンサーリンク

 

Google HTMLエラーチェッカとエラー表示

HTMLエラーチェッカーとは

Google Chromeで使用するGoogleで開発用に提供されているHTMLの開始・終了タグの過不足などを検出する拡張機能ツールです。 当サイトでも、投稿した記事のチェックで使用していて、簡単にHTMLのタグエラーが判り、中々便利です。

エラーチェックの表示

Google Chromeに「HTMLエラーチェッカー」を追加すると、Chromeの画面に検索アドレスバーの横に

アイコン表示されます。

チェックしたい、ページを表示させて、そのアイコンをクリックすると以下の様なウインドウが表示され何処にタグ・エラーがあるか表示してくれます。

エラー 無しの場合

エラー ありの場合

エラーが発生する条件

通常の投稿

要素を伴わないショートコードや文章では、ビジュアルからテキストに行き来すると下のように自動整形で<P>タグが付きます。 この場合はエラーにはなりません!

ビジュアルモード画面 [ショートコード]

テキストモード画面

 

テーブル「セル」にショートコードとテキスト(文章)が混在する場合

テキストモードで、テーブルの<td>内の内容によって、エラーが表出する場合があります。  以下の例は、エラーが表出する場合です。  テキストモードで、ショートコードの前後で<p>がついておらず、mp3の前後に<p>が付いています。 この場合、テキストからビジュアルに行き来しても、ショートコード前後に<p>が付きません。

ビジュアルモード画面

上記はテーブル「セル」にショートコードと「mp3」という文章が書かれています。

テキストモード画面

ポイント

上のテキストモード画面では、mp3に<P>タグで囲われていますが、ショートコードの[mejsaudio〜]の前後に<P>タグで囲われていません。 この状態でプレビューして、「HTMLエラーチェッカー」にかけると「</P>:開きタグがありません」とのエラーが表出してしまいます。 但し、ブラウザの画面崩れはなく、見かけは正常に表示されます。

 

エラーになる原因と改善方法

ココがダメ

エラー表出の原因

このエラー表出の原因は、テーブルの<td>要素内に<p>タグに囲われた要素と囲われていない要素が混在しているからと推察されます。

ココがポイント

エラー改善策

よって、エラーを無くすには、[mejsaudio〜]の前後に<P>タグを付けるか、逆に、mp3の前後の<p>タグを削除すれば、エラーの表出は無くなります。

この問題は、<div>タグ内でも同様の事象が生じますので、編集時に注意が必要です。

 

以上「テーブル内での自動整形の振る舞い」でした。 タグ構文エラーを見つけるには面倒ですので、編集・更新の都度、プレビュー画面にして「HTMLエラーチェッカー」でエラーの有無を確認することが肝要と思います。

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

 

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2019 All Rights Reserved Powered by AFFINGER5.