楽天モーションウィジェットが重いなら楽天APIで高速化すれば良いじゃないか

楽天モーションウィジェット⇒楽天APIで高速化

WordPressでブログをやっている人は、Wordpressの高速化にとても興味関心があると思います。PageSpeed Insightsで悪い結果が出ると何とかしなくてはいけないと思いますよね?

WordPressを高速化するプラグインは色々ありますが、プラグインうんぬんの前に、Wordpressを重くしているものを取り除く事も大切だと思います。

【スポンサーリンク】

 

WordPressが重い原因の1つは楽天モーションウィジェット

楽天が言うには楽天モーションウィジェットの売り上げは従来リンクの『7倍』だそうですが、楽天モーションウィジェットのデメリットは張り付けるとサイトが非常に重くなる事。

そして、サイトが重くなると検索結果の順位に非常に悪影響を与えます。

順位が悪くなるとアクセス数が激減するので、楽天モーションウィジェットを貼る意味があるのかという問題にぶち当たります。

PageSpeed Insightsでテストしてみた結果、楽天モーションウィジェットを貼った場合、モバイルは『48点』だったのですが、楽天モーションウィジェットを外すと『63点』になりました。15点も違うのです。

ネットを検索してみた所、楽天モーションウィジェットを外して対応している人もたくさんいました。私も最初は楽天モーションウィジェットを外して対応しましたが、楽天モーションウィジェットを高速化させる事はできないものかとググりまくりました。

結果として、できるかどうかは分かりませんが、そういう事を記事にしている人は見つかりませんでした。

次に、発想を変えてみる事にしました。楽天モーションウィジェットが使えなくても楽天モーションウィジェットと同じような事が重くならずにできれば良いと考えた訳です。それで色々ググっていた所、楽天APIという存在に出くわします。

私はプログラマーではないので難しくて訳が分からなかったのですが、とても親切な方がいて、楽天APIが動くサンプルコードを記事にしてくれていました。その通りにやってみた結果、楽天モーションウィジェットと同じような事がWordpressで出来てしまいました。しかもPageSpeed Insightsの点数は下がりませんでした。ありがとう、なんて優しいんだ。

WordPressに楽天APIを設置し、楽天モーションウィジェット化&高速化する方法

WordPressに楽天APIを設置する方法が記されていたブログ記事。⇒楽天APIで簡単アフィリエイト by Plus WordPress

上記のブログ記事を読んで頂ければ、Wordpressに楽天APIを設置できますが、私が躓いた所をご紹介しておきます。

先ず、ダウンロードした『Rakuten Web Service SDK for PHP』のフォルダ名を『rws-php-sdk-1.1.0』から『sdk』に変えます。これは絶対に忘れてはいけません。忘れるとエラーが出て動きません。

それから、sdkフォルダをアップロードする場所は、Wordpressで自分が使っているテーマ(テンプレ)を置いているフォルダ(自分の場合は『keni(賢威)』)です。

(※テキストにはコピープロテクトがかかっているので、以下コードをコピーする時はソースコード枠右上の『新しいウィンドウでコードを開く』をクリックしてコピーして下さい。)

新しいウィンドウでコードを開く

sdkフォルダをアップロードしたら、自分が楽天広告を表示したい場所に以下のソースコードを埋め込みます。自分の場合は『single.php』の好きな場所に埋め込みました(『PHP Code Widget』を使ってウィジェットに埋め込みたい場合は、以下のソースの『sdk/autoload.php』の部分を絶対パスにして下さいね。そうしないとエラーが出て動きません。私はこんなので数時間も悩みました。)。

※『デベロッパーID』や『アフィリエイトID』、『ジャンル番号』や『取得する商品数』等を書き換える事も忘れないで下さいね。


 

これで取りあえず、任意の場所に楽天APIから取って来た楽天広告を表示させる事が成功しました。

しかし、次なる難関が私を待ち受けていたのです。以下のような警告が表示されてしまったのです。

諦めようかと心が折れかかりました。

しかし、ググりまくりました。

その結果分かった事は、どうやら多くのレンタルサーバーではphpがセーフモードになっていて、curl_setoptという関数のオプション『CURLOPT_FOLLOWLOCATION』が使えないのが原因みたいです。

どうすれば良いのかという事で更にググりまくりました。

すると、某レンタルサーバーの質問&アンサーに『この警告は別に気にしなくても大丈夫』という事で、気になるなら、このオプションをオフにすれば良いとの事。なので、このオプションをオフにして対応する事にしました。

WordPressを設置したフォルダから『wp-content/themes/テンプレの名前/sdk/lib/RakutenRws/HttpClient』まで進み、『HttpClient』フォルダ内の『CurlHttpClient.php』を自分のPCにダウンロードしてエディターで開きます。

『CurlHttpClient.php』の38行目に『curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);』とありますので最後の『true』を『false』に書き換え、アップロードします。

警告が表示されたページを更新すると、警告が消えました。やったー!

【Ads by 忍者AdMax】

 

後は、以下のCSSを自分が使っているCSSファイルに書き足しました。(私の場合、賢威の『advanced.css』の最後に書き足しました。)

 

PCからの表示は何の問題もなく、広告がキレイにデザインされて表示されるようになりましたが、スマホからの表示には問題発見。横スクロールしてしまうようになったのと、他要素の回り込み問題が生じてしまったのです。

『PageSpeed Insights』で調べた所、スマホの表示域の幅が320pxの所、326pxになっているとのご指摘。

CSSのどの部分が引っ掛かっているのか、ひとつひとつ調べた所、以下の部分を外す事で横スクロールしなくなりました。

 

後は、他要素の回り込み問題ですが、single.phpに張り付けたソースコードの最後に以下のコードを書き込んだら回り込みしなくなり、無事解決しました。

 

以上、楽天モーションウィジェットが重いけど貼りたいという方は是非、チャレンジしてみて下さい。(ちなみに、楽天トラベルは同じ要領で出来ないみたいです。sdkが対応していないみたい。)

By

※いいねと感じたら『いいね』や『ツイート』、また『コメント』等も頂けると嬉しいです。

 

コメントを残す

※掲載基準 批評:○ 根拠のない誹謗中傷:×

【Ads by 忍者AdMax】


【楽天市場デイリー総合ランキングトップ商品】
5979円(送料込)
\ポイント最大7倍!/当店人気No.1【化粧箱包装】[かにしゃぶ/カニしゃぶ/むき身/かに鍋/鍋/福袋/ますよね/御歳暮/ABSB2016]2015/12/30総合1位!
レビュー平均:4.4
レビュー件数:35880
越前かに問屋「ますよね」
555円(送料込)
2016日本雑穀アワード最高金賞!日本のスーパーフード雑穀\大麦&もち麦も配合/
レビュー平均:4.44
レビュー件数:59946
ショップオブザイヤー受賞
自然の都【タマチャンショップ】
1512円(送料込)
≪天然植物成分90%以上で優しいボタニカルシャンプー&トリートメント≫
レビュー平均:4.31
レビュー件数:28122
ショップオブザイヤー受賞
SALONIAオフィシャルサイト

サブコンテンツ

スポンサーリンク

スポンサーリンク

Ads by Criteo(or AdStir)

このブログのQRコード

このページの先頭へ