ブログ @ デジドリ

WooCommerceの基本 商品登録（基本的な商品）編

デジタルドリームワークスからHigaです。
さて最近ではWooCommerceを使用したサイト制作の機会もいくつか出てきました。
以前にも何度かWooCommerceについての記事を投稿しています。

カスタマイズや機能拡張がフォーカスされがちですが、実際基本機能でどれだけのことが出来るのでしょうか。
今回からしばらくWooCommerceの基本機能を集中的に確認していきたいと思います。

WooCommerce最新版（現在 2.6.4）をインストールして勉強していきます。
インストールや初期セットアップは比較的簡単ですので説明を省きました。
最新版をインストールして気付いた事は、旧バージョンでは日本語化の作業が必要だった覚えがありますが、セットアップ無しにすぐに日本語表示になりました。

それでは本題の商品登録（基本的な商品）を進めていきます。

「商品」の項目から「商品を追加」を選択します。

タイトル（商品名）、本文は通常の投稿画面と同じですね。
商品画像や商品ギャラリーの項目もデフォルトでは左に表示されています。こちらは説明いらずですね。
その下にWooCommerceのメタボックスが追加されています。

まず初めに「商品データ」を選択していきます。
標準では4つの商品タイプが用意されいます。

● 基本的な商品
● グループ化された商品
● 外部/アフェリエイト商品
● バリエーションのある商品

 

 

それぞれ表示される項目などが変わりますので投稿を分けて確認していきます。
今回は「基本的な商品」を確認。

基本的な商品には以下の項目が用意されています。

 

【商品データ】項目

● バーチャル（出荷が必要無い商品を取り扱う）
● ダウンロード可能（その名の通りダウンロード商品を取り扱う）

ポイント：
基本的な商品の他、配送無しの商品やダウンロード可能商品も取り扱いが可能です

 

———-

【一般】項目

● 標準価格（料金）
● セール価格（セール価格はセール期間を指定することが可能）
● 税状況(課税をするか、配送にのみ課税するか、課税しないかを設定出来る)
● 税区分（税区分では税率を変更したり出来る??）

ポイント：
セール価格は1期間しか設定出来きません。複数期間ある場合は一度キャンペーン終了後、期間の再登録が必要です。
また税区分は商品に対して税率を変えて課税を行うことが出来るようですが現状出来ませんでした。設定ミス??
色々と試しましたが、追加設定した税区分を選択しても保存すると標準にもどります。今のところ商品毎に税率を変更する場面に遭遇していないので様子を見ます。

 

———-

 

【在庫】項目

● SKU（商品コード登録）
● 在庫管理をしますか？（在庫管理をするか否か）
● 在庫状況
● 個別販売（1点もの商品などの場合に1つだけ購入出来る様にします）

※在庫管理をしますかにチェックを入れた場合
● 在庫数
● バックオーダーを受け付けますか（在庫がゼロになっても購入を受付けるか否か）
● 在庫状況（在庫数があっても在庫切れ表示が出来ます）

ポイント：特に無し

 

———-

 

【配送方法】項目

● 重さ
● 大きさ
● 配送区分

ポイント：
重さや大きさは商品ページ追加情報に表示されます。
配送方法部分は少し複雑でしたので後日まとめる予定です。
今回は詳しい事はスルー。
最新バージョンでは以前自分がさわったときより大きく変わっていました。
配送区分は「WooCommerce」->「設定」->「配送方法」->「配送クラス」より項目追加可能

 

———-

 

【リンクされている商品】項目

● アップセル

● クロスセル
● グループ分け

ポイント：
アップセルは関連商品のような感じで表示されます。デフォルトでは「あたなの好みかも…」という感じ
クロスセルはアップセルと似ていますが、カート内に表示されます。また既にカートに入れてある商品はこの枠から除外される優れもの
グループ分けは今回設定出来ませんでした。グループ化された商品タイプで使用するのかもしれません。今後の投稿で！

アップセルの設定をすると…
商品詳細の説明下に「あたなの好みかも…」で表示されます。

クロスセルを設定すると…
商品がカートに入れられると、「興味がある可能性アリ…」かもという感じでカート内に表示されます。

 

———-

 

【属性】項目

● カスタム属性

ポイント：
左のメニュー「商品」->「属性」から登録すれば全ての商品で共通の属性項目を設定出来ます。
カスタム属性は、商品毎に別属性を追加する役割のようです。
また基本的な商品では属性毎に料金を設定する事は出来ません。あくまでも項目を表示する役割となっています。
属性毎に料金を設定するには商品タイプをバリエーションのある商品にする必要があります。

 

———-

 

【高度】項目

● 注意事項
● 表示順番（商品一覧ページで表示順を変更する）
● レビューを有効にする

