作者別: higa

さてデジタルドリームワークスからHigaです。
以前に投稿した、「WordPress 管理メニュー、ページの追加」の続きを行います。

WordPress 管理メニュー、ページの追加

今回はさっそくフィールドを追加、データを登録する部分を勉強していきたいと思います。
前回のテーマページへフィールドを追加…
のはずが、どうも上手くいかず宿題です。
来週に持ち越しということですみません！

というわけで、今回は独自のフィールドを「設定」->「一般」のページ内に追加します。

以下がfunction.php内に記述したコードになります。

ざっくりとポイントを説明します。
WordPressにはフィールドを設定できる関数が用意されています。
素晴らしい！！

● add_settings_section

設定ページでヘッダを共有するいくつかの設定のまとまりです。
設定項目をまとめて表示することができます。HTMLでいうsectionタグ内で囲う部分みたいなイメージでしょうか。

——

● add_settings_field

設定項目を設定ページとセクションへ登録します。
どのsettings sectionに登録するのか、どのような項目を追加するか設定できます。

——

● register_setting
設定項目と無害化用コールバックを登録します。
どちらかというと、こちらで項目を登録して、add_settings_fieldで出力しているイメージでした。

項目が表示されているか確認してみましょう！
管理画面「設定」->「一般」 に表示されていますね。

さて実際に登録できるようになれば、この設定項目をテーマに反映させていきましょう。
今回はGoogle Map API キーを管理画面から登録出来るような形にしました。

項目に値が入っていれば、JSコードを出力します。
出力にはget_option関数を使用して出力。

出来ましたね♪
今回出来なかった部分は次回に投稿出来ればと思います。
間違っている部分やおかしい部分があればぜひコメントいただけると幸いです。

デジタルドリームワークスからHigaです。
早速ですがJetpackの機能はたくさんありますが、今回はフォーム機能を確認していきます。

 

 

Jetpack->設定->Writing->コンタクトフォームが有効化されていれば利用できます。
自分の環境ではデフォルトで有効化されていました。
有効化されていれば投稿や固定ページの投稿画面に「お問い合わせフォームを追加」のボタンが表示されています。
早速挿入。
項目も簡単に追加や削除が行えます。
また送信先の設定やメールの題名部分の指定も行えます。

 

 

 

 

さて一般的な項目を設定して挿入。
するとショートコードが挿入されていることが確認できます。そのまま公開で完了。

 

 

さてページを見てみましょう。
簡単にフォームが挿入できますね♪
それではテスト送信をしてみます。

 

 

必須項目が空白の場合はエラーページも表示されます。

 

 

送信完了ページはこんな感じ。

 

さらにメールの内容は、管理者メールを受信する他に、管理画面追加された「フィードバック」から確認出来ます。
簡易的なフォームですが、手軽にフォームを挿入できていいですね。

 

 

さてここで制作側の視点から見るチェックポイントです。

 

1. 確認画面がない

Jetpackのメールフォームには確認画面は用意されていません。
送信をクリックするとすぐにメール送信が完了します。
確認画面は必要ないという方もいるので、賛否両論ありますが、個人的な感じだとすぐに送信されることに抵抗がありました。
確認画面の有無が設定できれば1番良いですが…
たしかフォーム系のプラグインで有名なcontactform7にも確認画面はついておらず、その方が良いと考える人が多いのかもしれません。

 

2. 追加できるフィールドに画像などの添付が出来るタイプがない

さまざまな種類のフィールドを追加できます。テキストエリアやラジオボタン、セレクトボタン等…
でも画像やファイルを添付出来るフィールドは用意されていません。
簡易フォームにここまでの機能を求めるのは酷ではありますが、時々画像を添付出来るようにしたいという要望もあります。
それには対応出来ません。

 

3. 送信者には自動配信が行われない

上記はまぁしょうがないという感じはありますが、送信者への自動配信が行われないのはかなり抵抗を感じました。
指定した管理者へメールは届きますが送信者にはメールが配信されない為、
送信者は問題なく送信出来たのか、どのような内容を送信したか確認するすべは無く、
この部分をクリアするには管理者側でメールを受け取ったなどの連絡を行わないといけません。

上記が触ってみての気になるポイントでした。
簡易フォームにここまでの機能を求めるのは…という感じですね。
それを踏まえて利用するのであれば導入も簡単で、CSSなどである程度レイアウトも調整できるのですごく便利だと思いました。

