WordPress×jQueryMobile

WordBench 宮崎

WordPress × jQueryMobile = スマフォ最適化
【 WordBench 宮崎勉強会】

© wordbonch.org

ver.1.0.0

自己紹介

高見　和也（ Takami Kazuya ）
Twitter@miiitaka
Facebook@miiitaka

株式会社アラタナ
サービス開発部：フロントエンドチーム
PHP や JavaScript とかスクリプト系言語好き。

© wordbonch.org

2

今回の実装環境

WordPress 3.8.1
jQuery 1.10.2 （ CDN ）
https://code.jquery.com/jquery-1.10.2.min.js
jQuery Mobile 1.4 （ CDN ）
https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js
https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css
※WordPress ver.3.7 系からマイナーバージョンは自動更新になりましたね。

© wordbonch.org

3

カスタムメニュー機能 × jQuery Mobile


© wordbonch.org

4


まずはグローバルナビゲーションを作ってみましょう。
管理画面でカスタムメニュー機能を使えるようにします。（ functions.php に追記）
function theme_setup() {
// 管理画面の [ 外観 ]⇒[ メニュー ] を表示させる
add_theme_support('menus');
}
add_action('after_setup_theme','theme_setup');

コード追
加

初期設定は「
メニュー」が
ない

© wordbonch.org

出てきた！
＼ (^o^) ／

5


続けて、 functions.php にメニューを表示する「位置」を設定しておきます。
// 管理画面の [ 外観 ]⇒[ メニュー ] でテーマの位置を設定
register_nav_menus(array(
'header_navi' => ' ヘッダーナビゲーション '
));

© wordbonch.org

任意で名前をつ
けて、事前に登
録しておきます
。

6


管理画面から自由にメニューの追加ができるようになりました。
functions.php
で登録した名
前

とりあえず 3
つメニュー作
成

functions.php で登録
した位置
（チェック入れます
）

© wordbonch.org

7


準備できたので、実際に出力します。 header.php に以下のコードを記述。
<?php wp_nav_menu(array(
'theme_location' => 'header_navi',
'container' => false
)); ?>

container は、自動的
に <div> でメニュー
がラップされるので
、 false を渡して削除
。

Theme は、登
録した名前。

<ul id='menu-header_navi'>
<li><a href=''>HOME</a></li>
<li><a href=''>ABOUT</a></li>
<li><a href=''>FAQ</a></li>
</ul>

出てきた！
＼ (^o^) ／

© wordbonch.org

8


じゃあ、これを横並びにするには、 ul を display:inline-block にして、あ、その前にリストのマーク外し
て、余白の調整して li の幅は３つだから、デバイスの横幅考慮して相対指定のほうがいいよね、 33 ％か
な？あーメニュー増えた時どうしようかなぁ。結局管理画面からメニュー増やせても CSS の調整がいる
んじゃ意味ないよね。並び替えぐらいの用途しかないんだったらカスタムメニューなんていらないんじ
ゃないＦさふぇえｒがｓｄｇれあｇｄｆｇらえｒがえらｇらあｒがえｒｇｒ

あぁ、つらい
……

© wordbonch.org

9


じゃあ、これを横並びにするには、 ul を display:inline-block にして、あ、その前にリストのマーク外し
て、余白の調整して li の幅は３つだから、デバイスの横幅考慮して相対指定のほうがいいよね、 33 ％か
な？あーメニュー増えた時どうしようかなぁ。結局管理画面からメニュー増やせても CSS の調整がいる
んじゃ意味ないよね。並び替えぐらいの用途しかないんだったらカスタムメニューなんていらないんじ
ゃないＦさふぇえｒがｓｄｇれあｇｄｆｇらえｒがえらｇらあｒがえｒｇｒ

そうだ！
jQueryMobile
を使おう！

© wordbonch.org

10


まずは jQuery と jQueryMobile を CDN 経由でヘッダーに読み込みます。
<head>
<link rel='stylesheet' href='https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' />
<script src='https://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
</head>

<nav data-role='navbar'>

<ul> タグを <nav>
でラップし
て、 data-role （デ
ータの役割）を与え
る。

<?php wp_nav_menu(array(
'theme_location' => 'header_navi',
'container' => false
)); ?>
</nav>

© wordbonch.org

11

