WordPress上でWebアプリが動かない! 原因と対策

PHP, Web, WordPress

こんな問題があった

簡単なWebアプリをつくり,いざWordPressの記事に埋め込んで公開しようとするとWebアプリがエラーとなり上手く動かないことがある。

具体的にはこんなエラーだ。

Uncaught SyntaxError: Invalid or unexpected token
Chromeの開発者ツールで見たエラー内容

Gutenbergエディタ上ではアプリが上手く動いていたのに,なぜ!?

原因

原因がWordPressが自動で行っている文字変換だったと気づくまでにかなり悩まされた。

この文字変換で,JavaScriptのソースコードがメタメタにされてしまっていた。

なぜこんな仕様なのかというと,ダブルクオーテーションを始めとする色々な半角の記号を自動で全角に変換して見やすくするためなのだそうな。

対策

WordPress 4.0以降ではfunctions.phpを編集すればこのおせっかいな機能をOFFにできる。

ただし,万一functions.phpの編集をしくじってしまうと,WordPressの管理画面自体が表示できなくなって面倒なので,できればWordPressの「テーマエディター」からではなく,次のような手順でファイルを編集する。

  1. FTPSなどでサーバのファイルシステムにアクセスする。
  2. WordPressのfunctions.phpファイルを開く。次のような場所にあることが多いかも。
    (ルートディレクトリ)/wp-content/themes/・・・/functions.php
  3. 次の1行をファイルの末尾に追記する。
    add_filter( 'run_wptexturize', '__return_false' );

PHP, Web, WordPress

Posted by もち