24. 4月 2009

wordpressでgoogle adsenseをモバイルに仕込む注意点

ケータイのgoogleアドセンスを仕込んでみたのだけど、サーバーによっては動作しないことがあるようです。

その場合は、アドセンスタグの中の以下のコード

google_set_screen_res();
google_set_dcmguid();

を削除すれば動作します。実際自分もこれを削除したら動作しました。

関連リンク:
WordPressでモバイルアドセンスするには | Adsense Mania|アドセンスマニア

wordpressでうごくひと2を設置する方法

無料の携帯アクセス解析「うごくひと2」: 商用利用可
http://ugo2.jp/

021

無料で使える高機能な携帯アクセス解析サービスができたようです。早速自分のブログにも導入してみました。

なんか、ケータイ対応はしてるものの、ケータイでどれだけ見られているのか今まで取ってなかったのですが、うごくひと2を設置して、結構閲覧されていたので驚いた。

まずうごくひと2で何ができるかというと

■アクセスの多い端末を写真つきで表示
05

■どの検索キーワード来た人が2ページ以上閲覧されてるとか
04

■ユーザー属性
08

■足あと(mixiのようなUIで親しんでる人にはわかりやすい)
06

とこれだけでも驚き。見た目的にもかなり作りこんである。

ページに仕込むアクセス解析タグは、html(imgタグ)のほかに、php、ruby、perlの言語が用意されている。

で、これをwordpressに仕込むにはどうすればいいか紹介しますね。

雨のち晴れではケータイでの閲覧に対応させるためKtai Styleというプラグインを利用していますが、このthemeディレクトリにテンプレートがあるので、そこのfooter.phpに埋め込む感じです。

07

以下ようにbody閉じタグ直前に埋め込んでいるのですが、ページのタイトルをURLエンコードする事によってページのタイトルも送れる様にプチ改造が必要。

<?php
$UH2url  = "http://b16.ugo2.jp/?u=******&h=*****&ut=1&guid=ON&qM=";
$UH2url .= urlencode($_SERVER[HTTP_REFERER])."|Az|".(int)($_SERVER[SERVER_PORT]);
$UH2url .= "|".urlencode($_SERVER[HTTP_HOST])."|".urlencode($_SERVER[REQUEST_URI]);
$UH2url .= "|H|&ch=UTF-8&sb=".urlencode("[page_title]");
echo '<a href="http://ugo2.jp/m/">';
echo '<img src="'.$UH2url.'" alt="携帯アクセス解析" width="72" height="16" alt="" border="0" />';
echo '</a>';
?>
</body></html>

で、wordpressの個別ページでタイトルを呼び出すタグはthe_title();なのだけど、これだとhtml出力のechoも含まれてしまうので、変数値として使いたい場合は、第三引数にfalseを入れてやります。

the_title(”",”",false);

実際のタグは以下のような感じ

<?php
$aaa=the_title('', '', false);
$UH2url  = "http://b16.ugo2.jp/?u=******&h=*****&ut=1&guid=ON&qM=";
$UH2url .= urlencode($_SERVER[HTTP_REFERER])."|Az|".(int)($_SERVER[SERVER_PORT]);
$UH2url .= "|".urlencode($_SERVER[HTTP_HOST])."|".urlencode($_SERVER[REQUEST_URI]);
$UH2url .= "|H|&ch=UTF-8&sb=".urlencode("$aaa");
echo '<a href="http://ugo2.jp/m/">';
echo '<img src="'.$UH2url.'" alt="携帯アクセス解析" width="72" height="16" alt="" border="0" />';
echo '</a>';
?>
</body></html>

ね、簡単でしょう?

15. 12月 2008

WordPressカスタマイズ

最近wordpressにてサイトを構築中なのだが、改めて使ってみると結構便利でホームページの管理システム(CMS)としての機能が十分備わっているツールだと再確認。

最近のweb構築に関して言うと、運営や管理が楽に出来ないと、それだけに時間を費やしてしまいがち。肝心の中身をどんどん更新していかないといけないのに、あるページを追加しようとするとデザインを考えたり、リンク先を考えたり、アクセス解析を仕込んだりと結構大変。仕事でサイト管理を外注してたりすると、お金まで取られる始末。しかもメールやりとりでの確認作業とかどうしてもスピードが犠牲になる。じゃあ更新の楽なブログを使えって話ですが、ブログっぽい見せ方は個性が出せず、なんかイヤだ。

そういう時はカスタマイズという手があります。要は、ブログのようなレイアウトじゃなくて、普通のホームページのような感じに見せることが出来ます。けど、更新はブログの管理画面で。つまりブログを更新する感覚でそのサイトを更新できる感じです。

