写真家、デザイナー、またはビジネスオーナーであっても、ポートフォリオは新しいクライアントを獲得するための最も強力なツールです。しかし、探しているものを見つけるためだけに何十枚もの画像やプロジェクトをふるいにかける必要がある場合、訪問者にとってはフラストレーションがたまる可能性があります。
整理されていないポートフォリオが機会を逃す原因になるのを私は見てきました。潜在的なクライアントが「ロゴデザイン」のケーススタディを見たいのに、「ウェブ開発」のプロジェクトで迷子になってしまうと、そのまま立ち去ってしまうかもしれません。
そこで登場するのが、フィルター可能なポートフォリオです。これにより、訪問者はクリック一つでカテゴリ、タグ、またはプロジェクトタイプ別に作品を並べ替えることができ、必要なものを正確に見つけやすくなります。
このガイドでは、WordPressでフィルター可能なポートフォリオを簡単に作成する方法をステップバイステップでご紹介します。
ニーズに最も合った方法を選択できるように、2つの方法をカバーします。
- 方法1：Envira Gallery（写真におすすめ）– 画像のギャラリー（結婚式のアルバムや写真展など）を表示したい場合に最適です。
- 方法2：WPFilters（プロジェクトにおすすめ）– ケーススタディ、ブログ記事、またはWooCommerceの商品をフィルタリングしたい場合に最適です。
WordPressでフィルタリング可能なポートフォリオを作成する理由
ほとんどの写真家やデザイナーは、美しいポートフォリオを作成し、最高の写真を展示しています。しかし、あなたを雇いたいと思っている人々は、以前に同様のことを行ったことがあるかどうかを確認したい場合があります。
たとえば、ファッション写真家を探している人は、あなたの以前のファッション関連の仕事を見たいかもしれません。
ポートフォリオにフィルターを追加すると、さまざまなタグの下で作品を表示できます。また、ユーザーがポートフォリオ内のアイテムを簡単に並べ替えるのに役立ちます。
コーディング不要で、WordPressで簡単にフィルタリング可能なポートフォリオを作成する方法を見てみましょう。
方法1：Envira Galleryを使用してフィルター可能なポートフォリオを作成する（写真におすすめ）
Envira GalleryはWordPress向けの最高の写真ギャラリープラグインです。美しくフィルタリング可能な画像ポートフォリオを、高速に読み込み、すべてのデバイスで素晴らしく表示できるように作成できます。
Envira Galleryを他のソリューションと比較するために徹底的にテストしました。私たちの経験についてさらに読むには、Envira Galleryの完全レビューをご覧ください。
まず、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意：Envira Galleryの無料版もありますが、このチュートリアルで必要なタグアドオンにアクセスするには、Plusプラン以上が必要です。
有効化したら、Envira Gallery » Settings ページにアクセスしてライセンスキーを入力する必要があります。この情報はEnvira Galleryのウェブサイトのアカウントから取得できます。
キーを入力したら、「キーの検証」ボタンをクリックしてください。サイトが現在アップデートを受信しているというメッセージが表示されます。
次に、タグアドオンをインストールする必要があります。そのためには、Envira Gallery » Addons ページに移動し、Tags Addonを見つけてください。
見つけたら、「インストール」ボタンをクリックする必要があります。
Envira Galleryがアドオンを取得してインストールし、その後「有効化」ボタンをクリックして使用を開始する必要があります。
これで、フィルター可能なポートフォリオを作成する準備ができました。
ポートフォリオの作成と画像の整理
Envira Gallery » 新規追加ページに移動して、最初のギャラリーを作成し、名前を付けます。
これで、ギャラリーに写真を追加できます。「コンピューターからファイルを選択」ボタンをクリックして新しい画像をアップロードするか、「他のソースからファイルを選択」をクリックしてWordPressメディアライブラリに既にある画像を選択します。
写真がすでにWordPressのメディアライブラリにある場合は、「他のソースからファイルを選択」ボタンをクリックしてください。
Enviraはファイルをアップロードしてギャラリーに挿入します。完了したら、下にスクロールして画像を確認できます。
専門家のアドバイス：高解像度の画像はサイトのパフォーマンスを低下させる可能性があります。Enviraにアップロードする前に、ポートフォリオ写真を圧縮するためにEWWW Image OptimizerやSmushのようなツールを使用することをお勧めします。
詳細については、WordPressに画像ギャラリーを追加する方法に関するガイドをご覧ください。
次に、鉛筆アイコンをクリックして画像を編集します。これにより、写真にタグやその他のメタデータを追加できるポップアップが表示されます。
タグは、画像のキーワードまたはカテゴリと考えてください。たとえば、「結婚式」、「ポートレート」、「風景」、「白黒」などのタグを使用できます。これらのタグは、訪問者がポートフォリオを並べ替えるために使用するクリック可能なフィルターになります。
この写真に割り当てたいタグを入力します。カンマで区切って複数のタグを追加できます。完了したら、「メタデータを保存」ボタンをクリックしてタグを保存します。
次に、ギャラリー内のすべての画像にタグを追加するために、このプロセスを繰り返す必要があります。
ヒント: タグは一貫して使用してください。たとえば、「ポートレート」と「ポートレイト」を使い分けるのではなく、常に「ポートレート」を使用します。これにより、フィルターがクリーンになり、訪問者が使いやすくなります。
フィルター設定の有効化
写真にタグを追加した後、ギャラリーページの左側にある「タグ」タブをクリックしてください。ここで、ギャラリーのタグフィルタリングを有効または無効にできます。
タグフィルタリングを有効にするには、「タグフィルタリングを有効にする？」ボックスをチェックする必要があります。これにより、このオプションの設定が表示されるようになります。
タグの位置（ギャラリーの上または下）を選択し、すべてのタグを表示するか特定のタグのみを表示するかを決定し、その他の表示設定を構成できます。
完了したら、「公開」ボタンをクリックするだけでギャラリーを公開できます。これで、ポートフォリオギャラリーをサイトに追加する準備が整いました。
WordPressウェブサイトにフィルター可能なポートフォリオを追加する
これで、フィルタリング可能なポートフォリオを表示したい投稿またはページを作成できます。あなたがブロックエディターを使用している場合は、記事にEnvira Galleryブロックを追加するだけです。
その後、「ギャラリーを検索」ドロップダウンメニューをクリックし、以前に公開したギャラリーを選択してください。
あなたがクラシックエディターを使用している場合は、投稿エディタのツールバーの上にある「ギャラリーを追加」ボタンをクリックしてください。
これによりポップアップが表示され、作成したギャラリーを選択してWordPressの投稿やページに挿入できます。
変更を保存するために投稿またはページを更新し、ウェブサイトをプレビューして、フィルター可能なポートフォリオが実際に機能していることを確認できるようになりました。
Envira Galleryでできることについてさらに詳しく知りたい場合は、これらのチュートリアルをご覧ください。
- WordPressで画像ギャラリーを作成する方法（ステップバイステップ）
- ライトボックス効果で WordPress にギャラリーを追加する方法
- WordPressで画像にウォーターマークを自動追加する方法
方法2: WPFiltersを使用したフィルター可能なポートフォリオの作成 (プロジェクトに推奨)
WPFiltersはWordPress向けの最高のコンテンツフィルタリングプラグインです。サイトにAmazonスタイルの並べ替えを追加でき、プロジェクトケーススタディや詳細なプロジェクトページに最適です。
訪問者はページをリロードせずに、カテゴリ、タグ、またはカスタムフィールドで作業をフィルタリングできます。また、ネイティブブロックを通じてテーマのスタイルを自動的に継承するため、手動での CSS 調整を気にする必要はありません。
WPFiltersを他のソリューションと比較するために徹底的にテストしました。私たちの経験についてさらに読むには、WPFiltersの完全レビューをご覧ください。
プラグイン設定の構成
まず、WPFiltersプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
アクティベーション後、セットアップウィザードが自動的に起動します。「開始する」ボタンをクリックして開始してください。
オンボーディングウィザードは非常に効率的だと感じました。インストールから完全に機能するフィルタリングブロックまで、5分未満で完了できました。
プロのヒント: 開発者でAdvanced Custom Fields (ACF) を使用している場合、WPFiltersがACFデータを自動的に検出することに驚くでしょう。これは、カスタムフィールドをフィルタに手動でマッピングする必要がないため、大幅な時間節約になります。
次の画面で、「ウェブサイトではどのような種類のデータをフィルタリングに使用しますか？」と尋ねられます。これにより、プラグインはサイトにどのような種類のコンテンツがあるかを把握します。
標準的なポートフォリオの場合は、「WordPress カテゴリ」と「WordPress タグ」のチェックボックスをオンにしてください。
ただし、作品を販売するための製品ポートフォリオを構築している場合は、「WooCommerce カテゴリ」と「WooCommerce 価格」のオプションをオンにしてください。
サブカテゴリが深い非常に大きなポートフォリオをお持ちの場合、WPFiltersは子カテゴリを自動的にインデントすることで階層的なネストを美しく処理することに気づきました。これにより、長いテキストの壁を防ぎ、クライアントが複雑なプロジェクトリストをナビゲートしやすくなります。
「保存して続行」ボタンをクリックすると、ライセンスキーの入力を求められます。これは、WPFiltersウェブサイトのアカウントエリアで見つけることができます。
最後の画面に成功メッセージが表示されます。「保存して完了」ボタンをクリックするだけでセットアップが完了します。
ポートフォリオフィルタのカスタマイズ
セットアップウィザードは、選択に基づいてフィルタを自動的に作成します。ただし、見た目をカスタマイズしたい場合があります。
WordPressダッシュボードから WPFilters » 要素 に移動するだけです。ここでは、「WordPress カテゴリ」や「WordPress タグ」など、セットアップウィザードが作成したフィルタが表示されます。このチュートリアルでは、カテゴリ別にポートフォリオをフィルタリングします。
カテゴリフィルターをカスタマイズしましょう。「WordPress カテゴリ」要素の横にある鉛筆アイコンをクリックして編集します。
これでフィルターエディターが開きます。
データソースはすでに「カテゴリ」に設定されていることがわかります。
このページの設定に慣れるために、しばらく時間をかけてください。フィルターをより便利にするために、「アイテム」セクションの下にある「アイテム数」オプションを有効にすることをお勧めします。
これにより、フィルター名（例：「Webデザイン (12)」）の横に各カテゴリのプロジェクト数が表示され、訪問者はコンテンツの量を確認しやすくなります。
設定が完了したら、右上にある「保存」ボタンをクリックします。
フィルター可能なポートフォリオの表示
フィルターをカスタマイズしたら、それをウェブサイトに追加する必要があります。WPFilters の最も良い点は、ネイティブの WordPress クエリーループブロックと簡単に連携できることです。
クエリーループブロックは、動的なコンテンツを表示するための WordPress の組み込みソリューションです。WPFilters と連携して、フィルター可能なコンテンツ表示を作成します。
ポートフォリオを表示したいページを編集するだけです。
まず、「WPFilters 要素」ブロックをページに追加します。右側のブロック設定で、「WordPress カテゴリ」フィルターが選択されていることを確認してください。
次に、フィルターのすぐ下に、クエリーループブロックを追加します。
デザインに合った「グリッド」または「リスト」パターンを選択できます。
右側のブロック設定で、「設定」セクションを見つけます。クエリタイプを「カスタム」、投稿タイプを「投稿」に選択していることを確認してください。
これにより、ブロックが現在のページではなく、投稿を表示するようになります。
専門家のアドバイス: クエリーループブロックは強力ですが、初心者にとっては正しく設定するのが難しい場合があります。アイテムが表示されない場合は、ブロック設定で正しい投稿タイプが選択されているか再確認してください。
これで完了です！ページをプレビューできます。
フィルターでカテゴリを選択すると、投稿のリストが即座に更新され、結果が表示されます。
注意: フィルターは、ウィジェットまたはブロックとしてサイドバーに追加することもできます。このように使用すると、WooCommerceショップのリスト、ブログ投稿アーカイブ、またはWP_Queryループを使用してレンダリングされたその他のコンテンツなどの他のプライマリページクエリと自動的に対話します。
動画チュートリアル
フィルター可能なポートフォリオに関するよくある質問
WordPressでフィルター可能なポートフォリオを作成することについて、読者からよく寄せられる質問をいくつかご紹介します。
1. フィルター可能なポートフォリオに最適なWordPressプラグインは何ですか？
最適なプラグインは、特定のコンテンツによって異なります。画像ベースのポートフォリオ（写真やグラフィックデザインなど）の場合、高品質なビジュアルプレゼンテーションに重点を置いているため、Envira Galleryが最良の選択肢です。
しかし、プロジェクトベースのポートフォリオ（ケーススタディ、ブログ記事、不動産リスティングなど）の場合、WPFilters は、カテゴリ、タグ、またはカスタムフィールドで既存のWordPressコンテンツをフィルタリングできるため、より優れています。
2. WooCommerce用のフィルター可能な製品ポートフォリオを作成できますか？
はい。WPFiltersはWooCommerceとシームレスに連携するように特別に設計されています。これにより、顧客が価格、製品属性（サイズや色など）、およびカテゴリでアイテムをフィルターできる製品ポートフォリオを作成でき、Amazonに似たショッピング体験を提供できます。
3. フィルターされた結果を表示するためにユーザーはページを再読み込みする必要がありますか？
いいえ。Envira GalleryとWPFiltersの両方がAjaxテクノロジーを使用しています。訪問者がフィルターをクリックすると、ページを再読み込みせずにコンテンツが即座に更新されます。これにより、訪問者は迅速でスムーズな体験を得ることができます。
4. フィルター可能なポートフォリオに動画を追加できますか？
はい、Envira Gallery を選択した場合、特定の Videos Addon をインストールできます。この拡張機能を使用すると、画像と一緒にフィルタリング可能なポートフォリオに YouTube、Vimeo、およびローカルホストの動画を含めることができます。
5. これらのポートフォリオプラグインは私のWordPressテーマで動作しますか？
はい。Envira Gallery と WPFilters の両方は、適切にコーディングされたWordPressテーマで動作するように設計されています。また、SeedProd、Divi、Elementor などの人気のページビルダーとも簡単に統合でき、サイトのどこにでもポートフォリオを配置できます。
追加リソースと次のステップ
フィルタリング可能なポートフォリオの作成方法がわかったので、サイトのギャラリーや画像を改善する他の方法も検討してみてはいかがでしょうか。これらの役立つガイドをご覧ください。
- 最高のWordPressギャラリープラグイン – トップギャラリープラグインの専門家による比較を確認して、その仕事に最適なツールを使用していることを確認してください。
- ライトボックス効果のあるギャラリーを追加する方法 – ユーザーが美しいライトボックスオーバーレイで表示できるようにすることで、ポートフォリオ画像を際立たせます。
- 画像にウォーターマークを自動的に追加する方法 – アップロードするすべての写真にロゴまたはウォーターマークを自動的に追加することで、ハードワークを保護します。
- WooCommerce製品画像ギャラリーを作成する方法 – 写真やアートをオンラインで販売している場合は、このガイドでストア用の見事な製品ギャラリーを作成する方法を説明します。
- WordPressで画像ギャラリーを作成する方法 – 美しくレスポンシブな画像ギャラリーを作成するための基本の優れた復習。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
デニス・ムトミ
クリエイティブな人にとって、フィルター可能なギャラリーは必須です。
私が学んだ役立つヒントは、Envira Galleryのタグを設定する前に、標準化されたタグ付けシステムを作成することです。私はすべての写真家クライアントにこれを行っています。彼らの作品全体に「ウェディング」「ポートレート」「コマーシャル」のような一貫したタグを使用しています。これは2つの理由で非常に役立ちます。
– ポートフォリオのメンテナンスがずっと楽になります
– 訪問者にとってより良いフィルタリング体験が生まれます
ちなみに、あなたが言及したTags Addonは、このシステムを実装するのに最適でした！
ハイム
これまでに見つけたすべての写真ギャラリーは、タグをサポートしていますが、一度に1つのタグでフィルタリングできます。複数のタグを持つ写真を取得するために、複数のタグに基づいてフィルタリングできるギャラリーを実装したいと思います。そのためには、タグ選択は複数のタグをチェックできるようにチェックボックス形式にする必要があります。WP向けのそのようなソリューションを誰か教えてくれませんか？ありがとうございます。
divp
良いですね、共有を続けてください
ルイス
本当に素晴らしい記事でした。このテーマが気に入りました。すぐにこのようなテーマを作成するためにウェブ開発者を雇うつもりです。ありがとうございます！