Elementor가 로드되지 않는 오류 해결

게시 됨: 2024-03-21

Elementor와 같은 페이지 빌더를 사용하면 디자인 프로세스가 크게 단순화되어 코드 한 줄을 작성할 필요 없이 아름답고 반응이 빠른 사이트를 더 쉽게 만들 수 있습니다. 그러나 항상 순조롭게 항해하는 것은 아닙니다. 사용자가 겪을 수 있는 일반적인 오류 중 하나는 "요소가 로드되지 않음" 오류입니다. 이 문제로 인해 진행이 중단되고 Elementor 편집기가 로드를 거부하여 창작 과정에서 벗어나는 실망스러운 화면이 나타날 수 있습니다. 이 문제를 이해하는 것이 문제 해결을 위한 첫 번째 단계입니다.

이 오류는 플러그인 충돌, 메모리 제한, 서버 제한부터 WordPress 테마 또는 사용 중인 브라우저 문제까지 다양한 원인으로 인해 발생할 수 있습니다. 이 블로그에서는 이 오류가 무엇을 의미하는지 분석하고, 오류가 발생한 위치를 탐색하고, 다양한 설정에 따라 오류가 어떻게 달라질 수 있는지에 대한 미묘한 차이를 논의합니다. 우리의 목표는 귀하에게 이 문제를 진단하고 해결하기 위한 지식을 제공하여 귀하의 작업 흐름이 중단되지 않도록 하는 것입니다.

오류가 어떻게 나타나는지

여러 요인으로 인해 Elementor 편집기가 제대로 로드되지 않을 수 있습니다. 다음은 오류가 나타날 수 있는 가장 일반적인 방식입니다.

  • Elementor 편집기의 인터페이스가 완전히 로드되지 않고 빈 화면이 나타납니다.
  • Elementor 편집기 내의 끝이 없는 로딩 화면으로, 종종 회전하는 휠이나 로딩 바가 함께 표시됩니다.
  • Elementor 편집기에 액세스하려고 하면 “500 내부 서버 오류” 메시지가 나타납니다.
  • 일부 요소 또는 위젯에 액세스할 수 없거나 올바르게 렌더링되지 않는 Elementor 편집기의 부분 로드.
  • Elementor와 관련된 브라우저 JavaScript 콘솔의 오류 또는 경고는 브라우저의 개발자 도구를 사용할 때 표시됩니다.

요소 요구 사항

이 문제는 종종 서버 측 문제나 플러그인 충돌로 인해 발생합니다. 특히 귀하의 서버가 Elementor의 운영 요구 사항에 완전히 부합하지 않을 수 있습니다. Elementor의 경우 원활하게 작동하려면 충족해야 하는 특정 시스템 요구 사항이 있습니다. 이는 저장 공간이 아니라 WordPress 환경의 기본 기술 스택에 관한 것입니다. Elementor의 최소 요구 사항은 다음과 같습니다.

WordPress 버전 : Elementor에는 WordPress 5.2 이상이 필요합니다.이는 Elementor가 해당 기능을 활용하는 최신 WordPress 기능 및 보안 표준과의 호환성을 보장합니다.

PHP 버전 : PHP 7.0 이상이 필요합니다.PHP는 WordPress의 기반이 되는 스크립팅 언어이며 최신 버전에서는 속도와 보안이 크게 향상되었습니다.

MySQL 버전 : 데이터베이스는 MySQL 5.6 이상이어야 합니다.Elementor는 데이터 저장 및 검색을 위해 MySQL을 사용하며, 오래된 버전을 사용하면 성능 병목 현상이나 호환성 문제가 발생할 수 있습니다.

WordPress 메모리 제한 : WordPress에는 최소 128MB의 메모리가 권장됩니다.실시간 미리보기와 수많은 기능으로 인해 리소스 집약적인 플러그인인 Elementor는 충돌이나 속도 저하 없이 원활하게 실행되기 위해 이 정도의 양이 필요합니다.

