Kako povezati Bootstrap sa WordPress temom

Uvod

U ovom kratkom uputstvu ćemo pokazati kako povezati Bootstrap sa WordPress temom. Postoje tri standardna načina na koji možete povezati Bootstrap, ali ovde ćemo pokazati samo dva. Način koji ćemo izostaviti podrazumeva upotrebu plugin-a.

Način 1: Dodavanje Bootstrap-a povezivanjem na CDN

Prvi način za povezivanje Bootstrap-a sa WordPress temom jeste dodavanjem Bootstrap CDN-a u vaš functions.php  fajl. Vi verovatno već pozivate vaše .js i .css fajlove u istim ili odvojenim funkcijama, što može izgledati ovako:

function your_script_enqueue() {
    wp_enqueue_style( 'customstyle', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');
    wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' );
}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );

Po analogiji, dodajemo linkove sa Bootstrap CDN-a (CSS i JavaScript fajlove).Vrlo je važno da Bootstrap fajlove postavite iznad vaših. Bootstrap stilovi biće prvi učitani, a vi ćete biti u mogućnosti da ih pregazite vašim, ukoliko to budete želeli.

U ovom primeru koristimo verziju 4.1.1 (trenutna verzija u trenutku pisanja artikla). Najnovije verzije možete pronaći na Bootstrap Getting Started stranici.

function your_script_enqueue() {
   wp_enqueue_script( 'bootstrap_js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'), NULL, true );
   
   wp_enqueue_style( 'bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css', false, NULL, 'all' );
   wp_enqueue_style( 'custom_style', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');
 
   wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' ); 
}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );

Više o tome kako uključiti CSS & JavaScript fajlove u WordPress temu možete pronaći u WordPress dokumentaciji, ali hajde da objasnimo metode koje smo koristili iznad:

• wp_enqueue_style():  unosi i učitava stylesheet fajl prosleđen kao parametar.
• wp_enqueue_script():  unosi i učitava script fajl.
• get_template_directory_uri(): vraća URI direktorijuma aktivne teme.
• add_action('wp_enqueue_scripts', ''):  povezuje naše funkcije unutar wp_enqueue_scripts akcije.

Način 2: Smeštanje Bootstrap fajlova unutar WordPress teme

Procedura je skoro pa identična, jedina razlika je u tome što u ovom primeru Bootstrap fajlove smeštamo direktno unutar teme.

Prvo što moramo da uradimo je ste da pokupimo Bootstrap ZIP dajl, sa onog istog izvora koji spo pomenuli gore (Bootstrap Getting Started) a zatim da kopiramo fajlove unutar teme. Ako ste jedan od onih koji vole da sve bude organizovano, onda verovatno već imate posebne foldere u koje smeštate vaše stilove i skripte. Sada je samo potrebno da odogavarujće Bootstrap fajlove smestite u njih.

Pođimo od pretpostavke da imate  /css/ i /js/ foldere. Kopirajte  bootstrap.min.css u /css/ folder i bootstrap.min.js u /js/ folder.

Podešavanje je identično kao u primeru iznad, samo što sada ukazujemo na Bootstrap fajlove unutar naše teme (ukazujemo na odgovarajuće foldere):

function your_script_enqueue() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );

    wp_enqueue_style( 'custom_style', get_template_directory_uri() . '/css/your_style.css', array(), '1.0.0', 'all');
    wp_enqueue_script( 'custom_js', get_template_directory_uri() . '/js/custom.js' );
}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );

wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');

To je to! Sada vaša tema može da pristupi Bootstrap komponentama i da ih koristi po želji. Možda vam se svidi članak kako da Napravite svoj Bootstrap Social Sharing Plugin, pa bacite pogled.