サポート » 使い方全般 » タイトルにHTMLタグを入れると

  • Mako

    (@mako09)



    自分で設置している WordPress に次のようなタイトルの記事を書きました。

    HTML の <ruby> に思うこと

    「ruby」を山括弧の文字参照で囲ったものを、これはコードを表すものだからと考えたので、code というタグで囲いました。

    するとたとえば、このブログの RSS では「HTML の に思うこと」のようにタグに囲まれた部分が無視されてしまいました。それから Jetpack で Twitter に自動投稿するようにしているのですが、その Twitter でも同様に

    となってしまいました。

    これは
    ・記事タイトル内にHTMLタグを書くのは作法としてよくない。書き手の問題。
    なのか
    ・記事タイトル内のHTMLタグを適切に外せないのはバグである。WordPressやプラグインの問題。
    のどちらと考えるのがいいでしょうか?

    • このトピックは Makoが2 ヶ月前に変更しました。
    • このトピックは Makoが2 ヶ月前に変更しました。

    ヘルプの必要なページ: [リンクを見るにはログイン]

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • munyagu

    (@munyagu)

    こんにちは

    どちらでもないと思います。

    codeタグは囲まれた文字列を等幅フォントなどを用いて見た目をコントロールするもので、タイトルに用いる意味がないと思います。

    その他の要件で記事タイトル内にHTMLタグを書きたいのであれば
    ・実体参照を使う
    ・テーマのカスタマイズやフィルターフックなどを使ってh1タグ、titleタグの出力をコントロールする
    などを行って意図したとおりに出力されるようにしたらいいと思います。

    Twitterについては、私はJetpackの仕様もTwitter側の仕様もよく分かりません。

    Mako

    (@mako09)

    なるほど。

    見た目をコントロールするのはスタイルであって、タグは“意味”なので「タイトルに用いる意味がない」は違うと思うんですよね。

    今回は code でしたが、WordPress の記事のタイトル中に、強調だろうが abbr だろうが ver だろうが、意味を付けたいときはあると思うんですよね。それこそ ruby を振りたいときだってある。どうなるか試してみてませんが。

    タグだけを無視してそれが囲んでるものは残してくれればいいのですが、それが囲んでいるものもひっくるめて無視するのはどうなんだろうか、と思ったのです。

    munyagu

    (@munyagu)

    無視というのは、titleタグについてですよね?
    h1タグにはちゃんと<code>タグが出力されています。

    titleタグ中に許されているのは「要素間のホワイトスペースではないテキスト」です。
    elementは許可されておらず、内部のタグはすべて無視されます。
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/title

    ですので、WordPressでは正しくタイトルタグでエレメントを取り去り、<ruby>は正しく実体参照で出力しています。
    <title>HTML の <ruby> に思うこと – 半月記</title>

    RSSを拝見しましたが、別の書き方で実体参照されています。
    <title>HTML の <ruby> に思うこと</title>

    Twitter向けのタイトルはJetPackが出力しているのだと思いますが、こちらはがんばって(?)<code>についても実態参照を出力しています。
    <meta name="twitter:text:title" content="HTML の <code><ruby></code> に思うこと"/>

    どれもこれも、titleタグ中にタグが許されていないためにこのようになっています。

    無視という意味では無視しているのはTwitterです。
    しかし、このような実体参照になっているtitleタグをTwitterやその他埋め込みがどう扱うかは、扱う側の仕様に依存するんじゃないですかね。
    それらデコードについて特に標準化されておらず、デコードしないからと言って、何かの不具合ではないように思います。
    Twitterでの扱いがお知りになりたいなら、Twitter社に問合せてみてはどうでしょうか。

    • この返信は2 ヶ月前に  munyagu さんが編集しました。
    • この返信は2 ヶ月前に  munyagu さんが編集しました。
    munyagu

    (@munyagu)

    投稿すると実体参照がデコードされてしまうようなので、実際のtitleタグなどがどうなっているかは、ご自身のサイトのソースを確認してみてください。

    Mako

    (@mako09)

    いくつか試してみて、自分の勘違いに気がつきました。ごめんなさい。

    RSS と Jetpack の自動投稿と、ちょっと違うものの結果が同じになったので、てっきり送出側の段階で消失していると思いこんでしまいました。RSS の XMLを見てみて、送出されているものには、いま問題にしているものはちゃんと存在していることを確認しました。

    ということで、RSS リーダーなり twitter なり受け手の段階で消えているようです。すみませんでした。

    それから、記事タイトルに HTML タグがある事自体は問題なくて(記事の h1 以外に使われるときには WordPress が the_title_attribute() あたりで無害化するので)、今回引っかかったのは山括弧(たとえそれが実体参照の表記になっていても)のようです。

    だからもし、「条件 a<b かつ c>d の場合」なんていう記事タイトルだとしたら、今回と同様に WordPress そのもので見るときには問題なくて、RSS ではそれを受け取った側で変なことになります。
    (ほんとうにこんなタイトルの記事を書く必要があるときはどうすればいいんだろう?)

    お騒がせしました。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    「HTML の &lt;ruby&gt; に思うこと」じゃダメですかね。
    https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7

    ※使うときは&を半角英数にしてください。

    • この返信は2 ヶ月前に  Okamoto Hidetaka さんが編集しました。
    Mako

    (@mako09)

    山括弧(不等号記号)を直接書くんじゃなくて文字実体表記で書けば、ということですね。
    それでもだめでした。

    記事タイトルに「HTML の &lt;ruby&gt; に思うこと」と書いたとします。
    WordPress の RSS の XML を見ますと title タグのところでこれが「HTML の &#060;ruby&#062; に思うこと」と、数値文字参照になってます。

    で、RSSリーダー(いま試してるのは Linux の Liferea)で読むとこれが「HTML の に思うこと」と表示されます。

    前のコメントの例だと、WordPress で「条件 a&lt;b かつ c&gt;d の場合」の記事タイトルは、RSSリーダーでは「条件 ad の場合」になります。

    ※このコメント文中の&はぜんぶ半角英数だと思ってください。

    nobita

    (@nobita)

    こんにちは、

    記事タイトルに記述したhtmlが、タイトル要素でなにも削除されずに表示したいという事でしょうか?

    HTML部分を、数値参照(16進数) にしてみてどうでしょう?

    こちらで、テストした文字列は以下にあります。

    https://gist.github.com/tenman/f97dcc339cd5e0fe05110a39ca39731d

    エンコードする時に便利なサイト

    https://encodemaniax.com/

    まとめると、

    
    HTML の &#x3c;ruby&#x3e; に思うこと
    
    • この返信は2 ヶ月前に  nobita さんが編集しました。
    Mako

    (@mako09)

    このトピックの題を変えてほしくなってきた。

    途中で結論のようなことは出てるんですが、
    まず「タイトルにHTMLタグを入れると」は私の検証不足でした。ぜんぜん関係ありませんでした。申し訳ありません。

    もし問題があるとすれば、タイトルに山括弧(不等号記号)を入れる場合(生で入れようが文字参照にしようが数値参照にしようが)です。

    でも、これも WordPress の範疇では問題ありません。記事タイトルにはふつうに表示されるし、たとえば管理画面の投稿一覧やダッシュボードのアクティビティに表示されるときにも問題ありません。
    RSS として吐き出されるものにもちゃんと含まれていますので、これも WordPress としてはちゃんと仕事してます。

    なので、このトピックはそもそもまったくこの場にふさわしくなかったということです。ほんとによく試しもしないで書き込んでごめんなさい。

    たまたま私の使っている RSSリーダーが(そのほかでどうなるかは見てません)、このような文字列を正しく解釈しないということのようです。あと Jetpack 経由の Twitter も。こっちはぜんぜん追ってもいませんけど。

    いずれにしろ WordPress は無罪でした。ほんとすみません。

    nobita さんご指摘のようにやってみても、結果は同じでした。WordPress の範囲では正しく残っていて、RSS リーダーのところで消えます。

    • この返信は2 ヶ月前に  Mako さんが編集しました。
    nobita

    (@nobita)

    @mako09 さん

    そんなに、結論を急がなくてもいいのではないでしょうか、私は、たまたまちょっと関心のある事柄だったので、回答してみたんですが、、、

    私的には、WordPressの通常の動作では
    投稿タイトルに

    
    <abbr title="HyperText Markup Language">HTML</abbr>について考える
    

    といった、HTML要素の混じったタイトルを入力した場合、投稿タイトルは

    
    <h1 class="entry-title"><abbr title="HyperText Markup Language">HTML</abbr>について考える</h1>
    

    と表示されますが title要素では、

    
    <title>HTMLについて考える – Coffee Shop MikeNeco</title>
    

    と表示されるのが通常ではないかと思います。

    つまり、投稿に入力されたhtml要素は、削除されます。

    なぜ、投稿タイトルと、タイトル要素のタイトルが異なるのかについては、通常投稿では、the_title()が主に使われますが、タイトル要素では、single_post_title()が使用されて、このタイトルは、strip_tags(),esc_html()が、default-filters.phpで適用されるためです。
    rssについても、同様にフィルターが適用されます。

    したがって、

    
    HTML の &#x3c;ruby&#x3e; に思うこと
    

    のようなhtml要素とは異なるものに変換しないと、titleには、HTML部分には追加されないのではないかと、思うのですが、

    でも、これも WordPress の範疇では問題ありません。記事タイトルにはふつうに表示されるし、たとえば管理画面の投稿一覧やダッシュボードのアクティビティに表示されるときにも問題ありません。
    RSS として吐き出されるものにもちゃんと含まれていますので、これも WordPress としてはちゃんと仕事してます。

    私の環境の問題ですかね? ちゃんと動くってところが理解できないんです。

    
    カスタマイズしたテーマを使っていて、
    
    add_theme_support( 'title-tag' );
    
    とか、
    
    wp_title()
    
    使っていない場合は、的外れになりますが
    

    自分なりゆっくり考えてみようと思います。

    あたりの回答が出せず、ごめんなさい。

    • この返信は2 ヶ月前に  nobita さんが編集しました。
    • この返信は2 ヶ月前に  nobita さんが編集しました。
    Mako

    (@mako09)

    えーと、何が問題なんだっけ? ;p

    再現手順は昨晩のコメントに書いたとおりで、

    記事タイトルに「HTML の &lt;ruby&gt; に思うこと」と書いたとします。
    WordPress の RSS の XML を見ますと title タグのところでこれが「HTML の &#060;ruby&#062; に思うこと」と、数値文字参照になってます。

    で、RSSリーダー(いま試してるのは Linux の Liferea)で読むとこれが「HTML の に思うこと」と表示されます。

    前のコメントの例だと、WordPress で「条件 a&lt;b かつ c&gt;d の場合」の記事タイトルは、RSSリーダーでは「条件 ad の場合」になります。

    です。記事を書く際に生で書いても(編集:生だとそもそも保存できないかな)&lt;でも数値文字参照の10進でも16進でも、結果は同じです。ご説明いただいたような関数で処理されるので(私も昨晩ソースを見てみました)。

    繰り返しになりますが、WordPress の RSS 出力の段階では数値文字参照の形になっています。nobitaさんの例示のように16進ではなく10進ですが。

    > ちゃんと動くってところが理解できないんです。

    ほんとトピックの題を変えてしまいたいくらいなんですが、記事タイトルにHTMLタグを入れたら、と考えないほうがいいです。
    「条件 a&lt;b かつ c&gt;d の場合」みたいな例のほうが誤解がないです。

    これでいうと、WordPress の通常の表示や、管理画面の投稿一覧やダッシュボードのアクティビティのところではちゃんと「&#060;b かつ c&#062;」が表示されて意味がとおります。RSS の出力は上述のとおりです。いずれも山括弧(不等号記号)は文字参照表記に変換されてるんだと思います。

    で、最後に RSSリーダーで見たら「&#060;b かつ c&#062;」の部分が消えて意味不明になってしまう、ということです。

    ※このコメント文中の&はぜんぶ半角英数だと思ってください。

    • この返信は2 ヶ月前に  Mako さんが編集しました。
    • この返信は2 ヶ月前に  Mako さんが編集しました。

    記事タイトルに「HTML の &lt;ruby&gt; に思うこと」と書いたとします。
    WordPress の RSS の XML を見ますと title タグのところでこれが「HTML の &#060;ruby&#062; に思うこと」と、数値文字参照になってます。

    enc2ncr()でフィルターされるため上のような事になります。なので、16進使うと変換が起きないっぽいよという意味で、コメントしました。

    nobita さんご指摘のようにやってみても、結果は同じでした。WordPress の範囲では正しく残っていて、RSS リーダーのところで消えます。

    私が期待していた答えは、&lt;ruby&gt;が&#060;ruby&#062; のような変換が実際に起きたかどうかです。

    これでいうと、WordPress の通常の表示や、管理画面の投稿一覧やダッシュボードのアクティビティのところではちゃんと「&#060;b かつ c&#062;」が表示されて意味がとおります。RSS の出力は上述のとおりです。いずれも山括弧(不等号記号)は文字参照表記に変換されてるんだと思います。

    で、最後に RSSリーダーで見たら「&#060;b かつ c&#062;」の部分が消えて意味不明になってしまう、ということです。

    default-filters.phpは、既に目を通したという事でしたね、rssのタイトルに以下のフィルターかかっているんだから当然と思いませんか?

    
    add_filter( 'the_title_rss',      'strip_tags'                    );
    add_filter( 'the_title_rss',      'ent2ncr',                    8 );
    add_filter( 'the_title_rss',      'esc_html'                      );
    

    タイトル要素の &#060;ruby&#062; と変換された部分ですが、TwentySeventeenで同じことをやってみてください。(実態参照を使わない、大なり小なりを入力)多分 rubyは消えます。(私の環境では少なくとも消えるという意味です)
    テーマのタイトル要素の実装はたくさんあるので、@mako09さんのサイト内だけでOKであればテストする必要もないと思いますが、現在のWordPressが、どのような表示を標準的に考えているのかは、デフォルトテーマにあたるといいのではないかもいます。

    以上 蒸し返しをするつもりはありませんでしたので、この投稿での私の最後のお返事という事で了承ください。

    • この返信は1 ヶ月、 4 週間前に  nobita さんが編集しました。
13件の返信を表示中 - 1 - 13件目 (全13件中)
  • このトピックに返信するにはログインが必要です。