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

단일 페이지 웹사이트는 사용자가 스크롤할 수 있는 단 하나의 페이지만 있는 사이트입니다. 많은 단일 페이지 웹사이트에는 여전히 기본 메뉴가 있습니다. 사람들은 메뉴 항목을 클릭할 수 있지만 다른 페이지로 이동하는 대신 같은 페이지의 다른 섹션으로 이동합니다. 우리는 이미 당신에게 보여줬어요 웹 사이트를 만드는 법, 하지만 이 문서에서는 다음을 사용하여 단일 페이지 자료를 만드는 방법을 보여 드리겠습니다. 워드프레스(WordPress)!

혜택

빠른 속도를 원하는 경우 한 페이지로 구성된 웹사이트가 좋은 솔루션이 될 수 있습니다. 단일 페이지에는 많은 장점이 있습니다. 예를 들어 다른 섹션으로 이동하기 위해 사이트를 다시 로드할 필요가 없습니다. 사용자는 섹션 간을 쉽게 탐색하고 원하는 항목을 빠르게 찾을 수 있습니다. 한 페이지로 구성된 웹사이트에서는 사람들이 귀하의 콘텐츠를 보는 순서를 제어할 수도 있습니다. 먼저 제품이나 서비스의 모든 이점을 보여주고 마지막에 가격을 보여줄 수도 있고 그 반대일 수도 있습니다.

소규모 사이트를 위한 탁월한 솔루션

단일 페이지 자료는 각 주제에 대한 약간의 정보만 제공하는 사이트에 이상적입니다. 하나 또는 두 개의 단락으로 각각에 대해 이야기하고 싶은 XNUMX개의 주요 항목이 있다고 가정해 보겠습니다. 이 콘텐츠를 XNUMX개의 다른 페이지로 나누면 사이트가 덜 완성되었다는 인상을 줄 수 있습니다.

이미지 기반

대부분의 단일 페이지 웹사이트는 관련 이미지를 많이 사용합니다. 각 페이지에 하나의 이미지만 사용하여 이러한 사진을 여러 페이지로 나누면 사이트가 약간 덜 완성되었다는 인상을 줄 수 있습니다. 상상할 수 있듯이 사용자가 스크롤하는 각 주제와 관련된 다양한 이미지가 있는 한 페이지 웹사이트는 훨씬 더 나은 느낌을 줍니다.

더 나은 모바일 경험

단일 페이지 웹사이트는 페이지가 전환될 때마다 사이트를 다시 로드할 필요가 없기 때문에 휴대폰 사용 환경이 매우 좋은 경우가 많습니다. 사람들은 어떤 장치에서든 필요한 것을 빠르게 찾을 수 있으며, 웹사이트에 있는 동안 연결이 끊어져도 문제가 되지 않습니다. 페이지가 이미 로드되었으므로 여전히 다른 섹션으로 이동할 수 있습니다. 이렇게 하면 귀하의 사이트가 일반 웹사이트가 아닌 모바일 앱처럼 느껴질 수도 있습니다. 실제로 App Store에는 이 방법을 사용하는 앱이 있습니다.

단일 페이지 웹사이트를 사용하지 말아야 할 경우

엄청난 양의 콘텐츠를 제공하는 경우 한 페이지짜리 문서가 너무 길어서 스크롤하기 어려울 수 있습니다.

WordPress로 한 페이지짜리 웹사이트 만들기

한 페이지짜리 웹사이트가 당신에게 적합하다고 생각한다면 계속 읽어보세요. 그 후에는 자신만의 한 페이지짜리 웹사이트를 만들 수 있습니다.

공시: FirstSiteGuide는 독자들의 지원을 받습니다. 귀하가 당사 사이트의 링크를 통해 구매하면 당사는 수수료를 받을 수 있습니다. 우리는 우리가 추천하는 모든 제품을 테스트하고 사용해 봅니다. 

워드프레스 설정

WordPress 및 서버 설정에 익숙하지 않더라도 겁먹지 마세요. 나만의 호스팅 계획 세우기 사전 설치된 WordPress를 사용하면 시간이 몇 분 밖에 걸리지 않습니다. 하지만 그 전에도 XAMPP를 사용하여 로컬 서버를 설정하고 한 푼도 지출하지 않고 단일 페이지 사이트를 만들어 볼 수 있습니다.

예, 로컬 서버를 생성하면 이점이 있습니다. 하지만 XAMPP에 대해 처음 듣는 경우 WordPress용으로 준비하는 좀 더 긴 프로세스를 준비하세요. 그래도 우리가 준비한 단계를 따른다면 아무런 문제가 없어야 하며 XNUMX분 이내에 개인 WordPress 설치 작업을 시작할 수 있습니다.

Windows용 XAMPP를 설정하고 WordPress를 설치하는 방법

