부트스트랩과 워드프레스가 함께 작동하는 방법

워드프레스와 부트스트랩

대부분의 사람들은 "자신의 부트스트랩을 잡아 당겨라"라는 말에 익숙할 것입니다. 일반적으로 "성공을 위해 자신에게 의존"을 의미하는 데 사용되지만 이 문구는 원래 불가능한 일에 대한 참조로 만들어졌습니다. 결국 자신의 부츠를 사용하여 자신을 들어올릴 수는 없습니다.

하지만 유명한 말의 목표와 달리 부트스트랩 프레임워크를 워드프레스 호스팅 서비스와 함께 사용하는 데 불가능은 없습니다. 반응형 웹 디자인을 번거로움 없이 만들 수 있도록 설계된 Bootstrap은 오늘날 사용 가능한 가장 인기 있는 크리에이티브 웹 도구 중 하나입니다.

이 짧은 가이드에서는 WordPress Bootstrap의 기능과 특징, 그것이 무엇인지, 왜 그렇게 높이 평가되는지, 어떻게 사용하는지 설명합니다.

WordPress용 부트스트랩이란 무엇입니까?

원래 Twitter의 개발자 팀이 설계한 Bootstrap은 반응형의 전문적인 웹 사이트를 쉽게 만들 수 있는 오픈 소스 프레임워크입니다. 특히 모바일 친화적인 사이트 구축에 중점을 두고 있습니다.

이 컨텍스트에서 "프레임워크"라는 용어는 웹사이트 디자인을 위한 시작점으로 사용할 수 있는 미리 작성된 코드 부분(이 경우 HTML, CSS 및 JavaScript)을 나타냅니다. Bootstrap CSS의 플러그 앤 플레이 철학은 WordPress 개발 작업을 막 시작한 사용자에게 이상적이지만 노련한 개발자에게도 똑같이 유용합니다. 프레임워크는 무료이며 오픈 소스이므로 개별 요구 사항에 맞게 코드 줄을 추가하거나 편집할 수 있습니다.

간단히 말해서, 부트스트랩은 웹사이트가 원활하게 실행되도록 도와주는 까다로운 프로그래밍 세부사항을 처리하여 방문자에게 보이는 웹사이트의 프런트 엔드 부분에 집중할 수 있습니다.

WordPress에서 부트스트랩을 사용하는 이유

Bootstrap은 맞춤형 반응형 사이트 생성을 용이하게 하는 다용도 도구입니다. 그러나 우리의 말을 그대로 받아들이지 마십시오. Nintendo 및 Spotify와 같은 다국적 기업조차도 Bootstrap을 사용하여 멋진 웹 사이트를 개발했습니다. 다음은 부트스트랩 구성 요소를 WordPress 웹 사이트에 통합하는 여러 이유 중 일부입니다.

• 모바일 장치 사용 에 적합합니다. 아마도 가장 중요한 것은 Bootstrap 템플릿을 사용하여 "모바일 우선" 웹사이트를 쉽게 구축할 수 있다는 것입니다. 모바일 사용자는 웹 트래픽에서 점점 더 많은 부분을 차지합니다. 모든 미국인의 85%가 스마트폰을 소유하고 있으며 미국 성인의 15%가 모바일 장치를 통해서만 인터넷에 액세스합니다. 사이트가 모바일 친화적이지 않으면 늘어나는 고객 인구를 놓치고 있는 것입니다.

• 오픈 소스 입니다. 기술이 오픈 소스라는 것은 누구나 소스 코드를 보고 수정할 수 있음을 의미합니다. 모든 사람이 코드를 볼 수 있기 때문에 투명성이 있습니다. 뿐만 아니라 개발자 커뮤니티가 모든 문제를 신속하게 패치할 수 있기 때문에 오픈 소스 소프트웨어가 더 안전한 경우가 많습니다.

• 웹 사이트 속도 향상에 도움이 됩니다 . Bootstrap은 린(lean)하고 로드가 빠른 웹 사이트의 개발을 촉진합니다. 추가 기능을 위해 WordPress 플러그인에 의존하는 대신 프레임워크를 사용하여 사용자 정의 WordPress 테마에 직접 유용한 기능을 빌드할 수 있습니다. 플러그인 수가 적을수록 사이트가 더 빨리 실행됩니다.

