LoginSignup
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@woonotch(woonotch)

WordPress + WooCommerceで会員制写真ダウンロード販売サイトを構築

Posted at

基本環境
wordpressプラグインインストール
woocommerceの設定
woocommerceページ設定
woocommerceカテゴリー設定
woocommerce属性設定
ウォーターマーク設定
テストアカウントの追加
woocommerce商品設定
購入テスト
カスタマイズ

基本環境

CentOS-7.9.2009
Apache-2.4.6
php-8.0.10
MariaDB-10.6.4
WordPress-5.8.1
子テーマ：twentyfifteen-child

wordpressプラグインインストール

WooCommerce
販売プラグイン
WooCommerce Stripe Payment Gateway
クレジットカード決済プラグイン
Product Watermark for WooCommerce
ウォーターマーク設置プラグイン
Real Media Library (Free)
メディア内にフォルダを作成するプラグイン
Simple Image Sizes
画像アップロード制御プラグイン
WP Content Copy Protection & No Right Click (WP 記事コピー保護 & 右クリック禁止)
コピーと右クリック禁止プラグイン
WPB Product Quick View Popup for WooCommerce
サムネイル画像ポップアッププラグイン
Confirm Theme Structure
ページが読み込んでいるテンプレート構成を表示するプラグイン
WP Mail SMTP
自動送信されるメールの送信元名や送信元メールアドレスを設定するプラグイン
User Role Editor
ユーザーに付与する権限グループを作成するプラグイン

woocommerce基本設定

WordPressダッシュボード＞WooCommerce＞設定＞

一般

店舗住所
基本設定ー販売対象エリア
通貨オプションー日本円

商品

ショップページの設定ー会員制販売サイトにするなら「マイアカウント」ページを指定
プレースホルダー画像ー写真未設定の商品に表示される「ComingSoon」的な画像
単位ーダウンロード販売には無関係

税

税込価格ー税込価格を入力
追加の税金クラスーなし
「変更の保存」クリック後、「標準税率」へ移動
標準税率ー国コード「JP」、率「10」、配送チェックなし

配送

設定なし

決済

今回はStripeのみ設定

ウェブサイトhttps://stripe.com/jpアクセス

アカウント作成

WordPressダッシュボードに戻る

「Stripeークレジットカード」有効化
「変更を保存」
「Stripeークレジットカード」の「管理」

Webhook エンドポイント作成

送信イベントを全て選択
テスト用公開鍵、テスト用秘密キー、テスト Webhook シークレットを取得

WordPressダッシュボードに戻る

テスト用公開鍵、テスト用秘密キー、テスト Webhook シークレットをダッシュボードに入力
明細書表記ー購入者の明細書に表示される店舗名
Payment Request ボタン-チェック入れると「Apple Pay」と「Chrome Payment Request API」を利用できる

アカウントとプライバシー

ゲスト購入
ユーザー自身でのアカウント作成
個人データの保持期間

メール

必要なメール通知と、不必要名メール通知を選択する
配信される本文を設定する

woocommerceページ設定

wordpressでのページ設定

▶︎パーマリンク設定
WordPressダッシュボード＞設定＞パーマリンク設定＞共通設定
投稿名選択

▶︎ホームページ設定
WordPressダッシュボード＞設定＞表示設定
ホームページの表示固定ページ選択＞ホームページ：マイアカウント選択

▶︎その他のページ
WordPressダッシュボード＞固定ページ＞新規作成
写真一覧タイトル無入力ショートコード[product_category category=”gather”]スラッグcategory
お買い物カゴショートコード[woocommerce_cart]スラッグcart
ショッピングガイドサンプルページを書き換え　スラッグshopping-guide
プライバシーポリシースラッグprivacy-policy
マイアカウントショートコード[woocommerce_my_account]スラッグ/
利用規約スラッグtos
商品詳細ページショートコード[product]スラッグproduct
お支払いショートコード[woocommerce_checkout]スラッグcheckout
返金ポリシースラッグrefund_returns

▶︎サイドメニューにナビゲーション設定
WordPressダッシュボード＞外観＞メニュー
マイアカウント
お買い物カゴ
お支払い
ダウンロードページ
注文履歴
ご登録決済方法
パスワード変更
ショッピングガイド
プライバシーポリシー
利用規約
返金ポリシー

