Twenty Twenty-two 테마로 WordPress 전체 사이트 편집

소개

WordPress 전체 사이트 편집 이 놀라운 일이 된 것은 놀라운 일이 아닙니다. 버전 5.9와 함께 WordPress의 새로운 시대가 시작되었으며 전체 사이트 편집 기능에 생명을 불어넣는 기능에 중점을 둡니다.

그리고 그것은 모두 22개의 WordPress 테마로 시작되었습니다.

222개의 WordPress 테마는 템플릿 부분을 사용하여 새 페이지 템플릿으로 거의 모든 것을 만들 수 있다는 점에서 다재다능합니다. 또한 새 템플릿 부분을 만들고 다른 페이지 템플릿에서 사용할 수 있습니다.

무거운 코딩에 의존하는 무거운 페이지 빌더 없이 사용자가 완전한 경험을 만들 수 있도록 하는 것입니다(구텐베르그 플러그인은 다른 이야기입니다). 2022 WordPress 테마만으로도 본격적인 경험을 만들 수 있습니다.

22개의 테마와 관련하여 전체 사이트 편집의 측면을 살펴보겠습니다.

프롤로그: WordPress 버전 5.9 소개

WordPress의 새 버전( 버전 5.9-Joesphine )에서 가장 먼저 눈에 띄는 것 중 하나는 커스터마이저가 사라지고 블록 기반 편집이 우세하다는 것입니다.

새로운 편집 방법

WordPress를 새로 설치하면 이제 22개의 WordPress 테마를 사용할 수 있습니다. WordPress 대시보드에서 모양 으로 이동하면 편집기라는 옵션이 하나만 있음을 알 수 있습니다. 편집기에서 페이지 템플릿을 편집할 수 있습니다.

불행히도 Gutenberg 블록 기반 편집 이 우세하기 때문에 전체 사용자 정의 프로세스에 변경 사항이 있습니다. 또한 복잡한 테마 페이지가 필요하지 않습니다.

전반적으로 전체 사이트 WordPress 편집에 대한 큰 추진력이 있습니다. Gutenberg 블록 은 이제 버전 5.9에서 WordPress 사이트를 디자인하는 핵심 방법입니다. 솔직히 말해서 블록을 사용하여 멋진 웹사이트를 쉽게 만들 수 있으므로 복잡한 페이지 사용자 지정이 더 이상 필요하지 않습니다.

참고: 최신 버전의 WordPress가 좋습니다. 불행히도 WordPress 웹 사이트를 독자에게 빠르고 효율적으로 제공하는 데에는 여전히 몇 가지 단점이 있습니다. PostX가 도움이 될 수 있다는 사실을 알고 계셨습니까? PostX를 사용하면 Gutenberg와 새로운 22개의 새로운 테마를 완벽하게 지원하는 스타터 팩과 레이아웃으로 콘텐츠를 원활하게 선보일 수 있습니다. PostX Gutenberg Blocks Plugin의 기능을 살펴보십시오.

'Global Styles' 에 대한 소개는 WordPress의 비전을 향한 또 다른 큰 단계입니다. 현재 전역 설정에는 세 가지 요소만 있지만(이 설정을 블록별로 사용자 지정할 수 있음) 앞으로 더 많은 옵션이 표시될 가능성이 있습니다.

전역 스타일에 대해 더 알고 싶다면 그에 대한 적절한 리소스도 있습니다. 전역 스타일 및 패턴에 대해 자세히 알아보려면 다음을 탐색하십시오.

새로운 WordPress 블록 테마의 글로벌 스타일 및 패턴 읽기

전역 설정의 세 가지 요소는 a) 타이포그래피 , b) 색상 , c) 레이아웃 입니다. 이 모든 것을 전역적으로 변경하거나 각 블록에 개별적으로 설정할 수 있습니다.

또한 블록, 레이아웃, 패턴, 모든 것이 다른 맛으로 다가옵니다. 전체적으로 커스터마이징 부서에서 눈에 띄는 발전이 있습니다. 이러한 변경 사항을 하나씩 살펴보겠습니다.

