WordPressとBootstrapを使って簡単に検索サイトを作る18のステップ #wordpress

趣味と勉強をかねて、WordPressをカスタマイズしてマラソン大会情報のサイトを作る。

海外マラソンナビ

海外マラソンナビ

目次

気合いいれたらすごい長文になったので記事の目次です。

01.サイトの構成
02.デザイン・htmlの作成
03.WPインストールとドメイン設定
04.WPのテーマ作成、トップページ作成
05.カスタム投稿タイプでマラソン大会の詳細ページを作成する
06.マラソン大会の開催時期や開催エリア別の一覧ページ=カスタムタクソノミーページをつくる
07.サイドバーの「まもなく開催の大会」を取得、表示させる
08.TOPページに「まもなく開催の大会」を写真、テキスト付きで表示させる
09.ニュース一覧と、ブログの一覧ページ = category.phpの作成
10.投稿記事 = single.php を作成
11.固定ページ = page.php を作成
12.Wordpressの不要な機能や表示を停止するためにfunctions.phpに記述
13.サイドバーのフリーワード検索機能
14.サイトマップの作成
15.データベースのバックアップのプラグインを入れる
16.リビジョンの自動保存機能を停止
17.SEO対策
18.他に使ったプラグイン

01.サイトの構成

制作の目的

  • 趣味(海外のマラソン大会や関連情報をまとめたい)
  • 趣味サイトでどの程度のアクセスにつながるのか実験
  • WordPressでのサイト制作の手順をブログ記事としてアウトプット(この記事)
  • Twitter bootstrapでデザインの省力化をノウハウにする

サイトの機能・要件

  • マラソン大会情報を、フリーワードや開催月や開催エリアで絞り込んで探せるようにする。
  • カスタム投稿やカスタムタクソノミーを使って大会情報を登録する。

02.デザイン・htmlの作成

基本的にいろいろなところで配布されている素材をお借りして、それらを組み合わせてつくる。
まず、WPに組込む前に、静的なhtmlを作る。

必要なテンプレートは、とりあえずトップページ、マラソン大会の詳細ページ、カテゴリー別一覧ページ の3ページくらいを用意して、あとは、WP上で組んでいくことにする。

テンプレのフレームワークとして、ありがちではあるがTwitter bootstrapをカスタマイズ(最近アップデートされたバージョン3.0ではなく2.3を使っている)

ベースのhtmlはここからソースをコピペ

twitterbootstrapのソース

コピペしたhtmlを、サイトの構成をイメージしながら、ヘッダー、サイドバー、メインコンテンツ部分、フッターとそれぞれ組み直していく。

その際、ボタンやリストなど、各パーツはbootstarpの各ドキュメントを参考に。
http://getbootstrap.com/2.3.2/base-css.html

ヘッダーにbootstrap-responsive.cssも読み込んでおけば、スマホで見てもいいアンバイに可変してくれるレスポンシブデザインに。

bootstrapのデフォルトまんまだと、ちょっとシンプルすぎるので、カスタマイズCSSを以下から拝借。

http://bootswatch.com/2/

今回は、unitedというオレンジがキーカラーのテーマを選択した。
ここも最新はフラットデザイン対応の3.0だけど、今回は少し古いバージョン2を使う。
(個人的にはフラットデザインて、のっぺりしててむしろ安っぽい感じがしてしまうが、これが主流になっていくのだろうか。。)

さらにもう少し装飾するため、背景画像をここよりダウンロードして、background-imageに敷く。

ロゴの作成

この無料ロゴ配布サイトから、ロゴマークだけお借りしてサイトのロゴを作った。aiデータがダウンロードできる。それをfireworksで少々切り貼りする。
このロゴマークは、サイトのキーカラーのオレンジであることと、「走る」というテーマにあったマークだと思ったので採用。

海外マラソンナビのロゴ

ここまで一応のデザインができた。

03.WPインストールとドメイン設定

