OneSignalでWordPressにWeb pushを導入する方法
OneSignal
以前も書いたのですが、アップデートがあったようなのでもう一度書きます!
導入方法
Select Platform
ここまでは以前と変わりませんが、Web Pushを選択。
App Settings
こういったページにとぶので、①のChoose Integrationから真ん中のWebsite Builderにとび、ワードプレスを選択。
すると②のWordPress Site Setupが表示されるので名前とURLを各々入力。
SSL化できてないとアイコンが選べないので注意してください。
SAVEを押すとこのページに飛ぶので、APP IDとAPP KEYをそれぞれコピーしてプラグインページに貼り付けて終了です。
前まではIDとKEYが逆の位置にあったのでややこしかったですが解消されてました。
Woo Product Slider and Carousel with categoryを使ってみた
Woo Product Slider and Carousel with category
カテゴリ別の商品スライドがほしかったのでこのプラグインで対応。
結構色々指定したカルーセルを作ることができました。
使い方
参考にした動画がこちら。
基本youtube見ながらするんですけど、せっかちなのでついつい飛ばし見しちゃいます。
インストール後、Product > Product Slider -How It Worksに設置されてます。
まあここにはたいしたことは書いてなかったので
こっちを見ながら実装しました。
[products_slider slide_to_show="5" slide_to_scroll="4" cats="65" autoplay="false" limit="24" dots="false"]
ってかんじですね。
ショートコード
slide_to_show=""
一度に表示するサムネイルの数。
slide_to_scroll=""
スクロールする数。さっきの例だと5つ表示されて4つスクロールされるので毎回1つ残る感じです。
cats=""
カテゴリーID。
Product > Categoryから各カテゴリーの編集画面を開くとURLに「tag_ID」とあるんですけど、その直後にある数字がカテゴリーIDです。
autoplay=""
自動スクロール。デフォルトではtrueです。私は5個くらいカルーセルを設置していたので各々がびゅんびゅん動いてました。
limit=""
表示するサムネイルの総数。
dots=””
今何ページ目、みたいな感じのドットですね。名前がわかりません。デフォルトではtrueです。
arrows=""
左右にスクロールできるよっていう矢印です。こちらもデフォルトではtrueです。
speed=""
スライダーのスピードです。
レスポンシブ対応
woo-product-slider-and-carousel-with-category/assets/jsの下のpublic.jsに記載します。
私もあまり詳しくはないのですが、なんだかiPhone4sまでしか対応してないように見えます。
なので自分で数値とか書き換えないといけないみたいですね。
ちなみにモバイル版だとslide_to_showが1になってます。おどろきます。
追記(2018/01/05)
すごく重たかったので結局デフォルトのショートコードを使用しました。
[ux_custom_products cat="カテゴリー名"]
で表示させることができます。
http://frostfirelighting.com/shortcodes/shortcode-product-sliders/
woocommerceでregenerate thumnailsを使ってサムネイル画像の大きさををそろえる
Regenerate Thumnails
商品画像を一覧で表示させたときにサムネイルのサイズがばらばらになってしまったので揃えてみました。
今回使用したのはこのプラグイン。使用後は消してしまっても大丈夫です。
画像数にもよりますがかなり時間がかかるので注意してください!私は15時間くらいかかりました。
使い方
参考にした動画はこちら。
まずは切り取りの設定をします。
Woocommerce > Settings > Products > Displayからサムネイルのサイズを記入し、切り取りにチェックを入れて保存します。
私は一度チェック入れ忘れたまま実行してしまったので無駄に15時間使ってしまいました。
その後 Tool > Regen. Thumnailsでを押せばトリミングがはじまります。
Onesignalを使ってWordPressにWeb Pushを実装してみた
Web Push
Web Pushとは過去にサイトに訪れて購読登録したユーザーに、管理者がメッセージを送れる機能です。
これのことだと思ってます。
今回はOnesignalを使ってこのWeb Pushを導入してみようと思います。
Onesignal
とにかく使いやすく無料で使える機能がとても多いです。
iOS, Android, Web Push, Unityなどに対応していて近日中にAmazon Alexaに対応するとか。
導入方法
まずはOnesignalに登録して新しいappを作成します(割愛)。
Select Platform
Web pushということで下段真ん中を選択。
せっかくSafariも対応しているそうなのでこっちもいずれ導入したいですね。
Configure Platform
こちらに該当サイトのURLを貼り付けます。サブディレクトリの場合でもドメインまでとのこと。
Select SDK
その後、Wordpressを選択してNEXTするとRest API KeyとApp IDが手に入ります。
OneSignal Push
Word Pressの管理画面からOneSignal Push > Configurationへ。
ここにさっきのRest API KeyとApp IDを貼り付けます。
※OneSiganalの管理画面とは順番が逆になっているので注意
その後最下部にある「Save」をクリックして導入することができます。
こういうエラーが出ますが、ひとまず気にせずにフロント側で確認してみましょう。
右下のベルから購読登録ができるようになっています。
Install SDK
購読登録後、「Check Subscribed Users」を押すことでこの緑の部分が表示されると思います。
そうしたら「DONE」を押して、終了です!簡単ですね!
ちなみにですが誰も購読登録していない状態で「Check Subscribed Users」を押すと緑ではなく赤の文字が出ます。
次回は設定等を詳しく見ていきたいと思います!