WordPress에서 혼합 콘텐츠 문제를 해결하는 방법

게시 됨: 2022-07-06

WordPress 웹 사이트에서 혼합 콘텐츠 오류에 직면하고 있습니까? 이 블로그는 WordPress 웹사이트에서 혼합 콘텐츠 문제를 쉽게 수정하는 방법을 보여줍니다.

웹사이트에 대한 SSL 인증서를 보유하는 것은 이제 필수입니다. 보안 자물쇠 기호는 고객의 신뢰를 얻는 데 도움이 될 뿐만 아니라 검색 엔진에서 더 나은 위치를 차지하는 데 도움이 됩니다. 안타깝게도 HTTP에서 HTTPS로 마이그레이션하는 동안 몇 가지 문제에 직면할 수 있습니다. "혼합 콘텐츠", "안전하지 않은 콘텐츠" 또는 차단된 쇼 스크립트 등. 이러한 문제는 웹페이지의 일부 특정 속성이 SSL을 통해 안전하게 로드되지 않을 때 발생합니다.

도움을 드리기 위해 오늘 HTTPS를 통해 로드되지 않는 리소스를 찾는 방법과 WordPress 웹사이트 및 Elementor에서 이 문제를 해결하는 방법을 보여드리겠습니다.

왜 기다려? 혼합 콘텐츠 오류가 무엇인지 기본적인 것부터 시작하겠습니다.

WordPress의 혼합 콘텐츠 오류란 무엇입니까?

혼합 콘텐츠 오류는 웹사이트에서 암호화하는 동안 잘못된 SSL 설정으로 인해 발생하는 WordPress의 일반적인 문제입니다.

혼합 콘텐츠 오류는 웹사이트 기능에 영향을 미치지 않습니다. 그러나 웹사이트의 SEO 성능과 사용자 경험에 부정적인 영향을 미칩니다.

사용자가 웹사이트를 사용하는 동안 이메일, 비밀번호 등과 같은 기밀 정보를 안전하게 공유할 수 있다고 느끼기 때문에 안전한 웹사이트를 갖는 것은 매우 중요합니다.

SSL 인증서를 암호화하면 브라우저에서 웹사이트 URL 옆에 자물쇠 아이콘이 추가됩니다. 이것은 사용자에게 귀하의 웹사이트가 사용하기에 안전하다는 것을 알려줍니다.

SSL Green PadlockIcon
SSL 인증서가 있는 웹사이트