ソースコード触らず
順番入替＆レスポン
シーブ！＼ (^o^) ／

横並びになった！＼ (^o^) ／

管理画面でメ
ニューを増や
してみる。

※6 個以上になると 2 列表示になります。スマフォの横幅を考えた場合、最大 5 個が妥当。

© wordbonch.org

12

カテゴリ一覧 × jQuery Mobile


© wordbonch.org

13


まずは普通にカテゴリ一覧を表示します。最も簡単な方法はこれ。
<ul>
<?php wp_list_categories('depth=1&title_li='); ?>
</ul>

depth は出力する
カテゴリ階層。
とりあえず第 1 階
層のみ。

title_li は、自動で「カ
テゴリー」という文
字が出力されるので
出さないように空文
字。

出てきた！
＼ (^o^) ／

© wordbonch.org

14


カスタムメニュー機能の時と同様に、出力リストに jQueryMobile の役割（ data-role ）を割当てます。
<ul data-role='listview'>
<?php wp_list_categories('depth=1&title_li='); ?>
</ul>

おしゃれ！
＼ (^o^) ／

© wordbonch.org

15


Wp_list_categories() だとちょっとカスタマイズに困るので、カテゴリ一覧を普通に展開します。
<?php $categories = get_categories(array('parent' => 0)); ?>
<?php if (count($categories) > 0) : ?>
<ul>
<?php foreach($categories as $category) : ?>
<li>
<a href='<?php echo get_category_link($category->cat_ID); ?>'>
<?php echo esc_html($category->name); ?>
</a>
</li>
<?php endforeach; ?>

<li> や <a> を利用
して装飾したい。

</ul>
<?php endif; ?>

© wordbonch.org

16


jQueryMobile でリストの整頓とカウンタバブルを出してみましょう。
<?php $categories = get_categories(array('parent' => 0)); ?>
<?php if (count($categories) > 0) : ?>
<ul data-role='listview'>

アイコンも変えて
みよう。
<?php foreach($categories as $category) : ?>

<li data-icon='check'>
<a href='<?php echo get_category_link($category->cat_ID); ?>'>
<?php echo esc_html($category->name); ?>

カテゴリのカウン
ト数を <span> で
囲みます。

<span class='ui-li-count'><?php echo esc_html($category->count); ?></span>
</a>
</li>
<?php endforeach; ?>

ui-li-count
jQueryMobile 設定

</ul>
<?php endif; ?>

© wordbonch.org

17


jQueryMobile でリストの整頓とカウンタバブルを出してみましょう。

アイコンも変わっ
た！＼ (^o^) ／

カテゴリ毎の記事
数がでた！
＼ (^o^) ／

アイコンはあれこれ指定ができます。
★jQuery1.4 からはアイコン画像が全て SVG で表示されるよう
になりました。 Retina みたいな高画質モニタでもなめらか～に
表示されますね。

© wordbonch.org

18


ここでも普通に記事の一覧を出力します。
<?php
query_posts(array('post_type' => 'post','orderby' => 'date','order' => 'DESC'));
?>
<?php if (have_posts()) : ?>

記事情報を日
付の降順で。

<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<a href='<?php the_permalink(); ?>'><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php endif;wp_reset_query(); ?>

© wordbonch.org

20


これに jQueryMobile の設定を加えます。リストに表示した記事の検索機能を実装します。
<?php
query_posts(array('post_type' => 'post','orderby' => 'date','order' => 'DESC'));
?>
<?php if (have_posts()) : ?>
<ul data-role='listview' data-filter='true'>
<?php while (have_posts()) : the_post(); ?>
<li>

data-filter
ここがポイント！

<a href='<?php the_permalink(); ?>'><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php endif;wp_reset_query(); ?>

© wordbonch.org

21


これに jQueryMobile の設定を加えます。リストに表示した記事の検索機能を実装します。

検索ボックスが表
示された！
＼ (^o^) ／

記事が絞りこまれ
ます。すてき。

「 smarty 」
と検索

© wordbonch.org

22

WordPress×jQueryMobile

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (8)

Similaire à WordPress×jQueryMobile

Similaire à WordPress×jQueryMobile (20)

Plus de Takami Kazuya

Plus de Takami Kazuya (20)

Dernier

Dernier (11)

WordPress×jQueryMobile