WooCommerceのマイアカウントページのカスタマイズ方法

#WooCommerceのフロント側のマイアカウントページのカスタマイズ方法です。

参考
[https://github.com/woocommerce/woocommerce/wiki/Customising-account-page-tabs](https://github.com/woocommerce/woocommerce/wiki/Customising-account-page-tabs)

##概要
WooCommerceのマイアカウントページにはデフォルトでいくつかのページが用意されてます。（注文とかダウンロードとか）

このページはそれぞれにエンドポイントを設定して、WordPressに登録し、そのエンドポイントを使ったdo_actionを動かしています。

例
URL `my-account/orders/`
ordersをエンドポイントとするので、actionフック名は`woocommerce_account_orders_endpoint`となります。
あとは`add_action( 'woocommerce_account_orders_endpoint', 'woocommerce_account_orders' )`で第２引数に登録した関数で処理します。


##新しいエンドポイントの作成
WordPress標準機能を使います。add_rewrite_endpoint()

```php

/**
 * 新しいエンドポイントの登録
 */
function my_custom_endpoints() {
 add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'my_custom_endpoints' );

/**
 * クエリーの登録
 */
function my_custom_query_vars( $vars ) {
 $vars[] = 'my-custom-endpoint';
 return $vars;
}
add_filter( 'query_vars', 'my_custom_query_vars', 0 );
```

なお、テーマやプラグインで使用する場合はflush_rewrite_rules()をつけるかパーマリンク設定を更新する必要があるそうです。
うまくいかない場合はテーマやプラグインを停止ー＞有効として、パーマリンク設定を更新する必要がありそうです。

```php
/**
 * プラグインの場合
 */
function my_custom_flush_rewrite_rules() {
 add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
 flush_rewrite_rules();
}

register_activation_hook( __FILE__, 'my_custom_flush_rewrite_rules' );
register_deactivation_hook( __FILE__, 'my_custom_flush_rewrite_rules' );
Example for themes:

/**
 * テーマの場合
 */
function my_custom_flush_rewrite_rules() {
 add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
 flush_rewrite_rules();
}
add_action( 'after_switch_theme', 'my_custom_flush_rewrite_rules' );
```

##メニューへの登録

###メニューに新規項目を追加する。
フィルターフック`woocommerce_account_menu_items`を使用します。

```php

function my_custom_my_account_menu_items( $items ) {
 $items['my-custom-endpoint'] = __( 'My Custom Endpoint', 'woocommerce' );
 return $items;
}
add_filter( 'woocommerce_account_menu_items', 'my_custom_my_account_menu_items' );
```
参考アドレスではログアウトを一時保存していましたが、その記述はなくてもログアウトの一個上に追加されました。ログアウトの下に追加する方法は未検証です。

###メニューの項目を削除する。
上記コードの`$items`に渡されているエンドポイントを`unset`すれば消えます。

##カスタムページの作成
エンドポイントからadd_actionを作成します。
フック例　woocommerce_account_{自分で決めた名前}_endpoint

以下のデフォルトフックと名前が重ならないようにしましょう。

- woocommerce_account_orders_endpoint
- woocommerce_account_view-order_endpoint
- woocommerce_account_downloads_endpoint
- woocommerce_account_edit-address_endpoint
- woocommerce_account_payment-methods_endpoint
- woocommerce_account_add-payment-method_endpoint
- woocommerce_account_edit-account_endpoint

```php
function my_custom_endpoint_content() {
 echo '<p>Hello World!</p>';//ここでテンプレート読み込みなど
}

add_action( 'woocommerce_account_my-custom-endpoint_endpoint', 'my_custom_endpoint_content' )
```

###タイトルについて

タイトルはテーマで使われている可能性があるので、エンドポイントの名前とページタイトルを変えたい場合は`the_title`でフィルターをかけます。

```php

function my_custom_endpoint_title( $title ) {
 global $wp_query;
 $is_endpoint = isset( $wp_query->query_vars['my-custom-endpoint'] );
 if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
  // New page title.
  $title = __( 'My Custom Endpoint', 'woocommerce' );
  remove_filter( 'the_title', 'my_custom_endpoint_title' );
 }
 return $title;
}
add_filter( 'the_title', 'my_custom_endpoint_title' );

```

##感想
既存のページのカスタマイズは、各テンプレートに用意されているフィルターフックを使えば良さそうです。
新規メニューの場合はちょっと複雑かなぁ。