플라이휠 가격표를 맞춤형 블록으로 재구축(약 10분 소요)

(Gutenberg) 블록 편집기는 의심할 여지 없이 현대 WordPress의 중심입니다. WordPress Core로 가는 전체 사이트 편집과 함께 블록과 블록이 약속하는 모든 것은 그대로 유지됩니다.

그러나 블록이 항상 우리가 원하는 대로 하거나 우리가 원하는 대로 보이는 것은 아닙니다. 생계를 위해 사이트를 디자인하고 구축하는 경우 쿠키 커터가 웹에서만 사용된다는 것을 알고 있습니다. 어느 시점에서 우리는 페이지의 "차단"이 정말 특정한 방식으로 보이거나 동작해야 합니다.

맞춤형 블록이 여기에 솔루션입니다! 그러나 사용자 정의 블록은 한동안 WordPress를 사용해 온 많은 사람들에게 dev에 대한 매우 다른 접근 방식을 요구합니다.

다른? 예!

어려운? 아니요!

완전 맞춤형 블록을 쉽게 만드는 방법을 보여 드리겠습니다. 그리고 10분정도 소요됩니다. 블록 편집기에 대한 기술을 향상시키려는 프리랜서나 에이전시 크루는 이 방법을 좋아할 것입니다!

블록

우리가 프로젝트를 진행 중이고 디자이너가 전자상거래 웹사이트를 위한 멋진 디자인을 우리에게 건네준다고 상상해 봅시다. 그것은 WordPress + WooCommerce의 장점을 사용하지만 선반에서 작동하지 않는 몇 가지 부분이 있습니다. 그 중 하나가 바로 여기에 있습니다.

홀럽 ! 이것은 친숙해 보인다!

네, 플라이휠 가격표를 사용자 정의 블록으로 다시 만들 것입니다. ? 주변에 플러그 앤 플레이 가격 테이블 블록이 있지만 여기에서는 매우 독특하므로 자체적으로 롤링할 것입니다.

설정

이 이야기의 주인공은 Genesis Custom Blocks라는 플러그인입니다. wordpress.org에서 무료이며 다음과 같은 멋진 고급 기능을 제공하는 Pro 버전이 있습니다.

• 새로운 WordPress 설치 – 로컬의 칭찬
• Genesis Custom Blocks(무료) 설치 및 활성화
• 제네시스 블록 테마의 하위 테마

중요 참고 사항: Genesis Custom Blocks는 Genesis 프레임워크, 위의 Genesis 블록 테마 또는 기타 플러그인이나 테마에 종속되지 않습니다.

블록 등록 및 구성

이 플러그인의 장점은 WordPress 관리자에서 많은 작업을 수행할 수 있다는 것입니다.

WordPress 관리자의 왼쪽 메뉴에서 Custom Blocks > Add New 로 이동합니다.

이제 우리가 보는 화면은 블록 빌더입니다. 여기에서 필드 추가를 포함하여 블록에 대한 여러 가지를 구성할 것입니다.

이 플러그인이 작동하는 방식은 사용자가 블록 편집기에서 작업하는 사용자 지정 블록을 생성하여 양식과 같은 인터페이스의 필드를 통해 콘텐츠와 데이터를 입력하는 것입니다. 이 단순하고 의견이 많은 인터페이스는 사용자 정의 블록 생성 프로세스의 속도를 높이는 것 중 하나입니다. 입력 UI를 알 필요가 없습니다.

추가한 블록 세부 정보는 다음과 같습니다.

• 이름: 가격표
• 슬러그: 가격표
• 아이콘: 창세기 행성

추가하는 필드는 다음과 같습니다.

사용자 정의 블록에 필드를 추가하는 것은 다음과 같습니다.

모든 필드를 추가하면 다음과 같습니다.

게시를 누르면 다음에 무엇을 해야 하는지 묻는 메시지 가 표시됩니다.

이것은 우리를 다음 단계로 이끕니다.

블록 템플릿

이제 블록이 실제로 등록되어 블록 편집기에서 사용할 수 있습니다. 새 게시물/페이지로 건너뛰고 다른 것과 마찬가지로 블록을 추가할 수 있습니다. 그러나 (아직) 아무것도 표시하지 않습니다. 여기에서 템플릿이 등장합니다.

Genesis Custom Blocks를 사용하면 WordPress 개발자가 지난 10여 년 동안 연마해 온 많은 템플릿 방식을 활용할 수 있습니다. 매우 간단하고 매우 친숙하게 느껴질 것입니다.

자식 테마에서 다음과 같은 몇 가지 새 폴더와 파일을 추가합니다.

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

여기서 주의할 사항:

• 테마(하위 테마)에 blocks 폴더를 추가합니다.
• 현재 작업 중인 블록에 특정한 폴더를 추가하고 블록 슬러그 이름을 무엇이든 지정합니다. 이 경우에는 pricing-table 입니다.
• PHP 파일과 CSS 파일을 추가합니다. 여기에 템플릿 코드를 추가할 것입니다.

PHP 파일로 시작하여 기본 HTML 마크업 및 CSS 클래스부터 시작하겠습니다.

이것은 다음과 같이 보일 것입니다:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

주의할 사항:

