WordPress 전체 사이트 편집을 위한 완전한 초보자 가이드

WordPress는 지속적으로 전 세계적으로 가장 사랑받는 CMS로 선정되었습니다. 이는 다양한 사용자 기반의 요구를 충족하기 위해 지속적으로 발전하고 있기 때문에 가능합니다.

이 여정의 최신 발전은 2021년경 5.8 버전 업데이트 와 함께 출시된 FSE(전체 사이트 편집) 의 도입입니다.

WordPress FSE(전체 사이트 편집)는 Gutenberg 프로젝트의 블록 기능을 기반으로 구축되었습니다. 보다 통합되고 사용자 친화적인 사이트 구축 경험을 제공합니다. 사용자는 블록을 사용하여 웹사이트의 모든 측면을 생성, 사용자 정의 및 관리할 수 있습니다.

이 가이드에서는 전체 사이트 편집(FSE) , 그 이점, 액세스 방법, 헤더, 메뉴, 스타일, 페이지, 템플릿 및 패턴을 사용자 정의하기 위한 단계별 지침을 살펴보겠습니다.

이 가이드를 마치면 FSE를 사용하여 최적화되고 시각적으로 매력적인 웹 사이트를 디자인, 편집 및 유지 관리하는 방법을 확실하게 이해하게 될 것입니다.

WordPress 전체 사이트 편집이란 무엇입니까?

WordPress FSE(전체 사이트 편집)는 사용자가 웹사이트를 디자인하고 관리하는 방법을 혁신하는 획기적인 기능입니다.

테마가 사이트의 여러 부분의 구조와 모양을 결정하는 기존 WordPress 설정과 달리 FSE를 사용하면 사용자는 블록 기반 인터페이스를 통해 전체 웹 사이트를 사용자 정의할 수 있습니다.

이것이 왜 그렇게 중요합니까?

FSE를 사용하면 사이트 소유자가 코딩 지식이 없어도 웹 사이트의 프런트 엔드를 직접 편집할 수 있습니다. 이는 또한 프런트엔드 개발자에 대한 의존도를 크게 줄여줍니다. 전반적으로 이는 기술 접근성과 관련하여 올바른 방향으로 나아가는 단계입니다.

사이트를 구축하는 데 더 이상 여러 도구와 인터페이스가 필요하지 않습니다. 대신, 단일 통합 인터페이스 에서 머리글부터 바닥글까지 모든 페이지를 처리할 수 있습니다.

숙련된 WordPress 사용자 이든 완전한 초보자이든 FSE의 결과는 엄청납니다.

전체 사이트 편집의 주요 구성 요소

• 사이트 편집기: 사용자가 전체 사이트를 편집할 수 있는 중앙 허브입니다. 사이트 편집기는 템플릿, 템플릿 부분 및 사이트 전체 스타일을 관리하기 위한 시각적 인터페이스를 제공합니다.

• 템플릿: 블록을 사용하여 사용자 정의할 수 있는 다양한 유형의 콘텐츠(예: 단일 게시물, 페이지, 아카이브)에 대한 사전 정의된 레이아웃입니다.

• 템플릿 부분: 머리글 및 바닥글과 같은 재사용 가능한 템플릿 섹션은 한 번 편집하여 여러 템플릿에 적용할 수 있습니다.

• 전역 스타일: 사용자가 활자체, 색상 및 간격을 포함하여 사이트의 전반적인 모양과 느낌을 정의할 수 있는 설정입니다. 이러한 설정은 모든 템플릿과 페이지에 보편적으로 적용됩니다.

• 블록: FSE의 핵심 빌딩 블록 사용자는 매우 유연한 방식으로 텍스트, 이미지, 버튼 등과 같은 콘텐츠 요소를 추가하고 정렬할 수 있습니다.

기존 편집과 전체 사이트 편집의 차이점

전통적인 WordPress 편집은 테마와 테마별 사용자 정의 옵션에 크게 의존했습니다. 원하는 모양과 기능을 얻으려면 사용자가 여러 인터페이스를 사용하고 때로는 코드를 사용해야 하는 경우가 많습니다.

클래식 WordPress 편집기는 플로피 디스크 시대의 유물처럼 느껴집니다.

모두 텍스트 기반 편집입니다. 제한된 사용자 정의로 인해 투박한 테마와 플러그인에 의존하게 됩니다.

전체 사이트 편집(FSE)을 시작하세요!

반면에 전체 사이트 편집은 웹 개발 프로세스를 크게 변화시킵니다. 모든 웹 디자인 작업을 단일 플랫폼에 통합하므로 탭 간을 전환할 필요가 없습니다. 이제 사전 전문 지식이나 코딩 지식에 관계없이 누구나 웹사이트를 만들고 관리할 수 있습니다.

