wp-bootstrapで改造したところ

公開日 : 最終更新日 :

カテゴリー :

「WordPressでやったこと」の続きになります。
前回は、WordPressで導入したテンプレートのベースであるwp-bootstrapについて紹介しました。今回は、ベースとなったwp-bootstrapに変えたところを紹介します。

wp-bootstrapについて

まずwp-bootstrapは、最新のBootstrapに対応してませんでした。なのでまずはBootstrapを最新のものにしました。wp-bootstrapで対応しているBootstrapのバージョンは2.1.1で現在のバージョンは2.3(僕が対応させたときは、2.2.2でした)です。変えたファイルはLESS一式とJS一式です。

Bootstrapを最新に対応させたところで、次にwp-bootstrapで必要ないファイルやコードを削除しました。主に削除したのは管理画面系で動くファイルやそれらを動かす部分のコードをまるごと削除しました。これらのファイルは、テンプレートを直接いじりますし、いじったあとは管理画面で変更したりしないからです。(ただし、ウィジェットやメニューは除く)ただこれをやるには、PHPの知識やWordPressの知識が必要で、テンプレートファイルの構造やPHPのコードがよくわからないかたはやらないほうがいいです。聞かれても答えきれないので…

Font Awesomeについて

次にFont Awesomeというアイコンフォントを組み込んでいます。Bootstrapで使われているアイコンは普通の画像ファイルを結合したものですが、Font Awesomeは、アイコンの形をしたフォントを使用しています。なぜFont Awesomeにしたかというとbootstrap標準のアイコン画像だと拡大したときに形がボケたり汚くなるのですが、アイコンだと綺麗に表示できます。またbootstrap標準で対応しているアイコン数もFontawesomeのアイコン数が多いというのもあります。アイコンの種類を増やしたい場合、Font AwesomeやFontAwesome以上にあるElusive Iconsなどがおすすめです。

まとめ

もとのテンプレートから少しいじり始めましたが、まだまだBootstrapの初期状態に近い状態です。次回は、色やテンプレートでいじったところを紹介します。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>