woocommerceでのページ設定

WordPressダッシュボード＞WooCommerce＞設定＞高度な設定
お買い物カゴページお買い物カゴ
購入手続きページお支払い
マイアカウントページマイアカウント
利用規約利用規約

woocommerceカテゴリー設定

WordPressダッシュボード＞Woocommerce＞商品＞カテゴリー
新規カテゴリーを追加
名前：会員名フルネームWordPressユーザー/ブログ上の表示名と同じにする
スラッグ：会員名アルファベットWordPressユーザー/ユーザー名と同じにする
「新規カテゴリーを追加」
WordPressダッシュボード＞WooCommerce＞商品＞カテゴリー

スラッグ名英数小文字のみ、記号は「-」のみ
「-」以外の記号及び英字大文字はWoocommerceカテゴリーで受け付けないため、記号を使うなら-を使用
例：t-yamada

ログイン本人以外にその人の写真を表示させないため、
-> WooCommerce商品カテゴリーページのスラッグ名t-yamada
-> Wordpressユーザー名t-yamada
が同じになる設定とする

woocommerce属性設定

写真リストページでの絞り込み設定

WordPressダッシュボード＞WooCommerce＞商品＞属性

新規属性を追加

名前絞り込みタイトル（例：イベントで絞り込む）
スラッグ英数小文字でタイトル（例：event）
アーカイブを有効にしますか？チェック入れない
属性を追加をクリック

→右欄表に絞り込みタイトルが作成される

条件設定をクリック
新規「イベントで絞り込む」を追加
名前条件（例：運動会）
スラッグ英数小文字で条件（例：sports）
新規「イベントで絞り込む」を追加をクリック

→右欄表に条件が作成される

WordPressダッシュボード＞外観＞カスタマイズ＞ウィジェット

要素を追加
商品を属性で絞り込む

タイトル任意の文字列
属性属性スラッグを選択
表示タイプリスト
検索タイプAND

右上の公開をクリック

ウォーターマーク設定

Product Watermark for WooCommerceプラグイン

透過PNG形式で作ったウォーターマークをメディアにアップロード

WordPressダッシュボード＞プラグイン＞
Product Watermark for WooCommerce＞setting
「Upload」でウォーターマークを選択
カバーする範囲を設定
「Add watermark to image when it will be loaded first time on shop page or product page」にチェック
「Create」
「Save Change」

※メディアに１回目にアップロードした時は自動的にウォーターマークを設置し、同じ写真のアップロード2回目はマークなしでアップロードになる
マークなし写真→ダウンロード用
マークあり写真→サイト表示用

テストアカウントの追加

WordPressダッシュボード＞ユーザー＞新規追加

ログイン本人以外にその人の写真を表示させないため、
-> WooCommerce商品カテゴリーページのスラッグ名t-yamada
-> Wordpressユーザー名t-yamada
が同じになる設定とする

ユーザー名英数小文字のみ、記号は「-」のみ
.及び英字大文字はWoocommerceカテゴリーで受け付けないため、記号を使うなら-を使用
例：t-yamada
ユーザー作成後、「ユーザー個人設定」の「ブログ上の表示名」をフルネームにする

プラグインSiteGuardを使用する場合、画像認証をOFFする（ログインできないため）

woocommerce商品設定

写真アップロード

メディアに同じ写真を２枚づつアップロード
ウォーターマークは自動設置される
1枚目には自動でウォーターマークがつく -->商品画像
２枚目にはウォーターマークがつかない -->ダウンロードデータ

新規商品の追加

WordPressダッシュボード＞WooCommerce＞商品＞新規追加

「商品名」
任意の文字列

「商品データ」
ダウンロード可能にチェック
価格税込価格を設定
ダウンロード可能なファイルに２枚目のウォーターマークなし画像を設定
「属性」タブをクリック
カスタム商品属性ドロップダウンからイベントで絞り込むを選択
追加をクリック
値：条件を選択ドロップダウンから条件を選択（例：運動会）
属性を保存をクリック

「商品カテゴリー」
該当会員のカテゴリーをチェック

「商品画像」
ウォーターマークあり画像を設定

「公開」
公開（または更新）をクリック