아시다시피 FSE는 블록 기반 접근 방식을 기반으로 구축되었습니다. 비교할 수 없는 유연성, 일관성 및 사용 편의성을 제공하여 사용자가 기술 장벽을 최소화하면서 창의적인 비전을 실현할 수 있도록 지원합니다.

WordPress에서 전체 사이트 편집에 액세스하는 방법

FSE의 모든 기능을 활용하고 사용하는 과정은 매우 간단합니다.

먼저 WordPress 대시보드로 이동하여 왼쪽에서 Appearances ===> Editor를 찾습니다.

' 편집기 '를 클릭하세요.

" 편집기 "를 클릭하면 편집기 인터페이스와 디자인 매개변수(예: 탐색, 스타일, 페이지 등)가 왼쪽에 있는 새 창으로 이동됩니다. 다음과 같아야 합니다.

보다! 단순한! 이제 모든 개별 블록 편집기 기능을 생각해 볼 수 있습니다.

사용자 정의 WordPress 머리글 및 바닥글 만들기

머리글

헤더를 생성하려면 편집하려는 페이지로 이동하여 왼쪽 상단의 목록 보기를 클릭하세요. 목록 보기를 클릭하면 대시보드에 드롭다운 메뉴가 표시됩니다. 이 드롭다운에는 다음과 같은 머리글 그룹과 바닥글이 있습니다.

이제 페이지의 헤더를 클릭하면 구텐베르크의 블록 기반 기능을 사용할 수 있으며 헤더에 도입하려는 요소를 끌어다 놓을 수 있습니다.

아래 예에서는 헤더에 탐색 메뉴와 가입 버튼을 추가한 것을 볼 수 있습니다.

전체 페이지를 편집하지 않고 헤더만 따로 편집할 수 있습니다. 그렇게 하려면 왼쪽 “디자인” 패널로 이동하여 “템플릿”을 선택하세요.

먼저 편집하려는 페이지를 선택하세요. 그런 다음 '블로그 홈'을 클릭하고 아래로 스크롤하여 '헤더'를 찾습니다.

다른 템플릿 부분을 별도로 편집하거나 사용자 정의 템플릿을 추가할 수도 있습니다.

템플릿을 부분별로 편집하면 헤더 너비를 조정할 수도 있습니다. 슬라이더를 수동으로 조정하거나 특정 치수를 직접 입력할 수 있습니다.

보행인

프로세스는 이전 프로세스와 완전히 유사합니다. 여러분이 해야 할 일은 페이지를 바닥글까지 아래로 스크롤하고 사용 가능한 블록을 사용하여 생성을 시작하는 것뿐입니다. 또는 머리글과 마찬가지로 바닥글도 별도로 편집할 수 있습니다. 페이지의 영역 섹션에서 “바닥글”을 클릭하기만 하면 됩니다.

아래 예에서는 열, 스택 블록 및 단락 블록을 사용하여 매우 표준적인 웹 사이트 바닥글을 만든 것을 볼 수 있습니다.

미리 로드된 템플릿을 사용하여 머리글과 바닥글을 만들 수도 있습니다. 개발 프로세스 속도가 빨라질 것입니다.

탐색 메뉴 편집

탐색 메뉴는 웹사이트 디자인의 필수적인 부분입니다. 이는 사용자가 원하는 정보를 빠르고 효율적으로 찾는 데 도움이 됩니다. 잘 디자인된 탐색 메뉴는 사용자 경험을 크게 향상시키고 방문자가 웹사이트를 더 쉽게 탐색할 수 있도록 해줍니다.

다음의 간단한 단계에 따라 메뉴를 맞춤 설정하고 방문자가 원하는 것을 쉽게 찾을 수 있도록 하세요.

우리는 이미 사이트 편집기에 액세스하는 방법을 살펴보았습니다. 로그인 후 내비게이션 메뉴를 추가하려는 페이지로 이동합니다.

거기에 도착한 후 헤더에 탐색 표시줄을 추가하려면 편집기 블록 오른쪽에 있는 "+" 기호를 클릭하고 검색 표시줄에 "navigation"을 입력하세요. 탐색 요소가 팝업되어야 합니다.

이 같은:

완전히 새로운 섹션과 탐색 모음을 추가할 수도 있습니다. FSE를 사용하면 완전한 자유를 누릴 수 있습니다.

머리글, 바닥글 등 페이지와 별도로 탐색 메뉴를 편집할 수 있다는 점을 기억하세요. 디자인 메뉴에서 '탐색'을 선택하고 편집을 누르세요.

이제 탐색 메뉴를 추가했으므로 탐색 모음에 원하는 만큼 많은 페이지를 추가할 수 있습니다. 다른 페이지를 추가하려면 "+" 버튼을 누르세요.

다음으로, 편집기에서 바로 각 페이지에 대한 링크를 추가할 수 있습니다. 이와 같이:

