【WordPress】Ktai Styleで画像が表示されない時

Google Analyticsが携帯サイトにも対応し始めたので、携帯のアクセス解析もじっくりとGAで観察出来るようになった。
WordPressの携帯用変換プラグインKtaiSyleへのトラッキングコード導入方法は、前回の記事「
【WordPress】Ktai styleにGoogle Analyticsのトラッキングコードを埋め込む方法」を参照。

アクセス解析を真剣に始めて、いろいろと分かったことがあるが、携帯サイトも真剣に作らんといかんなぁと思い、今回ちょっとしたリニューアルを行った。

色々とKtaiStyleのテーマを再構築していて気づいたけど。。。
KtaiStyleって記事中の画像をサムネイル化してちゃんと携帯でも表示してくれるのね。。。
知らなかった。。。僕の今までの環境だったら、画像へのテキストリンクしかなかった。。。
ほったらかしって良くないですね。。。
ちゃんと最初でしっかりと構築すべきだった。
でも、なんでサムネイル画像が表示されないんだろう??と色々調べ、知人にもヘルプを頂いたので、備忘録としてメモ。

躓いた時はやはり原点に立ち返るのが一番早い。
Ktai Styleのサイトの「よくある質問と答え」にまさに答えがあった。

3G 端末で見ても画像がインライン表示されない
3G 端末, ウィルコム, スマートフォン等で見たとき画像がインライン表示されない場合は以下の点を確認してください。

* ウェブログ配下の画像であるか (外部サイトの画像は従来通りリンクへの変換です)。
* 当該画像が入っているディレクトリーに、WordPress (ウェブサーバー) からの書き込み権限があるか。wp-content/uploads 配下のディレクトリーのパーミッションが 757 になっていないと縮小画像が作成できず、インライン表示もされません。
* 当該画像の img 要素で alt 属性が空になっていたり、width, height 属性の値が 1 になっていないか。この場合、適切な alt 文字列を補完してやったり、適切な width, height 値を与えてやれば画像が出ます。WordPress 2.5 のメディアアップロードは、デフォルトでは「キャプション」(== alt 属性用の文字列) が空白ですので、何も指定しない場合、alt=”” という img 要素を作ってしまいます。
* PHP に GD が組み込まれているか確認してください。GD がない場合は画像の縮小処理ができないため、すべてリンクになります。GD がないと、WordPress の利用自体が不便になるため、サーバー管理者に PHP の再インストールを要求してみてください。

どうしても原因不明の場合、shrinkage.php の21行目にあるコメント (KS_SHRINKAGE_DEBUG) を外してデバッグモードにしてください。この場合、サムネール作成時のエラーがブラウザーに表示されますので、その内容と shrinkage.php のソースコードを突き合わせて原因を調べてみてください。

僕の環境ではphpのGDライブラリがおかしかったみたい。
phpの再構築をしなおして、再トライしたら、画像表示された。

携帯サイトの構築も真剣にやらんとなぁ。

携帯サイト コーディング&デザイン

著者/訳者:高木 悠介

出版社:ソフトバンククリエイティブ( 2008-12-26 )

定価:¥ 2,709

Amazon価格:¥ 2,709

大型本 ( 260 ページ )

ISBN-10 : 4797348488

ISBN-13 : 9784797348484


【WordPress】Ktai styleにGoogle Analyticsのトラッキングコードを埋め込む方法

本家のGoogleでは、ちょっと前にGoogle Analyticsのモバイルサイトへの対応がアナウンスされていたけど、日本でも徐々に公開されているみたい。

Google Analyticsのモバイルサイト用トラッキングコード取得画面
Google Analyticsのモバイルサイト用トラッキングコード取得画面

早速、トラッキングコードをWordPressの携帯用コンバートプラグインKtai styleに埋め込んでみた。
トラッキングコード取得画面に以下のような各サイトでの告知フォームがあったので、貼り付けておく。
まだ完全に日本版に対応してないみたいで、日本語がちょこちょこおかしい。

ウェブサイトに Google Analytics を導入するための手順です。

下記のコードをコピーして、解析するすべてのページの</body> タグの直前に貼り付けてください。
Note: Do not use desktop tracking code on pages where you use mobile tracking.

<html>下記のコードをコピーして、解析するすべてのページの </body> タグの直前に貼り付けてください。
<?php
// Copyright 2009 Google Inc. All Rights Reserved.
$GA_ACCOUNT = “MO-○○○○○○○○”;
$GA_PIXEL = “ga.php”;

