WordPress でカスタム単一添付ファイルテンプレートを作成する方法

ウェブサイト上の個々の画像やその他のアップロードされたファイルは、単一の添付ファイルページに表示されます。しかし、多くのテーマでは添付ファイルのテンプレートが提供されていません。

WordPressでカスタム添付ファイルテンプレートを作成すると、個々の添付ファイルページの表示方法を制御でき、機能性と美観の両方を向上させる柔軟性が得られます。

この記事では、WordPress でカスタムの単一添付ファイルテンプレートを簡単に作成する方法を紹介します。

WordPress の添付ファイルページとは何ですか？

デフォルトでは、WordPressウェブサイトにあるすべてのメディア添付ファイルに対して、単一のページが自動的に作成されます。これには、画像、動画、音声ファイル、PDFなどが含まれます。

投稿やページと同様に、添付ファイルもWordPressデータベースのwp_postsテーブルに保存されます。実際、添付ファイルは特別な種類の投稿であり、投稿タイプは「attachment」です。これにより、検索や表示が容易になります。

添付ファイルページでは、タイトル、キャプション、説明などのメタデータをファイルアップロードに追加できます。また、訪問者が画像や動画にコメントすることもできます。

多くのユーザーは、追加情報を表示するために添付ファイルのテンプレートをカスタマイズすることを好みます。たとえば、写真テーマでは、添付ファイルページを使用してEXIFデータを表示できます。これにより、使用されたカメラのモデル、カメラの設定、さらには画像の場所データも表示できます。

ただし、添付ファイルページを使用する予定がない場合は、無効にすることをお勧めします。

それでは、WordPress でカスタムシングル添付ファイルテンプレートを作成する方法を見ていきましょう。このガイドでは次の内容をカバーします。

WordPressで添付ファイルページを表示する方法

シングル添付ファイルテンプレートをカスタマイズする際は、添付ファイルページを表示して変更を確認すると便利です。WordPressで添付ファイルページを表示するいくつかの方法を以下に示します。

メディアライブラリから添付ファイルページを表示する

WordPressダッシュボードからメディア » ライブラリページに移動し、画像またはその他の添付ファイルをクリックする必要があります。「添付ファイルの詳細」ウィンドウが表示されます。

ここで、画像の代替テキスト、タイトル、キャプション、説明を入力できます。この情報は添付ファイルページに表示される可能性があるため、フィールドに入力して表示方法を確認することをお勧めします。

ウィンドウの右下にある「添付ファイルページを表示」リンクが表示されます。

そのリンクをクリックすると、その画像の添付ファイルページに移動します。

投稿またはページから添付ファイルページを表示する

WordPressのコンテンツエディターで投稿またはページを開き、画像を追加するだけです。

次に、画像を選択し、ツールバーの「リンク」ボタンをクリックします。ドロップダウンで、「添付ファイルページ」を選択するオプションが表示されます。

これで、画像をクリックすると、その添付ファイルページに移動します。

添付ファイルページにはどのテンプレートが使用されますか？

投稿やページと同様に、添付ファイルはテンプレートを使用して表示されます。使用されるテンプレートは、テーマで利用可能なテンプレートとWordPressのテンプレート階層によって異なります。

存在する場合、WordPressは添付ファイルページの表示を制御するためにattachment.phpテンプレートを使用します。ただし、サイトにアップロードできるファイルの種類ごとに異なるテンプレートを作成することもできます。

例えば、image.php という名前のテンプレートファイルは画像添付ページの表示方法を制御し、video.php という名前のテンプレートは動画添付ページを制御します。

特定のファイル拡張子に対してカスタム添付ファイルテンプレートを作成することもできます。例えば、テンプレートimage-gif.phpはGIF画像添付ファイルページを制御します。

ただし、WordPressテーマに添付ファイル用の特定のテンプレートがない場合、デフォルトで単一投稿タイプテンプレートであるsingle.phpまたはデフォルトのフォールバックテンプレートであるindex.phpが使用されます。

その場合、添付ファイルページは他の投稿やページと同じレイアウトになり、必ずしも見栄えが良くない場合があります。

WordPressで添付ファイルページを無効にする

WordPressで添付ファイルページを使用しない場合は、無効にすることをお勧めします。

多くのテーマには添付ファイル用の特別なテンプレートがないため、サイト上で不完全なページのように見えることがあります。これは訪問者に悪い印象を与える可能性があります。

また、検索ランキングにSEO上の悪影響を与える可能性もあります。これは、テキストがほとんどまたはまったく含まれていないページを検索エンジンが「低品質」または「薄いコンテンツ」と見なすためです。

