워드프레스 전체 사이트 편집 초보자 가이드

WordPress 완벽하게 편집하여 무한한 창의력을 발휘해 보세요 . 딱딱한 템플릿과 제한된 사용자 지정 옵션에 갇히던 시대는 이제 끝났습니다. 방문자를 환영하는 세련된 헤더 정교한 푸터, 강렬한 인상을 남기는 스타일리시한 사이드바까지

워드프레스 전체 사이트 편집 기능을 통해 기존 웹 디자인 허물어지고 사이트 편집에 있어 혁신적인 새로운 시대가 열립니다. 이 혁신적인 접근 방식은 다양한 디자인 블록을 제공하여 사용자가 원하는 대로 사이트 블록 테마 레이아웃을 손쉽게 구성할 수 있도록 합니다. 미리 정의된 구조에 얽매이지 않고 자유롭게 탐색하고 실험하며 자신을 표현할 수 있습니다.

워드프레스에서 전체 사이트 편집 기능을 자세히 살펴보겠습니다 

워드프레스의 전체 사이트 편집 기능을 사용하면 웹사이트의 모든 요소를 ​​손쉽게 맞춤 설정할 수 있습니다. 기존 방식에서는 게시물과 페이지만 편집할 수 있었지만, 이제는 사용자 지정 헤더와 푸터를 블록을 사용하여 복잡한 콘텐츠 영역을 구축할 수 있습니다.

Elementor 처럼 웹사이트 전체를 위한 인기 플러그인들은 이러한 패러다임의 변화를 수용하여 고급 기능과 직관적인 컨트롤로 가득한 블록 편집기 툴킷을 제공합니다. 숙련된 개발자든 블록 테마 와 템플릿을 처음 사용하는 사용자든, 전체 사이트 편집 기능을 통해 탁월한 정확성과 세련미로 아이디어를 현실로 구현할 수 있습니다.

참고 : 최고의 Elementor SaaS 워드프레스 테마

전체 사이트 편집의 주요 이점

간단히 말해, 전체 사이트 편집 기능을 사용하면 복잡한 도구나 전문 용어 없이도 창의력을 마음껏 발휘하고, 워크플로를 간소화하고, 웹사이트를 미래에도 문제없이 사용할 수 있도록 만들 수 있습니다.

가장 큰 장점은 다음과 같습니다

• 완벽한 디자인 제어 : 전체 사이트 편집 기능을 통해 모든 것을 직접 관리할 수 있습니다. 사이트 아이콘부터 추천 이미지 슬롯, 로고 영역, 게시물 타일 블록까지, 헤더부터 푸터까지 모든 요소를 ​​원하는 대로 손쉽게 디자인하세요.

• 통합 편집 환경 : 이제 더 이상 여러 페이지 템플릿, 템플릿 파일, 편집기를 오가며 작업할 필요가 없습니다. WordPress 전체 사이트 편집 기능을 통해 모든 것을 한 곳에서 관리할 수 있어 WordPress 대시보드에서 더욱 간편하게 사이트 디자인을 수정할 수 있습니다.

• 향상된 맞춤 설정 옵션 테마 프레임 에서 볼 수 있는 획일적인 디자인에 질리셨나요 ? 워드프레스 전체 사이트 편집 기능을 사용하면 워드프레스 플랫폼에서 풍부한 맞춤 설정 옵션을 활용하여 웹페이지의 모든 측면을 개인화하고 고유한 스타일을 반영할 수 있습니다.

• 간소화된 워크플로 : 더 이상 여러 도구와 플러그인을 번갈아 사용할 필요가 없습니다. 전체 사이트 편집 기능으로 디자인 프로세스가 간소화되어 시간과 노력을 절약하고, 가장 중요한 콘텐츠 제작에 집중할 수 있습니다.

• 플러그인 의존도 감소 : 플러그인 과부하에서 벗어나세요. 새로운 사이트 편집기에서 볼 수 있듯이, 이전에는 플러그인이 필요했던 많은 기능들이 이제 WordPress 블로그 게시물에 바로 내장되어 있으므로, 전체 사이트 편집 기능을 활용하세요. 이를 통해 페이지 레이아웃을 복잡하게 만드는 추가 소프트웨어의 필요성을 최소화할 수 있습니다.

