Meta Box용 MB 보기 추가 기능으로 사용자 정의 템플릿 구축

Meta Box는 지난주에 MB Views 애드온 플러그인을 출시했습니다. 새로운 확장 기능을 통해 개발자는 WordPress 관리자의 편의를 통해 맞춤형 템플릿을 구축할 수 있습니다. 목표는 테마 파일을 편집하지 않고 사용자 정의 필드를 출력하기 위한 사용하기 쉬운 인터페이스를 제공하는 것이지만 유연성은 전체 사이트 편집의 한계를 뛰어 넘습니다.

요약: MB Views는 견고한 개발자 경험을 제공하지만 코드에 익숙하지 않은 사람들에게 친숙하기에는 조금 부족합니다.

저는 오랫동안 Meta Box 팀이 핵심 플러그인 및 확장으로 수행한 작업의 팬이었습니다. 프로젝트의 개발자들은 잘 문서화된 코드 기반을 만들고 견고한 문서를 작성했으며 일반적으로 다른 사람들이 실패한 세부 사항에 주의를 기울였습니다. MB 보기도 다르지 않습니다. 확장 기능을 활성화한 후 몇 분 만에 사용자 지정 보기를 설정하고 테스트 사이트의 프런트 엔드에서 롤아웃했습니다.

인터페이스는 WordPress 관리자로부터 거의 모든 것을 구축할 수 있는 충분한 유연성으로 거의 즉시 선택할 수 있을 만큼 간단합니다.

전체적으로 팀의 새로운 추가 기능은 $79에서 $349 사이의 사용 가능한 프리미엄 번들 중 하나의 가격만큼 가치가 있습니다. 몇 가지 사소한 문제가 있는 것은 아니지만 버전 1.0 릴리스에서 예상할 수 있습니다.

프런트 엔드 편집을 위한 강력한 도구

보기 편집 화면으로 작업한 경험은 자연스럽게 느껴졌습니다. 코드 편집기는 Code Mirror와 Oceanic Next 테마를 사용합니다. 자동 탭 및 자동 완성 기능이 내장되어 있어 대부분의 오프라인 편집기처럼 느껴집니다. 개발자는 사용자 정의 보기를 빠르게 구축할 수 있어야 합니다.

저는 요즘 Tailwind CSS를 주로 사용하기 때문에 몇 분 만에 가짜 이메일 가입 양식을 만들고 사용 가능한 보기 설정을 사용하여 내 게시물 바로 아래에 표시할 수 있었습니다.

코드 편집기에는 화면 오른쪽에 슬라이드 아웃 상자를 여는 "새 필드" 버튼이 있습니다. 사용자가 게시물, 사이트, 사용자 및 쿼리 필드를 삽입할 수 있습니다. 옵션에는 Meta Box 플러그인을 통해 생성된 사용자 정의 필드도 포함됩니다.

템플릿을 편집하는 것 외에도 사용자는 보기 코드 편집기에서 직접 사용자 정의 CSS 및 JavaScript를 추가할 수도 있습니다.

이 필드의 출력은 모두 최신 PHP 템플릿 엔진인 Twig를 통해 처리됩니다. 많은 PHP 개발자는 이미 Twig에 익숙할 것이며 그 구문에 편안함을 느낄 것입니다. 이 시스템을 통해 플러그인 사용자는 HTML에 국한되지 않습니다. 그들은 조건문과 루프를 사용하여 보기 내용의 출력을 사용자 정의할 수 있습니다.

더 나은 개발자 경험을 위해 "새 필드" 버튼을 클릭한 다음 특정 필드를 클릭하는 대신 새 필드를 삽입하는 자동 완성 옵션을 보는 것이 좋습니다. 대부분의 경우 개발자는 시간이 지남에 따라 필드를 기억하기 시작하고 간단히 입력합니다. 자동 완성은 사용자 정의 필드에 좋은 터치가 될 것입니다.

MB View가 정말 빛나는 곳은 보기 설정입니다. 플러그인을 사용하면 보기가 테마 머리글과 바닥글 사이의 전체 페이지 또는 콘텐츠 영역만 차지할 수 있습니다. 이를 통해 사용자는 단일 게시물, 아카이브 페이지 또는 내장 단축 코드를 사용하여 사용자 정의에 대한 보기 표시 중에서 선택할 수 있습니다. 사용자는 다양한 방식으로 그룹화할 수 있는 조건을 기반으로 보기가 표시되는 위치를 더 세분화할 수 있습니다. 필요에 따라 간단하거나 복잡할 수 있습니다. 사용자 정의 PHP 조건으로 가능한 것과 완전히 동등하지는 않지만 대부분의 사용 사례를 다룰 만큼 충분히 가깝습니다.

누군가 직접 사용해 보고 싶다면 MB Views를 전체 사이트 편집기로 사용할 수 있습니다. 유일한 실제 요구 사항은 머리글과 바닥글을 사용하여 테마를 구축하는 것입니다. 어느 시점에서 플러그인은 사용자가 전체 페이지 레이아웃을 인수하여 테마를 효과적으로 불필요하게 만들 수 있습니다.