• 시간과 노력을 절약할 수 있습니다 . 버튼, 탐색 모음, 아코디언, 도구 설명 등과 같은 수십 가지의 사전 구축된 WordPress 사용자 정의 기능을 통해 Bootstrap을 사용하면 웹 개발자가 아름답고 인터랙티브한 웹사이트를 쉽게 만들 수 있습니다. 이러한 요소에 필요한 모든 코드는 이미 작성되었으므로 프로그래밍 시간을 줄이고 기억에 남는 WordPress 사이트를 디자인하는 데 더 많은 시간을 할애할 수 있습니다.

• 도움을 쉽게 찾을 수 있습니다. 반응형 웹사이트 구축을 위한 가장 인기 있는 도구 중 하나(Netflix 및 Target과 같은 기업을 포함하여 20% 이상의 웹사이트에서 Bootstrap 사용)로서 다른 사람이 아직 해결하지 못한 문제를 거의 접하지 못할 것입니다. . 끝없는 포럼, 교육용 비디오 및 지원 문서를 통해 누구나 Bootstrap을 마스터하는 방법을 배울 수 있습니다.

• 브라우저 호환성을 관리 합니다. 부트스트랩은 Reboot라는 CSS 변경 사항 모음을 사용하여 다양한 브라우저와 장치에서 웹사이트를 일관되게 렌더링하여 전반적인 고객 경험을 촉진하는 반응형 웹사이트를 만듭니다.

• 무료 – WordPress와 마찬가지로 Bootstrap은 100% 무료로 다운로드하여 사용할 수 있습니다.

상위 5개 무료 부트스트랩 WordPress 테마

WordPress에서 부트스트랩을 사용하는 가장 쉬운 방법은 이미 부트스트랩을 사용하고 있는 반응형 WordPress 테마를 활성화하는 것입니다. 많은 테마 개발자는 테마 내에 프레임워크를 포함하므로 부트스트랩을 다운로드하여 설정할 필요 없이 활용할 수 있습니다.

부트스트랩 실험을 바로 시작하고 싶다면 수십 개의 무료 WordPress 테마 중에서 선택할 수 있습니다. 특별한 순서 없이 다음은 우리가 가장 좋아하는 것 중 일부입니다.

1. 퓨처리오

창의적인 포트폴리오, 전자 상거래 사이트 및 블로그를 포함한 광범위한 잠재적 응용 프로그램을 갖춘 Futurio는 웹 개발 전문가와 초보자 모두에게 훌륭한 선택입니다. Bootstrap을 사용하여 기능을 추가한 덕분에 매우 빠르게 로드되는 테마입니다.

즉, 테마는 여전히 대부분의 WordPress 플러그인과 호환됩니다. 무엇보다도 원 클릭 데모 사이트 중 하나를 선택하고 몇 분 안에 완벽하게 작동하는 웹 사이트를 설치할 수 있습니다.

SEO 최적화 및 다국어 지원을 추가하면 Futurio가 상위 5위 안에 드는 이유를 쉽게 알 수 있습니다.

2. 매끈한

Shapely는 한 페이지로 된 WordPress 테마로, 웹사이트의 모든 콘텐츠가 단일 방문 페이지에 존재함을 의미합니다. 이것이 바람직하지 않은 것처럼 보일 수 있지만 한 페이지 사이트는 사용자가 다른 섹션을 원활하게 스크롤할 수 있으므로 실제로 최적의 모바일 경험을 제공합니다.

사용후기, 제품 정보, 클릭 유도문안 등 무엇을 원하든 Shapely를 사용하면 쉽게 추가할 수 있습니다. 테마는 완벽하게 반응하고 SEO 친화적이며 대부분의 무료 및 유료 WordPress 플러그인을 지원합니다.

3. 뉴스매거진

세련된 블로그, 잡지 또는 온라인 신문의 경우 NewsMag가 있습니다. 이 테마는 Bootstrap의 힘을 활용하여 매끄럽고 적응력이 있으며 SEO 준비가 된 웹사이트를 제공합니다.

4가지 다른 블로그 페이지 스타일 중에서 선택하거나 홈페이지를 파고들어 원하는 대로 사용자 정의할 수 있습니다. 뛰어난 기능은 다음과 같습니다.

• 사용자 정의 배경
• 문의 양식
• 구글 폰트
• 추천 게시물 배너
• 반응형 영상
• 동적 위젯
• 슬라이더

모든 온라인 미디어 요구 사항에 대해 NewsMag를 찾으십시오.

4. 일디

Illdy에는 어떤 비즈니스나 제품에도 적용할 수 있는 트렌디한 느낌이 있습니다. 그리고 이 테마의 장점은 시각적인 매력으로 끝나지 않습니다.

