あまめも

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. Macをマウスなしで操作したい!!って時のショートカット抜粋

  2. 【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんて…

  3. 知ってました?Macで簡単に画像を透過処理する方法!

  4. 【Mac】AirDrop初めて使ったけど便利で感動した。

  5. [甘]たったこれだけ?!サイトに「Google マップ」を埋め込…

  6. ショートカットキーの記号を入力しようとしたら「あれ?オプション記…

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

Twitter

ページ上部へ戻る