블록 패턴

WordPress 버전 5.9 에서는 블록 패턴이 더 세련되게 느껴집니다. 편집기 페이지로 이동하여 패턴 을 클릭하면 쉽게 배포할 수 있는 다양한 옵션 라이브러리를 찾을 수 있습니다.

패턴은 블록 기반이므로 완전히 사용자 정의할 수 있습니다. wordpress.org에서도 다양한 패턴을 찾을 수 있습니다. 패턴을 복사하여 WordPress 사이트 에 붙여넣기만 하면 됩니다. 웹사이트에 자동으로 나타납니다.

차단 패턴은 WordPress로 전체 웹사이트를 편집하는 방법 중 하나일 뿐입니다. 템플릿 및 템플릿 부분은 최신 WordPress 업데이트를 매우 유망하게 만드는 요소입니다.

이십이 워드프레스 테마에서 사용자 정의 페이지 템플릿을 만들려면 다음 비디오를 확인하십시오. 템플릿 부분과 페이지 템플릿을 만들어 사용자 지정 페이지를 만들기만 하면 됩니다.

페이지 템플릿 및 템플릿 부분 사용에 대한 자세한 내용은 다음 블로그 리소스를 참조하세요.

사용자 지정 페이지 템플릿 만들기에 대해 읽어보기

템플릿 및 템플릿 부분

페이지 템플릿

WordPress 5.9 이전에는 일반 블록을 사용하여 페이지 레이아웃을 만들 수 있었습니다. Gutenberg 블록 (당시에는 그다지 인기가 없었음)을 사용하거나 페이지 빌더를 사용하여 특정 페이지를 생성할 수 있습니다.

이제 템플릿을 사용하여 여러 페이지에 대해 동일한 레이아웃을 만들거나 그 반대로 만들 수 있습니다. 버전 5.9에서 새 페이지를 생성하려면 해당 특정 페이지에 대한 템플릿을 생성해야 합니다. 새 페이지가 디자인을 상속받도록 하려면 해당 페이지에 대한 특정 템플릿을 선택하고 게시할 수 있습니다.

이 새 페이지는 이제 동일한 레이아웃을 갖게 됩니다.

22개의 테마 편집기 에서 새 템플릿을 만들거나 페이지 자체에서 만들 수 있습니다. 페이지에서 올바른 템플릿을 찾는지 확인하기만 하면 됩니다.

템플릿 부분

템플릿 부분은 페이지 템플릿을 전체로 만드는 것입니다.

일반적으로 22개의 WordP 테마에 사용할 준비가 된 기성 페이지 템플릿이 있습니다. 그래도 새 페이지 템플릿을 만들어야 하는 경우 다양한 템플릿 부분을 추가하여 완전히 새로운 페이지 템플릿을 만들 수 있습니다.

기본적으로 2022 테마와 함께 제공되는 기성품 템플릿 부분에 국한되지 않습니다. WordPress 버전 5.9에서는 자신만의 템플릿 부분을 만들 수 있습니다(프로세스는 새 페이지 템플릿을 만드는 것과 거의 비슷합니다).

새로운 22가지 테마로 맞춤형 홈 페이지를 만들고 싶다면 시간을 내어 다음 동영상을 시청하는 것이 좋습니다.

새 템플릿 부분에 이름을 지정하여 저장하기 만 하면 됩니다. 다양한 블록을 추가하여 나만의 템플릿 파트를 만들 수 있습니다. 템플릿 부분을 저장하면 템플릿 부분을 사용하고 재사용할 수 있습니다.

템플릿 부분의 유용한 점은 템플릿 부분을 매우 효율적인 방법으로 생성한 다음 페이지 템플릿에서 원하는 만큼 여러 번 사용할 수 있다는 사실입니다. 그리고 이것은 WordPress에서 전체 사이트 편집 으로 가는 길을 열어줍니다.

템플릿 부분은 자신의 개인 블로그를 더 빠르게 만들 때 시간을 절약할 수 있는 좋은 방법입니다. WordPress 사이트 구축을 시작할 때 살펴봐야 합니다.