이러한 전제 조건을 충족하지 않고 Elementor를 설치할 수도 있지만 성능 문제가 발생하거나 전혀 실행되지 않을 수 있습니다. Elementor의 시나리오에서 이러한 요구 사항을 준수하지 않으면 다른 잠재적인 오류 중에서도 편집기가 로드되지 않는 것으로 나타날 수 있습니다.

이 오류가 발생하는 이유

Elementor가 로드되지 않는 오류의 가장 일반적인 요인은 다음과 같습니다.

플러그인 충돌 : 다른 WordPress 플러그인은 특히 충돌하는 JavaScript 또는 CSS를 로드하는 경우 Elementor를 방해할 수 있습니다.이는 페이지 출력을 수정하는 캐싱, 보안 또는 최적화 플러그인의 경우에 자주 발생합니다.

테마 충돌 : 때로는 활성 WordPress 테마가 Elementor와 충돌할 수 있습니다. 특히 테마가 제대로 코딩되지 않았거나 최신 버전의 Elementor와 작동하도록 업데이트되지 않은 경우 더욱 그렇습니다.

오래된 소프트웨어 : 오래된 버전의 WordPress, Elementor 또는 테마를 실행하면 Elementor가 올바르게 로드되지 않는 호환성 문제가 발생할 수 있습니다.

브라우저 문제 : 브라우저 확장, 오래된 브라우저 또는 브라우저별 동작도 원인이 될 수 있으며, 특히 JavaScript 실행을 방해하는 경우 더욱 그렇습니다.

메모리 제한: WordPress에는 PHP 메모리 제한이 있으며, 사이트가 이 제한을 초과하면 Elementor 및 기타 플러그인이 오작동할 수 있습니다.이는 특히 많은 플러그인이 설치된 복잡한 사이트에서 흔히 발생합니다.

서버 제한 사항 : 일부 호스팅 제공업체에서는 편집자의 작업을 차단하는 보안 규칙과 같이 Elementor와 호환되지 않는 제한 사항이나 특정 구성을 적용합니다.

Elementor가 로드되지 않는 오류를 수정하는 방법

이 문제를 해결하려면 근본적인 원인을 식별하고 해결하기 위한 체계적인 접근 방식이 필요합니다. Elementor가 로드되지 않는 경우 가장 먼저 해야 할 일은 더 복잡한 문제 해결 전략을 시작하기 전에 다시 로드하는 것입니다. Elementore가 여전히 로드되지 않으면 문제 해결을 진행해야 합니다.

Elementor 및 WordPress 업데이트

가장 먼저 모든 것이 최신 상태인지 확인하겠습니다. 오래된 버전의 플러그인, 테마 또는 WordPress 자체로 인해 호환성 문제가 발생하여 Elementor가 로딩 화면에서 중단될 수 있으므로 이는 매우 중요합니다.

엘레멘터

WordPress 대시보드에서 Elementor를 업데이트합니다.

  1. WordPress 대시보드에 로그인합니다.
  2. 왼쪽에는 메뉴가 표시됩니다. "플러그인" 위에 마우스를 놓고 "설치된 플러그인"을 클릭하세요.
  3. 설치된 플러그인 목록에서 Elementor 및 Elementor Pro(프리미엄 버전이 있는 경우)를 찾으세요. 사용 가능한 새 업데이트가 있으면 플러그인 이름 아래에 알림이 표시됩니다.
  4. 링크를 클릭하여 플러그인을 업데이트하세요.

워드프레스

  1. WordPress 대시보드로 돌아갑니다. 일반적으로 대시보드 상단이나 업데이트 섹션에 WordPress 핵심 업데이트에 대한 알림이 표시됩니다.
  2. 알림을 클릭하고 안내에 따라 WordPress를 업데이트하세요.

만일을 대비해 이 작업을 수행하기 전에 항상 백업을 확보하는 것이 중요합니다.

Elementor와의 플러그인 충돌 확인

