워드프레스 테마 만들기 ② 스크립트 엔큐 wp_enqueue_scripts

안녕하세요. 이번시간에는 새롭게 워드프레스 테마를 부트스트랩을 이용해서 만드는 방법에 대해서 소개하고 있습니다. 이번시간에는 스타일을 엔큐하는 방법에 대해 알아보겠습니다.

스타일 엔큐

엔큐는 큐(대기)에 올려놓는다는 의미로 항시 대기를 시켜둔다는 뜻인데요. 그때 그때 읽어 들이기에는 너무 자주 쓰거나 혹은 용량이 큰 화일의 경우 엔큐를 해 두고 사용하는 의미입니다. 

엔큐를 하는 화일들은 그만큼 중요한 화일들이라고도 할 수 있겠네요. 워드프레스 테마 만들기에서 엔큐할 기본적인 화일은 아래와 같습니다. 

style 화일
js 화일 
jquery 화일

functions.php 를 열고 아래와 같이 입력을 합니다.

<?php

function load_stylesheets()
{
    // false 로 head 에서 실행하도록 해줌
    wp_register_style('bootstrap', get_template_directory_uri().'/css/bootstrap.min.css', array(), false, 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('style', get_template_directory_uri().'/style.css', array(), false, 'all');
    wp_enqueue_style('style');

}

add_action('wp_enqueue_scripts', 'load_stylesheets');


function include_jquery()
{
    //혹시 다른 제이쿼리가 있을 수 있으니 deregister 
    wp_deregister_script('jquery');
    // true 로 html 밑부분에서 실행하도록 해줌
    wp_enqueue_script('jquery', get_template_directory_uri().'/js/jquery-3.6.0.min.js', '', 1, true);
    
    add_action('wp_enqueue_scripts', 'jquery');


}

add_action('wp_enqueue_scripts', 'include_jquery');


function loadjs()

{

    wp_register_script('customjs', get_template_directory_uri().'/js/scripts.js', '', 1, true);
    wp_enqueue_script('customjs');


}

add_action('wp_enqueue_scripts', 'loadjs');

add_theme_support('menus');

register_nav_menus(

    array (

        'top-menu' => __('Top Menu', 'theme'),
        'footer-menu' => __('Footer Menu', 'theme'),
    )
);

 

1. function load_stylesheets()

function load_stylesheets() 첫번째 부트스트랩의 스타일 시트를 기본으로 사용을 하고, 두번째 스타일화일을 사용해서 커스텀을 합니다. 

여기서 중요한 것은 기술 순서인데, 부트스트랩을 먼저 엔큐하고 다음에 자기의 스타일화일이 엔큐되도록 합니다. 반대로 하면 커스텀한 스타일이 부트스트랩 스타일에 의해 덮혀써져 (오버라이드) 기능하지 못하게 됩니다.

함수를 만들어 주었다면, 

add_action('wp_enqueue_scripts', 'load_stylesheets');

명령으로 실행해 주는 것을 잊지 않도록 합니다.

2. function include_jquery()

function include_jquery() 로는 제이쿼리를 포함시키는 엔큐를 실행합니다. 제이쿼리는 아래링크에서 다운로드를 해서, 새로운 테마의 js 폴더 안에 넣어 두도록 합니다.

Download jQuery | jQuery

3. function loadjs()

커스텀할 scripts.js화일을 js폴더에 넣어두고 엔큐해 줍니다. 그러면 간단하게 두고두고 편집하며 울궈먹을 수 있게 됩니다.