WordPressにFlickrウィジェットを追加する方法(簡単な方法)

WordPressサイトに常に新しい画像を追加するのは、特にすでにすべてのものをFlickrに投稿している場合、面倒に感じることがあります。

2つの場所を別々に更新する代わりに、FlickrとWordPressを接続できます。

そうすると、最新のショットが自動的にサイトに表示されます。

これにより、コンテンツが最新の状態に保たれ、訪問者が戻ってくる理由ができ、WordPressのストレージスペースを節約しながらFlickrのフォロワーを増やすことができます。

長年にわたり、この接続を簡単かつ確実に確立するためのさまざまな方法を試してきました。このチュートリアルでは、WordPressにFlickrウィジェットを追加する最も簡単な方法(コーディング不要)を紹介します。

WordPressにFlickrウィジェットを追加する方法

WordPressにFlickrウィジェットを追加する理由

WordPressにFlickrウィジェットを追加すると、最新の写真でサイトが自動的に更新されます。追加のアップロードの手間が省け、サイトをアクティブに見せ、Flickrでのオーディエンスを増やすのに役立ちます。

これが役立ついくつかの方法を以下に示します。

  • 📸 写真家 – あなたはすでにショットを完璧にするために多くの時間を費やしています — あなたのオンラインポートフォリオを自動更新させ、あなたの技術に集中できるようにしましょう。
  • 🌍 旅行ブロガー – アップロードを二重に行う必要はありません。なぜなら、進行中の最新の冒険を簡単に共有できるからです。
  • 🎨 ビジュアルクリエイター – 自動更新されるフォトギャラリーであなたの作品を披露しましょう。そうすれば、制作により多くの時間を費やし、管理に費やす時間を減らすことができます。
  • 📅 忙しいサイトオーナー – ブログ投稿が遅くても、サイトはアクティブに見え続けます。

何よりも、訪問者はクリックしてFlickrであなたをフォローできるため、プラットフォーム全体であなたのオーディエンスを増やすのに役立ちます。画像はFlickrで外部でホストされているため、WordPressのストレージ容量を節約し、サイトの読み込みを高速化できます。

これを踏まえて、WordPressにFlickrウィジェットを追加する最も簡単な方法を説明します。

このガイドで説明する内容の概要を以下に示します。

注: 「Flickrウィジェット」と呼んでいますが、使用するツールはWordPressの「ブロック」です。これは、サイドバーのような従来のウィジェットエリアだけでなく、投稿やページのどこにでも追加できることを意味します。

WordPressにFlickrウィジェットを追加する方法

WordPressにFlickrウィジェットを追加する最も簡単な方法は、Photonicを使用することです。さまざまなオプションをテストした後、このプラグインは、Googleフォト、SmugMug、およびFlickrを含む多くのウェブサイトやプラットフォームからコンテンツを表示できるため、際立っていました。

⚠️ 重要: Flickrのコンテンツを表示するには、SSL証明書が必要です。ヘルプが必要な場合は、WordPressウェブサイトの無料SSL証明書の取得方法に関するガイドをご覧ください。

ステップ1:Flickrウィジェットプラグインのインストール、有効化、セットアップ

これで、無料のPhotonicプラグインをインストールして有効化する準備が整いました。プラグインのインストール方法については、WordPressプラグインのインストール方法のガイドをご覧ください。

アクティベートしたら、Photonic » 設定に移動します。次に、「Flickr」タブをクリックします。

PhotonicのFlickr設定

次のステップは、「Flickr設定」リンクをクリックすることです。

開始するには、APIキーとシークレットキーを作成してPhotonicをFlickrアカウントに接続する必要があります。この情報を取得するには、Flickrウェブサイトでアプリを作成する必要があります。

アプリの作成は技術的に聞こえるかもしれませんが、心配しないでください。コードを知る必要はなく、すべてのステップを順を追って説明します。

さて、FlickrウェブサイトとWordPressダッシュボードを簡単に切り替えられるように、新しいタブでキーとシークレットを作成するのが賢明です。

新しいブラウザタブで、Flickr APIページにアクセスできます。このページで、「今すぐオンラインでキーを申請する」リンクをクリックするだけです。

Flickr アプリの作成

これで、Flickrアカウントで使用するメールアドレスとパスワードを入力できます。

アカウントにログインしたら、Flickrウィジェットを商用プロジェクトに使用するか、非商用プロジェクトに使用するかをFlickrに知らせる必要があります。

個人のWordPressブログや中小企業向けウェブサイトを作成している場合は、「非商用キーを申請する」ボタンをクリックできます。

商用または非商用のFlickrプロジェクトの作成

