このたび、ホームページをリニューアルいたしました！勉強がてら、話題のBootstrapを利用して一からテーマ自作しております。Wordpress標準のテーマもいいのですが、スタイルが複雑すぎてカスタムにいつも時間がかかる・・・ならば、いっそ、全部作ってしまえ！！という力技！！！
今回のリニューアルで触ったWordpress + 自作テーマ + Bootstrapの中で、「お、これは！」と思った点をつらつらと書いてみます。
①BootstrapをWordpressに導入するプラグイン「WordPress Twitter Bootstrap CSS」
Bootstrap一式をWordpress内に配置して、手書きで取り込んでもいいのですが、アップデートが面倒だなー、と思い、導入しました！
インストール後、CSSを有効にするよう設定をお忘れなく。
今回、テーマを自作するにあたり、管理画面の情報（設定、プラグイン等）を反映するトリガーも調べたのですが、何のことはない、wp_head()でいいですね。
②BootstrapのnavbarとWordpressのメニュー
はまりました。Bootstrapのnavbarは箇条書き（ulタグ）のリンクをクラス指定してやることでグローバルナビにしてくれるという機能です。テーマを自作する以上、メニューの部分も作りこまなくてはならない、ならBootstrapだ！ということで取り組んだのですが。。。
WordPressのメニュー表示には、（いろいろ設定した上で）wp_nav_menu関数を使うことになるのですが、素直に使うと、出力されるulタグにクラスを指定できない。。。あーだーこーだーリサーチ アンド トライ アンド エラーを繰り返して、以下のコードで無事表示できました
<?php wp_nav_menu (array ( ‘container’ => ‘ul’, ‘menu_class’ => ‘nav navbar-nav’, ‘theme_location’ => ‘primary’)); ?>
containerにdivが表示されていたのをulに変更して、そこにBootstrapのnavbarを示すクラス、nav, navbar-navを指定した形です。
③前の投稿、後ろの投稿
WordPress標準のテーマだと、前の投稿、後ろの投稿なんてリンクが表示されますが、自作テーマであれば、これもまた作りこむ必要があります。といってもそれぞれ一関数ですみます。
// 前の投稿
previous_post_link(“<button class=’btn btn-info pull-left’>前：%link</button>\”);
// 後ろの投稿
next_post_link(“<button class=’btn btn-info pull-right’>次：%link</button>”);
今回は、リンクをBootstrapのボタンで囲んで、それっぽくしてみました。この記事一番下をご覧ください。
Bootstrapは今回、初導入だったのですが、なかなか簡単に、それっぽくなるので、デザイン苦手な人にはうれしいですね！各所でいわれているように”似たような”デザインになってしまうので、どうやって特徴を出していくか、まだまだ研鑽が必要です！！