WordPress 테마로 한 페이지 웹 사이트를 만드는 방법

한 페이지 웹 사이트를 만드는 방법이나 한 페이지 WordPress 테마를 판매하는 방법에 대한 질문을 많이 받습니다. 처음부터 이 두 가지 질문에 모두 답하겠습니다. 모든 WordPress 테마는 한 페이지 웹사이트가 될 수 있으며 얼마나 간단한지 보여드리겠습니다.

한 페이지 웹사이트란 무엇입니까?

한 페이지 웹 사이트는 일반적으로 홈페이지와 같은 단일 페이지에 모든 필수 콘텐츠가 있는 웹 사이트에 불과합니다.

명확 하고 직접적인 방법으로 단일 제품이나 서비스를 홍보하려는 기업에서 주로 사용합니다. 몇 가지 예는 고객에게 포트폴리오를 보여주거나 이벤트를 조직하거나 새로운 비즈니스를 시작하는 것입니다.

한 페이지 웹사이트에서 탐색 링크를 클릭하면 새 페이지로 이동하지 않지만 동일한 페이지에서 링크와 연결된 콘텐츠 섹션으로 이동하거나 아래로 스크롤됩니다. 이를 통해 사용자 경험을 훨씬 개선하고 사용자 참여를 높일 수 있습니다.

온라인에서 사용할 수 있는 한 페이지 WordPress 테마가 많이 있지만 이미 말했듯이 약간의 작업 으로 모든 테마를 하나의 호출기로 전환 할 수 있습니다.

WordPress로 한 페이지 웹 사이트를 만드는 방법?

앵커 링크

기본 1페이지 웹사이트의 경우 메뉴 , 콘텐츠 및 앵커 링크 만 있으면 됩니다. 메뉴와 콘텐츠가 무엇인지 모두 알고 계실 거라 생각하므로 앵커 링크에 대해 조금 이야기해 보겠습니다. 앵커 링크는 앵커와 앵커 자체를 가리키는 일반 링크로 만들어집니다. 앵커를 가리키는 링크는 # 문자로 시작하는 일반 링크입니다. 앵커 자체는 페이지의 특정 위치입니다. 간단한 예를 살펴보겠습니다.

이것은 앵커를 가리키는 메뉴의 링크입니다.

 <a href="#middle">Go to the middle</a>

앵커 자체에 대한 내용은 다음과 같습니다.

 <h1>Learning about anchor links</h1> <p> Some lorem ipsum content ….</p> <h2>Middle of the page</h2> <p> Some lorem ipsum content ….</p>

이 경우 #middle 은 앵커 링크이고 id=”middle” 은 앵커입니다. "중앙으로 이동" 링크를 클릭하면 "페이지 중앙" 제목이 있는 앵커로 이동합니다. 그게 다야! 이것이 우리가 가장 기본적인 한 페이지 웹 사이트를 만드는 방법입니다. 웹사이트에 원하는 만큼 앵커를 추가할 수 있습니다. 새로 습득한 지식을 워드프레스 사이트에서 사용해 봅시다.

WordPress 메뉴로 앵커 링크 만들기

이 목적을 위해 저는 이미 실제 사례가 될 GrowthPress 테마로 간단한 한 페이지 웹사이트를 만들었습니다. 먼저 새 페이지를 만들고 일부 콘텐츠를 추가했습니다. 콘텐츠는 일부 단락과 제목으로 구성됩니다. 거의 모든 HTML 요소에 앵커를 추가할 수 있지만 이 경우 콘텐츠의 모든 제목에 앵커를 추가합니다.

스크린샷에서 볼 수 있듯이 콘텐츠의 HTML을 편집하려면 편집기를 Visual에서 Text로 변경해야 합니다. 이제 콘텐츠의 모든 HTML 태그를 볼 수 있습니다. 우리의 경우 모든 제목은 <h2> 태그를 사용하며 앵커를 추가하는 데 사용할 것입니다. 위의 스크린샷과 같이 해당 태그에 앵커와 함께 id를 추가해야 합니다. 예: <h2 id=”our-anchor”>Some Title</h2> . 앵커는 # 없이 작성되지만 모든 앵커 링크는 # 으로 시작해야 합니다. 콘텐츠에 모든 앵커를 추가하면 앵커 링크로 연결할 수 있습니다.

