デジタルドリームワークスからHigaです。
WordPressを導入しているサイトはプラグインでAMPページに対応することが出来ます。
https://wordpress.org/plugins/amp/
まずはインストールしてみます。
インストールが済んだら、早速AMPページへアクセスしてみましょう！
導入は簡単ですね。
AMPは文法エラーなどがあると、キャッシュしてくれないのようです。
必ずエラーチェックを行ったようが良いと思います。
エラーのチェックは以下より。
https://search.google.com/search-console/amp
テストで確認したページは問題なさそうです。
特にこだわりがなければ、プラグインを有効化するだけで簡単に導入出来そうです。
書籍を確認するとメニューを入れたり、色々カスタマイズが出来るようなので引き続き勉強していきたいと思います。
デジタルドリームワークスからHigaです。
ホームページでも案内をしておりますが、先週より美浜へ事務所を移転しました。
今後ともどうぞよろしくお願い致します。
どの業界でも同じことと思いますが、Web業界も技術進歩が凄まじく早く、日々さまざまな事を吸収していかなければいけません。
その1つとしてAMPがあげられると思います。
以前のブログにも下調べとして投稿しましたが、弊社でもこれから本格的に導入してきます。
Digital Dream WorksからHigaです。
業務でWordPressの移設をすることがしばしばあるので、よく忘れてしまうDB文字セットについてメモしておきます。
WordPress移設の際、 SQLデータをインポートすると「Unknown collation: ‘utf8mb4_unicode_ci’」ということでDB移設ができない場合があります。
これはWordPress4.2よりデフォルトのデータベースの文字セットがutf8からutf8mb4に変更されたことがひとつの原因です。
utf8：1文字を3バイトで構成
utf8mb4：utf8の拡張版のようなもの（1文字を4バイトで構成、今までの文字に追加の文字セットが使える）
ということで、utf8mb4はutf8の拡張版で絵文字などの文字が追加されているようです。
WordPressの推奨とあってWordPressのアップデートの際に以下の条件がそろっていると自動で「utf8mb4_unicode_ci」に変更されるようです。
・現在utf8の文字セットが設定されている
・使用しているMySQLサーバーのバージョンが5.5.3もしくはそれ以上
・使用しているMySQLのクライアントライブラリーが5.5.3もしくはそれ以上の場合、又はmysqlndを使用している場合は5.0.9かそれ以上の場合
照会順序はいつも「utf8_general_ci」にしてるけどな…って思ったらそういうことでした。
さて移設先の環境がどうしても「utf8mb4_unicode_ci」を利用できないこともあります。
その際にはSQLを修正してあげる必要があります。
SQL文で直接置換する方法などもあるようですが、
自分はphpMyAdminなどを利用して SQL文エクスポート、修正、インポートする方法で変更を行ないます。
SQLデータのバックアップがテキストで出力されるのは、何となく安心出来ます。
1. SQL文をエクスポートしてバックアップ
2. テキストエディタで開いて、「utf8mb4_unicode_ci」を「utf8_general_ci」に置換
3. 「utf8mb4」を「utf8」に置換
4. wp-config.php内にあるcharsetの文字コードを確認して「utf8mb4」なら「utf8」に書き換え
5. それぞれをインポート、アップで完了
ざっくりと書きましたが、この手順はGoogleで検索すればたくさんの記事がありますので参考にして下さい。
というわけセキュリティー的にも出来るだけMySQLもアップデートしていくことがベストですが、
サーバー環境（PLESK等）や他システムの兼ね合いでどうしてもMySQLのバージョンがあげられないサーバーへの移設はこの方法で回避できます。
稼働中サーバーのMySQLのバージョンアップなどは怖くて気が引けます。
自分が会社に入りたての頃は依存関係などでサーバー全体がおかしくなったりと大変だったような覚えがあります。
今ではある程度安心して MySQLやPHPなどのアップデートは行えるのでしょうか…
ご意見などコメントいただけると幸いです m(_ _)m
それでは！
デジタルドリームワークスから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です。
これまで数回に分けて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利用者の方でこういう場面で便利ですよなどご意見があれば、ぜひコメントいただけると嬉しいです。
次回、利用シーンが多いと思われるバリエーションのある登録です。
それでは！