Twenty Twenty-two 테마 블록

22 테마 에는 많은 블록이 있습니다. 우리는 버전 5.9(우리의 관점에서)에서 매우 중요한 것들에 대해서만 이야기할 것입니다. 전체 사이트 편집 경험을 제공하는 데 매우 중요한 4가지 블록 이 있습니다.

사이트 로고 블록

최신 WordPress 블록 테마에 사이트 파비콘을 추가하는 방법에 대해 자세히 알아보려면 관련 비디오를 확인하세요.

사이트 로고 블록은 귀하의 신원을 보여주는 핵심 블록 중 하나입니다. 여기서 기억해야 할 핵심 사항 중 하나는 사이트 파비콘을 추가하거나 변경하는 것이 더 이상 동일하지 않다는 사실입니다. 사이트 로고 설정에서 사이트 아이콘 설정에 액세스해야 합니다.

탐색 블록

'탐색'은 탐색 메뉴를 만드는 데 매우 유용한 222 WordPress 테마의 또 다른 핵심 블록입니다. 예, 스물두 워드프레스 테마에서 메뉴를 추가하는 방법이 변경되었습니다.

탐색 메뉴는 WordPress 웹 사이트의 중요한 부분입니다. 최신 버전 5.9의 메뉴 생성 프로세스에 대해 배우고 이해할 수 있는 적절한 리소스가 있습니다.

WordPress 사이드바에 대한 참고 사항

스물둘 워드프레스 테마에서 사이드바를 생성하려면 템플릿 부분으로 사이드바를 생성해야 합니다(가장 효율적인 방법). 더 이상 위젯이 없으므로 사이드바를 생성하려면 별도의 요소를 추가해야 합니다.

다음은 WordPress 웹 사이트에서 사이드바를 만드는 주제에 대한 또 다른 빠른 리소스입니다. 여기에서 템플릿 부분을 만드는 것이 더 쉬운 이유를 이해하게 됩니다.

우수한 이미지 갤러리 블록

이미지 갤러리 블록이 그 어느 때보다 향상되었습니다. 고도로 작동하는 끌어서 놓기 기능을 도입하는 것 외에도 이미지 블록이 더욱 향상되고 기능적인 이미지 갤러리를 만드는 더 나은 방법을 제공합니다.

차단 기능

전체적으로 블록 라이브러리는 22 테마 에서 훨씬 더 기능적이라고 느낍니다. 그 어느 때보다 많은 제어 기능이 있습니다. 또한 페이지 템플릿에서 블록을 사용하거나 새 템플릿 부분을 만들 때 블록이 훨씬 부드러워집니다.

WordPress 전체 사이트 편집을 위한 정밀한 목록 보기

새로운 WordPress 테마의 목록 보기는 더 다양합니다. 요소를 쉽게 끌어다 놓아 원하는 대로 재배치할 수 있습니다. 요소 제어는 매우 간단합니다. 요소를 클릭하고 위치를 변경하기 위해 위나 아래로 드래그하기만 하면 됩니다. 그게 전부입니다.

보너스 섹션: Twenty Twenty-two WordPress 테마의 하위 테마

최신 WordPress 블록 테마 에 대한 하위 테마를 만드는 것도 약간 혼란스럽습니다. 사실 2022년에 많은 사람들이 처음부터 어린이 테마를 만드는 것을 낙담할 수 있습니다. 따라서 '하위 테마를 만드는 방법' 프로세스에 들어가기 전에 '왜'가 필요한지 논의해 보겠습니다.

왜 어린이 테마가 필요한가요?

자식 테마는 원래 테마(부모 테마)의 기능을 상속합니다. 상위 테마의 스타일 및 기타 기능을 사용합니다. 빠른 사용자 지정을 위해서는 상위 테마를 변경할 필요가 없기 때문에 필수입니다.

상위 테마를 변경할 필요 없이 하위 테마를 사용자 정의할 수 있습니다. 그리고 개발자가 부모 테마에서 아무 것도 변경할 필요 없이 자식 테마를 변경할 수 있기 때문에 자식 테마의 장점입니다.