• 사이트를 미래에도 문제없이 사용할 수 있도록 준비하세요 : 워드프레스의 완벽한 사이트 편집 기능을 활용하여 최신 기술 트렌드를 선도하십시오. 이 혁신적인 사이트 편집 기능을 도입하면 사이트가 미래에도 경쟁력을 유지하고 , 기술 발전과 함께 새로운 기능에 유연하게 대응하며 관련성을 유지할 수 있습니다.

전체 사이트 편집 기능은 블록 테마에서만 사용할 수 있나요?

워드프레스의 전체 사이트 편집 기능은 블록 테마에만 국한되지 않지만, 사이트 블록은 이러한 기능을 최대한 활용하도록 설계되었습니다.

다음은 테마에 통합된 모든 블록에서 WordPress 웹사이트가 작동하는 방식입니다

• 블록 테마는 게시물 콘텐츠 블록 외에도 헤더 템플릿, 푸터, 사이드바 및 기타 템플릿 구성 요소를 포함하는 컬럼 블록 기능을 제공합니다.

• 그들은 theme.json 파일을 전체 사이트 편집 테마로 사용하여 전역 스타일과 설정을 제어하고, 기존의 테마 사용자 정의 도구를 대체합니다.

• 필수 사항은 아니지만, 블록 설정은 전체 사이트 편집에 최적화되어 있어 사용자가 테마 템플릿 전체에 블록을 추가할 수 있습니다.

• 현재 160개 이상의 블록 설정이 제공되지만, 이는 워드프레스 커뮤니티에서 이미 널리 사용되고 있는 수천 개의 기존 테마에 비하면 상대적으로 적은 수입니다.

블록 자체에는 두 가지 유형이 있습니다

• 이미지 , 버튼 등 게시 시점에 알려진 콘텐츠가 포함됩니다

• 동적(테마) 블록은 템플릿 구축을 위해 설계되었으며, 게시물 피드, 제목, 추천 이미지 등과 같은 콘텐츠를 사이트 백엔드에서 동적으로 가져올 수 있습니다.

계속 읽어보세요 : 워드프레스에서 사용자 정의 게시물 유형을 쉽게 만드는 방법을 알아보세요

전체 사이트 편집 기능을 사용하기 전에 알아야 할 사항

사이트 편집기 인터페이스를 살펴보고 WordPress 사이트를 사용자 지정하기 전에 전체 사이트 편집의 요구 사항과 잠재적인 제한 사항을 이해하는 것이 중요합니다. 이 기능은 강력하지만 모든 WordPress 사용자가 즉시 모든 기능을 사용할 수 있는 것은 아닙니다.

블록 테마와만 호환됩니다

전체 사이트 편집 기능은 블록 테마에서만 사용할 수 있습니다 . 기존 테마를 사용하는 경우 템플릿 편집기가 제한되거나 접근할 수 없으며, 대시보드에서 새로운 사이트 편집기 인터페이스를 볼 수 없습니다. 테마 디렉토리에서 "전체 사이트 편집" 태그를 찾아 호환되는 블록 테마를 설치하세요.

블록 테마는 블록 기반 레이아웃 시스템을 통해 헤더 및 푸터 템플릿, 블록 스타일, 사용자 정의 페이지를 지원하도록 특별히 설계되었습니다. 이러한 테마는 theme.json 파일을 전역 스타일, 콘텐츠 너비 및 템플릿 구조를 정의하며, 기존의 사용자 정의 옵션을 대체합니다.

워드프레스 버전을 확인하세요

전체 사이트 편집 기능은 WordPress 5.8에서 도입되었으며 이후 버전에서 더욱 발전되었습니다. 템플릿 파트, 쿼리 루프 블록 및 스타일 변형을 최적으로 사용하려면 최신 WordPress 버전으로 업데이트하는 것이 좋습니다. 이전 버전에서는 블록 마크업이나 최신 테마에서 사용되는 특정 블록이 지원되지 않을 수 있습니다.

학습 곡선을 이해하세요

기존 편집기 워크플로우나 빌더 플러그인 사용 경험이 있다면 전체 사이트 편집 모드로 전환하는 것이 다소 생소하게 느껴질 수 있습니다. 세 점 메뉴, 블록 툴바, 새로운 레이아웃 도구는 풍부한 기능을 제공하지만, 익숙해지는 데 약간의 시간이 걸릴 수 있습니다. 새로운 편집기에서 웹사이트 전체 구조를 탐색하는 동안에는 인내심을 가지시기 바랍니다.

스테이징 환경을 사용하세요