WPのインストールやドメイン設定は、豊富にあるいろいろなサイトを見ながらセットアップ。
今回の環境は、サーバさくらVPS上に、WordPress3.6、ドメインは http://ma.fuweb.info/ を取得した。

さくらVPSにドメイン設定する方法についてはこちらの記事と同じ手順
さくらインターネットの専用サーバCentOSのドメインとphp設定まで | 元営業マンのWEB研究メモ

04.WPのテーマ作成、トップページ作成

wp-content/themes/以下に、適当な名前でフォルダを作る。

そのフォルダ内に

index.php
style.css
single.php
page.php
header.php
footer.php
sidebar.php

上の基本的な各ファイルを作っておく。カテゴリーページ等は、必要に応じてあとで追加する。

style.cssに、以下のような記述で、wpテーマとして認識させる。その後、WP管理画面にログインして、テーマをこのテーマに変更する。

先につくった、トップページのhtmlを、分割して、次のファイルにコピペする。

index.php
headr.php
sidebar.php
footer.php

次に、css,js,imageフォルダをアップロードする。
アップする場所は自分の好みだが、公開フォルダ直下にアップして
http://ma.fuweb.info/css/bootstrap.united.css
のように、読み込めるようにする。

これで、URLにアクセスして、TOPページだけは表示されてる状態になった。

05.カスタム投稿タイプでマラソン大会の詳細ページを作成する

カスタム投稿を使うため、2つのプラグインをいれる。

Custom Post Type UI
Advanced Custom Fields

まず、Custom Post Type UIを有効にして設定すると、投稿と固定ページと別に
マラソンという投稿画面をつくれる。

カスタム投稿タイプを設定した
カスタム投稿

投稿の下に、マラソンというメニューが表示された
カスタム投稿2

Custom Post Type UIの使い方、設定方法はこちら↓が詳しい。
カスタム投稿タイプの導入方法 – Custom Post Type UIの使い方 | WordPressのプラグイン | WP SEOブログ

次に、Advanced Custom Fields で、マラソン大会の情報を項目別に入力フィールドを作る。

入力フィールドが作れた
カスタムフィールド

Advanced Custom Fieldsの使い方はこちら
「Advanced Custom Fields」でカスタムフィールドを自由にカスタマイズ!【使い方】 | MD.WEBLOG | 長野県飯田市のフリーランス【MITAMA DESIGN】

マラソン詳細ページのテンプレート single-marathon.php を作る

テンプレート名は、 single-{カスタム投稿スラッグ名}.php で作ると、WPのほうで記事でも固定ページでもなく、カスタム投稿の詳細ページと認識してくれる。

ヘッダーやフッターなど共通部分を除いた、single-marathon.php

06.マラソン大会の開催時期や開催エリア別の一覧ページ=カスタムタクソノミーページをつくる

Custom Post Type UIのカスタムタクソノミー(カスタム分類)で、マラソン大会にひもづくカテゴリーをエリア=areaと、開催時期=period として作る。

以下ファイル名でテンプレートをつくると、各タクソノミーの一覧ページができる。

エリア別の一覧 taxonomy-area.php
開催時期別の一覧 taxonomy-period.php

サンプルとして taxonomy-area.php の抜粋

見た目が味気ないが、ひとまず各大会のタイトルをリストで表示できた。

エリア別マラソン大会

07.サイドバーの「まもなく開催の大会」を取得、表示させる

サイドバーに当月から翌月、翌々月の3ヶ月以内に開催となる大会を取得して表示する

もうすぐ開催のマラソン大会

PHPで現在の月、翌月、翌々月が何月かをそれぞれ取得してから、マラソン大会を抽出するためのパラメータをつくる。
ここでは、カスタム投稿タイプ=marathon、カスタムタクソノミー=period、そのタクソノミーが3ヵ月に該当するもの、を絞り込めるように指定する。

まず、functions.phpに追記

次に、リストを出力するsidebar.phpにループを追記

