【WordPress】コンテンツ本文中のHTMLタグにクラスを付ける方法(ストーク・スワロー等)

自分用メモ。

ブログのデザインをSANGOから「スワロー」という有料テーマに変更しました。スワローは、ブロガーの定番テーマである「ストーク」の派生テーマで、やぎぺーさんというプロブロガーが監修したものです。

ぶっちゃけ、ストークとほぼ一緒なんですが、少しだけスッキリしたデザインになっていて、値段も何故か900円安いです。

参考記事

まぁまぁ気に入っているテーマなんですが、ストークにしても、今回採用したスワローにしても不満点があります。出力されるHTMLが微妙にカスタマイズしにくいんですよね。SANGOはカスタマイズしやすいHTMLを吐き出しますが、ストークやスワローは作りが甘くて苦労させられます。

一番困ったのが「リスト」の表示です。なんか端に寄っていてあまり見やすくありません。

個人的には、リストはSANGOの様にちょっと右に寄せて、その周りを薄い色のボーダーで囲いたいわけです。

CSSをいじれば簡単に実現できるのですが、ストークやスワローの場合<ul>タグにクラスが設定されていません。

しかも、CSS的に他の場所と共用されているので、ここの<ul>をいじると本文以外のリストのデザインも一緒に変わってしまうという残念仕様。本文の部分と他の要素を区別できる様に<div>で囲ってないので厄介です(たぶん)。

まぁ、テーマを編集すればいくらでも改造はできますが、大幅な改造になってしまいアップデートが厳しくなってきます。

PHPで動的に<ul>にクラスを追記するのが現実的。その方法を自分用のメモとして残しておきます。もちろん、ストークやスワロー以外のテーマも同様にできます。

 

いろいろ方法はあると思いますが、僕は単純に本文にある<ul>タグと<ol>をクラス付き(<ul class=”content_ul”>等)に置き換えてしまう様にしました。

function change_any_texts($text){
$replace = array(
//’変更前’ => ‘変更後’,
‘<ul>’ => ‘<ul class=”content_ul”>’,
‘<ol>’ => ‘<ol class=”content_ul”>’
);
$text = str_replace(array_keys($replace), $replace, $text);
return $text;
}
add_filter(‘the_content’, ‘change_any_texts’);

具体的なPHPコードはこんな感じ。'<ul>’ => ‘<ul class=”content_ul”>’,の部分を書き換えれば、他のタグにも応用できます。

これを子テーマのテーマの「functions.php」に追記するだけです。子テーマに改造部分を記載すればテーマをアップデートしても改造部分が引き継げます。

.content_ul {
border: solid 1px #ddd;
padding: 8px 10px 8px 30px;
}

content_ulというクラス名が追加されるので、好きなCSSを追記すればOK。

こんな感じになります。

スポンサーリンク