目次
リニューアルに向けての課題作り
今回のリニューアルに伴っていくつかの絶対項目を築きました。
その中でも考えなければいけないのが
- トレンドと言われていた事柄を標準化すること
- そしてStingerやGushからの脱却ということ
- 自身の物差しになるものを製作する
- スマホ、タブレットに完全対応する
- 製作日数の短縮化を課する
- なるべくplug-inを使わずできるだけfunction.phpに書き込む
- template.php書類を減らす（分岐を使う）
と言ったところです。
WordPressを使ってプロ的制作者としての顔を作らなければならないと言う事です！
この中でも一番は製作日数の短縮化です。
スマホ・タブレット対応があると兎に角シコシコ一つずつCSS書いていくのがイマイチ良くないと・・・。
そこで導入したのがBootStrapです。
もう・・・手放せませんｗ。
コーディングのスピードもさることながら兎に角速くスマホ・タブレットに対応が出来るという強み。
これを基本にするためにはplug-inだったりThemeでダウンロード出来たりはあるのですが、ここは位置から組んでみたかった・・・。
そして、BootStrapの標準の12カラムでは自由が効かないと言う事でカスタマイズも含み組み込みたかったわけです。
BootStrapの基本概念
日本でもかなり流行っているBootStrapですが、ググって見るとかなり偏った情報が多かった・・・。
まず「BootStrapで作ると必ずフラットデザイン」とか「同じモノが出来やすい」とか・・・。
私がベースに製作しましたが全くそんなことありませんｗ。
確かにテンプレートにあるものだけを使っていけばそうなる可能性は大いにあります。
ただ、デザインを考えて制作していけばその様なことはまずあり得ないと言う事です。
WebFontの使い方次第でも色々変化が見えるので一概には言えないと言う事です。
BootStrapを始めるにはまず必要なテンプレートや書類を用意します。
ここのサイトが一番役に立ちました。
Bootstrap3移行ガイド
http://cccabinet.jpn.org/bootstrap3/
BootStrapの日本語教科書的なサイトです。
これが無かったら本当に大変ですｗ。素晴らしいサイトです！
ここの言うとおりに初めて行けばかなりのことが出来る様になります！
WordPress+BootStrap化に必要なソースの記述例
まず基本はStinger5を見本に作って行きました。
Stingerからの脱却と言う事でしたがやはりSEOに強いStingerです。
ソースはかなりまとめられていて本当にいいThemeです。
勉強の為と言う事で参考にさせてもらいました。
BootStrap化のソース的に必要な部分はこちらでしょうか・・・。
<meta charset="<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen,print" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/javascripts/modernizr.custom.js"></script>
これは最初に記述するものですが、Wordpressで実際に記述しているものです。
meta情報とstyle情報とIE対策JSです。
ここで重要なのがBootStrapのstyleを先に読ませると言う事です。
というのもBootStrapのCSS記述を上書きして言う事を聞かせると言う事がかなり重要です。
本当は元を弄っていけば速いと思われがちですが、scssか本サイトのCSSカスタマイズでないとBootStrapカスタマイズは不可能です。
途中でBootStrapの根幹を変更しなければならない場合やVersionUpがあった場合に元のCSSを書き換えているとどこを弄ったか分からなくなると意味がありません。
古いまま使うのは先々制作者としては宜しくない状況に陥る可能性があるからです。
なので「bootstrap.css」の後で「style.css」で成形し直す事が重要です。
尚かつscssで記述をしていく場合この方がコンパイルも軽くて速く製作出来るメリットもあると考えています。
そして「modernizr.custom.js」はFooterで読み込ませるよりもheaderの方が良いようです。
これは何故かと問われるとまだ勉強中なのでお答えできませんｗ。
多分IE用jsを読み込んだすぐ後にmodernizr.custom.jsがあった方が機能的にも良いのでしょう・・・としか言えませんｗ。
次にタイトルはmetaとcssの間で読み込ませれば良いでしょう。
記述が長くなるので割愛しました。
BootStrapをカスタマイズしよう！
今回scssで製作しています。
scssを使うための環境作りは次回の講釈にさせて頂きます。
まずこれが重要です！
BootStrapの標準12カラムを24カラムにカスタムする！
scssが使えない場合こちらで変更します。
Customize and download
http://getbootstrap.com/customize/
本家にあるカスタマイズダウンローダーです。
ここにある次の部分を変更すれば24カラムに変更出来ます。
上記画像にあるGrid systemの「@grid-columns」を12から24に変更するだけです。
何故24カラムにする必要があったかなのですが、簡単な理由です。
例えばwidth1200pxのサイトの場合12カラムですと1カラム当たり100px計算となります。
これだと350pxのサイドバーとかに対応するにはmarginを50pxプラスマイナスしなければなりません。
多分記述はこうなるでしょう。
<div class="col-sm-4">sidebar</div>
.col-sm.4 {
margin: -50px;
}
とこんな感じでしょうか。
これを毎回記述するのも大変ですし、結局cssの記述量が増えるだけです。
では24カラムだと。
<div class="col-sm-8">sidebar</div>
これだけですｗ。
簡単でしょ？
CSSの記述量が激減することがお分かりになったと思います。
24カラム化する理由です。
containerの横幅を変更する
これも気をつけなければならない部分です。
BootStrapの最大幅は約1140pxです。
例えばこれを1200pxとか1300pxに変更する場合先程のGrid systemの上下にある項目が重要になります。
Container sizes
「@container-large-desktop」の数値を変更すれば最大幅を指定出来ます。
・・・なのですが、実はこの部分だけを変更しても少々問題が生じます。
というのも下記の項目がとても重要になってくるからです。
Media queries breakpoints
実はスマホやタブレットの表示タイミングと申しましょうか、表示の切り替わりポイントのブレークポイントを設定し直さないと幅を縮めたりすると動きがカクカクになることがままあります。
そして「md」の幅と「lg」の幅がかなり曲者なのです。
企業系サイトを製作する場合、横幅の固定を行わなければなりません。
見え方には非常にナーバスになるからです。
なので、私の場合この「md」の幅と「lg」の幅は同じ数値にする事が重要でアリ、尚かつ簡単でスピード製作がやりやすい環境になると考えています。
BootStrapの場合 スマホ → タブレット縦 → タブレット横 → PC標準 → PCフルスクリーン と５つの表示幅になっているんです。
これ意外に大変な事がお分かりになるでしょうか・・・。
タブレットは横と縦があり、PCはフルスクリーンで見る場合と非フルスクリーンで表示する人がいると言う事です。
この場合タブレットは2つCSSを書いた方が良いと言う事です。出来ればです！
結構縦と横で崩れます。
その上PC標準とフルスクリーンがあると考えると・・・とても製作スピードが上がることはありませんｗ。
なのでPCの方を一つにまとめるという発想に行き着きました！
・・・実はこれ・・・物凄く楽になりますｗ。
十分なんです、クライアントにとっては・・・。
フルスクリーンは意味が無いんです！
BootStrapは便利ではありますが、表示幅で結構やられますｗ。
できたーっってなった後、フルスクリーンにしたら崩れるんですｗ。
実際たまらんと言うのが正直な感想です。
是非皆さんもここを弄ってPCサイズを固定化することをオススメします！
WordPressはplug-inがとても便利です。
今回もplug-inを極力使いたく無かったのですが、機能的にどうしても入れておかなければならないモノは存在するのです。
実際このサイトでは使ってる使ってないを含めて３０のplug-inを使っています。
ほとんど管理画面のものですが、表示用でも使うと便利なモノがかなり多いモノでｗ。
しかもplug-inの方が処理速度が速いモノまであります。
一概には言えない部分は実装していると言う事です。
さて、JavaScriptですが、今回は色々試してみました。
通常のhtmlではFooterにJavaScriptを置く場合はそのまま記述しますが、WordPressではfunction.phpで管理するのが便利だと言う事です。
で、今回jQueryのVersionをWordPress標準のものから2.0.3に引き上げています。
記述はこうです。
/*--------------------------------------------------------
JQueryを最新版に置換
--------------------------------------------------------*/
function load_cdn() {
if ( !is_admin() ) {
wp_deregister_script('jquery'); // 同梱のJQueryを読み込ませない
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', array(), NULL,true); //Google CDNのJQueryの登録
wp_enqueue_script('jquery'); //登録したJQueryをフックさせる
}
}
add_action('init', 'load_cdn');/*
まずWordPress標準のものをキャンセルし、新たなjQueryをCDNで呼び込み同じ場所に設置するというものです。
参考サイト：http://marubon.info/method-speed-up-display-of-web-site-with-wordpress-jquery-load-position-optimization-4330/
参考サイトを色々試して、上記の記述で落ち着きました。
最初は何度やってもheaderに記述されましたが、「true」の位置を色々試した結果、この記述だとFooterに表示される様になったわけです。
次に他のJavaScriptを読み込ませます。
--------------------------------------------------------
JSの管理
--------------------------------------------------------*/
if (!is_admin()) {
function register_script(){
wp_register_script('bootstrap', get_bloginfo('template_directory').'/javascripts/bootstrap.min.js');
wp_register_script('easing', get_bloginfo('template_directory').'/javascripts/jquery.easing.min.js');
wp_register_script('scrolling', get_bloginfo('template_directory').'/javascripts/scrolling-nav.js');
wp_register_script('classie', get_bloginfo('template_directory').'/javascripts/classie.js');
wp_register_script('parallax', get_bloginfo('template_directory').'/javascripts/parallax.js');
wp_register_script('tqs', get_bloginfo('template_directory').'/javascripts/tqs.js');
wp_register_script('lightbox', get_bloginfo('template_directory').'/javascripts/html5lightbox.js');
wp_register_script('parser', '//cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.3.1/purl.min.js');
wp_register_script('ajaxzip3', '//ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js');
}
function add_script() {
register_script();
wp_enqueue_script('bootstrap');
wp_enqueue_script('easing');
wp_enqueue_script('scrolling');
wp_enqueue_script('classie');
if(wp_is_mobile())
{
// (タブレット・スマホ・ガラケーから閲覧された場合の処理)
}
else
{
wp_enqueue_script('parallax');
}
wp_enqueue_script('tqs');
wp_enqueue_script('lightbox');
wp_enqueue_script('parser');
wp_enqueue_script('ajaxzip3');
}
// add_action('wp_print_scripts', 'add_script',10);
add_action('wp_print_footer_scripts', 'add_script',11);
}
上記は実際本サイトで読ませているJavaScriptです。
Parallaxだけスマホ・タブレットでは重すぎるScriptのためキャンセルするように記述しています。
使うページにだけ使うJSに分岐をかけていきたいのですが、それは後日やっていくと言う事でｗ。
で、ここで何度やってもFooterに読んでくれなかった障害に当たりました。
最終的にこれが解決策でした。
「add_action(‘wp_print_footer_scripts’, ‘add_script’,11);」
最終行のものですが、「wp_print_footer_scripts」でFooterに読ませているのですが、通常Footerにある「」で読まれるはずなのですが何故か読まれません・・・。
悩んだ末こうしました！
「」を下に記述しました。
で、問題無く読み込まれました！！
色々試行錯誤と言う事ですが、標準でダメであれば迂回路を探すのが得策です。
読めていれば良いんですｗ。
jsをFooterに置くわけは、js同士干渉で当たってしまうときがままあります。
その時順番を入れ替えたり、headerに持っていったりすると解決することが多数あるわけです。
headerにありすぎると読み込みが遅くなる原因でもあるので、最初からFooterに置くことを前提に組み込んでいるわけです。
大体これで当たることはほとんどありません。
WordPress+BootStrap化の後書き
さてさて、簡単ではありますが以上でWordPress+BootStrap化の初期設定の説明でした。
ものっすごく簡単ですｗ。
次回はソース編になります。
CSSも含めてどうすれば簡単にBootStrap化出来るかを解説していきたいと思います。