WoocommerceのMyAccountページメニューに新しいメニューを追加する方法

公開: 2020-01-29

マイアカウントページに新しいタブを追加する方法Woocommerce WooCommerceのマイアカウントページに、スキルのレベルに関係なく、WooCommerceユーザーがすばやく簡単に実装できる新しいタブを追加する簡単な方法をお探しですか？ マイアカウントページに新しいタブを追加する簡単な解決策では、メニューの追加を処理する2つのWooCommerceフィルターフックを追加し、もう1つはそれぞれのURLに追加された新しいページへのリダイレクトを処理します。

このチュートリアルでは、WooCommerceのマイアカウントメニューにメニューを正確に追加し、リダイレクトフィルターを作成して、外部リダイレクトを含む任意のページにユーザーをリダイレクトする方法を示します。 それでは、マイアカウントメニューページがどのように機能するかを理解することから始めましょう。

MyAccountWooCommerceページメニューの仕組み

WooCommerceのこれらのタブは基本的にメニューであり、そのページのコンテンツをフィルタリングしてメニューを表示する配列を取得し、その配列にコンテンツを追加してコンテンツを返すことができます。

WooCommerce / WordPressフィルターフック

これまでにフィルターを使用したことがない場合は、このチュートリアルのapply_filtersとdo_actionでフィルターの詳細な紹介を書き、 WordPressフィルターのしくみについて説明しました。

もう1つの良い例は、このWordPressチュートリアルでthe_contentに適用したフィルターで、デフォルトのWordPress投稿またはページコンテンツの前後にコンテンツを追加します。

フィルタフックについての十分な情報があります。次に、WooCommerceのマイアカウントページにメニューを追加する方法に焦点を当てましょう。

コードで何が起こっているのかを学び、理解するのに役立つように、すべてのチュートリアルをステップバイステップの要約から始めるのが好きです。 コードを共有して、コードの機能を説明せずにコピーアンドペーストするようにお願いするのは好きではありません。 読者はより革新的で、コードスニペットにより具体的な機能を追加できるため、これは優れたアプローチです。

マイアカウントページに新しいタブを追加する方法の手順WooCommerce

マイアカウントページに新しいタブを追加する方法の手順WooCommerce

マイアカウントページに新しいタブを追加するには、次の3つの手順が必要です。

  1. フィルタフックを作成してマイアカウントページに新しいタブを追加すると、フィルタはメニューに表示されているすべてのデータを収集してから、新しいデータをプッシュする必要があります。 （PUSHという単語を覚えておいてください。この投稿の後半で詳しく説明します）
  2. 最初のステップで追加したメニューのURLリダイレクトを作成したページに追加する2番目のフィルターを作成します。
  3. このコードをテーマのfunctions.phpファイルに追加するか、このコードをプラグインクラスまたは関数に追加すると、WooCommerceのアカウントページに新しいメニューが正常に追加されます。

Woocommerceのマイアカウントページにメニューを追加

過去数日間、クライアントから、既存のWooCommerceサイトのアカウントページに新しいメニューを追加するように要求されました。 理想的には、メニューは、 BuddyPressを使用して以前に追加したフォーラムにリダイレクトされるはずでした。

このチュートリアルでは、これが当てはまると想定し、先に進んでメニューを[マイアカウント]ページに追加すると、フォーラムにリダイレクトされます。

まず、下の画像は、このWooCommerceサイトのアカウントページに新しいタブを追加し、ユーザーをフォーラムにリダイレクトする方法の最終製品を示しています。

Woocommerceのマイアカウントページにメニューを追加

マイアカウントページにメニューを追加するための最初のフィルターを追加します

マイアカウントページに新しいタブを追加するコードには、以下に示すように、フィルターフックとコールバック関数が含まれています。

 //メニュー項目をマイアカウントに追加する最初のフックWooCommerceメニュー 

関数example_forum_link（$ menu_links）{
 
	//後で「womanide-forum」をフックします
	$ new = array（ 'example-forum' => 'フォーラムの例'）;
 
	//または2つのリンクが必要な場合
	// $ new = array（ 'link1' => 'Link 1'、 'link2' => 'Link 2'）;
 
	// array_slice（）は、他の要素の間に要素を追加する場合に適しています
	$ menu_links = array_slice（$ menu_links、0、1、true） 
	+ $ new 
	+ array_slice（$ menu_links、1、NULL、true）;
 
 
	$ menu_linksを返します;
 
 
}
add_filter（ 'woocommerce_account_menu_items'、 'example_forum_link'）;

このコードをfunctions.phpに追加すると、次の画像に示すように、アカウントページに新しいメニューが表示されます。

Woocommerceのマイアカウントページにメニューを追加