각 페이지에 하위 메뉴를 추가할 수도 있습니다.

탐색 메뉴를 만든 후 다양한 설정과 스타일을 실험해 볼 수 있습니다. 편집기 오른쪽 상단, 저장 버튼 바로 옆에 있는 설정 탭을 클릭하고 원하는 대로 사용자 정의하고 변경하세요.

웹사이트의 글로벌 스타일 변경

편집기로 다시 이동하여 편집 페이지 오른쪽 상단에서 스타일 버튼을 찾으세요. 다음과 같이 반 흑백 원처럼 보일 것입니다.

클릭하면 타이포그래피, 색상 레이아웃 등이 포함된 스타일 메뉴가 오른쪽에 나타납니다 . "스타일 찾아보기" 버튼을 클릭하면 다양한 스타일을 찾아볼 수 있습니다.

선택할 수 있는 우수하고 독특한 스타일이 많이 있습니다.

타이포그래피 변경

다음으로, “타이포그래피” 버튼을 클릭하면 글꼴의 타이포그래피를 변경할 수 있습니다. 그러면 페이지의 다양한 위치에서 사용되는 다양한 글꼴이 포함된 메뉴로 이동됩니다. 텍스트, 링크, 제목, 캡션, 버튼과 같은 특정 요소의 글꼴을 변경할 수도 있습니다.

특정 글꼴을 변경하려면 "FONTS" 헤더 아래에 나열된 글꼴을 클릭하면 다음과 같은 옵션이 제공됩니다.

• 기본 글꼴 사용
• 글꼴 업로드
• 또는 다운로드한 Google 글꼴을 선택하세요.

링크나 제목 등 특정 요소의 글꼴을 변경하려면 해당 요소를 클릭하기만 하면 됩니다. 모양, 문자 간격, 줄 높이, 제목 크기(H1, H2 등)와 같은 설정을 사용자 정의할 수 있습니다.

색상 변경

다음으로 웹사이트에 사용된 색상을 편집할 수도 있습니다. "색상" 버튼을 클릭하기만 하면 됩니다. 텍스트, 링크 등과 같은 특정 요소의 색상을 변경할 수도 있습니다.

“팔레트” 옵션 내에는 단색 테마 색상부터 그라데이션까지 사용자 정의할 수 있는 다양한 옵션이 있습니다.

원하는 경우 그라디언트의 유형과 각도를 조정할 수도 있습니다!

원하는 만큼 사용자 정의 색상을 추가하고 모든 요소에 대해 사용자 정의 색상을 설정할 수 있습니다.

레이아웃 변경

사용자 정의할 수 있는 세 번째 옵션은 레이아웃 옵션입니다.

이 섹션에서는 콘텐츠 너비, 패딩 및 블록 간격 설정을 찾을 수 있습니다. 다음은 모든 설정이 수행하는 작업에 대한 간략한 설명입니다.

• "CONTENT"로 표시된 콘텐츠 너비는 페이지의 콘텐츠 너비 조정을 다룹니다.
• 컨테이너 너비 또는 "WIDE"로 표시된 상자는 페이지의 전체 너비를 조정합니다.
• 패딩은 단순히 웹 사이트 페이지의 모든 측면에 있는 패딩을 처리합니다.
• 블록 간격은 페이지의 각 요소 블록 사이의 분리를 처리합니다.

그리고 힘든 작업이 수포로 돌아가기를 원하지 않는 한 모든 사용자 정의 후에는 변경 사항을 저장하는 것을 잊지 마십시오.

WordPress 페이지 사용자 정의

우리는 이미 많은 것을 다루었지만 앞으로 더 많은 내용이 나올 것입니다!

다음 의제는 WordPress 페이지를 사용자 정의하는 것입니다. 그렇게 하려면 오른쪽의 디자인 패널로 이동하여 페이지를 클릭하세요.

여기에서 웹사이트의 모든 페이지 목록을 확인할 수 있습니다.

웹사이트의 모든 페이지를 보려면 '페이지' 섹션 하단에 있는 '모든 페이지 관리'를 누르세요. 모든 페이지가 포함된 새 창이 열립니다.

그런 다음 오른쪽 상단 버튼을 클릭하여 새 페이지를 추가할 수 있습니다.

"페이지" 섹션 헤더 옆에 있는 "+" 버튼을 클릭하여 페이지를 추가할 수 있습니다. 새로운 메시지가 페이지 제목을 묻는 메시지가 나타납니다. 페이지 이름을 지정하고 '초안 만들기'를 누르세요. 새 페이지가 생성됩니다.

이제 새 페이지 편집을 시작할 수 있습니다.

WordPress 템플릿 편집

WordPress 전체 사이트 편집기의 “디자인” 패널에 있는 “템플릿” 페이지로 이동하세요.

