wordpress に bootstrap を　導入

１．ローカル環境にwordpressを導入する。

MAMPを使ってローカル環境にWordPressをインストールする方法

上記リンクをそのまんまやる。

２．新しくthemeとして作ったフォルダにbootstrapを突っ込む。

Getting · Bootstrap

上記リンクからダウンロード。左のコンパイルされたやつ。

３．index.php と style.cssを作成する

４．index.phpに書く内容は

Getting · Bootstrap　←のexampleのソースコードをそのまま貼り付ける。

５．index.phpのスタイルシートを読み込んでいるところを下記に置き換え

６．index.phpの</head>直前に以下を挿入

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

７．index.phpの</body>直前に以下を挿入

<?php wp_footer(); ?>

８．style.cssに以下を挿入

@import url('bootstrap/css/bootstrap.min.css');
@import url('bootstrap/css/bootstrap-responsive.min.css');
body {
padding-top: 60px;
padding-bottom: 40px;
}

９．functions.phpに以下を挿入

<?php

function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

これでどうぞ。

うまくいかない場合は下記が挙げられる

・cssが適応されてない

・jqueryが動いていない

・javascriptが動いていない

・wordpress用のphpタグが動いていない

どれかです。

chromeならmore tool -> javascript console でエラーの理由がわかるかも。

not found系ならコードをもっかい見直す。

・二重でjqueryかjavascriptをロードしていないか。

' P '

whatever I will forget

wordpress に bootstrap を　導入