WordPress에 익숙하다면 wp-admin -> Appearance -> Menus에서 메뉴 링크를 변경할 수 있으며 여기에서 앵커 링크를 생성할 수 있습니다.

스크린샷에서 사용자 지정 링크를 선택하고 기존 URL 대신 #about-us 앵커 링크를 추가했음을 알 수 있습니다. 해당 링크를 클릭하면 콘텐츠의 앵커 id=”about-us” 로 이동합니다. 모든 앵커 링크를 추가하면 간단한 한 페이지 웹사이트가 완성됩니다. 새로 생성된 링크를 클릭하고 직접 확인하십시오!

부드러운 스크롤

예, 전적으로 동의합니다. 지금까지 한 페이지 웹 사이트는 훌륭하지만 그 즉각적인 점프는 부드러운 스크롤만큼 굉장하지 않습니까? 부드러운 스크롤을 위해서는 웹사이트에 약간의 자바스크립트 코드를 추가해야 합니다.

대부분의 프리미엄 테마에는 사용자 정의 코드를 추가하기 위한 일종의 필드가 있습니다. 예를 들어, 테마에서 wp-admin -> 사용자 지정 -> 테마 옵션 -> 사용자 지정 코드로 이동하면 지금처럼 사용자 지정 코드를 추가하는 데 사용할 수 있는 필드를 찾을 수 있습니다.

테마에 사용자 정의 코드를 위한 장소가 없으면 적절한 플러그인을 사용할 수 있습니다. WPBeginner의 머리글 및 바닥글 삽입 플러그인을 권장합니다. 플러그인을 활성화하면 wp-admin -> 설정 -> 머리글 및 바닥글 삽입에서 사용자 정의 코드를 추가하기 위한 필드를 찾을 수 있습니다.

아래 코드를 필드 중 하나에 붙여넣으면(바닥글 설정에서 스크립트를 사용하는 것이 좋습니다) 이제 앵커 링크에서 부드럽게 스크롤됩니다. 축하합니다! WordPress 테마로 한 페이지 웹사이트를 만들었습니다!

 <script> ( function( $ ) { $(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var hashStr = this.hash.slice(1); var target = $(this.hash); target = target.length ? target : $('[name=' + hashStr +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); window.location.hash = hashStr; return false; e.preventDefault(); } } }); }(jQuery)); </script>

위의 코드는 앵커 링크를 클릭할 때 스크롤 효과에 애니메이션을 적용하고 클릭한 앵커 링크를 반영하도록 현재 브라우저 URL도 업데이트합니다. 완성된 한 페이지 웹사이트에서 최종 결과를 확인하십시오.

부드러운 스크롤을 위해 오프셋을 설정하는 방법은 무엇입니까?

고정 메뉴가 있는 경우 오프셋도 설정하는 것이 좋으므로 콘텐츠 시작이 고정 메뉴 아래에서 시작됩니다. 이를 위해서는 다음 코드 줄을 편집해야 합니다.

 $('html, body').animate({ scrollTop: target.offset().top}, 1000);

여기서 해야 할 일은 오프셋 값을 추가하는 것뿐입니다. 적어도 고정된 고정 메뉴의 높이만큼 커야 합니다.

 $('html, body').animate({ scrollTop: target.offset().top - 180 }, 1000);

이를 통해 콘텐츠 시작 부분이 메뉴 뒤에 숨어 있는 문제를 피할 수 있습니다.

한 페이지 웹사이트의 장점

이제 한 페이지 웹 사이트를 만드는 방법을 알았으므로 한 페이지 웹 사이트를 사용할 때의 장점을 살펴보겠습니다.

한 페이지 웹사이트는 더 나은 모바일 사용자 경험을 제공합니다.

한 페이지 웹사이트는 모바일 보기에 완벽한 하나의 긴 스크롤 페이지로 구성됩니다. Facebook과 뉴스피드에 대해 생각해 보십시오. 토끼굴 아래로 계속 스크롤하지 않을 수 없습니다. 한 페이지 웹 사이트는 바로 이러한 작업을 수행하도록 설계되었으며 지속적인 스크롤은 모바일 장치에 완벽하게 적합합니다.

