TablePressを使った表が、AMPページで正しく表示されなかった問題のまとめ(WordPress・Luxeritas)

小説家のためのブログ運営Luxeritas, WordPress

先日から起こっていた、当サイトの「小説を投稿できるコンテスト・公募一覧」のページにて、テーブル(表)が正しく表示されなかった問題につきましては、色々な方々にご迷惑をおかけいたしました。

大変申し訳ございませんでした。

また、ご連絡を下さった方々、検証にご協力頂けた方々、ありがとうございます。

反省の意味を込めて、また備忘録的な意味でも、今回の顛末を共有しておこうと思います。

「うっかり」と「不勉強」が大部分を占めているため、あまり参考にならないかもしれませんが、多少でもお役に立てれば幸いです。

スポンサーリンク

表が正しく表示されず、ショートコードになってしまっていた点

まず「なぜショートコードが表示されてしまっていたのか?」をお話していきます。

既に該当ページは非AMP化してしまいましたのでスクリーンショットは撮れてないのですが、以下のような感じで表示されてしまっていたと思います。

何度か書きましたが、該当ページの一新に辺り「TablePress」というプラグインを導入しておりました。

これはプラグイン内にデータとして情報を入力しておくと、ショートコードを表記するだけでテーブルが挿入できるという便利なプラグインです。導入の経緯はやや話が逸れますので後述します。

このTablePressを導入したところまでは良かったのですが、AMPページにおいてこのプラグインを有効化するという手順が抜けておりました。

WordPressのダッシュボード(管理画面)にある「Luxeritas」>「カスタマイズ」に設定項目があります。

「AMP」のタブに「AMPで有効化するプラグイン」という項があります。

ここのAMPにチェックを入れておかないと、AMPページでプラグインが有効化されず、上記のようにショートコードだけが表示されるということになってしまったわけです(画像ではチェック済み)。

なぜ指摘に対してすぐに気づかなかったのか?

お問い合わせより「見えてないよ」とご指摘を頂いたとき、すぐにこの結論に至らなかったのは「自分が確認していたページが非AMPページだったから」というわけです。

自分のサイトなので「ブックマーク」から確認してしまいます。それだと非AMPページなんですよね。当たり前なんですが。

それに気づいたキッカケは、どうしても理由が分からずTwitterにて該当ページヘのリンクを張り「誰か見えてない方はいらっしゃいますか?」とお尋ねしたときのこと。

ある方が「こんな風に見えてるよ」と教えて下さったのが、冒頭の「ショートコードが記載されたもの」でした。

「おかしいなぁ、なんでかなぁ」と思いながら、自分の張ったリンクをタップしてみると、確かにショートコードが表示されている。

これが初めて自分で不具合を確認した瞬間でした。

で、色々触っているときに「そもそもショートコード以前に、なんか画面が変じゃないか?」と気づいたんですよね。

そこでやっと「あ、これAMPページだ」と分かったというわけです(遅いんですが)。

対策したこと

まず上記の「AMPページで有効化するプラグイン」にて「TablePress」と「TablePress Extension:Responsive Tables」(TablePressで作ったテーブルをレスポンシブ表示させるプラグイン)の両方にチェック。

そしてWordPressのダッシュボードから「Luxeritas」>「子テーマの編集」>「AMP用スタイルシート」に、以前ご紹介したレスポンシブ用のCSSを記載。

「これで大丈夫だろう」と思っていたのですけど、しばらくして書き換わったAMPページを見に行くと「テーブルが大きくはみ出している」というスタイル崩れを起こしておりました。

しかも横にスクロールすることができないという。

ここははっきりと分かっていないのですが、いくつかのサイトで調べてみると、AMPページでは、はみ出した要素をスクロール表示させる「overflow-x: auto」が使えない模様(overflow-x: scrollも)。

回避策もありそうな気はしますが、冷静に考えると「AMPページでなくても色々大丈夫そう」「まずは中身の整備が先」ということから、非AMP化することにしました。

AMPページよりは若干表示までの速度は落ちますが、基本的には画像を多用しているわけでもないので、ひとまずはこれで行くことにします。

AMPに対して理解が深まったら、いずれ再AMP化するかもしれません。

今回の一件での教訓

今回の一件で得た教訓は

  • ページの確認は「非AMPページ」「AMPページ」の両方でやる
  • AMPについて、もう少し勉強する
  • 特に難しいテーブルでない限り、TablePressではなく普通のテーブルブロックを使う

というものです。

2番目のは時間が掛かりそうですけどね。

いくつかTablePressで作ったテーブルを載せたページがあるので、まずはその点検からでしょうか。

[補足]TablePress導入の経緯

最後に、補足としてTablePressを導入した経緯をお話しておきます。

WordPress5.0以前の際には、普通に記事内にテーブルを使って「コンテスト・公募一覧」を作成しておりました。

以前のページをご覧になった方はお分かりだと思いますが、〆切の過ぎたものについては随時「終了したコンテスト」に移動しておりました。

これらの編集には「HTMLコード」を使っていたのですが、WordPress5.0以降ではこれが非常に見えにくくなってしまったんですよね。

前はコードで改行したものはそのまま表示されていたのですが、5.0以降では詰めて表示されるようになってしまいました。

上の比較画像は元ページが異なりますが、見え方としてはこんな感じです。

またテーブルを生成する「テーブルブロック」の機能も、必要にして十分ではあるものの、今ひとつ使いにくい部分があったりで、以前から入れるだけは入れておいた「TablePress」を使おうかと思ったわけです。

一番の懸念だったTablePressでのレスポンシブ表示+横スクロールも、先程ご紹介したページに記載した通りなんとかなったのも、導入に踏み切ったキッカケでした。

後は「CSVとしてエクスポートできる」という点も大きかったです。そこまで巨大な表ではないのですが、バックアップとして保存できるというのも安心感がありますから。

長々と書いてしまいましたが、以上が今回の顛末になります。

昨日の投稿記にも書きましたが、基本的にはブログのカスタマイズよりも内容に力を入れていきたい所ではあります。

が、今回のようなことは、その内容に関わることなので、やはりある程度の勉強は欠かせないのも確かです。

私はプログラマでもありませんし、Web関連のお仕事をしているわけではありません。時間的にはある程度の制限を受けますので、一気にレベルアップしていけるわけはないのですが、少しずつ向上できたらな、とは思っています。

そしてそれらを少しでも共有していって、他のブログの運営されている方々の問題解決の一助になれば幸いだとも思います(大したことはできませんが)。

最後にもう一度、今回の件に関してご迷惑をおかけしましたことをお詫び致します。また、ご協力頂けた方々にも感謝を申し上げます。

また、不具合などございましたら、お教え頂けますと助かります。

□ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □
今日も最後までお読み頂きありがとうございました!

小説執筆関連の記事は   →「小説講座
小説の投稿関連の記事は  →「小説投稿記
ブログ関連の記事は    →「小説家のためのブログ運営
読んだ本のレビューは   →「読んでレビュー
デジタルガジェット関連は →「デジタルもの

に、ありますのでぜひ合わせてお読み下さいね!

[合わせて読みたいおすすめリンク]