무료 테마의 경우 Illdy는 매우 다재다능합니다. 개인 블로그에서 기존 비즈니스에 이르기까지 다양한 용도로 사용할 수 있습니다. 그리고 Illdy로 구축된 사이트인 Bootstrap 덕분에 스마트폰, 태블릿 및 데스크톱 컴퓨터에서 원활하게 실행됩니다.

Illdy의 가장 흥미로운 점은 "실시간 미리보기" 모드에서 웹사이트를 개발하는 기능입니다. 이 기능을 사용하면 사이트의 변경 사항을 변경할 때 볼 수 있습니다.

5. 스파클링

스파클링은 미니멀리즘의 마스터 클래스입니다. 모든 응용 프로그램이나 산업에 적합한 매끄러운 인터페이스를 갖춘 이 무료 WordPress 테마는 최고 중 하나입니다.

SEO 친화적인 디자인과 함께 Sparkling은 슬라이더, 인기 있는 게시물 위젯, 소셜 아이콘 통합 및 작성자 약력 추가 기능과 함께 패키지로 제공됩니다. 20개 이상의 언어를 사용할 수 있고 무한 스크롤을 지원하는 Sparkling은 Bootstrap이 제대로 수행되었다는 분명한 예입니다.

WordPress에 부트스트랩을 추가하는 방법

워드프레스용으로 특별히 설계된 것은 아니지만 부트스트랩은 다양한 방법을 통해 모든 워드프레스 사이트에 추가할 수 있습니다. 그러나 프로세스에는 WordPress의 표면 아래에서 다이빙이 포함되므로 약간의 프로그래밍 지식이 도움이 될 것입니다. 이를 염두에 두고 누구나 가장 최신 버전의 프레임워크인 Bootstrap 5를 사용할 수 있도록 가장 쉬운 방법의 단계를 최대한 명확하게 설명했습니다.

1단계: 필요한 예방 조치를 취하십시오

아무리 작더라도 WordPress 테마를 변경할 계획이라면 먼저 다음 두 가지를 수행하는 것이 중요합니다.

1. 사이트 백업 만들기 – 진행 중인 문제가 발생하면 언제든지 최근 백업에서 다시 시작할 수 있습니다.

2. 하위 테마를 만들고 거기에서 모든 변경 을 수행합니다. WordPress에서 상위 테마를 편집하는 것은 기본 테마의 코드를 덮어쓸 위험이 있으므로 권장하지 않습니다.

이 두 가지 안전 장치로 시작하지 않으면 변경한 내용이 손실되거나 더 심각한 경우 전체 웹 사이트가 작동을 멈출 위험이 있습니다.

2단계: WordPress 테마 편집기 열기

먼저 WordPress 대시보드에 로그인합니다. 거기에서 오른쪽 메뉴에서 모양 을 선택한 다음 테마 편집기를 클릭합니다. 테마 헤더 섹션(header.php)으로 이동합니다.

3단계: 참조 코드에 붙여넣기

이제 테마 헤더를 열었으므로 기존 코드를 삭제하거나 덮어쓰지 않도록 주의하면서 <head> 태그 바로 아래에 코드 줄을 붙여넣어야 합니다. 작성 당시 부트스트랩을 참조하는 데 사용된 코드는 다음과 같습니다.

<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1o″

Bootstrap은 CDN jsDelivr를 사용하여 이 코드를 통해 Bootstrap의 컴파일된 CSS의 캐시된 버전을 제공합니다. 부트스트랩 웹사이트를 확인하고 최신 스타일시트를 복사하십시오.

4단계: 마무리

파란색 파일 업데이트 버튼을 클릭하고 브라우저 캐시를 지우고 WordPress를 다시 여는 일만 남았습니다. 이제 테마에 내장된 부트스트랩에 대한 참조가 있으며 이를 사용하여 웹사이트를 최적화할 수 있습니다.

부트스트랩과 워드프레스로 불가능을 가능하게 만들기

이미 WordPress를 콘텐츠 관리 시스템으로 사용하고 있다면 Bootstrap이 무료이고 오픈 소스이며 웹 개발을 위한 강력한 도구라는 여러 가지 이유로 좋아할 것입니다.

Bootstrap 지원 WordPress 테마가 있으면 완벽한 보완책은 WP Engine의 번개처럼 빠른 관리 WordPress 호스팅 계획입니다. 이러한 웹 솔루션이 준비되어 있으면 이전에는 불가능하다고 생각했던 일, 즉 큰 비용을 들이지 않고도 세계적 수준의 웹 사이트를 구축할 수 있습니다.