WordPress

WordPress PDA & iPhoneをコメント対応にカスタマイズする方法

WordPressをスマートフォンに対応させるプラグイン「Wordpress PDA & iPhone」はスマートフォンからの閲覧時にコメントの表示や書き込みができない。
本格的なスマートフォンでの運用を考えた場合、コメントも重要。
一般的な方法としては、テンプレートに

<?php comments_template(); ?>

<?php comments_template('comments.php'); ?>

を追加するのだが、
上記の場合、呼び出されるcomments.phpは同階層のcomments.phpではなく

/wp-includes/theme-compat/comments.php

が呼び出されてしまう。

comments.phpの中身をカスタマイズしないのであればそれでも構わないが、例えばコメントフォームにある「ウェブサイト」を消したい場合やスタイルに手を入れたい場合、このファイルを修正してしまうと、バージョンアップの度に修正しなくてはならなくなる。

同階層のcomments.phpを呼び出す場合は、

<?php comments_template('/comments.php'); ?>

とファイル名の前に「/」を入れる。

なお、
元に入っているcomments.phpの中身は

<?php if ( have_comments() ) : ?>
<?php endif; ?>

だけなので、

/wp-includes/theme-compat/comments.php
のファイルをコピーして修正して、置き換えればいい。

具体的な、コメントを呼び出すための修正は以下の通り

page.php

ファイルの場所は
/wp-content/plugins/wp-pda/jqmobile-theme/page.php

ファイルを開き

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
</div>
<?php endwhile; else: ?>

の箇所に追加して

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
<?php comments_template('/comments.php'); ?>
</div>
<?php endwhile; else: ?>

</div><!-- /content -->

となるようにする。

————————————————————————————

single.php

ファイルの場所は
/wp-content/plugins/wp-pda/jqmobile-theme/single.php

ファイルを開き

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>

の後ろに追加して

<div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
<?php comments_template('/comments.php'); ?>

となるようにする。

WordPressで記事抜粋のdescriptionと記事タグをkeywordsに自動挿入する方法

通常、ヘッダに入るmetaタグのdescriptionとkeywordsは全ページ共通のことが多いが、SEOに適したヘッダにするためには、各ページ毎に合わせたmetaタグでdescriptionとkeywordsを設定しておくのが好ましい。

WordPressのプラグイン、All in One SEO Packは各記事に対して個別のdescriptionとkeywordsを設定することができるが、WordPress PDA & iPhoneのような特殊なテンプレートでは反映されないケースが生じる。

そういった場合に対応し、descriptionには記事の抜粋、metaタグのkeywordsには記事で設定したタグが自動で入るようにする。

以下のコードを既存のメタタグ部分と差し替え、または挿入する。
なお、前半、descriptionの部分にある「160」は抜粋(カット)する文字数なので、160文字も必要ないという人は適宜変更してもらいたい。
また、キーワードに関してはgoogleは一切評価しないとも言われているが、SEO全体としてkeywordsもきちんと記載することが好ましいと考える。
下記のコードではタグに設定したものを半角カンマ区切りで書き出し、タグが未設定のものはデフォルトのキーワードを書き出す。

<meta name="description" content="<?php
$descrip = mb_substr(ereg_replace("(\r|\n|\r\n)","",strip_tags($post->post_content)),0,160)."...";
if(is_single()){echo $descrip;}else{bloginfo('description');}
?>" />
<meta name="keywords" content="<?php
$tags = get_the_tags();
if($tags){
$total = count($tags); $count = 1;
foreach($tags as $tag){
if($total == $count){echo $tag->name;}else{echo $tag->name . ', ';}
$count++;
}
}else{echo 'デフォルトのキーワード';}
?>" />

 

WordPressのスマホ用プラグインwp-pdaのカラーカスタマイズはこの方法

iPhone・Android等のスマートフォンに対応させるWordPress用のプラグインWordpress PDA & iPhone(wp-pda)はベースにJquery mobileを使用している。
そのためwp-pdaの配布ファイルでは、ウェブサイトを高速化するため、jquery、jquery mobileの各javascriptおよびスタイルシートcssはCDNで直接呼び出しており、CSSを使ったカスタマイズが分かりにくいという難点がある。
デフォルトでは黒いタイトルラインとブルー系のナビボタン、日付になっているが、これを変更したいと思うことは多いはず。
色の変更であれば、意外なほど簡単に配色をカスタマイズしてサイトのデザインを変えることが可能なので紹介。

修正するのは以下のファイル
wp-content/plugins/wp-pda/style.css

ファイルを開き、最後に以下のスタイルシートを追加する

