先日公開した『雑記ブログ研究所』
作成にあたって僕がしたことをまとめました。
今回は技術的な話。wordpressを強引に改造してみました。
※現在運営を停止しています。
最終的にできたサイト:『雑記ブログ研究所』
目標(前回決めたこと)
・ブロガーを宣伝するサイトを作りたい
・ブログ専門のアンテナサイトのような機能が欲しい
・記事形式での宣伝＋webアプリっぽい機能での宣伝を組み合わせたい
STEP1 事前知識を蓄える
いよいよ実際に作成開始！ ……となったわけですが、最初は途方に暮れていました。
何から始めればいいか分かんねえ。
アンテナサイトっぽいのを作ろうとは決めましたが、それがどういう仕組みで動いているのか、何を勉強すればいいのかさっぱりわかりませんでした。
知っていることと言えば、
・wordpressの基本的な使い方
・phpとmysqlのちょっとした知識
・アンテナサイトはwordpressで作れるらしいという口コミ
くらい。
とりあえず、wordpressで作った普通のブログにアンテナ機能とかいろいろくっつけたり魔改造すればいい感じになるんじゃないの？ という楽観的な予想のもと、情報をひたすら集めました。
主にネットで調べて勉強しましたが、本で参考になったのは以下の３冊。
PHP+MySQLマスターブック
この本はタイトルの通りPHPとMYSQLの基礎を理解するのに便利でした。
目的別に解説がされているので、辞書のようにして使うことができます。
HTML5&CSS3デザインブック
こちらはブログやニュース系サイトのデザイン方法について主に書かれた本。
実践的な内容が多く、初めからソースを真似して書いていくだけでいい感じのwebサイトが作れます。（サイトからサンプルプログラムをダウンロードが出来る）
この本では特に、スマホとパソコンで見え方を変更させるレスポンシブデザインについての説明が詳しくて分かりやすかったです。
仕事の現場でサッと使える! デザイン教科書
この本はwordpressのサイトをデザインするための解説が載った本です。
具体例をもとに、普通のwebサイトのプログラムをwordpressのプログラムに置き換えていく作業を学べます。（こちらもサイトからサンプルプログラムをダウンロードできる）
以上の3冊をメインにして勉強を開始しました。
STEP2 実際に作ってみる
本を読みながら、とにかくphp,html,cssを駆使してなんか作ってみようとしました。
作戦としては、
まず『PHP+MySQLマスターブック』を読みながらアンテナサイト機能を作成し、
次に、作った機能に合わせて『HTML5&CSS3デザインブック』を読みながらいい感じのサイトデザインを作成し、
最後に『仕事の現場でサッと使える! デザイン教科書』を読みながらデザインしたサイトをwordpressのテーマ化して宣伝機能やブログ機能を追加させる。
といった感じ。
というわけで、まずはphpを使ったアンテナサイトの作成を始めました。
アンテナサイト作り
ここから先の僕の悪戦苦闘は長くなるので省略します。
ざっくりいうと、
アンテナサイトの扱いが思いの外難しそうだったので色々と妥協しながらごまかしていたら最終的にアンテナサイトのようでアンテナサイトでない別の何かが完成した。
最終的にどんなのができたかというとこんな感じ。
みんなの記事(※)
最初は普通のアンテナサイトのように、自動でブログのRSSを読み込んで記事が追加されていたら自動でタイトルと画像を取得して一覧表示……というようにしたかったのですが、いろいろ諦めて半手動にしました。
半手動というのはユーザーの人にフォームから記事のurlを入力して送信してもらうようにしたということで、そこから記事のタイトルを自動で取得して一覧表示するようにしました。
仕組みとしては↓
・フォームから入力された記事のurlを取得する
・urlからその記事のタイトルを取得する
・記事のタイトルとurl、入力された日付やその他もろもろをmysqlのデータベースにぶち込む
・ぶち込まれたデータを一覧にして表示する
その他に、記事をカテゴリ別に表示する機能、リンクを踏んだ回数をカウントして人気順に表示する機能なんかを追加しました。
なぜ自動更新にしなかったかというと、
・記事をカテゴリ別に分類して表示させたかったが、自動でカテゴリの分類ができなかった
・同じブログ内の記事でも宣伝したい記事としたくない記事があるだろうと思ったから
・毎回サイトを開いて手動での送信を必要にすることで、サイトのPVを増やせるのではないかと考えたから
などの理由から。
100%満足のいく出来ではないものの、とにかく早く完成させたかったのでcssで簡単にデザインをいじって次の段階に進みました。
wordpressのテーマづくり
一応オリジナルな宣伝機能は作れたので、今度はそれに合うようなサイト全体の骨組みを作ることにしました。
当初の予定では一から考えてwordpressのテーマまで自分で作ろうと思ったのですが、時間がかかりそうなので既存のテーマを使ってしまいました。
じゃあお前の買った本は何だったんだよ……という話ですが、細かいカスタマイズをするときに十分役に立ちました。今なら少しデザインをいじるくらいならググらなくても自力でいけます。
ちなみに使用したwordpressのテーマはこれ。
ご存知の方も多いと思いますが、このテーマは無料の割に物凄く機能が充実しています。拡散機能やSEO対策もばっちりで、自分でこのクオリティを作るのは何年かかるのかなあというレベル。
とりあえずこれを用いてサイトの骨組みは完成。
ブログとアンテナ機能の合体
一番よくわかんなくて不安だったのがこの部分だったのですが、調べていくうちに良い記事を発見。
WordPressのテンプレートタグやデータベースの情報を外部ファイルから利用する
オリジナルで作ったphpファイルをwordpress全体のファイルの上位の場所におき、
作ったphpファイルのプログラムの上部に
<?php require_once (‘./wordpress/wp-blog-header.php’); ?>
↑これをそのままコピペするだけ。これだけでwordpressの関数が自由に使えるようになりました。
とても簡単で便利。
自分の場合はwordpressのブログと独自のphpファイルを同一サイトに共存させたかったので、
・オリジナルのphpファイルにget_header();とget_footer();の関数を加える。
・wordpress側の設定でオリジナルのphpファイルと同じ名前の固定ページを作成する。
（例えばtest.phpのファイルをオリジナルで作ったなら、○○.com/testの固定ページを作成する）
というようにしました。
すると、サイトではwordpressの固定ページが表示されるはずのところに、なぜか自作のphpファイルが実行されて表示されるようになりました。（検索結果やアイキャッチ画像などではwordpress側の設定が反映されている。なのに表示されるのは独自に作ったファイルの結果）
調べても良いやり方が見つからなかったので自分で試行錯誤してこうしたのですが、おそらく一般的なやり方ではないと思われます。まあでも不都合はなさそうなのでこれで良しとしました。
脆弱性を潰す
これについてはひたすらgoogleで調べる→潰すを繰り返しました。こんなサイトに悪いことする奴なんかいるのかと思いつつも、念には念を入れてここだけは慎重に行いました。
詳細は省略。
完成
仕上げに細かいデザインやサイトの説明記事を書いて、ようやくサイトが完成しました。
企画から完成まで、かかった時間およそ一か月。
大学以外の時間をほぼすべてこれに費やしていました。（割と楽しかった）
さて、これでいよいよサイトの公開です。
果たして素人が独学で作ったサイトはどうなったのか。
次の記事に続きます。
次の記事：ブログを宣伝するサイトを作る～運営編～
コメント