모바일 장치의 제한된 화면 공간을 감안할 때 메뉴가 숨겨져 있는 위치를 파악하고 웹사이트의 다음 페이지로 이동하기 위해 올바른 링크를 클릭하는 것보다 계속 아래로 스크롤하는 것이 훨씬 쉽습니다. 즉, 한 페이지 웹사이트는 모바일 장치에서 웹사이트를 방문하는 모든 사람에게 훌륭한 사용자 경험을 제공합니다.

한 페이지 웹사이트는 더 적은 텍스트를 필요로 합니다.

기존의 다중 페이지 웹 사이트는 너무 비어 보이거나 더 나쁘게는 미완성으로 보이지 않도록 많은 텍스트를 필요로 합니다. 콘텐츠가 너무 많으면 어수선하고 압도적으로 보일 수 있는 한 페이지 웹사이트와 대조하십시오. 따라서 사본을 최소화하고 짧은 문장과 단락을 사용하여 가장 중요한 정보를 전달하는 것이 좋습니다.

이 접근 방식의 또 다른 이점은 사본 작성이 웹 사이트 시작과 관련된 더 어려운 작업 중 하나가 될 수 있다는 사실입니다. 웹 사이트 사본이 완전히 구체화되지 않은 경우 한 페이지 웹 사이트가 좋은 선택이 될 수 있습니다.

한 페이지 웹 사이트는 이미지와 잘 작동합니다.

이미지는 한 페이지 웹사이트가 포함된 모든 유형의 웹사이트에서 놀라운 일을 할 수 있습니다. 실제로 시차 효과와 결합된 이미지를 사용하면 웹사이트에서 시각적으로 매력적인 효과를 낼 수 있습니다.

시차 효과를 사용하지 않기로 결정한 경우에도 한 페이지 웹사이트에서 이미지를 효과적으로 사용할 수 있습니다. 사진 갤러리나 포트폴리오 이미지를 공유하는 것은 물론이고 섹션을 구분하는 데 사용할 수 있습니다.

이미지는 올바르게 최적화될 때 검색 엔진 결과에 나타나는 경향이 있으므로 이미지를 활용하여 웹사이트 SEO를 높일 수도 있습니다. 따라서 설명이 포함된 제목을 사용하여 이미지에 이름을 추가하고 사이트에 추가하는 각 이미지에 alt 태그를 추가해야 합니다.

한 페이지 웹사이트는 사용자 참여와 전환을 높일 수 있습니다.

한 연구에 따르면 한 페이지 웹사이트는 여러 페이지 웹사이트에 비해 더 높은 전환으로 이어질 수 있습니다. 그 이유는 간단합니다. 한 페이지 웹사이트는 일반적으로 방문자가 행동을 취하도록 매우 집중적으로 설계되었습니다.

더 집중된 메시지가 있으며 방문자가 페이지 끝에 도달했을 때 방문자가 무엇을 하기를 원하는지 더 쉽게 이해할 수 있습니다.

선택 사항이 하나뿐인 경우 다음에 무엇을 해야 하는지 궁금해하는 페이지로 이동하는 대신 해당 버튼을 클릭하거나 클릭 유도문안을 쉽게 클릭할 수 있습니다.

한 페이지 웹 사이트는 탐색하기 쉽습니다.

한 페이지 웹사이트가 탐색하기 더 쉽다는 점도 언급할 가치가 있습니다. 모든 것이 한 페이지에 있기 때문에 특히 모바일 장치에서 길을 잃거나 처음으로 돌아가는 방법을 찾기가 매우 어렵습니다.

앵커 링크를 사용하여 페이지의 다른 섹션으로 이동할 수 있지만(이 기사 참조), 위나 아래로 스크롤하여 원하는 섹션을 찾는 것만큼이나 쉽습니다.

그 외에도 잘 디자인된 한 페이지 웹사이트는 방문자를 논리적인 방식으로 귀하의 비즈니스 또는 브랜드에 대한 이야기를 들려주는 여행으로 안내합니다.

한 페이지 웹사이트를 사용하면 특정 잠재고객을 더 쉽게 타겟팅할 수 있습니다.

