WordPressで自動ウェブサイトスクリーンショットを作成する方法

チュートリアルのためにスクリーンショットを撮ることは、終わりのないタスクのように感じられることがあります。キャプチャ、トリミング、注釈付け、アップロードを各画像に対して繰り返し行う必要があります。

私たちはWPBeginnerで独自のガイドを作成する際に、この苦労をよく知っています。これは非常に時間がかかり、コンテンツ作成ワークフローを大幅に遅らせる可能性があります。

良いニュースは、このプロセス全体を自動化できることです。これにより、貴重な時間を節約できるだけでなく、サイトをプロフェッショナルで一貫性のある状態に保つことができます。

この記事では、WordPressで自動化されたウェブサイトのスクリーンショットを簡単に作成する方法を説明します。

WordPressで自動ウェブサイトスクリーンショットを作成する理由

WordPressウェブサイトをお持ちの場合、自動サイトスクリーンショットを作成して投稿に追加すると、潜在的な読者がコンテンツの内容をすばやく把握できるようになります。

これはユーザーエンゲージメントを高め、ウェブサイトのSEOに貢献できます。関連性の高い高品質な画像は、検索エンジンがコンテンツをよりよく理解するのに役立ち、ページ滞在時間などの訪問者のエンゲージメントシグナルを改善できます。

同様に、テーマを 更新 する前や、その他の変更を加える前に、自動ウェブサイトスクリーンショットを使用してサイトの視覚的なバックアップを作成できます。これにより、ウェブサイトの新しいスタイルと古いスタイルの違いを比較して確認できます。

自動スクリーンショットは、異なるサービスやウェブサイトを比較したり、読者をステップバイステップのチュートリアルで案内したり、ウェブサイトの進捗状況を追跡したりすることもできます。

それでは、WordPressで自動ウェブサイトスクリーンショットを簡単に作成する方法を見ていきましょう。

• 方法1：プラグインを使用してWordPressで自動ウェブサイトスクリーンショットを作成する
• 方法2：WordPressにコードを追加して自動スクリーンショットを作成する
• ボーナス: ウェブサイトのスクリーンショットを手動で撮る
• よくある質問
• 追加リソース

方法1：プラグインを使用してWordPressで自動ウェブサイトスクリーンショットを作成する

この方法は簡単なので、初心者やコードを扱いたくないユーザーにおすすめです。

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

重要：執筆時点では、このプラグインは長期間更新されていないことに注意してください。まだ機能する可能性がありますが、互換性またはセキュリティのリスクを伴う可能性があります。最初にステージングサイトでテストし、インストールする前に必ず完全なWordPressバックアップを取得しておくことをお勧めします。

アクティベートすると、プラグインはすぐに機能し、設定を構成する必要はありません。

次に、WordPress 管理画面のサイドバーから、自動ウェブサイトスクリーンショットを追加したいページまたは投稿にアクセスします。

ここで、画面左上の「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。次に、エディタに「ブラウザショット」ブロックを追加します。

それが完了したら、自動スクリーンショットを取得したいウェブサイトのURLを追加し、「画像の読み込み」ボタンをクリックします。

プラグインは、選択したウェブサイトのスクリーンショットを自動的に追加します。これで、画像の代替テキストを追加したり、右側のブロックパネルから幅と高さを変更したりできます。

パネルの「リンクを使用」スイッチを切り替えることで、ウェブサイトにアクセスできるスクリーンショットへのリンクを追加できます。

スクリーンショットに投稿リンクを追加したい場合は、「現在の投稿にリンク」スイッチを切り替えることもできます。

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。

これで、WordPressサイトにアクセスして自動スクリーンショットを表示できます。

注意: Browser Shots プラグインは、WordPress.com の mshots API を使用して、その場でスクリーンショットを生成します。これらの画像は WordPress のメディアライブラリには保存されません。WordPress.com のサーバーから直接配信されます。WordPress.com と WordPress.org の違いについては、ガイドをご覧ください。

方法2：WordPressにコードを追加して自動スクリーンショットを作成する

この方法では、WordPressファイルにコードを追加する必要があります。自動スクリーンショットを作成するには、テーマの functions.php ファイルにカスタムコードを追加する必要があります。

ただし、コードのわずかなエラーでもサイトが破損し、アクセスできなくなる可能性があることを忘れないでください。

そのため、WPCode の使用をお勧めします。これは市場で最高のWordPressコードスニペットプラグインであり、カスタムコードの追加を非常に安全かつ簡単に行えます。

専門家のアドバイス: WPBeginnerでは、WPCodeを使用して、ポートフォリオ全体にわたるカスタムコードスニペットを管理しています。これにより、開発チームはテーマのfunctions.phpファイルを直接編集することなく、安全にコードを追加および整理できます。

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

有効化したら、WordPressダッシュボードから コードスニペット » + スニペットを追加 ページにアクセスしてください。

そこに着いたら、「カスタムコードを追加（新規スニペット）」オプションの下にある「スニペットを使用」ボタンをクリックします。

次に、「カスタムスニペットの作成」ページに移動します。ここで、スニペットの名前を入力することから始めることができます。名前は、コードを識別するのに役立つものであれば何でも構いません。

