MarkdownのHタグにクラスを追加する簡単な方法

21Jan2020

MarkdownのHタグにクラスを追加する簡単な方法

こんにちは！あますた(@amaguristar)です。

せっかくMarkdownを使用し始めたので、「<h3>タグにプラグインを入れないでクラスの設定をしたい！」って現状。先日のマーカーの時の置換処理で可能だったので早速実装しました。

色々と応用が効く置換処理

前回マーカーの設定をした際に軽く紹介した 「function.php」にコードを追加しての置換処理 。今回も応用して「<h3>タグ」にクラスを追加します。具体的に何がしたいかと言うと。Markdownで、

### 題名

と書いたら通常

<h3>題名</h3>

となるところを置換処理して、

<h3 class="style3a">題名</h3>

と変換したいって事。

具体的な処理コードは？

WordPressにログイン後、「外観」→「テーマエディタ」→「テーマのための関数(function.php)」と進んで、”function.php”ファイルを表示。適切な箇所に下記コードを追加するだけ。

function ctk_replace_to_custom_tags( $postarr ) {
    $postarr['post_content'] = str_replace('<h3>', '<h3 class="style3a">', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('<h4>', '<h4 class="style4a">', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('<h5>', '<h5 class="style5a">', $postarr['post_content'] );
    $postarr['post_content'] = str_replace('<h6>', '<h6 class="news_headline2">', $postarr['post_content'] );

    return $postarr;
}
add_filter('wp_insert_post_data', 'ctk_replace_to_custom_tags');

ついでなので、<h3>タグだけではなく<h6>タグまで設定しました。

str_replace関数の第2引数に設定するクラスは任意のクラスに変更して下さい。

※1

「function.php」は必ずバックアップしてから編集して下さい。

※2

「下書きを保存」や「公開」を押した時等、保存される際に置換されます。