こんにちはー！いっとくです！
晴れて職が決まりまして明日から1年半ぶりにサラリーマンとして復帰するわけですが、就活中でもお金が必要ですよね！
悲しいことに、こんなにも働いていないのにお腹は減るんですよ。
ということで日払いのアルバイトしてみたりもしてたんですが、もう一つやっていたことがあります！
それがワードプレスを使ったWebサイトの構築！！
なんか一気にフリーランス感増してきたなって感じなのですが、これが想像以上に大変でした。
というのもね、ワードプレスって基本的にはHTML、CSS、JavaScript、PHPで動いていると聞いていたので、セブ島にてみっちり学習してきた僕なら意外と簡単にでちゃうのでは！？と思っていたのです。
甘かった。甘すぎた。はちみつ漬けの水ようかんの砂糖まぶしくらい甘ったれでした。
実際に自分でWebサイトを作ってみて感じたのは、上にあるプログラミング言語を理解するだけじゃなくて、ワードプレスに必要な知識ってものがたくさんあるということに気づいたのです。
その情報収集と制作作業のおかげで今月ブログを30本書くって決めていたのに、どうやら厳しそうだぞ！？
ちなみに必要な知識を具体的にあげるとこんな感じです。
- HTML
- CSS
- JavaScript（必須ではない）
- PHP
- ローカル開発環境の構築
- FTPソフトの使い方
- ワードプレスの仕組み
- ワードプレスで使う基礎的な関数
- データベース（簡単でいい）
JS以外は必須だといっても過言ではありません！
ちなみにこの制作案件を始めた時の僕のスペックは以下の通り。
- 使っているPCはMacBook、本番用のサーバーはエックスサーバー
- HTML、CSS、PHPはある程度理解している
- JavaScriptはあんまりよくわかってない
- ローカル環境はMAMPを使っているだけ
- FTPがなんなのかはわかっている
- ワードプレスの仕組みや関数については知らない
- データベースはいじったことあるけど詳しくはない
一言で言うと、プログラミング学習を始めて一通り勉強がおわったけど、次に何をすればいいのかよくわからない状態といった感じです。
と言うことで今回は、一通り独学でプログラミングを勉強した男が初めてワードプレスと習得したプログラミングスキルを使って仕事をするにあたって必要な勉強方法や注意点、大変だったこと等をまとめていこうと思います！
まずはプログラミングを勉強せい！
もしかしたらまだプログラミングに手を出していない人もいるかもしれないので、初めに言っておくと、ワードプレスでWebサイトを作るならプログラミングの基礎は絶対に必要です！
これがないとスタートラインに立てません。クラウチングスタートができません。
無料でも全然勉強できると思うので、ド定番ですがドットインストールやProgateでひたすら基礎を固めるべき。
どちらのサービスも無料でプログラミングが勉強できます。
個人的にオススメの順番はProgateをひたすらやったのちにドットインストールをひたすらやるのがいいかと。
というのも、Progateが画面に用意されたエディタでやるのに対してドットインストールは動画教材です。
ドットインストールの動画を見ながら自分でプログラムを書くというのが一番現実でやる作業には近いのですが、環境を用意するのが面倒だったりするのでProgateから入るとグッとハードルが下がります。
やるべき教材はHTML、CSSでWebサイトの枠組みを調べながら作れるようになって、PHPの構文を見て、書いてあることの意味が調べながらわかるようになればオッケーでしょう！
はい、ここからが本番です！
ワードプレスの仕組みを理解するのに重宝するサイトを紹介！
今回僕がやったお仕事はワードプレスの元からあるテーマをカスタマイズして飲食店のWebサイトを作り上げるというものでした。
エンジニアとしては未経験とは言え、ついこの前までセブ島でエンジニア留学を通してPHPを学び、Webサービスを一つ作り上げるという体験をしていたので、正直ちょっと調べればわかるもんだと思っていました。
なので特に下調べもなしにお仕事を引き受けちゃったのですが、いざテーマの中身を見て絶句。
…何て書いてるのか、全然わからんなぁ！！
マジでわからん。まずファイルがいっぱい並んでいるんだけどどれを見てもわからない。
しばらくしてようやくトップページがどのファイルかは特定したのですが、本当にHTMLとPHPで組まれてるの？？ってくらい少ないコードと見慣れた書き方が全然ないことにビックリします。少しのタグと見たことあるPHPの文法に見たことない関数が突っ込まれており、その先はなんだかよくわからん感じになっている。
しかも実際に表示されているページのソースと全然違うじゃん！！
早くも心が折れそうになったのですが、調べたところ、どうやらワードプレスは独自の構成になっていて、それを理解しないとカスタマイズできないんですねー！？
要するにワードプレスはサービスだけど、もはやライブラリやフレームワークみたいなものである程度仕組みを理解する必要があるわけです！
そこでまずは、そのワードプレスの仕組みを理解するのにオススメなページがこちら！
【WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき】
結構古い記事ではあるのですが、ワードプレスを初めていじった時になんじゃこりゃ！？と感じる部分をすっきり理解させてくれる良記事です。
孫の手くらいかゆいところに手が届くので、まずは読んでおきましょう。
そしてざっくりとワードプレスとはこういうものなのね〜と感じたら早速実践です。ドットインストールで！
こちらは無料の動画を見ながらワードプレスについて勉強できる素晴らしいコンテンツ！
簡単なテーマを一緒に作っていくという内容なので、動画の真似をすることでワードプレスのカスタマイズの際に必要な「テンプレートタグ」といったワードプレス内でしか使えない便利な決まり文句を学んでいくことができます。
ただしこの講座ではローカル開発環境の構築が必要です。
そのため完全に動画と同じ手順でやるのであれば先にこちらもやっておくことをオススメします。→【ドットインストール-ローカル開発環境の構築Mac OS編-】
※Windowsの方はWindows編もあるのでご安心を。
もし環境構築が終わっている場合は普通に初めてみましょう。
しかし、これだけだとまだ不十分な気がします。かくいう僕もこれが終わった後に再度ワードプレスのテーマファイルを見てみたのですが、結局ちょっとわかるようになったものの大事なところがわからず。
要所要所に関数が使われているのですが、それがどこから引っ張ってきているのか全然わからないという始末。
そこでもう少し勉強しようということでたどり着いたのがこちらのサイトです。
【一緒にブログテーマを作ろう！ WordPress初心者のためのテーマ作成基本 – サンプルダウンロードつき】
めっちゃ詳しく解説されています。
そして、このページだけでもボリュームすごいんですけど、目的ごとに充実した解説が用意されており、このサイトで学んだ知識が一番役に立ちました。
ここまでの知識をできれば、ワードプレスのテーマに書かれている内容がなんとなく読み解けるようになっているはず。苦戦はすると思うけど！
そしてここまできたらあとは実物をいじっていくしかありません。
ということでここからはローカル環境を構築して、WordPressをダウンロード・インストールして、ひたすら自分が作りたいサイトに寄せていく作業の開始です！
ローカル環境の構築は便利なツールを使っちゃえ
はいというわけでワードプレスを自分のパソコン上でいじるとなると必要になってくるのがローカル開発環境の構築です。
嫌な響きだよね〜。特にコーディングだけできればエンジニアになれるんでしょ？なんていう考えを持っていた僕からするとすごい面倒だし、よくわからないし、言葉の響きが難しそう。
特にProgateとかでプログラミングの独学をしてきた方だと、なぜこんな面倒なことをせねばいけんのだという気持ちになるのですが、これは絶対必要です。
なぜなら、PHPはブラウザではなくてサーバーで動くので、ローカル環境を作らずにワードプレスのファイルをブラウザに表示してもPHPが全く動いてくれません。ほぼ石です。
HTMLとかCSSとかJavaScriptなら動くのにね〜。
ローカル環境の構築というと難しく聞こえますが、船を動かしたいから、海を用意しますみたいなもんです。ローカル環境は海です。陸では船は動きません。
HTMLやCSSはたまたま陸で動くというだけなんです。
なのでパソコン自体にPHPが動けるようにしてあげないといけないわけです。
ローカル環境の構築は色々なやり方があるのですが、僕はMAMPという便利なツールでやっちゃってます。
ダウンロードしてインストールして設定したらあとは起動しとけばなんとかなりますからね。
というわけでMAMPをダウンロードしておきましょう。
この記事がわかりやすいと思います。
あとMAMPはMacでしか動かないので、Windowsだぜって人は似たようなサービスでXAMPPを使うといいでしょう。
ローカル環境にワードプレスをインストールすべし
はい、ローカル環境が出来上がったらあとはワードプレスをインストールしてテーマをゴリゴリ書き換えていくわけです。
なので、まずはワードプレスをインストールしましょう。
僕はこの時データベースとの接続の部分でMAMPに設定していたパスワードを変えていたことがあってつまづいたのですが、この記事ではデータベースの部分も解説されているので、MAMPを使っている人は参考に！
【MAMPを使ってローカル環境にWordPressをインストールする方法】
それぞれの環境によってインストール方法は異なると思うので、「自分が使っているツール名 ワードプレス インストール」で検索すればそれはそれはたくさんの記事が出てきます！便利な世の中どすなぁ。
いざカスタム！
さて準備が整ったらあとはテーマをカスタマイズする作業です。
もうひたすらページを作り込んでいきます！修羅のごとく！
ということで一通りやってみて自分が詰まった部分や気をつけたほうがいいなってことだけ触れていきます。
意外とできることが多いカスタマイザーと管理画面とプラグイン
散々知識が必要だと言っておきながらいきなりこんなことをいうのもあれなんですが、まずは管理画面でできることは管理画面でやってしまいましょう。
すると、固定ページや投稿ページに文字入れて画像登録して、表示・非表示を選択するだけで、元々のテーマがいい感じにしてくれることが多々あります。
なのでまずはそのテーマですでにできる機能を全部実装したのちに、カスタマイズしないとどうにもならないところだけやってしまいましょう。
僕の場合は、トップページは必要な要素が揃っているテーマだったので、CSSの調整と表示する順番を変えるためにプログラムをいじるくらいでした。
ただし、下層のページは完全に一から作る必要があったので時間はかかりましたね〜。
ちなみに僕は画面を作る知識はあったのですが、ワードプレスの仕組みをうまく利用して作るほどの知識はなかったので、特定の下層ページの時にURLをトリガーにして分岐を書いて、自分で書いたソースコードをincludeで呼び出すという、ワードプレスの良さを全く活かさない力技で作り上げました。
そのため、今回の発注者がサイトの内容を変更するとなるとめちゃくちゃ大変という、ユーザビリティの悪いことにはなってしまったのですが、サイトとしてはちゃんと機能しているのでなんとか、、、、セーフ！！
まぁ、これは自分の力のなさなのでしっかりとしたアフターケアをしていくという業を背負うことにします。
あとソースコードを見ていてわからない関数があれば、テーマ作成者の独自の関数でないかぎりは、ここで調べればほとんど出てきます。
見た目はどう見てもウィキペディアですが、ワードプレスの辞書みたいなもんです。
ちょっと堅い日本語で書かれているため、拒否反応が出かねないので、ここでわかりづらければググってなんとかしましょう。
完成したらサーバーにアップロード！…の前に
さて、すごい労力をかけてWebサイトのコーディングが完了したならば、あとはサーバーにアップロードさえすれば全世界にあなたの努力の結果である成果物を公開することになります。
そこで必要になってくるのがFTPソフト！
FTPソフトというとまた蕁麻疹が出そうなくらい難しそうな響きの名前ですが、簡単にいうとサーバーにファイルを送っちゃうすごいソフトです。
パソコンを使ってるとドラッグ&ドロップで別のフォルダにファイルを送れますが、サーバーにアップするということは別のパソコンのなかにあるフォルダにファイルを送るようなものです。
なので自分のパソコンとサーバーをいい感じに繋げてファイルを運んでくれる仕組みが必要になるのですが、それがFTPソフトってことです。
今回僕は「FileZilla」というFTPソフトを使いました。
しかし、これはぶっちゃけなんでもいいと思うので以下のサイトを参考に好みで選んでみてください！
【初心者でも使える！フリーのFTPクライアントソフト10選】
MacでFileZilla使うよって人はこっちを見るのが手っ取り早いです。
さぁ！サーバーにアップしよう！
さて、ではローカルでカスタムしたテーマを本番用のサーバーにアップロードします。
FTPソフトでアップロードしたいサーバーと繋げたらあとは所定のフォルダに作ったファイルを送りまーす！
正直僕みたいな初心者からすれば、ファイルさえその場所に送っちゃえばうまく動くんじゃね？？って思ってしまうのですが、実はここでも気をつけるべき点があります。
まずはファイルだけ送っても事前に管理画面で登録した情報は送られないということ！
実は投稿した記事や設定の内容はプログラミングしたファイルとは別に存在しているデータベースの中に記録されています。
なので作ったファイルの送信とデータベースのお引越しの両方をやって初めて完全体の状態でサーバーに移動することができるというわけです。
そしてもう一つは、当たり前なのですがデータベースは誰でもアクセスできるわけではありません。
鍵がかかってます。
そこでワードプレスの中にある設定ファイルに正しい鍵を持たせてあげないといけないわけです。
ということで、少しだけ設定ファイルの書き換えを行ってからアップロードをします。
実はこの辺もよくわからなくて詰まってしまったのですが、こちらの記事で完璧に解説されています。
【ローカル環境のWordPressサイトを本番環境へ移行する方法！】
これが終われば、ほら。サイトが公開されていまっせ！！
データベースを送っても微妙に反映されていない設定もあるので、細かい調整は必要になると思います。
あ、あと一般公開するならドメインを割り当てる必要はありますが、ここでは割愛！！
これでなんとかなった、、、はず
はい、というわけで初めてワードプレスのカスタマイズを行ってみたのですが、かなり苦戦したので、その過程でお世話になったサイトを僕の視点で紹介していきました！
これからワードプレスをカスタマイズせんとしている初心者の方がこの記事を参考にしながら効率よく勉強できればいいなと思ってます。
明日から社畜なんで今日はこの辺でさよなら〜！
コメント