WordPressで画像添付ファイルページを無効にする方法に関するガイドで詳細を確認できます。

ただし、添付ファイルページを使用する予定がある場合は、WordPressで添付ファイルテンプレートをカスタマイズする方法を読み進めてください。2つの方法を説明します。最初の方法は最も簡単で、プラグインを使用します。

テーマビルダープラグインを使用したカスタムシングル添付ファイルテンプレートの作成

カスタムの単一添付ファイルテンプレートを作成する最も簡単な方法は、SeedProdを使用することです。これは最高のWordPressテーマビルダーであり、コードを書かずに美しいウェブサイトのレイアウトとカスタムテンプレートを作成できます。

SeedProdを使用して、カスタムの単一添付ファイルテンプレートを含む、完全にカスタムなWordPressテーマを作成できます。詳細については、完全なSeedProdレビューをご覧ください。

まず、SeedProdプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベート後、ライセンスキーを入力する必要があります。この情報はSeedProdウェブサイトのアカウントで見つけることができます。

その後、SeedProdを使用してカスタムWordPressテーマを簡単に作成する必要があります。

カスタムWordPressテーマの作成

SeedProdテーマビルダーは、SeedProd » Theme Builderページに移動すると見つかります。ここでは、SeedProdの既製のサイトキットまたはテンプレートのいずれかを開始点として使用します。これにより、既存のWordPressテーマが新しいカスタムデザインに置き換えられます。

これは、「テーマ」ボタンをクリックすることで実行できます。

プロがデザインした様々なタイプのウェブサイト向けのテーマのリストが表示されます。「モダンビジネス」「マーケティングエージェンシー」「住宅ローンブローカーテーマ」といったテンプレートがあります。

オプションを確認し、チェックマークアイコンをクリックしてニーズに最も合ったものを選択してください。

テーマを選択すると、SeedProdは必要なすべてのテーマテンプレートを生成します。これで、カスタムの単一添付ファイルテンプレートを作成できます。

カスタム添付ファイルテンプレートの作成

デフォルトでは、添付ファイルテンプレートはなく、添付ファイルにはSingle Postテンプレートが使用されます。

新しい添付ファイルテンプレートを作成して修正します。新しいテンプレートがテーマと一貫するように、シングル投稿テンプレートを開始点として使用します。

これを行うには、シングル投稿テンプレートにカーソルを合わせ、リンクが表示されるまで「シングル投稿の複製」を繰り返します。その後、「複製」リンクをクリックしてテンプレートのコピーを作成します。

リストの一番上に、「Single Post- Copy」という新しいテンプレートが表示されます。

新しいテンプレートの上にマウスカーソルを合わせ、表示される「Edit Conditions」リンクをクリックします。

テンプレートの設定を変更できるウィンドウが表示されます。まず、「添付ファイル」という名前を付けることから始められます。

次に、このテンプレートが使用される条件を定義する必要があります。「条件」セクションで、最初の設定を「含める」のままにし、2番目のドロップダウンメニューから「添付ファイル」を選択します。

その後、テンプレートに優先度を付ける必要があります。単一投稿テンプレートの優先度は0なので、このテンプレートにそれよりも高い優先度を付ける必要があります。これにより、一致するすべてのページでこのテンプレートが代わりに使用されます。このチュートリアルでは、優先度を5に割り当てます。

設定を保存するには、完了したら必ず「保存」ボタンをクリックしてください。

次に、テンプレートのデザインとコンテンツをカスタマイズします。「Edit Design」リンクをクリックして実行できます。

これで SeedProd ページビルダーが開きます。ここで、ブロックをページにドラッグして、ドラッグ＆ドロップでコンテンツを並べ替えることで、新しいコンテンツを追加できます。

ブロックをクリックすると、その設定にアクセスできます。ブロックにカーソルを合わせると、ゴミ箱アイコンをクリックして削除できます。

このチュートリアルでは、ブログに関連するページ上部の2つのブロックを削除し、投稿情報ブロックを画像の下にドラッグします。

また、ページ下部のコメントセクションも削除します。完了したら、ページ上部にある「保存」ボタンをクリックしてください。その後、右上にある「X」ボタンをクリックしてページビルダーを閉じることができます。

テンプレートのリストに戻ります。新しいテンプレートを有効にするには、「公開済み」トグルをオンの位置に切り替える必要があります。

これで、ウェブサイトで添付ファイルページを表示して変更を確認できます。

コードを使用してカスタム単一添付ファイルテンプレートを作成する

