ブログサイト案件で、WordPressを使わざるを得なかった時に、初めてながら四苦八苦した思い出を綴ります。なんとなくどこで何が行われているかを理解するまでの過程について語ります。
つまり、WordPress初めてという方、さらに既にあるWordPress案件に突っ込まれた方向けになっております。
今回は
- OSX 10.11
- PHPビルトインサーバー(MAMPなし)
- MySQL
で行いました。
最初に
今までWebを本業とはせず、PHPも一応読める少し書けるくらいの力量で足突っ込んだ案件。しかもWordPressがどう動いているかも分からず。既存のサイトがあったのでそのソースコードをもらってローカルで動かそうにも、まったく何も分からないそんな状態でした。
WordPressがどういったアプリケーションかについては、ぜひ調べてみてください。
サイト表示まで
ここでまず詰まりました。なんたって、ノリで動かせると思っていたんですもの。
とりあえずPHPのビルトインサーバーで実行してhttp://localhost:8000にアクセスするも
Call to undefined function get_header() in /***/index.php on line 1
WordPressがインストールされていないということでした。それもそのはず、get_header()はWordPressの関数ですからね。
WordPressのインストール
WordPressの公式サイトでダウンロードします。zipファイルを解凍すると必要なソースコードが多く含まれているのが分かります。これだけでインストール・準備は完了です。
PHPビルトインサーバーで実行
先程のディレクトリでphp -S localhost:8000を実行。そしてhttp://localhost:8000にアクセスすると、WordPressの設定画面が開かれます。
ここで設定を進めようとするとデータベースの項目について聞かれます。WordPressではデータベースを使用するので、その設定も進めましょう。
MySQLの設定
行う事は、
- ユーザの作成
- データベースの作成
- 権限の付与
になります。ローカルで動かすだけなので、好きなアカウント・データベース名を使って問題ないと思います。
必要な方は、こちらの記事のMySQLの設定で詳しくコマンドについても書かれているので参考にしてください。
WordPress実行・設定
もう一度ビルトインサーバーで実行します。そして上記で設定したデータベースの情報を入力し、その後ユーザを作成して終了です。これで、見事、自分のブログを持つことができました！
HomebrewでMySQLをインストールしている人向け
HomebrewでMySQLをインストールした方は、ここで躓くようです。具体的には、上のデータベース情報を入力後、データベース接続確立エラーになります。
これに関してはこの記事で詳しく説明されています。要約するとソケットの設定が間違っているから設定し直してねって事ですね。
WordPressに触れてみる
上記で設定したユーザ・パスワードでログインします。そうすると、
こんな画面が表示されますね。これで成功です。
眺めてみると、ここから色々と設定したり、記事を投稿したりするという事が分かります！UIも分かりやすいですし、何よりGUIで投稿できるって良いですね。便利。
テーマの反映
インストールはできたけど、渡されたソースコードは何に使うの！？となりました。
テーマのソースコード
渡されたソースはテーマのものでした。index.phpや404.phpを含んでおり、他のテーマのファイル構成と似ていたので分かりました。
ソースコードがテーマのためのものであるということは、WordPress上の外観/テーマから変更する必要があるという事です。
とりあえず渡されたコードをフォルダごと、/wp-content/themes/につっこみます。そうすると、WordPressの設定画面(ログインした先の画面)のテーマに自動追加されます。そして、それを選ぶだけです。簡単ですね。
変更してからホームページにアクセスすると、渡されたソースの通りに変更されている事が分かるはずです。(ちなみに自分はこの時レイアウトが崩れまくってました)
サイトのカスタマイズ
サイトの表示もできましたし、早速コードを読んで行こうと思いまして、少しずつ構造について学び始めました。ただレイアウトが崩れまくっていたので、それの原因も探りつつ…
ファイルについて
index.phpheader.phpfooter.php- ...
など、こういった必須ファイルがあるようです。(詳しくは調べてください)
ファイルを組み合わせてカスタマイズされるようですね。ひとまずこの辺りのソースコードを読んで、どこで何が表示されるかについて理解を深めました。
ルーティング
ある程度のルーティングはWordPressが行ってくれるようです。そのために上記のindex.phpやheader.phpが存在しています。これらのファイルを作ると、自動的に整形してくれるようですね。(ヘッダとか、サイドバーとか、勝手に設置してくれます)
また、適度にファイルを準備すれば適度にルーティングも行ってくれます。いつもルーティングを自分に書いてたので、最初は意味が分かりませんでしたが。ただ、そのためには固定ページなど、そういった概念も理解しなければなりません。
固定ページ
Aboutページとか、Contactページとかソースにあるのに、遷移できない！って場合は固定ページを足さなければなりません。
WordPressの編集画面から固定ページを選び、新規追加します。そして、テンプレートから追加したいファイルを選んでください。
パーマリンク
パーマリンクとは、URLを示します。固定ページ毎、記事のページ毎に設定できます。
パーマリンクの設定を以上のようにしておくと、ボタンが変更から編集に変わるので、好きなURLに変更できます。
これで何ができるかと言うと、
http://localhost:8000/?page=2
みたいなGETパラメータを使ったURLではなくて、
http://localhost:8000/about
と自分が指定したURLを使う事ができます。(勿論aboutの部分は編集できます)
例えば、トップページからhref="/about"でリンクが貼られているのに遷移しない！って場合とかです。ここでURLを指定することによって遷移させる事ができます。
終わり
きっとこれで大体動くでしょう！自分の場合は動きました。まあ問題としてはデータが0って事です。
ひとまずこれで大体構造を理解したので、コードを読み進める作業に移る事ができそうです。
これからはWP-CLIを使ったりして、引き継ぎに優しいエンジニアになろうと思います。
他に巡りあったエラーについて
うまく表示されない
PHP的に途中でエラーが起きるとそれ以降が表示されないので、エラーは潰していきましょう。
プラグインの導入
うまく表示されない１つの原因としてプラグインが正しく導入されていない場合があります。Undefined ~()とか言われたら、プラグインで足りていないものがないか確認してみましょう。