부트스트랩을 기반으로 WordPress 반응형 테마를 만드는 방법

해상도, 화면 크기 및 운영 체제가 다양한 장치가 너무 많기 때문에 반응형 웹 사이트와 애플리케이션은 브랜드의 온라인 인지도를 위한 필수 요구 사항이 되었습니다.

전체 웹 트래픽의 52% 이상이 모바일 장치에서 발생하며 그 수가 증가하고 있습니다. 웹 개발자, 마케팅 담당자 및 디자이너는 웹 사이트가 반응형이고 해상도와 종횡비에 관계없이 모든 장치에서 쉽게 보고, 탐색하고, 탐색할 수 있다면 엄청난 잠재력을 이해합니다.

반응형 테마는 더 나은 가독성, 사용자 경험 및 로드 시간을 위해 웹 사이트의 요소가 화면 크기 및 브라우저에 따라 자체 조정되는 웹 디자인 접근 방식입니다. 개발자와 테마 디자이너는 반응형 웹사이트의 개념에 돈을 쓰고 있습니다. 많은 브랜드가 웹 사이트를 반응형 및 모바일 친화적으로 만들기 위해 WordPress 개발자를 점점 더 고용하고 있습니다.

2013년 11월 Google의 웹스팸 팀장인 Matt Cutts는 반응형 디자인이 SERP에서 부정적인 영향을 미치지 않을 것이라고 설명 하는 비디오를 발표했습니다 . 또한 Google은 Google이 반응형 웹사이트를 취급하는 방식에 대한 세부정보가 포함된 모바일 친화적 웹사이트 에 대한 가이드라인도 게시했습니다.

스마트폰 및 기타 유사한 장치의 등장으로 데스크탑과 노트북의 사용은 (느리게) 감소하고 있습니다. 이것은 사람들이 뉴스에서 지역 상점, 항공편 문의에서 최신 영화에 이르기까지 거의 모든 것을 검색하기 위해 스마트폰을 사용한다는 것을 의미합니다. 이러한 상승 추세는 온라인 커뮤니티에 큰 비즈니스 기회를 제공합니다.

워드프레스와 반응형 웹

WordPress는 인터넷의 상당 부분을 지원하는 가장 인기 있는 CMS입니다. 강력한 오픈 소스 개발자 및 디자이너 커뮤니티의 지원을 받고 있습니다. 반응형 웹 디자인의 부상으로 많은 유명 테마 개발자가 반응형 디자인으로 전환하고 처음부터 반응형 WordPress 테마를 만드는 데 이상적인 Redux Framework, Carrington Core 및 Bootstrap 과 같은 이해하기 쉬운 프레임워크를 도입했습니다.

부트스트랩이란?

Bootstrap은 모바일 친화적인 프론트 엔드 웹 개발에 사용되는 오픈 소스 프레임워크입니다. 즉, CSS 및 Java Script 기반 디자인 템플릿을 통해 반응형 WordPress 테마를 만드는 데 사용할 수 있습니다.

부트스트랩은 복잡한 웹 애플리케이션을 위한 개발 프로세스를 단순화하는 툴킷입니다. Twitter 개발 팀의 아이디어이며 오픈 소스 커뮤니티에서 사용할 수 있게 되었습니다. 프레임워크는 LessCSS로 코딩된 가벼운 구조로 인해 인기를 얻었습니다.

웹사이트에 부트스트랩을 추가하면 해당 클래스를 호출하여 버튼, 그리드, 테이블, 메뉴 등과 같은 미리 구축된 요소를 추가할 수 있습니다. 마찬가지로 복잡한 미디어 쿼리를 추가하지 않고도 기존 요소를 반응형으로 만들 수 있습니다.

WordPress 부트스트랩 테마 만들기

WordPress 부트스트랩 테마를 만드는 것은 실제로 8단계 프로세스입니다. 좋은 소식은 Bootstrap 기반 테마를 쉽게 구축할 수 있다는 것입니다.

1단계: 부트스트랩 압축 풀기

1. 먼저 도메인에 WordPress를 설치합니다.
2. 부트스트랩을 다운로드하고 압축을 풉니다 .
3. 완료되면 FileZilla와 같은 FTP 클라이언트를 사용하여 연결합니다.
4. wp-content > 테마로 이동합니다.
5. Themes 폴더에 새 폴더를 만들고 이름을 BootSTheme 로 지정합니다. 압축을 푼 부트스트랩의 내용을 이 폴더에 업로드합니다.
6. 거의 모든 WordPress 설치에는 다음 파일이 포함되어 있습니다.

• 바닥글.php
• 헤더.php
• index.php
• 스타일.css