コードのしくみ

  • このフィルターでは、コールバック関数に渡す$ menu_links変数を使用して、配列内のmy-accountページのすべてのメニューを取得しています。
  • メニューリンクの配列を取得したら、 array_slice（）関数を使用して抽出し、新しいメニュー項目をPUSHしてから、すべてのメニューを1つの配列にまとめ、 woocommerce_account_menu_itemsWooCommerceフックに接続します。
  • この時点で、メニュー項目がアカウントメニューに表示されます

ご覧のとおり、フィルターによってデフォルトのマイアカウントメニューに新しいメニューが追加されました。 メニューをクリックすると、この新しいメニュー項目のリダイレクトが下の画像に示すように機能しているため、 404ページにリダイレクトされます。

Woocommerceのマイアカウントページにメニューを追加

このページはWooCommerceダッシュボードには存在しませんが、スラッグの例を見ることができます-フォーラム、最初のフィルターで追加し、2番目のフィルターでそれを使用してフォーラムページにリダイレクトします。

マイアカウントページにメニューを追加するための2番目のフィルターの追加

上記のように、2番目のフィルターは、このメニューをリダイレクトするページを追加します。この場合、以下に示すコードを使用して追加できます。

 // WooCommerceエンドポイントをカスタムURLにリダイレクトする2番目のフィルター
function forum_example_hook_endpoint（$ url、$ endpoint、$ value、$ permalink）{
 
	if（$ endpoint === 'example-forum'）{
	   
		//これは、カスタムURLを追加する場所です。外部の場合もあります。この場合、bbpressfroumのプロファイルに移動する必要があります。
		//この関数（bp_core_get_username（bp_loggedin_user_id（））;）を使用して、プロファイルのユーザーIDを取得し、以下に示すようにURLに追加します 
		
		$ url = site_url（）。 '/ members /'。 bp_core_get_username（bp_loggedin_user_id（））;
 
	}
	$ urlを返します。
 
}


add_filter（ 'woocommerce_get_endpoint_url'、 'forum_example_hook_endpoint'、10、4）;

上記の手順で追加した最初のフィルターのすぐ下にこのコードを追加すると、BBPressフォーラムのプロファイルにリダイレクトした下の画像に示すように、[フォーラムの例]メニューが特定のユーザープロファイルにリダイレクトされます。

フィルタを追加してメニューをマイアカウントページに追加し、別のページにリダイレクトします

コードスニペットを完成させて、マイアカウントページに新しいタブを追加し、任意のページにリダイレクトします

WooCommerceのアカウントページメニューに新しいメニューを追加するには、テーマのfunctions.pfpファイルに以下で共有する完全なコードスニペットを追加し、変数をメニューをリダイレクトするそれぞれのスラッグとページに置き換える必要があります。

 //メニュー項目をマイアカウントに追加する最初のフックWooCommerceメニュー 

関数example_forum_link（$ menu_links）{
 
	//後で「womanide-forum」をフックします
	$ new = array（ 'example-forum' => 'フォーラムの例'）;
 
	//または2つのリンクが必要な場合
	// $ new = array（ 'link1' => 'Link 1'、 'link2' => 'Link 2'）;
 
	// array_slice（）は、他の要素の間に要素を追加する場合に適しています
	$ menu_links = array_slice（$ menu_links、0、1、true） 
	+ $ new 
	+ array_slice（$ menu_links、1、NULL、true）;
 
 
	$ menu_linksを返します;
 
 
}

add_filter（ 'woocommerce_account_menu_items'、 'example_forum_link'）;


// WooCommerceエンドポイントをカスタムURLにリダイレクトする2番目のフィルター
function forum_example_hook_endpoint（$ url、$ endpoint、$ value、$ permalink）{
 
	if（$ endpoint === 'example-forum'）{
	   
		//これは、カスタムURLを追加する場所です。この場合、bbpressfroumのプロファイルに移動する必要があるように外部にある可能性があります。
		//この関数（bp_core_get_username（bp_loggedin_user_id（））;）を使用して、プロファイルのユーザーIDを取得し、以下に示すようにURLに追加します 
		
		$ url = site_url（）。 '/ members /'。 bp_core_get_username（bp_loggedin_user_id（））;
 
	}
	$ urlを返します。
 
}


add_filter（ 'woocommerce_get_endpoint_url'、 'forum_example_hook_endpoint'、10、4）;

まとめ

このチュートリアルを読んだ後は、WooCommerceのマイアカウントページに新しいメニュータブを作成するのはもう難しいことではありません。 アカウントページに新しいタブを追加し、選択したページへのリダイレクトを作成する方法について、段階的に説明しました。 また、チェックアウト後にWooCommerceリダイレクトを追加し、登録後にWooCommerceリダイレクトを追加する方法に関する他のチュートリアルも作成しました。 このソリューションを実装できない場合は、プロのWooCommerce開発者の支援を求めることができます。