この方法はより高度であり、WordPressテーマのテンプレートファイルにコードを追加する必要があります。これを行ったことがない場合は、WordPressでコードをコピーして貼り付ける方法に関するガイドを参照してください。

テーマのアップデートをインストールすると、テーマのカスタマイズの多くが失われます。これを回避するには、子テーマを作成してカスタマイズすることをお勧めします。WordPressテーマをカスタマイズを失うことなく更新する方法に関するガイドで詳細を確認できます。

添付ファイルテンプレートファイルの作成

まず、カスタマイズするテンプレートを選択する必要があります。すべての添付ファイルの表示方法を変更するには、attachment.php をカスタマイズする必要があります。

ただし、画像または動画のみをカスタマイズしたい場合は、image.php または video.php を編集する必要があります。

次に、テーマにそれらのテンプレートファイルが既に含まれているかどうかを確認します。たとえば、Twenty Twenty-One テーマのテンプレートは、WordPressホスティングのwp/content/themes/twentytwentyoneフォルダにアクセスすると見つけることができます。

Twenty Twenty-Oneテーマにはimage.phpテンプレートはありますが、attachment.phpテンプレートはないことがわかります。

カスタマイズしたいテンプレートがお使いのテーマにない場合は、自分で作成する必要があります。必要なファイル名で空のファイルを保存するだけです。

次に、single.php ファイルの内容を新しい空のファイルにコピーし、保存します。これにより、添付ファイルテンプレートがウェブサイトの他の部分と視覚的に一貫性が保たれます。

新しい添付ファイルテンプレートが作成されましたが、今のところ、添付ファイルページは以前と同じように表示されます。カスタマイズを行う時間です。

添付ファイルテンプレートファイルのカスタマイズ

これで、テンプレートのコードを変更することで、添付ファイルページをカスタマイズできます。テンプレートファイルは、WordPressの他のテーマファイルと同様です。HTML、テンプレートタグ、またはPHPコードをこのファイルに追加できます。

テンプレートをコンピューターにダウンロードし、メモ帳などのテキストエディタで開くことができます。コードの変更が完了したら、ファイルを保存し、FTPを使用してテーマフォルダにアップロードし直すだけです。

Twenty Twenty-One テーマの image.php テンプレートをカスタマイズする例をいくつか紹介します。これは、変更を加える前の状態です。

ページは画像のタイトルから始まり、次に画像自体とキャプションが続きます。その後、画像の説明と画像に関するその他の詳細が表示されます。最後に、コメントセクションが表示されます。

これらのセクションが表示される順序を並べ替えることができます。たとえば、画像のコードをタイトルの上に移動させることができます。

画像のキャプションを表示するコード行を削除するだけで、キャプションを削除することもできます。

添付ファイルページは現在このようになっています。

画像へのコメントを訪問者に許可したくない場合は、コメントセクションを完全に削除できます。

コメントセクションを表示するコード行を、下部近くで削除するだけです。

ボーナス: WordPress で投稿の添付ファイルをアイキャッチ画像として追加する

ほとんどのWordPressテーマでは、ウェブサイトのブログ投稿の横にサムネイルを表示します。ただし、この機能をサポートしていなかったテーマから切り替えたばかりの場合、ブログページに多くの空白スペースが表示されます。

公開済みのすべてのブログ投稿にアイキャッチ画像を作成するのは時間がかかるため、投稿の添付ファイルをサムネイルとして使用できます。これにより、ブログのトラフィックが増加し、ユーザーエンゲージメントが高まります。

これを行うには、Auto Featured Imageプラグインをインストールしてアクティブ化します。その後、Auto Featured Image » Settingsページにアクセスし、「Generation Method」ドロップダウンメニューで「Find in post」オプションを選択します。

次に、「投稿タイプ生成」セクションで「ページ」オプションのチェックを外します。

次に、上部から「画像の生成」セクションに切り替え、「投稿タイプ」ドロップダウンメニューから「投稿」オプションを選択します。

プラグインは、アイキャッチ画像がないブログ投稿の数を表示します。ここで、「アイキャッチ画像を生成」ボタンをクリックします。

これで、アイキャッチ画像がないすべてのブログ投稿に、最初の画像添付ファイルがサムネイルとして自動的に表示されます。詳細については、WordPressで投稿の添付ファイルをアイキャッチ画像として追加する方法に関するチュートリアルを参照してください。

このチュートリアルがお役に立ち、WordPressでカスタムの単一添付ファイルテンプレートを作成する方法を学べたことを願っています。また、WordPressページの公開を取り消す方法を学んだり、すべてのブログに必要ないくつかの重要なページのリストを確認したりすることもできます。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。