月別: 2015年7月

カスタムフィールドの入力と反映

カスタムフィールドの入力と反映

カスタムフィールドを使えるようにしたので
現在テーブルに入力した値をこちらに入力します

今回は hello world の投稿の下に追加された
カスタムフィールドテンプレートに入力します

cus

入力ができたら
保存をクリックしておきます

次に、この入力内容を反映するために
single.php を編集します

1
2
3
4
5
6
7
8
9
10
11
12
<tbody>
  <tr>
    <td>○○のお店</td>
    <td>日曜日</td>
    <td>11:00〜17:00</td>
    <td>ランチ1000円</td>
    <td>東京都</td>
    <td>000-000-0000</td>
    <td>http://example.co.jp</td>
    <td>○○駅○版口から徒歩</td>
  </tr>
</tbody>

の部分を書き換えます

1
2
3
4
5
6
7
8
9
10
11
12
<tbody>
  <tr>
    <td><?php echo post_custom("ShopName")?></td>
    <td><?php echo post_custom("Holiday")?></td>
    <td><?php echo post_custom("Time")?></td>
    <td><?php echo post_custom("lunch")?></td>
    <td><?php echo post_custom("Address")?></td>
    <td><?php echo post_custom("tel")?></td>
    <td><?php echo post_custom("Hp")?></td>
    <td><?php echo post_custom("Access")?></td>
  </tr>
</tbody>

というように書き換えます

1
<?php echo post_custom("ShopName")?>

というように
post_custom() の引数は
カスタムフィールドで設定したIDになります

ShopName なら店名になります

これでプレビューを見ると
テーブルに内容が反映され表示されます

cus2

次に、お店の簡単な紹介文も
カスタムフィールドのものを反映するようにします

1
<h3>午後の緩やかな時間を本とともに</h3>

を

1
2
3
<?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
<h3><?php echo post_custom("Impression")?></h3>
<?php endif;?>

というように修正します

これでほぼ内容を反映できるようになりました

今回のコードは以下のようになります

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php get_header(); ?>
 
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
  <h3><?php echo post_custom("Impression")?></h3>
  <?php endif;?>
  <?php the_content(); ?>
  <img src="image/tee.jpg" alt="" width="300" height="300">
 
<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">
 
  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>
<?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>営業時間</th>
        <th>ランチ価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><?php echo post_custom("ShopName")?></td>
        <td><?php echo post_custom("Holiday")?></td>
        <td><?php echo post_custom("Time")?></td>
        <td><?php echo post_custom("lunch")?></td>
        <td><?php echo post_custom("Address")?></td>
        <td><?php echo post_custom("tel")?></td>
        <td><?php echo post_custom("Hp")?></td>
        <td><?php echo post_custom("Access")?></td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  <?php endif;?>
 
  <?php endwhile;   else: ?>
    <p>記事はありません</p>
  <?php endif; ?>
 
 
<?php get_footer(); ?>

ディレクトリバックアップ

ディレクトリバックアップ

tar コマンドでディレクトリのしたを１つにまとめ
圧縮保存する

~/以下のファイルを
/home/
に
日付_home.tar.gz
で保存する

1
sudo tar zcvf /home/20150724.tar.gz ~/

/home に保存するには
sudo でやらないと権限の関係でできない

ちなみに、元のファイルはそのままなので心配ない

オプションの意味は
zで gzip圧縮
cで圧縮
vでログ表示
fでファイルにバックアップを作成
という意味

アーカイブはバックアップとも言える

圧縮するときには
tar zcvf バックアップファイル名　対象パス
と覚えておく

さらに圧縮率をあげるなら
jオプションをつかう
これは圧縮方法の違いで
zは gzip
jだと bzip2
になる

この場合
保存するときのファイル拡張子を
bz2 にする

圧縮のときには
tar jcvf バックアップファイル名　対象パス
となる

tar コマンドについては

【 tar 】 ファイルを書庫化・展開する（拡張子.tarなど）

にオプションの意味なども載っているので
参考に

そして時間の違いを実験するため
time コマンドで実行時間を表示します
time コマンドについての詳細は
【 time 】 指定したコマンドの実行時間を表示する

を参考に

結果ですが

1
2
3
4
5
6
7
8
time sudo tar zcvf /home/20150724.tar.gz ~/
 
でzオプションによる gzip 圧縮の場合
 
 
real    0m20.856s
user    0m8.941s
sys 0m7.542s

となり

1
time sudo tar jcvf /home/20150724.tar.bz2 ~/

で j オプションによる bzip2 圧縮だと

1
2
3
real    0m44.561s
user    0m32.664s
sys 0m6.771s

