※ Advanced Code Editor は、2018年1月26日からセキュリティ上の理由でダウンロード不可となっています。インストール済みの方は速やかに利用を中止して、プラグインを削除してください。以下は公式プラグインページに表示されているメッセージです。
This plugin was closed on January 26, 2018 and is no longer available for download. Reason: Security Issue.
WordPressのテーマ編集画面で行番号表示する代替プラグインは「SyntaxHighlighter Evolved」等があります。以下はAdvanced Code Editor が使用中止になる前の記事です。
WordPressのテーマ編集画面で行番号を表示するプラグイン「Advanced Code Editor」をご紹介します。WordPress の編集画面には元々行番号の表示機能はありませんが、このプラグインで行番号を表示させると、エラー発生時の対処やテーマ修正がやりやすくなります。
また、htmlの内容やCSSの要素に合わせて色が変わるので、コードが見やすくなりますよ。
WordPress 行番号表示プラグイン Advanced Code Editor
WordPressであると便利だなと思う機能の一つに、「編集画面の行番号表示」があります。
WordPressはエラー発生時にその場所を行番号で表示してくれるのですが、テーマ編集画面では行番号が表示されないので、いつも該当のエラーにたどり着くまでとても苦労します。
場合によっては別途エディタを立ち上げて、そこにコードを丸ごとコピペすることもあります。これならエディタに行番号が表示されて、エラー発生箇所がすぐわかるのですが、エラーのたびにいちいちこんなことするのはとても面倒です。
また、複数人でテーマを編集しているときや、以前に修正したコードを再度編集するときも、行番号を共有したり修正した箇所の行番号をメモしておけば、どこを編集したのかがわかりやすくなります。
そんなわけで、WordPressがバージョンアップするたびに行番号表示機能を実装してくれないかと期待するのですが、いつも裏切られます・・・(^^;
でも、行番号表示はプラグインで実装可能です。「Advanced Code Editor」を使えば、テーマ編集画面でエディタのように行番号を表示してくれるようになります。
ただし、Advanced Code Editor を入れても、行番号はテーマ編集画面のみ表示されます。投稿や固定ページの編集画面に行番号は表示されません。
Advanced Code Editor インストール
では、Advanced Code Editor をインストールしてみましょう。ダッシュボードから「プラグイン」→「新規追加」に進み、プラグインの検索窓から「Advanced Code Editor」と入力します。
「今すぐインストール」をクリックして、Advanced Code Editor をインストールします。
インストールが終わったら、「プラグインを有効化」をクリックしてください。これで Advanced Code Editor が使えるようになります。
Advanced Code Editor で行番号表示
Advanced Code Editor をインストールすると、テーマ編集画面が大きく変わります。こちらは通常の WordPress テーマ編集画面です。コードとテンプレートが表示されていますね。
Advanced Code Editor をインストールすると、テーマ編集画面がこう変わります。行番号が表示され、コードも色分けされて見やすくなりました。上部に検索や保存、タグの挿入などのボタンが追加されています。
Advanced Code Editor タグ機能ボタン
ボタン類は上部に配置され、検索やリプレース、保存などの機能が追加されています。また、ショートカットキーにも対応しているので、Ctrl + F で検索、Ctrl + H で置き換え、Ctrl + G でジャンプといった機能が使えます。ショートカットの一覧は上の[？]ボタン(Help)で見ることができますよ。
こちらは検索(Search)機能で、一番左のボタンを押すと検索窓が表示されます。
左から2番目の置き換え(Replace)です。置き換え前と後の文字を入力して、1つずつ置き換えるなら「Replace」を、一気に全て置き換えるなら「Replace all」ボタンを押して下さい。
他にもコメント追加や保存、ファイルの新規作成、ダウンロードなどのボタンが追加されています。
Advanced Code Editor テーマ編集画面デザイン変更
Advanced Code Editor では、テーマ編集画面のデザインが11種類用意されています。デザインの変更はボタンと同じ列にある「Change editor theme:」から選んで下さい。
では、いくつかデザインを見ていきましょう。まずは青い背景の「cobalt」です。
続いて「monokai」です。属性idがはっきり表示され、コードにメリハリがありますね。
こちらは「rubyblue」です。文字が大きくて見やすいですね。
好きなデザインを選べば、編集も捗るでしょう。個人的には文字が大きくて見やすい rubyblue が好みです。
今回紹介したWordPressプラグイン「Advanced Code Editor」の詳しい内容は、こちらの公式プラグインページを参照してください（英語が読める方向け、現在は使用中止）。
