ワイヤード・パンチ

WordPressの記事内にあるタブが、勝手にスペース4つに変換される処理を無効化する方法。

JPmarkdownというプラグインを使ってマークダウン形式を使用可能にしている場合は、該当部分の左端にタブでインデントを取ることで、wordpressの記事上にソースコードを表示可能になります。

しかし、ぼくはインデントを取るとき断然タブ派です。スペースでインデントを取るのはソースコードが崩れやすい原因なので、はっきり言ってキライです。

それなのに、投稿した記事のページを開いてみると、タブが勝手にスペース4つに置き換えて表示されてしまいました。

広告

スペース4つになる原因。

上記の写真のように、記事の編集画面ではちゃんとタブを使って、インデントを取っています。

しかし、保存してから実際に記事を表示してみると、最初の写真のようにスペースになっているという状態です。

ただ、編集画面を再読込しても、原文であるマークダウンは勝手に置き換えられてはいませんでした。

なお、記事の保存時には見えないところで、マークダウンをHTMLに変換したものも一緒に保存されています。

実際の記事では当然ながらそちらが表示されることになりますが、その裏で保存されているHTMLに対して、勝手にスペースへの変換がかかっているようです。

こうなると、wordpressの管理画面からでは対処しようがありません。

対処法。

JPmarkdownプラグインを直接編集するという手もありますが、そうするともしアップデートがあったとき、編集内容が上書きされてしまいます。

しかし親切なことに、JPmarkdownのソースコードの各所にフックが用意されているため、特定の処理のあとに、自分で処理を追加することができます。

ただ残念なことに、タブからスペースに変換する処理を止めること自体はできませんでした。

よってその代わりに、変換の処理が行われた直後にあるフックに対して、元に戻すための処理を追加してやりましょう。

以下のコードを、現在使っているテーマのfunctions.phpに追加することで、変換を元に戻すことができます。

add_filter("wpcom_markdown_transform_post", "do_not_convert_from_tab_to_space");
function do_not_convert_from_tab_to_space($text) {
	$text = str_replace("ここに半角スペース4つを入れてください", "\t", $text);
	return $text;
}

注意点として、当ブログには上記の処理が入っているため、コード内にあるスペース4つも、記事保存時にタブに置き換わってしまいます。

よって、各自でスペース4つへの置き換えをお願いします。

これで、記事保存時にタブがスペース4つに置き換わることはなくなります。

ただし、すでに作成済みの記事、ただこの処理を入れるだけではスペース4つのままなので、記事を再保存することで適用されます。

余談。

記事内のソースコードを色付けは、「WP code highlight.js」というプラグインで行っています。

また、cssがデフォルトのままだと余計な余白があったり、タブのサイズが大きすぎたりして見づらいので、調整してやりましょう。

.entry-content pre {
	padding: 0;
}
.entry-content pre code {
	padding: 1.5rem;
	line-height: 1.6;
}

pre {
	tab-size: 4;
}