OneSignalでWordPressにWeb pushを導入する方法

OneSignal

以前も書いたのですが、アップデートがあったようなのでもう一度書きます!

 

 導入方法

Select Platform

f:id:himrr:20171223143020p:plain

ここまでは以前と変わりませんが、Web Pushを選択。

 

App Settings

f:id:himrr:20171223143117p:plain

こういったページにとぶので、①のChoose Integrationから真ん中のWebsite Builderにとび、ワードプレスを選択。

f:id:himrr:20171223143251p:plain

すると②のWordPress Site Setupが表示されるので名前とURLを各々入力。

SSL化できてないとアイコンが選べないので注意してください。

 

f:id:himrr:20171223143750p:plain

SAVEを押すとこのページに飛ぶので、APP IDとAPP KEYをそれぞれコピーしてプラグインページに貼り付けて終了です。

前まではIDとKEYが逆の位置にあったのでややこしかったですが解消されてました。

Woo Product Slider and Carousel with categoryを使ってみた

Woo Product Slider and Carousel with category

カテゴリ別の商品スライドがほしかったのでこのプラグインで対応。

結構色々指定したカルーセルを作ることができました。

 

使い方

参考にした動画がこちら。

www.youtube.com

 

基本youtube見ながらするんですけど、せっかちなのでついつい飛ばし見しちゃいます。

 

f:id:himrr:20171130170230p:plain

 

インストール後、Product > Product Slider -How It Worksに設置されてます。 

まあここにはたいしたことは書いてなかったので

 

wordpress.org

 

こっちを見ながら実装しました。

[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時間くらいかかりました。

 

f:id:himrr:20171129170329p:plain

 

使い方

参考にした動画はこちら。

www.youtube.com

 

まずは切り取りの設定をします。

Woocommerce > Settings > Products > Displayからサムネイルのサイズを記入し、切り取りにチェックを入れて保存します。

私は一度チェック入れ忘れたまま実行してしまったので無駄に15時間使ってしまいました。

 

f:id:himrr:20171214185628p:plain

 

その後 Tool > Regen. Thumnailsでを押せばトリミングがはじまります。

 

f:id:himrr:20171129170451p:plain

Onesignalを使ってWordPressにWeb Pushを実装してみた

Web Push

Web Pushとは過去にサイトに訪れて購読登録したユーザーに、管理者がメッセージを送れる機能です。

これのことだと思ってます。

f:id:himrr:20171121192645j:plain

今回はOnesignalを使ってこのWeb Pushを導入してみようと思います。

 

Onesignal

とにかく使いやすく無料で使える機能がとても多いです。

iOS, Android, Web Push, Unityなどに対応していて近日中にAmazon Alexaに対応するとか。

 

 導入方法

まずはOnesignalに登録して新しいappを作成します(割愛)。

 

Select Platform

f:id:himrr:20171121193423p:plain

Web pushということで下段真ん中を選択。

 

f:id:himrr:20171121193505p:plain

今回はChromeFirefoxを選択しました。

せっかくSafariも対応しているそうなのでこっちもいずれ導入したいですね。

 

Configure Platform

f:id:himrr:20171121193700p:plain

こちらに該当サイトのURLを貼り付けます。サディレクトリの場合でもドメインまでとのこと。

 

Select SDK

f:id:himrr:20171121193816p:plain

その後、Wordpressを選択してNEXTするとRest API KeyとApp IDが手に入ります。

 

 OneSignal Push

 Word Pressの管理画面からOneSignal Push > Configurationへ。

f:id:himrr:20171121194215p:plain

ここにさっきのRest API KeyとApp IDを貼り付けます。

※OneSiganalの管理画面とは順番が逆になっているので注意

 

その後最下部にある「Save」をクリックして導入することができます。

f:id:himrr:20171121201152p:plain

こういうエラーが出ますが、ひとまず気にせずにフロント側で確認してみましょう。

右下のベルから購読登録ができるようになっています。

 

Install SDK

 

f:id:himrr:20171121205220p:plain

購読登録後、「Check Subscribed Users」を押すことでこの緑の部分が表示されると思います。

そうしたら「DONE」を押して、終了です!簡単ですね!

ちなみにですが誰も購読登録していない状態で「Check Subscribed Users」を押すと緑ではなく赤の文字が出ます。

 

次回は設定等を詳しく見ていきたいと思います!