購入テスト

テストアカウントでログイン
商品選択
商品をお買い物カゴに追加
お買い物カゴを表示
お支払いへ進む
テスト用クレジットカード番号で購入
ダウンロード（ウォーターマークなし画像がダウンロードされることを確認）

カスタマイズ

カスタム用ディレクトリを作成

/var/www/html/example.com/wp-content/plugins/woocommerce/templatesディレクトリをコピー→子テーマ内へペースト、ディレクトリ名をwoocommerceにする

# cp -r /var/www/html/example.com/wp-content/plugins/woocommerce/templates /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce

元ディレクトリ名を変更

# mv /var/www/html/example.com/wp-content/plugins/woocommerce/templates /var/www/html/example.com/wp-content/plugins/woocommerce/templates_bak

現在ログインしているユーザー本人の写真だけを表示・購入できるカスタム

マイアカウントページhttps://example.comでログイン
ログイン後は写真リストページのリンクを表示
写真リストページhttps://example.com/product-category/＜WordPress ログインID＞で、会員本人の写真と集合写真の一覧を表示

woocommerce各ページをカスタマイズ

今回カスタマイズしたいページ
ログインページ　歓迎文を追加
マイアカウントページ ナビゲーション編集、説明編集、関連商品リスト削除
写真リストページ　ナビゲーション追加、ユーザーへの説明テキスト、集合写真タイトル、集合写真一覧表示追加
商品詳細ページ　　ナビゲーション追加、パン屑リスト削除、関連商品リスト削除、カテゴリーリンク削除
支払いページ　関連商品リスト削除
お買い物カゴページ　ナビゲーション追加
ダウンロードページ　関連商品リスト削除
注文履歴ページ　関連商品リスト削除
決済登録ページ ナビゲーション追加
パスワード変更ページ ナビゲーション追加

ログインページ

form-login.php
歓迎文追加

cp -p var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/form-login.php var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/form-login.php.cp
# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/form-login.php
<?php endif; ?>

                <h1>ようこそ！</br>写真サイトへ</h1>
　　　　　　　　<div class="welcome"><p>このサイトは写真サイトです。</p></div>

		<h2><?php esc_html_e( 'Login', 'woocommerce' ); ?></h2>

アカウントホームページ

dashboard.php

cp -p /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/myaccount/dashboard.php /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/myaccount/dashboard.php.cp

ページタイトル
写真リストページへのリンク

# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/myaccount/dashboard.php
<div class="wc-title"><h1>アカウントホーム</h1></div>

	<p>
	<?php
	printf(
		/* translators: 1: user display name 2: logout url */
		
		'<strong>' . esc_html( $current_user->display_name ) . '</strong>' . 'のアカウントホームです。',
		
	);
	?></p>
　　　　<p><strong>写真サイトのご案内</strong></p>
        <p><strong>写真リスト：</br><a href="https://photo.nakatou.jp/product-category/
			<?php
				$user = wp_get_current_user();
				echo $user -> user_login;
			?>/"><?php
				$user = wp_get_current_user();
				echo $user -> display_name;
			?>の写真リスト</a>
		</strong></p>

写真リストページ

archive-product.php

cp -p /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/archive-product.php /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/archive-product.php.cp

archive-product.phpを編集
手書きナビゲーションを追記

# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/archive-product.php
<header class="woocommerce-products-header">
	<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
		<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
	<?php endif; ?>
　　　　　　　　　　　　　　　
　　　　　　　　　　この下に追記
　　　　　　　　　　　　　　　　　　　↓
	<nav class="woocommerce-MyAccount-navigation">
		<ul>
			<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard">
				<a href="https://example.com/product-category/<?php
				$user = wp_get_current_user();
				echo $user -> user_login;
				?>/">
				<?php
				$user = wp_get_current_user();
				echo $user -> display_name;
				?>の写真リスト</a>
			</li>
			<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
				<a href="https://example.com/customer-logout/?_wpnonce=f5491a095b">ログアウト</a>
			</li>
		</ul>
	</nav>
　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　ここまで追記

	<?php
	/**
	 * Hook: woocommerce_archive_description.
	 *
	 * @hooked woocommerce_taxonomy_archive_description - 10
	 * @hooked woocommerce_product_archive_description - 10
	 */
	do_action( 'woocommerce_archive_description' );
	?>

