WordPress管理画面の「外観→テーマの編集」でJavaScriptファイルも編集可能にするカスタマイズ方法(利用可能な拡張子の追加)

WordPressの「外観→テーマの編集」では、ブラウザ上からテーマファイルを編集できるようになっています。

テーマの編集 — WordPress

ただ、この機能はデフォルトの状態だとPHPファイルとCSSファイルしか編集できません。

Wordpressデフォルトの機能だとPHP、CSSしか編集できない

テーマの中には、JavaScriptを利用できるテーマもあるかと思うので、今回は「テーマの編集画面でJavaScriptファイルも表示する方法」を紹介したいと思います。

テーマの編集画面でJavaScriptファイルも編集できるようになる

スポンサーリンク
レクタングル(大)広告

主な手順

手順といっても、かなり簡単で以下の1手順になります。

  1. functions.phpにコードをコピペ

カスタマイズさえできてしまえばOKという場合は、単にコードをコピペするだけなので1分とかからないでカスタマイズできます。

functions.phpにコードをコピペ

functions.phpに以下のコードを貼り付けます。

//Wordpress管理画面でJavaScriptファイルも編集できるようにする wp4.4以降
function add_js_to_wp_theme_editor_filetypes_ex($default_types){
  $default_types[] = 'js';
  return $default_types;
}
add_filter('wp_theme_editor_filetypes', 'add_js_to_wp_theme_editor_filetypes_ex');

やっていることといえば、wp_theme_editor_filetypesをフックして、$default_types配列にjs拡張子を追加して、戻り値に返しているだけです。

$default_types[] = 'js';

他形式のファイルを編集したい時

$default_types配列に他の拡張子も挿入してやれば、JavaScriptファイル以外も「テーマの編集」で編集できるようになります。

例えば、テキストファイルも編集する場合は、以下のように書きます。

function add_js_to_wp_theme_editor_filetypes_ex($default_types){
  $default_types[] = 'js';
  $default_types[] = 'txt';
  return $default_types;
}
add_filter('wp_theme_editor_filetypes', 'add_js_to_wp_theme_editor_filetypes_ex');

上記のように書くことで、「外観→テーマの編集」画面のファイルリストに、「.js ファイル」と「.txt ファイル」が表示されます。

js、txtファイルが編集可能に

今回紹介したコードで使用したwp_theme_editor_filetypesフックは、Wordpress4.4以降のバージョンでないと動作しません。

まとめ

こんな感じで、Wordpress4.4以降ではかなり簡単にファイルを編集可能にすることができます。

個人的には、FTP+エディターで編集した方が、見やすいですし、安全とは思います。

けれど「わざわざFTPソフトを使って編集するのは面倒くさい」とか「ハイライト表示は不要なのでWordpress管理画面から手軽に編集したい」なんて場合には、望みのファイルに手軽にアクセスできるようになるかと思います。

今回紹介した機能は、Simplicity最新版にはデフォルトで備わっているのでカスタマイズ不要です。