function googleAnalyticsGetImageUrl() {
global $GA_ACCOUNT, $GA_PIXEL;
$url = “”;
$url .= $GA_PIXEL . “?”;
$url .= “utmac=” . $GA_ACCOUNT;
$url .= “&utmn=” . rand(0, 0x7fffffff);
$referer = $_SERVER[“HTTP_REFERER”];
$query = $_SERVER[“QUERY_STRING”];
$path = $_SERVER[“REQUEST_URI”];
if (empty($referer)) {
$referer = “-“;
}
$url .= “&utmr=” . urlencode($referer);
if (!empty($path)) {
$url .= “&utmp=” . urlencode($path);
}
$url .= “&guid=ON”;
return $url;
}
?>

</body>下記のコードをコピーして、解析するすべてのページの </> タグの直前に貼り付けてください。
<?php
$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
?>
<img src=”<?= $googleAnalyticsImageUrl ?>” />

Copy this file to your root directory
https://ssl.gstatic.com/analytics/20091103/mobile/ga.php

ご協力に感謝いたします。

だけど、Googleの手順どおりトラッキングコードを埋めても、全然データを取得している様子がなかったので、ちょっと自分で手を加え修正を行った。
以下は備忘録としてメモ。

まず、最初に、Ktai-styleのthemeフォルダ内で、現在使用してるテーマのheader.phpの一番頭に以下のコードを貼り付け

<?php
  // Copyright 2009 Google Inc. All Rights Reserved.
  $GA_ACCOUNT = "MO-○○○○○○○○"; //各自のアカウントを入力して下さい。
  $GA_PIXEL = "ga.php";

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "";
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $referer = $_SERVER["HTTP_REFERER"];
    $query = $_SERVER["QUERY_STRING"];
    $path = $_SERVER["REQUEST_URI"];
    if (empty($referer)) {
      $referer = "-";
    }
    $url .= "&utmr=" . urlencode($referer);
    if (!empty($path)) {
      $url .= "&utmp=" . urlencode($path);
    }
    $url .= "&guid=ON";
    return $url;
  }
?>

しかし、僕の環境では7行目のglobal変数がきちんと定義されず、空文字を返したため、3,4行目を7,8行目の間に挿入。
そして、WordPressはURLを.htaccessで処理してパーマリンクを生成するので、絶対パスを指定するため、8行目をWordPressをインストールしたルートのURLに書きかえる。
僕の場合は、「$url = “http://daisuke-watanabe.com/”;」
さらに、色々と処理を追いかけたけど、どうしてもトラッキングしてなかったみたいなので、22、23行目の間に 「$url .= “&utmdebug=ON”;」を追記。
「$url .= “&utmdebug=ON”;」を追記しなくてもトラッキングするようになったので削除。
結果、以下のソースに書き換えたものをheader.phpの頭に貼り付ける。

<?php
  // Copyright 2009 Google Inc. All Rights Reserved.

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $GA_ACCOUNT = "MO-○○○○○○○○"; //各自のアカウントを入力して下さい。
    $GA_PIXEL = "ga.php";
    $url = "http://daisuke-watanabe.com/"; //WordPressをインストールしたルートのURL
    $url .= $GA_PIXEL . "?";
    $url .= "utmac=" . $GA_ACCOUNT;
    $url .= "&utmn=" . rand(0, 0x7fffffff);
    $referer = $_SERVER["HTTP_REFERER"];
    $query = $_SERVER["QUERY_STRING"];
    $path = $_SERVER["REQUEST_URI"];
    if (empty($referer)) {
      $referer = "-";
    }
    $url .= "&utmr=" . urlencode($referer);
    if (!empty($path)) {
      $url .= "&utmp=" . urlencode($path);
    }
    $url .= "&guid=ON";
    //$url .= "&utmdebug=ON"; //付けなくてもトラッキングされたのでコメントアウト
    return $url;
  }
?>

次に、footer.phpの</body>の直前に以下のソースを貼り付け。

<?php
  $googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
?>
<img src="<?= $googleAnalyticsImageUrl ?>" />

最後に、
https://ssl.gstatic.com/analytics/20091103/mobile/ga.php
から、「ga.php」という名前のファイルをダウンロードして、WordPressをインストールしたルートのフォルダにアップロードすれば完了。

携帯で表示確認して、もし、画面の一番下にリンク切れの画像が出たら、トラッキングコードの埋め込み失敗です。
もう一度、最初からよく見直して処理しなおしてください。
どこかが間違えてるはず。
ちょっと色々と苦戦したので、最終的にSSIでやっちゃおうかとも思ったけど、無事トラッキング開始されはじめました。