WordPress에서 플러그인 충돌의 미로를 탐색하는 것은 실제로 어려운 작업이 될 수 있습니다. 특히 Elementor와 같은 강력한 도구를 사용하는 흐름을 방해하는 경우 더욱 그렇습니다. 기능 유지와 호환성 보장 사이의 균형은 미묘합니다. 이러한 충돌을 진단하고 해결하여 웹 사이트 운영 중단을 이상적으로 최소화하는 체계적으로 접근하는 방법은 다음과 같습니다.

스테이징 환경 사용

준비 사이트는 기본적으로 실제 웹 사이트에 영향을 주지 않고 변경 사항을 테스트할 수 있는 라이브 사이트의 복제본입니다. 이 설정은 사이트 방문자에게 영향을 주지 않고 플러그인 충돌과 같은 문제를 해결하는 데 매우 중요합니다.

많은 호스팅 제공업체는 호스팅 패키지의 일부로 준비 사이트 기능을 제공합니다.

준비 사이트를 만들 수 있는 WordPress 플러그인도 있습니다. 평점이 높고 자주 업데이트되는 제품을 선택하세요.

10Web 고객인 경우 10Web 대시보드에서 사이트의 준비 환경을 활성화할 수 있습니다. 10Web의 스테이징 환경 관리 에 대한 포괄적인 가이드를 살펴보세요 .

10웹 스테이징 환경

플러그인을 하나씩 테스트하기

스테이징 환경이 활성화되면 이제 라이브 웹사이트에 영향을 주지 않고 플러그인을 테스트할 수 있습니다. 여기서 목표는 문제가 있는 플러그인을 격리하는 것입니다. 해야 할 일은 다음과 같습니다.

비활성화가 강조 표시된 WordPress의 플러그인 페이지

  1. 준비 사이트의 WordPress 대시보드에 액세스하고 “플러그인” > “설치된 플러그인”으로 이동합니다.
  2. Elementor와 유사한 기능을 제공하거나 복잡하거나 리소스 집약적인 것으로 알려진 플러그인부터 시작하여 한 번에 하나씩 플러그인을 비활성화하십시오.
  3. 비활성화할 때마다 Elementor 편집기를 로드해 보세요. 특정 플러그인을 비활성화한 후 편집기가 성공적으로 로드되면 충돌의 원인을 찾았을 가능성이 높습니다.
  4. 어떤 플러그인이 테스트되었는지와 결과를 문서화하세요. 이 정보는 지원팀에 문의하거나 향후 추가 문제를 해결해야 하는 경우 유용할 수 있습니다.

대체 접근 방식: 대량 비활성화

라이브 사이트에 이상적이지는 않지만 Elementor를 제외한 모든 플러그인을 비활성화한 다음 하나씩 다시 활성화하는 것은 스테이징 사이트에서 문제가 있는 플러그인을 식별하는 또 다른 효율적인 방법이 될 수 있습니다.

대량 작업을 사용하여 모든 플러그인을 비활성화합니다.

  1. 사이트의 WordPress 관리 대시보드로 이동합니다.
  2. 플러그인을 클릭하고 플러그인 옆의 확인란이 선택되어 있는지 확인하세요.
  3. Elementor 및 Elementor Pro 앞의 상자를 선택 취소합니다.
  4. 대량 작업 드롭다운 메뉴를 클릭하고 비활성화를 선택합니다.

Elementor가 올바르게로드되는지 확인하십시오. 그렇다면 플러그인 중 하나가 확실히 충돌을 일으키는 것입니다. 플러그인을 하나씩 다시 활성화하고 활성화할 때마다 Elementor를 로드합니다. 이 방법은 충돌하는 플러그인을 더 빠르게 찾아내는 데 도움이 되지만 스테이징 사이트에서 일시적인 기능 손실 위험이 있습니다.

Elementor 애드온

Elementor 추가 기능은 빌더의 기능을 향상시키지만 Elementor와의 긴밀한 통합으로 인해 충돌의 원인이 될 수도 있습니다. 이러한 추가 기능에 동일한 일대일 테스트 접근 방식을 적용합니다. Elementor와의 긴밀한 관계를 고려하여 관련 없는 플러그인으로 이동하기 전에 먼저 시작하세요.

