プログラム初心者、2ヶ月でいきなりWordPressテーマを自作してみる。

WEB

初めまして!
これが記念すべき初めての投稿です。よろしくお願いします。

「3ヶ月でWEBプログラミングの基礎を学んでみる」を目標に勉強してきて、早くも2ヶ月くらいが過ぎました。

赤子が生まれたり、フリーランス(グラフィックデザイン)になって5年目で初めての営業活動をしてみたり、趣味のお絵かき力をアップしようとデッサンを初めてみたり・・・とにかく、初めてづくしの2ヶ月あまり。

ブログに関しては、html、css、WordPressのテーマ作成までを取り急ぎの目標としてやってきて、とりあえず、なんとか、自作テーマも機能したので勢いに任せて公開してみることにしました。

投稿を続ける中でSEO対策やら、サイドバーの充実やらにも挑戦していければと思ってます。

とりあえず、「とりあえず実行」をモットーにしばらく進めてみます!!

自作テーマを実装するまでの道のり

やったことは、主に以下。

  • とにかくドットインストール(html/css)
  • とにかくhtml/cssを書いてはブラウザで結果を確認(楽しい)
  • とにかくドットインストール(MySQL/WordPress)
  • 『WordPressの教科書』でテーマ作成について学ぶ(難しいけど楽しい)

1. とにかくドットインストール(html/css)

「タグ」と呼ばれるhtml上での言語?指示?をカタカタ打つだけで、ブラウザ上に色や文字や表ができあがるので、とにかく楽しい!

htmlだけだとできることも非常に限られるので、結構すぐに飽きますが(概要は数時間でわかる)、平行してcssについても学ぶと見た目を色々といじくれるので、これまた非常に楽しい。

こういう機械言語を扱えるようになっていく過程や、扱っているAtomというアプリの見た目もあいまって、なんだか非常に頭良さげに思えるので、毎日苦もなく勉強できました。

ただ、タグやコードを丸暗記してサラサラっと記述することなど、まったくできません。

できて、教えられた通りのコード内の数字を変えてみるなどして、どういう作用なのか確認する程度。

2. とにかくhtml/cssを書いてはブラウザで結果を確認

1をやっていてふと不安になるのが、「指示された通りにコードを書く→当然正しい結果が得られる、を繰り返していて何か身についているのか?」ということ。

