bootstrap 3とWordPressでサイトを作成

bootstrap x wordpress

2013年8月19日に発表になった新しいCSSフレームワークbootstrap3を試したくてサイトを作成してみました。今回のアップデートでbootstrapはモバイルファーストなCSSフレームワークになったようです。

bootstrapのカスタマイズ

方針としてはシンプルに。bootstrap自体にユーザーが独自に定義したCSSを極力当てないようにし、bootstrapの補助程度で済ますようにしています。レスポンシブデザインを採用してみました。marginやpadding、font-sizeの調整。標準で用意されたComponentsでは足りない部品程度に留めています。bootstrapのCSS自体には手を入れていません。

CMSはWordpress

WordPressでテーマは1から自作しました。サイト自体の機能を極力削いでいるので主に作成したテンプレートは、index.php single.php header.php footer.php functions.phpとシンプルにまとめています。コメントもつけていません。今後サイトを運用していく上で必要になってくるページ(ex:page.php)などは必要になった際に作成していきます。

bootstrap3を使ってみて思ったこと

ドキュメントが複雑になるとは思うが、もう少しcomponentsを用意してもらいたかった。サンプルサイトがいくつかあるが、componentsカタログ風なドキュメントを充実させてくれると取っ付きやすくなるように思えます。(時間が経てば拡張コンポーネントが出てくるとは思います)

SEO的なアプローチ

カテゴリ階層的な概念と日付アーカイブ的な概念は持たず、タグをサイトのコンテンツとして設計してみた。クローラビリティ観点からはタグを辿ってくださいといった感じ。パーマリンクは標準の物を利用しています。metaの記載についてはtitleは入れていますが、descriptionは抜いています。keywordsは良いとしてもdescriptionは入れた方がよいのが通説ですが抜きました。ただしdescriptionを参照して共有コンテンツを作るようなsocialとの親和性は低くなる。OGPタグを設置するかどうか迷うところ。でもヘッダがモリモリすると美しく無いと思うのだが、、

googleが推奨しているのでレスポンシブデザインを取り入れた。記事別に関連カテゴリの枠を用意してみた。無駄なサイト内リンクを極力排除。CSSのサイズはフレームワークで不要な物まで記載されているので、今後対策するか迷うところ。書き出されるソースも安定してきたら極力綺麗にしていく。

(追記)弄った場所

bootstrap自体のCSSを1カ所だけ弄りました。-webkit-tap-highlight-color: rgba(0, 0, 0, 0)が指定されていましたがタッチディスプレイデバイスにリンクのフィードバックを伝えたい為削除。ただしbtnなどでちょっとダサい感じになってしまうのは確かに分かるので、ボタン周りにだけユーザー側のCSSで指定し直しました。

また極力追加のCSSを控えていたのですが、関連記事を表示したりする部分などオリジナルのCSSだけではどうも表現しきれない部分などがあり追加量が少し多くなってしまいました。

(追記2)ページのパーマリンクについて

ページのURLはどうでもいい派(ランキング影響は無いもしくは軽微かなと。ただしキーワードを含めると太文字表示してくれるのでCTR向上はしそう)だったのですが、アクセス解析をした場合post_idしか表示されないと何がなんだかわからないという落ちが。Wordpressはパーマリンクを変更しても301転送対応してくれるみたいなので変更しようかと思う、、

結局変更してしまった →「wordpressのパーマリンク変更時のリダイレクト

その他

一覧ページの2ページ目以降のタイトルが重複するのでページ番号を2ページ目以降に入れることにした。このへんはデフォルトの機能でフォローしてもらいたいところ。

個別ページにページが属するカテゴリの新着記事をユーザビリティ、クローラビリティと関連性の為に表示した。ざっくばらんな話題があるブログはこういったアプローチが良いと思う。また特定のタグに関してはタグの新着記事を挿入するようにしている。

wordpress (5件)に関する新着情報

未分類 (93件)の新着記事