PHP 버전 업데이트

많은 최신 WordPress 플러그인과 마찬가지로 Elementor도 원활하게 작동하려면 최신 웹 환경이 필요합니다. 이 환경의 중요한 부분은 WordPress를 구동하는 스크립팅 언어인 PHP입니다. Elementor는 PHP 7 및 최신 버전만 지원하므로 사이트가 적절한 PHP 버전에서 실행되도록 하는 것이 권장되는 것은 아닙니다. 그것은 필수적입니다. Elementor와의 최적의 호환성을 유지하기 위해 PHP 버전을 확인하고 업데이트하는 방법은 다음과 같습니다.

현재 PHP 버전 확인

업데이트를 고려하기 전에 먼저 사이트에서 현재 사용하고 있는 PHP 버전을 확인해야 합니다. WordPress를 사용하면 다음과 같은 작업이 쉬워집니다.

WordPress에서 PHP 버전 확인

  1. WordPress 대시보드로 이동합니다.
  2. 왼쪽 메뉴에서 '도구' > '사이트 상태'를 선택하세요.
  3. 사이트 상태 페이지 상단에 있는 정보 탭으로 전환하세요. 이 탭에서는 웹사이트에 대한 다양한 기술 세부정보를 제공합니다.
  4. 서버 섹션을 확장합니다. 여기에서 실행 중인 PHP 버전을 포함하여 웹 서버에 대한 정보를 찾을 수 있습니다.

이상적으로는 PHP 7 또는 8이어야 합니다. 이러한 버전은 성능과 호환성 간의 최상의 균형을 제공하기 때문입니다.

PHP 버전 업데이트

적절한 PHP 버전을 사용하고 있지 않더라도 걱정하지 마세요. 많은 호스팅 제공업체에서는 종종 호스팅 제어판을 통해 쉽게 업그레이드할 수 있습니다. 호스트에 따라 프로세스가 약간 다를 수 있습니다.

10웹 사용자

10Web에서 PHP 버전 변경

  1. 10Web 대시보드에 로그인하세요.
  2. PHP 버전을 업그레이드하려는 사이트를 클릭하세요.
  3. "호스팅 서비스" > "도구"를 클릭하세요.
  4. PHP 버전 섹션으로 이동합니다.
  5. 드롭다운 메뉴를 클릭하여 원하는 PHP 버전을 선택하세요.
  6. 웹사이트에 PHP 버전을 적용하려면 변경사항을 확인하세요.

호스트가 직접 업그레이드를 제공하지 않는 경우

모든 호스팅 제공업체가 PHP 버전 전환을 위한 간단한 드롭다운을 제공하는 것은 아닙니다. 이러한 상황에 처한 경우 취할 수 있는 조치는 다음과 같습니다.

  • 호스팅 제공업체의 고객 서비스에 문의하세요. 평판이 좋은 대부분의 호스트는 PHP 버전 업그레이드를 도와줄 것입니다.
  • 현재 호스트가 최신 PHP 버전을 지원하지 않거나 업그레이드를 지원하지 않는 경우, 보다 지원적이고 현대적인 호스팅 환경으로 마이그레이션 해야 할 때일 수 있습니다 . 최신 웹 기술을 적극적으로 지원하는 호스트를 찾으십시오.

PHP 메모리 제한 늘리기

PHP 제한은 사이트 성능부터 다양한 플러그인을 원활하게 실행하는 능력까지 모든 것에 영향을 미칩니다. Elementor 사용자의 경우 플러그인의 최소 요구 사항인 128MB 메모리를 준수하는 것이 중요하지만 256MB의 최적 지점을 목표로 하면 사이트 기능이 크게 향상될 수 있습니다. 다음은 사이트의 PHP 메모리 한도를 확인하고 늘리는 방법에 대한 단계별 가이드입니다.

