Webflow 페이지 확장과 WordPress 통합

Webflow의 강력한 코드로 페이지를 시각적으로 구축한 다음 WordPress 사이트에 바로 제공하세요.

메모: 이 확장 프로그램의 기존 버전은 더 이상 지원되지 않습니다. 이전에 다운로드한 사용자만 액세스할 수 있습니다. 또한 확장 프로그램은 지원 정책 범위를 벗어나므로 지원 팀에서는 확장 문제 해결을 위한 직접적인 지원을 제공할 수 없습니다.

WordPress에서 웹사이트를 운영하고 싶지만 Webflow로 디자인하는 것을 선호하시나요? Webflow의 WordPress 확장을 활용하여 Webflow에서 사이트 레이아웃을 시각적으로 생성한 다음 해당 페이지 중 하나 이상을 WordPress 웹 사이트에 직접 표시할 수 있는 옵션이 있습니다.

이것이 작업을 단순화하는 방법:

  • 코딩 없이 디자인을 완벽하게 제어할 수 있습니다. 테마를 변경하기 위해 맞춤형 WordPress 개발 프로젝트에 뛰어드는 것을 피하세요. 독특한 디자인을 손상시키지 않고 Webflow에서 시각적으로 페이지(또는 전체 사이트)를 만들기만 하면 됩니다. Webflow와 WordPress의 디자인에 대해 자세히 알아보세요..
  • 새로운 페이지를 빠르게 생성합니다. 프로모션 랜딩 페이지를 신속하게 만들거나 기존 WordPress 사이트에 무언가를 추가해야 합니까? Webflow에서 디자인하고 WordPress 사이트에 통합하면 WordPress에서 맞춤형 페이지를 구성할 필요가 없습니다.
  • 효율적인 페이지 업데이트. WordPress 사이트에 Webflow 페이지를 배포한 후 Webflow에서 업데이트를 적용하거나 새 세그먼트를 추가할 수 있으며, 단 한 번의 클릭으로 원활한 라이브 게시가 가능합니다.

이 튜토리얼에서는 다음을 이해하게 됩니다.

  1. 확장 프로그램을 가져오고 활성화하는 방법
  2. API 키를 생성하고 조정하는 방법
  3. 페이지 구성을 정렬하는 방법
  4. 문제 해결을 위한 자주 묻는 질문과 팁

확장 프로그램을 가져오고 활성화하는 방법

작업을 시작하려면Webflow 페이지 확장, WordPress 플러그인 디렉토리에서 다운로드하여 설치하세요.

액세스 플러그인 메뉴 WordPress 관리자 패널에서 오른쪽 상단에 있는 검색 기능을 사용하여 “Webflow 페이지”를 찾으세요.

Webflow Pages 플러그인은 검색창에 "webflow"를 입력하면 WordPress 플러그인 메뉴에 나타납니다.

Webflow Pages 확장 카드를 찾아 다음을 클릭합니다. 지금 설치.

그런 다음 계속해서 클릭하세요. 활성화.

활성화가 완료되면 다음에서 Webflow 페이지 확장을 발견하게 됩니다. 왼쪽 사이드바. “환영합니다” 링크를 클릭하세요. 여기서 당신은 다음을 발견하게 될 것입니다. 간략한 개요 그리고 일부 유용한 하이퍼링크.

메모: WordPress용 Webflow 페이지 확장은 Webflow 전자상거래와 호환되지 않습니다.
Webflow 페이지 확장 개요 페이지는 방법 안내 및 확장 설정에 대한 링크를 제공합니다.

API 키 생성 및 구성

확장 작업을 시작하려면 설정 부분.

확장에는 다음이 필요합니다. Webflow API 키 (“API 토큰” 또는 “액세스 토큰”이라고도 함). Webflow API 토큰을 검색하려면 다음으로 이동하세요. 사이트 설정 > 앱 및 통합 탭 > API 액세스를 클릭하고 레거시 API 토큰 생성. 때리다 복사 토큰을 클립보드에 복사합니다.

메모: WordPress용 Webflow 페이지 확장을 사용하려면 레거시 API 토큰을 활용해야 합니다.

