カテゴリー別アーカイブ: ワードプレス

高速化
2018年11月13日

ウェブサイト高速表示のための画像の軽量化・最適化

ウェブサイト運営にあたってスピードを気にするようになったのは、それがGoogleのSEOにつながるからという理由があります。あまりに遅いサイトはGoogle上位には行かない。そのような状況を打開するためにウェブサイトのスピードをどのように解決するか。その代表的な方法がPageSpeed Insights でspeedチェックをするということです。

ウェブサイトは開いても、その開くまでの時間が問題です。2000年前後ならともかく、今の時代ウェブサイトが開くまで数秒かかるだけでもユーザーは遅いと感じ、3秒以上かかると見ずに閉じるユーザーが現れ始めるといわれています。

できるだけ早くウェブサイトを開く、そのために、ここではまず画像の最適化についてお伝えします。

画像を最適化する理由

画像を最適化する理由は、そのデータ量をできるだけ軽くすることにあります。

ブロードバンドの時代が来てかなり立ちますが、現在は画像一枚の重さぐらいどうってことはありません。しかしその枚数が何十枚もあるとさすがに重くなり、ウェブサイトが開くのが遅くなってしまいます。

画像を軽くする

a 画像枚数が少ない場合

画像枚数がそこまで多くない場合、ウェブサービスで画像を軽くすることができます。いまではすっかり有名な「Tiny png」です。

tiny

https://tinypng.com/

Tiny pngは一度に20枚、重さ5Mbまでのファイルを圧縮することができます。

簡単なウェブサイトであれば、そこまでの枚数もないので気軽に圧縮できますね。

 

b 画像枚数が極度に多い、または5Mbを超えている場合

ウェブサイトによっては、画像が1万枚をこえるとか、やけに大きな画像がある場合があるでしょう。おおきな画像は「Tiny png」で圧縮することができなかったり、何百回も利用しなければいけなかったり。

そこで利用したいのがフリーソフト「voralent antelope」。
パソコンの仕様に応じてけっこうな枚数を一度の操作で圧縮できます。800枚前後はいけるでしょうか。

vore

https://www.vector.co.jp/magazine/softnews/140902/n1409021.html

c サーバー側で解決を図る

すでにサーバー上にある、数えられないほどの画像がある場合。もしかしたらserver会社の設定で何とかなるかもしれません。

たとえばエックスサーバーの場合、「mod_pagespeed」という設定があります。これを利用することで早くなる場合があります。

 

1分、一秒でも早くウェブサイトを表示させるために頑張っていきましょう。

feed
2017年4月26日

rssとかをサイトに表示させたら最新が出なくて無理やり直した

外部ブログのrssだとかfeedだとかをホームページに表示させたら、
最新が表示されてなくて無理やり直した話です。



おつかれさま。こんにちは。皆様お元気でしょうか。
「プレミアムフライデー」、覚えてますか?
なんでしたっけ。



さて、ここ数日、いくつかのホームページに表示させている外部ブログサービスのfeedやrssが最新にならず、 解決法を探したけど無かったので号泣しながら無理やり解決した状況を記しておきます。



ozyama

状況

その1.ワードプレスを利用している。

その2.いくつかは、RSSを呼び出すのに便利で手間のかからないワードプレスのプラグイン
   「RSS Antenna」 を利用している。

その3.いくつかは、手書きのPHPで直接読み込んでいる。



症状

その1.FC2のRSSをホームページに表示させたけど、内容が3日前の記事。
   (最新記事は別にあり)

その2.アメーバブログからホームページにRSSを表示させたけど内容が30日前の記事。
   (最新記事は別にあり)

その3.ライブドアブログからホームページにRSSを表示させたけど内容が3か月前の記事。
   (最新記事は別にあり)



原因の追究

それぞれのブログはそれなりに更新されているが、前の情報が表示される。 それぞれのRSSやFEEDをチェックしたら、ちゃんと最新。
・・・原因はキャッシュが残っているから?



super_reload

解決への道

新しい情報が表示されない症状が出ているときに試してみた。

スーパーリロード(Ctrl+F5)を連打。>無駄。 rssの画面でスーパーリロード(Ctrl+F5)を連打。>無駄。

>>解決したとしても、閲覧されるユーザーにしてもらわないといけないので無意味。

>>プラグイン上、またはPHP上で解決を図る必要がある。



そこで、ふと思い立って「RSS Antenna」の設定を変えてみた。

RSSフィードのところに書かれている~~index.rdfの後ろに、アレを足します。

管理画面

これで、HP上を確認してみると、なるほど。最新のRSSに更新されました。

「よし、書いた後にクライアントにこの?の後ろの数字を変えてもら」うなんて、
とんでもないので、自動化します。





「RSS Antenna」を無理やり改造。



いろいろ考えた結果、「RSS Antenna」に無理やり1行足すことにしました。

以下、自己責任ゾーン。

プラグイン名 RSS Antenna version2.1.0

rss-antenna.php 233行目付近。

