loadingloadingloadingloadingloadingloadingloadingloading loadingloadingloadingloadingloadingloadingloadingloading

個人的に WordPress で構築するときいつも最初にやっている4つのこと

Written by
ひろと
DEVLOG
フロントエンド
Wordpress
開発

こんにちは。デザインとフロントエンド担当ヒロトの開発ブログです。
今回は WordPress 初期構築の段階でいつもやっていること & ビギナーのとき知りたかったことをメモ程度に書き記しておきます。

＊ あくまで僕個人のメソッドなので、ふぅーん程度に思ってください

固定ページの「サンプルページ」を「トップページ」にする

インストール時から存在するサンプルページくん、削除するのも面倒もったいないので有効活用してあげましょう：

  1. 名前を「トップページ」に変更
  2. スラッグも home や top に変更
  3. 設定 > 表示設定の「ホームページの表示」を「最新の投稿」ではなく、固定ページ > さっきの「トップページ」へ

「サンプルページ」は最初から公開状態になっています。放置すると検索結果に出てしまう（= 恥ずかしい🙈）ので使わないのであれば下書き、非公開あるいは削除しています（ページ ID が 2 なのでトップページ用に使うとなんか綺麗でイイんですよね）。

また、「ホームページの表示」が「最新の投稿」になっていると（具体的に何だったかは思い出せませんが）ちょっとした不具合・不都合が発生するので必ず固定ページにしています。

テーマ関数に基本機能追加

テーマ関数（functions.php）にはミニマムこれらを追加しています：

add_theme_support( 'title-tag' ); // タイトルタグを出力。必須。Yoast SEO にも必要だったかな
add_theme_support( 'post-thumbnails' ); // アイキャッチ設定できるようにする。必須。
add_theme_support( 'menus' );  // WP メニューが使えるようにする。必須。[ 外観 ] から [ メニュー ] が選択できるようになる。他にも書くことがあるがここでは割愛。

add_post_type_support( 'page', 'excerpt' ); // 固定ページでも抜粋使えるようにする。たまに便利。

パーマリンク設定

カスタム構造を選び、 /%category%/ を間に追加してこういう感じにします：

/%category%/%postname%/

こうすることで

masudakohboh.com/blog/post-name
masudakohboh.com/news/post-name
masudakohboh.com/work/post-name (カスタム投稿タイプ)

このような形になってどのカテゴリの記事なのか判別できて綺麗です。

追記：スラッグについて（/%postname%/ 部分）

日本語環境では日本語で記事タイトルを入力したとき記事のスラッグもそのままタイトル通り日本語になってしまうので、都度英数字に書き直すか、全自動にしたければ例えば新規投稿の下書き保存時に自動的に記事 ID に書き直す処理をテーマ関数に追加するなど、いずれにしろ実際の運用ではもう一手間必要です（＊ 個人的に日本語 URL はオススメしません）。

追記: パターンその2

最初の方法では、記事のカテゴリが変わるとパーマリンクも変わってしまいリダイレクトさせる必要が出てくるため、気軽にカテゴリが変更できなくなります。

そこで、初期状態の /%postname% のみにしつつ、No Category Base (WPML) プラグインを入れることで下記のようになります:

// 投稿
https://yoursite.com/post-name

// アーカイブ
https://yoursite.com/blog  (カテゴリ)
https://yoursite.com/news  (カテゴリ)
https://yoursite.com/works (カスタム投稿タイプ)

// カスタム投稿タイプの投稿
https://yoursite.com/work/post-name
[ カスタム構造 ] をチェックするだけであとはノータッチ。最後スラッシュが付いてもよければ [ 投稿名 ] でも良いです。

プラグインを入れるだけで他には何もしなくてよいです。
ちなみにプラグインを使わずに [ カテゴリーベース ] にドット( . ) だけ入れる方法だとアーカイブページ（カテゴリの一覧ページとか）が 404 になるのでダメでした。

前述のように、カテゴリが変わっても記事の URL が変わらないようにしたかったのでどうすれば良いのかなと思って調べていたら、すでに当サイトでは以前からそのようになっていたのでそのまま流用することにしました（ﾃﾍｯ

プラグイン追加

以下、毎回入れてます：

  • WP Multibyte Patch
    • ファイル名に日本語名が入ってるメディアをアップロードしても英数字に変換してくれる
    • すでにアップロードされているメディア名は変わらないので、初期の頃からインストールしておくのが吉
    • これが無いことによるエラーにはまだでくわしたことはないですが、URL 変換されたファイル名を見ると僕の OCD をトリガーするので最近の新規案件には必ず入れてます
  • Yoast SEO
    • 基本的な SEO 向けタグ生成してくれる
    • タイトルタグや検索結果の見た目もカスタム設定できるので、管理画面での記事名とは別にオモテ向きの <title> 文字設定できるところが便利
    • 記事編集ページからメタディスクリプション設定できる
    • 記事別、投稿タイプ別に検索結果に表示しないように設定もできる（プライバシーポリシーとか）
    • 記事コンテンツの SEO チェックしてくれる（画像の ALT が抜けてるよーとか）
    • 「こら、ソースコードに SEO タグ直接書くんじゃない！」
  • Yoast Duplicate Post
    • ワンクリック記事複製ボタン追加
    • 構築時、記事一覧用にダミーを量産したいときとかに
  • Custom Post Type UI
    • カスタム投稿タイプ作るやつ。「イベント」、「ポートフォリオ」、「プロダクト」のようにデフォルトの「投稿」とは分けて管理したいときに。ブログやお知らせ系ではない内容の投稿が他に1つでも必要なら確定インストール
    • テーマ関数でもカスタム投稿タイプ作れますが、同じコードが書かれていないテーマに切り替えると使えなくなるのと、単純にコードの入力が手間
    • このプラグインは設定を単体でエクスポートできるので本番サイトに移植したりバックアップ取ったりするのが簡単
  • SVG Support
    • メディアに SVG ファイルをアップロードできるようになる。僕みたいな SVG 大好きマンには必須
  • Theme Switcha
    • 自分の画面だけに任意のテーマを適用し、より正確にテーマプレビューできるようになる
    • 標準の「テーマ」→「プレビュー」はサイドバーついてるしリンク移動の挙動変だし、ちゃんとした画面/動作チェックには使いづらいんだよね…
  • All In One WP Migration
    • サイトのバックアップとデータの引越しに
    • エクスポート時、メディアなし、テーマなし、文字置換など、便利なオプションが満載
    • 最新バージョンは取り扱えるデータサイズが結構小さいので、制限の緩い古めのバージョン推奨。ベータ機能扱いだったけど任意のディレクトリ除外できるやつがあって便利だったなぁ…
  • Advanced Custom Fields や Custom Field Suite
    • カスタム項目追加します。すさまじく便利。これがないと僕は生きていけません。
    • ソースコードにプレーンテキストをダイレクトに書くのはよろしくないので、最近はこの子たちを駆使してページのメインコンテンツをほぼすべて記事編集ページから変更できるようにしてます。多少 WP の操作に慣れていれば他の人でも変更できるようになるので、テキスト変更や画像入れ替えなど情報更新するときラク
    • カテゴリや WPメニュー、ユーザにもカスタム項目追加できるよ
    • ACF の繰り返し項目は有料版（しかも最近のはサブスク…OTZ）じゃないと使えないので、PRO を持ってない・予算がない場合は CFS を使用
    • 「こら、テンプレートファイルに直接テキストを打ち込むんじゃない！」

とりあえずこんな感じでしょうか。
今回はこの辺で。バイバイ 👋