例えばこんなサイトとかが例です。
FREEPAPER [f-dex:エフデックス]

フリーペーパーのサイトですが、全てwordpressにて構築されています。ブログ・・・じゃないですよね。ここまでいくと。

こういうサイトを構築するためにはwordpressのテンプレートのカスタマイズが必要です。wordpressのテンプレートとはすなわちtheme(テーマ)の事です。

と言う事で、現在自分も構築していると言う事でメモ代わりにこれから書いていくことにします。

WordPressのテーマの仕組み

wordpressのテーマは管理画面でワンクリックで変更、再構築もいらないという優れものですが、まずその中身はこんな感じでできています。

第一階層のphpファイルがテンプレートファイルです。第二階層でいくつか順番に並んでいるのは、もし第一階層のファイルがない場合、第二階層のテンプレートファイルが上から優先順位順で適用されると言う意味です。index.phpというのが最終的には適用されるので、災厄index.phpとスタイルシートさえあればwordpressのテーマを作る事ができます。

ページテンプレート

wp-content/themes/hogehoge
├ home.php  [トップページのみ]
│ └ index.php  [共通テンプレート]
│
├ single.php  [シングルページ URL:/?p=記事のID]
│ └ index.php  [共通テンプレート]
│
├ page.php  [ページテンプレート URL:/?page=記事のID]
│ └ index.php  [共通テンプレート]
│
├ category-num.php  [カテゴリページ(numはカテゴリID) URL:/?cat=カテゴリのID]
│ ├category.php [共通カテゴリページ]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ date.php  [カテゴリページ(numはカテゴリID) URL:/?m=200812]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ tag-slug.php  [タグテンプレート(slugはタグスラッグ) URL:/?tag=タグスラッグ]
│ ├tag.php [共通タグページ]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ author.php  [ユーザーテンプレート URL:/?author=ユーザーID]
│ ├archive.php [アーカイブページ]
│ └ index.php  [共通テンプレート]
│
├ search.php  [検索結果テンプレート URL:/?s=検索キーワード]
│ └ index.php  [共通テンプレート]
│
├ taxonomy.php  [タクソノミーテンプレート URL:/?taxonomy=タクソノミースラッグ&タームスラッグ]
│ └ index.php  [共通テンプレート]
│
├ 404.php  [404テンプレート]
│ └ index.php  [共通テンプレート]
│
├ images/ 【名称は自由、画像はここでなくても良い】
│
├ screenshot.png 【テーマのサムネイル画像。管理画面で表示される。w300 h225が適当】
│
└ style.css  [スタイルシート]

これらページテンプレート全てに共通で使う部分などがあります。例えばヘッダー・フッターなどです。そういうのはパーツテンプレートとして呼び出すことが可能です。またfunction.phpには様々な関数を記述しておき、それらを使いたいときに呼び出すことの出来るテンプレートです。あらかじめテーマで用意されているパーツテンプレートは以下の通り。

パーツテンプレート

wp-content/themes/hogehoge
├ header.php  [<?php get_header();?>で呼び出す]
│
├ footer.php  [<?php get_footer();?>で呼び出す]
│
├ sidebar.php  [<?php get_sidebar();?>で呼び出す]
│
├ comments.php  [<?php comments_template();?>で呼び出す]
│
├ function.php  [特に記述しなくても読み込まれているので適宜関数名指定で呼び出す]
│
└ ***.php  [<?php include(TEMPLATEPATH.'/***.php');?>で呼び出す]

このような仕組みでテーマが仕上がっています。function.phpでは管理画面上でサイドバー要素を自由に入れ替えたり順序を変えたりしたりすることの出来るダイナミックサイドバーを使用するためにregister_sidebar();という関数を記述したりします。詳しくは後ほど。

スタイルシート

スタイルシートでは文頭に以下のようなのをコメントアウトで表記すると、テーマとして認識されます。

/*
Theme Name: テーマ名
Theme URI: 配布先URL
Description: ディスクリプション
Version: バージョン
Author: 著作者名
Author URI: 著作者のHPのURL
*/

そしてscreenshot.pngという画像ファイルを入れると、テーマのサムネイル画像として管理画面で表示されます。横幅300px 縦幅225pxが適当です。

l1

基本、構造はこんなところです。じゃあ、次は実際にindex.phpを作成してページの基本となるデザインを決めて、header.php、footer.phpなどを切り分けて表示できるようにカスタマイズしてみます。

今日はここまで!