閉じる
閉じる

あまめも

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
「下書きを保存」や「公開」を押した時等、保存される際に置換されます

まとめ

str_replace関数」を使用して置換処理も簡単。関数の詳細な説明は下記リンク参照。次回は応用して再利用ブロックの表示もMarkdownで打ち込める様にします。

関連記事

  1. [甘]パンくずリストつけてみた。

  2. [甘]WordPressにログインできない!?「.htacces…

  3. 雑誌

    「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能…

  4. Markdownを使用して簡単にgutenbergの再利用ブロッ…

  5. Gitを使用してると「このファイルは管理しないんだけど・・・」っ…

  6. list

    定義リスト<dl><dt><dd&…

こんなメモもありますよ♪

Twitter

ページ上部へ戻る