WordPressのページをスマートフォン化させる勉強会を開催
2011年9月17日に、
まずはKtaiStyleのプラグインを作成されている池田百合子氏から、
WordPressはパソコン用のCMSツールとして誕生していますので、
振り分け対応方法として、
WordPressのプラグインで簡単スマートフォン化
プラグインの利用は簡単で手間がかからないけれど、
WordPressは世界で最もよく利用されているCMSツールという事もありまして、
フューチャーフォンでは、
ただ、

Twenty Elevenはレスポンシブウェブデザインでできている
デフォルトテーマのTwenty Elevenは、
Media Query
@media
実装方法として、
/*
Theme Name: Twenty Eleven Mobile << 管理画面に出てくる子テーマの名前
Template: twentyeleven << 親テーマの名前
Author: IKEDA Yuriko << 作者の名前
Author URI: http://en.yuriko.net/ << 作者のURL
Description: Mobile version of Twenty Eleven
Version: 1.0
License: GNU General Public License
License URI: license.txt
*/
スマートフォンかどうかはユーザーエージェントによって判別させます。PHPを使ってWordPressプラグインとして実装すると以下のようになります。これはiPhoneやAndroidかを判定する事ができます。
<?php
/*
Plugin Name: Smartphone Switcher
Version: 0.7.0
Author: IKEDA Yuriko
*/
if ( $is_iphone ) {
add_action('stylesheet','change_stylesheet', 20);
}
function change_stylesheet($stylesheet) { ! return ‘smartphone’;
}
これらのPHPファイルを認識させるために、
Ktai Styleでもスマートフォン向けサイトの作成も可能ですが、
その他、
jQueryMobileをWordPressで認識させる方法
次に、
先に述べたブラウザ間の表示の差異を吸収してくれるという特徴とともに、
jQueryMobileを組み込む方法も実は、

jQueryMobileでレスポンシブウェブデザインが可能!
レスポンシブウェブデザインでの実現は、
池田氏が解説した内容と同様にKtai Styleを有効化させ、
<link rel="stylesheet" href="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.css" />
<script src="<?php ks_theme_url(); ?>js/jquery-1.6.4.min.js"></script>
<script src="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.js"></script>
通常のテーマにも以下のような記述で認識させる事ができます。
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile- 1.0b3.min.css" />
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.6.4.min.js"></script> <script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile-
1.0b3.min.js"></script>
WordPressのコアファイルには、
<?php wp_enqueue_script('jquery'); ?>
以上のような読み込みの設定で準備が整いました。
動的コンテンツもjQueryMobileで実現できるのが醍醐味
WordPressのようなコンテンツシステムは管理画面上からコンテンツを追加できます。jQueryMobileを利用しても同様にコンテンツ追加で自動生成されなくてはいけませんので以下のような記述で実現します。
<?php
$my_query = new WP_Query(array(
'cat' => 1,
'posts_per_page' => -1,
'orderby' => 'comment_count',
'order' => 'DESC'
));
?>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><?php echo get_catname('1'); ?></li>
<?php while($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
- カテゴリーID
「1」 のカテゴリー名を取得 - カテゴリーID
「1」 の記事をループ処理 (繰り返し処理) - 記事のタイトルを取得記事のリンクURLを取得
他にも表示非表示などjQueryMobileでよく利用され、