Google Analytics今やほんとに色々な設定が出来て便利になってきてる。
モバイルサイトの解析もどんどん進化していってもらいたいなぁ~。

↓↓↓2009/12/3に発売されるGoogleAnalyticsの解説本。ちょっと楽しみ。
[rakuten]book:13307081[/rakuten]

お宮参りの着物のことなら渡久

【WordPress】runPHPが動かないとき

WordPressでPHPを有効にするプラグイン「runPHP」がうまく機能しないと相談された。
対応策を備忘録のためメモ。

プラグインのインストール自体がうまくいっているのに、記事内のPHPがうまく動作してない場合は、テーマのheader.phpをもう一度見直して欲しい。
以下の関数がタグ内で抜けている可能性がある。

<?php
wp_head();
?>

runPHPのreadme.txtにも以下のような記述がある。

* With few badly written WordPress themes, the plugin does not work. This is caused by a missing `wp_head()` call in the theme’s header template (often called `header.php`).
If that is the case, fixing it is simply a matter of inserting `<?php wp_head(); ?>` at the right point in the php template.

困ったときは、慌てず焦らず、振り出しに戻ることも大切ですね。
勉強になりました。

【WordPress】Wp-MixiPublisherを使ってmixiにも日記をアップロード

僕もmixiのアカウントはもってはいるが、ブログを作ってからというもの、基本的に日記を書かなくなっている。
コミュニティを覗いたりして情報収集するためだけのツールとなっていた。
RSSで日記の表示をしたりもしたけど、このブログ自体が僕自身の仕事や技術の備忘録みたいなってるので。。。mixiに表示させるまでもないなぁと思ってた。(ほとんど意味わからんだろうしね。。。同業者じゃないと。。。)

そんな時、WordPress関連のプラグインをいろいろと調べてたら、ちょっと興味持ったプラグインを発見。

Wp-MixiPublisher

ブログの記事をmixiにもポスト(投稿)してくれるというもの。
しかも、ポストしないでもいい記事は、チェックを外して。という簡単で良さそうなもの。

早速ダウンロード、インストールしてみた。
しかし。。。なかなかうまく行かない。
また色々調べてみたら。。。

wp-mixipublisherRC2e.zipという最新のものに行き当たった。
これの中身を最初のプラグインの中身と入れ替えて。
インストール完了。

後は、設定画面でmixiのIDとPASSを入力すればOK。

mixi日記放置してたけど、これで無駄にならなくなるね。笑

僕のmixiアカウント
マイミク申請はお気軽に~。

【WordPress】Contact Form 7(問合せフォームプラグイン)をインストールした

お問合せフォームを作ろうと思っていたけど、ずるずると延び延びになっていた。
まぁお問合せフォームぐらいちょちょいと。。。と思ってたけど、なかなかやろうとしてもやらないもんで。。。
そんな時、かなり便利そうなプラグインを見つけた。
WordPressに簡単に問合せフォームを作成するプラグインContact Form 7
早速ダウンロードしてインストールしてみた。

contact-form-7 フォルダを /wp-content/plugins/ フォルダににそのままアップロード。
WordPress の ‘プラグイン’ メニューでcontact-form-7の「使用する」をクリック。
その横にある「設定」をクリックして、新規のコンタクトフォームを作成し保存する。(下の画像の①)
contactform7-1
[contact-…] の部分ををコピーして(上の画像の②)、コンタクトフォームを表示させたい投稿もしくはページに貼り付け、公開する。(下の画像)
contactform7-2

たったこれだけで、お問合せフォームが出来るなんて。。。
ほんと便利な世の中です。笑

早速、問合せフォームからメール下さい。。。

【WordPress】WP Super Cacheで文字化け

WP Super Cacheを導入し、Cacheされたものをブラウジングすると、文字化けするようになった。
文字化けというよりは、文字コードが本来UTF-8なのにShift-JISで表示されるようになってしまい、文字化けしたような現象が起こっていた。
原因が分からず、とりあえず、WP Super Cacheを不使用にしていたのだが、やはり重くなってきたので、
HALF ON Super Cache Disabled, only legacy WP-Cache caching.
にチェックを入れ、
Super Cacheではなく、WP-Cacheを使用することで試してみた。
とりあえずの文字化けはなくなったが。。。
原因不明です。。。
誰か分かる人教えて下さい。

【WordPress】Amazon の個別商品の情報を表示するプラグインwp-tmkm-amazonを導入

