WordPress 초급: 중간 수준 사용자 지정

지난 몇 주 동안 내 마지막 WordPress 초급 블로그에서 간단한 기본 사항을 넘어 ProteusThemes 데모 페이지 중 하나를 다시 만드는 작업을 했습니다. Auto 테마의 데모는 구체적입니다. 이전과 마찬가지로 동료들이 차근차근 과제를 설정해 주었습니다. 이것들은 내가 지금까지 배운 가장 중요한 교훈입니다.

아이콘 상자

아이콘 상자 위젯은 시각적 언어 의 매우 편리한 부분입니다. 당연해 보이지만 전화 아이콘 옆에 회사 전화번호를 표시하는 것은 사이트의 사용자 경험 을 향상시키는 간단하지만 효과적인 방법입니다.

내 작업은 홈페이지의 헤더에 아이콘 상자를 추가하는 것이 었습니다. 이렇게 하려면 대시보드에서 모양 -> 위젯 으로 이동한 다음 ' 테마 사이드바 ' 내에서 ' 헤더 '를 선택해야 합니다.

' 헤더 '를 찾으면 화면 왼쪽으로 시선을 돌리면 ' 사용 가능한 위젯 ' 목록이 표시됩니다. ProteusThemes: IconBox 는 당신이 찾고 있는 위젯입니다.

이제 두 가지 옵션 이 있습니다. 위젯을 화면 오른쪽으로 드래그 앤 드롭 하여 헤더에 배치하거나 위젯을 클릭할 때 해당 위치의 드롭다운 메뉴가 표시되면 여기에서 ' 헤더 '를 선택하기만 하면 됩니다. 목록을 만들고 파란색 ' 위젯 추가 ' 버튼을 클릭합니다.

이제 위젯 내에서 선택할 수 있는 아이콘이 많이 있음을 알 수 있습니다. 이 연습에서는 전화를 선택했습니다. 아이콘 상자에 제목을 지정하고 그 옆에 표시할 정보를 결정하기만 하면 됩니다.

위젯 메뉴의 모든 아이콘 아래에 ' 이 위젯 강조 표시 ' 옵션이 표시됩니다. 아이콘 상자의 정보가 매우 중요하고 더 눈에 띄게 하려면 해당 상자를 선택하십시오.

전면 페이지 슬라이더

자동 데모를 다시 만들려면 슬라이더 를 홈페이지의 기능으로 추가해야 했습니다. 이렇게 하려면 페이지 -> 모든 페이지 -> 홈 을 선택하십시오. 홈 페이지의 편집기에서 화면 오른쪽의 ' 페이지 속성 s' 드롭다운 메뉴를 찾아야 합니다. 그것을 찾아서 ' Template '을 ' Front Page With Slider '로 변경하십시오.

' 슬라이더 가 있는 전면 페이지 '로 변경하면 ' 전면 페이지 슬라이더 '라는 제목의 새 메타 가 화면 하단에 표시됩니다. 슬라이더에 이미지와 텍스트를 추가하려면 여기를 클릭하십시오.

단축 코드

프론트 페이지 슬라이더를 다시 만들면 단축 코드 로 멋지게 전환됩니다. 왜요? 내가 다시 만들고 있는 Auto Demo 에는 슬라이더 안에 버튼 이 있기 때문입니다.

이 시점 에서 권장 플러그인을 설치 해야 한다는 점을 강조하는 것이 중요합니다. 내가 한 실수는 ProteusThemes Shortcodes 플러그인을 활성화하지 않고 '슬라이드 텍스트'에 단축 코드를 삽입한 것입니다. 플러그인을 활성화하지 않은 경우 생성하려는 버튼이 아니라 코드 자체가 슬라이더에 나타납니다.

모든 테마 문서 에는 삽입할 수 있는 버튼의 스타일과 기능에 대한 다양한 옵션을 제공하는 '단축 코드' 섹션이 있습니다. 이 코드를 복사 하여 슬라이더의 '슬라이드 텍스트' 섹션에 붙여넣기만 하면 됩니다. 코드 내에서 버튼의 텍스트를 필요에 맞게 편집하기 만 하면 바로 사용할 수 있습니다.

