独学プログラミング(WP編)【163~170日目】

プログラミング日記

独学プログラミング(WP編)【163日目】

WordPressテーマの自作に挑戦します。独学のHTML、CSS、PHPだけで、WPテーマを作れるのか、検証していきますね。完成までどれくらい時間がかかるのかわかりませんが、せいいっぱい頑張ります。

作成方法を模索

いろいろなサイトで研究してみて、手順と必要最小限のファイルを洗い出しました。とても簡単そうな手順なのですが、実際に自分でやってみると、どうなることやら?

テーマをダウンロードして、展開

実際に出回っているテーマから、勉強してみることにしました。使ってみたことのあるもの、ダウンロード人気の高いものを、とりあえず5つピックアップです。ファイルデータ数はどれだけか、どんなファイルやデータで構成されているのか、テーマ全体容量はどれくらいか、を分析しています。

今日は、3つのテーマ分解です。ノートに書き映しです。ファイルデータ名から、このphpは何をしているのか、という予想が立てられました。自分の作りたいテーマに必要な部分と、いらない部分を考えるコツがつかめました。自作テーマ完成まで、どれだけ時間がかかるかわかりませんが、ひとつずつ進めていきます。

 

独学プログラミング(WP編)【164日目】

テーマをダウンロードして展開、の続き

容量の大きい2つのテーマを分解してみました。JavaScriptなどphp以外の要素やpng、jpgデータが入っているため、容量が大きくなっているように見受けられました。ルートからのフォルダデータ数は、どのテーマも30個前後にまとめられています。というわけで、自作テーマは「最大で30フォルダデータ数」「最小で10前後?」を目標に定めます。必要なのは、必要な機能を動かすコードデータですよね(たぶん…)。

 

独学プログラミング(WP編)【165日目】

外部設計と内部設計の中間地点

ざっくりとしたテーマデザインを書き起こしました。スマホビューだけですが、これで少しHTMLが書けると思います。初挑戦なので、ひとつずつ確認しつつ進めます。

 

独学プログラミング(WP編)【166日目】

外部設計と内部設計の中間地点

最初はHTMLです。さらっとまとめて、順番に書きました。まだまだコンテンツを書き加える必要がありますね。header、main-body、footerを考えていきます。

 

独学プログラミング(WP編)【167日目】

内部設計付近

きっちり外部設計を決めて、それから内部設定を決めて、HTMLを書き始めるのが理想だと思います。しかし、作成手順に慣れておらず、どこまで「きっちり」決めれば作業が進むのか、今のところよくわかりません。というわけで、手戻りが発生することを理解した上で、ふわふわ設計を進めていきます。

トップページとなるindexのHTMLを書きました。次は、個別投稿ページのHTMLに挑戦します。

 

独学プログラミング(WP編)【168日目】

indexとsingle

トップページと個別投稿ページのHTMLです。ここまで進めてきた作業のおかげで、phpファイルデータ構成を少し理解することができました。自分テーマでどれだけのファイルデータを作成すれば良いのか、ようやく計画を立てられそうです。早速、ファイルデータ構成と作成計画に挑戦しますね。

コードはCSSに移ります。CSSは随分久しぶりに書くことになるので、復習しながら書きます。

 

独学プログラミング(WP編)【169日目】

indexのstyle.css

サイトデザインを書きつつ、お手本テーマを分析検討しつつ、自作テーマに必要なファイルデータを書き出しました。本当にこれだけのプログラムで、WordPressで動いてくれるのか、とてもとても不安です。とりあえず今は、私の知識と技量でできるだけのことをやりながら、試行錯誤していきます。

久しぶりにcssを書きました。何となく、footerから書き始めました。勉強を開始した頃も、何故かfooterから書いていたような気がします。きっと、すぐに見た目に反映することができて、モチベーションが上がるから、footerスタートしていたのでしょう。今日も綺麗に体裁を整えられたため、モチベーションが上がりました(笑)。footerスタート、大成功です。

 

独学プログラミング(WP編)【170日目】

indexのstyle.css

とりあえず、ひたすら書いています。色合いをパステル調にしました。理由は特にありません(笑)。まずは、cssができあがるまで、書き続けます。