間違っている情報やカスタマイズ情報などございましたらぜひコメントいただけるとうれしいです。
それでは！

 

 

デジタルドリームワークスからHigaです。
急ぎの業務が山積みの為、薄い内容で大変申し訳ございません。
これからしばらくJetpackについて調べていきたいと思います。

WordPressを利用して制作する機会が多いのですが、制作の際に気をつけていることのひとつ。
それはプラグインを入れすぎないことです。
WordPressは素晴らしいプラグインがたくさん存在しています。
機能拡張の際にはついつい色々入れてしまうのですが、入れすぎてしまうと管理が大変だったりプラグインがWordPressのバージョンに追いつけず不具合が出ることもあります。

もちろん全然入れないということではなく、プラグインを使わず機能拡張できる部分はゴリゴリとコードを書いていく方が何かと管理しやすかったりするな。
と思っています。

さてそんな自分ですが、今回WordPressのプラグイン Jetpack for WordPressの機能をいくつか見ていて、何で今まで導入しなかったのかと思うほど素晴らしい機能満載のようです。
これから数回に分けて便利と思う機能を勉強して投稿していきたいと思います。

インストールして有効化するにはWordPress.comと連動を行なっている為、WordPress.comのアカウントが必要になります。
インストールしたWordPressの管理画面からアカウント追加など行えます。
インストール後の感想としては、インストールしたWordPressの管理画面とWordPress.comの管理画面を行き来することが多くわかりづらい…勉強しながら慣れていきたいと思います。

それではまた次回！

以下に有効化した際に利用できる機能をキャプチャしておきます。

 

 

デジタルドリームワークスからHigaです。
今回はWeb関係の投稿から離れてiMacのメモです。

 

先日Adobe Dreamweaver CC 2017などをアップデートするためにmacのOSをSierraにしました！
さっそくAdobe製品を確認！！
機能をはじめ、デザインも一新していてとても良いですが…かなり動作が重い。
しばらく我慢していましたが、うーん…作業に支障が出てきたので調査。

 

スペックの関係かなと思いつつアクティビティモニタでプロセスを確認していると、「secd」という謎のプロセスがCPUの80%近くを消費していることを発見。
secdはiCloudとキーチェーンを同期するプロセスだとか…
でもiCloudで同期は行なっていないのですが、キーチェーンのデータが壊れている場合にもsecdプロセスがCPUを消費するような記事もありましたので、思い切ってキーチェーンのデータを初期化してみました。

するとCPUの負荷が落ち着きました！よかった…
まだ複数のAdobe製品を立ち上げると重く感じますが、だいぶ改善されました。

 

ただ1点しくじったこと、キーチェーンを初期化したため、メールをはじめとするiMacに設定、登録してあるパスワードが無くなりました。
当たり前ですね 笑 orz…

 

どうすればもっとスマートに直せたんだろう…ディスクユーティリティで出来たのか??
とメールパスワードを再設定しながら思いつつも、とりあえず作業環境を改善出来たこと。勉強になりました。

こうしたら直りますよ！など情報がありましたらぜひコメントいただけると嬉しいです！
それでは！

デジタルドリームワークスからHigaです。
これまで数回に分けてWordPress WooCommerceの基本（登録部分）を確認していきました。
少し今回はお休みをしてWordPress管理画面 メニューのカスタマイズについてです。

いずれはWordPressのプラグインを作成してみたいと思います。
そこで設定項目などを追加するなら管理画面へ設定ページを追加する機会も必ず出てきます。
それでは今回試すこと…

今回は手始めですので、管理メニュー、ページの追加のみです。
設定項目の追加や値を保存するのは次回以降に確認します。
それではさっくりいきましょう!

 

● 管理画面へサブレベルメニュー、ページの追加

WordPressは素晴らしいCMSです。もちろんメニューを追加する関数、アクションフックが用意されています。
以下の関数を利用します。

 

アクションフック
「admin_menu」

設定項目へメニューを追加する関数
add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);

 

 

簡単に追加出来ますね。
add_options_page 「設定」メニューへサブレベルメニューを登録する関数ですが、トップレベルメニューへの登録関数も用意されています。

 

ダッシュボード
add_dashboard_page( $page_title, $menu_title, $capability, $menu_slug, $function);