実際に学んだことを自分で再現しようとすると「html文書の書き出しって、<html><head>・・・えーと、<head>の中って何書くんだったっけ・・・」というレベルでした(汗

ドットインストールは基本的に動画なので、振り返って参考にするには少し不便というか、付箋貼ったりもできないので、参考書を一冊購入。

ドットインストールとは違う指示内容、違うサンプルサイトを作りながら、学ぶ内容としては同じhtml/cssについて学習できるので、これでだいぶ力が付きました。

知識のインプット(読む)+アウトプット(やってみる)=1セットとして、
何かを1つ学ぶ=参考Aで1セット×参考Bで1セット + 独自にアウトプット

同じことを違う条件下で行うことで頭を使うので、以降、これが僕の基本的な学習方法になりました。

自分がいかに覚えられていないか、ということに悲しみつつ、決して模範解答をコピペすることなく地道にコードを書いていくと、徐々に記述スピードが上がってきます。

まだまだカッコ良いデザインのWEBサイト、というわけではありませんが、序盤で簡単、ということもあり、着実に成長する感覚にウキウキで勉強に励む毎日でした。

3. とにかくドットインストール(MySQL/WordPress)

ここで一旦、つまづきました。

実際にはMySQLやWordPressそのものが難しかったというより、それらをインストールして使用する環境作りに苦戦したわけですが。

なぜかわかりませんが、「ローカル開発環境を構築しなければならない」という強迫観念があったというか、いきなりネットに繋がった状態で勉強を続けることに抵抗がありました。(誰も見ないんですけどね)

html/cssについて、おおまかに理解できたところでWordPressを学習しようにも、WordPressを使うにはMySQL(データベース)が必要らしい→PHPも必要→Apacheも必要!・・・というあたりで、新しい単語が多過ぎて、頭がパンクしました。

レンタルサーバを借りている人であれば、大抵はサーバのサービス内に「WordPressの導入」なるページがあるので、ここで苦労することはないと思います。

僕も普段から仕事で使うのでレンタルサーバは契約していたしドメインも取得済みだったのですが、その時は「できれば根本から理解したい病」にかかっていたため、なんとか全て自分で導入してみたい→ローカル開発環境を構築しなければならない、となってしまいました。

このローカル開発環境の構築に関してはネットに記事もあるっちゃあるけれど、自分と同じパソコン環境で、かつ体系的にやり方をまとまっているサイトがなかなか見つからず、様々なサイトを参考にツギハギで学習したため、かなり苦戦しました。

普段はグラフィックデザインのお仕事をしている僕ですが、デザインは曖昧で明確な正解がありません。それゆえ奥深いのですが、適当にやっても一応成立はするものでもあります。

プログラム系について学習し始めて何より大変だったのは、「パソコン環境は人によって違うし、コードは一文字でも違ったら機能しない」というシビアさ。だからこそ、できれば最初から最後まで一つのサイト、一人の著者がまとめた情報を参考にした方が混乱はせずに済むと思います。

いずれ、この「ローカル開発環境」の構築の仕方は備忘録がてら別記事でまとめようと思いますので、今は「大変だったよ」ということだけ。

肝心のMySQLとWordPressについてですが、これはさらっと学習終了しました(笑

ドットインストールの良いところは動画でサクサク進められるので、そんなにつまづくことなく進められる爽快感 + どういう機能なのかなんとなく把握する満足感が得られるのが良いところでした。

4. 『WordPressの教科書』でテーマ作成について学ぶ

ここは、「さくさく進むけど身につかない」パートでした。

というのも、WordPressの使い方自体は難しくないからです。(だってお手軽にブログをカスタマイズできちゃうサービスですから)

ただ、テーマ(WordPressで使用するデザインそのものを作る)となると、ちょっと勝手が違っていて。

html/cssは自分が表現したいデザイン・内容を固定的にかっちり作り込むものなので、一つ一つ丁寧に積み上げれば問題なく完成します。

しかしWordPressというシステムを使って記事を投稿する→それが自分のデザインしたサイトに反映される、という作用と反作用のある状態を作るには、厳密にはPHPやらWordPress専用の記述があったりで、このあたりから一気に難しく(インプットしてないので当然ですが)、参考書通りのことならできるけど、それの原理は理解できていない状態が続きました。

このあたり(学習開始から1ヶ月超)は少し集中力が落ちてきた頃で、学習速度もガクッと下がりました。

飽きてしまうと元も子もないので、一旦学習を終了し、せっかく作ったローカルサーバで好きなサイトを参考に「webデザインの模写」をすることにしました。

好きなサイトをChromeの「検証」を使ってコードを覗き見→およその構造を理解したら自分で似た感じに機能するようにデザイン(html/css)を作成。

これをやって「なんだ〜自分もできるんじゃん〜」気分に浸る時期が一週間ほど続きました。(なんだかんだで、これもhtml/cssの復習になりました)

で、サイトの見た目を作れるようになるとどうしても機能しているところを見たくなるのが人間というもの。

改めて『WordPressの教科書』を参考にしながらテーマ作成に乗り出しました。

PHPや、それ以外の何かよくわからないもの(まだ勉強できてません)も多数ありましたが、そこは多少無視して(参考サイトからわからないままにコードをコピペしたり)サクサク進めました。

WordPressのテーマ作成は、超ざっくりいうと

  1. html/cssで完成形の作成
  2. 完成したものの「head」「main」「aside」「footer」を別々の文書(html→php)に切り分け
  3. 投稿部分などインタラクティブに機能する部分をただの文字やimgの指定からphpの記述に変換

こんな感じの作業でした。機能性にこだわりだすと3の部分が難しかったりしますが、とりあえずテーマを作成してみる、という点ではなんとかなるところではあると思います。

まとめ

そんなこんなで、とりあえずブログデビューをしてみました。

このサイトは、とくに何の才能もなく、とくにめちゃくちゃ努力家でもなく、それなりに幸せで、でも自分に確たる自信が持てていないままに独立、フリーランスとして生きはじめた超凡人の僕が、

それでも自分なりに自由気ままに楽しみながら生きる道を模索する、その過程で学んだことや考えたことを公開していくことで、共感が生まれたり、何かの足しになったら良いな、ということで作っていきます。

まだまだ機能していないパーツも多く、デザインもこれからオリジナルに昇華していかなければなりませんが、「とりあえず実行」を実行するために、本日、オープン。

Profile


ここに自分のプロフィールを入れる。ほぼサイトの説明のような感じでも良いかと思っている。フリーランス、デザイン、絵、プログラムなどが主になってくるが、あまりに散漫にならないように気をつけなければならないのも、事実。