.ui-btn-active,
.ui-bar-b,
.ui-bar-c {
background: #fff;
color: #fff;
font-weight: bold;
border: 1px solid #bf0059;
text-shadow: 0 -1px 1px #bf0059;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffbbca), to( #ff90a7));
background-image: -webkit-linear-gradient(#ffbbca, #ff90a7);
background-image: -moz-linear-gradient(#ffbbca, #ff90a7);
background-image: -ms-linear-gradient(#ffbbca, #ff90a7);
background-image: -o-linear-gradient(#ffbbca, #ff90a7);
background-image: linear-gradient(#ffbbca, #ff90a7);
}

各項目の解説

background:
ヘッダ、タイトル、ナビ選択状態の背景色

color:
ヘッダ、タイトル、ナビ選択状態の文字色

border:
回りのラインの色(同系色の濃いめにすると良い)

text-shadow:
タイトル文字の影(同系色の濃いめにすると良い)

background-image:
複数あるが、多くのブラウザに対応させるためのもの(同じ色で指定していく)

WordPress PDA & iPhone不具合修正(サブカテゴリ対応版)

WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) を新しいjQuery Mobileで使用すると、カテゴリー表示にした場合にレイアウトに不具合が発生する。
前回のエントリ『Wordpress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法』では、カテゴリを呼び出す階層を制限することで表示不具合に対処したが、サブカテゴリに辿り着けないのは不便なため、別の修正方法をとることにした。

前回修正してしまっている場合も、

<?php if($detectedPage=='categories') :?>
〜
<?php endif; ?>

をそのまま入れ替えればいい。

修正するのは、前回と同じ以下のファイル
/plugins/wp-pda/jqmobile-theme/index.php

オリジナル

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r|\t|> </", "", $categoriesHTML);
$categoriesHTML = str_replace("a> (",'a><span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")<ul class='children'>","</span><ul class='children'>",$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span></li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

に変更する。

この修正を施すことにより、カテゴリリストをタップすると、サブカテゴリが存在する場合はサブカテゴリ一覧、無い場合は該当カテゴリのファイル一覧が表示される。

WordPress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法

WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) は便利だが、jquery mobileのバージョンをjQuery Mobile 1.1や、新しいjQuery Mobile 1.2にすると、カテゴリー表示にした場合にレイアウトに不具合が発生する。

症状としては、エラー等で表示されない訳ではなく、サブカテゴリまであるカテゴリの表示部分に余分なテキスト等が表示されてしまい、表示が崩れてしまう。
階層が浅いサイトならば問題なく使える場合もあるだろうが、現実的にはこの表示バグを修正した方が良いだろう。

修正するのは以下のファイル
plugins/wp-pda/jqmobile-theme/index.php

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0'); $categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0&depth=1');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML; ?>
</ul>
</div>
<?php endif; ?>

のように修正。具体的には

$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');

の部分に「&depth=1」を入れて階層取得を1階層に制限するだけの話。

この1行を修正するだけで、表示バグは直る。

WordPressのプラグインtweetableにハッシュタグを追加したい時

最近は高機能なWordPressのTwitterプラグインが増えているが、シンプルなtweetableが使い易い場合もある。

ただ、ハッシュタグを管理画面から設定することができないので、統一したハッシュタグを入れたい場合不便。

tweetableでハッシュタグを追加したい時は以下のように修正する。

wp-content/pluginsにあるtweetable.phpを開き、

$tweet = $twitter->fit_tweet($title, $permalink);
↓
$tweet = $twitter->fit_tweet($title, $permalink).' #ハッシュタグ';

WordPressの簡単に表が作れるEditor Extenderの使い方

WordPressで写真付きの日記をアップしたりレビューを書いたりしている時、複数の画像を自由にレイアウトしたり表を作りたいと思うことがある。

WordPressでは所謂HTMLのテーブル(Table)タグでのレイアウトは考えていないから、デフォルトのエディターのままでは、テーブルを作るのはかなり面倒。HTMLのタグが分かる人なら、ビジュアル編集モードからHTML編集モードに切り替え<table><tr><td>と書いていけばいいが、HTMLが分からない人にとっては難しく、また、サイズの変更やセルの結合など面倒な事が多い。

テーブル作成系のプラグインは数種類あるが、一番のお薦めは「Editor Extender」。
Editor Extenderはテーブル作成のプラグインという訳ではなく、多くの機能を追加してくれる。
Editor Extenderのインストールは簡単。ダウンロードしたEditor Extenderをpluginsフォルダに入れ、プラグインの有効化をするだけでいい。
なお、多種の機能があるEditor Extenderだが、あまり使わないものもあるから、Editor Extenderの設定画面のチェックボックスで必要なものだけチェックすることをお薦めする。デジタルゲートがお薦めするのは「Style」と「Table」の2つ。

あとは編修画面に増えたメニューアイコンから使っていくだけだが、ブラウザによって多少違うから要注意。

IEでは、セルの結合に、マウスでのドラッグによるセルの複数選択ができない(ポップアップされるメニューから結合したい数を入力すれば可能)。

Lunascapeでは、レンダリングエンジンの選択にもよるが、メニューアイコンのツールチップが出ない。

お薦めなのはFireFox。Windows、Mac共、問題なく使える。

MacのSafari 1.x も表示されない。

最後に動作環境だが、WordPress2.6.xだとポップアップメニューが正しく表示されない。現行の2.7.1にアップデートすることをお薦めする。

ちなみに、WordPress muでは、設定メニューのチェックボックスが保存できないため使用できない。

WPtouchを導入したWordPressサイトをiPhone用cssに固定する方法

WPtouchはiPhoneやiPodからのアクセスの場合WordpressをiPhone向けのCSSにするプラグインだが、PC上でiPhoneで見た時のレイアウトのプレビューを確認したい時や、PCからのアクセスを含めてiPhone用ページの表示に統一したい時がある。

確認だけならブラウザの自称名の変更によって済ませられるが、外部からパソコンでアクセスされた場合にもiPhone用デザインにしたい場合は、サンプルに従い以下のファイルを変更する。

変更するのは、導入時プラグインフォルダに入れたwptouch.php

95行目あたり
function detectAppleMobile($query = ”) {
    $container = $_SERVER[‘HTTP_USER_AGENT’];
    //print_r($container); //this prints out the user agent array. uncomment to see it shown on page.
    // Add whatever user agents you want here if you want to make this show on a Blackberry or something. No guarantees it’ll look pretty, though!
    $useragents = array(“iphone”, “ipod”, “aspen”, “dream”);
        $this->applemobile = false;
            foreach ($useragents as $useragent) {
            if (eregi($useragent, $container)) {
        $this->applemobile = true;
        }
    }
}

↑この部分で $_SERVER[‘HTTP_USER_AGENT’] を取得し、iphone、ipod、aspen、dreamからのアクセスの場合にapplemobile を true にしている。

変更は以下のようにする。

function detectAppleMobile($query = ”) {
    $container = $_SERVER[‘HTTP_USER_AGENT’];
    //print_r($container); //this prints out the user agent array. uncomment to see it shown on page.
    // Add whatever user agents you want here if you want to make this show on a Blackberry or something. No guarantees it’ll look pretty, though!
    $useragents = array(“iphone”, “ipod”, “aspen”, “dream”);
        $this->applemobile = false;
            foreach ($useragents as $useragent) {
            if (eregi($useragent, $container)) {
        $this->applemobile = true;
        }
    }
    $this->applemobile = true;
}

敢えて元のスクリプトは生かしたままにしてあるが、$this->applemobile = true;
となるようにしてあれば、余分な部分は削除しても構わない。

あとはプラグインフォルダに置いたwptouch.phpをwptouch_old.phpにでもリネームしてwptouch.phpをアップすればいい。

これで、iPhone、iPodはもちろん、PCからのアクセスでもiPhone版のレイアウトで表示されるようになる。
もどしたければ、wptouch.phpを削除し、wptouch_old.phpをwptouch.phpに戻す。

サンプルページ
http://iphone.03style.com/

WordPressのディレクトリ名を運用後に変更した時

WordPressでサイトを構築後に、さまざまな理由で保存しているディレクトリ名を変更したい場合がある。
そのまま、ディレクトリ名だけを変えてしまうと、ログインフォームからのリダイレクト先が違ってしまい困ることになる。
その場合は、phpMyAdmin等で運用URLを変更する。

運用テーブルは「wp_options」(wp_を変えている場合はそのプリフィックスに変更)
内にある「siteurl」

これを変更したディレクトリ名に合わせてあげれば、ログインできるようになる。

ダッシュボードに入れたら、「設定」から
ブログのアドレス (URL)も修正しておくこと。

WordPressを携帯対応にするプラグイン

OpenPNEのような国産のオープンソースでは純正で携帯に対応するのがお約束となっているが、WordPressはデフォルトでは携帯に対応していない。

携帯に対応させる数種類のプラグインが作られているが、最も高機能なのはKtai Styleだが、PHP4には未対応。
理想的にはサーバーのPHPを5.2以上に上げることだが、クライアントによってはレンタル、ホスティングしているサーバーの関係で自由が効かない場合がある。

そんな時の選択として『Mobile Eye+』がお薦め。PHP4の環境でも使える。
ちなみにWordPressの最新版2.6.2でも使用可能だった。

使い方は簡単。ダウンロードしたファイルを解凍(「wordpress」というフォルダ名になるが悩まないように)フォルダの中にある「wp-content」フォルダの中にある「plugins」フォルダの中にある「mobile_eye」フォルダを、サーバー上のpluginsフォルダにアップロードし、Mobile Eye+プラグインを有効化するだけでいい。

■問題点
設定で、デザイン他を変更することが可能だが、UTF-8環境下では文字化けする。
SHIFT-JISにすれば表示は可能だが、設定は反映されなかった。