そして、実際にサイズを ls コマンドで
測ってみます
ls コマンドの詳細は
【 ls 】 ファイルやディレクトリの情報を表示する

を参考に

今回つかうオプションは
a すべてのファイルを対象
h 単位を読みやすくする
l 詳細表示
t タイムスタンプ順にして並べる
r 逆順にして並べる

これらをつかって比較結果を表示します

1
ls -ahltr /home/20150724.tar.*

結果は

1
2
-rw-r--r--. 1 root root 83M  7月 24 07:34 2015 /home/20150724.tar.gz
-rw-r--r--. 1 root root 73M  7月 24 07:36 2015 /home/20150724.tar.bz2

となります

これにより
bzip2 圧縮のほうが７３MBとなり
サイズが小さいということがわかります

Custom Field Template でテーブル作成

Custom Field Template でテーブル作成

WordPressとプラグインを使ってお店紹介サイトを作る方法
を参考に
Custom Field Templateプラグインを使い
テーブルを作成します

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<thead>
  <tr>
    <th>店名</th>
    <th>定休日</th>
    <th>価格</th>
    <th>住所</th>
    <th>電話番号</th>
    <th>HP</th>
    <th>アクセス</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>○○のお店</td>
    <td>日曜日</td>
    <td>ランチ1000円</td>
    <td>東京都</td>
    <td>000-000-0000</td>
    <td>http://example.co.jp</td>
    <td>○○駅○版口から徒歩</td>
  </tr>
</tbody>

となっていますが
記事の内容を反映するようにします

まず、ダッシュボードから
プラグインで
Custom Field Template
で検索し、インストールします

cuf

インストールしたら有効化を忘れずに

次に、
設定 > カスタムフィールドテンプレート
で
デフォルトテンプレート
から
店舗情報へ変更します

cul2

次に
テンプレートコンテンツに
カスタムフィールドにしたいリストを書きます

今回は
[ShopName]
type=text
size = 35
label=店名

[Holiday]
type = text
size = 35
label = 定休日

[Time]
type = text
size = 35
label = 営業時間

[lunch]
type=text
size =35
label=ランチ価格

[Address]
type = text
size=35
label = 住所

[tel]
type=text
size=35
label=電話番号

[Hp]
type=text
size=35
label=HP

[Access]
type = textarea
cols = 80
rows = 3
label=お店への案内

[Impression]
type = textarea
cols = 80
rows = 3
label = お店のひとことメモ
としました

cul3

設定できたら、オプションを更新する
をクリックします

これで、投稿一覧から
hello world を選ぶと
カスタムフィールドテンプレートが
追加されているのがわかります

cul4

今回はプラグインの設定だけなので、ソース変更はありません

お店情報ページの作成 single.php の場合

お店情報ページの作成 single.php の場合

お店情報は、投稿画面で作成して増やしていくので
single.php を作成します

まず、以前作成したお店情報のページをコピーします

ただし、投稿表示画面のファイル名が
single.php
であることに注意してください

今回は、別のディレクトリからコピーしました

1
cp ../../../../shop.html single.php

画面の状態を確認するには
ダッシュボードから記事の投稿画面で
変更をプレビュー
でみるとわかります

ただし、今のソースのままだと
wordpress の内容は反映されません

このため、ソースを書き換えていきます

まず、wordpress のヘッダーとフッターになるように
テンプレに変更します

ヘッダー部分には

1
<?php get_header(); ?>

フッター部分には

1
<?php get_footer(); ?>

とします

次に、記事があるかないかを判定します
もし、ないのなら
記事がありません
と表示するようにします

このため、本文を判定で囲みます

1
<?php if(have_posts()): while(have_posts()): the_post(); ?>

を

1
<?php get_header(); ?>

の下へ書き

1
2
3
<?php endwhile;   else: ?>
  <p>記事はありません</p>
<?php endif; ?>

を

1
<?php get_footer(); ?>

の上に書きます

have_posts() は記事があるかを判定

the_post() は次の記事の取得です

この条件式の解説には
WordPressテーマの「while (have_posts()) : the_post();」の意味は？

がわかりやすいと思います

次にタイトルを wordpress の投稿で入力した
タイトルになるようにします

1
<h2>ティーセット</h2>

を

1
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

へ変更します

これで投稿一覧の中から
hello world を選び
変更をプレビューすると

タイトルが Hello world になります

single2

the_title() は タイトルを表示します

the_permalink() は記事へのリンクになります

次に、お店のランチメニューの紹介を書く場所を
編集します

1
<p>忙しい喧騒を離れ、午後はゆっくりとお茶を飲みたいときにおすすめです</p>

