Magento 블록 및 위젯에 대한 초보자 가이드

블록과 위젯은 Magento의 주요 레이아웃 기능입니다. 이 두 기능은 매우 밀접하게 연결되어 있으며 종종 함께 사용됩니다.

블록에 대해 생각하는 한 가지 방법은 블록이 미니 페이지라는 것입니다. 블록에는 텍스트, 이미지, 비디오 등도 포함될 수 있습니다. 그러나 블록이 더 작기 때문에 사이트 가장자리에서 볼 수 있습니다. 블록은 종종 머리글, 사이드바 및 바닥글에 삽입됩니다.

그러나 블록은 위젯을 사용하여 배치됩니다. 먼저 블록을 만든 다음 위젯을 사용하여 해당 블록이 표시될 위치를 결정합니다.

몇 가지 예를 살펴보고 Magento에서 블록과 위젯이 어떻게 작동하는지 보여드리겠습니다.

이 가이드는 Magento 2의 베스트 셀러 책인 Magento 2 Explained에서 가져왔습니다. 우리는 그 책에서 "Orangeville"이라는 상점의 예를 사용하므로 여기에서 참조되는 것을 볼 수 있습니다.

Magento 블록 생성 설명

첫 번째 블록을 만드는 과정을 살펴보겠습니다. 여기에는 HTML 링크가 포함됩니다.

• "콘텐츠"로 이동한 다음 "차단"으로 이동합니다.
• 오른쪽 상단 모서리에 있는 "새 블록 추가"를 클릭합니다.

• "블록 제목"으로 "Key Links"를 입력하십시오. 이것은 방문자가 화면에서 보게 될 것입니다.
• 식별자로 "key_links"를 입력합니다. 이 문자열은 Magento가 블록을 식별하는 데 사용하지만 방문자는 절대 볼 수 없습니다.

• 편집기 도구 모음에서 글머리 기호 아이콘을 클릭합니다.

• 글머리 기호로 "Orangeville 정보"를 입력합니다.
• "Orangeville 소개" 텍스트를 선택하고 링크 아이콘을 클릭하십시오.

• 이제 팝업 창이 표시됩니다. "Orangeville 정보" 페이지의 URL을 입력하십시오. 이것이 무엇인지 확실하지 않은 경우 새 브라우저 탭에서 Magento 사이트를 열고 URL을 찾을 수 있습니다(예: example.com/about-orangeville/).
• "삽입"을 클릭하십시오.
• 이제 블록 내부에 "Orangeville 정보" 링크가 있습니다.

• "블록 저장"을 클릭하십시오.

Magento 위젯 생성 설명

이제 사이트 디자인에 블록을 배치해야 합니다. 여기에서 Magento의 위젯이 유용합니다. Magento에서 블록은 콘텐츠의 일부일 뿐입니다. 블록의 배치를 제어하는 ​​것은 위젯입니다.

그러나 그것이 위젯이 할 수 있는 전부는 아닙니다. 위젯은 간단하고 새로운 블록을 배치할 수 있지만 다른 많은 기능도 배치할 수 있습니다.

• "콘텐츠"로 이동한 다음 "위젯"으로 이동합니다.
• "위젯 추가"를 클릭하십시오.
• "유형"에 대해 "CMS 정적 블록"을 선택합니다.
• "디자인 테마"에 대해 "Magento Luma"를 선택합니다.
• "계속"을 클릭하십시오.

• "위젯 제목"에 "Key Orangeville Links"를 입력하십시오.
• "스토어 보기에 할당"에서 "모든 스토어 보기"를 선택합니다.

다음으로 이 차단이 나타나는 URL을 제어할 것입니다.

• "레이아웃 업데이트 추가"를 클릭합니다.

• "모든 페이지"를 선택하십시오.

• "컨테이너" 옵션에 대해 "CMS 바닥글 링크"를 선택합니다.

"모든 페이지" 및 "CMS 바닥글 링크" 두 가지 선택 모두 아직 이해가 되지 않을 수 있습니다. 그러나 위젯 생성을 완료하고 이 장의 뒷부분인 "Magento 위젯 배치 설명" 섹션에서 이러한 선택을 한 이유에 대해 자세히 설명합니다.

"레이아웃 업데이트"에서 위젯을 배치할 위치를 두 번째로 선택합니다.

• "모든 제품 유형"을 선택합니다.
• "CMS 바닥글 링크"를 다시 선택하십시오.
• 이 두 가지 옵션을 모두 추가하면 화면이 아래 이미지와 같이 보일 것입니다.

이 시점에서 위젯을 만들고 Magento에게 사이트의 어디에 표시해야 하는지 알렸습니다. 이 위젯은 당사의 모든 페이지와 모든 제품에 표시됩니다.

이제 이전에 생성한 블록이 될 위젯의 콘텐츠를 선택할 차례입니다.

• 사이드바에서 "위젯 옵션"을 클릭하십시오.
• "블록 선택"을 클릭하십시오.

• 이제 이전에 생성한 "키 링크" 블록을 선택할 수 있습니다.

• "저장"을 클릭합니다.
• 사이트 전면을 방문하면 이제 바닥글에 링크가 게시된 것을 볼 수 있습니다. 콘텐츠로 블록을 만들고 위젯 내부에 게시했습니다.

블록과 위젯을 함께 만들기

블록과 위젯을 생성할 때 확실히 몇 가지 까다로운 단계가 있습니다. 이 모든 과정을 함께 시도해 봅시다. 두 번째 블록을 만들고 위젯을 사용하여 사이트에 배치합니다. 이 블록은 우리가 100% 만족을 보장한다는 것을 사람들에게 알릴 것입니다.