손을 더럽히기 전에 먼저 XAMMP가 무엇인지 알아야 합니다. XAMPP는 크로스 플랫폼(X), Apache(A), MariaDB(M), PHP(P) 및 Perl(P)을 나타냅니다. 개인 서버를 운영하는 데 도움이 되는 무료 소프트웨어 배포판입니다. 여기에는 WordPress를 성공적으로 설치하는 데 필요한 서버 애플리케이션, 데이터베이스 및 스크립팅 언어가 포함되어 있습니다. 일반적으로 XAMPP에서 실행되는 서버는 테스트 목적으로 사용되므로 호스팅 비용을 지불하거나 모든 사람에게 웹 사이트 놀이터를 보여주지 않고도 웹 디자인 기술을 자유롭게 연습할 수 있습니다.

Windows용 XAMPP를 설치하는 방법

이제 이론은 그만하고 전체를 설정하는 방법을 보여 드리겠습니다. 이름의 크로스 플랫폼 부분은 소프트웨어가 Linux 및 Mac 컴퓨터에서도 작동한다는 것을 의미하지만 오늘은 Windows에 중점을 둘 것입니다.

1. We Buy Orders 신청서를 클릭하세요. 아파치 프렌즈 웹사이트
2. 버튼을 클릭하여 최신 버전을 다운로드하고 컴퓨터에 저장하세요.
3. 다운로드가 완료되면 설치 프로그램을 실행하세요.
4. 환영 화면에서 다음을 클릭하세요. 다음

다음 화면에서 설치하려는 구성 요소를 선택하라는 메시지가 표시됩니다. 모든 것을 그대로 두고 모든 구성 요소를 설치할 수 있습니다. 하지만 기본적인 WordPress 설치만 원한다면 떠나도 충분합니다. MySQL의 및 phpMyAdmin을 옵션이 선택되었습니다. 나중에 다른 구성 요소가 필요할 경우를 대비해 나중에 제어판을 통해 추가할 수 있습니다. 이 튜토리얼의 목적에 따라 한 페이지 웹 사이트를 만드는 데 필요하지 않은 다른 모든 옵션을 선택 취소할 수 있습니다.

1. XAMPP를 설치하려는 폴더를 선택합니다. 원하는 폴더가 될 수 있으며 기본 폴더를 그대로 둘 수도 있습니다. 위치만 기억해두세요
2. 다음 화면에서 '를 선택 취소하세요.XAMPP용 Bitnami에 대해 자세히 알아보기” 옵션을 선택하면 WordPress를 수동으로 설치할 것이기 때문입니다.
3. 다음

이제 설치 프로그램에 잠시 시간을 내어 모든 파일을 전송하고 WordPress 사이트에 사용할 환경을 설정하세요. 몇 초 후에 설치 프로그램이 모든 것을 풀고 설치를 완료합니다.

1. “를 남겨주세요제어판을 시작하시겠습니까?"옵션이 선택되었습니다.
2. 다음

모든 일이 문제 없이 진행되었으면 좋겠습니다. 그렇다면 오류를 표시하는 빨간색 텍스트 없이 제어판이 열리는 것을 볼 수 있습니다. 또한 Apache와 MySQL이 녹색으로 표시되어 있으며 이는 실행 중임을 의미합니다. 서버가 제대로 실행되고 있는지 확인하려면 브라우저로 이동하여 다음 URL을 방문하세요: http://localhost.

모든 것이 정상이면 Windows용 XAMPP를 환영하는 간단한 웹 페이지가 표시됩니다. 페이지가 로드되면 숨을 참지 않아도 됩니다. 이는 XAMPP가 올바르게 설정되었으며 WordPress 설치로 이동할 수 있다는 의미이기 때문입니다.

불행하게도 개인용 컴퓨터에서 실행 중인 다른 응용 프로그램이 XAMPP를 방해할 수 있습니다. 예를 들어 Skype는 XAMPP에 문제가 있는 것으로 알려져 있으므로 문제가 발생하는 경우 Skype를 종료한 다음 XAMPP 제어판을 열어보세요. 때로는 XAMPP가 올바르게 작동하기 위해 몇 개의 포트를 열어야 할 수도 있지만 안타깝게도 이는 완전히 다른 도메인이므로 이 튜토리얼에서 모든 내용을 다룰 수는 없습니다.

XAMPP를 사용하여 WordPress를 설치하는 방법

괜찮은. 환경이 준비되어 있다고 가정해야 합니다. 이제 로그인하고 단일 페이지 작성을 시작할 수 있도록 로컬 컴퓨터에 WordPress를 설치할 차례입니다. 우선, WordPress에서 모든 정보를 저장하는 데 사용하는 데이터베이스를 만들어야 합니다.