の部分には投稿本文を反映できるようにします

投稿内容を表示するには

1
<?php the_content(); ?>

とします

これで保存し、再度変更をプレビューすると
hello world の記事に内容が変わります

single3

今回の single.php のソースは以下のようになります

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php get_header(); ?>
 
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <h3>午後の緩やかな時間を本とともに</h3>
  <?php the_content(); ?>
  <img src="image/tee.jpg" alt="" width="300" height="300">
 
<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">
 
  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>
 
<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>○○のお店</td>
        <td>日曜日</td>
        <td>ランチ1000円</td>
        <td>東京都</td>
        <td>000-000-0000</td>
        <td>http://example.co.jp</td>
        <td>○○駅○版口から徒歩</td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  <?php endwhile;   else: ?>
    <p>記事はありません</p>
  <?php endif; ?>
 
 
<?php get_footer(); ?>

タイトルの変更

タイトルの変更

現在
タイトルが
jQuery Mobile
となっているので、これをサイト名に変更します

header.php の

1
<h1>jQuery Mobile</h1>

の部分を

1
<h1><?php bloginfo('name'); ?></h1>

にします

これでテンプレを使っているので
ダッシュボードでサイト名を変更しても自動更新してくれます

head

今回の変更で header.php のソースは以下のようになります

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php if(!is_home()){ wp_title('|',true,'right'); } bloginfo('name'); ?></title>
<link rel="stylesheet"type="text/css" href="<?php echo get_stylesheet_uri(); ?>" >
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
 <h1><?php bloginfo('name'); ?></h1>
</div>
<div role="main" class="ui-content">

sed コマンドの区切り文字について

1
cat memo2 | sed 's; ;</td><td>;g’

で意味がわからなかったけど
調べた結果、
sed コマンドでの区切り文字は
/ /でなくても良いということ

つまり、この場合; ; が区切り文字になっている

また、sed の -i オプションで
ファイルを上書きできるけど
これができるのは GNU sed 限定だった
ということがわかった

home.php の編集

home.php の編集

まず、home.php のソースを
header.php
footer.php から読み込むように書き換えます

まず一番上から
GridView のソースまえまでの

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<style>
  img.ic{
    width: 64px;
    height: 64px;
  }
</style>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
 <h1>jQuery Mobile</h1>
</div>
<div role="main" class="ui-content">

を削除します

代わりに

1
<?php get_header(); ?>

を書き込みます

次に、フッター部分もテンプレートに変えます

1
2
3
4
5
6
7
</div>
<div data-role="footer">
 フッター
</div>
</div>
</body>
</html>

を削除、代わりに

1
<?php get_footer(); ?>

を書き込みます

これで保存すると
フッター部分が変化しているのがわかります

homew

次に、画像が表示されていないので
画像を格納するフォルダを作ります

Ubuntu などの Linux なら

1
mkdir img

で作成できます

このフォルダへ画像をコピーします
Mac なら Cyberduck などでアップロードすることもできます

私の場合、すでに別のフォルダにあるものを
cp コマンドでコピーしました

