プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【wordpress】 BootStrapを使ってwordpressテーマを自作する方法1

  • 2017年5月13日
  • 2017年7月1日
  • wordpress
  • 643view
  • 1件

wordpressテーマを自作するときもbootstrapが使えれば楽だなと思い、wordpress用のBootStrapの設定をメモ。

準備

wordpressテーマの準備

FTPソフトを使い、wp-content >> themesに任意の名前でフォルダを作成。
その中にとりあえずindex.php,style.css,functions.phpを作成。

BootStrapファイルの配置

解凍したBootStrapのフォルダを、フォルダごとテーマ(index.phpがある階層)が入ったディレクトリに入れる

BootStrapファイルの読み込み

wordpress管理画面 >> 外観 >> テーマの編集 >> functions.php
WordPressのテーマにBootstrapのファイルを読み込むために以下を追記。
読み込むファイルはbootstrap.min.css,bootstrap.min.jsの2つ。

// Bootstrapの読み込み
function my_bootstrap_scripts() {

wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');

wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'my_bootstrap_scripts' );

index.phpの中身

ブートストラップ(Bootstrap)まずは基本の使い方で記述したindex.htmlの内容をindex.phpに書く。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

index.phpをwordpress用に書き換える

head~/headの間

function.phpに書いた内容と重複する部分を削除する。
前項の内容から最低限の項目をwordpress関数に書き換える。
head直前とbody直前にwordpressのphpを追加する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php bloginfo(' name '); ?></title>
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- 追加のCSSの読み込み -->
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
    <?php wp_head(); ?>
  </head>
  <body>
    <h1>Hello, world!</h1>
  <?php wp_footer(); ?>
  </body>
</html>

body~/bodyの間に大まかな要素を書く

<body>
<!-- ナビゲーションメニューの配置 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav><!-- ナビゲーションメニューここまで -->

<!-- ヘッダー部分の追加 -->
<header>
  <div class="container">
    <h1><a href="<?php bloginfo('url') ?>"><?php bloginfo(' name '); ?></a></h1>
    <h2><small><?php bloginfo( 'description' ); ?></small></h2>
  </div>
</header><!-- ヘッダーここまで -->

<!-- セクション部分の追加 -->
<section>
</section><!-- セクションここまで -->

<!-- アーティクル部分の追加 -->
<article>
</article><!-- アーティクルここまで -->

<!-- サイドバー部分の追加 -->
<aside>
</aside><!-- サイドバーここまで -->

<!-- フッター部分の追加 -->
<footer>
</footer><!-- フッターここまで -->
<?php wp_footer(); ?>
</body>

jQueryが動かない場合

htmlでは動くのにwordpress上で動かない現象が起きたが、

<?php wp_head(); ?>
<?php wp_footer(); ?>

を正しい場所に配置したら直った

それでもjQueryが動かない場合

wordpress管理画面 >> 外観 >> テーマの編集 >> functions.php
function.php内を以下に書き換える

// jQuery の読み込み
    function add_my_scripts() {  
      if(is_admin()) return; //管理画面にはスクリプトは追加しない
      wp_deregister_script( 'jquery');  //デフォルトの jQuery は読み込まない
      //CDN から読み込む
      wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), '1.10.2', false);
      wp_enqueue_script( 'jquery-mig', '//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js', array(), '1.2.1', false);  
    }
    add_action('wp_enqueue_scripts', 'add_my_scripts');

head~headまでの間

<?php 
//以下は<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />の記述の代わり
if (isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
    header('X-UA-Compatible: IE=edge,chrome=1');
?>
<!doctype html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('|', true, 'right'); bloginfo('name');?></title>
<!--bootstrap.min.cssの読み込み-->
<link href="<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- 追加のCSSの読み込み -->
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <?php wp_head(); ?>
  </head>

footer下

    <!--bootstrap.min.jsの読み込み-->
    <script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.min.js"></script>