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

参考
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()


/**
 * 新しいエンドポイントの登録
 */
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()をつけるかパーマリンク設定を更新する必要があるそうです。
うまくいかない場合はテーマやプラグインを停止ー＞有効として、パーマリンク設定を更新する必要がありそうです。

/**
 * プラグインの場合
 */
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を使用します。


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

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

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

タイトルについて

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


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' );

感想

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

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