1
2
cd img/
cp /var/www/html/wpt/icon/*.png .

. は現在のディレクトリを示します
*.png はすべての .png ファイルを意味します

そして、後は画像へのパスを変更します

1
<img src="icon/wa.png"

となっている部分を
wordpress のテンプレに変えます

テンプレまでのパスは
get_template_directory_uri()
で取得できるので、
“icon/wa.png”
の部分を書き換えます

ファイル名はそのままですが、格納しているフォルダも違うので
これもまとめて変えます

PHP では echo で結果を出力できるので
パスを

1
<?php echo get_template_directory_uri(); ?>

とすれば取得できます

しかし、今回は対象となるものが

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="ui-grid-b">
  <div class="ui-block-a">
 
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/wa.png" alt="" class="ic"><br>和食</a>
  </div>
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/chu.png" alt="" class="ic"><br>中華</a>
  </div>
  <div class="ui-block-c">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/yo.png" alt="" class="ic"><br>洋食</a>
  </div>
</div>
 
<!-- ２行目 -->
<div class="ui-grid-a">
  <div class="ui-block-a">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/cake.png" alt="" class="ic"><br>スイーツ</a>
  </div>
 
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/ramen.png" alt="" class="ic"><br>ラーメン</a>
  </div>
</div>
 
<!-- ３行目 -->
<div class="ui-grid-b">
  <div class="ui-block-a">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/camera.png" alt="" class="ic"><br>カメラ</a>
  </div>
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/map.png" alt="" class="ic"><br>地図</a>
  </div>
  <div class="ui-block-c">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/tweet.png" alt="" class="ic"><br>ツイート</a>
  </div>
</div>

となっていて全部手打ちでやるのは大変ですし
ミスタイプで処理するのも面倒です

今回はvim の置き換えを使います
このため、一度

1
cd -

で１つ前のディレクトリに移動します

次に

1
vim home.php

でファイルを開き

1
:%s/icon\//<?php echo get_template_directory_uri\(\); \?>\/img\//g

とすることで
該当する場所をすべて置き換えることができます

もし、失敗してしまっても

1
 

とすることで１つ前に戻すことができます

これで画像が表示されます

wpsh

が、大きすぎるので
CSSで設定をします

style.css を開き

1
2
3
4
img.ic{
  width: 64px;
  height: 64px;
}

を追記して保存します

これで程よい大きさになります

wph4
これで設定が反映されるはずですが
chrome を使っていると、反映されないときがあります

そんなときには
右上のメニューの履歴を開き、
閲覧履歴データの消去を行います

これで再度プレビューすると設定反映が確認できます

wph3

この修正方法については
【WordPress】CSS修正したけど反映されないときに確認すべきこと

を参考にさせていただきました

今回の編集したコードは home.php が

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php get_header(); ?>
 
<!-- １行目 -->
<div class="ui-grid-b">
  <div class="ui-block-a">
 
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/wa.png" alt="" class="ic"><br>和食</a>
  </div>
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/chu.png" alt="" class="ic"><br>中華</a>
  </div>
  <div class="ui-block-c">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/yo.png" alt="" class="ic"><br>洋食</a>
  </div>
</div>
 
<!-- ２行目 -->
<div class="ui-grid-a">
  <div class="ui-block-a">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/cake.png" alt="" class="ic"><br>スイーツ</a>
  </div>
 
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/ramen.png" alt="" class="ic"><br>ラーメン</a>
  </div>
</div>
 
<!-- ３行目 -->
<div class="ui-grid-b">
  <div class="ui-block-a">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/camera.png" alt="" class="ic"><br>カメラ</a>
  </div>
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/map.png" alt="" class="ic"><br>地図</a>
  </div>
  <div class="ui-block-c">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="<?php echo get_template_directory_uri(); ?>/img/tweet.png" alt="" class="ic"><br>ツイート</a>
  </div>
</div>
<?php get_footer(); ?>

style.css が

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
Theme Name: test
Theme URI: http://example.com/
Description: jquey theme test
Author: Gen snowpool
Author URI: http://example.com/
Version: 1.0
 
*/
img.ic{
  width: 64px;
  height: 64px;
}

となっています

次回からタイトルの変更、投稿テンプレの作成にとりかかります

home.php の作成

home.php の作成

wordpressでは表示するときに優先順位があり
それに基づきトップページが表示されます

基本的には
font-page > home > index
という順番になります

以前、作成した home.html をここへ
home.php としてコピーすると
リロードしたときに
index.php ではなく home.php が表示されます

これは、この優先順位が適用されるためです

なお、コピーしたときには画像のパスなどが
違っているので、アイコンが表示されません

homep

次回以降、home.php を改造していきます

現在の home.php のソースは以下のようになります

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<style>
  img.ic{
    width: 64px;
    height: 64px;
  }
</style>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
 <h1>jQuery Mobile</h1>
</div>
<div role="main" class="ui-content">
 
<!-- １行目 -->
<div class="ui-grid-b">
  <div class="ui-block-a">
 
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/wa.png" alt="" class="ic"><br>和食</a>
  </div>
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/chu.png" alt="" class="ic"><br>中華</a>
  </div>
  <div class="ui-block-c">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/yo.png" alt="" class="ic"><br>洋食</a>
  </div>
</div>
 
<!-- ２行目 -->
<div class="ui-grid-a">
  <div class="ui-block-a">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/cake.png" alt="" class="ic"><br>スイーツ</a>
  </div>
 
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/ramen.png" alt="" class="ic"><br>ラーメン</a>
  </div>
</div>
 
<!-- ３行目 -->
<div class="ui-grid-b">
  <div class="ui-block-a">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/camera.png" alt="" class="ic"><br>カメラ</a>
  </div>
  <div class="ui-block-b">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/map.png" alt="" class="ic"><br>地図</a>
  </div>
  <div class="ui-block-c">
    <a class="ui-btn ui-corner-all" href="sweet.html"><img src="icon/tweet.png" alt="" class="ic"><br>ツイート</a>
  </div>
</div>
 
</div>
<div data-role="footer">
 フッター
</div>
</div>
</body>
</html>

footer へ copyrith の表示

footer へ copyrith の表示

今回は footer.php を編集します

