사이드바에 엘리멘터 템플릿 사용하기
워드프레스 코어 사이드바와 엘리멘터 간의 문제
사이드바에서 엘리멘터 템플릿이나 위젯을 불러오면 더이상 구텐베르크용 위젯을 사용하지 않고 엘리멘터의 수많은 자원을 사용할 수 있어 매우 편리하다. 다만, 엘리멘터가 위젯을 불러오면서 스타일을 로드하는 방식이 워드프레스의 기본 사이드바에서는 정상적으로 작동하지 않아 Layout Shift 현상이 발생한다.
이 현상은 엘리멘터 버전 3.24에 대한 개발자 블로그에서 원인을 찾을 수 있다.
Now, let’s focus on how these styles are loaded. In previous Elementor versions, the <link> tags for these styles were always placed at the end of the <body>. As of this release, the styles are only loaded at the end of the <body> when there is no post meta with cached assets. All subsequent visits to the page will load the assets from cache and load them in the <head>.
본래는 사이드바에서 호출한 엘리멘터 템플릿의 스타일시트가 head 요소 내부에 위치해야 하는데 여전히 body 요소의 끝에 로드되서 생기는 문제다. 이 문제는 엘리멘터에서 개선하기 전 까지는 사실상 사이드바에서 엘리멘터 템플릿을 사용하기 어렵다. 조금이라도 스타일의 양이 많거나 복잡하면 곧바로 Layout Shift 현상이 발생한다. 따라서 하술 할 방법은 이러한 점을 고려하여 단순한 템플릿을 불러오는데 한정하는 것이 좋다. 특히 탭이나 아코디언 같은 중첩 위젯(Nested Elements Widget)은 절대 사용하지 않도록.
이 문제는 테스트를 통해 아래와 같은 방식으로 호출해도 모두 같은 문제를 보이는 것이 확인되었다.
- Elementor Blocks for Gutenberg 플러그인 사용
- Elementor Pro 사용자의 Saved Templed 페이지에 보이는
Shortcode이용 - Anywhere Elementor를 비롯한 Shortcode를 사용하는 방식의 유사 플러그인들
Elementor Blocks for Gutenberg 위젯을 사용하여 호출
Jetcraft Starter Kit™은 엘리멘터에서 공식으로 배포하는 Elementor Blocks for Gutenberg 플러그인이 포함되어 있다. 해당 플러그인으로 미리 만들어 놓은 템플릿을 선택하면 된다.
Shortcode 위젯을 사용하여 호출
Widgets 페이지에서 Elementor Blocks for Gutenberg 플러그인 대신 내장 Shortcode 위젯을 사용해서도 동일하게 엘리멘터 템플릿을 호출할 수 있다. 엘리멘터 무료 버전 사용자는 개별 템플릿에 대한 Shortcode를 제공하지 않으므로 Anywhere Elementor 라든가 기타 엘리멘터 템플릿에 대한 Shortcode를 생성하는 플러그인등을 사용해야 한다.
장기적인 관점에서의 사이드바 권장 사용법
워드프레스는 어떻게 사용하느냐에 따라 코딩 기반의 클래식 에디터, 블록 에디터 구텐베르크, 그리고 엘리멘터와 같은 페이지 빌더까지 중구난방으로 운용하게 된다. 항상 어딘가 나사가 하나 빠진 구멍을 다른 플러그인으로 끝없이 메꿔나가는 상황이 연출되곤 하는데, 그래도 주력 에디터 하나에서 최대한 많은 것을 구현하도록 노력하는 것이 좋다.
엘리멘터 사용자는 될 수 있으면 빨리 프로 버전을 구입해 사이드바와 같은 워드프레스의 고전적인 모듈 방식에서 벗어나 템플릿을 통해 레이아웃을 구성하는 방향으로 운용해 나가는 것을 추천한다.