カスタムタクソノミーで絞り込みについて参考にした記事はこちら
WordPressの新機能 複数タクソノミークエリーまとめ | Simple Colors

08.TOPページに「まもなく開催の大会」を写真、テキスト付きで表示させる

間もなく開催の大会

上のサイドバーと同様に、3ヵ月以内に開催される大会をサムネイルとテキストつきで表示するには、index.phpに以下のように記述。

09.ニュース一覧と、ブログの一覧ページ = category.phpの作成

カテゴリーは以下2つを作成

・ニュース(スラッグ:news)
・ブログ(スラッグ:blog)

テンプレートは、タクソノミーページを同じ。

それぞれの一覧ページには、
http://(ドメイン)/category/(スラッグ名)
でアクセスできる。

10.投稿記事 = single.php を作成

ニュースやブログの投稿記事を以下にて出力

11.固定ページ = page.php を作成

お問い合わせフォームや、運営者ページなどに使う固定ページpage.phpも、投稿記事single.phpとほぼ同じで作成しておく。

12.Wordpressの不要な機能や表示を停止するためにfunctions.phpに記述

●投稿記事、固定ページ内の自動pタグを停止、特殊文字の変換を停止

●ヘッダーの不要なソースコードを非表示にする

参考にしました
WordPress Note – 自動挿入されるp、brタグを削除する方法
WordPressの特殊文字の変換を停止する設定方法 | ネタワン

13.サイドバーのフリーワード検索機能

WPが持つデフォルトの検索機能を組込む。

検索フォームの作成

sidebar.php の検索フォーム部分を次のように記述

検索結果のテンプレートsearch.phpを作り、以下ループを記述

デフォルトの検索機能だと、投稿ページしか検索結果に表示されない。
検索対象範囲がカスタム投稿ページ(ここではマラソン大会の詳細ページ)も検索にヒットするように次のプラグインを入れておく。

Search Everything

このプラグインの設定で、カスタムタクソノミー、カスタムフィールドを検索範囲にしておく。

searchevrything設定

これで、マラソン大会のページが検索されるようになった。
検索結果ページ

検索フォーム作成の参考記事
wordpress(ワードプレス)でsearch.phpを使ってみた。 | 株式会社LIG

14.サイトマップの作成

投稿記事やカスタム投稿記事、すべてを取得表示させたいので、サイトマップ用のテンプレートをsitemap.phpとして作成する。

これで、固定ページのほか、マラソンの一覧、ニュースの一覧を表示できた。

サイトマップ

15.データベースのバックアップのプラグインを入れる

WP-DB-Backup をインストールして、1日1回、メールで圧縮済みのDBファイルを送ってもらう。

データの定期バックアップ

16.リビジョンの自動保存機能を停止

必須ではないけれど、投稿数の数に伴い容量がかさむので、不要な自動保存機能を停止する。
wp-config.php に以下を追記すると、(各投稿1つの自動保存を除いて)リビジョン保存機能が停止できる
 

17.SEO対策

プラグインAll in One SEO Pack を入れておく。

マラソン大会を投稿するカスタム投稿タイプにも、metaタグを設定できるようにした。

SEOの対策プラグイン

18.他に使ったプラグイン

まだ紹介していないプラグインを最後にまとめておきます。

Custom Post Type Permalinks

カスタム投稿のURLをデフォルトの日本語URLから、投稿IDに変える。

カスタム投稿のURL変更

PS Taxonomy Expander

マラソン開催月や開催エリアで使ったカスタムタクソノミーの順番を入れ替えるのに使った。

カスタムタクソノミーの順序

Crazy Bone (狂骨)

WPの管理画面に不正ログインの履歴を記録する。世界中から絶賛アタックされてることがよくわかる、ネーミングがかっこよすぎるプラグイン。管理者ID admin は絶対使わないようにしましょう。

不正ログインプラグイン

以上でひとまず完成です。
今後コンテンツを充実させていきたい。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 5,085
スポンサーリンク

シェアする

フォローして更新を受け取る

スポンサーリンク