Bootstrap 탐색 모음을 WordPress 테마에 통합하는 방법

테마 개발 프로세스 속도를 높이고 싶었던 적이 있나요? 제 생각에 대답은 "예"입니다. 여러분은 이미 Bootstrap을 알고 있고 이를 모형에 사용하여 개발하고 있습니다. "Bootstrap 구성 요소를 WordPress 테마에 통합하는 방법은 무엇입니까?"라는 질문이 제기됩니다.

이 튜토리얼 시리즈는 가장 인기 있는 Bootstrap 구성 요소를 WordPress 테마에 통합하는 방법을 보여줍니다. 반응형 탐색 모음을 쉽게 만들 수 있는 Navbar 구성 요소부터 시작해 보겠습니다. 이 튜토리얼을 쉽게 따라할 수 있도록 로고와 메뉴만 포함된 탐색 모음을 사용하겠습니다.

---

1. 부트스트랩 프레임워크를 사용하여 탐색 모음 작성

다음은 Bootstrap 문서 페이지의 소스 코드입니다.

으아악

이 튜토리얼의 다음 부분을 더 잘 이해할 수 있도록 코드를 자세히 살펴보고 몇 가지 사항을 명확히 하겠습니다.

으아악

Wrapper - 탐색 모음의 전체 콘텐츠를 래핑하는 "navbar" 클래스와 "navigation" 역할이 있는 태그입니다. <nav></nav> 으아악

Header – 모든 화면 크기에서 볼 수 있는 "navbar-header" 클래스가 있는 입니다. <div> 으아악 <p>토글 버튼<em> - </em>은 작은 화면에서 축소된 콘텐츠를 나타냅니다. 이 버튼은 필수이지만 그 안의 콘텐츠를 변경할 수 있습니다. <code><button></button> 으아악

브랜딩 – 로고가 포함된 링크는 선택 사항이며 여기에서는 생략하고 다른 곳에 포함할 수 있습니다. 으아악

접을 수 있는 콘텐츠 - "collapse" 클래스와 "navbar-collapse" 클래스를 사용하면 작은 화면에서 접혀야 하는 모든 콘텐츠가 포함됩니다. <div> 으아악 <p>Menu<em> – 사이트 탐색을 나타내는 "nav navbar-nav" 클래스가 있는 </em>입니다. <code><ul></ul>

---

2.모델을 템플릿에 통합

이 단계에서는 WordPress가 설치되어 있고 개발 중인 테마가 활성화되어 있다고 가정합니다.

2.1. 메뉴 테마를 준비하세요

functions.php 파일을 열고 아직 네비게이션을 등록하지 않았다면 등록하세요. 으아악

부트스트랩 및 jQuery 등록:

으아악

GitHub에서 Edward McIntyre의

수업을 다운로드하세요. 파일을 테마 루트 폴더에 넣습니다. wp-bootstrap-navwalkerfunctions.php로 돌아가서 다음 코드를 붙여넣으세요: 으아악

2.2. 백엔드에 메뉴 만들기

WordPress 웹사이트 백엔드

외관->메뉴로 이동하세요. "Primary"라는 새 메뉴를 만들고 여기에 항목을 추가합니다. 위치 관리 탭으로 이동하여 "Main"이라는 테마 위치에 "Main" 메뉴를 할당하세요. 변경 사항을 저장하다.

워드프레스 메뉴 관리 페이지

2.3. 탐색 모음 모델을 템플릿에 통합

header.php를 열고 탐색 표시줄 모형을 복사하여 표시하려는 위치에 붙여넣으세요. 이제 모델의 일부를 WordPress의 템플릿 기능으로 교체해 보겠습니다. 로고에 올바른 링크를 배치하는 것부터 시작하세요. 이 줄을 변경하세요: 으아악

받는 사람:

으아악

다음 단계는 모델 메뉴 대신 백엔드에서 메뉴를 출력하는 것입니다. 다음 줄의 경우:

으아악

포함:

으아악

이제 Bootstrap Navigation Bar 구성 요소가 테마에 통합되었습니다.

---

결론

이 튜토리얼에서는 Bootstrap CSS 프레임워크를 사용하여 만든 탐색 모음을 WordPress 테마에 통합하는 방법을 살펴보았습니다. 테마 개발 속도를 높이려면 소스 파일을 다운로드하여 테마에 붙여넣기만 하면 됩니다.

Envato Market에서 Neon Bootstrap 관리 템플릿 또는 Selphy Electronics 전자 상거래 Boostrap 템플릿과 같은 멋진 Bootstrap 테마 및 템플릿을 찾을 수도 있습니다.