投稿
add_posts_page( $page_title, $menu_title, $capability, $menu_slug, $function);

メディア
add_media_page( $page_title, $menu_title, $capability, $menu_slug, $function);

固定ページ
add_pages_page( $page_title, $menu_title, $capability, $menu_slug, $function);

コメント
add_comments_page( $page_title, $menu_title, $capability, $menu_slug, $function);

外観
add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);

プラグイン
add_plugins_page( $page_title, $menu_title, $capability, $menu_slug, $function);

ユーザー
add_users_page( $page_title, $menu_title, $capability, $menu_slug, $function);

ツール
add_management_page( $page_title, $menu_title, $capability, $menu_slug, $function);

 

===================

 

● 管理画面へトップレベルメニュー、ページの追加

アクションフック
「admin_menu」

トップレベルメニューを追加する関数
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

 

 

こちらも簡単に追加できますね。
ついでにサブメニューも入れてみましょう！

 

サブメニューを追加する関数
add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function);

 

 

さて、管理画面へのメニュー追加を行いました。
プラグインでメニューを追加することも出来るのですが、プラグインを入れ過ぎるとプラグインのバージョンアップや管理が大変なので、
プラグインを利用しなくても出来そうな部分はコードを入れて機能拡張したいと思っています。（個人的見解）

実際に項目を登録する作業は次回に持ち越しです。
間違っている部分や他の方法、関連情報があればぜひコメントいただけると嬉しいです。
それでは！

デジタルドリームワークスからhigaです。
さて前回までWordPress WooCommerce プラグインの商品登録や配送設定について確認していきました。
今回は商品登録の際に、必要ないと思った商品タイプ（アフェリエイト商品やグループ商品）の削除についてです。

WooCommerceはとても素晴らしいプラグインです。
様々な商品に対応出来る様にデフォルトで様々な設定項目がたくさんあります。
しかし必要の無い設定項目は、煩わしく、複雑になるため不便な場合もあります。
それでは今回は必要のない商品タイプの削除を行ってみましょう。

 

 

WooCommerceにはデフォルトで以下の商品タイプが用意されています。

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

以上4つです。

それでは必要のない「グループ化された商品」、「外部/アフェリエイト商品」を削除します。

商品タイプを登録、削除する際にはWooCommerceにあらかじめ用意されている以下のフィルターフックを利用します。

 

「product_type_selector」

 

実際のコードは以下

add_filter( ‘product_type_selector’, ‘remove_product_types’ );

function remove_product_types( $types ){
unset( $types[‘grouped’] );
unset( $types[‘external’] );

return $types;
}

商品タイプをunsetで削除します。
ちなみにそれぞれの商品タイプのキーは以下…

・simple （基本的な商品）
・grouped （グループ化された商品）
・external （外部/アフェリエイト商品）
・variable（バリエーションのある商品）

※ /woocommerce/includes/wc-product-functions.php 内で確認出来ます

 

 

削除されていることが確認出来ますね。

 

以上
今回はさっくりと必要の商品タイプを削除を行ってみました。
間違っている部分や、別の方法などございましたらコメントいただけると嬉しいです。

新しい商品タイプの登録や新しい設定項目の登録も出来れば、さらにWooCommerceの利用シーンが広がりますね。
この部分は結構な労力が必要と思いますが、引き続き調べていきたいと思います。

デジタルドリームワークスからHigaです。
さて前回に引き続きWordPressのプラグインWooCommerceの基本を勉強していきます。
今回は配送設定です。

WooCommerce2.6系になり、地域ごとに配送設定が出来るようになりました。
2.5系以前と大分設定画面がことなります。
さて項目ごとに解説するのも難しいので、実際にヤマト運輸を想定した設定を行います。

・商品　60サイズの料金で登録
・10000円以上購入で送料無料

1. 送料設定画面へアクセス

左のメリューから 「WooCommerce」->「設定」->「送料」へ移動します。
「配送地域を追加」から地域を追加しましょう。

ヤマト運輸の場合、12エリアで料金設定があります。
すべて登録するとこのようになりますね。

———

2. 配送方法の追加

次に「配送方法の追加」を行います。
それぞれのエリアに配送方法「定額送料」、「無料送料」を追加しましょう。

———

3. 金額の入力