하위 테마 의 또 다른 좋은 점은 WordPress를 최신 버전으로 쉽게 업데이트할 수 있고 디자인 설정이 동일하게 유지된다는 사실입니다.

최신 버전의 WordPress로 업데이트하더라도 자식 테마는 디자인을 유지합니다.

자식 테마는 개발자가 자신의 기능을 쉽게 추가할 수 있다는 사실 때문에 디자인 및 개발 담당자에게 매우 적합합니다. 또한 개발자의 전체 개발 시간 도 단축됩니다.

Twenty Twenty-two 테마의 하위 테마를 수동으로 만드는 방법은 무엇입니까?

비록 자식 테마를 만들고 유지하는 아이디어가 요즘 인기가 없지만, 우리는 222 WordPress 테마의 자식 테마를 만드는 방법을 아는 것은 가치가 있다고 생각합니다. 수행할 수 있는 단계는 다음과 같습니다.

1단계: localhost에 폴더 설치 및 설정

우리는 WordPress를 실행하기 위해 로컬 호스트로 Ampps를 사용할 것입니다. 우선, Ampps를 설치하고 로컬 컴퓨터에 로컬 환경을 설정해야 합니다.

최신 버전의 WordPress를 설치하고 로컬 호스트에 설치했으면 22개의 테마에 대한 하위 테마를 만들 준비가 된 것입니다.

이제 Ampps>www> "내 로컬 사이트">wp-content> 테마로 이동합니다.

하위 테마 이름을 가진 폴더를 생성해야 합니다(더 나은 사용성을 위해 " twotwentytwochild " 또는 유사한 이름을 사용할 수 있음). 폴더 안에 style.css 및 functions.php 파일을 생성해야 합니다.

2단계: style.css 및 functions.php 파일 생성

이제 폴더 내에서 코드 편집기를 엽니다. 편집기에 다음 코드 비트를 붙여넣습니다.

 Theme Name: Twenty Twenty-two Child-1 Theme URI: https://www.wpxpo.com/ Description: A Twenty Twenty-two child theme Author: WPXPO Author URI: https://www.wpxpo.com Template: twentytwentytwo Version: 1.0.0 Text Domain: twentytwentytwochild

마지막으로 파일을 "style.css"로 저장합니다. 코드 편집기를 사용하여 파일을 "style.css" 파일로 저장할 수도 있습니다. WordPress 하위 테마의 기본 CSS 스타일 파일입니다.

이제 다음 단계에서 동일한 폴더에서 다른 파일을 열어야 합니다. 다음 코드 비트를 붙여넣습니다.

 <?php /* enqueue scripts and style from parent theme */ function twentytwenttwo_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'twenty-twenty-two-style' ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles'); // get_template_part('/Parts/navbar.html', 'navbar'); ?>

완료되면 파일을 "functions.php"로 저장합니다. 다시 말하지만 코드 편집기 대신 메모장을 사용할 수 있습니다.

이제 WordPress 웹사이트의 테마 섹션에서 하위 테마를 볼 수 있습니다.

3단계: 사용자 지정 코드 추가

새 하위 테마에 사용자 정의 코드를 추가하기 전에 wp-content>themes>child theme folder 아래에 2개의 개별 폴더를 만들어야 합니다. 하나는 '파트' 이고 다른 하나는 '템플릿' 입니다. 데모를 위해 사용자 지정 코드를 추가하고 템플릿 부분으로 사용할 수 있는 다음 출력을 가져오는 방법을 보여줍니다.

사용자 지정 템플릿 부분을 만드는 코드는 다음과 같습니다.

 <?php /** * Hello World * * This pattern is used only to preference a dynamic image URL. * It does not appear in the inserter */ return array( 'title' => ('Heading and bird image', 'twentytwentytwo'), 'inserter' => false, 'categories'=> array ('header'), 'blocktypes'=> array ('core/template-part/header'), 'content' => <!-- wp:paragraph {"align":"left"} --> <p class ="has-text-align-left"> sprintf( /* Translator: WordPress link. */ esc_html_( 'Hello %s World', 'twentytwentytwo' ), '' ). '</p> <!-- /wp:paragraph --> <!-- wp:navigation {"layout":{"flex", "setCascadingProperties":true, "justifyContent":"space-between"} } --> <!--wp:page-list /--> ' , );

