![c_wordpress]()
WordPressのスマートフォン対応を行うとき先ず考えることは、スマートフォン向けのテーマを用意することですね。ここは一つ、jQuery mobile対応のWordPressテーマを自作してみましょう。
今回は、jQuery Mobileのモックアップを作成出来るCodiqaを使い、そのモックアップをWordPressテーマ化する手法をご紹介します。
![RG-Lab_mobile_theme]()
このスクリーンショットは、本ブログに今回作成するWordPressテーマを適用したものです。
0. はじめに
今回作るWordPressテーマでは、以下の部品を作成します。
- index.php (トップページ)
- single.php (記事ページ)
- style.css (CSSや、テーマの属性など)
- Codiqa生成ファイル（my.cssとmy.js）
ヘッダー・フッター・サイドバー等は、今回は省略しています。
1. まずは設計：何を作るか
Codiqaでは、index.htmlとデザインをサポートするためのJavaScriptとCSSが出力されます。ページはindex.htmlファイルの内部に作られ、<a href="#page1">〜</a>の様なリンクを押すことでページが遷移されます。
[php]
<!DOCTYPE html>
<html>
<head>
共通部分
</head>
<body>
<!-- 記事一覧 -->
<div data-role="page" id="page2">
個別部分その１
</div>
<!-- 記事 -->
<div data-role="page" id="page3">
個別部分その２
</div>
</body>
</html>
[/php]
Codiqaの生成するindex.htmlは可読性が高く、どのページがソースコードのどの部分に対応しているか分かりやすくなっています。今回は、index.htmlの中にトップページと記事ページを１つずつ作り、index.htmlを分解してWordPressテーマの部品をindex.phpとsingle.phpの別々のファイルにします。
例えば、index.phpは
[php]
<!DOCTYPE html>
<html>
<head>
共通部分
</head>
<body>
<!-- 記事一覧 -->
<div data-role="page" id="page2">
個別部分その１
</div>
</body>
</html>
[/php]
そして、single.phpは
[php]
<!DOCTYPE html>
<html>
<head>
共通部分
</head>
<body>
<!-- 記事 -->
<div data-role="page" id="page3">
個別部分その２
</div>
</body>
</html>
[/php]
このように分けます。Codiqaが生成するCSSやJavaScriptは、index.phpとsingle.phpの両方で使います。
2. Codiqaでモックアップを作る
では、Codiqaでモックアップを作ってみましょう。
トップページは以下のように作りました。トップページから記事へ遷移するために、記事へのボタン(下の画像では『記事１』〜『記事５』などのボタン)を設置します。この段階ではボタンは仮のものを設置し、あとでPHPでボタンを生成するときの目印とします。
![wp_theme_index_html_1]()
記事ページは以下のような感じです。
![wp_theme_index_html_2]()
記事の中身はタイトルと投稿時間と本文を表示して、前後の記事へのタブを設置します。
ソースコードは以下のようになっています。
[html]
・・・省略
<!-- 記事一覧 -->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<h1>
RG-Lab
</h1>
<div style="width: 100%; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事１
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事２
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事３
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事４
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事５
</a>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
ページフッタ
</h3>
</div>
</div>
<!-- 記事 -->
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<h3>
RG-Lab
</h3>
</div>
<div data-role="content">
<h3>
タイトル
</h3>
<h5>
投稿時間
</h5>
<div>
<b>
本文
</b>
</div>
</div>
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
</li>
<li>
<a href="#page2" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
[/html]
3. Codiqaのファイルを、WordPressテーマファイル化
注意点として、Codiqaの生成したCSSとJavaScriptはWordPressの関数を使って絶対パスを通す必要があります。
[php]
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/my.css" />
<script src="<?php echo get_template_directory_uri(); ?>/my.js"></script>
[/php]
この点に注意して、Codiqaの生成したindex.htmlからindex.phpとsingle.phpファイルを作ります。
index.phpは以下のようになります。
[php]
・・・省略
<!-- 記事一覧 -->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<h1>
RG-Lab
</h1>
<div style="width: 100%; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事１
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事２
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事３
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事４
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事５
</a>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
ページフッタ
</h3>
</div>
</div>
[/php]
single.phpは以下のようになります。
[php]
・・・省略
<!-- 記事 -->
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<h3>
RG-Lab
</h3>
</div>
<div data-role="content">
<h3>
タイトル
</h3>
<h5>
投稿時間
</h5>
<div>
<b>
本文
</b>
</div>
</div>
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
</li>
<li>
<a href="#page2" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
</li>
</ul>
</div>
</div>
[/php]
次に、style.cssを作成します。style.cssの本来の目的はWordPressサイトのデザインを記述することですが、今回はCodiqaの生成したCSSを利用することにします。ここでは、テーマをWordPressに認識してもらうために、テーマの属性のみ記述しておきます。
[css]
/*
Theme Name: RG-Lab Mobile Theme
Description:Codiqaで作ったスマートフォン向けテーマ
Theme URI: http://lab.realglobe.jp
Author: oouchida
Author URI: http://www.twitter.com/oouchida
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
[/css]
Codiqaが生成したCSSとJavaScriptを含めて wp-content/themes/にフォルダを設置します。フォルダ名は自由に設定してかまいません。ここではrg_lab_moble_themeとしました。
![wp_theme_folder_1]()
これで、WordPressはテーマを認識してくれます。
![wp_theme_first_step]()
4. テーマを編集
ここまでで、WordPressのテーマとして必要な部品は出来上がりました。しかし、まだ仮のボタンや記事が表示されるだけです。
WordPressの関数を呼び出し、記事一覧の表示や記事そのものの表示を行えるように、テーマの編集を行います。
4.1 トップページ
トップページでは、記事の一覧を読み込み、記事ページへ遷移するためのボタンを設置します。修正前のindex.phpは
[php]
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事１
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事２
</a>
</li>
・・・中略
</ul>
[/php]
となっています。ここでWordPressに用意されている関数を使い、ボタンを作成します。今回は最新記事１０件を読み込むとします。
[php]
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<?php
query_posts('posts_per_page=10');
if (have_posts()){
while (have_posts()){
the_post();
?>
<li data-theme="c">
<a href="<?php the_permalink(); ?>" data-transition="slide">
<?php the_title(); ?>
</a>
</li>
<?php
}
}
?>
[/php]
ボタンの遷移先を the_permalink()で指定しています。指定された先では、single.phpが記事ページのテーマとして使われます。
4.2 記事ページ
single.phpではどのように記事を表示しているか、見てみましょう。
[php]
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<h3>
RG-Lab
</h3>
</div>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
$prev_post = get_previous_post();
$next_post = get_next_post();
?>
<div data-role="content" class="ui-content" role="main" id="content">
<h3>
<?php echo get_the_title(); ?>
</h3>
<h5>
<?php echo get_the_date(); ?>
</h5>
<div>
<b>
<?php
$content = apply_filters('the_content', get_the_content());
$content = str_replace('<a ', '<a target="_blank" ', $content);
$content = str_replace('<img ', '<img style="max-width: 100%; height: auto;" ', $content);
echo $content;
?>
</b>
</div>
</div>
<?php endwhile;
else : ?>
<div data-role="content" class="ui-content" role="main" id="content">
<h3>
記事がありません。
</h3>
<h5>
</h5>
<div>
<b>
お探しの記事は見つかりませんでした。
</b>
</div>
</div>
<?php endif; ?>
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<?php if($prev_post) : ?>
<a href="/?p=<?php echo $prev_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-l">
ありません
</a>
<?php endif; ?>
</li>
<li>
<a href="/" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<?php if($next_post) : ?>
<a href="/?p=<?php echo $next_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-r">
ありません
</a>
<?php endif; ?>
</li>
</ul>
</div>
</div>
[/php]
記事の表示には、他のWordPressテーマでもよく見かけるWordPressの関数を使っています。
ほぼWordPressの関数で取り出してきたデータのまま表示しているのですが、get_the_content()関数で取り出した記事の中身に対しては少し置換を行っています。リンクに target="_blank" を入れるのは、スマートフォンで閲覧している訪問者の多くがAndroidの標準ブラウザやiPhoneのSafariなど、タブブラウザを使っていると想定しているからです。
画像に対してスタイルを指定しているのは、画面サイズに応じて画像の表示サイズを変えるためです。
[php]
<div data-role="content" class="ui-content" role="main" id="content">
<h3>
<?php echo get_the_title(); ?>
</h3>
<h5>
<?php echo get_the_date(); ?>
</h5>
<div>
<b>
<?php
$content = apply_filters('the_content', get_the_content());
$content = str_replace('<a ', '<a target="_blank" ', $content);
$content = str_replace('<img ', '<img style="max-width: 100%; height: auto;" ', $content);
echo $content;
?>
</b>
</div>
</div>
[/php]
また、次のコードで、前後の記事の情報を取ってきています。
[php]
<?php
if (have_posts()) :
while (have_posts()) : the_post();
$prev_post = get_previous_post();
$next_post = get_next_post();
?>
[/php]
$prev_postに前の記事、$next_postに次の記事の情報が入っています。nullなら、前後の記事が存在しないことになります。
その判定もふまえて、タブにリンクを入れます。
[php]
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<?php if($prev_post) : ?>
<a href="/?p=<?php echo $prev_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-l">
ありません
</a>
<?php endif; ?>
</li>
<li>
<a href="/" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<?php if($next_post) : ?>
<a href="/?p=<?php echo $next_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-r">
ありません
</a>
<?php endif; ?>
</li>
</ul>
</div>
</div>
[/php]
5. 出来上がり確認
テーマが作成されたら、確認を行います。簡易的な確認は、テーマのライブプレビューで行えます。
![wp_theme_first_step]()
以下がプレビューされた結果です。動作確認も行えます。
![wp_theme_preview]()
動作確認を行ったら、スマートフォンからの訪問者には今回作成したテーマを見せるように設定すると良いでしょう。
スマートフォンからの訪問者かどうかの判定には幾つかの方法がありますが、その１つとしてWordPressプラグインを使う方法があります。「
WordPress スマートフォン テーマ 切り替え プラグイン」などで検索すると、いくつかのスマートフォン用テーマWordPressプラグインが見つかるでしょう。
6. 終わりに
CodiqaでWordPressスマートフォン用のテーマを作ってみました。今回、あまり工数をかけずにWordPressテーマを作成出来たのは、Codiqaの出力するindex.htmlが可読性が高いという利点が挙げられるでしょう。Codiqaを上手く使えば、jQuery Mobileを使ったアプリケーションを素早く作れると思います。
また、WordPressのテーマも、簡単な部品を作るだけで一つのテーマとして作り上げられることも特徴として挙げられます。是非、自分の感性を生かしたWordPressテーマを作ってみてはいかがでしょうか。
このスクリーンショットは、本ブログに今回作成するWordPressテーマを適用したものです。
0. はじめに
今回作るWordPressテーマでは、以下の部品を作成します。
記事ページは以下のような感じです。
記事の中身はタイトルと投稿時間と本文を表示して、前後の記事へのタブを設置します。
ソースコードは以下のようになっています。
[html]
・・・省略
<!-- 記事一覧 -->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<h1>
RG-Lab
</h1>
<div style="width: 100%; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事１
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事２
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事３
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事４
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事５
</a>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
ページフッタ
</h3>
</div>
</div>
<!-- 記事 -->
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<h3>
RG-Lab
</h3>
</div>
<div data-role="content">
<h3>
タイトル
</h3>
<h5>
投稿時間
</h5>
<div>
<b>
本文
</b>
</div>
</div>
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
</li>
<li>
<a href="#page2" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
[/html]
3. Codiqaのファイルを、WordPressテーマファイル化
注意点として、Codiqaの生成したCSSとJavaScriptはWordPressの関数を使って絶対パスを通す必要があります。
[php]
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/my.css" />
<script src="<?php echo get_template_directory_uri(); ?>/my.js"></script>
[/php]
この点に注意して、Codiqaの生成したindex.htmlからindex.phpとsingle.phpファイルを作ります。
index.phpは以下のようになります。
[php]
・・・省略
<!-- 記事一覧 -->
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<h1>
RG-Lab
</h1>
<div style="width: 100%; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事１
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事２
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事３
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事４
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事５
</a>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
ページフッタ
</h3>
</div>
</div>
[/php]
single.phpは以下のようになります。
[php]
・・・省略
<!-- 記事 -->
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<h3>
RG-Lab
</h3>
</div>
<div data-role="content">
<h3>
タイトル
</h3>
<h5>
投稿時間
</h5>
<div>
<b>
本文
</b>
</div>
</div>
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
</li>
<li>
<a href="#page2" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<a href="" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
</li>
</ul>
</div>
</div>
[/php]
次に、style.cssを作成します。style.cssの本来の目的はWordPressサイトのデザインを記述することですが、今回はCodiqaの生成したCSSを利用することにします。ここでは、テーマをWordPressに認識してもらうために、テーマの属性のみ記述しておきます。
[css]
/*
Theme Name: RG-Lab Mobile Theme
Description:Codiqaで作ったスマートフォン向けテーマ
Theme URI: http://lab.realglobe.jp
Author: oouchida
Author URI: http://www.twitter.com/oouchida
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
[/css]
Codiqaが生成したCSSとJavaScriptを含めて wp-content/themes/にフォルダを設置します。フォルダ名は自由に設定してかまいません。ここではrg_lab_moble_themeとしました。
これで、WordPressはテーマを認識してくれます。
4. テーマを編集
ここまでで、WordPressのテーマとして必要な部品は出来上がりました。しかし、まだ仮のボタンや記事が表示されるだけです。
WordPressの関数を呼び出し、記事一覧の表示や記事そのものの表示を行えるように、テーマの編集を行います。
4.1 トップページ
トップページでは、記事の一覧を読み込み、記事ページへ遷移するためのボタンを設置します。修正前のindex.phpは
[php]
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事１
</a>
</li>
<li data-theme="c">
<a href="#page3" data-transition="slide">
記事２
</a>
</li>
・・・中略
</ul>
[/php]
となっています。ここでWordPressに用意されている関数を使い、ボタンを作成します。今回は最新記事１０件を読み込むとします。
[php]
<ul data-role="listview" data-divider-theme="d" data-inset="false">
<?php
query_posts('posts_per_page=10');
if (have_posts()){
while (have_posts()){
the_post();
?>
<li data-theme="c">
<a href="<?php the_permalink(); ?>" data-transition="slide">
<?php the_title(); ?>
</a>
</li>
<?php
}
}
?>
[/php]
ボタンの遷移先を the_permalink()で指定しています。指定された先では、single.phpが記事ページのテーマとして使われます。
4.2 記事ページ
single.phpではどのように記事を表示しているか、見てみましょう。
[php]
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<h3>
RG-Lab
</h3>
</div>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
$prev_post = get_previous_post();
$next_post = get_next_post();
?>
<div data-role="content" class="ui-content" role="main" id="content">
<h3>
<?php echo get_the_title(); ?>
</h3>
<h5>
<?php echo get_the_date(); ?>
</h5>
<div>
<b>
<?php
$content = apply_filters('the_content', get_the_content());
$content = str_replace('<a ', '<a target="_blank" ', $content);
$content = str_replace('<img ', '<img style="max-width: 100%; height: auto;" ', $content);
echo $content;
?>
</b>
</div>
</div>
<?php endwhile;
else : ?>
<div data-role="content" class="ui-content" role="main" id="content">
<h3>
記事がありません。
</h3>
<h5>
</h5>
<div>
<b>
お探しの記事は見つかりませんでした。
</b>
</div>
</div>
<?php endif; ?>
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<?php if($prev_post) : ?>
<a href="/?p=<?php echo $prev_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-l">
ありません
</a>
<?php endif; ?>
</li>
<li>
<a href="/" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<?php if($next_post) : ?>
<a href="/?p=<?php echo $next_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-r">
ありません
</a>
<?php endif; ?>
</li>
</ul>
</div>
</div>
[/php]
記事の表示には、他のWordPressテーマでもよく見かけるWordPressの関数を使っています。
ほぼWordPressの関数で取り出してきたデータのまま表示しているのですが、get_the_content()関数で取り出した記事の中身に対しては少し置換を行っています。リンクに target="_blank" を入れるのは、スマートフォンで閲覧している訪問者の多くがAndroidの標準ブラウザやiPhoneのSafariなど、タブブラウザを使っていると想定しているからです。
画像に対してスタイルを指定しているのは、画面サイズに応じて画像の表示サイズを変えるためです。
[php]
<div data-role="content" class="ui-content" role="main" id="content">
<h3>
<?php echo get_the_title(); ?>
</h3>
<h5>
<?php echo get_the_date(); ?>
</h5>
<div>
<b>
<?php
$content = apply_filters('the_content', get_the_content());
$content = str_replace('<a ', '<a target="_blank" ', $content);
$content = str_replace('<img ', '<img style="max-width: 100%; height: auto;" ', $content);
echo $content;
?>
</b>
</div>
</div>
[/php]
また、次のコードで、前後の記事の情報を取ってきています。
[php]
<?php
if (have_posts()) :
while (have_posts()) : the_post();
$prev_post = get_previous_post();
$next_post = get_next_post();
?>
[/php]
$prev_postに前の記事、$next_postに次の記事の情報が入っています。nullなら、前後の記事が存在しないことになります。
その判定もふまえて、タブにリンクを入れます。
[php]
<div data-role="tabbar" data-iconpos="top" data-theme="a">
<ul>
<li>
<?php if($prev_post) : ?>
<a href="/?p=<?php echo $prev_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-l">
前の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-l">
ありません
</a>
<?php endif; ?>
</li>
<li>
<a href="/" data-transition="fade" data-theme="" data-icon="home">
一覧へ
</a>
</li>
<li>
<?php if($next_post) : ?>
<a href="/?p=<?php echo $next_post->ID; ?>" data-transition="slidefade" data-theme="" data-icon="arrow-r">
次の記事へ
</a>
<?php else: ?>
<a data-transition="slidefade" data-theme="" data-icon="arrow-r">
ありません
</a>
<?php endif; ?>
</li>
</ul>
</div>
</div>
[/php]
5. 出来上がり確認
テーマが作成されたら、確認を行います。簡易的な確認は、テーマのライブプレビューで行えます。
動作確認を行ったら、スマートフォンからの訪問者には今回作成したテーマを見せるように設定すると良いでしょう。
スマートフォンからの訪問者かどうかの判定には幾つかの方法がありますが、その１つとしてWordPressプラグインを使う方法があります。「WordPress スマートフォン テーマ 切り替え プラグイン」などで検索すると、いくつかのスマートフォン用テーマWordPressプラグインが見つかるでしょう。
6. 終わりに
CodiqaでWordPressスマートフォン用のテーマを作ってみました。今回、あまり工数をかけずにWordPressテーマを作成出来たのは、Codiqaの出力するindex.htmlが可読性が高いという利点が挙げられるでしょう。Codiqaを上手く使えば、jQuery Mobileを使ったアプリケーションを素早く作れると思います。
また、WordPressのテーマも、簡単な部品を作るだけで一つのテーマとして作り上げられることも特徴として挙げられます。是非、自分の感性を生かしたWordPressテーマを作ってみてはいかがでしょうか。