＜WordPress user_name＞くんの写真　　ログアウト
ページ上部ナビゲーション

ユーザーへの説明テキスト
集合写真タイトル
集合写真一覧表示
以上を追記

} else {
	/**
	 * Hook: woocommerce_no_products_found.
	 *
	 * @hooked wc_no_products_found - 10
	 */
	do_action( 'woocommerce_no_products_found' );
	}

　　　　　　　　　　この下に追記
　　　　　　　　　　　　　　　　　　　↓
echo ('<p>ナビゲーション「イベントから絞り込み」で写真をイベントごとに絞り込めます</p>');
echo ('<!-- 集合写真タイトル --><h1>集合写真</h1><!-- 集合写真一覧を取得 -->');
echo do_shortcode('[product_category category=”gather”]');
　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　ここまで追記

/**
 * Hook: woocommerce_after_main_content.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */
do_action( 'woocommerce_after_main_content' );

phpコード解説

<!-- 現在のログインユーザーのユーザー名を表示 --> 

<h1 class="entry-title">
  <?php
    $user = wp_get_current_user();
    echo $user -> display_name;
  ?>
  の写真
</h1>

WordPress定義済み関数wp_get_current_user()で現在ログインしているユーザーに関する情報を取得
パラメータdisplay_nameで「ブログ上の表示名」を取得
echoで表示
結果：<h1>＜現在ログインしているユーザーのユーザー名＞くんの写真</h1>になる

<!-- 集合写真のタイトルを表示 --> 

<h2>集合写真</h2>

表示させたいテキストをそのまま記載

<!-- 固定ページ記載内容を表示 --> 

<?php
  get_template_part( 'content', 'page' );
?>

WordPress定義済み関数get_template_part()で、投稿ページと固定ページのコンテンツ部分を表示
ここにはすでにショートコード[product_category category=”gather”]が記載済み

関数フック

/var/www/html/example.com/wp-content/themes/twentyfifteen-child/functions.phpに追記

追加機能：add_action( '＜アクション名＞','＜フック名＞', ＜表示順＞);
削除機能：remove_action( '＜アクション名＞','＜フック名＞', ＜表示順＞);

アクション名：カスタマイズしたいページ
フック名：機能名

商品詳細ページをカスタマイズ

woocommerce/content-single-product.php

パン屑リスト削除
関連商品リスト削除
カテゴリーリンク削除

# vim /var/www/html/example.com/wp-content/themes/twentyfifteen-child/functions.php
remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20);
remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products', 20);
remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta', 40);

タイトル追加

form-edit-account.php

cp -p var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/form-edit-account.php var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/form-edit-account.php.cp
# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/form-edit-account.php
defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_edit_account_form' ); ?>

<h1>パスワード変更</h1>　　←追記

<form class="woocommerce-EditAccountForm edit-account" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' ); ?> >

支払いページをカスタマイズ

functions.php

ダウンロード販売のため、住所・電話・会社名項目を削除

# vim /var/www/html/example.com/wp-content/themes/twentyfifteen-child/functions.php
//remove some fields from billing form
//ref - https://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
function wpb_custom_billing_fields( $fields = array() ) {
	unset($fields['billing_company']);
	unset($fields['billing_address_1']);
	unset($fields['billing_address_2']);
	unset($fields['billing_state']);
	unset($fields['billing_city']);
	unset($fields['billing_phone']);
	unset($fields['billing_postcode']);
	unset($fields['billing_country']);
	return $fields;
}
add_filter('woocommerce_billing_fields','wpb_custom_billing_fields');

その他のページに手書きナビゲーション追加

navigaton.php

cp -p /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/myaccount/navigation.php /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/myaccount/navigation.php.cp

このページのテンプレートnavigaton.phpを編集

この編集は、
ダウンロードページ
注文履歴ページ
決済登録ページ
パスワード変更ページ
に表示される

手書きナビを追記

# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen/wc-page.php
<nav class="woocommerce-MyAccount-navigation">
	<ul>
		<?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
			<li class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>">
				<a href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>"><?php echo esc_html( $label ); ?></a>
			</li>
		<?php endforeach; ?>
	</ul>