• "콘텐츠"로 이동한 다음 "차단"으로 이동합니다.
• "새 블록 추가"를 클릭하십시오.
• 제목: 만족 보장
• 식별자: 보증

• 블록에 대한 텍스트를 입력하십시오. 나는 "여기 Orangeville에서 당신의 만족이 우리의 최우선 순위입니다. 당신이 만족하지 않으면 우리는 당신의 돈을 환불 해드립니다."

다음으로 우리는 우리 블록에 대한 이미지를 업로드할 것입니다.

• 방금 작성한 텍스트 아래의 기본 콘텐츠 영역에 커서를 놓습니다.
• 편집기 도구 모음에서 나무 아이콘을 클릭합니다.
• 팝업 상자가 표시되면 작은 상자 아이콘을 클릭합니다.
• 업로드할 수 있는 이미지를 찾습니다. 저는 100% 배지를 선택했습니다.

• "파일 삽입"을 클릭하십시오.
• 이미지 설명: 만족 보장
• "삽입"을 클릭하십시오.

• 이제 텍스트와 새 이미지가 모두 포함된 블록이 있습니다.
• "블록 저장"을 클릭하여 이 블록 생성을 마칩니다.

다음으로 이 블록을 사이트에 표시할 위젯을 만들어 보겠습니다.

• "콘텐츠"로 이동한 다음 "위젯"으로 이동합니다.
• "위젯 추가"를 클릭하십시오.
• 유형: CMS 정적 블록
• 디자인 테마: 마젠토 루마

• 위젯 제목: 만족 보장
• 매장 보기에 할당: 모든 매장 보기

• 레이아웃 업데이트: 앵커 카테고리
• 컨테이너: 사이드바 메인
• "위젯 옵션"을 클릭하고 방금 생성한 "만족 보장" 블록을 선택하십시오.

• "저장"을 클릭합니다.
• 사이트 전면을 방문하십시오. 상단 메뉴에서 카테고리 링크 중 하나를 클릭합니다. 아래 이미지에서 "과일"을 클릭했습니다. 이제 왼쪽 사이드바에 보증 차단이 표시됩니다.

Magento 위젯 배치 설명

Magento 학습자로부터 받는 일반적인 질문 중 하나는 위젯 배치에 관한 것입니다.

컨테이너에 대해 "CMS 바닥글 링크" 또는 "사이드바 메인"을 선택하는 방법을 어떻게 알 수 있습니까? 결국 아래 이미지에서 볼 수 있듯이 22개의 다른 선택이 있습니다.

"페이지 머리글 뒤"와 "페이지 머리글 상단 뒤"의 차이점은 무엇입니까? "페이지 바닥글"과 "페이지 바닥글 컨테이너"의 차이점은 무엇입니까? 이름이 너무 비슷해서 헷갈릴 수 있습니다.

불행히도 이름을 통해 배치 위치를 알 수 있지만 미리 알 수 있는 확실한 방법은 없습니다.

• 페이지 머리글 뒤: 기본 메뉴 아래에 있을 수 있습니다.
• 주요 콘텐츠 하단: 아마도 화면 중앙, 당사 제품 또는 페이지 콘텐츠 아래에 있을 것입니다.
• 페이지 상단: 페이지 상단에 표시되지만 제품 화면에는 표시되지 않습니다.

동일한 사이트에서도 이러한 옵션이 변경된다는 점은 주목할 가치가 있습니다. 블록을 배치하고 위젯의 "레이아웃 옵션"에 대해 "모든 제품 유형"을 선택하려고 하면 아래 이미지와 같이 다른 선택 세트가 표시됩니다. 이러한 옵션은 제품 화면에만 적합한 일부 게재위치를 제공합니다. 예를 들어 이제 "제품 소셜 링크 컨테이너" 및 "이전에 양식 필드 검토"가 포함된 선택 항목이 표시됩니다. 이러한 위젯 배치는 제품 화면을 제외하고 어디에서나 의미가 없습니다.

반면에 이 목록은 때때로 훨씬 더 짧을 수 있습니다. 이 장의 다음 부분에서 일부 위젯에는 세 가지 컨테이너 옵션만 제공된다는 것을 알 수 있습니다.

따라서 특정 컨테이너를 선택하는 경우 위젯이 표시될 위치를 정확히 알 수 있는 방법은 없습니다. 이러한 다양한 옵션을 테스트할 때 몇 가지 테스트와 실험이 수반됩니다.

Magento 블록 및 위젯 요약

블록 및 위젯을 사용하면 사이트 디자인에 새 항목을 추가할 수 있습니다. 그러나 사이트에는 Magento의 관리 인터페이스에서 쉽게 수정하거나 대체할 수 없는 요소가 있습니다. 블록과 위젯이 되어야 하는 것처럼 보이지만 Magento는 그런 식으로 만들지 않았습니다. 그래서 이러한 기본 요소 중 일부를 업데이트하기 위한 지침이 있는 페이지를 만들었습니다.

Magento에 대해 자세히 알아볼 준비가 되었다면 Magento 2의 베스트 셀러인 Magento 2 Explained를 확인하십시오.

또한 다음을 포함하여 온라인에 더 훌륭한 Magento 자습서가 있습니다.

• Magento 세금 이해를 위한 초보자 가이드
• Magento의 기본, 소형, 축소판 및 견본 이미지
• Magento 2 인덱스가 무엇이며 어떻게 관리할 수 있는지 알아보십시오.