まず、copyright を入れます

Copyright 1998-2015
というように書いてもいいのですが
毎回更新するのは面倒なので
自動で行うようにします

1
2
3
4
5
6
7
<div data-role="footer">
 Copyright　2015 <?php if(date_i18n('Y')!=2015){
   echo '- ';
   echo date_i18n('Y');
 } ?><br>
 <?php bloginfo('name'); ?>
</div>

というようにします

これで　2015年以降なら自動で年数を変えてくれます

bloginfo(‘name’)
は wordpress の関数で
サイト名を表示します

if(date_i18n(‘Y’)!=2015)
で　2015年以外なら
という意味になります

そして重要なこととして

1
<?php wp_footer(); ?>

を

1
</body>

の前に追記します

これがないとプラグインがうまく動作しません

これで保存すれば、footer に
copy right が表示されます

footer

ここまでのソースが

1
2
3
4
5
6
7
8
9
10
11
12
</div>
<div data-role="footer">
 Copyright　2015 <?php if(date_i18n('Y')!=2015){
   echo '- ';
   echo date_i18n('Y');
 } ?><br>
 <?php bloginfo('name'); ?>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

となります

headerのテンプレ編集

header のテンプレ編集

前回、
header.php
footer.php
index.php
に分割したので、これを編集していきます

その前に
cp header.php header.php_bak
というようにバックアップをとっておきます

なお、テンプレ階層とファイルの意味については
WordPressのテンプレートファイルの種類とテンプレート階層

を参考にさせていただきました

jquery mobile を wordpress に組み込むにあたっては
WordPress のテーマを jQuery Mobile でスマートフォン対応に

を参考にさせていただきました

今回はカスタマイズしたCSSはないので
style.css を読み込み
次に
jquery mobile 関連のファイルを読み込んでいきます

title 要素の
「ｐｈｐ」jQuery Mobile[/php]
の下へ

1
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css">

で
wordpress の テーマで設定した
sytle.css を読み込みます

読み込んでいるのは
get_style_sheet_uri()
です

これにより、最低限必要な
style.css と index.php の紐付けがされて
テーマのデザインが反映されます

前回、ファイルをテンプレ部品に分割しましたが
wordpress の場合、通常 html で書いている部分を
テンプレタグや関数にすることで
出力する内容を変えています

ちなみに、テーマそのものとしてリリースするのなら
screenshot.png が必要です

これは GIMP などで作成します

このときに画像のサイズを 600×450 のサイズにすれば
Retinaディスプレイにも対応できます

まずは実験で作成します

GIMPを起動して
ファイル > 新しい画像
で
600ｘ450のサイズにしてOKをクリックします

scr

今回は適当に文字だけで作りました

scr2

保存するには
ファイル > 名前をつけてエクスポート
でできます

保存するときにファイル名を
screenshot.png にすることに注意

次に

1
</head>

の前に

1
<?php wp_head(); ?>

を挿入します

これを入れ忘れると、wordpress プラグインが動作しないという様々なエラーが起こります

ここまでできたら、少しずつテンプレートタグに変えていきます

まず、文字コードを wordpress で指定した文字コードになるようにします

メリットは、他の文字コードに変換するのが
ダッシュボードなどでできるようになることです

1
<meta charset="UTF-8" />

を

1
<meta charset="<?php bloginfo('charset'); ?>" />

へ変えます

bloginfo() は　() の中に指定する要素で
それに基づく情報を表示します
charset は文字コードです

次にタイトル部分を変更します
このときにトップページならサイトのタイトルを表示
それ以外なら
ページタイトルを表示というように変更します

1
<title>jQuery Mobile</title>

を

1
<title><?php if(!is_home()){ wp_title('|',true,'right'); } bloginfo('name'); ?></title>

へ変更します

bloginfo(‘name’) でサイトのタイトル

is_home() はメインページという意味です

is_mobile() というモバイルか判定する関数もあります

is_home() と is_mobile() の使い方に関しては

【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！

に詳しく載っています

途中ででてきた
wp_title() の構文は
wp_title(‘区切り文字’,’タイトル表示の判定’,’区切りを表示する位置’)
となっています

今回なら

1
wp_title('|',true,'right')

なので
| で区切って
タイトルは表示
right なので右側に表示
となります

次に body の class 設定を行います
これは

1
body

を

1
<body <?php body_class(); ?>>

にしておきます

これを行っておくことで、後々ページごとに
CSSの変更がしやすくなります

今回のコードは

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php if(!is_home()){ wp_title('|',true,'right'); } bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
 <h1>jQuery Mobile</h1>
</div>
<div role="main" class="ui-content">

となります