自作テーマでサイトリニューアル！

Saya

2021/04/18

2021年春、わんみんのサイトがリニューアルしました！

タイトルの通り、WordPressの自作テーマを作ってサイトのデザインを一新したわけですが、リニューアルサイト完成までの裏話を、今回のRoomsで書いていきたいと思います。

　2年前にも自分たちでコードを書いてわんみんのテーマを作ったのですが、そのときは短期間でHTML・CSS・JavaScript・PHPをかじって詰め込み、WordPressの知識もままならない状態で開発をしたので、まぁコードが汚い汚い。そのため、「もう一回きちんと勉強して書こう」と思っていました。

今回のリニューアルにあたり、WordPressの仕組みを勉強し直して、理解した状態で開発ができたので、構想したものを形にできたことがよかったです。開発の話も後ほど書いていきます。

2.　デザイン再考

　そして、さっそくデザインを決めていきました。

　今回のサイトのデザインで意識したのは、

　「動画(記事)の流れが見やすいこと」と、

　「動画と練習問題が１つのページに綺麗にまとまっていること」です。

　色々なサイトを参考にしながらデザインを決めていきました。

　そして、今回のデザインの肝になったのは、それぞれの講義の顔となる “サムネイルカード” です。デザイン的には、スタイリッシュで見やすくて素敵です。もちろん、この時も「いいやん！」って思ってました。しかーし、これが後々自分たちの首を締めることに・・・・

3.　ごりごりテーマ開発

　デザインが決まったあとはHTML,CSSで外観を書き、さらにそれをWordPress仕様にするためにPHPで書き直していきました。(WordPressは主にPHPで動いています) WordPress特有の書き方や関数がたくさんあるため大変ですが、YouTubeの解説や書籍が充実しているため、調べれば大体のことはできると思います。

　今回のテーマ開発で大変だったことは、「連続講義」「単発動画」「記事」の３種類のカテゴリで表示の仕方を変えるようにしたところです。

　WordPressでサイト運営をしたことのない読者の方もいると思うので簡単に説明しておくと、WordPressはサイトの運営やブログの作成ができる「コンテンツ管理システム（CMS）」の一つです。Web関連技術がなくても、手軽に記事投稿やサイト運営ができることから、全世界で最も使われています。WordPressはサイトを管理するシステムなので、記事の投稿や編集、サイトのデザインの変更、サイトのアナリティクスやコメント、お問い合わせ等々をを一括で管理できる「ダッシュボード」というページがあります。このページで「テーマ」というものを設定することによって、サイトの外観やダッシュボードの機能などをそのテーマの仕様に応じて変更することができます。

　デザインや機能をめちゃくちゃこだわるサイトを作らないのであれば、WordPressが提供してくれているテーマで十分素敵なサイトが作れます。(既存のテーマのセンスもとても良いです) しかし、私たちのように記事によって表示方法を変えたり、動画を埋め込んだりするのであれば、テーマを自作した方が自由にデザインや機能を作れるので手間はかかりますが納得のいくものができます。どんなファイル構成でテーマが出来上がるのかについては、詳しくわかりやすく解説している方が沢山いますので、興味があればぜひ、ググってみるといいと思います。

　ちなみに、WordPressのテーマは外注すると、仕様によっては結構いいお値段になるので、こだわりたい人は自分でスキルをつけて書いた方がお得な気がします。SEO対策とか、セキュリティの面とか結構大変だと思いますが、、、まぁ、お金出すか、時間をかけて努力するかですね、笑

　長くなりました、次にいきます。

4.　地味すぎた移行作業

　なんだかんだで無事にサイトが形になり、旧サイトからの移行作業にうつりました。この移行作業がまぁほんとに地味でした。すごくアナログなんですよね。地道に前のデータをコピーしてペーストして移していくっていう。

　私たち2人ではとてつもなく退屈で時間もかかりそうだったので、友達にも手伝ってもらってカラオケで作業をしました。とても助かりました、ありがとう！！

　で、この作業の中で先ほど登場した“サムネイルカード”にめちゃくちゃ苦しめられました・・・。冷静に考えると、連続講義のカード、それぞれの動画のカード、記事のカードなどなど、現在わんみんで公開している記事全部に作らないといけないんです。200枚近く作りました。大変でした。なんでこのことに気づかなかったんでしょうか笑

　でも、頑張って作ったおかげでいい感じにサイトが仕上がりました。よかったです。達成感がありました。

長くなりましたが、こんな感じでサイトのリニューアルを進めました。新しいものを学んだり、作ったりすることは大変ですが、自分たちの手で完成させたものにはやはり、誇りや自信が持てます。

楽できる場所にいつまでもとどまらないで、comfort zoneからどんどん出ていこう！（Ritsukiが言ってた）

おしまい！

適当にまとめました。