いわしブログ

京都のウィンドミル代表いわしのブログです。wordpressやfacebookの設定、ブログ運営について備忘録代わりに更新してます。最近は動画も作ってます。

*

WordPressのテーマ編集で行番号を表示するプラグイン Advanced Code Editor

      2016/05/05

WordPress 行番号表示プラグイン 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 が使えるようになります。

advanced code editor プラグインを有効化

Advanced Code Editor で行番号表示

Advanced Code Editor をインストールすると、テーマ編集画面が大きく変わります。こちらは通常の WordPress テーマ編集画面です。コードとテンプレートが表示されていますね。

WordPress テーマ編集画面

Advanced Code Editor をインストールすると、テーマ編集画面がこう変わります。行番号が表示され、コードも色分けされて見やすくなりました。上部に検索や保存、タグの挿入などのボタンが追加されています。

advanced code editor テーマ編集画面

Advanced Code Editor タグ機能ボタン

ボタン類は上部に配置され、検索やリプレース、保存などの機能が追加されています。また、ショートカットキーにも対応しているので、Ctrl + F で検索、Ctrl + H で置き換え、Ctrl + G でジャンプといった機能が使えます。ショートカットの一覧は上の[?]ボタン(Help)で見ることができますよ。

こちらは検索(Search)機能で、一番左のボタンを押すと検索窓が表示されます。

advanced code editor 検索

左から2番目の置き換え(Replace)です。置き換え前と後の文字を入力して、1つずつ置き換えるなら「Replace」を、一気に全て置き換えるなら「Replace all」ボタンを押して下さい。

advanced code editor 置き換え Replace

他にもコメント追加や保存、ファイルの新規作成、ダウンロードなどのボタンが追加されています。

Advanced Code Editor テーマ編集画面デザイン変更

Advanced Code Editor では、テーマ編集画面のデザインが11種類用意されています。デザインの変更はボタンと同じ列にある「Change editor theme:」から選んで下さい。

advanced code editor デザイン変更

では、いくつかデザインを見ていきましょう。まずは青い背景の「cobalt」です。

advanced code editor デザイン cobalt

続いて「monokai」です。属性idがはっきり表示され、コードにメリハリがありますね。

advanced code editor デザイン monokai

こちらは「rubyblue」です。文字が大きくて見やすいですね。

advanced code editor デザイン rubyblue

好きなデザインを選べば、編集も捗るでしょう。個人的には文字が大きくて見やすい rubyblue が好みです。

今回紹介したWordPressプラグイン「Advanced Code Editor」の詳しい内容は、こちらを参照してください(英語が読める方向け)。動画のマニュアルもあります。

Advanced Code Editor — WordPress Plugins

 - wordpressプラグイン