앞서 언급했듯이 단일 페이지 웹사이트는 방문자가 행동을 취하도록 설계되었습니다. 이를 활용하여 다음 단계를 수행할 준비가 된 매우 구체적인 잠재고객을 타겟팅할 수 있습니다. 웹사이트의 여러 섹션을 안내함으로써 제품이나 서비스를 소개하고 문제를 해결하는 방법을 보여주고 클릭 유도문안의 형태로 솔루션을 제공할 수 있습니다.

이 접근 방식은 특정 문제가 있음을 이미 알고 있고 해결책을 찾고 있는 매우 구체적인 키워드 또는 잠재고객을 타겟팅할 때 효과적입니다.

한 페이지 웹 사이트 사용의 단점

장점은 제외하고 한 페이지 웹사이트를 사용할 때의 몇 가지 단점을 살펴보겠습니다.

Google Analytics 데이터를 분석하는 것이 더 어려울 것입니다.

지금쯤이면 Google Analytics가 웹사이트 방문자에 대한 유용한 정보를 많이 제공할 수 있다는 것을 알고 계실 것입니다. 사이트에 설치되면 인기 ​​있는 페이지, 새로운 방문자를 유도하는 게시물, 사람들이 사이트에 더 오래 머물도록 하기 위해 최적화해야 하는 페이지를 확인할 수 있습니다.

한 페이지 웹사이트에서는 한 페이지로 제한됩니다. 방문자가 같은 페이지를 방문하고 같은 페이지에서 이탈하므로 웹사이트의 어떤 부분을 개선해야 하는지 알기가 더 어렵습니다. 한 페이지 웹사이트 경로로 이동하기로 결정했다면 Hotjar와 같은 도구에 등록하여 사람들이 웹사이트를 사용하는 방식에 대한 시각적 히트맵을 얻으십시오.

소셜 미디어에서 웹사이트를 공유하는 것은 더 까다롭습니다

한 페이지 웹사이트에서는 소셜 미디어에서 공유할 URL이 하나만 있습니다. 이는 문제에 대한 답변을 찾기 위해 웹사이트의 다른 부분으로 사람들을 보낼 기회를 많이 제공하지 않는다는 것은 말할 것도 없고 빠르게 반복될 수 있습니다. 기본 URL을 공유하면 여러 페이지로 된 웹사이트에서와 같이 특정 페이지나 섹션 대신 전체 웹사이트가 공유됩니다.

쉬운 해결 방법은 웹사이트에 블로그를 통합하여 청중을 끌어들일 수 있는 유용하고 유용한 콘텐츠를 공유하는 것입니다. 이렇게 하면 대부분의 정보를 한 페이지에 압축하여 유지하면서 소셜 미디어에서 웹사이트를 더 쉽게 공유할 수 있습니다. .

한 페이지 웹사이트를 로드하는 데 시간이 더 오래 걸릴 수 있습니다.

한 페이지 웹사이트의 크기와 공유하는 콘텐츠 유형에 따라 웹사이트가 로드되는 데 시간이 더 오래 걸릴 수 있다는 사실에 유의하십시오.

일반적으로 한 페이지 웹사이트는 상당히 가벼운 경향이 있지만 웹에 최적화되지 않은 이미지가 많으면 로딩 시간이 느려집니다. 사이트에 비디오 콘텐츠가 많은 경우에도 마찬가지입니다.

따라서 이미지를 적절한 형식으로 저장하고 사이트에 이미지를 추가하기 전에 크기를 압축하는 것이 중요합니다. 고려해야 할 또 다른 사항은 사용자가 즉시 로드하는 대신 사이트의 특정 섹션으로 스크롤할 때 이미지 및 비디오에 대해 지연 로드를 사용하여 로드하도록 하는 것입니다.

키워드 타겟팅이 제한되어 있습니다.

한 페이지 웹사이트에서는 여러 키워드를 타겟팅할 수 있는 기회가 많지 않습니다. 다중 페이지 웹사이트에서는 타겟팅하려는 각 키워드에 대해 별도의 페이지를 가질 수 있습니다. 한 페이지 웹사이트는 같은 방식으로 작동하지 않습니다.

