WordPressでカスタムメニュー機能のまとめ

メニューの有効化

functions.phpなどに記載する。

add_theme_support( 'menus' );

li要素だけを出力

header.phpなどのテンプレートに記載する。

<div id="menu">
	<ul class="menu__list">
		<?php
		$li_only = array(
			'container' => '',//<div>を出力しない
			'items_wrap' => '%3$s',//<ul>を出力しない
		);
		wp_nav_menu($li_only);
		?>
	</ul>

</div>

全ての設定項目

<?php
$defaults = array(
	'menu'            => '',
	'menu_class'      => 'menu',
	'menu_id'         => '{メニューのスラッグ}-{連番}',
	'container'       => 'div',
	'container_class' => 'menu-{メニューのスラッグ}-container',
	'container_id'    => '',
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'echo'            => true,
	'depth'           => 0,
	'walker'          => '',
	'theme_location'  => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $defaults );
?>

テンプレートタグ/wp nav menu – WordPress Codex 日本語版

メニューの登録

functions.phpなどに記載する。

register_nav_menu('main_menu','Main menu');

関連URL

WooCommerceでカート情報から見積もりメールを送らせる方法の思案

現在進行中のWooCommerce案件でタイトルのように、カートからアイテム情報を引っ張ってwp_mailを使って送る必要があり、技術顧問的な知人に相談してある程度方法と考えがまとまったので備忘録。

要件

  • ボタンをクリックしたらページ遷移なしにメールを送信
  • 見積もり番号をインクリメントしてユニークなものを付与する

実装

まずはbuttonにカスタムデータ属性でorderから情報をひっぱって格納する。


<button data-first-name="susumu" data-family-name="seino"></button>

もしくはJSで.cartitemを持ってきて配列のけつに継ぎ足して、ajaxで別途作成したmail.phpにリクエストを送って、PHPを実行する。

$('button').click(function(){
    var items = [];
    $('.cartitems li').each(function(){
        items.push({
            
        })
    });
    
    console.log(items);
       
    var firstName = $(this).attr('data-first-name')
    jQuery.ajax({
        type: "POST",
        url: 'mail.php'
        data: {
            first_name: firstName,
            items: items
        }
    });
});

ほんでmail.phpで.cartitemの情報を受け取ってあとは適宜当てはめてwp_mailで送信。


<?php
$first_name = $_POST['first_name'];
$items = $_POST['items'];

if( is_array( $items ) ) {
    foreach( $items as $item ) {
        echo $item->name;
        echo $item->price;
    }
}
else {
~
}

ちなみにコードが完全に動く形ではないので適宜変更が必要。

参考URL

WooCommerceでログイン判定をしてログアウトのリンクを実装する方法

WooCommerceでカスタマーがログインしている時にログアウトを表示する実装例です。
参考URLにあるリンクで実装しようとしたのですが、woocommerce_get_page_idはWooCommerce3.0では使えなくなってしまったようでwc_get_page_idを使っています。

Function wc_get_page_id | WooCommerce 3.0.x Code Reference


			<?php if ( is_user_logged_in() ) : ?>
				<a href="<?php echo wp_logout_url( get_permalink( wc_get_page_id( 'myaccount' ) ) ); ?>">ログアウト</a>
			<?php endif; ?>

参考URL

プラグインの翻訳を適用中のテーマのみで変更したい時のカスタマイズ方法

WooCommerceの翻訳を自分の意図したものに変えたい時は翻訳ファイル自体を子テーマ化して変更する方法もありますが、受託開発でテーマにインクルードしたい場合もあります。
その時はテーマのfunctions.phpへ下記コードを追加することで可能となります。



add_filter( 'gettext', function( $translation, $text, $domain ) {
if ( 'woocommerce' == $domain ) { //プラグインのテキストドメインを指定
switch ( $text ) {
case 'Register': // 原文
$translation = 'アカウント登録';
break;
}
}
return $translation;
}, 10, 3 );

WooCommerceでお客様情報にカスタムフィールドを追加する時の注意点

WordPressを簡単にECサイトにできるプラグインである、WooCommerceのお客様情報に追加でカスタムフィールドを加えた時の備忘録です。

下記をfunctions.phpに追記するとユーザーの性別・誕生日・趣味を追加することができます。

functinos.php

// 新規登録画面とユーザ情報にフォームを追加する


add_action( 'woocommerce_edit_account_form', 'my_woocommerce_edit_account_form' );
add_action( 'woocommerce_register_form', 'online_add_user_form' );
function my_woocommerce_edit_account_form() {

	$user_id = get_current_user_id();
	$user = get_userdata( $user_id );
	if ( !$user )
		return;
	$gender = get_user_meta( $user_id, 'gender', true );    	         //ユーザー性別
	$birthday = get_user_meta( $user_id, 'birthday', true );    	     //ユーザー誕生日
	$hoby = get_user_meta( $user_id, 'hoby', true );             //趣味
?>
	<fieldset>
		<legend>ユーザー追加情報</legend>
		<p class="form-row form-row-thirds">
			<label for="gender">性別</label>
			<select name="gender" value="<?php echo esc_attr( $gender ); ?>" class="input-gender" >
			<option value="<?php echo esc_attr( $gender ); ?>"><?php echo esc_attr( $gender ); ?></option>
			<option value="男性">男性</option>
			<option value="女性">女性</option>
			<option value="不確定">不確定</option>
			</select>
		</p>
		<p class="form-row form-row-thirds">
			<label for="birthday">誕生日</label>
			<input type="date" name="birthday" value="<?php echo esc_attr( $birthday ); ?>" class="input-birthday" />
		</p>
		<p class="form-row form-row-thirds">
			<label for="hoby">趣味</label>
			<input type="text" name="hoby" v-model="selected" value="<?php echo esc_attr( $hoby ); ?>" class="input-hoby" />
		</p>
	</fieldset>

<?php
} // end function


// 新規登録画面とユーザ情報の変更時にDBへ保存

add_action( 'woocommerce_save_account_details', 'my_woocommerce_save_account_details' );
add_action( 'woocommerce_created_customer', 'my_woocommerce_save_account_details' );
function my_woocommerce_save_account_details( $user_id ) {

	update_user_meta( $user_id, 'gender', htmlentities( $_POST[ 'gender' ] ) );					 //ユーザー性別
	update_user_meta( $user_id, 'birthday', htmlentities( $_POST[ 'birthday' ] ) );				 //ユーザー誕生日
	update_user_meta( $user_id, 'hoby', htmlentities( $_POST[ 'hoby' ] ) );				 //趣味
} // end function

注意点

通常のWordPressユーザーにカスタムフィールドを追加する実装は過去におこなったことがあったのですが、WooCommerceのアクションフックがよくわからず手間取りました。
新規作成の時とマイアカウントからWooCommerceのお客様情報を変更する時の両方に反映するために、フォーム追加時には “woocommerce_edit_account_form” と “woocommerce_register_form” をフックを追加し、保存時には “woocommerce_save_account_details” と “woocommerce_created_customer” の両方を加えました。