WordPressのとあるテーマで「マーカー」として出力されるタグを<span>から<mark>に変更する

某テーマをカスタマイズする

このvestallは、某「LION BLOG」のテーマを適用しているが、過日公開した『WordPressが出力するFeedのタイトルにカテゴリーごと、タグごとに違う定型文を追記する』で、記事の作成中「マーカー：イエロー」を使ってみたら、<span>ダグで該当箇所がマークアップされてて…。

  <span class="markerYellow">hogehoge</span>

う～ん。

試しに「マーカー：ピンク」と「マーカー：ブルー」も使ってみたら、やはり以下でマークアップされた。

マーカー：ピンク
  <span class="markerPink">hogehoge</span>
マーカー：ブルー
  <span class="markerBlue">hogehoge</span>

もちろん速攻で、以下のマークアップになるようにfunctions.phpを修正。

マーカー：イエロー
  <mark class="markerYellow">hogehoge</mark>
マーカー：ピンク
  <mark class="markerPink">hogehoge</mark>
マーカー：ブルー
  <mark class="markerBlue">hogehoge</mark>

心に平安が戻った。

functions.phpの修正箇所

※あくまでも、某「LION BLOG」テーマでの話。

デフォルトだと、wp-content/themes/lionblog/以下に収納されている「functions.php」で設定箇所を探す。「markerYellow」で検索すれば早い。

そこにあるイエロー、ピンク、ブルーの3つのエリアを（念のため）コメントアウトして、その直下に以下の文字列を追記する。
色名を漢字一文字に変更したのは、単なる気まぐれ。デフォルトのままで問題ない。

    array(
      'title' => 'マーカー：黄',
      'inline' => 'mark',
      'classes' => 'markerYellow',
      'wrapper' => true,
    ),
    array(
      'title' => 'マーカー：桃',
      'inline' => 'mark',
      'classes' => 'markerPink',
      'wrapper' => true,
    ),
    array(
      'title' => 'マーカー：青',
      'inline' => 'mark',
      'classes' => 'markerBlue',
      'wrapper' => true,
    ),

続けて、上記部分から50行ほど下に、再び記載されている「markerYellow」に移動。
そこも、イエロー、ピンク、ブルーの3つのエリアを（念のため）コメントアウトして、その直下に以下の文字列を追加する。

  QTags.addButton('qt-markerYellow','マーカー：黄','<mark class="markerYellow">','</mark>');
  QTags.addButton('qt-markerPink','マーカー：桃','<mark class="markerPink">','</mark>');
  QTags.addButton('qt-markerBlue','マーカー：青','<mark class="markerBlue">','</mark>');

CSSで設定されている各色については、クラス名を変更していなければ、そのままでOK（のはず）だ。

尚、vestallではクラスに色名をそのまま使うのも嫌なので、マーカーの呼称と各クラスも以下のように変更している。

マーカー：イエロー  →  マーカー①類
マーカー：ピンク　  →  マーカー②類
マーカー：ブルー　  →  マーカー③類

qt-markerYellow  →  qt-marker1
qt-markerPink    →  qt-marker2
qt-markerBlue    →  qt-marker3

markerYellow     →  marker1
markerPink       →  marker2
markerBlue       →  marker3

こういった場合は、CSSも要変更。

繰り返すが、某「LION BLOG」テーマでの話。