물론 슬라이더가 아닌 다른 위치에서 단축 코드를 사용할 수 있습니다. 예를 들어 무언가를 시도하고 판매하기 위해 콘텐츠 마케팅 을 작성한 경우 블로그 게시물 하단에 효과적인 CTA 버튼 을 만들기 위해 단축 코드를 사용하십시오.

페이지 빌더

SiteOrigin의 Page Builder 플러그인을 파악하는 것은 Auto Demo를 다시 만드는 데 절대적으로 중요 합니다. 내가 사용해야 했던 첫 번째 작업은 홈페이지 헤더 아래에 Popover 섹션이 있는 이 IconBox 를 만드는 것이었습니다.

이렇게 하려면 편집하려는 페이지(내 경우에는 홈페이지)로 이동합니다. 그런 다음 페이지 빌더 메뉴를 찾아야 합니다. 다음과 같습니다.

여기에서 ' 행 추가 '를 선택합니다. 그러면 이 행 내의 열과 관련된 옵션이 표시됩니다. 원하는 열 수, 크기 비율 및 크기 순서를 왼쪽에서 오른쪽 으로 또는 그 반대로 원하는지 여부를 선택할 수 있습니다. 내 IconBox Popover의 경우 짝수 크기의 열 3개를 선택했습니다.

열이 준비되었으므로 위젯을 추가하여 열에 기능을 추가 할 수 있습니다. 추가하려는 열을 클릭하여 이 작업을 수행하고 열이 선택되면 위의 메뉴에서 ' 위젯 추가 ' 버튼을 클릭합니다.

선택하는 위젯에 따라 열에 기능을 더 추가할 수 있습니다. 예를 들어 내 ' Opening Times ' IconBox Popover에서 IconBox Popover 내에 ProteusThemes Opening Time 위젯을 추가하여 열을 클릭하면 관련 정보가 팝오버에 표시되도록 해야 했습니다.

이 IconBox 팝오버 행을 만든 후 발생한 한 가지 문제는 행이 Auto Demo와 동일한 색상 이 아니며 내 페이지의 전체 너비 로 확장되지 않는다는 것입니다. 이러한 종류의 문제를 해결하는 것은 쉽습니다. 먼저 행 위 의 작은 렌치 아이콘 위로 커서를 가져간 다음 ' 행 편집 '을 선택합니다. 색상을 변경하려면 다음 단계는 ' 행 스타일 ' 메뉴에서 ' 디자인 '을 선택하는 것입니다. 여기에서 색상 및 기타 디자인 옵션을 변경할 수 있습니다.

행의 크기 를 변경하려면 먼저 ' 행 스타일 ' 메뉴에서 ' 레이아웃 '을 선택하십시오. 이렇게 하면 행에 패딩을 추가할 수 있는 옵션이 제공됩니다. 그런 다음 행을 페이지의 전체 너비로 확장하려면 ' 행 레이아웃 ' 드롭다운을 선택하고 ' 전체 너비 '를 선택하십시오.

다음과 같은 추천 페이지 열을 생성하기 위해 정확히 동일한 방식으로 Page Builder를 사용했습니다.

이를 위해 Popover 위젯이 있는 Iconbox를 열에 추가하는 대신 ProteusThemes: Featured Page 위젯을 선택했습니다. 페이지 빌더가 얼마나 유용한지에 대한 아이디어를 얻으려면 열에 다른 위젯을 넣는 방법을 잘 활용해야 합니다.

지금은 이것이 전부일 것입니다. 좀 더 기본적인 팁은 제 이전 게시물을 참조하세요. 뉴스레터를 구독하고 이러한 종류의 콘텐츠를 받으려면 아래를 클릭하세요. 훨씬 더 많은 것이 받은 편지함으로 직접 전달됩니다…

지금 구독