Bootstrap3 RC1をベースにWordPressテーマを作成&公開・レスポンシブも

この記事は約3分で読めます。
記事内に広告が含まれています。

WordPress Bootstrap3

そういえば、今週の頭に眠気覚ましを兼ねてさくっとそんなものを作っていました。

Bootstrap

現在のBootstrapダウンロードページはすでにURLも変わって(当初リンク切れとかあった)、Bootstrap 3 RC1がダウンロードできるようになっています。

Bootstrap3がどんな感じか触ってみたことと、ついでにWordPressテーマも作ってしまえという勢いのもとさくっと作ってみたので晒して公開してみたいと思います。


ダウンロード

pm-btsp3(テーマ選択時のスクリーンショットがおかしいのはごめんなさい)

参考にしたもの

Bootstrap3のドキュメント(英語がわからなくてもなんとかなった)

Getting started · Bootstrap

テーマの作り方はここがゼロから体系的にまとめられている良記事だと思ったので、今回はこちらをベースに作りました。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

機能

  • Bootstrapのjsとcssのみしか使っていないが基本的にレスポンシブWebデザインになっているっぽい
  • ダッシュボード→外観の管理画面からサイドバーのウィジェットとメニューが設定できる
  • Bootstrap3がフラットデザインっぽくなっているのでそれっぽくなっているw

それだけです。極力シンプルに(というか時間をかけなかった)さくっと最低限のことしかしておりませんので、ややこしいこともしてないと思います。

一点ややこしいことはメニューのアクティブを出し分けるclass属性がWordPressで出力されるものとBootstrapで指定したい「active」が無いので、そこをjQueryで書き換えております。

参考:[WordPress/Twitter Bootstrap]カスタムメニュー使用時にナビゲーションバーにactiveを追加する | Maku_zin Ver2.1.1[WordPressやCSSのメモだよ]

[php]

<script type="text/javascript">// <![CDATA[
jQuery(function(){ if(jQuery(‘.nav’).children().hasClass(‘current-menu-item’)) { jQuery(‘li.current-menu-item’).addClass(‘active’); } });
// ]]></script>

[/php]

それぐらいで、特に何もやってないです。

というわけで気が向いたらもうちょっと頑張って作ってみますが、まずは自サイトでの適用を進めていこうと思います。

宣伝

WordPress入門者向けのセミナーをやっております。こんな技術的なことではなくて、まずは操作方法から実際に記事を書いてみたり、ページを作ってみよう、というところからのスタートです。

WordPress最初の教室8/10(土)2講座開催! | はじめるクラス [ Web編 ] Shibuya HIkarie キャンパス。

コメント

タイトルとURLをコピーしました