템플릿은 특정 유형의 페이지를 만드는 데 사용할 수 있는 미리 형식화된 페이지입니다. 예를 들어 "404" 페이지를 살펴보겠습니다.

이 페이지는 이미 404 페이지의 모든 기본 요구 사항을 충족하도록 설계되었습니다. 이는 동일한 레이아웃의 페이지가 많은 경우 디자인을 재사용할 수 있는 매우 멋진 기능입니다.

이 시스템의 또 다른 멋진 기능은 각 페이지를 개별적으로 편집할 필요가 없다는 것입니다. 여러 페이지에 동일한 템플릿을 사용한다고 가정해 보겠습니다. 이 경우 이러한 변경 사항은 모든 페이지에 효과적으로 적용됩니다. 멋지죠?!

템플릿을 편집하려면 연필 아이콘이 있는 편집 버튼을 누르기만 하면 됩니다.

이제 템플릿 편집을 시작할 수 있습니다.

사용자 정의 템플릿을 만들려면 "템플릿" 헤더 옆에 있는 "+" 기호를 누르세요. 그런 다음 미리 로드된 여러 템플릿 중에서 선택할 수 있습니다.

또는 아래로 스크롤하여 맞춤 템플릿을 만드세요.

모든 템플릿을 관리하려면 "템플릿" 섹션 하단에 있는 "템플릿 관리" 버튼을 누르고 모든 템플릿 이름, 설명 및 작성자를 확인하세요. 원하는 경우 템플릿을 삭제할 수도 있습니다.

FSE 모드로 전환하지 않고도 페이지 템플릿을 직접 편집할 수도 있습니다.

WordPress 패턴 수정

이제 FSE 편집기의 마지막 편집 옵션인 패턴이 남았습니다!

아시다시피 패턴은 웹사이트 전체의 다양한 페이지나 게시물에 사용할 수 있는 미리 만들어진 블록입니다.

새 패턴을 생성하면 패턴 디렉터리에 자동으로 추가됩니다. 원하는 게시물이나 페이지에 자유롭게 추가할 수 있습니다.

패턴은 웹사이트 일관성을 유지하는 데 매우 유용한 디자인 도구입니다.

예를 들어 CTA 패턴을 한 번만 만든 다음 웹사이트의 모든 페이지와 게시물에 사용할 수 있습니다.

템플릿과 마찬가지로 패턴에도 '동기화 '라는 기능이 있습니다. 즉, 하나의 패턴 인스턴스를 변경하면 변경 사항이 모든 케이스에 적용됩니다.

편집기의 "패턴" 섹션으로 이동하면 잠겨 있어 편집할 수 없는 사전 로드된 패턴이 많이 있습니다.

여기에서 템플릿 부분 섹션을 볼 수 있습니다. 여기에는 귀하의 웹사이트 구조를 위해 예약된 특별한 패턴이 포함되어 있습니다. 이는 사용자 정의할 수 있습니다.

패턴을 추가하려면 "+" 버튼을 클릭하세요. 패턴이나 템플릿을 생성하거나 JSON 파일에서 패턴을 가져오는 옵션이 표시됩니다.

패턴과 템플릿 부분의 차이점은 템플릿 부분이 기본적으로 동기화된다는 것입니다. 변경할 수 없습니다. 머리글이나 바닥글 등의 구조적인 부분에 템플릿 부분이 사용되기 때문입니다.

그러나 패턴은 사용 방법에 따라 동기화되거나 동기화되지 않을 수 있습니다.

패턴을 생성하고 카테고리를 설정한 후 동기화 여부를 결정하세요.

“만들기”를 클릭하면 새로운 편집 인터페이스로 이동됩니다. 여기에서 FSE 편집기를 사용하여 해당 요소를 편집할 수 있습니다.

WordPress 전체 사이트 편집에 대한 FAQ

WordPress 전체 사이트 편집에 대한 마무리 참고 사항

WordPress의 FSE(전체 사이트 편집) 기능은 웹 개발 프로세스를 보다 블록 기반 접근 방식으로 전환하는 것을 목표로 합니다. 따라서 사용자는 더욱 직관적이고 유연한 콘텐츠 편집 경험을 누릴 수 있습니다.

FSE를 사용하면 시각적인 드래그 앤 드롭 인터페이스를 사용하여 WordPress 관리자에서 직접 웹 사이트를 디자인하고 사용자 정의할 수 있습니다. 따라서 별도의 설계 도구를 사용하여 코딩하거나 작업할 필요가 없습니다.

이것이 WordPress 사이트 개발의 미래입니다. 이 새로운 기능에 대해 자세히 알아보고 이를 활용하여 생산성을 높여야 합니다.

WordPress 전체 사이트 편집에 대해 더 궁금한 점이 있으신가요? 아래의 댓글 섹션을 사용하세요.