Bootstrap은 이미 완성된 css 코드를 가져와 편하게 사이트에서 적용하기 위해 사용하는 css 프레임워크입니다. Bootstrap 코드를 가져와 웹에서 사용하면 별도의 스타일 코딩 작업이 없어 시간을 단축할 수 있어 효율적입니다.
scss는 css와 완전히 호환되는 스타일시트 언어로 보다 짧게 코드를 입력하고, 넓게 사용이 가능하여 선호하기에 Bootstrap scss를 이용해 워드프레스에서 적용하는 방법을 살펴보겠습니다.
방법은 Bootstrap 소스 파일을 다운로드 한 후 테마 폴더안에 업로드 한 후 functions.php 함수 파일 내에 코드를 등록하면 되는데요. scss는 컴파일링한 css 파일을 functions.php 함수 파일 내에 등록한 후, 이 업로드한 scss 파일을 import하여 사용할 수 있습니다.
cdn 코드를 가져와서 간단하게 사용하는 방법도 있지만 scratch 작업을 할 경우, 파일을 다운로드 하는 방법을 사용하는 것을 권장합니다.
여기에서 Bootstrap Source file을 다운로드합니다.
테마 폴더(루트: wp-content > themes > 해당 테마) 안에 css 폴더를 생성하고 안에 다운로드한 Bootstrap 폴더를 업로드합니다.
코드 편집기를 이용해 css 폴더 내에 main.scss 파일을 생성한 후 Live Savss Compiler 별도의 플러그인을 검색한 후 설치해 줍니다. 이 플러그인을 이용해 scss를 css로 컴파일링합니다.
필자는 코드 편집기로 무료인 Visual Studio Code를 사용합니다.
하단에 Watch Sass를 클릭하여 컴파일링 작업이 실행되어 같은 위치에 main.css, main.css.map 파일이 자동 생성됩니다.
functions.php 파일 내에서 **Enqueue scripts and styles. 를 찾아 테마명_scripts() 함수 안에 아래 코드를 추가합니다. 이 함수는 script와 style 적용을 위해 생성된 함수이므로 여기에 추가하면 등록이 됩니다.
wp_enqueue_style( 'custom3-main', get_template_directory_uri() . '/css/main.css' );
Bootstrap scss 코드 사용을 위해서는 업로드한 폴더를 main.scss 폴더에서 importing 하는데요. 코드는 Bootstrap 사이트 > Customize > Sass의 Importing 섹션에서 가져옵니다.
main.scss 파일 내 최상단에 아래 코드를 입력합니다.
@import "업로드한 scss bootsrap 폴더(경로 맞게)"
상단에서 설치한 complier 플러그인이 자동으로 컴파일링을 하면서 main.css 파일에 bootstrap css 코드가 불러와집니다.
이 파일의 크기는 272kb로 많은 용량을 차지하지는 않음을 알 수 있습니다.
import 후 테스트를 위해 import 코드 상단에 custom 코드를 추가한 후 사이트에 정상적으로 적용된 것을 알 수 있습니다.
