bootstrap template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
사이트에서 제공하는 bootstrap 기본 구조입니다.
위의 구조를 참고 해서 zeein-yellow 테마에 적용 하도록 하겠습니다.
functions.php 파일 수정
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| if ( ! function_exists( 'zeein_yellow_setup' ) ) : | |
| function zeein_yellow_setup() { | |
| register_nav_menus( array( | |
| 'primary' => esc_html__( 'Primary', 'zeein-yellow'), | |
| ) ); | |
| } | |
| endif; | |
| add_action( 'after_setup_theme', 'zeein_yellow_setup' ); | |
| function zeein_yellow_scripts() { | |
| // css | |
| // style.css | |
| wp_enqueue_style( 'zeein-yellow-style', get_stylesheet_uri() ); | |
| // css: bootstrap | |
| wp_enqueue_style( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css', array(), 'v4.0.0.beta2' ); | |
| // script | |
| // jquery | |
| wp_enqueue_script( 'zeein-jquery.min', get_stylesheet_directory_uri() . '/assets/js/jquery-3.2.1.min.js', array(), 'v3.2.1', false ); | |
| // bootstrap | |
| wp_enqueue_script( 'zeein-popper.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/popper.min.js', array(), 'v 1.12.3', true ); | |
| wp_enqueue_script( 'zeein-bootstrap.min', get_stylesheet_directory_uri() . '/assets/bootstrap-4.0.0-beta.2-dist/js/bootstrap.min.js', array(), 'v4.0.0.beta2', true ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'zeein_yellow_scripts' ); | |
| ?> |
14: style.css [ 기본 css 파일 ]
17: bootstrap.min.css [ bootstrap ]
21: jquery-3.2.1.min.js [ jQuery]
24: popper.min.js [ bootstrap ]
25: bootstrap.min.js [ bootstrap ]
- wp_enqueue_style() : style 파일을 등록
- wp_enqueue_script( ) : script 파일을 등록
오타나 오류 없이 제대로 functions.php 파일을 수정 했다면 아래와 같은 화면을 보실 수 있습니다.
WOW 두번째 걸음을 다시 한번 축하 드립니다!!
여기서 한가지 중요한 것은 위의 창에서 zeein 은 홈으로 가는 사이트 주소 이고 안녕하세요!는 페이지 링크입니다.
우리가 현재 만든 테마에는 index.php 파일만 만들었는데 안녕하세요!라는 페이지를 클릭해도 아무 오류 없이 사이트가 정상적으로 작동하고 있는 것입니다.
url 사이트 주소를 봐도 분명히 바뀌었는데 왜 오류 없이 나올까요?
왜? 왜? 왜?
Site link