WPメモ - このドキュメントについて

WPサイトを構築する際に詰まったり調べたりしたことをまとめました。
自分自身で調べたことが中心となっているので、決して網羅的に書かれたものではないですが、どこか参考になれば幸いです。また、指摘・ツッコミありましたらコメントお願いします。

WPメモ - WP基本編

登場人物

コア(WP本体)
- 通常の開発ではこの部分は触らない
- 但し、wordpress/wp-config.phpはWPインストール時に自動・または手動で各環境の設定を記述する必要がある。（このファイルはWP更新時にも上書き対象外）
- 触ったとしても、WPの更新で上書きされる
DB
- WPの基本情報や、コンテンツを保存する
- WPインストール時にWP用のDBスキーマ、テーブルが用意されているので個別にテーブルを作成するなどの手順は必要ない。
テーマ
- WPで開発といった場合、このテーマを制作することがメインの作業となる
- wordpress/wp-content/themesに配置される
- wordpress/wp-content/themes/stlye.cssにコメント形式でテーマの情報を記載することで、コア側からWPテーマであると認識される。
  → Codex - テーマの作成

WP起動

コアのwordpress/index.phpをリクエストすることでWPの処理が開始される。
→ localhost:8000/wordpress/index.php とか

テンプレートの優先度

いわゆるMVCモデルのアプリケーションとは違い、リクエストと表示されるページが一致するわけではない。
リクエストされたページの種類によって、起動するphpが異なる
→ Codex - ファイル:wp-template-hierarchy.jpg

functions.php

wordpress/wp-content/themes/{theme-name}/functions.php
そのテーマに対して機能を追加したい場合、このファイルに追記する
- 関数定義すれば共通関数として各テンプレートから呼び出すことができる
- フックを利用して、あるタイミングで定義した関数を実行することができる

フック

アクションフック
- ある処理が完了したタイミング等、WP側が発火するイベントに任意の処理を追加することができる
  → Codex - プラグイン API/アクションフック一覧
フィルターフック
- DB保存前やページへの出力等、入出力のタイミングで処理を追加することができる
  →Codex - プラグイン API/フィルターフック一覧
このページの説明がわかりやすいです
Web Design Recipes - WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック

WPメモ - WPテーマ編

テーマを制作するためのテーマ

調べた結果、underscoresというテーマが良さげだと思い採用した（もちろんjavascriptのunderscore.jsではない）

こちら → underscores

採用に至ったポイント
- スクラッチ開発のためのテーマと銘打っている
- sassが導入済み
- sassがなんとなくSMACCS風の階層構造が用意されていた
- インストール時点ではデザインはほぼまっさら状態なのでクセがない
  →参考スターターテーマ_sを使ってWordPressのテーマをつくる

WPメモ - 実装編

テンプレートタグ
- あらかじめリファレンス確認しておくとよい
- Codex - テンプレートタグ
ループ
- 各ページのphpが呼ばれた時点で、そのページが本来表示すべき情報は既に取得している
- 情報はhave_postsを使ってループ内で取得する（個別記事ページも同様の方法で取得する）
  → Codex - ループ
query_postsとget_posts
- あるページでのメインクエリ以外の情報を取得したい場合に
  query_postsでクエリを発行するとメインクエリを書き換えてしまう get_postsを使うとメインクエリは書き換えない
  → Codex - テンプレートタグ/query posts
add_image_size
- ページ上で使用するアイキャッチ（WP上ではサムネイル）のサイズをadd_image_sizeで指定しておくと、画像アップロード時に指定したサイズのアイキャッチを生成してくれる
- アイキャッチサイズ変更時には後述のプラグインで再生成可能
外部リソース読み込み
- css: wp_enqueue_style
- js: wp_enqueue_script
共通テンプレート
- サイト間で使いまわすタグをテンプレートとして別ファイルにしておく
- get_template_partで呼び出す
- テンプレートに変数を渡したい場合、テンプレート呼び出し直前でset_query_varで定義する
サイドバーウィジェット
- サイドバー追加したい場合、sidebar-{name}.phpを追加する
- 管理画面 > 外観 > ウィジェットを追加

WPメモ - プラグインまわり

画像アイキャッチのサイズを後から変更したい
- Regenerate thumbnail
  → add_image_sizeのサイズ変更後、管理画面 > ツール > Regen. Thumbnails > Regenerate All Thumbnailsクリックで再生成
ヘッダー画像にフィールドを追加したい
- プラグイン無しでも通常の投稿にカスタムフィールドを追加することは可能
- ヘッダ画像にリンクを貼る → アップロードした画像にフィールドを追加したい
- Advanced Custom Fields
- 管理画面 > カスタムフィールド > 新規作成 > フィールドを追加
  - 任意のフィールド名
  - 位置: Attachment, 等しい, 全て
    → フィールド追加される
- 追加したフィールドの取得

<?php
  $headers = get_uploaded_header_images();
  foreach ( $headers as $h ) {
    // added_field: 追加フィールド名
    added_field =  get_post_meta($h['attachment_id'], 'added_field' , true);
    $header_image_src = wp_get_attachment_image_src( $h['attachment_id'], 'thumb_size' );
  ?>
    <div><?= $added_field ?></div>
    <img src="<?= $header_image_src_pc[0] ?>" alt="">

<?php
  }
?>

表示中の記事に関連した記事を表示させたい
- Yet Another Related Posts Plugin (YARPP)
- とりあえず表示させるには
- 管理画面 > 設定 > YARPP > 関連スコア設定
- 表示する最低関連スコア: 数値低いほど関連として表示されやすくなる
- タイトル、内容、カテゴリー、タグ: いずれかを検討するに設定する
- 関連記事のタグのカスタム
- 管理画面 > 設定 > YARPP > 表示設定ウェブサイト用
- カスタムを選択
- wordpress/yarpp-template-relative.phpのファイル名でテンプレートを作成する
  → テンプレートの内容については基本ループとほぼ同じ構造カラクリ - YARPP のテンプレートを活用する方法

WPメモ - トラブルシューティング

ローカル開発時にスマホ等別端末からアクセスできない
- サイトURLがデフォルトだとlocalhostになってる
  → サイト内のリソースリクエストがlocalhostになってしまう
- サイトURLをIPに変更することで解決
リダイレクト設定等、WP以外の設定を.htaccessに書いても上書きされてしまう
- パーマリンク変更時に.htaccessを自動で更新するため
- WPが上書きする領域は決まっているので、それ以外の領域に記載する

##########
# WP以外の設定は[BEGIN WordPress ~ END WordPress] 領域外に書く
##########
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

完全な環境コピーができない
- カスタムフィールドの設定等（カスタムフィールドの値自体はコピーできるが設定は各環境個別に設定する必要ある）
- 解決はできなかったので、とりあえずMySQLdumpとXMLエクスポート、uploads配下をバックアップ取る
- データのコピー自体はXML（添付ファイル含める）で移行できたので、各プラグイン設定等は手動で行った
間違えてWPアドレスを変更してしまった
- WPアドレス=物理的にWPが配置されている位置を指すので、間違えると表示できなくなる
- 直接DBの値を書き換える
- WP用のDB > wp_options > siteurl
諸々調べるには...
- とりあえず公式サイトを確認する

Wordpress調べたことメモ