ダミー

【WordPress】最近の記事にNEWマークを付ける

今回はWordPressの新しい記事にNEWなどのマークを付ける方法をご紹介します。
当記事の環境:WordPress バージョン 5.7.2

最近30日以内の記事にNEWマークを付ける

以下のように、最近の記事にNEWマークを付けたいときに使います。

  • 昨日書いた記事ですNEW
  • 最近の記事です NEW
  • 1ヶ月以上前の記事です
  • 半年前の記事です
<?php
$days = 30; //30日以内の記事にNEWを付ける
$daysInt = ($days-1)*86400; //NEW期間を秒に換算
$today = time(); //今日の日付をエポック秒に換算
$entry = get_the_time('U'); //記事投稿時間をエポック秒で取得
$dayago = $today-$entry;
if ($dayago < $daysInt): ?>
	<!--ここに新しい記事のときの記述を書きます-->
<?php else: ?>
	<!--ここに新しい記事でないときの記述を書きます-->
<?php endif; ?>

みなさんはWordPressの投稿記事にタグを入れていますか?
今回はタグの扱いについてご紹介します。
当記事の環境:WordPress バージョン 5.7.2

投稿記事一覧でタグを併記したい

以下のように、記事タイトルの下にその記事で使われているタグを列記したいときに使います。

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
<?php if(has_tag()==true){the_tags();} ?>

もしタグを使っていれば the_tags(); を出力。
the_tags(); だけでタグとそのタグの付いた記事一覧へのリンクが書き出されます。とても便利ですね。タグの記事一覧ページがちゃんと作られるようにしておきましょう。

最近使われたタグをn個、リンク付きで書き出す

以下のように、最近使われたタグを数指定して列記したいときに使います。

<?php
	$term_list = get_terms('post_tag', Array('number' => 5));
	$result_list = [];
	foreach ($term_list as $term) {
	$u = (get_term_link( $term, 'post_tag' ));
	echo '<a href="'.$u.'">'.$term->name.</a>';
	}
?>

こちらもタグの記事一覧ページにリンクしますので、記事一覧ページがちゃんと作られるようにしておきましょう。

タグの記事一覧ページ

とてもシンプルなタグの記事一覧ページのテンプレートサンプルも書いておきます。必要に応じてCSSで装飾してお使いください。
<h1><?php single_tag_title(); ?></h1>
<?php
	$current_tag = single_tag_title( '', false );
	$args = array(
		'posts_per_page' => 20,
		'orderby'        => 'date',
		'order'          => 'DESC',
		'tag'            => $current_tag,
		);
	$Posts = get_posts($args);
	if($Posts) :
		foreach($Posts as $post) :
			setup_postdata( $post );
?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
<?php if(has_tag()==true){the_tags();}
endforeach;
else:
echo '<p>このタグの付いた記事はありません。</p>';
endif; ?>
タグを扱うのは面倒なようで意外と簡単です。みなさんも作ってみてください。

WordPressでECサイトが作れる無料プラグインWooCommerceでは、さまざまな決済方法が使えます。今回はLINE Payとの連動方法をご紹介します。
当記事の環境:WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1、Japanized for WooCommerce バージョン 2.2.1

WooCommerceの設定

WordPressの管理者画面の左メニューから WooCommerce > 設定 で、決済タブを選択します。
決済方法LINE Payの右にある「セットアップ」をクリックします。2回目以降はボタン名が[管理]になっています。Japanized for WooCommerceをインストールしていたらLINE Payがありますが、もっと下の方にあるかもしれません。

Woocommerce-設定

API 環境設定

「API Environment setting」に必要事項を入力します。Channel IdとChannel Secret Keyの取得方法はこちらです。
【LINE Pay】Channel IdとChannel Secret Keyはどこにある?

API

LINE Pay プライバシーポリシー通知

こちらのページのフォームから「LINE Pay プライバシーポリシー通知」をします。
https://wc.artws.info/linepay-pp-apply/

設定反映までに5営業日ほどかかります。完了したらメールが届きます。

ECサイトには多くの決済方法が準備されていると使いやすいです。特に、クレジットカードを持っていない10代のお客様がターゲットの場合、LINE Payは有効な決済方法となるでしょう。
LINEに加盟店申請をして審査が完了したら、さっそくECサイトとLINE Payを連動させて使えるように設定します。設定するにはChannel IDとChannel Secret Keyというものが必要らしいです。「Channel IDとChannel Secret Keyは、加盟店登録プロセスを完了すると加盟店センターに表示されます。」という記事を見かけますが・・・加盟店センターのどこにあるの?

1.加盟店My page(加盟店センター)にログイン

ログイン画面はこちらです
https://pay.line.me/portal/jp/auth/login

LINE Pay 加盟店ログイン

加盟店IDとパスワードはLINEから届いたメールに記載されています。

2.サーバーのIPアドレスを登録

左メニューの 決済連動管理 > 決済サーバーIP管理 を選択し、LINE Pay決済サーバーと通信するサーバー(通常はお店サイトのサーバー)のIPアドレスを入力し、[登録]をクリックします。これは万一支払連動情報の盗難時に不正な取引をブロックするためです。
IPアドレスは「.」(ピリオド)で区切られた4組の数字です。MASK値がわからなければ空白のままで登録します。IPアドレスがわからない場合は、サーバー管理者やサーバー会社に問い合わせてください。

IPアドレスの登録

3.Channel IDとChannel Secret Keyの確認

左メニューの 決済連動管理 > 連動キー管理を選択します。
ここでまた以下のようにパスワード入力ボックスが出てきますので、上記1.の加盟店My pageのパスワードを再び入力します。既にログイン中なのに・・・Channel IDとChannel Secret Keyって厳重に守られてるのですね!

パスワード入力

パスワードを入力して[確認]をクリックすると、やっとChannel IDとChannel Secret Keyを見ることができます。
Channel ID=10桁の数字、Channel Secret Key=32桁の英数字です。

channel id

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
環境設定の取得フロー – LINE Pay 決済

当記事ではWordPressでECサイトが作れる無料プラグインWooCommerceの購入手続き画面(お支払い画面)で、「登録済みの方はこちら ログインはこちらから」の「ログインはこちらから」をクリックしても何も起こらない。
同様に「クーポンをお持ちですか?コード入力はこちらから」の「コード入力はこちらから」をクリックしても何も起こらないときの対処法をご紹介します。

お支払い画面

当記事の環境:WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1

購入手続き画面(お支払い画面)でログイン

購入手続き画面ではいろいろな情報を入力する必要がありますが、登録済みのマイアカウントにログインすると登録済みの情報が自動入力されて便利です。購入手続き画面でログインできます。

まず
/wp-content/plugins/woocommerce/templates/checkout/form-login.php
を以下にコピーします。
/wp-content/themes/お使いのテーマ/woocommerce/checkout/form-login.php

次にコピーしたform-login.phpを開きa href=”#”となっている箇所を探します。以下のようなコードがみつかるでしょう。

<?php wc_print_notice( apply_filters( 'woocommerce_checkout_login_message', esc_html__( 'Returning customer?', 'woocommerce' ) ) . ' <a href="#" class="showlogin">' . esc_html__( 'Click here to login', 'woocommerce' ) . '</a>', 'notice' ); ?>

# をあなたのサイトのマイアカウントのページに書き変えます。
例えばマイアカウントが/shop/my-account/であれば以下のようになります。

<?php wc_print_notice( apply_filters( 'woocommerce_checkout_login_message', esc_html__( 'Returning customer?', 'woocommerce' ) ) . ' <a href="/shop/my-account/" class="showlogin">' . esc_html__( 'Click here to login', 'woocommerce' ) . '</a>', 'notice' ); ?>

保存してサーバーにアップすると、「ログインはこちらから」をクリックしたとき以下のようにログイン情報を入力するエリアが表示されます。

ログイン

クーポンコードを利用するためには

  1. WooCommerce > クーポン でクーポンを作成する。
  2. WooCommerce > 設定 > 一般 で「クーポンコードの使用を有効化」にチェックを入れる。

以上で準備ができました。
購入するときカート画面の商品の下にクーポンコードの入力エリアが表示されます。

クーポンコード入力

購入手続き画面(お支払い画面)でクーポンコード入力

以上ご紹介したように、カート画面でクーポンコードが入力できますが、入力せずに購入手続き画面まで進んでしまっても、購入手続き画面でクーポンコードが入力できます。

まず
/wp-content/plugins/woocommerce/templates/checkout/form-coupon.php
を以下にコピーします。
/wp-content/themes/お使いのテーマ/woocommerce/checkout/form-coupon.php

次にコピーしたform-coupon.phpを開きa href=”#”となっている箇所を探します。以下のようなコードがみつかるでしょう。

<?php wc_print_notice( apply_filters( 'woocommerce_checkout_coupon_message', esc_html__( 'Have a coupon?', 'woocommerce' ) . ' <a href="#" class="showcoupon">' . esc_html__( 'Click here to enter your code', 'woocommerce' ) . '</a>' ), 'notice' ); ?>

# をあなたのサイトのカートのページに書き変えます。
例えばカートが/shop/cart/であれば以下のようになります。

<?php wc_print_notice( apply_filters( 'woocommerce_checkout_coupon_message', esc_html__( 'Have a coupon?', 'woocommerce' ) . ' <a href="/shop/cart/" class="showcoupon">' . esc_html__( 'Click here to enter your code', 'woocommerce' ) . '</a>' ), 'notice' ); ?>

保存してサーバーにアップすると、「コード入力はこちらから」をクリックしたとき以下のようにクーポンコードを入力するエリアが表示されます。

クーポンコード

注意事項

form-login.php、form-coupon.php は深い階層にあります。コピー元とコピー先、どちらのファイルを編集するか、アップロードする場所、などを間違えないようにご注意ください。