전문가 섹션에서 언급한 것처럼 한 페이지 웹사이트는 특정 목적과 청중을 염두에 두고 설계되었습니다. 이는 일반적으로 특정 키워드 및 유사 키워드를 타겟팅하는 것으로 해석되며, 이는 여러 개의 고유한 키워드를 타겟팅해야 하는 경우 다중 페이지 웹사이트를 만드는 것이 더 낫다는 것을 의미합니다.

페이지당 두 개 이상의 고유한 키워드를 통합할 수 없다는 규칙은 없지만 특히 가벼운 카피가 한 페이지 웹사이트에서 더 잘 작동한다는 점을 고려할 때 페이지를 적절하게 최적화할 수 없습니다.

고급 SEO 전술을 사용할 수 없습니다

SEO에 대해 말하자면, 한 페이지 웹사이트에서는 사일로(siloing)라고 하는 고급 SEO 전술을 사용할 수 없습니다. 사일로잉(siloing)은 웹사이트를 주요 관심 영역으로 구성하여 해당 영역에서 귀하의 권위를 입증할 수 있도록 하는 관행을 말합니다. 일반인의 관점에서 보면 콘텐츠를 구성하기 위해 카테고리와 하위 카테고리를 만드는 것입니다.

사일로잉의 주요 이점은 관심 있는 방문자가 가질 수 있는 거의 모든 질문을 다루는 수많은 키워드 및 키워드 구문에 대한 순위를 매길 수 있을 뿐만 아니라 모든 가능한 이의를 다룰 수 있다는 것입니다.

여러 페이지로 된 웹사이트는 이 점에서 탁월하지만 한 페이지로 된 웹사이트는 순식간에 너무 압도적이고 복잡해져서 청중이 좌절감을 느끼게 됩니다.

한 페이지 웹 사이트는 세부 정보 제공이 부족할 수 있습니다.

마지막으로, 짧고 간결한 카피와 메시지로 인해 한 페이지 웹사이트는 방문자에게 필요한 모든 세부 정보를 제공하지 못할 수 있습니다. 그러면 설명을 요청하거나 방문자를 혼란스럽게 만드는 이메일 수가 증가할 수 있습니다.

한 페이지 웹사이트에 블로그를 추가하고 방문자에게 보다 심층적인 콘텐츠를 제공하고 발생하는 질문에 답변하면 이 문제를 극복할 수 있습니다.

한 페이지 웹사이트를 사용해야 합니까?

보시다시피 한 페이지 웹 사이트를 사용하는 것에는 확실히 장단점이 있습니다. 그렇다면 한 페이지짜리 웹사이트가 귀하의 비즈니스에 적합한 선택인지 어떻게 알 수 있습니까?

이제 막 비즈니스를 시작하고 입소문을 통해 많은 비즈니스를 창출하는 경우 한 페이지 웹 사이트를 사용하면 디자인 및 개발에 너무 많은 시간을 들이지 않고도 비즈니스를 온라인에 올릴 수 있습니다.

반면에 SEO에 집중하여 더 많은 유기적 트래픽을 얻는 데 집중하고 비즈니스 운영을 확장하는 경우 다중 페이지 웹사이트가 더 적합할 것입니다.

결국 개인 취향과 비즈니스 목표의 문제입니다. 현재 비즈니스의 현재 위치를 평가하고 달성하려는 목표를 기록해 두십시오. 그런 다음 최종 결정을 내리기 전에 위에서 언급한 장단점을 고려하십시오.

결론

우리는 한 페이지 테마가 있는지 묻는 질문을 정말 많이 받습니다. 상황은 다른 테마 작성자도 마찬가지라고 생각합니다. 이 기사에서는 모든 WordPress 테마를 한 페이지 웹사이트로 사용할 수 있으며 원하는 경우 현재 웹사이트를 즉시 한 페이지로 변경할 수 있음을 분명히 해야 합니다. 우리는 또한 한 페이지 웹사이트의 장단점을 다루었고 이것이 귀하의 웹사이트에 적합한 선택인지 결정하는 방법을 공유했습니다.

기사가 한 페이지 웹사이트를 더 잘 이해 하는 데 도움이 되었는지 알려주고 추가 질문 이 있으면 댓글 을 남겨주세요.