ワイヤード・パンチ

WordPressにて、JetpackによるMarkdown記法が有効のとき、タブがスペース4つに変換されるのを無効化する方法。

私はスペースによるインデントが、どうしても許せません。

1つ段落を落としたいときに、何度もバックスペースを連打するのが面倒ですし、スペースの個数が整えられていないと、コードがぐちゃぐちゃに崩れる原因になるからです。

タブであれば、個人ごとにエディタ側で好きな大きさに切り替えられますからね。

一番見やすいのはスペース4個分だと思いますが。

それはさておき、当サイトにソースコードを載せるときも、もちろんインデントはタブで統一しています。

…そのはずだったのですが、タブを入れたはずなのに勝手にスペース4つに変換されていることがあったので、それの原因と対処法について。

タブがスペース4つに変換されていた原因について。

いつもWordpressで記事を書く際は、クラシックエディターかつJetpackというプラグインを入れて、Markdown記法を使用しています。

そしてエディター内にソースコードを書くときは、下記のような感じです。

そして記事を保存し、実際に表示させると、~~~はpre codeに変換されて、その中身がソースコード表示用の枠となります。

しかし上記のように、pタグの横にあったタブによるインデントが、勝手にスペース4つに変換されてしまいます。

なお、Jetpackをいったん無効化し、~~~ではなくpre codeタグで直接囲った場合は、タブのままでした。

よって、Jetpackに原因があると思われます。

タブをスペース4つに変換されない方法。

上記コードを、使用中のテーマのfunctions.phpに入れましょう。

そして記事を保存し直すことで、タブはそのままタブとして維持されるようになります。

なお注意点として、すでにスペース4つで表示されてしまっている記事は、再度保存し直す必要があります。

このコードを入れてから保存した記事に対してのみ有効となります。

また、エディタによっては保存のたびに、スペース4つをタブに変換する設定があるかもしれません。

そういう設定を使っている場合は、functions.phpを編集するときに、上記コードのダブルクオート内のスペースが、勝手に置き換えられないように注意しましょう。

余談。おすすめのコード表示用Wordpressプラグイン。

以前は「WP Code Highlight.js」というプラグインを使用していましたが、すでにWordpress公式のプラグイン一覧の中から消失していました。

現在でも使えないことはなかったのですが、もうサポートされないプラグインだと、のちのWordpress本体やphpのアップデートなどで、使用不能になる恐れがあります。

Urvanov Syntax Highlighter – WordPress プラグイン | WordPress.org 日本語

よって現在は、「Urvanov Syntax Highlighter」というプラグインに乗り換えました。

あちこちのサイトで「Crayon Syntax Highlighter」というプラグインがおすすめされており、現在も存在はするのですが、そのプラグインはすでに更新が何年も停止してしまっており、php7以上ではエラーになります。

かつての人気だったCrayonの代替であり、なおかつ現在の環境にも対応しているので、おすすめです。

(実際に、設定画面ではCrayonの名前がそのまま残ってる。)

また、他のプラグインだとソースコードを、専用のショートコードや専用のclassが付いたタグで囲わないといけない手間がありますが、Urvanovであればpre codeもしくは~~~のままでも使用可能です。

過去の記事を書き換える必要がありません。もし多くの記事が存在していたら大変なので。

ただ、デフォルト設定だとHTMLタグがエスケープされてしまうので、「コード内のHTMLエンティティを出力」は有効にしておきましょう。