블록 테마를 활성화하거나 빌더 플러그인 스테이징 환경에서 변경 사항을 테스트하는 것이 좋습니다. 이렇게 하면 전환 과정에서 현재 페이지 구조, HTML 파일 구성 및 사용자 지정 CSS가 손상되지 않도록 할 수 있습니다.

이러한 필수 사항을 이해하면 함정을 피하고 WordPress 전체 사이트 편집 경험을 최대한 활용할 수 있습니다.

워드프레스에서 사이트 전체를 편집하는 단계

워드프레스 웹사이트를 한 단계 더 업그레이드할 준비가 되셨나요? 다음의 간단한 단계를 따라 전체 사이트 편집의 모든 잠재력을 활용해 보세요. 사이트의 모든 요소를 ​​쉽고 정확하게 맞춤 설정할 수 있습니다.

1단계: 호환되는 테마 선택

WordPress에는 150개 이상의 사이트 편집 테마가 있습니다. WordPress에서 무료로 제공되는 테마를 사용하거나 유료 프리미엄 테마를 구매할 수 있습니다. WordPress에서 제공하는 무료 테마를 선택해 보겠습니다. 먼저 WordPress 관리자 화면에 로그인하고 [ 외관 → [테마] . 그런 다음 [새 테마 추가]를 .

다음으로, [기능 필터]를 . 주제, 기능 또는 레이아웃별로 정렬할 수 있습니다. 필터를 적용하려면 [사이트 편집기] 확인란을 선택하고 [필터 적용]을 .

다양한 옵션이 표시됩니다. 마음에 드는 테마를 선택하거나 이 가이드에서는 Twenty Twenty-Two 테마를 선택하세요. 테마를 선택한 후 활성화하면 바로 사용할 수 있습니다!

다음 글도 읽어보세요 : 최고의 워드프레스 블록 테마 살펴보기

2단계: 템플릿 사용자 지정

간단하게 Twenty Twenty Two 테마를 선택해 보겠습니다

• 테마를 활성화하세요 : 테마를 선택한 후 활성화하여 맞춤 설정을 시작하세요.

• 편집기에 액세스하려면 [외관] → [편집기] 로 이동하여 편집 도구에 액세스하세요.

• 템플릿 살펴보기 : 편집기에 들어가면 홈페이지 템플릿부터 시작하세요. 다른 템플릿을 살펴보려면 WordPress 로고를 클릭한 다음 템플릿을 클릭하세요.

• 새 템플릿 만들기 : '새로 추가 ' 버튼을 사용하여 사이트 요구 사항에 맞춘 고유한 템플릿을 만드세요.

• 템플릿 구성 요소 사용자 지정 : 헤더 및 푸터와 같은 템플릿 구성 요소를 수정하여 사이트의 모양을 다듬으세요.

• 블록 추가 : 블록을 추가하여 사이트 기능을 향상시키세요. 파란색 '+' 버튼을 블록을 추가하고 .

• 기존 블록 편집 : 기존 블록을 클릭하여 내용이나 설정을 수정함으로써 필요한 조정을 할 수 있습니다.

더 읽어보기 : 워드프레스 업데이트 및 게시 실패 오류 해결 팁: 완벽 가이드

3단계: 글로벌 스타일 가져오기

전체 사이트 편집 테마의 가장 두드러진 특징 중 하나는 전역 스타일을 설정할 수 있다는 점입니다. 이를 통해 사이트 전체의 글꼴, 색상, 간격을 손쉽게 사용자 지정할 수 있습니다. 통일된 디자인을 원하든 특정 블록에만 특정 스타일을 적용하고 싶든, 이 기능은 기존 테마에 비해 시간을 크게 절약해 줍니다. Twenty Twenty Two 테마에서 전역 스타일에 액세스하고 사용자 지정하는 방법은 다음과 같습니다

• 전역 스타일 액세스 : 사이트 편집기 오른쪽 상단에 있는 스타일 아이콘을 클릭하여 사이트의 전역 스타일에 액세스할 수 있습니다.

• 사용 가능한 스타일 찾아보기 '스타일 찾아보기' 클릭하여 Twenty Twenty Two 테마에서 사용 가능한 스타일을 살펴보세요 사이트에 어울리는 색상 구성을 선택할 수 있습니다

• 타이포그래피 설정: 타이포그래피 섹션에서 텍스트와 링크에 사용할 글꼴 옵션을 사용자 지정할 수 있습니다. 글꼴 종류, 크기, 줄 간격 및 굵기를 조정하여 원하는 모양을 만드세요.

• 색상 사용자 지정: 색상 섹션에서 전체 색상 팔레트에 사용되는 색상을 편집하세요. 다양한 옵션 중에서 배경, 텍스트 및 링크에 사용할 색상을 선택할 수 있습니다. Twenty Twenty Two 테마는 17가지 단색과 20가지 그라데이션을 제공하며, 브랜드 목적에 맞게 사용자 지정 색상과 그라데이션을 추가할 수도 있습니다.

• 여백 조정 : 마지막으로 레이아웃의 여백을 세밀하게 조정하세요. 상단, 왼쪽, 오른쪽, 하단 여백을 일괄적으로 또는 개별적으로 설정하여 사이트 콘텐츠가 적절한 간격을 유지하고 시각적으로 보기 좋게 배치되도록 하세요.

자세히 보기 : 워드프레스 변경 사항이 표시되지 않나요? 간단하게 해결하세요!

4단계: 테마 블록 사용하기

블록 편집기에서는 90개 이상의 블록을 사용하여 사이트 편집기에서 페이지 템플릿을 만들 수 있습니다. 이 중 일부는 동적 테마 블록으로, 사이트 프런트엔드에 동적인 콘텐츠를 표시합니다. 예를 들어, 단일 게시물 템플릿을 보면 게시물 제목, 게시물 대표 이미지, 게시물 내용과 같은 블록을 볼 수 있습니다. 이러한 블록은 블로그 게시물을 표시하는 동적 템플릿을 구축하는 데 유용합니다.

• 헤더, 푸터 등에 테마 블록 사용하기 : 총 27개의 테마 블록이 있습니다. 이 중 몇 가지를 활용하여 사이트에 새로운 헤더 템플릿을 만드는 방법을 살펴보겠습니다. 먼저, 템플릿 메뉴로 이동하여 '빈 템플릿'을 선택하세요.

• 레이어 보기 탐색 : 페이지에서 사용된 블록을 확인하려면 사이트 편집기 화면 왼쪽 상단에 있는 레이어 아이콘을 클릭하세요.

• 헤더 블록 추가하기 : 파란색 '+' 아이콘을 하고 테마 블록 옵션이 나올 때까지 아래로 스크롤합니다. 템플릿 파트 블록을 선택하고 빈 페이지로 드래그합니다. 이름을 지정하고 만들기를 클릭합니다. 그런 다음 상단에 20px 간격을 위한 스페이서 블록과 33/33/33 열 배열을 가진 열 블록을 추가합니다.

• 헤더 사용자 지정 : 사이트 로고, 탐색 메뉴 및 소셜 링크 블록을 각 열에 추가하세요. 필요에 따라 이미지를 업로드하거나, 메뉴 항목을 추가하거나, 소셜 미디어 아이콘을 추가할 수 있습니다.

• 레이아웃 조정 [열 설정] → [너비] 로 이동하여 각 열의 너비를 각각 20%, 60%, 20%로 조정하세요 . 이렇게 하면 헤더에 적절한 간격이 확보됩니다.

• 템플릿 저장하기 : 헤더 디자인이 마음에 들면 '게시'를 템플릿을 저장하세요.

계속 찾아보세요 : 최고의 Elementor SaaS 워드프레스 테마

5단계: 시작 디자인을 위한 블록 패턴

템플릿을 디자인할 때 블록 패턴은 블록을 추가하여 디자인을 더 쉽게 할 수 있는 간편한 방법입니다. WordPress는 표준 블록 패턴을 제공하며, 사용자 지정 블록 패턴도 만들 수 있습니다. 블록 패턴에 접근하고 사용하는 방법은 다음과 같습니다

• 접근 차단 패턴 : 파란색 + 아이콘을 다음 패턴 탭으로 이동합니다. 여기에서 바닥글, 머리글, 버튼, 갤러리 등 다양한 범주를 찾을 수 있습니다.

• 패턴 편집 : 각 패턴은 디자인에 맞게 사용자 지정할 수 있습니다. 개별 블록 내에서 색상, 글꼴 및 여백 스타일을 조정할 수 있습니다.

• 패턴 저장 : 사용자 지정한 패턴을 저장하려면 목록 보기에서 점 세 개 메뉴를 클릭한 다음 '재사용 가능한 블록에 추가'를 선택하세요. 나중에 사용할 수 있도록 템플릿 파트로 저장할 수도 있습니다.

블록 패턴을 사용하면 디자인 프로세스가 간소화되어 전문가 수준의 템플릿을 쉽게 만들 수 있습니다.

더 읽어보기 : 소셜 미디어 언급 모니터링을 위한 최고의 사이트 평판 관리 도구

전체 사이트 편집 기능을 사용할 때 유용한 팁과 흔히 발생하는 문제점

이제 시작하는 방법을 확실히 이해했으니, 모범 사례에 집중하고 워드프레스 사이트 편집기를 사용하여 사이트를 구축하는 동안 발생할 수 있는 몇 가지 일반적인 문제에 주의하는 것이 중요합니다.

중요한 변경을 하기 전에는 항상 백업하세요

테마 파일을 업데이트하거나, 새 템플릿을 추가하거나, 페이지 구조를 편집하기 전에 백업을 생성하세요

고급 제어를 위해 코드 편집기를 사용하십시오

블록 인터페이스는 강력하지만, 고급 사용자는 사이트 편집기 내의 코드 편집기를 활용하여 더욱 다양한 기능을 사용할 수 있습니다. 특히 개별 블록의 레이아웃을 사용자 지정하거나 HTML 주석을 삽입하는 데 유용합니다. 또한 시각적 편집기에서 제공하는 것보다 더 세밀하게 정렬, 간격 및 콘텐츠 너비를 조정할 수 있습니다.

쿼리 루프 블록을 마스터하세요

쿼리 루프 블록은 전체 사이트 편집에서 동적 콘텐츠를 구축하는 데 있어 핵심적인 요소입니다. 이 블록을 사용하면 페이지 템플릿뿐만 아니라 사이트 어디에든 게시물 그리드, 제품 목록 또는 카테고리별 피드를 표시할 수 있습니다. 루프 설정을 조정하고, 필터를 추가하고, 재사용 가능한 블록 구조를 사용하여 페이지 콘텐츠를 사용자 지정하는 방법을 알아보세요.

클래식 테마와 블록 테마를 혼합해서 사용하지 마세요

기존 테마를 FSE 도구와 함께 사용하면 호환성 문제가 발생할 수 있습니다. 푸터나 헤더 템플릿이 제대로 표시되지 않거나 사이트 편집기 인터페이스에 접근할 수 없게 될 수도 있습니다. 이러한 문제를 방지하려면 테마 개발자들은 블록 호환성이 완벽한 테마를 사용할 것을 권장합니다.

다양한 스타일 변형을 살펴보고 맞춤 설정하세요

웹사이트의 글꼴, 변경하는 다양한 스타일 변형 기능이 내장되어 있습니다 . 이러한 변형은 페이지 콘텐츠에 영향을 주지 않고 쉽게 전환할 수 있으므로 타사 페이지 빌더 없이도 디자인 유연성을 확보할 수 있습니다.

재사용 가능한 블록과 템플릿 부품을 사용하세요

CTA 섹션, 와 같은 요소의 디자인을 일관되게 유지할 수 있습니다 . 편집기의 점 3개 메뉴를 통해 블록이나 패턴을 직접 저장하고 여러 템플릿에 걸쳐 레이아웃을 더욱 효율적으로 구성하세요.

플러그인 충돌에 주의하세요

일부 구형 빌더 플러그인이나 기존 편집기 확장 프로그램은 FSE 기능과 충돌할 수 있습니다. 가능한 경우 블록 호환 빌더 플러그인 대안을 사용하고, 새 템플릿 편집기에 이미 내장된 기능을 중복하는 충돌 도구는 비활성화하십시오.

이러한 팁을 따르고 흔히 발생하는 문제점을 인지하면 WordPress 템플릿을 하고 전체 사이트 편집 기능을 사용하여 더 빠르고 효율적이며 미래 지향적인 웹사이트를 구축할 수 있습니다.

결론

WordPress 전체 사이트 편집 기능을 통해 창의력을 마음껏 발휘하고 웹사이트 디자인을 완벽하게 제어할 수 있습니다. 호환되는 블록 테마를 살펴보고, 블록 편집기를 마스터하고, 커뮤니티 리소스를 활용하고, 모범 사례를 적용하고, 지속적인 학습을 통해 역량을 강화하세요.

다음의 실질적인 단계를 따르면 이 혁신적인 WordPress 기능을 통해 무궁무진한 가능성을 열고, 워크플로를 간소화하며, 미래에도 경쟁력을 유지할 수 있습니다.

워드프레스 전체 사이트 편집 관련 FAQ