お問い合わせ

何を探していますか？

によるユアン・マック
2024年4月14日

Webflow ページ拡張機能による WordPress 統合

Webflow のコードの力を利用して視覚的にページを構築し、WordPress サイトで直接提供します。

注記： この拡張機能の既存のバージョンはサポートされなくなりました。以前にダウンロードしたユーザーのみがアクセスできます。また、サポート ポリシーの範囲外であるため、サポート チームは拡張機能のトラブルシューティングに関する直接的なサポートを提供することはできません。

WordPress で Web サイトを運営したいが、デザインは Webflow で行いたいとお考えですか? Webflow の WordPress 拡張機能を利用して、Webflow でサイト レイアウトを視覚的に作成し、それらのページの 1 つ以上を WordPress Web サイトに直接表示することができます。

これにより作業がどのように簡素化されるか:

  • コーディングなしでデザインを完全に制御できます。 テーマを変更するためにカスタマイズされた WordPress 開発プロジェクトに取り組む必要はありません。独自のデザインを損なうことなく、ページ (またはサイト全体) を Webflow で視覚的に作成するだけです。 WebflowとWordPressのデザインの違いについて詳しく知る.
  • 新しいページを迅速に作成します。 プロモーション用のランディング ページをすぐに作成したり、既存の WordPress サイトに何かを追加したりする必要がありますか? Webflow でデザインし、WordPress サイトに統合すれば、WordPress でカスタマイズされたページを組み立てる必要がなくなります。
  • 効率的なページ更新。 Webflow ページを WordPress サイトに展開した後、更新の適用や新しいセグメントの追加を Webflow で実行し、ワンクリックでシームレスにライブ公開できます。

このチュートリアルでは、次のことを理解できます。

  1. 拡張機能を取得して有効にする方法
  2. APIキーの作成と調整方法
  3. ページ構成を調整する方法
  4. よくある質問とトラブルシューティングのヒント

拡張機能を取得して有効にする方法

作業を開始するにはWebflow ページ拡張機能WordPress プラグイン ディレクトリからダウンロードしてインストールします。

アクセス プラグインメニュー WordPress 管理パネルで、右上隅の検索機能を使用して「Webflow Pages」を見つけます。

検索バーに「webflow」と入力すると、WordPress プラグイン メニューに Webflow Pages プラグインが表示されます。

Webflow Pages拡張カードを見つけてクリックします 今すぐインストール.

次にクリックします 活性化.

アクティベーションが完了すると、Webflowページ拡張機能が 左サイドバー「ようこそ」リンクをクリックします。ここで、 概要 いくつかの 便利なハイパーリンク.

注記： WordPress の Webflow Pages 拡張機能は Webflow Ecommerce と互換性がありません。
Webflow Pages 拡張機能の概要ページには、操作ガイドと拡張機能の設定へのリンクが用意されています。

API キーの生成と設定

拡張機能の使用を開始するには、 設定 セクション。

延長には、 Webflow APIキー （「APIトークン」または「アクセストークン」と呼ばれることもあります）。Webflow APIトークンを取得するには、 サイト設定 > アプリと統合 タブ > APIアクセスをクリックし、 レガシーAPIトークンを生成する。 打つ コピー トークンをクリップボードにコピーします。

注記： WordPress の Webflow Pages 拡張機能を使用するには、レガシー API トークンを使用する必要があります。

注記： APIトークンを安全に保管することは非常に重要です。APIトークンは機密性の高い個人情報として扱われ、パスワードのように扱う必要があります。最初に作成すると、ダッシュボードで再び表示できなくなります。APIトークンが侵害されたと思われる場合は、 サイト設定 > アプリと統合 タブ > APIアクセス、 クリック レガシーAPIトークンを生成する 新しいトークンを作成し、サードパーティの接続で侵害されたトークンを置き換えます。

次、 公開 サイトをコピーしてWordPress管理パネルに戻ります。 APIトークン クリックして Webflow APIキーを追加.

ページ設定の構成

拡張機能の ページ エリア。ここでは、WordPress ページではなく、Webflow が作成したページを選択する必要があります (Web サイトの WordPress パスを選択)。制限なく、必要な数だけページを統合できます。 

Webflow コレクション ページがある場合は、このページの隣接するセクションに表示されます。WordPress サイトにそれらを追加することもできます。

設定メニューから詳細設定を管理して、サイトが Webflow ページを読み込む方法を制御できます。ほとんどの場合、これらに干渉する必要はありません。次の選択肢があります。

  • を選択 キャッシュ期間 (サイトが Webflow ページをキャッシュする期間を指定します)
  • キャッシュを無効にする (デバッグに役立つ WordPress サイトのキャッシュを消去します)
  • 静的ページキャッシュをプリロードする (ページの読み込みを高速化します)
  • Webflowサイトを切断する 選択して リセット 新しいサイトを追加する

Webflow サイトのカバーが右側に表示されます。

よくある質問と問題解決戦略 

Webflow バッジを削除するにはどうすればよいですか? 

公開済みサイトから Webflow バッジを削除するには、有料のサイト プランまたは Growth または Enterprise Workspace が必要です。Growth または Enterprise Workspaces では、Webflow ステージング サブドメインに公開するときに Webflow バッジを非表示にできますが、Webflow 以外の Web サイト (WordPress Web サイトなど) に Webflow ステージング サブドメインを使用するときには非表示にできません。

PagesプラグインでWebflowステージングサブドメイン（例：yoursite.webflow.io）を使用すると、Webflowバッジがサイトに表示されます。 Made in Webflowバッジを表示 「オフ」になっている サイト設定この動作は意図的です。

Pages プラグインを使用しながらサイトから Webflow バッジを削除するには、サイト プランを購入し、サイトにカスタム ドメインまたはサブドメインを追加し、そのカスタム ドメインをプラグインの設定で使用する必要があります。

API キーが失敗するのはなぜですか? 

WordPressプラグインが最新バージョンに更新されていること、およびWebflowサイトを非公開にして再公開していることを確認してください。次に、新しいレガシーAPIキーを作成します。 サイト設定 > アプリと統合 タブ > APIアクセス WordPressで新しいAPIキーを利用します。 遺産 API キー。

WordPressのWebflow Pagesプラグインで問題が解決しない場合は、 カスタマーサポートチームにお問い合わせください. 

ユアン・マック
Ewan Mak による最新の投稿 (すべてを見る)

関連記事

によるユアン・マック
更新日