private function createItems(){ $feed_count = $this-->setting['feed_count']; 
$feed_urls = $this->getFeedArray($this->setting['feeds']);

private function createItems(){ $feed_count = $this-->setting['feed_count']; 
$feed_urls = $this-->getFeedArray($this->setting['feeds']); //キャッシュ対策で日付を追加してみる 
$feed_urls[0] .="?".date("ymdH");

date(“ymdH”);は日付と時間が挿入されるので、これで1時間おきにRSSを読み込みなおすはず。

ちなみに「RSS Antenna」内にもキャッシュをクリアする一文があるような雰囲気だったんですが、なぜ効かなかったんだろう。不思議ですね。

rss-antenna.php 222行目付近。すでに30分おきになってました。

const CATCH_TIME = 3600;//3600秒 = 1時間
const CATCH_TIME = 1800;//1800秒 = 30分




PHPでRSSを取得するところに1行追加。



PHPでRSSを取得する方法については、どこからか拝借して利用したのですが、忘れてしまいましたので、 RSSのURLを指定するところの一文を加えましたよってところだけ紹介しておきます。

$rssurl = '取得するブログのURL.blog.fc2.com/?xml';
$rssurl = '取得するブログのURL.blog.fc2.com/?xml'; 
$rssurl .= '&'.date("ymdH");

これでOK。最新情報が表示されるようになりました。



ozyama2

さてこれで、晴れて最新の情報が表示されるように改良したわけです。 キャッシュの問題は根強いですね。

-9
2016年2月20日

Welcartを使ってLPにカートボタンを設置しよう!

 

 

こんにちは!

WEBデザイナーのWATANABEです!

最近のお仕事で、ワードプレスでランディングページを作成し、「購入する」ボタンを設置、

クリックするとカートに商品が入って注文ができるようにしたいとの依頼をいただきました。

 

そんな時に便利なワードプレスのプラグイン!

ブログ記事や固定ページにさくっとカートボタンを設置できる、

「Welcart(ウェルカート)」を使ってみました!

 

 

 

Welcartって何?

 

 

Welcart(ウェルカート)とは、Wordpressで簡単にネットショップを始められる便利なプラグインです。

 

名-7

 

無料のECサイトテンプレートも充実していて、そのまま使うだけで、

カッコいい通販サイトが速攻で出来ちゃいます!

 

導入方法も超かんたん。

 

プラグインから「Welcart」で検索し、インストールするとダッシュボードに下図のような

ECサイト系のメニューが表示されるようになります。

 

名称未-7

あとは、メニューに従って商品登録や配送の設定、決済方法などをどんどん設定していくだけ!楽天やyahoo!などを使わなくても、Wordpressで簡単に通販サイトを立ち上げることができます!スバラシー!

 

 

 

 

 

固定ページへカートボタンを設置するときは、ショートコードを使おう!

 

 

ECサイトを作る場合は、Welcartで配布されているテンプレートを使うと早いのですが、

今回はランディングページとなる固定ページに、カートボタンを設置します。

 

 

まずは、ダッシュボードの「新商品追加」から商品を登録~。

 

 

次に、ランディングページのhtmlを書き込んだ固定ペ―ジにカートボタンを設置したいわけですが、

welcartの公式で公表されている「カート投入ボタン」のテンプレートタグ、

 

 

usces_the_itemSkuButton($value)

 

 

これをそのまま固定ページ内に書き込んでも、カートボタンはちゃんと作動しません!

このタグは、登録した商品ページ(投稿ページ)に記述されることで、商品と関連付けされてるので

固定ページに書き込んでも、どの商品をカートに入れるのか判明できないのです!

 

なので、固定ページにカートボタンを設置するときは、こっちのショートコードを書きましょう!

 

 

[button_to_cart item="item_code" sku="sku_code" value="text"]

 

item_code : 商品コード
sku_code : SKUコード
value : ボタンに表示するテキスト( 購入する、カートに入れる 等)

 

 

商品コードとSKUコードは、商品登録の際に自分で設定するやつです!

 

 

これで無事、固定ページにカートボタンが表示され、カートに商品を入れる事ができます!

あとはCSSで自分の好きなデザインにボタンを装飾しましょう~!

 

 

 

 

ウェルカートを使えば、ECサイトを持たないお客様でも、Wordpressでランディングページを作成し、

WEB上で商品販売から申込決済システムまで簡単に導入することができますね!

 

気になった方はお気軽にお問い合せ下さい(*´∀`)

 

 

blog2
2016年2月5日

とあるギャラリープラグインの修復記録 「Gallery by BestWebSoft」

数年前に作ったwordpress仕様のウェブサイトで、プラグインの調子が悪かったのでその解決を図りました。
そのプラグインの名は「Gallery by BestWebSoft」。

当時、クライアントの要望を聞いて、いろいろ探した結果見つかったギャラリー系のプラグインです。
使い方はそこまで難しくなく、アップロードした画像や、その場でアップロードした画像にtitleとAltとリンクを設定できるといった非常にシンプルなもの。
その表示法もシンプルです。


あれから2年、wordpressとプラグインがともにバージョンアップし、どうやらその過程でいくつかの問題が発生したようでした。
そのバグらしきものは、「画像の削除ができない。」
一見、管理画面では削除したように見えるのですが、どうも編集後のページからは削除されていない。
いったい何が起きたのか。

早速調査です。

https://wordpress.org/support/topic/error-when-trying-to-delete-images

02



|д゚)…
|д゚)読めん!



困ったときのgoogle翻訳。


01

こうして、


https://translate.google.co.jp/translate?sl=en&tl=ja&js=y&prev=_t&hl=ja&ie=UTF-8&u=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ferror-when-trying-to-delete-images&edit-text=&act=url

03
よっしゃよっしゃ。


「イメージを削除しようとしたとき、私はエラーを取得しています。 私は、ギャラリーを作成した画像をアップロードし、ギャラリーを公開しました。 私は、画像を削除し、「更新」ボタンをクリックすると、私は次のエラーメッセージが表示されました」


「こんにちは、我々は、この問題を修正しました。 最新バージョンへのプラグインを更新してください。敬具、 支援チーム」


つまり、最新バージョンでは解決していると。
では、さっそく最新バージョンを入れます。


できました!

04


|д゚)…まっしろです。


おかしい。そういえば、ウチのコーダーが「できなかった」っていってたな。
そう、そんな問題がでたから私のところにこの話が来たのでした。


えーっと。
https://wordpress.org/support/topic/plugin-gallery-doesnt-work
https://translate.google.co.jp/translate?hl=ja&sl=en&tl=ja&u=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fplugin-gallery-doesnt-work
05
「私はこれをインストールしていると私は、ギャラリーページを作成し、それを表示すると、それは非常に奇妙な…のホームページと混合ギャラリーを示しています。
申し訳ありませんが、これは私のために動作しません。」


「最後のプラグインのバージョンでは、別の1にprettyphotoライブラリを変更することが駆り立てました。 フォルダをプラグインからファイルをテーマにギャラリーテンプレートファイルを交換してください。 これらのファイルは、「ギャラリー単template.php ‘と’ギャラリー-template.php」であり、それらは「ギャラリー・プラグイン/テンプレート」フォルダに配置されています。よろしく、オクサナ」


つまり、ダウンロードしたプラグインの中にテンプレートが入ってるよ。これ使ってね、ってことでした。


さっそくご指定のフォルダ、「gallery-plugin/template」の中を見てみると、ほうほう。
「gallery-single-template.php」と「gallery-template.php」が入っている。

この二つのファイルをテーマに入れ、ソースを調整。

06

無事表示されました。

そして、当初の問題であった削除しても消えない問題も解決しました。
めでたしめでたし。


ところでこの「Gallery by BestWebSoft」。有料版でまた便利な機能もあるようですが、今回は無料版で十分。
管理画面も英語のままですが、直感でわかる上にクライアントも使い慣れているようで、特に問題ありません。

07

ほいほいっと画像をアップして、小さめに表示する分にはなんの問題もありません。
いろんな画像をそろえて並べたい!ってときに便利ですよ。

blog.fw
2015年12月18日

WordPressに画像サイズを追加したうえで、 アップロードした画像もリサイズしたいのだが。

ワードプレスのメディア画像は設定からサイズが変更できるようになっているのですが、クライアントの案件がほとんどできている状態から画像サイズを追加しなきゃいけない事態が最近ありました。

すでに必要な画像は600枚近くアップロード済。この状況でこの修正はきつい。すでにメディアの設定で必要なサイズは変更済み。サムネイルも中サイズも大サイズも変更できない。さてどうしたものでしょう。

1.新しいメディアサイズを追加する。


mediasize

さて、WordPressではまず、アップロードするメディアサイズを変更することができます。上の画像はワードプレスの「設定」>「メディア」で観ることができるメディア設定。
通常WordPressでは切り抜きができる「サムネイル」、画像の縦横比はそのままに縮小した「中サイズ」「小サイズ」、そしてそのままの大きさ「フルサイズ」があります。
通常ならこのままでよさげですが、案件によってはこれでは足らない事態に。

そこで、新しいサイズを作るため、ワードプレステーマに入っているfunction.phpに書き足します。
1行。

add_image_size( ‘thumbnail2′, 400, 250, true );


これを足して、新たに画像をアップロードすれば、「thumbnail2」という名前の横400px、縦250pxの画像ができああります。最後のtrueは切り抜きをするかどうか。trueを入れれば切り抜き。しないときは何も書かなければOK。


2.アップロードしなおさずに、新しい画像サイズのファイルをワードプレスで作る。


さて、これで新しい画像が生成される準備は終わりました。
次はすでにアップロードされている画像の処理。アップロードしなおすとかなりの時間がかかります。めんどくさい。ここはボタン一個で勝手に生成してくれるなにかがないか、を探したいところ。

困った時のプラグイン。これです。

Regenerate Thumbnails


Regenerate Thumbnails


このプラグインはサムネイルを作り直すプラグイン。
ワードプレスの「プラグイン」>新規追加から「Regenerate Thumbnails」で検索しましょう。
その後「ツール」>「Regen. Thumbnails」から「すべてのサムネイルを再生成する」ボタンをおすだけ。

reg

 

これでめでたく新しいサイズの画像がすべて生成されました。なんとかなりましたね。