WP自作テーマ講座

BootStrapを使うかどうかはお好みに任せますが、とりあえずCSSフレームワークの恩恵を感じてみましょう。如何に普通のCSSを書くのがバカらしくなるかを体感出来てしまうので堕落してしまう可能性があります(笑)意外と私みたいに結局全部自分でやったほうがいいわ!

WP自作テーマ講座

今回はCSSフレームワークという概念を学びましょう。というのも、CSSって1からすべて組んでいたら思ったより時間がかかります。頭の中でレンダリングできる人やPhotoshop・イラストレーター等でガッチリとデザインを固めればプログラミングみたいにスラスラとコーディングしまっていけるのですが、普通の人はそんなスラスラとCSSを書くことはできません。

WP自作テーマ講座

フッターにはサイトのカテゴリリンクが張って合ったり、著作者の情報があったり、サイトのコピーライトが掛かれていたりという事が多いです。しかしサイトのコンテンツが少ないとカテゴリをちょろっと書いても寂しいだけなので、最初のうちはコピーライトだけでいいかもしれません。

WP自作テーマ講座

前回はコンテンツ側、つまり記事リストの方をスタイリングしました。今回はサイドバーを整えていきます。やることは前回とほぼ同じで余白と間隔でスタイリングです。

WP自作テーマ講座

余白と間隔はレイアウトにおいてとても大切です。何でもかんでも詰め込もうとする人はそれだけでデザインセンスが皆無です。今回は余白と間隔がなさすぎるので記事リストに取り入れてキレイにスタイリングの回です。

WP自作テーマ講座

前回はグローバルナビゲーションを絶対配置でいい感じに配置しました。しかしこのままではUL~LIタグのデフォルトリストスタイルが適用されていてブサイクな状態です。今回は余計なCSSをリセットしてキレイなメニューに仕上げます。

WP自作テーマ講座

前回はヘッダを整えてブログっぽくなりました。しかしメニューとかが背景の青で見えにくくなっているし、画面全体に広がってしまっているのでデザインしてやります。

WP自作テーマ講座

Wordpressの基本的な機能はだいぶ覚えてきたと思うのでちょっとPHPから離れてHTMLとCSSによるデザインをやっていきましょう。デザインといっても特に難しいことをするわけではなく、ごく簡単なHTMLとCSSで見た目を整えていくだけです。

WP自作テーマ講座

実はWordpressのテーマ作りの基本は前回で終わっています。あとはWordpressの使い方になってくるので、細かい所の説明をしていきます。今回はwp_head()が出力する要らないコードを消したい!という人のためにWordpressのヘッダ(HTMLタグのheadタグの中)部分に焦点をあてていきます。

WP自作テーマ講座

Wordpressでは1つのphpファイルにまとめていては管理しづらくなってくるので、サイト(ブログ)全体に共通している部分はモジュール化(いわゆるパーツ別にファイルを分ける事)をしてしまおうという考えです。モジュールとは単体だけでは機能しませんが、組み込むと1つの機能として働くことを指します。

Page 1 of 2
1
2