次の画面で、「アプリの名前は何ですか」フィールドにアプリの名前を入力する必要があります。サイト訪問者にはこの名前は表示されず、ご自身の参照用のみとなりますのでご注意ください。

アプリをどのように使用するかをFlickrに伝えることができる「何を作成していますか」というテキストフィールドもあります。

WordPress 用の Flickr ウィジェットの作成

これらの情報をすべて入力したら、Flickrの利用規約を注意深く読むことをお勧めします。すべて問題がなければ、「送信」ボタンをクリックできます。

Flickrは、FlickrウェブサイトとPhotonicアプリを接続するために使用できるAPIキーとシークレットを表示します。

キーとシークレットをコピーして、WordPressダッシュボードに戻ってください。これで、これらの2つの値を「Flickr APIキー」と「Flickr APIシークレット」フィールドに貼り付けることができます。

Flickr APIキーとシークレットの追加

その後、画面の一番下までスクロールし、「ページ設定を保存」ボタンをクリックしてください。

この時点で、Photonic は Flickr ウェブサイトにアクセスできるようになります。したがって、次のステップは、プラグインに Flickr アカウントへのアクセスを許可することです。

ステップ 2: Flickr アカウントの認証と設定

ここから、WordPress管理ダッシュボードから「Photonic » 認証」に移動できます。

次に、「Flickrからログインしてアクセストークンを取得」ボタンをクリックしてください。

WordPressへのアクセストークンの追加

これにより、Flickrのユーザー名とパスワードを入力できる画面が表示されます。

それが完了したら、「サインイン」をクリックしてください。

Flickrウェブサイトのサインインページ

Flickrは、Photonicが実行できるアクションとアクセスできるデータに関する情報を表示するようになります。

Photonicにこれらの権限を付与してもよい場合は、「OK、承認します」ボタンをクリックできます。

Photonic に Flickr へのアクセスを許可する

このボタンをクリックすると、WordPress管理エリアに自動的に戻されます。

次の画面で、新しい「アクセストークン」と「アクセストークンシークレット」情報が表示されます。これらのトークンをPhotonicの設定に追加するには、「トークンを保存」ボタンをクリックするだけです。

Flickrアクセストークン

WordPressはPhotonicの設定エリアに移動します。ここで、「アクセストークン」と「アクセストークンシークレット」が正しいフィールドにすでに貼り付けられています。

その後、さらにいくつかの設定を構成する必要があります。

これを行うには、デフォルトユーザーを設定することをお勧めします。Photonicを使用すると、個人のFlickrアカウントまたはその他の公開アカウントからコンテンツを表示できます。

次のセクションでは、Flickr ウィジェットを作成する際に異なる Flickr アカウントを表示する方法を説明します。

ただし、最初にデフォルトのアカウントを設定したい場合があります。たとえば、個人のFlickrアカウントのコンテンツのみを表示する予定の場合は、それをデフォルトとして設定すると時間を節約できます。必要に応じていつでもこの設定を上書きできます。

デフォルトユーザーを設定するには、新しいタブを開き、使用したいFlickrアカウントに移動します。次に、ブラウザのアドレスバーにあるURLをコピーします。これはhttps://www.flickr.com/photos/username/のようになります。

次に、WordPressダッシュボードに戻り、Flickr URLを「デフォルトユーザー」フィールドに貼り付けることができます。

Flickrのデフォルトユーザー名を設定する

それが完了したら、PhotonicがウェブサイトのFlickrウィジェット内のコンテンツをどのように表示するかをカスタマイズできます。

ステップ3:Flickrウィジェット設定のカスタマイズ

開始するには、「表示するメディア」ドロップダウンをクリックして、写真のみ、動画のみ、または写真と動画の両方を表示するかを選択できます。

表示するFlickrメディアの選択

その後、写真または動画サムネイルがFlickrウィジェットにどのように表示されるかを選択できます。

訪問者があなたのサイトに到着すると、Photonic はすべての画像と動画のサムネイルプレビューを表示します。これは次の画像に示すとおりです。

WordPressウェブサイト上のFlickrサムネイルプレビュー

訪問者は、サムネイルをクリックすることで、各画像またはビデオのより大きなバージョンを見ることができます。

Photonicにはいくつかの異なるレイアウトがありますが、以下の画像は、より大きなバージョンがウェブサイトにどのように表示されるかの例を示しています。

Flickrスライドショーの例

サムネイルのサイズを変更するには、「サムネイルサイズ」ドロップダウンを開き、リストから値を選択します。

次に、訪問者がサムネイルをクリックしたときに表示される画像サイズを選択できます。これを行うには、「メイン画像サイズ」ドロップダウンを開き、リストからサイズを選択するだけです。