1. XAMPP 제어판 열기
2. 클릭 관리자 MySQL 섹션의 버튼을 클릭하세요. phpMyAdmin으로 새 창이 열립니다.
3. 왼쪽 메뉴에서 데이터베이스 왼쪽 상단 메뉴 탭
4. 데이터베이스 이름을 입력합니다(예: 워드프레스(WordPress)
5. 만들기 단추

이 부분은 그렇게 까다롭지는 않았죠? 이제 브라우저 창을 닫고 다음 단계를 준비할 수 있습니다.

1. 다운로드 최신 버전의 워드프레스
2. XAMPP 폴더(이전 단계에서 XAMPP를 설치한 폴더)로 이동합니다.
3. 폴더를 열고 다음으로 이동합니다. htdocs 디렉토리 폴더
4. 거기에 WordPress 아카이브의 압축을 푸세요.

htdocs 폴더에 새로운 WordPress 폴더가 생기게 됩니다. 이 폴더의 이름을 원하는 이름으로 바꿀 수 있습니다. 이는 로컬 설치 주소의 일부이기도 합니다. 이 튜토리얼의 목적에 따라 다음과 같이 부르겠습니다. 워드프레스(WordPress) 그러면 사이트가 열립니다. http://localhost/wordpress. 어떤 이름을 사용하는지는 별로 중요하지 않으므로 원하는 대로 자유롭게 변경하세요.

1. 해당 폴더를 열고 wp-config-sample.php 파일을 찾으세요.
2. 이름을 wp-config.php로 바꿉니다.
3. 파일을 열고 MySQL 설정에 대한 정보가 있는 부분을 찾으세요. (스크린샷을 보세요)
4. "database_name_here"를 데이터베이스 이름으로 바꾸십시오. 제 경우에는 "WordPress"입니다.
5. "username_here"를 "root"로 바꾸고 "password_here"는 비워 둡니다.
6. 파일을 저장하고 닫습니다

마지막으로 설치 프로세스를 마무리할 준비가 되었습니다. 브라우저를 열고 다음으로 이동하세요. http://localhost/wordpress (또는 WordPress 폴더를 추출할 때 다른 이름을 사용한 경우 이름을 변경하십시오.) 이제 WordPress에서 선택해야 하는 언어를 묻는 메시지가 표시됩니다. 그 후 계속 단추. 그런 다음 사용자 이름과 비밀번호 세부정보를 입력하고 다음을 클릭합니다. WordPress를 설치합니다.

이거 야! 이제 마침내 테스트 사이트에 로그인하여 첫 번째 단일 페이지 웹사이트 작업을 시작할 수 있습니다. 첫 번째 단계는 테마를 선택하는 것입니다.

테마 선택

당신이 사용할 수 어떤 테마라도 한 페이지짜리 웹사이트의 경우. 이 예에서는 무료 사이트오리진 노스 WordPress 테마 저장소에서 찾을 수 있는 테마입니다. 이동 모양 -> 테마 -> 새로 추가 WordPress 대시보드에 "SiteOrigin North"를 입력하세요. 이제 목록의 맨 위에 있어야 합니다.

간단하지만 잘 디자인된 반응형 테마로 다음과도 매우 잘 작동합니다. BigCommerce 및 WooCommerce. 이는 이 예에서 사이트에 사용할 페이지 빌더 플러그인 개발자가 만든 것입니다. 다시 한 번 말씀드리지만, 다른 테마를 자유롭게 사용해 보세요. 메뉴 항목을 클릭할 때의 전환 효과는 어느 쪽이든 작동합니다. 고정 메뉴가 있는 테마를 사용하는 것이 좋습니다. 그러면 사이트 방문자가 다른 섹션으로 이동하는 메뉴 항목을 클릭하기 위해 페이지 상단으로 다시 스크롤할 필요가 없습니다.

플러그인

단일 페이지 웹사이트를 만드는 데 가장 중요한 것은 사용하는 플러그인입니다. SiteOrigin이라는 페이지 빌더와 이 플러그인에 대한 위젯 확장을 설치하겠습니다. 둘 다 완전히 무료이며 WordPress 플러그인 저장소에서 호스팅됩니다. 이동 플러그인-> 새로 추가 WordPress 사이트의 대시보드에 다음을 입력하세요. 페이지 빌더 사이트 출처별. 플러그인이 목록 상단에 나타나 설치하고 활성화합니다. 동일한 화면에 위젯 번들 플러그인을 설치할 수 있습니다. siteorigin 위젯 번들 플러그인 찾기에서. 두 플러그인이 모두 활성화되어 있는지 확인하세요.

이 페이지 빌더 버전 2.3부터 한 페이지 웹사이트 스크롤 기능이 추가되었습니다. 이는 누군가가 행 ID가 "href" 속성(링크)인 메뉴 항목을 클릭할 때마다 웹사이트를 스크롤하도록 하는 데 필요한 것입니다. 이 튜토리얼의 뒷부분에서 이것이 어떻게 작동하는지 설명하겠습니다.

건축을 시작하세요!

이제 플러그인이 활성화되었으며 페이지를 구축할 준비가 되었습니다. 먼저 새 페이지를 추가하거나 페이지를 편집하세요. 페이지 편집기 상단의 탭으로 이동하여 새로 추가된 “페이지 빌더” 탭을 클릭하세요.

SiteOrigin 페이지 빌더에는 많은 사전 설정이 있으므로 처음부터 전체 디자인을 구축할 필요가 없습니다. 페이지 편집기 위에 몇 가지 버튼이 표시되며 그 중 하나가 '레이아웃' 버튼입니다. 클릭하세요.

이제 모든 종류의 레이아웃이 포함된 화면이 표시됩니다. 이는 사용할 수 있는 사전 설정입니다. 레이아웃을 가져오고 내보낼 수도 있지만 아직 이러한 기능이 있다고 가정하지는 않습니다. 이 예에서는 "피트니스 체육관" 디자인을 선택하겠습니다. 물론 원하는 디자인을 선택하거나 처음부터 시작할 수 있습니다. 선택한 디자인을 클릭하고 오른쪽 하단에 있는 삽입 버튼을 클릭하세요. 페이지에 이미 콘텐츠가 있는 경우 콘텐츠 앞이나 뒤에 삽입하거나 완전히 바꾸도록 선택할 수 있습니다. 우리에게는 빈 페이지가 있으므로 중요하지 않습니다.

계속해서 페이지를 저장하고 방문하세요. 모든 것이 제대로 되었다면 ID를 추가할 수 있었습니다. 방금 생성한 페이지 상단의 WordPress 관리 표시줄에 있는 링크를 클릭하여 “라이브 편집기” 모드로 전환하세요.

사이트의 요소 위로 마우스를 가져가면 어떤 위젯이 어떤 요소를 나타내는지 정확하게 확인할 수 있습니다. 상단의 SiteOrigin Hero 다음 첫 번째 행으로 이동하여 도구 아이콘을 클릭하고 행을 편집합니다. 이 화면에서 '속성'으로 이동하여 행 ID를 추가하세요. 우리는 "활동"의 ID를 제공할 것입니다.

모든 행에 서로 다른 고유 ID를 부여하세요. 완료되면 페이지를 저장합니다.

메뉴 구성

아직 끝나지 않았습니다. 이제 메뉴 항목을 만들어야 하므로 사용자가 항목 중 하나를 클릭하면 페이지가 사이트의 특정 섹션으로 이동합니다. 계속해서 새 메뉴를 만들어 in 외모 -> 메뉴 WordPress 대시보드에서. 이 메뉴에서는 사용자 정의 링크만 생성하겠습니다. 아래 이미지에서는 방금 "활동" ID를 추가한 행에 대해 하나를 만들고 있습니다.

이제 사용자 정의 링크의 URL이 행 요소의 ID와 동일하다는 것을 알 수 있습니다. SiteOrigin 페이지 빌더는 이를 인식하도록 프로그래밍되어 있으며 지정된 섹션으로 스크롤해야 한다는 것을 알게 됩니다.

내 결과

축하해요! 우리는 이미 완료했습니다. 이제 단 두 개의 플러그인과 원하는 테마를 사용하여 자신만의 개인화된 단일 페이지 웹사이트를 쉽고 빠르게 구축할 수 있습니다. 이는 귀하의 사이트를 빠르고 사용자 친화적으로 유지해 줄 것입니다. 이 사이트를 구축하는 데는 한 시간도 채 걸리지 않았습니다. 이는 아름다운 한 페이지 웹사이트를 구축하기 위해 우리가 찾은 가장 쉽고 빠른 방법입니다. 가장 좋은 점은 무료라는 것입니다.

사실 XAMPP를 사용하여 자신만의 테스트 환경을 설정하는 것은 시간이 걸리고 처음 수행하는 경우 뇌 세포 몇 개를 태울 수 있지만 WordPress를 실행할 수 있는 로컬 서버의 진가를 빠르게 배울 수 있습니다. 그런 다음 두 개의 플러그인과 선택한 테마만 있으면 완전한 초보자라도 자신만의 한 페이지 웹사이트를 만들 수 있습니다.

이 자습서의 모든 단계를 수행했다면 문제가 없어야 하며 한 페이지짜리 문서가 제대로 실행되어야 합니다. 페이지를 성공적으로 생성한 후에는 페이지를 업그레이드하고 원하는 대로 사용자 정의할 수 있습니다. 다른 것을 확인하는 것을 잊지 마세요 WordPress 기사 및 튜토리얼 이는 가능한 어떤 방식으로든 귀하의 사이트를 형성하는 데 도움이 될 것입니다.