wordpressオリジナルテーマへの道!第1弾

wordpressオリジナルテーマへの道!第1弾

こんばんは。taisonです。

早いもので、ブログを始めてからもう1年近く経とうとしています。
なかなか毎日投稿。とまではいけなかったですが、少しずつ見てもらえる数も増えてきて、ブログを更新するのも楽しくなってきました。

さて、題名のとおりなんですがこの度オリジナルテーマを作ってブログを運営しよう!と思い立ったので、その軌跡を記事に残していこうと思います。

現在使っているのはとある有名なテーマですので、自分で作ったモノではありません。
見る人が見れば一発で分かるテーマなんですが、なんでも揃っててとにかく使い勝手が良く、ブログを始めたての私にはうってつけのテーマだったんですよね。

しかしいつまでもこのままだとなんか面白みもないし、自分らしさがないなぁ。
と思い始めたので、思いきって自分でテーマ作っちゃおう!という気持ちになりました 笑

この記事はその記念すべき第1弾ということで、これからどんな事をしてwordpressのオリジナルテーマを作成していくのかを書いていきたいと思います。

こういう決意表明的な記事は初めてだな 笑

まずはテーマのテーマを決める

ギャ、ギャグじゃないですよ。

いたって真面目です。

サイト構成する時もそうですが、まずはゴールに向けての形を決めないといけません。

これがないと地図無しで世界をさまようヨロイになってしまうので、そうならないためにも非常に重要な部分なのです。

というわけでテーマに必要なテーマを作成するワケですが、自分が考えたテーマ作成に必要な事柄はコレ。

  • 自分のカラー(リアルに色)
  • ブログ更新のスタンス(私の場合は同じような境遇の人向けのwebデザイン技術の記事)
  • サイト全体の印象(シンプルなのかぎっちり詰まった雰囲気なのか)
  • サイトに使うファイル構成(single.phpとかpage.phpとか)
  • カテゴリーの洗い出し(ここは構成によっては出来上がってからでも可)

です。

細かくつめると色々でてきちゃうので、サイトコンセプトはこのぐらいにしておこうと思います。

テーマが決まったら手書きでワイヤーフレーム書いてみる

テーマが決まったら今度はサイト構成するページのおおまかな形を決めておきます。

基礎や骨組みの部分ですね。

いきなりパソコン立ち上げてイラレでー、なんてやってると余計に時間がかかるので、まずは手書きでどんな形がいいか洗い出していきます。

こんな感じ↓

手書きワイヤーフレーム

方眼紙で書くとガッチガチに線に合わせようとしちゃうので、私は普通の紙に書くようにしてます。

ふにゃふにゃ線でも分かれば問題ないんですよ。
あくまで頭の中の構成をカタチにするだけなので。

ちなみにワイヤーフレームですが、少なくとも以下の構成は洗い出しちゃいましょう。

  • トップページ(frontpage.php)
  • 固定ページ(page.php)
  • 記事ページ(single.php)
  • ページ送りやパンくずリストなど基礎機能の配置

header、footer、sidebarなどのphpファイルは共通項目になり、上記ページ内で構成ができてしまうので、改めて書き出す必要はありません。

(ページごとに違うデザインにするならモチロン書き出してね)

大枠の構成ができたら細かい機能を考えていく

大枠の構成が決まったら、カテゴリーラベルやボタンなど部品単位の、どの要素を使うか考えていきましょう。

主に記事ページの中身を考えるイメージでしょうか。

私が使うと決めたのは、以下の要素です。

っても、みんな入れる要素だろうな、、、、

  • リンクボタン
  • カテゴリーラベル(記事一覧とかに貼っついてるボタンみたいなやつ)
  • 見出し
  • snsリンクボタン
  • 引用枠
  • テキストの強調デザイン

こんなとこでしょうかね。

そして最後に色項目。
最初に洗い出しちゃう人もいるかもしれませんが、私の場合この段階で色決めてると色にデザインが引っ張られちゃうことがあるので、なるべく最後に決めるようにしてます。

テーマカラーは別ですけどね。

最後に色の構成を決める

テーマカラーを基軸に3色ほど、テーマカラーを決めます。

あんまり多すぎるとごちゃごちゃするので、色彩豊かなテーマでない限り、多くても4色ぐらいに留めるのがベターですかね。

ここまできたら基礎の構成はOKです。

制作する際のツールを決める

オリジナルテーマはphpファイルで構成されますが、その前にhtmlで制作しちゃうのが通説になってます。

なのでまず、htmlでサイト制作をするために必要なツールやファイルを考えます。

必要なファイル

html.css.javaslript

使用するツール(コンパイルが必要な言語もここに含む)

gulp(ejs.sass)

これで制作を進めていこうかと思います。

この辺は使い慣れてるツールを使ってください。ファイル構成も必須ではないですしね。

次回はサイトを彩る自分らしさを考える

ここまででテーマ制作の準備は完了しました。

しかしこれだけじゃいまいちオリジナリティが足りない、、、

ふと考えついたことがあるので、次回はそちらを記事にしたいと思います (=´∀`)人(´∀`=)

それではまた!

wordpressカテゴリの最新記事