WooCommerce MyAccountページをプログラムで編集する方法

公開: 2020-12-22

ストアの[マイアカウント]ページをカスタマイズしますか？あなたは正しい場所に来ました。このガイドでは、WooCommerce My Accountページをプログラムで編集して、カスタマーエクスペリエンスを向上させる方法を説明します。

マイアカウントページとは何ですか？

デフォルトでは、WooCommerceストアには、ユーザーが注文を確認したり、顧客の個人情報、請求先、配送先住所に関する情報を保存したりできる[マイアカウント]ページが含まれています。デフォルトのマイアカウントページは、WooCommerceショートコードを含むWordPressページです。

[ woocommerce_my_account ]

このすぐに使えるページには、ユーザーが注文や設定を管理するために必要なすべての基本情報が含まれていますが、[マイアカウント]ページを編集すると、競合他社との差別化を図り、ユーザーエクスペリエンスを向上させることができます。

WooCommerceのマイアカウントページをカスタマイズする理由

優れたUXを提供することが、eコマースストアの成功の鍵であることは周知の事実です。ユーザーはオンラインで購入するのは高速で快適なので、すばらしい体験をするために必要なツールをストアが提供していることを確認する必要があります。

ほとんどの店主は、商品ページとチェックアウトのカスタマイズに注意を向けていますが、[マイアカウント]ページについては忘れています。これは登録ユーザー向けに設計されたページであるため、カスタマイズすると、サイトでのユーザーエクスペリエンスを向上させることができます。さらに、それはあなたが彼らをあなたの店に戻してあなたの売り上げを増やすのを助けることができます。たとえば、パーソナライズされた取引やプロモーションを表示する特別なセクションを作成できます。

マイアカウントページをカスタマイズするための最適なプラグインについては、すでに分析しました。ただし、サードパーティのツールをインストールする必要がなく、コーディングスキルがある場合は、何かを用意しています。このガイドでは、WooCommerce MyAccountページをプログラムで編集する方法を紹介します。

WooCommerce MyAccountページをプログラムで編集する方法

WooCommerceの[マイアカウント]ページを編集するには、次の2つの方法があります。

デフォルトのWooCommerceテンプレートファイルを上書きできます
いくつかのWooCommerceフックを使用する

どちらの方法が良いですか？ これらの各オプションは、さまざまなケースに適しています。原則として、可能な場合はテンプレートファイルを上書きするのではなく、フックを使用するようにしてください。これは、WordPressがサイトをカスタマイズするときに推奨するベストプラクティスの1つです。

ただし、関数やオブジェクトを含むより複雑なタスクを実行する場合は、テンプレートファイルを編集する必要がある場合があります。このガイドでは、両方の方法を使用してプログラムでWooCommerce MyAccountページを編集する方法を学習します。ご想像のとおり、テンプレートファイルの編集にはフックを使用するよりもリスクが高いため、目的のオプションを選択する前にこの点に注意してください。

1）テンプレートファイルを上書きするマイアカウントページをカスタマイズする

注：この方法ではテンプレートファイルを上書きする必要があるため、開始する前にサイトの完全バックアップを作成することをお勧めします。方法がわからない場合は、このガイドをご覧ください。 WooCommerceテンプレートをカスタマイズする方法の詳細については、この投稿を確認してください。

WooCommerceテンプレートファイルをオーバーライドするプロセスは、子テーマの他のファイルをオーバーライドするのと似ています。ご存知のように、子テーマを使用すると、テーマを更新するときにカスタマイズを失うことなく、テーマを編集できます。同じことがWooCommerceプラグインにも当てはまります。したがって、子テーマがない場合は、子テーマを作成するか、これらのプラグインのいずれかを使用できます。

まず、 WordPress管理ダッシュボードで、 [プラグイン]> [エディター]に移動します。次に、pluginsフォルダーに移動し、WooCommerceを開いて、テンプレートファイルを見つけます。このために、WordPressプラグインファイルエディターまたは任意のコードエディターを使用できます。 WooCommerceディレクトリで、テンプレートファイルを開き、 myaccountフォルダを探します。

plugins/woocommerce/templates/myaccount

WooCommerceマイアカウントページをプログラムで編集する方法-テンプレートファイル

/myaccountフォルダーを開くと、[マイアカウント]ページで使用されているすべてのテンプレートファイルが見つかります。 woocommerceマイアカウントテンプレートファイル