ポイント：なし

注意事項は、カート内に商品が追加された際に表示されます。また同様に注文完了メールにも記載される仕組みです。

カート内、注文完了メールに以下のように表示される…

 

 

 

ふー、以上長々と文章が続きましたが、商品登録（基本的な商品）を確認していきました。
属性別に料金が変わらない商品は簡単に作成出来そうです。（属性別に料金が変更になる場合は、バリエーションのある商品で登録）
ほとんどが入力部分に説明がついており、項目の機能が分かりますね。
配送部分については少し複雑なので注意が必要ですが、初期で設定を行えば商品登録時はそれぞれ項目を選択していくだけですお客様の負担も少ないと感じます。
多機能過ぎて使わない項目も多々出てきそうですね。
煩わしいので設定項目を消す方法も追々調べていきたいと思います。

情報がおかしい部分がありましたらぜひコメントいただけると幸いです m(_ _)m

カスタムと投稿タイプメモ

WordPressは初期の状態だと投稿と固定ページの二つしか記事の作れる所がないのですが、カスタム投稿タイプを作る事によって、

この投稿はブログ用にこの投稿はお知らせ用にと用途を変えて作る事が出来ます。

カテゴリー分けしても表示する事は出来ますが、使う用途によって分けてると間違いないし便利！！しかも簡単！！

function.phpに

add_action( ‘init’, ‘create_post_type’ );
function create_post_type() {
register_post_type( ‘news’, // 投稿タイプ名の定義
array(
‘labels’ => array(
‘name’ => __( ‘管理画面の表示名’ ), // 表示する投稿タイプ名
‘singular_name’ => __( ‘管理画面の表示名’ )
),
‘public’ => true,
‘menu_position’ =>5,
)
);
}

赤文字でかかれてるところが入れ子の名前となる所です。

水色の部分が管理画面で表示される名前になります。　ブログ、お知らせ、新着情報…..ect

青文字のところがテンプレートに書く時に必要になる記事の名前になります。

これで記事を入れる場所の下準備はおkとなります。

あとは表示させたい所にタグを追加するだけ！！

<?php $args = array(
‘numberposts’ => 1,                /表示（取得）する記事の数
‘post_type’ => ‘news‘             /投稿タイプの指定
);
$customPosts = get_posts($args);
if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?>

この中に記事の表示させない内容などが引っ張って来れます。　<?php the_content(); ?>  <?php the_title();?>………..ect

<?php endforeach; ?>
<?php else ?>

この中に記事が無かった場合に表示させたい内容。

<?php endif;
wp_reset_postdata(); ?>

このタグを表示したい箇所のテンプレートに突っ込むだけで表示させる事が出来ます！

arrayの所には色々属性を追加する事が出来るので試してみてください：）

 

 

ワードプレスの子テーマのメモ

ワードプレスの子テーマを使うと便利な理由は、親テーマのアップデートが来ても書き換えられる事がない！
そして、必要な箇所のphpだけ持ってきて修正する事が出来るから凄く便利！！！

使うのもすっごく簡単デス！

themeの中に　”名前_child“でファイルを作ってその中にstyle.css と　function.php を追加するだけ！
主に必要なファイルがこの二つで　style.cssには

これを記述するだけです。

function.phpに記述するのは

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}
?>

これを記述するだけです。

後は自分の直したい箇所のphpを子テーマの中に入れて編集すればそれが優先的に読み込まれて行きます。。。。。

 

jsのプラグインでslick.jsっていうのがあってこのプラグインはスライド用のjs用なのですが設定が凄く簡単でぱぱっとサイトで使う事ができるのですご〜〜〜〜〜っく便利です。
使い方も簡単です。

プラグインページ

このページからjsファイルをダウンロードしてきます。

あとはjsファイルを読み込ませるだけで準備が完了します。

$(‘クラスの名前‘).slick();これが一般の使い方で写真一枚が切り替わって行きます。

↑のjsを<script></script>の中に追加で使えます。

htmlの準備も簡単で

<div class=”クラスの名前“>
<div>画像</div>

<div>画像</div>

<div>画像</div>

<div>画像</div>

</div>

これが標準の使い方で追加設定をする事で色々変化を加える事が出来ます！

コンテンツを３個づつ見せたりと変更を加える事が出来ます。

簡単に機能を追加出来ていろいろと変化を加える事が出来るのでかなりオススメです！

 

 

WordPress 4.6になってからの新機能を紹介します。

１、プラグインをアップデートする際にページの移動をしないでアップデートできるようになりました。

２、ダッシュボードに使われるフォントがインストール済みのフォントが表示されるようになったみたい！

３、リンクを張る際にWordPressがミスを見つけてくれる用になる。