</nav>

<!- 手書きナビ追加->
    <nav class="use-nav">
        <ul>
            <li>
                <a href="https://photo.nakatou.jp/product-category/<?php
                $user = wp_get_current_user();
                echo $user -> user_login;
                ?>/"><?php
                $user = wp_get_current_user();
                echo $user -> display_name;
                ?>の写真リスト</a>
            </li>
            <li>
                <a href="https://photo.nakatou.jp/customer-logout/?_wpnonce=f5491a095b">ログアウト</a>
            </li>
        </ul>
    </nav>
<!- 手書きナビここまで->

<?php do_action( 'woocommerce_after_account_navigation' ); ?>

cssで元のナビゲーションを非表示

# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/style.css
/*　ロゴサイズカスタム　*/
.custom-logo {
    max-height: 84px !important;
    width: 84px;
}

/*　元からあるナビを消す*/
nav .woocommerce-MyAccount-navigation {
    text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

カートページに手書きナビゲーションとタイトル追加

cart.php

cp -p /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/cart/cart.php /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/cart/cart.php.cp
# vim/ /var/www/html/example.com/wp-content/themes/twentyfifteen-child/woocommerce/cart/cart.php

<!- 手書きナビ追加->
	<nav class="use-nav">
		<ul>
			<li>
				<a href="https://photo.nakatou.jp/product-category/<?php
				$user = wp_get_current_user();
				echo $user -> user_login;
				?>/"><?php
				$user = wp_get_current_user();
				echo $user -> display_name;
				?>の写真リスト</a>
			</li>
			<li>
				<a href="https://photo.nakatou.jp/customer-logout/?_wpnonce=f5491a095b">ログアウト</a>
			</li>
		</ul>
	</nav>
<!- 手書きナビここまで->

<div class="cart-title"><h1>お買い物カゴ</h1></div>
<p>お買い物カゴから商品を削除するには、左側の赤いバツ印をクリックしてください。</p>
<p>お買い物カゴの商品の数量を変更するには、数量の数字を変えたあと「お買い物カゴを更新」をクリックしてください。</p>

<form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
	<?php do_action( 'woocommerce_before_cart_table' ); ?>

ダウンロードページにタイトル追加

downloads.php

cp -p var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/downloads.php var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/downloads.php.cp
# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/downloads.php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$downloads     = WC()->customer->get_downloadable_products();
$has_downloads = (bool) $downloads;

do_action( 'woocommerce_before_account_downloads', $has_downloads ); ?>

 <h1>ダウンロード</h1>　　←追記

<?php if ( $has_downloads ) : ?>

	<?php do_action( 'woocommerce_before_available_downloads' ); ?>

注文ページにタイトル追加

orders.php

cp -p var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/orders.php var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/orders.php.cp
# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/orders.php
defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_account_orders', $has_orders ); ?>

<h1>注文履歴</h1>　　←追記

<?php if ( $has_orders ) : ?>

決済方法ページにタイトル追加

payment-methods.php

cp -p var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/payment-methods.php var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/payment-methods.php.cp
# vim/ var/www/html/example.com/wp-content/themes/twentyfifteen/woocommerce/myaccount/payment-methods.php
defined( 'ABSPATH' ) || exit;

$saved_methods = wc_get_customer_saved_methods_list( get_current_user_id() );
$has_methods   = (bool) $saved_methods;
$types         = wc_get_account_payment_methods_types();

do_action( 'woocommerce_before_account_payment_methods', $has_methods ); ?>

<h1>決済登録</h1>　　←追記

<?php if ( $has_methods ) : ?>

参考記事

https://www.itspace.biz/wc-setting-general/
https://www.itspace.biz/wc-setting-products/
https://www.itspace.biz/wc-setting-tax/
https://japacart.com/documentation/wc-settings/woocommerce-checkout/stripe/settings/
https://www.web-jozu.com/wordpress/woocommerce-login/
https://rmtmhome.com/wordpress-get-current-user-2077
https://pecopla.net/web-column/wordpress-page-howto
https://mmcd-web.sounds-stella.jp/7094/wp-get-current-user/
https://fantastech.net/php-echo
https://homemadegarbage.com/woocommerce-remove-addressfields

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?