これらは、現在Webサイトで機能しているデフォルトのファイルです。これらのファイルを上書きするには、子テーマに同じ名前の新しいファイルを作成する必要があります。ただし、空のファイルを作成すると、元のファイルのすべての機能が無効になります。したがって、サイトで問題が発生しないようにするには、デフォルトのファイルをコピーしてテーマフォルダーに貼り付ける必要があります。

たとえば、WooCommerceインストールからdashboard.phpファイルをコピーするとします。子テーマに貼り付ける前に、ネストされた2つのサブディレクトリを作成し、それらを/ woocommerceおよび/ myaccountと呼ぶ必要があります。その後、 dashboard.phpファイルをそこに貼り付けます： child_theme/woocommerce/myaccount/dashboard.php WooCommerceのマイアカウントページをプログラムで編集する-テンプレートファイルを上書きする

次に、 dashboard.phpファイルを開き、いくつかの小さな変更を加えて、正しく機能していることを確認します。それでおしまい！ WooCommerceテンプレートファイルを上書きする方法を学びました。それが最初のステップです。それでは、さらに一歩進んで、[マイアカウント]ページをカスタマイズする方法を見てみましょう。

マイアカウントページのダッシュボードをカスタマイズする

テンプレートファイルを上書きする方法がわかったので、WooCommerce MyAccountページをプログラムで編集する方法を見てみましょう。このセクションでは、[マイアカウント]ページのメインダッシュボードをカスタマイズする方法を説明します。このプロセスが終了すると、[マイアカウント]ページは次のようになります。

アカウントをカスタマイズするwoocommerceダッシュボードテンプレート見出しの画像とその下にテキストを追加しました。さらに、ユーザーがより頻繁にアクセスするセクションへのリンク、フッター、および顧客が簡単に連絡できるようにいくつかの画像リンクを含むリストを作成しました。

フルスクリプト

これは、上記のスクリーンショットを作成する最後のdashboard.phpファイルです。

 if（！defined（ 'ABSPATH'））{
出口; //直接アクセスした場合は終了します。
}
$ allowed_html = array（
'a' => array（ 'href' => array（）、）
）;
？>
<h2>
<？php
printf（
/ *翻訳者：1：ユーザー表示名2：ログアウトURL * /
wp_kses（__（ 'Hey％1 $ s、you \' re back！ '、' woocommerce '）、$ allowed_html）、
'<strong>'。 esc_html（$ current_user-> display_name）。 '</ strong>'、
esc_url（wc_logout_url（））
）;
？>
</ h2>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU" />
<h3>
<？php
/ *翻訳者：1：注文URL 2：アドレスURL 3：アカウントURL。 * /
$ Dashboard_desc = __（ 'これはアカウントのメインダッシュボードです：'、 'woocommerce'）;
if（wc_shipping_enabled（））{
/ *翻訳者：1：注文URL 2：アドレスURL 3：アカウントURL。 * /
$ Dashboard_desc = __（ 'これはアカウントのメインダッシュボードです：'、 'woocommerce'）;
}
printf（
wp_kses（$ dashboard_desc、$ allowed_html）、
esc_url（wc_get_endpoint_url（ 'orders'））、
esc_url（wc_get_endpoint_url（ 'edit-address'））、
esc_url（wc_get_endpoint_url（ 'edit-account'））
）;
$ ul_list = __（ '<ul>
<li> <ahref = "％1 $ s">最近の注文</a> </ li>を表示する
<li> <ahref = "％2 $ s">配送先住所と請求先住所</a>を管理する</a> </ li>
<li> <ahref = "％3 $ s">パスワードとアカウントの詳細を編集する</a> </ li>
</ ul> '）;
$ div_contact = __（ '
<div class = "acc_contact">
<span class = "acc_images">
<a href="#link to send whatsapp message"> <img src = "http：//localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png" /> </a>
<a href="#link to facebook profile"> <img src = "http：//localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png" /> </a>
<a href="#link to twitter profile"> <img src = "http：//localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png" /> </a>
<a href="#link to send email"> <img src = "http：//localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png" /> </a>
</ span>
</ div> '）;
$ div_footer = __（ '
<div>
<h4> <i>愛を込めて建てられました！</ i> </ h4>
<img src = "http：// localhost / Sampler / wp-content / uploads / 2020/08 / ql-logo-300x65.png" />
</ div> '）;
？>
</ h3>
<p>ここでプロフィールと個人情報を管理します。 私たちがあなたについて知ることができるように、すべてのフィールドに記入してください。 アカウントで作成されたすべてのエディションはすぐにウェブサイトに反映されるため、他のユーザーは遅滞なくあなたとあなたの現在のニーズについて知ることができます</ p>
<？php
echo $ ul_list。$ div_footer。$ div_contact;