PHP 메모리 한도 확인

무엇이든 조정하기 전에 자신이 어디에 있는지 아는 것이 현명합니다. WordPress의 사이트 상태 도구를 사용하면 내부를 편리하게 살펴볼 수 있습니다.

WordPress에서 PHP 메모리 확인

  1. WordPress 대시보드로 이동하여 “도구” > “사이트 상태”로 이동합니다.
  2. 정보 탭을 클릭하면 사이트에 대한 기술적인 세부 정보를 확인할 수 있습니다.
  3. 서버 섹션을 열고 "PHP 메모리 제한" 항목을 찾으세요. 이는 WordPress 설치에서 활용할 수 있는 현재 메모리 양을 보여줍니다.

PHP 메모리 제한이 원하는 임계값보다 낮다면 업그레이드할 시간입니다.

FTP를 통해 PHP 메모리 제한 늘리기

PHP 메모리 제한을 늘리는 가장 간단한 방법은 FTP를 통한 약간의 파일 편집입니다. 방법은 다음과 같습니다.

FTP에서 Wp 구성 파일 보기 및 편집

  1. FileZilla 또는 Cyberduck과 같은 FTP 클라이언트를 사용하여 웹사이트에 연결하세요. 일반적으로 웹 호스트에서 제공하는 FTP 또는 SFTP 자격 증명이 필요합니다.
  2. 일반적으로 www, public 또는 public_html이라는 이름의 웹 사이트 루트 디렉터리로 이동합니다.
  3. wp-config.php 파일을 찾아서 편집하세요. 이 중요한 파일에는 WordPress 사이트에 대한 중요한 설정이 포함되어 있습니다.
  4. 파일을 마우스 오른쪽 버튼으로 클릭하고 "보기/편집"을 선택하여 텍스트 편집기에서 엽니다.
  5. `define( 'WP_MEMORY_LIMIT', 'XXXM' );' 줄을 검색하세요. 여기서 'XXX'는 현재 메모리 한도입니다.
  6. 이 줄이 존재하지 않으면 `/* 그게 전부입니다. 편집을 중지하세요!라고 적힌 줄 바로 위에 추가할 수 있습니다. 행복한 블로깅하세요. */`. 제한을 256MB로 설정하려면 `define( 'WP_MEMORY_LIMIT', '256M' );`과 같이 "XXX"를 "256"으로 바꾸세요.
  7. 변경 사항을 저장하고 파일을 닫습니다. FTP 클라이언트는 수정된 파일을 서버에 다시 업로드하라는 메시지를 표시해야 합니다. 기존 wp-config.php를 덮어쓰도록 확인하세요.

이렇게 변경한 후 사이트 상태 페이지를 다시 방문하여 이제 WordPress가 업데이트된 PHP 메모리 제한을 인식하는지 확인하세요.

10웹 사용자

귀하의 웹사이트가 10Web에서 호스팅되는 경우 10Web 대시보드에서 바로 PHP 메모리 제한을 조정할 수 있습니다.

10Web 대시보드를 통해 PHP 메모리 제한을 변경합니다.

  1. 10Web 대시보드에 로그인하세요.
  2. PHP 메모리를 늘리려는 웹사이트를 클릭하세요.
  3. "호스팅 서비스" > "도구"로 이동합니다.
  4. 아래로 스크롤하여 '고급 설정'을 클릭하세요.
  5. "메모리 한도" 앞의 드롭다운 메뉴를 클릭하고 필요한 한도를 선택하세요.
  6. 변경 사항을 적용하려면 "저장"을 클릭하세요.

직접 변경이 허용되지 않는 경우

때때로 웹 호스트는 보안 및 안정성상의 이유로 사용자가 PHP 설정을 수동으로 조정하는 기능을 잠급니다. 이 경우 웹 호스트 지원팀에 문의하세요. WordPress 사이트의 PHP 메모리 제한을 늘려야 하는 필요성을 설명하세요. 평판이 좋은 대부분의 호스팅 서비스는 이를 수용하며 요청 시 이러한 변경을 수행할 수 있습니다.

Elementor의 에디터 로더 방식 변경

운 없이 Elementor의 편집기를 로드하려고 바퀴를 돌렸다면 시도해 볼 수 있는 또 하나의 트릭이 있습니다. Elementor의 설정에는 편집기 오작동을 일으키는 요소를 잠재적으로 우회할 수 있는 옵션이 숨겨져 있습니다. 이 솔루션에는 Elementor가 편집기를 로드하는 방식을 변경하는 작업이 포함됩니다. 이는 약간 틀에 얽매이지 않지만 시도해 볼 가치가 있는 전술입니다.

방법을 알아보기 전에 Elementor의 로딩 방법을 조정하는 것은 일반적인 문제 해결 단계를 모두 마친 후에만 권장된다는 점에 유의하는 것이 중요합니다.

로더 방법을 전환하는 방법은 다음과 같습니다.

스위칭 Elementor 로더 방식

  1. WordPress 대시보드에서 Elementor 메뉴 항목 위에 마우스를 놓고 “설정”을 클릭하세요. Elementor 구성 옵션의 핵심으로 이동합니다.
  2. 설정 창의 상단에는 여러 개의 탭이 있습니다. “고급”을 클릭하세요. "Switch Editor Loader Method"라는 설정이 나타날 때까지 아래로 스크롤합니다.
  3. 이 설정 옆에 있는 드롭다운을 클릭하고 '사용'을 선택하세요. 여기서 수행하는 작업은 본질적으로 Elementor가 편집기를 로드할 때 다른 경로를 시도하도록 지시하는 것입니다.
  4. 새로운 설정이 적용되었는지 확인하려면 "변경 사항 저장" 버튼을 누르세요.

이제 Elementor 편집기에 다시 한 번 접속해 보세요. 운이 좋다면 로더 방법을 변경하여 경로가 정리되고 이전에는 찾기 어려웠던 편집기가 이제 작동할 준비가 되었음을 알게 될 것입니다.

명심해야 할 몇 가지 사항

로더 방법 변경은 일반적으로 원활하며 중단을 일으키지 않습니다. 그러나 항상 다음 사항을 염두에 두는 것이 좋습니다.

이는 문제 해결 단계입니다 . 다른 해결 방법으로 문제가 해결되지 않으면 로더 방법을 변경하는 것이 좋습니다.이는 일차적인 해결책이 아니라 완고한 상황에 대한 영리한 해결 방법입니다.

사이트 모니터링 : 변경 후 Elementor의 작동 방식을 주시하십시오.문제가 발생할 가능성은 낮지만 설정을 조정한 후에는 항상 주의 깊게 관찰하는 것이 좋습니다.

언제든지 다시 전환할 수 있습니다 . 어떤 이유로든 원래 로더 방법으로 되돌리려면 동일한 단계를 따르고 "활성화" 옵션을 선택 취소하면 됩니다.Elementor는 그렇게 유연합니다.

Elementor 호환 WordPress 테마로 전환

WordPress 테마의 광대한 생태계를 고려하면 많은 테마가 Elementor와 같은 페이지 빌더와 원활하게 작동하도록 설계되거나 최적화되었습니다. Elementor 친화적인 테마를 선택하는 것이 왜 중요한지, 그리고 땀을 흘리지 않고 전환하는 방법을 살펴보겠습니다.

Elementor와 호환되는 테마는 다음을 보장합니다.

귀하의 디자인 비전이 실현됩니다 . 호환 가능한 테마는 Elementor의 모든 기능을 제공하므로 동적 위젯과 템플릿을 최대한 활용할 수 있습니다.

원활한 성능 : 이 테마는 Elementor에 최적화되어 있어 충돌이 적고 성능이 향상됩니다.

정기 업데이트 : Elementor 호환 테마는 종종 호환성을 향상하고 새로운 기능을 도입하는 업데이트를 받아 사이트가 최신 상태와 기능을 유지하도록 보장합니다.

적합한 테마 찾기

새로운 테마를 검색할 때 Elementor 호환성에 대한 몇 가지 주요 지표를 주의 깊게 살펴보세요.

명시적 언급 : Elementor와의 호환성을 언급하는 테마 설명은 녹색 표시등입니다.이 승인은 개발자가 Elementor를 사용하여 테마를 테스트하고 서로 잘 작동한다는 것을 확인했음을 의미합니다.

리뷰 및 평점 확인 : 사용자 피드백은 믿을 수 없을 만큼 중요합니다.실제 호환성을 측정하려면 리뷰에서 Elementor에 대한 언급을 찾아보세요.

데모 콘텐츠 : Elementor 기반 데모 콘텐츠를 제공하는 테마는 한발 앞서 시작하고 호환성을 확인합니다.

스위치 만들기

Elementor와의 조화로운 관계를 약속하는 테마를 선택했다면 테마 전환은 간단한 과정입니다.

주요 변경을 하기 전에 최신 백업이 있는지 확인하세요. 이 단계는 안전망이므로 문제가 발생할 경우 사이트를 복원할 수 있습니다.

WordPress 관리자의 테마 섹션.

  1. WordPress 대시보드에서 “외관” > “테마”로 이동합니다.
  2. “새로 추가”를 클릭하고 선택한 테마를 검색하거나 테마 파일을 다운로드한 경우 업로드하세요.
  3. "설치"를 클릭한 다음 "활성화"를 클릭합니다.

새 테마가 활성화되면 페이지를 방문하여 모든 것이 예상대로 표시되는지 확인하세요. Elementor 기반 콘텐츠는 그대로 유지되어야 하지만 새 테마 디자인에 맞게 일부 스타일 조정이 필요할 수 있습니다.

브라우저 확장 비활성화

여러 가지 방법으로 탐색을 쉽게 만들어주는 편리한 작은 추가 기능은 특히 Elementor와 같은 복잡한 웹 애플리케이션의 경우 방해가 될 수 있습니다. 브라우저 확장이 원인인지 확인하는 방법과 그에 대해 수행할 작업을 살펴보겠습니다.

확장 충돌 테스트

확장 프로그램 관련 문제를 진단하는 첫 번째 단계는 깨끗한 브라우저 환경에서 문제가 지속되는지 확인하는 것입니다.

대부분의 브라우저는 기본적으로 대부분의 확장 기능을 비활성화하는 "시크릿" 또는 "비공개" 탐색 모드를 제공합니다. 새 시크릿 창을 열고 그곳에서 Elementor를 사용해 보세요. 또는 확장 프로그램이 설치되지 않은 다른 브라우저를 사용하세요.

Elementor가 이 깨끗한 환경에서 제대로 작동한다면 일반 브라우저 설정의 확장 프로그램이 문제를 일으킬 가능성이 높습니다.

문제가 있는 확장자 식별

확장 프로그램이 원인일 가능성이 높다는 것을 정확히 지적했다면 이제 어떤 확장 프로그램이 원인인지 알아낼 차례입니다.

문제가 발생한 일반 브라우저 창으로 돌아갑니다. 브라우저의 확장 프로그램 설정에 액세스하여 각 확장 프로그램을 한 번에 하나씩 비활성화하세요. 확장 프로그램을 비활성화한 후 Elementor를 다시 사용해 보세요.

변경 사항이 적용되도록 하려면 각 확장을 비활성화한 후 Elementor 편집 페이지를 새로 고치는 것이 중요합니다.

오류가 멈추고 Elementor가 예상대로 작동하기 시작하면 충돌을 일으키는 확장 프로그램을 발견했을 가능성이 높습니다.

Cloudflare Rocket Loader의 Elementor 로드 문제

Cloudflare의 Rocket Loader는 JavaScript 로딩을 최적화하여 웹사이트의 로딩 시간을 개선하도록 설계된 강력한 기능입니다. 이는 훌륭한 도구이지만 때로는 Elementor와 같은 복잡한 웹 애플리케이션을 방해하여 로딩 문제로 이어지거나 Elementor 편집기를 시작하려고 할 때 회색 로딩 페이지에서 멈추는 경우도 있습니다. 다음은 Cloudflare의 속도 이점과 Elementor의 강력한 웹 디자인 기능을 모두 누릴 수 있도록 이 문제를 해결하기 위한 단계별 가이드입니다.

캐시 지우기 또는 비활성화

기술적인 조정을 시작하기 전에 캐시를 지우거나 비활성화하여 깨끗한 상태로 시작하는 것이 중요합니다. 캐시된 데이터는 Elementor 및 Cloudflare 설정과 관련된 업데이트 및 변경 사항을 종종 방해할 수 있습니다. 수행할 작업은 다음과 같습니다.

  • 브라우저 캐시를 간단히 지우는 것만으로도 로딩 문제를 해결할 수 있는 경우가 많습니다. 이렇게 하면 브라우저가 사이트의 최신 버전을 로드할 수 있습니다.
  • Cloudflare에서 캐싱을 일시적으로 끕니다. 이는 캐싱 탭 아래 Cloudflare 대시보드를 통해 수행할 수 있으며, Cloudflare가 오래된 스크립트나 파일을 포함할 수 있는 캐시된 버전의 사이트를 제공하지 않도록 할 수 있습니다.

Cloudflare에서 설정 조정

캐시를 처리한 후 다음 단계는 특히 Rocket Loader 기능과 관련하여 Cloudflare에서 일부 조정을 수행하는 것입니다. Rocket Loader는 많은 사이트에 유용하지만 공격적인 최적화 전략으로 인해 Elementor와 같은 응용 프로그램의 속도가 느려져 오류가 발생할 수 있습니다.

특정 페이지 규칙 만들기

스크립트가 로드되는 방식을 변경하여 사이트의 로드 시간을 개선하는 것을 목표로 하는 Cloudflare의 Rocket Loader 기능은 때때로 Elementor의 편집기 기능을 방해하는 것으로 알려져 있습니다. Rocket Loader에 의한 스크립트의 비동기 로딩은 Elementor를 방해하여 편집기가 제대로 로드되지 않는 문제로 이어질 수 있습니다.

다행히 Elementor를 활용하는 페이지에 대해 특정 Cloudflare 페이지 규칙을 설정하면 이 문제를 해결할 수 있습니다 . 이러한 규칙은 Cloudflare가 Elementor의 페이지 및 템플릿에 대해 Rocket Loader와 같은 특정 최적화를 우회하여 원활한 작동을 보장하도록 지시합니다.

오류를 해결하기 위해 cloudflare에서 생성할 수 있는 규칙은 다음과 같습니다. Elementor 페이지:

 사이트 URL/*요소*

요소 템플릿:

 사이트 URL/?elementor_library=*

"siteURL"을 실제 웹사이트 URL로 바꾸세요.

마무리 생각

이 블로그에서는 Elementor Not Loading 오류를 해결하기 위한 다양한 전략을 탐색하면서 호환성 및 성능 최적화의 중요성을 강조했습니다. 테마 및 PHP 버전 업데이트부터 Cloudflare 설정 조정 및 브라우저 확장 관리에 이르기까지 각 단계는 WordPress 사이트에서 원활하고 효율적인 Elementor 환경을 보장하는 데 맞춰졌습니다. 이 가이드는 일반적인 Elementor 문제에 대한 실용적인 솔루션을 제공하여 최적화된 웹 존재를 유지하는 데 도움을 주기 위한 것입니다.

AI로 WordPress 웹사이트 생성 속도를 높이세요

10Web AI Website Builder를 사용하면 비즈니스 요구 사항에 맞는 맞춤형 WordPress 웹 사이트를 10배 더 빠르게 만들 수 있습니다.

귀하의 웹사이트를 생성하세요
신용 카드가 필요하지 않습니다