次に、右側のドロップダウンメニューからコードタイプとして「PHP スニペット」を選択します。

その後、以下のコードを「コードプレビュー」ボックスにコピー＆ペーストするだけです。

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
  
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
 
return $img;
}
add_shortcode("screen", "wpb_screenshots");

前述のプラグインと同様に、このコードも WordPress.com の Mshots API を使用して、その場でスクリーンショットを生成します。

次に、自動スクリーンショットを取得したいウェブサイトのURLを、コードの"url" =$gt; 行の隣に追加できます。

コードの "w" =>と"h"=>の行の隣に、スクリーンショットの希望する幅と高さを追加することもできます。

次に、「挿入」セクションまでスクロールし、「自動挿入」モードを選択します。

コードはアクティベート時に自動的に実行されるようになります。

最後に、ページの上部までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。

次に、「スニペットの保存」ボタンをクリックして設定を保存し、スニペットをアクティベートします。

さて、WordPressの投稿やページにウェブサイトのスクリーンショットを表示するには、次のようなショートコードを入力する必要があります。

[screen url="http://wpbeginner.com" alt="WPBeginner"]

URLフィールドと代替テキストフィールドを独自の価値に置き換えることができます。

まず、WordPress ダッシュボードからブロックエディターでページ/投稿を開き、「ブロックを追加」(+) ボタンをクリックします。

ここから、「ショートコード」ブロックをページ/投稿に追加します。次に、上記のショートコードを追加し、ご自身の値に置き換えてください。

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。

WordPressサイトにアクセスして、自動化されたスクリーンショットが機能していることを確認してください。

ボーナス: ウェブサイトのスクリーンショットを手動で撮る

自動スクリーンショットを使用したくない場合は、Droplrなどのさまざまなツールを使用して手動でスクリーンショットを撮ることができます。

これにより、自動スクリーンショットと比較して、画像の特定の領域を選択する自由度が高まります。さらに、これらの画像を Adobe Photoshop で編集し、矢印や赤いボックスなどの他の要素を追加することもできます。

この機能は、プラグインやコードが自動的に画像を取得する自動スクリーンショットでは利用できません。

Droplr でスクリーンショットを撮るには、まずお使いのコンピューターにアプリをインストールする必要があります。インストールが完了したら、コンピューターのタスクバーにある Droplr アイコンをクリックし、「スクリーンショット」オプションを選択してください。

次に、スクリーンショットを撮りたい領域を選択できます。

Droplrは、その画像をブラウザで開き、ダウンロードしたり、他の人とリンクを共有したりできます。詳細については、WordPressでスクリーンショットを撮る方法に関するチュートリアルを参照してください。

よくある質問

ここでは、WordPressで自動スクリーンショットを作成することについてよく寄せられる質問をいくつか紹介します。

手動スクリーンショットと自動スクリーンショットでは、どちらが良いですか？

ニーズによります。自動スクリーンショットはスピードと一貫性に優れていますが、手動スクリーンショットはより多くの制御を提供します。手動キャプチャでは、特定の領域を選択したり、矢印やテキストのような注釈を追加したり、アップロード前に画像を最適化したりできます。

自動スクリーンショットを使用するとウェブサイトが遅くなりますか？

いいえ、サイトのパフォーマンスに影響を与えるべきではありません。この記事で説明されている方法は、画像の生成にWordPress.comの外部サービスを使用しています。これは、画像があなたのサーバーではなく、それらのサーバーからロードされることを意味し、ホスティングへの追加負荷を防ぎます。

自動スクリーンショットの外観をカスタマイズできますか？

カスタマイズは限定的です。通常、スクリーンショットの幅と高さを定義できます。ただし、手動のスクリーンショット編集ツールでできるような注釈、エフェクトの追加、またはページの特定の部分の切り抜きはできません。

スクリーンショットはWordPressのメディアライブラリに保存されますか？

いいえ、スクリーンショットはオンデマンドで生成され、メディアライブラリには保存されません。これにより、WordPress.comのサーバーから直接画像が配信されるため、ホスティングアカウントのストレージ容量を節約できます。

自動スクリーンショットが表示されないのはなぜですか？

これらのスクリーンショットを生成する WordPress.com サービスは、ライブの公開ウェブサイトには最適です。しかし、ローカルコンピューター (localhost) 上のウェブサイト、パスワードで保護されたウェブサイト、または特定のファイアウォールで保護されたウェブサイトのスクリーンショットをキャプチャできない場合があります。また、複雑なアニメーションを使用したり、コンテンツを表示するためにユーザーの操作が必要なページを完全にレンダリングできない場合もあります。

追加リソース

ウェブサイトのスクリーンショットを自動化する方法がわかったので、これらの他の役立つガイドも確認したいかもしれません。

• 画像SEO入門 – 検索エンジン向けに画像を適切に最適化して、サイトへのトラフィックを増やす方法を学びます。
• ブログ記事をより良くするための画像作成ツール – 記事をより魅力的にするための最高のツールに関する専門家のおすすめをご覧ください。

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