tajidyakub
10/26/2017 - 1:24 PM

Implementasi Twitter Bootstrap di WordPress Themes melalui Theme's functions file.

Implementasi Twitter Bootstrap di WordPress Themes melalui Theme's functions file.

twitter-bootstrap-via-functions.php.md
content_copyfile_download
  • Rendered
  • Source

Twitter Bootstrap di WordPress Theme melalui Theme's function file

Implementasi twitter bootstrap di halaman HTML membutuhkan elemen sebagai berikut;

  • Deklarasi charset di meta
  • Definisi viewport juga di meta
  • Link ke stylesheet external milik bootstrap
  • Link ke file jquery.slim
  • Link ke file popper.js/umd
  • Link ke file javascript bootstrap

Sebagai tambahan, kerangka file html yang siap digunakan untuk mengembangkan Template WordPress ini akan mengimplementasikan Material Design Iconic Font yang dapat dipelajari melalui link di bawah.

  • Link ke file css MDIF

Starter Template Bootstrap

Pemanfaatan bootstrap menggunakan CDN dalam format minimal.

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

Untuk charset dan viewport tetap di file template, biasanya header.php. Sementara untuk style css dan javascript akan dimasukkan melalui file functions.php

Template File header.php Contoh header.php

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?php wp_head(); ?>
   </head>
   <body>
  <!-- Navigation Bar -->
   <header>
      <?php get_template_part( 'partials/navigation', 'top' ); ?>
    </header>

Navbar, Navigasi utama berada di dalam file navigation-top.php yang berada di dalam direktori partials/

Template File single.php contoh file single.php

<?php get_header(); ?>
# WordPress Loop
<!-- Displaying content -->
# End of WordPress Loop
<?php get_footer(); ?>

Template File footer.php contoh file footer.php

  
  <?php wp_footer(); ?>
  </body>
</html>

Themes Functions file

Fungsi wp_head() dan wp_footer() yang dipanggil di header dan di footer memungkinkan kita untuk memasukkan style css dan script melalui functions.php sebagai-berikut;

Theme's function file functions.php

/**
 * Enqueue scripts and styles.
 */
function justthat_scripts() {
    wp_enqueue_style( 'justthat-style', get_stylesheet_uri() );
    wp_enqueue_style( 'justthat-bootstrapcss', get_template_directory_uri() . '/bootstrap/dist/css/bootstrap.min.css' );
    wp_enqueue_style( 'justthat-iconifontcss', get_template_directory_uri() . '/css/material-design-iconic-font.min.css' );
    wp_enqueue_style( 'justthat-themescss', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_script( 'justthat-jqueryjs', get_template_directory_uri() . '/jquery/dist/jquery.slim.min.js', array(), 'version', true );
    wp_enqueue_script( 'justthat-popperjs', get_template_directory_uri() . '/popper.js/dist/umd/popper.min.js', array(), 'version', true );
    wp_enqueue_script( 'justthat-bootstrapjs', get_template_directory_uri() . '/bootstrap/dist/js/bootstrap.min.js', array(), '4.0.0-beta2', true );
    wp_enqueue_script( 'justthat-script', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'justthat_scripts' );

Fungsi justthat_scripts() tersebut juga memanggil file javascript yang bernama script.js untuk kita memasukkan fungsi javascript kita sendiri untuk costumasi template yang sedang kita kembangkan.

Link