문제 및 향후 개선 사항

버전 1.0은 사용자의 손에 무언가를 전달하는 것입니다. 개발자가 가장 유용한 피드백을 받는 시기이므로 개발자가 향후 플러그인을 계속 구축함에 따라 다음 사항이 해결되기를 기대합니다. 나는 큰 장애물에 부딪치지 않았지만 몇 가지 사소한 문제를 발견했고 개선을 위한 몇 가지 아이디어가 있었습니다.

내가 부딪힌 첫 번째 문제는 처음에 플러그인이 전혀 작동하지 않는다고 믿게 만들었습니다. 단일 게시물에 내 사용자 정의 보기를 표시하기로 선택했습니다. 보기 설정을 통해 쉽게 수행할 수 있습니다. "Singular" 유형을 선택합니다. 그런 다음 첫 번째 드롭다운 선택에서 "게시"를 선택합니다. 나는 이것이 모든 게시물에 템플릿이 나타나게 할 것이라고 생각했습니다. 그러나 저장 후 아무 일도 일어나지 않았습니다. 내 사용자 정의 콘텐츠가 프런트 엔드에 나타나지 않았습니다. 문제는 기본적으로 값이 채워지지 않은 두 번째 드롭다운 선택 항목이 있다는 것입니다. 선택해야 하는 "모든 게시물" 옵션이 있었습니다. 빠르게 해결해야 하는 문제였지만 이것이 플러그인 개발에서 좋은 기본값이 중요한 이유입니다.

수정 지원이 없습니다. WordPress 관리자의 코드 편집기의 경우 사용자가 코드를 이전 버전으로 되돌릴 수 있다는 것은 의미가 있습니다. 사용자가 약간의 코드로 뷰를 생성하는 경우에는 문제가 되지 않습니다. 그러나 플러그인은 사용자가 테마의 머리글과 바닥글 사이에 전체 페이지 레이아웃을 만들 수 있도록 허용합니다. 이는 때때로 많은 코드와 변경 사항을 백페달해야 함을 의미합니다.

MB Views는 게시물 콘텐츠와 같은 단축 코드 준비 영역 내에서 보기를 출력하기 위한 [mbv] 단축 코드를 제공합니다. 그러나 블록 편집기에서 사용할 블록은 없습니다. 이 시점에서 숏코드는 있지만 블록이 없는 것은 큰 실수로 보입니다. 단축 코드는 천천히 그리고 고통스럽게 죽어야 합니다.

보기 관리 화면도 약간의 사랑을 사용할 수 있습니다. 적어도 보기 유형에 대한 열을 보는 것이 좋을 것입니다. 사용자 정의 보기 목록이 늘어남에 따라 각 보기가 어디에 사용되는지 한 눈에 파악하기 어려울 수 있습니다.

사용자 친화성과 미래

Meta Box 필드의 값을 가져와서 프런트 엔드 템플릿에 넣고 싶지만 코딩에 익숙하지 않고 테마 파일을 만지고 싶지 않습니까?

MB Views의 시작 설명에서는 플러그인이 코딩에 익숙하지 않은 사용자를 대상으로 한다고 주장합니다. 일반 사용자가 코딩 지식을 습득하지 않고도 이를 활용할 수 있을지 확신할 수 없습니다. 인터페이스는 주로 개발자를 대상으로 합니다. 말 그대로 보기 편집기는 코드 편집기입니다. 클릭하기 쉬운 필드 삽입기가 있지만 이러한 필드는 HTML과 CSS에 익숙하지 않으면 쓸모가 없는 경우가 많습니다.

이 도구는 그 역할을 잘하지만 블록 편집기 시대의 임시 조치처럼 느껴집니다.

MB 보기가 보다 유용한 최종 사용자 도구가 되려면 디자인 옵션이 있는 더 많은 시각적 포인트 앤 클릭 인터페이스로 전환해야 합니다. 그렇지 않으면 뷰 출력을 완벽하게 사용자 정의할 수 있는 개발자의 영역에 대부분 남을 것입니다.

팀이 훌륭한 개발자 경험에 집중하기를 원한다면 MB Views가 반드시 그런 방향으로 나아가야 한다고 생각하지는 않습니다. 그러나 현재 코드에 익숙하지 않은 사용자를 위한 친숙함이라는 주장에 부합하지 않습니다.

우리는 여전히 블록 시스템을 통한 전체 사이트 편집 경험에서 적어도 1년은 더 있을 것입니다. Meta Box 팀의 노력은 해당 시스템 내에서 보기 편집을 통합하는 데 가장 잘 사용될 수 있습니다. MB Views 애드온은 오늘날 많은 Meta Box 플러그인 사용자에게 유용하고 필요한 도구이지만 전체 사이트 편집이 핵심에 도달하기 전에 관심을 끌 시간이 없을 수 있습니다. 그 시점에서 플러그인 팀은 이미 WordPress를 사용하여 훨씬 다른 사용자 경험의 세계로 전환하고 있어야 합니다.