Webサイト開発・運営

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

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 キャンパス。

  • この記事を書いた人
  • 最新記事

wackey

Webディレクター・プロデューサーなどで大手企業サイトの構築に携わった後、インターネット広告営業やWebコンサルティングなどを行う。フリーランスを経て2012年にプラス・ムーブメント合同会社を設立。Webサイト・システムの制作やブロガーツアー・イベントなどの企画・運営を行う。地域ブログをまとめたLocketsというサービスの事業責任者としてビジネスを展開。 2015年にアジャイルメディア・ネットワーク株式会社に入社。 レビューズにてインフルエンサーマーケティング事業の立ち上げに関わり運営。またアンバサダープログラムの運営など多くの企業の支援をバックアップしていた。 現在プラス・ムーブメント合同会社を経営しつつ、新しい働き方について模索している。 主な著書に「アフィリエイターのための Web APIプログラミング入門(ビー・エヌ・エヌ新社)」がある。

-Webサイト開発・運営