markdown 实现Twitter Bootstrap di WordPress主题melalui主题的功能文件。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 实现Twitter Bootstrap di WordPress主题melalui主题的功能文件。相关的知识，希望对你有一定的参考价值。
# 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.
```html
<!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`
```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
<?php get_header(); ?>
# WordPress Loop
<!-- Displaying content -->
# End of WordPress Loop
<?php get_footer(); ?>
```
**Template File `footer.php`**
contoh file `footer.php`
```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`**
```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
- Twitter Bootstrap v4.0.0-beta2 https://getbootstrap.com/
- Material Design Iconic Font http://zavoloklom.github.io/material-design-iconic-font/examples.html#larger
以上是关于markdown 实现Twitter Bootstrap di WordPress主题melalui主题的功能文件。的主要内容，如果未能解决你的问题，请参考以下文章
如何将 twitter bootstrap modal 设置得越来越宽？
markdown 设置WP / ACF / Timber Twitter分享链接