WordPressでMarkdownを使用し始めたのですが、マーカーを簡単に引ける様に設定してみた
こんにちは！ あますた(@amaguristar)です。
最近、遅ればせながらMarkdownにてブログをカタカタ書き始めた自分。見た目的に”マーカーを引きたい”って場所も「タグを使用しないで簡単に書きたいんだよな」と思い設定してみました。
とりあえず２パターン紹介
パッと思いつくのは２パターン。簡単なのは「css」で編集する方法。もう１つは「function.php」でタグをむりやり置換する方法。どちらもMarkdownの「*」表記を利用。
つまり『*マーカー*』とMarkDownで入力した部分に『マーカー』と表示する様にします。
「css」を編集する場合
設定方法は簡単。Markdownの「*」はHTMLだと「<em>タグ」に置き換えられるので、cssで<em>タグの設定を変えるだけ。
em { background: linear-gradient(transparent 70%, #ffea00 70%); }
これが一番簡単だと思います。具体的なマーカー表示用のcss設定は下記ページを参照。
「function.php」を編集する場合
<em>タグを他のタグに置換するイメージ。具体的な例をあげると。
<em>ここが重要なポイント</em>です。というHTMLを、
<span class="mark_yellow">ここが重要なポイント</span>です。と置換すること。具体的なコードを書くと。
function ctk_replace_to_custom_tags( $postarr ) {
$postarr['post_content'] = str_replace('<em>', '<span class="mark_yellow">', $postarr['post_content'] );
$postarr['post_content'] = str_replace('</em>', '</span>', $postarr['post_content'] );
return $postarr;
}
add_filter('wp_insert_post_data', 'ctk_replace_to_custom_tags');上記を「function.php」の適切な位置にコピーするだけ。
※1
「function.php」は必ずバックアップしてから編集して下さい。
※2
「下書きを保存」や「公開」を押した時等、保存される際に置換されます。
「str_replace関数」を簡単に説明すると、
str_replace( ‘検索文字’, ‘置換文字’, 検索文字列 )
戻り値は、置換後の文字列。
戻り値は、置換後の文字列。
まとめ
基本的に「css」の<em>タグ編集で問題ないと思います。「function.php」の編集をして表示するケースは・・・パッと思いつきませんが、知ってると何かの役に立つかもしれないので一応紹介。
