何かと問題があるらしい、添付ファイルページ

Raindropsテーマとは異なるテーマで、image.phpなどを作るまでもなく、index.phpで添付画像を表示させればいいといった軽い気持ちで、デフォルトテーマなどの表示がどのようになっているのか、調べ始めたら不思議なことに、添付ファイルページで表示されている画像サイズが、「すごいちぃっちゃい。 こんなの誰も気にならないのだろうか?」

でWEB検索すると、なんと「添付ファイルページにアクセスさせなくする方法 wordpress」なんて記事がたくさんあり、画像が小さいといった問題どころか、こんなのいらねえ的な話題がたくさんあることに、いまさらながら気づきました。

そういえば、Raindropsテーマの制作過程で、添付ファイルのページが、元記事リンクがないために孤島化してしまうといった問題や、関連付けのない画像も投稿に自由に張り付けられるので、そういったものの処理で悪戦苦闘したことを思い出しました。

Raindropsテーマの場合、添付ファイルは画像だけでなく、pdf.phpで、投稿本文でpdfを挿入した場合、投稿本文ではリンクを追加して、添付ファイルページで、PDFを表示させるといった機能もあるため(投稿本文に直接PDFを埋め込むと、すごくロードに時間がかかるため実用出来ではないので、)まだ、添付ファイルページの使いどころはあるんじゃないかと思ってはいるのですが、、

添付ファイルページの画像をでっかくする方法をメモに残そうとしたら、泥縄式に他の問題も見えてきて、ついでなのでそれらについても、メモを残そうと思います。

ある条件では、添付ファイルページは404になってしまう

いつのころから、このようになったのかは定かではありませんが、「未添付画像を投稿に挿入した場合に、リンクが404になる。」

投稿からメディアの追加でアップロードした画像は、正常に添付ファイルページにリンクします。

では、試してみます。

アドミンバーの新規/メディアから画像をアップロードして、画像の編集画面を開くと以下のようになります。

次に、投稿の編集画面から、この画像を挿入してみます。

リンクURLは両方とも同じです。

では、投稿を表示します。

問題なく表示されています。画像のリンクを表示してみましょう。

404になってしまいますね。

このようなことになると、自分のサイト固有の問題が発生しているという風に考えがちですが、以下のことを試してみていただくと、問題が見えてきます。

この状態で、メディアに行き該当画像のリンク先を確認すると、画像は添付済みの処理が自動的に行われ、画僧の添付ファイルへのリンクが書き換わっていると思います。

投稿で、未添付の画像を選択して貼り付け、保存した時点で添付ファイルのURLが変わってしまうので404になるのは、当然ですね。

もう一回、メディアの挿入を行うと、変更されたリンクが挿入されるので正常に動作します。

また、Twentyseventeenで、添付ファイルページを確認すると、貼り付けた投稿へのナビゲーションリンクが表示されて、孤島化も解消しています。

素晴らしいことですが、知っておかないと「無用な、苦労をしないといけないかもしれません。」

添付ファイルの画像の大きさを、投稿幅いっぱいにするフィルタ

functions.php

css

追記

添付ファイルのページで表示される画像は、すべてがレスポンシブ画像で表示されるものと誤解していました。

例えば、PDFをアップロードした時に生成されるサムネール画像は、レスポンシブ画像で表示されないようです。

レスポンシブ画像でない場合、フィルターは動作しないので、CSSだけが適用されて、ぼやけて表示されるようになります。

このような場合は、アタッチメントの種類に応じて、スタイルを適用させる必要があります。

幸い、body_class()は、body要素に、PDFの添付ファイルページの場合は、attachment-pdfクラスが同的に追加されるので、以下のようにPDF画像は除いてスタイルを適用することができます。


コメントは受け付けていません