htmlもcssも知らなかった僕がWordPressでサイトを2つ作ってみた

2016年02月16日
後藤一也

7Fスタッフ日記 Web制作やWebサービスやITネタ WordPress カフェラッシュ坂男

20160214-2

こんにちは！コワーキングスペース7Fスタッフのカズヤです。いつも僕はこのスタッフブログで趣味の坂めぐり記事を書いているのですが、せっかくWordPressのパイオニアとして有名な星野さんのもとでコワーキングスペースのスタッフをしているのだから僕も作ってみようということでhtmlもcssも何も知らなかった僕がWordPressを使ってサイトを作ってみたのでその経緯と実際に作ったサイト2つを紹介しようと思います！

最初にしたこと

僕がサイトを作ろうとした経緯は星野さんが僕に「いちばんやさしいWordPressの教本人気講師が教える本格Webサイトの作り方第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)」をプレゼントしてくれたことから始まります。サーバーや独自ドメインを取得するにはお金がかかるんだーと思ったぐらい当時の僕はほとんど何も知らなかったのですが、とりあえずこの本通りに進めてみたらそれらしきものができました。この本に書かれていることをほとんど真似しただけだったので具体的なcssやphpのいじり方は分からなかったのですが、WordPressを使えばサイトが作れちゃうんだということをこの経験を通して知りました。

この頃知った言葉

独自ドメイン
サーバー
html
css
php
Jetpack
テーマ
プラグイン
SEO

テーマとプラグインを見つけた

星野さんの本で紹介されていたテーマ以外にも無料で変更できることを知り、色々と検索しながら他のテーマをいくつか試してみたりプラグインを使えば色々と機能を追加できることを知ったのでいくつかダウンロードしてみました。こうしていくつかテーマを試していくうちに自分の好きなようにデザインを変えられたらいいなと思った僕はコワーキングスペース7Fのスタッフである利点を活かしてコワーキングスペース7Fに大量にあるWordPress関連の書籍で気になったものをリブライズを使っていろいろと借りてみました。(コワーキングスペース7Fの月額会員とスタッフは7Fにある蔵書を借りることができます。ドロップインの利用者さんはスペース内であればどんな本でも読むことができます。)

この経験でcssとphpについて少し理解をした僕はもっとオリジナルなサイトだったり、Webサービスを作れればいいなと思い始めたのです。

この頃知った言葉

子テーマ
条件分岐
カスタムフィールド
カスタムタクソノミー

そして実際に作ってみたのが以下の2つのサイトです。

坂男(さかおとこ)

このサイトは僕の趣味である坂めぐりの魅力と、僕の専攻分野である都市政策や都市社会学の知識をアウトプットしようと思って作ったサイトでした。最初は坂めぐり記事だけをあげようと思っていたのですが、ネットでいろいろ検索するうちにhoriemon.comのような、ニュースに自分のコメントを付けて投稿するニュースキュレ―ション的なことがWordPressを使えばできることを知り、機能を追加してみました。

仕組みとしてはZapierを使ってTwitterのアカウントとWordPressを連携して、僕が特定のキーワード付きでつぶやいたツイートの中にある記事タイトルとURLを取得してWordPressの投稿タイトルとページ内に反映させている感じです。面白そうなニュースがあったらつぶやいておけばそのツイートがWordPressの投稿になるので便利だなーと思って使っています。僕は基本的に短いコメントが多いので検索結果に悪影響を与えないようにニュースキュレ―ションの記事はno indexにしています。

この頃知った言葉

Zapier
Page Builder

カフェラッシュ

このサイトはカフェの混雑状況や電源・WiFiの有無を確認・共有できるサイトです。六本木にあるスターバックスに行った時に席がほとんど空いてなかったことから、カフェに行く前にあらかじめリアルタイムの混雑状況が分かれば便利だなーと思って作ってみた、ユーザー同士の助け合いのサイトです。現時点では東京都・埼玉県・神奈川県のスターバックスとエクセルシオールカフェが全店舗掲載されています。

このころサブドメインの存在を知り、新たに独自ドメインを取得しないでもサイトが作れるとのことだったので、sakaotoko.comのサブドメインとしてカフェラッシュを作りました。仕組みとしてはカフェにリアルタイムでいる人がカフェラッシュのページ経由で混雑率ボタンをクリックしてTwitterにつぶやかれたものをTwitterウィジェットを利用してそれぞれのカフェのページに表示させることで、これから行こうとしている人が混雑状況を把握できる流れです。

ある程度のユーザー数が無いとリアルタイムでの混雑状況のシェアは難しいのかなと思うのですが自分が困ってたことを解決できる仕組みを作れたので満足してます。カフェの基本情報を入力する時にはadvanced custom fieldsがとても便利でした。

この頃知った言葉

サブドメイン
api
Twitterウィジェット
advanced custom fields

今後の予定

こんな感じでWeb関係の知識が全くなかった僕でも書籍やインターネットのサイトを参考にしたら簡単に思い通りのサイトを作ることができたので、ネットで正しく検索する力があれば意外と独学でできちゃうんだなと思いました。坂男はこれから更新していくのでチェックしてみてくださいー。

7F

この記事を書いた人

後藤一也

（後藤一也の記事一覧）

大学3年生です。2014年の10月から7Fのスタッフをしています。2015年から英語とフランス語の他にラテン語・スペイン語・イタリア語の勉強を始めました。趣味は坂めぐりで東京都心部の坂を歩いて周っています。興味のある分野は都市社会学や都市政策です。2016年の8月から1年間フランスのパリに留学する予定なのでそれまでよろしくお願いします！