さくらインターネットのレンタルサーバーでInternal Server Errorが出るようになったので、WordPressのテーマをTwenty Twenty-Oneにしてみた話し

このWordpressで動いているブログにアクセスすると、Internal Server Errorが出るようになってしまいました。必ずInternal Server Errorが出るのではなく、たまに出るのが痛いところ。

サーバーのエラーログを見てみると、

End of script output before headers: index.php

が出ています。これは、index.phpのパーミッションを変更すればいいそうです。

さくらのサーバ。PHPスクリプトがInternal Server Errorになった原因と解決方法 | ごみぶろぐ

ごみぶろぐ

しかし、これでは解決しませんでした。相変わらず、Internal Server Errorがでます。今回も忘れたときに、たまに出るのは嫌な感じです。

さくらインターネットのサポートに聞いてもいいのですが、どうせ「ユーザー固有のトラブルだから対応しない。」とか言われそうなので、自力で解決しなければいけません。もし、自力で解決できなければ、他のレンタルサーバーに移るしか手はなさそうです。

次にやってみたのは、Wordpressのテーマを新しいTwenty Twenty-Oneに変更してみました。現在はTwenty Twentyを使っていますが、最近のWordpressはGutenbergに対応しに行っているので、なるべくGutenbergに対応した新しいテーマをしたほうがよさそうです。そこで、最新のWordpress謹製のテーマであるシンプルなTwenty Twenty-Oneにしてみました。

Twenty Twenty-Oneは、日本語のサイトにすると、見出しの文字の大きさとか、モバイルのメニューの表示とか、若干気に入らないところがありましたので、CSSを追加して上書きしておきました。シンプルで良さげなテーマです。

Twenty Twenty-Oneにしたおかげで、サイトのページの表示スピードが早くなりました。およそ、メインのHTMLファイルが1桁ほど速くなっています。今まではキャッシュに入っていても遅かったので、これはTwenty Twenty-Oneにして良い効果です。

肝心のInternal Server Errorは、今のところ出ていません。しばらく、様子を見ていきます。

次に調べなければいけないのは、Wordpressのプラグインでしょうね。

なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

追記(2020年12月19日)

さくらインターネットのレンタルサーバーのコンソールから、エラーステータスはだいぶ減っているが、依然多い。エラーログでもだいぶ減っている。

Search Consoleで、相変わらずLCP の問題: 4 秒 超(パソコン)が大量出ている。これは、今回のテーマをTwenty Twenty-Oneにして、なくなることを期待している。

Twenty Twenty-Oneでの表示を最適化するために、CSSを追加しているが、本来ならばSASSでCSSをTwenty Twenty-Oneでは実現しているので、SASSを修正していかなければいけない。しかし、WP-SCSSプラグインではエラーが出てコンパイルできなかった。

12/19/20 12:36:13: style.scss - function is not a number: line: 96
12/19/20 12:36:13: style-editor.scss - function is not a number: line: 96

こちらは原因不明である。でも、SCSSファイルを修正していったほうが楽であるので、なんとかしなければいけないな。

ローカルでSCSSからCSSへのコンパイルできるようにしなければいけないかもしれない。ただ、Twenty Twenty-OneでのSCSSの@importを使った外部SCSSファイル命名が通常とは違うので、いろいろと厄介そうだ。今のところ、VS Code + Easy SASSでのコンパイル環境では、うまく行っていない。

今気がついたが、Twenty Twenty-Oneのテーマでは、Wordpressの編集画面で再利用ブロックのタブが表示できてこない。これは致命的なバグである。もしかしたら、自分のところだけか?

一度、編集画面から抜けて、もう一度編集画面に入ってら、今度は再利用ブロックのタブが表示できるようになった。

追記(2020年12月19日)

Twenty Twenty-OneのSCSSのCSSのコンパイルは、Twenty Twenty-Oneのディレクトリにpackage.jsonがあったので、npm iでいろいろインストールが始まってコンパイルの環境が構築できた。npm run start でコンパイルの監視ができるが、いろいろエラーが出力される。エラーが出ても、きちんとSCSSからCSSにコンパイルできたので気にしない。

さくらインターネットのInternal Server Errorが発生する件だが、相変わらずエラーが出る。たまに、スタイルシートが読み込めないとかになるので、多分さくらインターネット側のサーバーの問題なのだろう。

さくらインターネットのサポートに問い合わせる前に、All In One SEO Packとか重そうなプラグインを無効にしてみよう。問い合わせは、それからだ。

追記(2020年12月20日)

Twenty Twenty-OneテーマのSCSSからCSSにコンパイルするときにchokidarでSCSSファイルの更新を監視しているのだが、こちらのスクリプトでエラーが出ている。

"build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json"

.stylelintrc-css.jsonなしのlint:scssのスクリプトであれば、正常に動作して構文チェックをしてくれる。.stylelintrc-css.jsonの設定ファイルが怪しそうである。stylelintは、よくわからないので、package.jsonのscriptsから削除しておく。何かSCSSの構文エラーがあったので、こちらは対応しておく。

しかしながら、Twenty Twenty-Oneテーマがアップデートされたら、修正したSCSSファイルが上書きされるのだろうな。子テーマで実現しようしたら、子テーマのCSSが読み込めないというトラブルがあったのでやめた。Wordpressの管理画面の外観のCSSの編集で、CSSを上書きするようにしていたけど、SCSSになってglobal.scssにある値を編集してコンパイルされたstyle.cssをアップしたほうがいろいろ変更するには簡単である。何かテーマを編集するのに、最適な方法があるのだろうか?

続きはこちらから