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;
}

となっています

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です