配送方法の部分からそれぞれ料金、無料送料の設定を行うことが出来ます。

これで設定完了です。
早速、カートに商品を入れてどのような表示になるのか見てみましょう

想い通りの配送料金の設定になりました。

番外編

一般配送の商品と、クール便で配送する商品がある場合があります。
その際には、「配送クラス」の追加により、クール便の設定等も実現出来ます。

「WooCommerce」->「設定」->「送料」画面から「配送クラス」へ
「配送クラス」の追加でクール便とよく分かりませんがヤマト運輸のホームページにあった宅急便タイムサービスを登録してみました。
すると配送方法の料金等を設定した画面に配送クラスの料金を入力出来る項目が追加されました。
ここに追加の料金を入れればオッケーですね。

ここで注意！実は上記では問題があります。
クール便と一般配送の商品がカートに入ると、クール便の料金のみが（料金が高いため?）もので計算されて出力されます。

さてこの問題を解決するには…

1. 「金額」を入力しない。
2. 配送クラス費用部分に料金を入力

以上の設定方法で、一般配送とクール便がカートに入っている場合はそれぞれの配送料金が合計されて表示されています。

ということで配送についての勉強を行いました。
一般配送とクール便を同時に購入しても配送料が正しく計算出来る部分等はとくに優れていると感じます。
EC-CUBEでも出来なかった様な…
ということ2.6系の配送設定を勉強していきました。
WooCommerceもバージョンアップを重ね、かなり使いやすいシステムとなっていますね。
解説の誤りや別の設定方法などございましたらぜひコメントいただけると幸いですm(_ _)m

最後に1点惜しいところ…
上記で設定した無料配送ですが、もちろん設定可能です。
ただ、10,000超えるとかならず配送無料ということではなく、無料配送が選択出来る表示になっていました　笑
間違いではありませんが、10,000超えると自動で無料配送と表示された方がスマートですよね。
カスタマイズでどうにかなると思いますが…

以上、それではまた！

デジタルドリームワークスからHigaです。
さてWordPress WooCommerceの商品登録を引き続きすすめてきます。
今回は商品登録編の最後、「バリエーションのある商品」です。

バリエーションのある商品とは…
実際にECショップを運営するとサイズやカラーで料金が違う商品が出来ています。
そんな商品を登録する際に利用します。

さっそく見ていきましょう！

商品登録画面を確認します。
「バリエーションのある商品」を選択すると、設定項目が表示されます。
こちらもほとんど基本的な商品の登録項目と同じですね。

● 一般
● 在庫
● 送料
● リンクされている商品
● 属性
● バリエーション
● 高度

ポイント
今まで「一般」の項目にあった、標準価格、セール価格が表示されません。
「バリエーション」の項目によって登録していきます。
その他、バリエーションの設定項目が増えています。

説明では難しい部分もあるので、実際に登録を進めながら流れを抑えていきましょう。

 

カラーごとに料金が違う商品の登録

 

初めに属性の登録をしましょう

左の「属性」から登録を行います。
今回は「商品カラー」で登録しました。

次に商品カラーの「赤」「青」「黒」項目を登録していきます。
これで属性登録は完了です。

 

商品登録を進めていきます

タイトルや説明などの基本的な部分を入力し終えたら、バリエーションのある商品の設定項目です。

「属性」項目をクリック

カスタム商品属性の選択部分から先ほど登録した「商品カラー」を選択して追加

商品カラーのどの項目を入れるか選択します。すべてを選択をクリックすれば、登録したすべての色が設定されます。
もちろん商品によって、「黒」は無しとか、「赤」は無しの設定も出来ます。
今回は全ての色を選択、
バリエーションのために使用にチェックをいれて属性を保存

次に「バリエーション」の設定項目です。

追加バリエーションのセレクトボックスから「すべての属性からバリエーションを作る」を選択して表示
確認ウィンドウが出ますのでOKで続けます。
するとそれぞれの属性で登録出来る項目が表示されました。

設定内容は他の商品登録と同じ内容なので省きます。
登録が完了したら、一覧ページ、詳細ページを見てみましょう。

一覧

詳細

属性は複数可能です。
カラー×サイズでの登録も可能です。登録数が多いと大変ですね 笑

●サイズとカラーをバリエーション登録した場合…