이제 BootSTheme 폴더에 위의 이름으로 4개의 빈 파일을 만듭니다 .

2단계: 부트스트랩 구성

BootSTheme 폴더에서 style.css를 열고 다음 코드를 붙여넣습니다.

 /*
테마 이름: MyTheme
테마 URI: https://cloudways.com
설명: 부트스트랩을 기반으로 하는 Mytheme
버전:1.1
저자: 아산 파웨즈
작성자 URI: https://cloudways.com
*/

기본적으로 테마에 대한 설명과 세부 정보를 제공하는 주석입니다. 테마의 세부 사항을 반영하도록 이러한 주석을 변경하는 것이 좋습니다.

3단계: 코드 복사

이 자습서에서는 Bootstrap 패키지에 제공된 CSS 및 JS 파일을 모두 사용하지 않습니다. 개발 프로세스를 시작하려면 bootstrap.min.css 파일의 코드를 복사하고 style.css 파일에 붙여넣습니다. 이 시점에서 style.css 파일은 다음과 같아야 합니다.

참고: 부트스트랩 웹사이트에서 완전한 축소 CSS 코드 를 얻을 수 있습니다.

4단계: HTML 템플릿 설정

작업할 기본 HTML 템플릿이 필요합니다. 일을 쉽게 하기 위해 이 HTML 테마를 사용하겠습니다. 튜토리얼을 계속하려면 다운로드하는 것이 좋습니다.

WordPress에는 기본적으로 각각 header.php 및 footer.php 파일을 호출하는 내장 함수 get_header() 및 get_footer() 가 있습니다.

HTML 코드를 맨 위에서 첫 번째 컨테이너 div까지 잘라내어 header.php 파일에 붙여넣는 것으로 시작합니다. 파일은 다음과 같습니다.

footer.php 파일에는 나머지 코드가 포함됩니다.

이때 부트스트랩 워드프레스 테마를 업로드하고 활성화하면 index.php에 아무것도 포함되어 있지 않기 때문에 아무것도 표시되지 않습니다.

머리글과 바닥글을 로드하기 위해 WordPress 내장 함수를 사용하여 이러한 요소를 호출합니다. 이를 위해 index.php에 다음 코드를 붙여넣습니다.

 <?php get_header(); ?>

<?php get_footer(); ?>

이제 머리글 및 바닥글 요소가 웹 사이트에 로드되지만 스타일 지정이 없는 기본 페이지가 표시됩니다.

5단계: 머리글 및 바닥글 설정

header.php 파일에서 워드프레스 함수 echo get_stylesheet_uri() 를 사용하여 부트스트랩 스타일시트를 가져올 것입니다(더 자세한 기능은 워드프레스 코덱스 참조 ). 그러면 style.css 를 웹사이트로 가져오고 이제 상단 메뉴 표시줄을 볼 수 있습니다.

header.php 파일 상단에 다음 코드를 추가하여 style.css 를 추가할 수도 있습니다.

 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>"> 

그러나 이것이 전부가 아니며 페이지의 JavaScript 기능이 여전히 작동하지 않으며 드롭다운 메뉴가 표시되지 않습니다. 이를 활성화하기 위해 우리는 footer.php의 URL을 통해 파일을 직접 가져와서 js 파일을 가져올 것입니다. 닫는 본문 태그 앞에 다음 코드를 붙여넣습니다.

 <스크립트 src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

WordPress는 사용자 정의 및 플러그인으로 유명합니다. 플러그인 후크를 배치할 위치를 WordPress에 알리기 위해 <?php wp_head(); 를 붙여넣을 것입니다 . ?> 및 <?php wp_footer(); ?> header.php 및 footer.php 파일에 있습니다. 또한 웹사이트의 동적 제목을 설정하기 위해 wp_title(); <title> 태그 사이의 header.php 파일에 있는 함수.

 <제목><?php wp_title(' | ',true,'right'); ></title>

위의 코드는 게시물 제목을 '|'로 구분하여 호출합니다. 사이트 이름보다 Boolean true 는 제목을 표시합니다. false 로 설정하면 값만 반환하고 표시하지 않습니다. 'right' 는 게시물 제목의 위치를 ​​구분 기호 오른쪽으로 정의합니다.

6단계: 추천 게시물 표시

다음으로 게시물을 동적으로 홈페이지로 호출하고( 에 표시된 대로 ) 상단에 표시합니다(많은 WordPress 기반 사이트에서 볼 수 있는 추천 게시물과 유사).

index.php에 다음 코드를 작성하십시오.

 <?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?>&lt;/p>
</div>

<?php 그 동안; wp_reset_query(); ?>

보시다시피 저는 while 루프를 사용하고 있으며 post_per_page 를 사용하여 게시물 수를 1로 설정하고 있습니다. 이 줄은 페이지 상단에 최신 블로그 게시물만 표시하고 루프가 닫힌 후 query_posts가 재설정됩니다.

jumbotron 클래스는 bootstrap.min.css 파일에 정의되어 있습니다. <h2> 태그와 _permalink(); 를 사용하여 추천 게시물의 스타일을 지정하는 데 사용할 것입니다 . 기능. 게시물 제목에 하이퍼링크가 생성되고 the_permalink(); 함수는 전체 게시물의 URL로 연결됩니다. 게시물의 발췌 부분을 표시하기 위해 다른 내장 WordPress 함수인 the_excerpt();를 사용했습니다.

7단계: 카테고리 나열

이제 홈페이지 왼쪽에 카테고리를 나열하겠습니다. Bootstrap 클래스와 WordPress 함수 wp_list_categories(); .

index.php에 다음 코드를 붙여넣습니다.

 <div class="패널 패널-기본 패널-바디">
<div>
<div>

<울>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

멋진 호버 효과와 함께 이름별로 카테고리가 나열됩니다.

8단계: 최신 게시물 및 작성자 표시

마지막으로 홈페이지에 최신 블로그 포스팅을 보여드리겠습니다. 다른 div 태그를 시작하고 이 div 아래에서 추천 게시물에서 사용한 유사한 while 루프 기술을 사용하지만 query_posts() 로 제한하지 않을 것입니다 . .

 <div>

<?php while(have_posts()) : the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<p> 게시 <?php_author(); ?>

<?php 그 동안; wp_reset_query(); ?>

</div>

워드프레스 함수 the_author() ; 게시물 작성자의 사용자 이름을 가져옵니다. 이를 사용하여 모든 게시물에 작성자 이름을 동적으로 표시할 수 있습니다.

모든 작업을 성공적으로 완료하면 위에 표시된 이미지와 같은 페이지가 표시됩니다.

기존 WordPress 테마에 부트스트랩 추가

반응하지 않는 WordPress 테마를 사용하는 경우 Bootstrap을 추가하여 모바일 친화적으로 만들 수 있습니다. WordPress와 Bootstrap을 두 가지 방법으로 사용할 수 있습니다.

CDN을 사용하여 부트스트랩 추가

header.php 파일에 CDN을 추가하기만 하면 부트스트랩 요소 사용을 시작할 수 있습니다.

참고: 이 방법은 호환성 문제를 일으킬 수 있으므로 다음 코드를 추가하기 전에 전체 백업을 수행해야 합니다.

 <!-- 최신 컴파일 및 축소 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- 최신 컴파일 및 축소된 JavaScript -->
<스크립트 src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

FTP를 사용하거나 플러그인을 사용하여 header.php 파일에 액세스할 수 있습니다. 위의 코드에는 더 나은 성능을 제공하는 CSS 및 JS 파일의 축소 버전이 포함되어 있습니다.

functions.php 내부에 부트스트랩 추가하기

이 방법에서는 Bootstrap 라이브러리를 다운로드해야 합니다. Bootstrap.min.css 파일과 Bootstrap-theme.min.css 파일을 테마 CSS 폴더에 업로드하고 Bootstrap.js 파일을 WordPress 테마의 "js"라는 테마 폴더에 업로드합니다.

이제 functions.php 파일에 액세스하여 이러한 스크립트를 대기열에 넣습니다.

functions.php 파일 안에 다음 코드를 추가하십시오.

 함수 reg_scripts() {
    wp_enqueue_style( '부트스트랩 스타일', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( '부트스트랩 테마 스타일', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( '부트스트랩 스크립트', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

업로드 부분을 건너뛰고 부트스트랩 CDN을 이렇게 직접 대기열에 넣을 수도 있습니다.

 함수 my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( '부트스트랩-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', 거짓, NULL, '모두');

    wp_enqueue_script( '부트스트랩-js' );
    wp_enqueue_style( '부트스트랩-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

파일을 저장하고 서버에 다시 업로드하십시오.

무엇 향후 계획?

이 자습서는 HTML 템플릿에서 기본 WordPress 테마를 만들고 Bootstrap 3.x를 사용하여 반응형으로 만드는 데 주로 중점을 둡니다. 다음 포스트에서는 single.php, front-page.php, functions.php와 같은 페이지를 더 많이 만들 것입니다. 또한 functions.php 파일에서 스타일시트와 자바스크립트를 가져오는 방법도 설명합니다.

도움이 필요한 경우 아래에 의견을 게시하면 다시 연락 드리겠습니다.