コードを見ると、デフォルトのテンプレートからコピーした元のコードがすべて残っていることがわかります。いくつかの文字列を変更し、リンクをリストとして並べ替えました。さらに、追加のスクリプトを使用して、タブにコンテンツを追加しました。行った変更をよりよく理解するために、デフォルトのdashboard.phpを確認できます。

画像の追加

[マイアカウント]ページに画像を表示するには、画像のURLを置き換える必要があります。同じことがソーシャルアイコンの画像リンクにも当てはまります。

CSSのカスタマイズ

[マイアカウント]ページ（およびその他のページ）をカスタマイズするもう1つの方法は、CSSスクリプトを使用することです。これは、カスタムdashboard.phpファイルのスタイル設定に使用したCSSスクリプトです。

 .woocommerce-MyAccount-content> h2：nth-child（2）、
.woocommerce-MyAccount-content> h3：nth-child（4）{
text-align：center;
}
.acc_contact {
padding-top：20px;
text-align：center;
}
.acc_contact> h3 {
float：left;
}
.acc_images {
マージン：自動;
幅：50％;
表示ブロック;
}
＃ようこそ{
マージン：自動;
}
.acc_images img {
margin-left：4px;
margin-right：4px;
display：inline-block;
幅：55px;
}
#acc_footer {
margin-top：15px;
背景色：＃202020;
text-align：center;
border-radius：15px;
}
#acc_footer> h4 {
padding-top：20px;
色：rgb（235、228、228）;
font-weight：bold;
}
#acc_footer> img {
マージン：自動;
padding-bottom：20px;
}

このコードをベースとして、子テーマのstyle.cssファイルに貼り付け、サイトのルックアンドフィールに合わせてカスタマイズできます。

2.フックを使用してWooCommerceマイアカウントページを編集します

マイアカウントページをプログラムで編集する2番目の方法は、いくつかのWooCommerceフックを使用することです。このためには、WooCommerceでフックがどのように機能するかについての基本的な理解が必要です。フックに慣れていない場合は、このガイドを確認することをお勧めします。

A）タブの名前を変更する

このスクリプトは、[アドレス]タブの名前を[あなたのアドレス]に変更します。

 add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_rename_acc_adress_tab'、9999）;
function QuadLayers_rename_acc_adress_tab（$ items）{
$ items ['edit-address'] = 'あなたのアドレス';
$ itemsを返します。
}

B）タブを削除する

タブを完全に削除するには、次のようにunset（）関数を使用します。

 add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_remove_acc_address'、9999）;
function QuadLayers_remove_acc_address（$ items）{
unset（$ items ['downloads']）;
$ itemsを返します。
}

上記のスクリプトでは、[ダウンロード]タブを削除しました。タブスラッグの完全なリストは$ items配列にあるので、必要なものを選択できます。

 $ items = array（
'ダッシュボード' => __（ 'ダッシュボード'、 'woocommerce'）、
'orders' => __（ 'Orders'、 'woocommerce'）、
'ダウンロード' => __（ 'ダウンロード'、 'woocommerce'）、
'edit-address' => _n（ 'Addresses'、 'Address'、（int）wc_shipping_enabled（）、 'woocommerce'）、
'支払い方法' => __（ '支払い方法'、 'woocommerce'）、
'edit-account' => __（ 'アカウントの詳細'、 'woocommerce'）、
'customer-logout' => __（ 'Logout'、 'woocommerce'）、
）;

C）タブとコンテンツをマージする

[マイアカウント]ページをカスタマイズするもう1つのオプションは、タブを結合することです。たとえば、[アドレス]タブを削除し、そのコンテンツを[アカウント]タブに移動する方法を見てみましょう。

 // -----------------------------
// 1。[アドレス]タブを削除します
add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_remove_acc_tab'、999）;
function QuadLayers_remove_acc_tab（$ items）{
unset（$ items ['edit-address']）;
$ itemsを返します。
}
// -------------------------------
// 2. [アドレス]タブのコンテンツを既存のタブ（この場合はアカウントの編集）に挿入します
add_action（ 'woocommerce_account_edit-account_endpoint'、 'woocommerce_account_edit_address'）;