이 코드를 작성하면 라이브러리에 포함해야 합니다.

이 작업이 완료되면 호출하기만 하면 템플릿 부분이 준비됩니다. 사용할 수 있도록 자식의 부품 폴더에 코드를 보관하십시오.

코드는 다음과 같습니다.

 <!-- wp:pattern {"slug": 'twentytwentytwo/hello-world"} /-->

사용자 정의 템플릿 부분이 준비되었습니다. 이제 템플릿 부품 라이브러리에서 찾아 사용할 수 있습니다.

자주하는 질문

다음은 자주 묻는 질문에 대한 답변입니다.

테마 및 플러그인 파일 편집기는 어디에서 찾을 수 있습니까?

WordPress 대시보드의 '설정' 메뉴에서 테마 및 플러그인 파일 편집기를 찾을 수 있습니다. 최신 업데이트로 테마 메뉴에서 더 이상 찾을 수 없습니다.

Twenty Twenty-two WordPress 테마에서 특정 페이지를 어떻게 사용자 정의합니까?

특정 페이지를 사용자 지정하려면 페이지 템플릿을 사용자 지정해야 합니다. 수정하려는 페이지로 이동합니다. 설정 메뉴에서 페이지 템플릿 설정을 찾을 수 있습니다. 새 페이지 템플릿을 만들거나 드롭다운에서 기존 템플릿을 선택할 수 있습니다.

최신 22개의 블록 테마에서 메뉴를 어떻게 추가하거나 사용자 정의합니까?

페이지에 메뉴를 만들려면 블록 메뉴에서 탐색 블록을 사용해야 합니다. 메뉴를 템플릿 부분으로 생성하여 직접 사용할 수도 있습니다. 22개의 블록 테마에서 메뉴를 사용자 정의하는 방법에 대한 콘텐츠를 확인하고 싶을 수 있습니다.

구텐베르크에 적응해야 할까요?

전체 사이트 편집과 관련하여 Gutenberg 편집기에 적응합니다. 구텐베르크가 전체 사이트 편집을 할 수 있는 가능성이 매우 높기 때문입니다. 또한 앞서 나가기 위해 Gutenberg SEO를 확인해야 합니다. Gutenberg는 너무 많은 플러그인에 의존할 필요가 없기 때문에 사이트 속도를 빠르게 유지하는 데 좋습니다.

하나의 템플릿 부분을 여러 페이지에 사용할 수 있습니까?

예, 새 템플릿 부분을 생성하고 저장하면 템플릿 부분 블록 을 사용하고 다른 페이지에서 재사용할 수 있습니다. 템플릿 부분을 만드는 것은 사용자 정의 페이지를 만들 때 노력을 줄이는 좋은 방법입니다.

PostX 플러그인은 Gutenberg와 호환됩니까?

네. 사실 PostX는 Gutenberg를 기반으로 하는 플러그인입니다. 222개의 WordPress 블록 테마와 완벽하게 호환됩니다. 최신 버전의 WordPress를 완벽하게 지원합니다. 잠재적인 옵션으로 22개의 테마를 찾을 수 있는 PostX의 권장 테마를 확인하십시오.

마지막 생각들

WordPress 전체 사이트 편집이 곧 가능합니다. WordPress가 더 이상 무거운 페이지 빌더에 의존할 필요가 없는 완전한 작동 솔루션이 될 것으로 기대할 수 있습니다.

그리고 버전 5.9의 최신 블록 테마가 이를 대변합니다. 몇 가지 눈에 띄는 단점이 있지만 구텐베르크의 미래는 성공적인 독립형 선택이 될 가능성이 매우 높습니다.

그런 블로그 게시물을 즐기고 있습니까? 당신의 생각과 제안을 공유하기 위해 아래 코멘트에서 소리를 냅니다. 건배!