画像サイズの変更

Flickrウィジェットに動画を表示する予定ですか?その場合は、「動画サイズ」ドロップダウンを開き、動画ライトボックスがウェブサイトに表示されるサイズを選択する必要があります。

ライトボックスは、ビデオプレーヤーと同様に、ビデオコンテンツを表示するポップアップウィンドウです。ライトボックスが開いている間、訪問者はページの他の部分と対話することはできません。

動画ライトボックスの設定

確認しておきたい設定がいくつかありますが、ほとんどの WordPress ウェブサイトではこれで十分でしょう。

追加した情報に満足したら、画面の一番下までスクロールして、「Save page Flickr Settings」ボタンをクリックできます。

プラグインの設定が完了したら、Flickrウィジェットを投稿、ページ、またはウィジェット対応エリアに追加できます。

この例では、投稿またはページに追加する方法を示しますが、ウィジェット対応エリアであれば手順は同様です。

開始するには、Flickrウィジェットを追加したいページまたは投稿を開くだけです。ここで、+アイコンをクリックし、「Photonic Gallery」と入力して適切なブロックを見つけます。

Photonicギャラリーブロック

Photonic Gallery ブロックをクリックすると、ブロックがウェブサイトに追加されます。

その後、「フォトニックギャラリーを追加」をクリックしてください。

Photonic Flickrブロック

これによりポップアップが表示され、InstagramやGoogleフォトなど、Photonicが画像や動画を取得する場所を選択できます。

💡 :ウェブサイトにInstagramギャラリーを設定したいですか? Smash Balloonプラグインは、使いやすく非常に強力なのでお勧めします。

詳細については、WordPressでカスタムInstagram写真フィードを作成する方法に関するガイドを参照してください。WordPressでカスタムInstagram写真フィードを作成する方法

WordPress に Flickr ウィジェットを追加したいので、「Flickr」と「次へ」ボタンをクリックしましょう。

メディアソースの選択

これでドロップダウンメニューを開き、表示したいコンテンツの種類を選択できます。

これは、単一の写真のみ、複数の写真、あるいはFlickrアルバム全体、画像ギャラリー、またはコレクションである可能性があります。

Flickrブロックの設定

オプションを選択した後、Photonicがコンテンツを取得するFlickrアカウントを指定する必要があります。

最も簡単なオプションは、Photonic設定に追加したデフォルトのユーザー名から写真またはビデオを取得することです。これを行うには、「Current user」ラジオボタンをクリックするだけです。

デフォルトのユーザー名を使用する

別のFlickrアカウントのコンテンツを表示したいですか?その場合は、「別のユーザー」ラジオボタンを選択してください。

これにより、使用したいFlickrアカウントのURLを貼り付ける新しいフィールドが追加されます。

Flickr Photonicブロックの設定方法

別のオプションとして、Flickrグループの画像や動画を表示することもできます。これを行うには、「グループ」ラジオボタンをクリックするだけです。

次に、新しいタブで、使用したいグループに移動できます。URLをコピーします。これはhttps://www.flickr.com/groups/group-nameのようなものになります。

完了したら、WordPressダッシュボードに戻り、URLを「グループ名」フィールドに貼り付けます。

Flickrグループ名の設定

オプションを選択したら、「次へ」ボタンをクリックしてください。

次の画面では、PhotonicがFlickrウィジェットに表示するすべての異なる画像や動画のプレビューが表示されます。

これらの画像や動画をすべて表示したくない場合は、Flickr でどのようにタグ付けされているかに基づいてコンテンツをフィルタリングできます。

「タグ」フィールドに、使用したいタグを単純に入力します。フィルターで複数のタグを使用したい場合は、各タグをコンマで区切る必要があります。

タグを使用して画像と動画をフィルタリングする

これで、Photonic はこれらのタグを持つ画像とビデオのみを表示します。

複数のタグを入力した場合、これらのタグのいずれかを持つすべてのメディアを表示するか、すべてのタグを持つメディアのみを表示するかを選択する必要があります。

これを行うには、「タグモード」ドロップダウンを開き、「いずれかのタグ」または「すべてのタグ」のいずれかをクリックします。

タグを使用した画像とビデオのフィルタリング

ただし、このページのサムネイルプレビューは自動的に更新されないことに注意してください。変更を加えた場合、プレビューには完成したFlickrウィジェットに含まれる画像や動画が表示されない場合があります。

変更に満足したら、「次へ」をクリックしてください。

この画面には、「Square Grid」や「Slideshow」など、Flickrウィジェットのさまざまなレイアウトが表示されます。

使用したいレイアウトをクリックし、「次へ」ボタンをクリックするだけです。

Photonicのさまざまなレイアウト