WordPressにAmazon の個別商品の情報を表示するため、wp-tmkm-amazonプラグインを入れてみた。
このプラグインは、和書・洋書ならISBN、それ以外の商品なら、ASINを引数に設定するだけで、その商品の情報をhtmlで整形して表示してくれるところだ。
ISBN・ASINについてはこちらを
いろいろと各自で拡張も出来そう。
amazon関係のWordPressプラグインはいろいろあるけど、これが一番シンプルで使いやすい。

【WordPress】関連記事を表示するSimilar Postsプラグインを導入

各記事に関連する記事を表示するためのプラグインSimilar Postsを導入してみた。
ちょっとはSEO的効果もあるかもしれない。
まず、このプラグインをインストールするためにPost Plugin Libraryをインストール、有効化。
そしてSimilar Postsをインストール、有効化。
このプラグインのいいところは、表示する投稿の数を設定したり、カテゴリをこえて関連する投稿を表示するかなどいろいろな設定が出来る。
ほんとWordPressは便利だし、優秀なプラグインが揃ってる。

【MySQL】WordPress高速化の方法(クエリをキャッシュ化)

このブログは自宅サーバーから配信しているが、MySQLのクエリをキャッシュ化してWordPress自体を高速化する方法を試してみた。
MySQLのmy.iniの[mysqld]のところに以下を記述

query_cache_limit=1M
query_cache_min_res_unit=4k
query_cache_size=24M
query_cache_type=1

これでかなり高速化した!!
かなり快適な環境♪

【WordPress】WP Super CacheをKtai-styleと併用するときの導入方法

WordPressはページを表示するたびにデータベースサーバーにアクセスし、リアルタイムにページを生成している。
そのため、サーバーへの負荷は大きなものとなる。
投稿数やアクセスが増加してきた時に、画面表示に時間がかかるようになってきた。
そこで、WP Super Cacheを導入してみた。
これは一度表示したページをキャッシュに保存し、再度同じページを表示するときにキャッシュを利用するため、サーバーへの負荷を減らせると同時に表示速度の高速化にもつながる。
しかし、なかなかうまく導入出来ずにはまってしまったので記述しておく。
さらに、Ktai-Styleとの併用はいろいろな問題を引き起こすらしく、導入に一手間加えないといけない。

まず、WP Super Cacheをサイトからダウンロード。
ダウンロードしたファイルを解凍し、いつものようにpluginsフォルダにアップロード。
wp-cache-config-sample.php を複製して wp-cache-config.php を作り、48 行目行目あたりの

$cache_rejected_user_agent
 = array ( 0 => 'bot', 1 => 'ia_archive', 2 => 'slurp', 3 => 'crawl', 4 => 'spider');

という記述の下に以下のコードを記述。(Ktai-styleを使用してない人は記述不要)

if (file_exists(ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php')) {
        include ABSPATH. 'wp-content/plugins/ktai_style/patch-wpcache.php';
}

wp-cache-config.php を wp-content/ 直下に置き、Wordpressのプラグイン設定画面からWP Super Cacheを有効にする。
そして、WP Super Cacheの設定画面で、

ON WP Cache and Super Cache enabled

を選択して更新。

さらにMod Rewrite Rulesのところも更新をおこない.htaccess の書き換えを行う。
ここで、生成された.htaccessをテキストエディタで開く。
下記のコメントで括られた部分が、WP Super Cacheによって書き加えられた部分。

# BEGIN WPSuperCache

# END WPSuperCache

この間にRewriteRuleが2箇所ある。
その直前にそれぞれ2箇所に下記のコードを書き加える。(Ktai-styleを使用してない人は記述不要)

RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo/|J-PHONE/|J-EMULATOR/|Vodafone/|MOT(EMULATOR)?-|SoftBank/|[VS]emulator/|KDDI-|UP\.Browser|emobile/|Huawei/|Nokia|mixi-mobile-converter/)
RewriteCond %{HTTP_USER_AGENT} !(DDIPOCKET;|WILLCOM;|Opera\ Mini|Opera\ Mobi|PalmOS|Windows\ CE;|PDA;\ SL-|PlayStation\ Portable;|SONY/COM|Nitro)

以上で設定は終了。
実際の動作を確認してみる。
ログアウト状態、かつ、クッキーを削除した状態の PC で閲覧して、リロードしたとき、XHTMLソースの末尾に


のような表記があればPCでの動作は成功。
次に携帯で同じページを参照。
携帯用の表示になっていれば成功。
もう一度PC画面をリロードして、PC用の画面が出力されるかを確認。
PC用の画面が出力されたら成功。

もし、表示がおかしかったりしたら、再度上から設定を見直して欲しい。
どこかが間違えているはず。