워드프레스에서 Bootstrap 사용

워드프레스에서 Bootstrap을 사용하려면 Bootstrap 파일을 다운로드하여 테마 폴더 아래에 업로드한 후에 함수 파일에 js 파일과 css 파일을 등록시켜주면 됩니다.

예를 들어, 테마 폴더 내의 js 폴더 아래에 bootstrap 폴더를 업로드한 경우 다음과 같이 bootstrap js 파일과 css 파일을 등록(후크)시킬 수 있습니다.

function wpt_register_js() {
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap/js/bootstrap.min.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . ''/js/bootstrap/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

"Learn Bootstrap Part 2: Adding Bootstrap to WordPress"이라는 글에서 이 과정이 자세히 설명되어 있습니다.

참고로 Bootstrap의 메뉴를 활용하기 위해 인터넷에서 검색되는 몇 가지 코드를 테스트해보았습니다. 하지만 대부분 이전 버전의 Bootstrap용이라서 최근 버전과는 호환이 잘 안 되네요. 예를 들어 이 글을 참고로 Bootstrap 메뉴를 적용해보면 드롭다운 메뉴가 작동하지 않습니다. 이 문제가 글에도 언급되어 있네요.

2012 테마에 적용해보면 메뉴가 기본 메뉴보다 스타일리쉬하게 바뀌는 것을 확인해 볼 수 있습니다. 시간이 날 때 드롭다운 메뉴를 제대로 작동하도록 하는 방법에 대해 검색해볼까 생각 중입니다.

테마 중에서도 Bootstrap으로 구현된 것이 많은데, 여기에서 Bootstrap으로 구현된 워드프레스 테마를 확인해볼 수 있습니다.

관심이 있는 분은 이 글을 참고로 Bootstrap을 워드프레스에 설치하여 활용해보아도 괜찮을 것 같습니다.

추가: 부트스트랩을 사용하지 않는 것이 최근 추세 같습니다. 부트스트랩이 한 때 유행했지만 붕어빵을 찍어내는 듯한 몰개성(沒個性), 무거움 등으로 인해 사용하지 않을 것을 권장하네요. 여기에 대한 내용은 다음 글을 참고해보세요.

• 내가 부트스트랩을 쓰지 않는 이유
• 부트스트랩은 과연 백해무익한 것 일까?