次に、Flickrウィジェットに画像や動画が表示される方法をカスタマイズするための設定が表示されます。

選択したレイアウトによって、さまざまな設定が表示される場合があります。たとえば、「円形アイコングリッド」または「正方形グリッド」レイアウトを使用している場合、Flickrウィジェットに含める列数を決定できます。

円形のFlickrウィジェットレイアウト

一方、スライドショーレイアウトを使用している場合は、サムネイルをスライドショーの上に表示するか下に表示するかを選択する必要があります。

レイアウト設定の確認が完了したら、「次へ」ボタンをクリックしてください。

Flickrスライドショーのレイアウト

ポップアップに、ウェブサイトに追加されるコードが表示されます。すべてがうまくいったら、「次へ」ボタンをクリックできます。

Photonicは投稿エディタ内にFlickrコンテンツを表示しないため、ウィジェットがウェブサイト訪問者にどのように表示されるかを確認するには、「プレビュー」ボタンをクリックする必要があります。

Flickrウィジェットのプレビュー

Flickrウィジェットの外観に満足したら、通常どおりこのページを更新または公開できます。

ボーナスのヒント:WordPressで画像の盗難を防ぐ

著作権法は普遍的であり、あなたの創造的な作品を自動的に保護します。あなたのWordPressブログに記載されているかどうかにかかわらず、あなたの画像、テキスト、ビデオ、その他のコンテンツは著作権で保護されています。

問題は、画像やテキストが簡単にコピーできることです。さらに、多くの人は、画像を盗んで自分のサイトで使用しても誰も気づかないだろうと考えています。🤔

他の人があなたの作品を利用してくれるのは光栄なことですが、あなたの権利が露骨に無視されているのを見ると、腹が立つこともあります。他人の作品を盗むことは違法であるだけでなく、非倫理的でもあります。

画像の盗難を完全に防ぐことはできませんが、抑止する方法はたくさんあります。

数多くの WordPress 画像プラグインをレビューした結果、Envira Gallery が画像保護のための最良のものの一つであると確信しています。

ウォーターマーク有効化オプションを確認する

画像を保護するための強力なツールが付属しており、透かしアドオンや右クリック無効化オプションが含まれています。これらは盗難を抑止する最も効果的な方法の2つです。機能の詳細については、Envira Galleryの完全レビューをお読みください。

詳細な手順については、WordPress での画像盗難を防ぐ方法に関する専門家のアドバイスを参照してください。

Flickrウィジェットに関するよくある質問

WordPressにFlickrウィジェットを追加することについて質問がありますか?お任せください。以下は、ユーザーからよく寄せられる質問の一部です。

非公開のFlickrアカウントから写真を公開できますか?

一般的に、Photonic のようなプラグインでは、Flickr 上の写真またはアルバムを公開する必要があります。これにより、プラグインは訪問者ごとに特別なログイン資格情報を必要とせずに、Flickr の公開 API を使用して画像をフェッチできます。

あなたのような認証済みユーザーはログイン時にプライベートコンテンツを見ることができますが、一般の訪問者は見ることができません。誰もが見ることができるギャラリーにするには、公開されている写真またはアルバムを使用する必要があります。

Flickrウィジェットを追加すると、ウェブサイトが遅くなりますか?

多くの画像を表示すると、ページの読み込み時間に影響を与える*可能性*があります。しかし、写真はFlickrのサーバーでホストされているため、WordPressウェブサイトのホスティングへの負荷が軽減されます。

サイトを高速に保つために、WP Rocket のような優れたキャッシュプラグインを使用することを常にお勧めします。すべての画像で遅延読み込みを有効にすることもできます。

これらのアプローチは、パフォーマンスと全体的なユーザーエクスペリエンスの向上に役立ちます。

Flickrギャラリーの外観をカスタマイズできますか?

はい、Photonicプラグインはいくつかのカスタマイズオプションを提供しています。チュートリアルで説明したように、グリッドやスライドショーのような異なるレイアウトを選択したり、サムネイルサイズを調整したり、表示したいコンテンツをフィルタリングしたりできます。

より高度なスタイリング、透かしなどの機能、eコマース統合については、プレミアムギャラリープラグインを検討してください。私たちは、その強力さと使いやすさからEnvira Galleryを使用し、推奨しています。

探索を続ける: WordPressでの画像のその他の使用方法

これで完了です!この記事が WordPress に Flickr ウィジェットを追加する方法を学ぶのに役立ったことを願っています。次に、次のガイドも参照できます。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

2 CommentsLeave a Reply

  1. このクイックFlickrウィジェットプラグインは長らく更新されておらず、正常に機能しなくなっています。

返信を残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。