메모: API 토큰을 안전하게 저장하는 것이 중요합니다. API 토큰은 민감한 개인정보로 취급되므로 비밀번호처럼 취급해야 합니다. 처음 생성한 후에는 대시보드에서 다시 볼 수 없습니다. API 토큰이 손상된 것으로 의심되면 다음으로 이동하세요. 사이트 설정 > 앱 및 통합 탭 > API 액세스, 클릭 레거시 API 토큰 생성 새 토큰을 생성하고 타사 연결에서 손상된 토큰을 교체합니다.

다음, 출판하다 귀하의 사이트를 방문하고 WordPress 관리자 패널로 돌아갑니다. 붙여넣기 API 토큰 그리고를 클릭하세요 Webflow API 키 추가.

페이지 설정 구성

확장 프로그램으로 이동됩니다. 페이지 영역. 여기에서는 WordPress 페이지 대신 Webflow에서 생성한 페이지를 선택해야 합니다(웹 사이트의 WordPress 경로 선택). 제한 없이 원하는 만큼 페이지를 자유롭게 통합할 수 있습니다. 

Webflow 컬렉션 페이지가 있는 경우 이 페이지의 인접한 섹션에 표시됩니다. WordPress 사이트에 추가할 수도 있습니다.

설정 메뉴의 고급 설정을 관리하여 사이트에서 Webflow 페이지를 로드하는 방법을 제어할 수 있습니다. 대부분의 경우, 그들을 방해할 필요가 없습니다. 귀하는 다음을 선택할 수 있습니다.

  • 선택 캐시 기간 (사이트가 Webflow 페이지를 캐시하는 기간을 지정하세요)
  • 캐시 비활성화 (디버깅에 도움이 될 수 있는 WordPress 사이트 캐시를 삭제하세요)
  • 정적 페이지 캐시 미리 로드 (페이지를 더 빠르게 로드하는 데 도움이 됨)
  • Webflow 사이트 연결 끊기 선택하여 초기화 새 사이트를 포함하려면

Webflow 사이트의 표지가 오른쪽에 표시됩니다.

자주 묻는 질문과 문제 해결 전략 

Webflow 배지를 제거하려면 어떻게 해야 합니까? 

게시된 사이트에서 Webflow 배지를 제거하려면 유료 사이트 요금제나 Growth 또는 Enterprise Workspace가 필요합니다. Growth 또는 Enterprise Workspaces에서는 Webflow 스테이징 하위 도메인에 게시할 때 Webflow 배지를 숨길 수 있지만 Webflow 외부 웹 사이트(예: WordPress 웹 사이트)에 대해 Webflow 스테이징 하위 도메인을 사용하려고 할 때는 숨길 수 없습니다.

페이지 플러그인에서 Webflow 스테이징 하위 도메인(예: yoursite.webflow.io)을 사용하면 다음과 같은 경우에도 Webflow 배지가 사이트에 표시됩니다. 디스플레이 Made in Webflow 배지 에서 "꺼짐"으로 전환됩니다. 사이트 설정. 이 동작은 의도적인 것입니다.

페이지 플러그인을 활용하는 동안 사이트에서 Webflow 배지를 제거하려면 사이트 계획을 구입하고, 사용자 정의 도메인 또는 하위 도메인을 사이트에 추가하고, 해당 사용자 정의 도메인을 플러그인 설정에 사용해야 합니다.

내 API 키가 실패하는 이유는 무엇입니까? 

WordPress 플러그인이 최신 버전으로 업데이트되었는지, Webflow 사이트 게시를 취소했다가 다시 게시했는지 확인하세요. 그런 다음 새 레거시 API 키를 생성합니다. 사이트 설정 > 앱 및 통합 탭 > API 액세스 WordPress에서 새로운 API 키를 활용하세요. 생성했는지 확인하세요. 유산 API 키.

WordPress용 Webflow Pages 플러그인에 문제가 지속되면 친절하게도 우리 고객 지원팀에 연락하세요

이완 막
Ewan Mak의 최신 게시물 (모두 보기)