WordPressのページをスマートフォン化させる勉強会を開催
2011年9月17日に、 まずはKtaiStyleのプラグインを作成されている池田百合子氏から、 WordPressはパソコン用のCMSツールとして誕生していますので、 振り分け対応方法として、 プラグインの利用は簡単で手間がかからないけれど、 WordPressは世界で最もよく利用されているCMSツールという事もありまして、 フューチャーフォンでは、 ただ、 デフォルトテーマのTwenty Elevenは、 Media Query @media 実装方法として、 スマートフォンかどうかはユーザーエージェントによって判別させます。PHPを使ってWordPressプラグインとして実装すると以下のようになります。これはiPhoneやAndroidかを判定する事ができます。 これらのPHPファイルを認識させるために、 Ktai Styleでもスマートフォン向けサイトの作成も可能ですが、 その他、 次に、 先に述べたブラウザ間の表示の差異を吸収してくれるという特徴とともに、 jQueryMobileを組み込む方法も実は、 レスポンシブウェブデザインでの実現は、 池田氏が解説した内容と同様にKtai Styleを有効化させ、 通常のテーマにも以下のような記述で認識させる事ができます。 WordPressのコアファイルには、 以上のような読み込みの設定で準備が整いました。 WordPressのようなコンテンツシステムは管理画面上からコンテンツを追加できます。jQueryMobileを利用しても同様にコンテンツ追加で自動生成されなくてはいけませんので以下のような記述で実現します。 他にも表示非表示などjQueryMobileでよく利用され、WordPressのプラグインで簡単スマートフォン化
Twenty Elevenはレスポンシブウェブデザインでできている
/*
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
/*
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’;
}jQueryMobileをWordPressで認識させる方法
jQueryMobileでレスポンシブウェブデザインが可能！
<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><?php wp_enqueue_script('jquery'); ?>動的コンテンツも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>