サポート » 使い方全般 » 記事タイトルを装飾すると、ウィジェットでの表示がおかしくなります

  • 解決済 umaremashita

    (@umaremashita)


    こんばんわ。

    特定の記事のタイトルを一時的・部分的に装飾したいです。
    イベントの実施中にそのイベントの記事を目立たせて、
    イベントが終了したら普通のタイトル表示に戻すようなイメージです。

    投稿ページでタイトル欄に

    なになにイベント<span class="ima">今やってます!</span>

    と入力し、cssで装飾したいのですが、

    各記事のページのタイトルや、ウィジェエット以外の記事一覧では問題なく表示されるものの、
    サイドバーのウィッジェットで表示される新着記事等では

    今やってます!">なになにイベント 今やってます!

    になってしまいます。

    サイドバー関連のプラグインとしては以下の二つを使っています。
    Content Aware Sidebars
    Display Widgets

    サイドバーに正常に記事タイトルを表示するにはどうしたらよいでしょうか?
    よろしくお願いします。

    • このトピックはumaremashitaが6年、 9ヶ月前に変更しました。
    • このトピックはumaremashitaが6年、 9ヶ月前に変更しました。
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • CG

    (@du-bist-der-lenz)

    タイトルに含まれたタグが影響しているのでしょう。CSSでタイトル前に特定の文字を表示させるには、擬似要素を使うのが良いでしょう。

    また、時間指定で注意をひくケースには、こういう表現方法はどうでしょう。(例)
    http://wordpress.woodstock.work/twenty-sixteen/lp#umaremashita

    トピック投稿者 umaremashita

    (@umaremashita)

    おはようございます。返信ありがとうございます。

    タイトルに含まれたタグが影響しているのでしょう。

    その通りだと思います。しかし私にはどう対処して良いかわかりません。

    サイドバーの

    今やってます!">

    を退治する方法を教えていただければと思いますが、このような回答をくださったということは、もしかすると不可避なんでしょうか???

    こんにちは

    使用しているウィジェットはなんでしょうか?
    そのウィジェットが正しくエスケープ処理を行っていないのではないでしょうか。

    構文エラーとなる例)
    <img class="" src="sample.jpg" alt="" width="225" height="225" title="なになにイベント<span class="ima">今やってます!</span>" />

    このように、属性値としてタイトルをエスケープ処理していないことが考えられます。
    自作のウィジェットであれば、strip_tags 関数等でタグを除去するなどの処理を追加してみてください。

    あと、あくまでも個人的な意見ですがタイトルにタグや引用符の使用はお勧めしません。
    CG さんのアドバイスのように擬似要素(after 等)でなんとかするのがいいかと。

    スタイルの例)

    #post-123 .entry-title:after {
    	content: "今やってます!";
    	color: #f00;
    }
    トピック投稿者 umaremashita

    (@umaremashita)

    ishitakaさん、補足どうもありがとうございます!

    そうか、記事IDで個別に設定すればいいのですね。
    CGさんのアドバイスの意味が理解できました。
    タイトルにタグを入れるのはやめることにしました。

    ヒントをいただいたので、あとは自力でやれそうです。
    どうもありがとうございました!!!

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「記事タイトルを装飾すると、ウィジェットでの表示がおかしくなります」には新たに返信することはできません。