WordPressサイトのスクリーンショットを取得(Elementorと下書きにも対応)
デザイナー、開発者、代理店は、クライアントの承認、デザインレビュー、変更履歴のアーカイブのために、WordPressのページ(公開済みの投稿、下書きのプレビュー、Elementorの編集中ページ)をWebshotで取得しています。カスタムフォントが読み込まれます。遅延読み込みの画像も描画されます。GutenbergのブロックもElementorのウィジェットも、ブラウザでの表示そのままに表示されます。
すべてのボタンは、設定済みの取得フォームを開きます。ページが読み込まれた後、形式とビューポートを変更できます。
この用途にWebshotを使う理由
ElementorとGutenberg
人気の2つのページビルダーが正しく描画されます。カスタムウィジェット、動的コンテンツ、さらにアニメーションも、スクリーンショットを撮る前に解決されます。
カスタムフォントが読み込まれます
セルフホストのフォント、Google Fonts、Adobe Fonts — すべて取得前に読み込まれ、描画されます。出力に代替フォントが使われることはありません。
一般公開の下書きプレビュー
下書きに一般公開のプレビューURL(WordPressのプレビューリンクなど)があれば、Webshotで取得できます。ログインが必要な下書きにはAPI連携が必要です。
プラグインに優しい
WooCommerceの商品ページ、AffiliateWPのダッシュボード、LearnDashのコースなど、一般公開されているものなら何でも完璧に取得できます。
WordPressのスクリーンショットを撮る方法
- WordPressのページを下書きとして保存し、一般公開のプレビューURL(通常は`?preview=true&p=...`)を取得するか、公開URLを使用します。
- URLをWebshotの取得フォームに貼り付けます。
- デスクトップ、タブレット、モバイルのビューポートを選択します。Webshotはそれに応じてレスポンシブな表示を描画します。
- 取得をクリックします。スクリーンショットは5〜15秒で完成し、JPG、PNG、PDFとしてダウンロードできます。
よくある質問
はい。プレビューURLが一般公開されていることを確認してください(Elementorのプレビューリンクは、制限をかけていない限り通常は公開されています)。プレビューURLを貼り付けて取得すれば、アニメーションやカスタムCSSも含め、Elementorのキャンバス全体が描画されます。
はい。すべてのGutenbergブロックはheadless Chromeを通じてサーバー側で描画されます。再利用ブロック、パターン、最新の投稿のような動的ブロックも、取得前にすべて解決されます。
無料の一般公開フォームでは認証ができないため取得できません。ログインが必要なWordPressの取得には、カスタム認証ヘッダーを使うWebshot APIを利用するか、下書き用の一般公開プレビューURLを生成してください。
はい。Webshotはスクリーンショットを撮る前に、フォント(document.fonts.readyを介して)、画像、遅延読み込みのコンテンツが安定するのを待ちます。カスタムCSS、テーマ、子テーマ、プラグインもすべて描画されます。
はい。取得フォームでモバイルモードを選択してください。Webshotは390pxのiPhoneビューポートとモバイルのユーザーエージェントを使用するため、レスポンシブ対応のテーマはモバイルのブレークポイントで描画されます。
はい。一般公開の出力を生成するWordPressプラグインであれば動作します。商品ページ、コースカタログ、メンバーディレクトリなど、Webshotは描画されたフロントエンドを取得します。ログインが必要な管理画面(wp-admin)にはAPI認証が必要です。
その他の活用事例: Google Mapsのスクリーンショット · ランディングページのQA · 法的証拠のスクリーンショット · SNSのスクリーンショット · 競合のモニタリング · すべて見る →