こんにちは、セブンシックスのダイチです。今回はwordpressでブログ形式ではない一般的なウェブサイトを制作するときの手順を紹介します。要点のみ箇条書きで書いていきますので、それぞれの項目の詳細は自分で調べてね。

事前準備

すべてのページのデザインが揃っているものとします。サイト全体の構成を把握して、どれを固定ページにするか、カスタム投稿タイプやカスタム分類は必要か、URLをどうするか、どのプラグインが必要かなどを考えます。

インストール

1. MySQLデータベースを作成
2. 最新版のwordpress本体をwordpress日本語サイトから入手。
3. 解凍したファイル一式をサーバにアップロード。
4. install.phpにアクセスしてデータベース情報を入力。テーブル接頭語は「wp_」から別のものへ変更。
5. サイト名やユーザー名などを入力。ユーザー名は「admin」以外で、パスワードは強力なものに。
6. インストール完了！
7. とりあえず管理画面にログインして「WP Multibyte Patch」を有効化。
8. wp-config.phpのパーミッションを「400」に変更。

構造設定

1. 「Custom Post Type UI」を入れてカスタム投稿タイプとカスタム分類を作成。
2. 「Custom Field Suite」を入れて必要なカスタムフィールドを作成。
3. 必要に応じて「Custom Post Type Permalinks」を入れてカスタム投稿タイプのパーマリンクを設定。
4. パーマリンク設定を保存！.htaccessファイルが作成されるのでパーミッションを「604」に変更。
5. 必要な固定ページをひとまず空で作成して、各ページのパーマリンクを確定。
6. 表示設定からフロントページと投稿ページを設定。
7. 「WordPress SEO by Yoast」を入れて「タイトル＆メタ」から投稿タイプごとのタイトルルールを設定。ついでに、必要があれば投稿タイプや分類にnoindexを設定。
8. SSLページが必要なら「WordPress HTTPS」を入れて設定。
9. 必要があればSSLページの編集画面のWordPress SEO by Yoastボックスの「高度な設定」からカノニカルURLを「https://〜」に設定。また、「Redirection」でhttps://〜に301リダイレクト。
10. 「PS Taxonomy Expander」を入れて分類の並び順を設定できるようにする。

画像の設定

1. functions.phpでアイキャッチ画像が使用できるよう設定する。
2. メディア設定から各画像のサイズを設定。
3. 「Imsanity」を入れて、アップロードした元画像が指定したサイズに自動でリサイズされるよう設定（デジカメ画像などの大きな画像をそのままアップしても大丈夫）。
4. 「EWWW Image Optimizer」を入れて画像が自動でロスレス圧縮されるようにする。
5. 必要があれば「Simple Image Sizes」を入れて画像サイズを追加する。
6. 必要があれば「Easy FancyBox」を入れて、画像へのリンクが自動でモーダルウィンドウで開かれるようにする。

投稿の設定

1. 「PS Disable Auto Formatting」を入れて自動整形を停止。
2. 「TinyMCE Advanced」を入れて設定項目から自動整形を停止。
3. （上記2つのプラグインを入れることで、投稿画面のビジュアルとテキストを交互に切り替えてもタグが増えたり消えたりしなくなる）
4. 必要があれば「AddQuicktag」を入れてタグボタンを追加する。
5. 必要があれば、投稿内でiframeが使用できるように設定する。投稿者がショートコードを使えるなら「iframe」を入れる、使えなければ「wp_kses_allowed_html」フィルターフックでiframeタグの使用を許可する。

バックアップ設定

1. 「UpdraftPlus Backup and Restoration」を入れて自動でwp-contentフォルダおよびデータベースがバックアップされるよう設定。Google Driveなどに保存していれば、サーバが取り返しのつかないことになっても大丈夫（じゃないけど大丈夫）。
2. 「WP Database Optimizer」を入れて自動でデータベースを最適化するよう設定（昔、たまにwp_optionsテーブルのオーバーヘッドでサイトが表示されなくなることがあったので念のため）。
3. デフォルトだと無限にリビジョンが蓄積されるため、wp-config.phpでリビジョンの保存件数を指定。「WP Total Hacks」が入っていれば、そっちでも設定できる。

テーマ作成

1. 新しいテーマ用のフォルダを作り、直下にstyle.cssを作成。テーマ情報を記述。
2. 画像やjsなどのフォルダを作り、必要なファイルを準備。
3. まずは普通にHTMLでコーディングしておくと効率が良い。テーマフォルダ直下に仮のHTMLファイルを作って、そのままコーディング。
4. コーディングした仮のHTMLをもとに、テンプレートファイルを作る。WordPress Codex 日本語版のテーマの作成を参考に。
5. 「WP-PageNavi」や「Breadcrumb NavXT」などの表示に関するプラグインを入れたり、固定ページへのコンテンツ入力も平行して進める。
6. メールフォームは「Contact Form 7」や「MW WP Form」など要件にあったものを。
7. 404ページもちゃんと作る。
8. 完成したら、仮のHTMLファイルをテーマフォルダから削除。
9. テーマフォルダ直下に「screenshot.png」を作成。サイズは横880px縦660px。

アクセスアップなど

1. 「Jetpack by WordPress.com」を入れてパブリサイズ共有を設定。
2. 「WordPress SEO by Yoast」でOGPタグを設定。
3. 「WordPress SEO by Yoast」でXMLサイトマップを設定。詳細な設定が必要な場合は「Google XML Sitemaps」のほうが自由度は高い。
4. シェアボタンは「Simple Share Buttons Adder」や「WP Social Bookmarking Light」などたくさんあるので設置できるボタンの種類や見た目でお好きなものを。
5. 関連記事表示は「Yet Another Related Posts Plugin」が便利。
6. 必要があればフィードにカスタム投稿タイプを追加。
7. 必要があればフィードにアイキャッチ画像を追加。
8. 「DuracellTomi’s Google Tag Manager for WordPress」を入れて設定。Google Tag Managerを使わないでGoogle Analyticsを使うときは「Google Analytics by Yoast」や「WP Total Hacks」が便利。

その他もろもろ

1. 「WP Total Hacks」で細かいことがいろいろできる。
2. テスト環境から本番環境へwordpressを移動するのに「Duplicator」が便利。
3. リニューアルなどでページが移動になるときは「Redirection」で301リダイレクト。
4. セキュリティに関してはWordPress の安全性を高めるを参考に。セキュリティ系のプラグインは「Wordfence Security」が無難な印象。
5. 管理画面の一覧表示項目をカスタムしたいときは「Admin Columns」が便利。
6. 既存のページを公開したまま修正したいときは「WP Post Branches」が便利。

あとがき

思い出しながら書いたので、順番がおかしかったり、抜けがあるかもしれません。この記事は、2年以上前に、私の個人ブログに投稿した記事が元になっています。2年も経つと、スタメンのプラグインにも変動がありますね。最後に一言だけ言わせてもらうと、facebookのpage pluginの最大横幅が500pxというのが納得いかないということだけです。