４、リビジョンの保存の機能が上がるので復旧の際はもっと簡単になります。

 

制作側ではWP_Site_Query、WP_Network_Queryという、マルチサイト化されたブログ情報にアクセスするクラスと共にget_sites()、get_networks()が追加されました。手軽にマルチサイト化されたブログ情報にアクセスするクラスらしいです。

もっと大きな機能の追加を期待していたのですが、今度に期待です！！

WordPress 4.6はコチラからダウンロード出来ます。

WordPress 4.6

cake.php の自分用メモです。

cake.phpは動かす為に３このフォルダを触らないと動かない。

View:サイトの主なレイアウトを作成するファイル

Controller:プログラムに指示するファイル

Model:このファイルにプログラムで起きた時のエラー処理記述！？

Webroot:css、js、imgを詰め込む

cake.phpもwordpressのようにphpで書かなければほとんどプログラム処理する事が出来ない。

※controllerの中に指示をかかないと表示すらされない事がある。

メール使う為にはメールの設定をしないと使えない

使う為にはconfigファイルのemail.phpで設定する

controllerのファイルにプログラムの指示、viewでもメールの内容の記述も必要になります。

cake.php はメールの設定やフォームの値を返したりとなれたら簡単に作れるので便利らしい。

でも意外と設定が多く、なれるまでに時間が掛かりそうです！！

なれるまでにかなり時間かかりそうですが、扱える等になるとお問い合わせページなど作るのにかなり良さそうです。

前回紹介したAFFINITY DESIGNER はIllustratorよりなのですが、
今回のはPHOTO SHOP よりのAFFINITY PHOTOを紹介します。

こっちは写真加工に特化していてPHOTO SHOPで出来るほとんどの事が出来るらしい！（？？）

AFFINITY DESIGNERは自分も使っているのですが、AFFINITY PHOTOの方も買うとしてます！
前回紹介したのですがコストパフォーマンスがすごくいい！！　コチラの方もMacの方だとApple Storeから買う事が出来ます。

値段はなんと！6000円どっちもなんと6000円！！！！

コスパは凄くいい。。。。。。。！！！！！

性能も凄くいいです！見た感じ操作が簡易化されててかなりいい感じです。

これはプロの方が加工してる光景なのですが、左にあるメニューもパッと見　ん！？　ってなるかもしれませんがきっと使ってみると名前が違う方でPHOTO SHOPのツールとだいたい一緒なのかなと思います。

自分も買って使ってみようと思います！！！

URL：https://affinity.serif.com/en-gb/photo/

公式ページに加工してる動画があるので皆さん見てみてください。凄い衝撃を受けると思います！！

 

 

 

8月3日からスタートしました、Kindle Unlimitedは、月額980円（税抜）で対象のKindle電子書籍が読み放題にサービス。初回30日間は無料でお試しが可能です。これでもっと読書の時間を増やしたいと思います。

1度に10冊までしか読むことができません、11冊目を読むには、1冊読んで削除して新しい本を選ぶということになります。

画像編集ソフトは何を使っていますか？？

Photo shop やillustratorは使ってる人が多いと思いますが、AFFINITY DESIGNER が最近グイグイ来てます！

adobe製品とは違い一回買ってしまえばどんどんアップデートされて機能がどんどん増えて行ってます。

結構色んな拡張子に変更出来て結構いい感じです！

このAFFINITY DESIGNERはillustratorに凄く近い機能をもってて

AFFINITY DESIGNERとは対になってるAFFINITY PHOTOってアプリもあります。

AFFINITY PHOTOはPhoto shopにすごく近い性能を持ってます。

何と言っても月額でずっと払うのとは違うのでいい感じかなと思います。

AFFINITY DESIGNERの中はというと、、、

中身は凄くillustratorに似ている！？

私も始めたばかりでそこまで機能をちゃんと見てないのですが少し触った感じだと少しの作業ならAFFINITY DESIGNERで行けそうな感じがします。

どんどん使い方を勉強していこうと思います。

ワードプレスの記事表示の際によく使う属性のメモ

<?php query_posts(”); ?>

cat・・cat=数字、数字、数字

カテゴリー指定の属性　自分の表示したいカテゴリーの記事だけをループさせることが出来る。

posts_per_page・・記事の表示数の指定。

order・・・・順番の並び替え

ASC,DESC　などがあって ASCは昇順表示。 DESCは降順表示。

orderby・・・・ 並び順の基準を指定。

date,category,title,ID などがある　他にも色々あり！

この４つしか使った事が無いのですが他にもあります。

page_id・・・・ID指定で指定する。

ほかの追加する奴も試してみたいと思います。

使い方が詳しくわからない時は

CodeXをみて書き方を調べよう！

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts