Wordpress調べたことメモ

# 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テーマであると認識される。<br>
  → [Codex - テーマの作成](https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90#.E3.83.86.E3.83.BC.E3.83.9E.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88 "Wordpress Codex")

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

### テンプレートの優先度
- いわゆるMVCモデルのアプリケーションとは違い、リクエストと表示されるページが一致するわけではない。
- リクエストされたページの種類によって、起動するphpが異なる<br>
→ [Codex - ファイル:wp-template-hierarchy.jpg](https://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg "ページの優先度")

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

### フック
- アクションフック
  - ある処理が完了したタイミング等、WP側が発火するイベントに任意の処理を追加することができる<br>
  → [Codex - プラグイン API/アクションフック一覧](https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7 "API/アクションフック一覧")
- フィルターフック
  - DB保存前やページへの出力等、入出力のタイミングで処理を追加することができる<br>
  →[Codex - プラグイン API/フィルターフック一覧](https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7 "API/フィルターフック一覧")
- このページの説明がわかりやすいです<br>
[Web Design Recipes - WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック](http://webdesignrecipes.com/wordpress-action-hook-and-filter-hook/ "アクションフックとフィルターフック")






# WPメモ - WPテーマ編

### テーマを制作するためのテーマ
調べた結果、underscoresというテーマが良さげだと思い採用した（もちろんjavascriptのunderscore.jsではない）<br>
こちら → [underscores](http://underscores.me/ "underscore")<br>

- 採用に至ったポイント
  - スクラッチ開発のためのテーマと銘打っている
  - sassが導入済み
  - sassがなんとなくSMACCS風の階層構造が用意されていた
  - インストール時点ではデザインはほぼまっさら状態なのでクセがない<br>
→参考 [スターターテーマ_sを使ってWordPressのテーマをつくる](https://gatespace.jp/2012/12/19/underscores00/ "Gatespace's Blog")






# WPメモ - 実装編
- テンプレートタグ
  - あらかじめリファレンス確認しておくとよい
  - [Codex - テンプレートタグ](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0 "テンプレートタグ")
- ループ
  - 各ページのphpが呼ばれた時点で、そのページが本来表示すべき情報は既に取得している
  - 情報は`have_posts`を使ってループ内で取得する（個別記事ページも同様の方法で取得する）<br>
  → [Codex - ループ](https://wpdocs.osdn.jp/%E3%83%AB%E3%83%BC%E3%83%97)
- `query_posts`と`get_posts`
  - あるページでのメインクエリ以外の情報を取得したい場合に<br>
  `query_posts`でクエリを発行するとメインクエリを書き換えてしまう
  `get_posts`を使うとメインクエリは書き換えない<br>
  → [Codex - テンプレートタグ/query posts](http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/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](https://ja.wordpress.org/plugins/regenerate-thumbnails/)<br>
  → `add_image_size`のサイズ変更後、`管理画面 > ツール > Regen. Thumbnails > Regenerate All Thumbnails`クリックで再生成
- ヘッダー画像にフィールドを追加したい
  - プラグイン無しでも通常の投稿にカスタムフィールドを追加することは可能
  - ヘッダ画像にリンクを貼る → アップロードした画像にフィールドを追加したい
    - [Advanced Custom Fields](https://ja.wordpress.org/plugins/advanced-custom-fields/ "Advanced Custom Fields")
    - 管理画面 > カスタムフィールド > 新規作成 > フィールドを追加
      - 任意のフィールド名
      - 位置: Attachment, 等しい, 全て<br>
      → フィールド追加される
    - 追加したフィールドの取得
    
```php
<?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)](https://ja.wordpress.org/plugins/yet-another-related-posts-plugin/)
  - とりあえず表示させるには
    - 管理画面 > 設定 > YARPP > 関連スコア設定
    - 表示する最低関連スコア: 数値低いほど関連として表示されやすくなる
    - タイトル、内容、カテゴリー、タグ: いずれかを`検討する`に設定する
  - 関連記事のタグのカスタム
    - 管理画面 > 設定 > YARPP > 表示設定 ウェブサイト用
    - `カスタム`を選択
    - `wordpress/yarpp-template-relative.php`のファイル名でテンプレートを作成する<br>
    → テンプレートの内容については基本ループとほぼ同じ構造
    [カラクリ - YARPP のテンプレートを活用する方法](http://xn--lcki7of.jp/973/)





# WPメモ - トラブルシューティング
- ローカル開発時にスマホ等別端末からアクセスできない
  - サイトURLがデフォルトだと`localhost`になってる<br>
  → サイト内のリソースリクエストが`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
    
- 諸々調べるには...
  - とりあえず公式サイトを確認する