• 많은 CSS 클래스가 준비되어 있습니다. 참고: CSS를 다룰 수 있지만 이해가 됩니다.
• 리소스 표시줄을 처리하기 위해 <progress> HTML 태그를 사용할 것입니다.

이제 플러그인이 우리에게 제공하는 간단한 PHP 기능으로 작업할 것입니다. 사용할 수 있는 항목이 많이 있지만 대부분의 시간을 아래의 두 가지를 사용하는 데 보낼 것입니다. 우리는 이 블록에서 첫 번째를 독점적으로 사용하고 있습니다.

따라서 이러한 함수를 사용하면 PHP 템플릿 파일이 다음과 같이 표시됩니다.

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

데이터를 가져오고 출력하기 위해 block_field() 함수를 사용한 위치를 볼 수 있습니다. 우리는 단순히 필드의 슬러그를 함수의 인수로 사용합니다. 예: block_field( 'icon' ) . 이것은 이미지 필드 유형이므로 해당 이미지의 URL을 반환합니다.

CSS의 경우 이것을 block.css 템플릿 파일에 배치합니다. 다시 한 번, CSS는 원하는 방식으로 회전할 수 있으며 내가 작성한 특정 코드는 이 튜토리얼과 특별히 관련이 없지만 체크아웃할 수 있도록 여기에 남겨 둡니다.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

여기서 CSS의 가장 흥미로운 부분은 <progress> 태그의 스타일입니다. 약간 성가신 일이지만 그것이 무엇입니까. <progress> 를 피하려면 중첩된 div 설정으로 전환하고 설정된 너비를 계산할 수 있습니다.

그리고 그게 다야! ?

요약:

1. WP Admin에서 블록을 추가하고 구성했습니다.
2. 29줄의 기본 HTML과 단일 PHP 함수로 PHP 템플릿 파일을 만들었습니다.
3. 스타일링을 위해 일부 CSS를 block.css 에 추가했습니다.

사용자 정의 블록 사용

이제 건너뛰어 새 게시물이나 페이지를 만들고 블록을 추가할 수 있습니다. 가격 옵션에 대해 4열 스타일을 유지하기 위해 먼저 열 블록을 추가한 다음 사용자 지정 가격 테이블 블록을 각 열에 놓습니다.

"블록 추가" 버튼을 클릭하면 여기에서 가격표 블록이 준비된 것을 볼 수 있습니다.

아래는 네 개의 열이 있고 사용자 정의 블록을 네 번 추가한 방법을 보여줍니다. 개별 블록을 선택하면 콘텐츠 드롭을 위한 필드를 제공하는 양식 UI로 전환되는 것을 볼 수 있습니다. 양식 보기에서 멀리 클릭하면 미리보기가 표시됩니다.

블록 편집기에서 멋지게 보이고 프론트 엔드에서도 똑같이 보입니다. 열 블록도 활용하기 때문에 모든 것이 훌륭하고 반응이 좋습니다.

Gutenberg의 반응형 기둥 블록에서 작업하고 이에 기댈 수 있도록 설계를 완료했기 때문에 이 블록의 총 빌드 시간은 10분 미만이었습니다.

블록을 더욱 개선하기 위해 할 수 있는 몇 가지 작업이 있습니다.

• 복수화해야 할 문자열이 몇 개 있습니다. 즉, "WordPress 사이트"는 1개 이상의 사이트 제한이 있는 계획의 경우 "WordPress 사이트"여야 합니다. PHP 템플릿 파일의 몇 가지 기본 논리로 이 문제를 해결할 수 있습니다.
• 열 블록을 건너뛰고 대신 리피터 필드(Pro 기능)를 사용하고 모든 계획을 단일 블록에 포함할 수 있습니다.
• 더 큰 숫자에는 쉼표를 추가하십시오.
• 진행률 표시줄은 최대 관계에 대한 정확한 값을 보여줍니다. 조금 이상해 보입니다. 값에 대한 보다 개념적인 것으로 전환할 수 있습니다.

정리하기

이 블록을 다운로드하여 설치하려면 여기에서 파일을 다운로드할 수 있습니다. 사용자 정의 블록 가져오기에 대한 문서는 여기에서 찾을 수 있습니다.

기타 중요한 링크:

• 플러그인
• 문서 사이트
• 제네시스 슬랙 커뮤니티

작동 중인 Genesis Custom Blocks를 조금 더 보고 싶다면 DE{CODE}의 최근 세션에서 약 15분 만에 4개의 개별 사용자 정의 블록(복잡도 증가)을 구축 및 시연했습니다. 여기에서 주문형 녹음을 확인하십시오.

이것이 유용하고 사용자 정의 설계 및 빌드를 위해 블록 편집기의 기능을 활용하는 것이 얼마나 쉬운지 이해하셨기를 바랍니다.

건배!

Flywheel을 사용하여 Genesis에서 제작한 StudioPress 테마에 무료로 액세스하세요!

호스팅 제공업체가 귀하를 위해 가장 많은 일을 하는 것이 중요하며 이는 성능과 보안 그 이상입니다! 추가 비용 없이 35개 이상의 Genesis 제작 StudioPress 테마에 액세스할 수 있는 Flywheel은 아름다운 테마 라이브러리를 제공하므로 웹사이트 목표에 맞는 방식으로 사이트를 구축하거나 재구성할 수 있습니다! 여기에서 플라이휠에 대해 자세히 알아보세요.