とういうことでざっと商品登録を見ていきました。
今回はカラーごとに料金が違う商品の登録を想定して説明しましたが、
料金が同じでもカラーを選択して注文やサイズを選択して注文等、利用シーンは多くあると思います。

さて説明不足の部分もありますが、実際に触ってみて慣れることが一番です。
色々試してみたいと思います。

次回はWooCommerceの配送設定について確認していきたいと思います。
WooCommerce2.6系になり配送部分は大きく変わっています。楽しみです。
それでは！

デジタルドリームワークスからHigaです。
さてWooCommerceの基本 商品登録の続きを進めていきます。
今回は「外部/アフェリエイト商品」の登録です。

 

 

外部/アフェリエイト商品タイプの登録項目は以下となります。

・一般
・在庫
・リンクされている商品
・属性
・高度

前回同様、「一般」以外は以前に投稿している基本的な商品と同じなので説明を省きます。
それでは「一般」の設定項目を確認してきます。
基本的な入力項目は他の商品タイプと変わりませんが、「商品 URL」の項目と「ボタンテキスト」が表示されています。

● 商品URL
● ボタンテキスト
● 標準価格
● セール価格
● 税状況
● 税区分

ポイント
「商品URL」にリンク先を登録。「ボタンテキスト」にテキストを入れます。

 

さて登録が終わったら一覧、商品ページを確認してみましょう。

●商品一覧ページ

● 商品詳細ページ

少し分かりにくいですが、ボタンテキスト部分をクリックすると登録した商品URL先へ飛びます。
商品名や商品画像をクリックすると商品詳細ページが表示されます。

 

ということで外部/アフェリエイト商品の登録でした。
外部の商品ページに飛ばすという機能がメインの商品タイプで、利用場面が見つからないと感じました。
追々この項目は削除する方法を確認したいと思います。笑

 

WooCommerce利用者の方でこういう場面で便利ですよなどご意見があれば、ぜひコメントいただけると嬉しいです。
次回、利用シーンが多いと思われるバリエーションのある登録です。
それでは！

デジタルドリームワークスからHigaです。

さて先週に引き続きWooCommerceの基本 商品登録を確認していきます。
今回はタイトルの通り、グループ化された商品です。

 

 

基本的な商品に比べて設定項目が少ないですね。

・在庫
・リンクされている商品
・属性
・高度

各項目は基本的な商品と同じなので説明を省きます。
またグループ化された商品には料金についての項目やグループ化する商品についての設定項目もありません。
グループ化された商品を登録しても以下の様になるだけです。

 

● 商品一覧ページの見た目

 

● 商品詳細ページの見た目

 

ではどこで行うのか…

 

実はグループ化する各商品側でおこないます。
それではグループ化する個々の商品を登録します。
基本的な商品タイプで登録…
重要なのは「リンクされている商品」->「グループ分け」の項目です。
前回、機能が確認出来なかった部分ですね 笑

 

 

グループ化された商品を登録すると、ここで選択出来る様になります。
他の項目も入力して公開します。今回は3つの商品を登録して確認。

 

● 商品一覧ページの見た目

 

● 商品詳細ページの見た目

さてこのようにまとめて購入する必要がある商品の登録には便利ですね。
グループ化された各商品は個別にも購入出来ます。

さて少し実践的な考えをしていきましょう。
まとめて購入する場合は、各商品が安くなる場合が多くあります。
その場合には、商品一覧ページや検索ページには非表示にすることも出来ます。

商品登録の際には右枠にある「公開」項目の「カタログの見え方」から「不明」を選択します。
ちょっと日本語訳がおかしいですね 笑

 

 

すると一覧ページや検索ページで非表示となります。
個別に購入する場合より、まとめて購入の場合は安くする設定が出来きますね。

 

 

ここで1点注意です。
この設定は実は完璧ではありませんでした。
一覧や検索には表示されないですが、商品のページは存在しており購入も可能です。
商品詳細のURLを知っている人や何らかのアクセスからページにアクセス出来た場合、まとめて購入しなくても安く購入出来る可能性があります。
まとめて購入の場合に各商品を安くする場合は、プログラムのカスタマイズが必要かもしれません。

 

ということでグループ化された商品の登録を勉強しました。
まとめての値段設定は行えないので、場合によっては扱いづらいかもしれません。
なかなか時間がかかりますね。これからはペースを上げて勉強していきます。