WordPress 웹 사이트에 SSL 인증서를 추가하고 웹 사이트 콘텐츠가 HTTPHTTPS 연결 모두에서 실행될 때 혼합 콘텐츠 오류가 발생합니다. 이는 SSL 암호화 후 동일한 웹사이트 리소스 중 일부가 보안 연결과 비보안 연결 모두에 로드됨을 의미합니다. 아래 예를 확인하십시오-

  • https://yourwebsite.com/image.jpg (보안)
  • (http://yourwebsite.com/image.jpg) (안전하지 않음)

검색 엔진의 거인인 Google도 WordPress 웹사이트에 SSL을 추가할 것을 권장했습니다. 그렇지 않으면 웹사이트가 안전하지 않은 것으로 간주됩니다. 다음은 SSL이 아닌 웹사이트의 예입니다.

Without SSL Website
비 SSL 웹 사이트

대부분의 WordPress 호스팅 서비스 제공업체는 패키지에 무료 SSL 기능을 제공합니다. 호스팅 회사에서 제공하지 않는 경우 사이트에 무료 SSL 인증서를 추가하기 위해Really Simple SSL과 같은 플러그인을 사용할 수 있습니다.

WordPress 웹 사이트에서 혼합 콘텐츠를 찾는 방법

다음 단계에 따라 웹사이트의 혼합 콘텐츠를 확인할 수 있습니다.

첫 번째 단계: Windows 의 경우 검사(Ctrl+Shift+I) 또는 macOS 의 경우 (Cmd+Alt+I) 검사로 이동하여 웹사이트의 혼합 콘텐츠 오류를 확인할 수 있습니다.

Click on the Inspect Button
Google 크롬 검사 옵션

그런 다음 Google Chrome 브라우저를 사용하여 콘솔 탭으로 이동해야 합니다. 그러면 아래 이미지와 같은 인터페이스가 나타납니다.

Check Mixed content error
콘솔 영역에 혼합 콘텐츠가 표시됩니다.

두 번째 단계: Chrome DevTools보안 탭에서 혼합 콘텐츠 경고를 확인할 수 있습니다.

Go to Chrome DevTools Security Tab
Chrome 개발자 도구

세 번째 단계: 마찬가지로 Chrome DevTools 네트워크 영역에서 혼합 콘텐츠 오류를 확인할 수 있습니다.

웹사이트에서 혼합 콘텐츠 문제를 해결하는 방법

이제 WordPress 웹 사이트에서 혼합 콘텐츠 오류를 수정하는 방법을 보여 드리겠습니다.

시작하자:

SSL Insecure Content Fixer 플러그인을 설치하여 웹사이트의 혼합 콘텐츠 경고를 간단히 수정할 수 있습니다. 가이드를 확인하여 WordPress 플러그인 설치 방법을 알아보세요.

플러그인을 설치하고 활성화한 후 설정->SSL 안전하지 않은 콘텐츠 영역으로 이동해야 합니다.

Go to Settings-SSL Insecure Content
설정 영역에서 SSL Insecure Content 옵션을 찾습니다.

혼합 웹 사이트 콘텐츠를 수정하는 데 필요한 모든 설정을 얻을 수 있습니다. 다음 부분에서는 설정에 대해 설명합니다.

단순한
이것은 혼합 콘텐츠를 수정하는 가장 빠르고 가장 권장되는 방법입니다. 이 옵션은 javascript, stylesheets CSS와 같은 스크립트 및 이미지 및 비디오와 같은 미디어 파일에 대한 웹사이트 혼합 콘텐츠를 수정합니다.

콘텐츠
단순 방법으로 혼합 콘텐츠가 수정되지 않는 경우 콘텐츠 옵션을 선택할 수 있습니다. 이 방법은 내부 WordPress 콘텐츠위젯 텍스트 콘텐츠를 해결했습니다. 이는 앵커, 단락과 같은 웹사이트 콘텐츠 내부에 추가한 링크가 HTTPS로 업데이트됨을 의미합니다.

위젯
웹사이트 위젯에 대한 단축 코드 또는 내부 링크를 사용했으며 SSL을 활성화한 후에도 여전히 HTTP로 통계됩니다. 이 옵션을 활성화하면 웹사이트 위젯 에 로드된 모든 URLHTTP 에서 HTTPS 로 변환할 수 있습니다.

Fix Insecure Content
SSL 안전하지 않은 콘텐츠 설정 영역

포착
머리글과 바닥글은 많은 스크립트, 스타일시트 및 기타 링크를 보관하는 웹사이트의 가장 필수적인 부분입니다. SSL을 활성화하면 머리글과 바닥글의 많은 링크가 동일하게 유지됩니다. 이는 이러한 링크가 HTTP 연결로 로드됨을 의미합니다. 캡처 방법에 체크 표시를 하면 웹사이트 머리글바닥글HTTPS 로 교체되어 콘텐츠가 혼합됩니다.

모두 캡처
위의 모든 방법으로 문제가 해결되지 않으면 모두 캡처 옵션을 시도할 수 있습니다. 이 방법은 모든 웹사이트 혼합 콘텐츠를 강제로 수정합니다.

플러그인 설정 영역에서도 얻을 수 있는 다른 설정이 있습니다.

특정 플러그인 및 테마의 혼합 콘텐츠를 수정하려면 특정 플러그인 및 테마 수정 옵션을 선택할 수 있습니다.

웹 사이트 콘텐츠가 HTTP 로 외부 사이트를 가리키는 상태로 두려면 외부 사이트 무시 옵션을 선택할 수 있습니다.

혼합 콘텐츠 수정 수준을 완료한 후 HTTPS 감지 를 정의할 수 있습니다. 이 설정을 사용하면 WordPress 웹사이트에서 HTTPS 콘텐츠를 감지하는 방법을 선택할 수 있습니다. 기본 표준 WordPress 기능 을 권장합니다. 따라서 변경할 필요가 없습니다.

Fix other insecure content
SSL 안전하지 않은 콘텐츠 설정 저장

마지막으로 설정을 저장하려면 변경 사항 저장 버튼을 클릭해야 합니다.

보너스 1: Elementor 웹사이트의 혼합 콘텐츠 오류 수정

웹 사이트가 WordPress 및 Elementor로 구축되었으며 웹 사이트의 혼합 콘텐츠를 수정해야 하는 경우 다음 단계를 수행할 수 있습니다.

먼저 Elementor->Tools 영역을 방문해야 합니다.

Elementor Tools
Elementor 도구 찾기 옵션

다음 단계에서는 Elementor 도구 설정이 표시됩니다. URL 바꾸기 탭을 클릭하기만 하면 됩니다. 그런 다음 웹사이트의 이전 URL (http://yourwebsite.com/)(https://yourwebsite.com/)업데이트 사이트 주소(URL) 영역에 삽입합니다.

마지막으로 URL 바꾸기 버튼을 눌러 모든 웹사이트 URL을 HTTP 에서 HTTPS 로 바꿔야 합니다.

Elementor Replace URL Settings
URL 바꾸기

그게 다야

혼합 콘텐츠 문제를 해결하는 또 다른 방법이 있습니다. 이 오류를 해결하려면 호스팅 제공업체에 문의해야 합니다. SSL 암호화 오류를 해결하면 웹사이트 혼합 콘텐츠 경고의 대부분이 해결됩니다. 그런 다음 위의 방법에 따라 다른 혼합 콘텐츠 문제를 해결할 수 있습니다.

보너스 2: 일부 혼합 콘텐츠 유형의 예

SSL 설정 오류로 인해 웹사이트에 많은 유형의 콘텐츠가 혼합될 수 있습니다. 다음은 주목할만한 사항입니다.

스타일시트: 웹사이트를 구축하는 동안 사용되는 여러 유형의 스타일시트가 있습니다. SSL을 활성화한 후 혼합되는 매우 일반적인 콘텐츠입니다. 그것에 대한 아이디어를 얻으려면 아래 이미지를 확인하십시오.

Mixed Content in the Stylesheet
스타일시트의 혼합 콘텐츠

스크립트: 스타일시트와 마찬가지로 웹사이트 스크립트 파일에도 혼합 콘텐츠 오류가 발생합니다. 다음은 예입니다.

Mixed Script files
스크립트의 혼합 콘텐츠

미디어 파일: HTPP에서 HTTPS로 마이그레이션한 후에도 이미지, 배너 등과 같은 많은 웹사이트 미디어 파일이 여전히 HTTP 연결로 로드됩니다. 다음은 혼합 콘텐츠로 간주되는 하드코딩된 이미지 파일의 예입니다.

Image Mixed Content
하드코딩된 이미지에 혼합된 콘텐츠

위젯: WordPress 웹사이트에서 위젯은 정적 및 연결 가능한 콘텐츠를 표시하는 데 사용하는 필수 기능입니다. 따라서 위젯 영역에는 항상 혼합된 콘텐츠가 있을 수 있습니다.

테마 및 플러그인: 개발자가 흰색 개발 테마 또는 플러그인과 같이 HTTP를 잘못 사용하는 경우가 있습니다. 따라서 이러한 HTTP 링크는 SSL 인증서를 암호화한 후에도 웹사이트에 계속 남아 있습니다. 따라서 이 문제를 처리하는 방법을 배우게 될 튜토리얼 부분의 뒷부분에서 이 혼합 콘텐츠를 수정하는 데 주의해야 합니다.

결론

위 가이드에서 WordPress 웹사이트에서 혼합 콘텐츠 문제를 해결하는 방법에 대한 자세한 가이드를 공유했습니다. 또한 혼합 콘텐츠 오류가 무엇이며 Elementor 웹 사이트의 혼합 콘텐츠 문제를 해결하는 방법에 대해서도 논의했습니다.

이 주제에 대해 더 많은 정보가 필요하거나 질문이 있는 경우 저희에게 댓글을 달 수 있습니다.

또한 이 블로그를 확인하고 WordPress 웹사이트의 로드되지 않는 문제를 해결하는 방법을 알아보세요.

Facebook 및 Twitter 채널에 연결하고 뉴스레터 구독을 요청합니다.

뉴스레터 구독

Elementor에 대한 최신 뉴스 및 업데이트 받기