未経験からwebデザイナーになった私が、ステップアップするためのTIPSを紹介
webデザイン

HTMLとCSSで作ったサイトをワードプレス化する方法

ワードプレス化

こんにちは。sagayuriです。
世の中はすっかり年末モードですね。
わたしは年末の雰囲気が好きではなく、今年は実家に帰って過ごしていますが、ダラダラと時間だけが過ぎていくこの雰囲気がとても嫌です。

ちょっとでも気分転換したくて、地元のタリーズでブログ書き始めました。

来てみたら私みたいに、こんな時期でも日常感を味わいたい方がちらほらいて安心しました。

静的サイトのワードプレス化に挑戦!

今年は転職したり、病気が見つかって手術したり、波乱万丈いろんなことがあった年でした。10月に手術をして、今はまだお仕事も休職中ですが、この間にもちょっとでも何かしたい、知識をつけたい。と思えるようになりました。

そんな時に始めたのが、HTMLとCSSで作ったサイトをWordPressに移行する作業(WordPress化)。

「もう少しWEBデザインのスキルが身に付いたら」

「もう少しコーディングスキルが上がったら」

「JavaScriptができるようになってから」

そんな風に色々と理由をつけて先延ばしにしていたけど、どんどんできそうなことからやっていかないと、いつ病気や事故でどうにかなってしまうかもわからない!と思って、思い切って挑戦してみました。

ワードプレス化までの大まかな手順

1からネットを駆使して調べながら作業して、10ページのサイトでも40時間ほどでワードプレス化の作業は完了しました。

大まかな流れは下記のような感じです。

ワードプレス化までの道のり
  1. XDでワイヤーフレーム作成
  2. XDでデザイン作成(一部Photoshopも使用)
  3. HTMLとCSSでコーディング(ハンバーガーメニューだけjQiery使用)
  4. 作ったHTMLをWordPress用に分割。ファイル名を.phpに変える
  5. 画像やリンク先のパスをWordPress用のパスに変更する
  6. 本番のDBに手動でWordPressをインストール
  7. 本番環境での動作確認、デザインの修正

簡単に大まかにまとめるとこのような流れでした。
最初から携わると道のりがめちゃくちゃ長い…

PHPの理解が無くてもワードプレス化はできる

プログラミングの基礎的な勉強はしていましたが、それがどう活用されるのか、PHPの文法やルールは全く知らない私ですが、いろんな方の記事を参考にしまくった結果、必要な記述はほぼコピペでWordPress化の作業を行うことができました。

本当はWordPressの階層の構造とかもっとしっかりと理解しないといけないのだろうけど…

functions.phpとかの記述方法はネットにも載っているので、

・どの記述が必要か

・どの部分を変更して対応するか

この辺を自分なりに解釈してできることが大切だと思いました。

コピペで対応するにしても、この記述がなんの記述なのか理解していないと、不必要な記述ばかり増えてしまいますからね…

PHPの理解は無くても大丈夫ですが、自分が何をしているのかは理解できるようにしないとです!

HTMLとCSSのコーディングスキルの方がよっぽど大事

プログラミングの知識や記述よりも、このWordPress化の作業で大切なのは、

以下に綺麗でわかりやすいコーディングで作るか

この方がずっとずっと大事でした。

ファイルやリンク先のパスを変える作業や、ファイルを分割する作業の時に、構造がわかりやすい、見やすいコーディングでないと、後から触るのが苦痛になります…
今まで、希望通りのデザインに見えればOKというアバウトな思考でやっていた私にとっては大きな反省点ですし、今回やって良かったなと思いました。

コーディングスキルを上げたいなら、ワードプレス化はチャレンジしてみよう!

今回WordPress化に取り組んでみて、ずっとコピペで対応してたけど、段々とPHPの記述方法がわかるようになったり、自分のコーディングの構造の甘さなど気づきがとても多くて、コーディングだけ、PHPだけ単体で勉強するよりも総合的に、実践的に勉強になりました。

コーデディング終わってからの作業も時間もかかりますが、公開後の運用の手軽さも考えると、やっぱりWordPressって便利だなと思います。