これで、[アカウント]タブは次のようになります。アカウントをマージするwoocommerceタブのコンテンツ

D）カスタムコンテンツを含む新しいタブを追加する

それでは、マイアカウントページにコンテンツを追加する方法を見てみましょう。この例では、ユーザーがサポートチケットを簡単に確認できる[サポート]という新しいタブを追加します。サードパーティのプラグインが提供する2つのショートコードを使用して興味深いコンテンツを表示しますが、新しいタブでは任意のショートコードを使用できるはずです。

ただし、WooCommerceとの非互換性のために、一部のショートコードが機能しない場合があることに注意してください。カスタムコンテンツを含む[サポート]タブをWooCommerceの[マイアカウント]ページに追加するには、子テーマのfunctions.phpファイルに次のコードを貼り付けます。

 // 1。新しいエンドポイントを登録します
//注：パーマリンクを再保存しないと、404エラーが発生します  
関数QuadLayers_add_support_endpoint（）{
    add_rewrite_endpoint（ 'support'、EP_ROOT | EP_PAGES）;
}  
add_action（ 'init'、 'QuadLayers_add_support_endpoint'）;  
// ------------------ ------------------
// 2。新しいクエリを追加します
function QuadLayers_support_query_vars（$ vars）{
    $ vars [] = 'サポート';
    $ varsを返します。
}  
add_filter（ 'query_vars'、 'QuadLayers_support_query_vars'、0）;  
// ------------------ ------------------
// 3。新しいエンドポイントを挿入します 
function QuadLayers_add_support_link_my_account（$ items）{
    $ items ['support'] = 'サポート';
    $ itemsを返します。
}  
add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_add_support_link_my_account'）;
// ------------------ ------------------
// 4。新しいエンドポイントにコンテンツを追加します  
関数QuadLayers_support_content（）{
echo '<h3>サポート</ h3> <p>サポートエリアへようこそ。 プレミアム顧客として、ここからサポートチケットを管理します。ウェブサイトに問題がある場合は、チケットを送信できます。 迅速かつ効率的なソリューションを提供するために最善を尽くします</ p> ';
echo do_shortcode（ '[tickets-shortcode]'）;
echo do_shortcode（ '[wpforms]'）;
}  
add_action（ 'woocommerce_account_support_endpoint'、 'QuadLayers_support_content'）;

新しいタブをクリックしたときに404ページが見つからないというエラーが発生した場合は、 WordPressダッシュボード> [設定]> [パーマリンク]に移動してパーマリンクページを開き、下部にある[保存]ボタンをクリックします。

スクリプトは4つのセクションに分かれていることに注意してください。それぞれが異なるタスクを実行するため、ストアに追加するセクションを使用します。また、スクリプト（4）の最後のセクションで、 do_shortcode()関数のショートコードを置き換えることができることにも注意してください。これは、新しい[サポート]タブの最終結果になります。カスタムタブマイアカウントwoocommerce

結論

全体として、デフォルトの[マイアカウント]ページには、ユーザーが必要とする基本情報がありますが、かなり基本的なものです。したがって、ストアのユーザーエクスペリエンスを向上させたい場合は、[マイアカウント]ページをカスタマイズする必要があります。これは、ストアの非常に重要なセクションを強化するだけでなく、売り上げを伸ばすのにも役立ちます。

マイアカウントページをカスタマイズするためのプラグインがいくつかあります。ただし、これ以上プラグインをインストールする必要がなく、コーディングスキルがある場合は、WooCommerce MyAccountページをプログラムで編集できます。そのために2つのオプションがあります：

テンプレートファイルを上書きする
WooCommerceフックを使用する

どちらの方法でも作業は完了しますが、原則として、可能な場合はフックを使用することをお勧めします。リスクが少なく、WordPressが推奨するベストプラクティスの1つです。このガイドでは、両方の方法を使用して実行できることの例をいくつか見てきました。これらのスクリプトをガイドとして使用し、アイデアを得るために使用し、ストアの[マイアカウント]ページを最大限に活用することをお勧めします。

最後に、[マイアカウント]ページを最大限に活用するためのその他のガイドについては、次のガイドをご覧ください。

プラグインの有無にかかわらず、WooCommerceマイアカウントをカスタマイズする方法
WooCommerceマイアカウントページをカスタマイズするための最良のプラグイン

マイアカウントページにどのような変更を加えましたか？チュートリアルに従って問題が発生しましたか？以下のコメントセクションでお知らせください。