備考録的なもの

とりあえず形になったので、作って行く過程を備考録的にメモを書いておこうと思います。

まず、最初にデザイン。
そんなに考えなくてもコーディング時に変更は出来るので、ざっくりとロゴを決めたり、メニューを配置してみたり、フォントを変えてみたりですね。
それが終わったら、Wordpressは一旦置いといて、htmlで先に組んでしまいます。

とは言え、こちらもざっくりと。
構成はもちろんWordpressに移行する前提ですから、今回は定番ながら

Header。
2カラムでMainとSub。
Footer。

という構成。
これですが、セクション毎に考えると移行が楽なので、PHP形式でカキカキしていきます。
こうすると、切り出しする時に目安になりやすいかな?って勝手に思ってるんですが。

また、手の混んだ場合はまずスマフォ版から作っていって、その後PC版とする方が良いかもしれません。
私はそうしてるんですが、
そうしないと、逆でやると無理が出て来て、結局PC版の手直しが増えるような気がするんですね。

また、本来はスマフォ版 > タブレット版 > PC版といった所でしょうか。
3タイプ作っておけば完璧なんですけど、最低スマフォ版とPC版の2タイプあれば大丈夫でしょう。
その場合のブレイクポイントは720pxで切り替えを私はしてます。

※考えてみたら、今回はPC版で幅1000pxで作ってるので、ブレイクポインは1000pxじゃないとタブレットで見切れますよね。うん。

iPadの縦画面での幅を基準にしてます。(iPadは持ってませんが、Chromeのエミュレートチェックで、、、)
さて、今回普通と違う所はメニューの部分でしょうか。
多分、というか正解はWordpressの[外観]から[メニュー]で構成をすると思うのですが、ここの部分で使ったものを他でも使いたい。
変更するの面倒くさいだけなんですけど。
なので、折角のPHPなので変数を作ってしまいます。

$menu = "TOPICS";
$menu_url = "TOPICS";

こんな感じで、設定したものを表示したい箇所に入れていきます。
そうすると、$menuを使えばいちいちテキストを入力しなくても「同じ物が出る&リンクの有無も出来る」ので楽かな?って思ったんですが、あまり意味無いかもと思い始めていますが。

で、後は各セクションをWordpressのお作法に沿って設定していきます。
まだまだではありますが、Google先生にお伺いしつつ、なんとかなるもんです。
というか、有益な情報を公開してくださってる皆々様のおかげです。
素晴らしい皆様に感謝しております。