WordPress　固定ページの設計　詳細版　スマホ対応

（１）ヘッダー画像の準備

トップページ画像

トップ以外の画像

画像のサイズは、このサイトデザインで作成される場合、幅：980px以上で高さは自由です。画像ファイルは、ＷＰインストールフォルダに入れますが、以下３つの方法の中から選択して下さい。

Ａ．ＦＴＰソフトでアップロード

フリーソフトとして、著名なＦＦＦＴＰがあります。

Ｂ．ＷＰのメディアライブラリー

外観 → メディアライブラリー → 新規追加　で表示された領域に、画像ファイルをドラッグするか、ローカルＰＣの画像のパスを指定します。

Ｃ．レンタルサーバーのファイルマネージャを利用する。

ヘッダー画像を表示させる方法は、後述します。ここでは、画像をサーバーにアップしておきます。

（２）トップページ用固定ページ作成

管理画面 → 固定ページ → 新規追加 の下記画面にトップページの初期画面となるページタイトルを入力し、編集欄にひとまずホームと記述（記述無しでも可）。

左の同一画面右側の固定ページの属性の順序欄に１を入力し、下書きとして保存又は公開をクリックします。

Page Top ↑

（３）ホームの設定

管理画面 → 設定 → フロントページの設定 → 固定ページ にチェック、フロントページのホームを選択し、下段の変更を保存をクリック。

変更を保存後、固定ページまたは固定ページ一覧でホームがフロントページとして表示されれば、サイトのトップページが中身はありませんが、ページとしては出来ました。

ホームをクリックし編集画面が表示された後、変更をプレビューをクリックすると、ただホームの文字だけのページが表示されれば、ＯＫです。

Page Top ↑

（４）インデックステンプレートの作成

管理画面 → 外観 → テーマの編集 → メインインデックステンプレートをクリックし、編集画面に以下のhtmlを記述する。

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>">
<meta name="viewport" content="width=device-width,maximum-scale=1">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>

<div id="container">
<div id="site_title">
<p class="top_line">
<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="7" fill="#00f" />
</svg>
</p>
<span>WordPress　固定ページの設計・スマホ対応</span>
</div>

<?php if(is_home() || is_front_page()): ?>
<img id="header_img" src="<?php bloginfo('template_url'); ?>/image/header.jpg" title="*****" alt="*****">
<?php else: ?>
<img src="<?php bloginfo('template_url'); ?>/image/header_sub.jpg" alt="*****">
<?php endif; ?>

<div id="nav">
<?php wp_nav_menu(array('menu' => 'global_menu')); ?>
</div>

<div id="pan_list">
<a href="<?php echo get_option('home'); ?>">ホーム</a>
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a>
<?php } ?>
<?php the_title(''); ?>
</div>

<div id="content">
<?php if(have_posts()):while(have_posts()):the_post(); ?>
<div class="post">
<?php the_content(); ?>
</div>
<?php endwhile;endif; ?>
</div>

<footer>
Copyright © 固定ページ中心の設計/スマホ対応　For<a href="mailto:<?php bloginfo('admin_email'); ?>"> ********</a>, All Rights reseved.
</footer>
</div> 
</body>
</html>

行番
説　明

1～2
html5の宣言

5
viewportは表示領域のことで、機種のサイズを取得して、メディアクエリーとの組合せでスマホやタブレットに対応した表示が可能に。

12以降
ホームページの内容を表示する部分

14～18
ヘッダー画像の上に表示される部分。svgタグは、css3の描画

22～26
ヘッダー画像表示。トップページとその他ページをphpの条件分岐で画像が変わるように表示。

28～30
ヘッダーの下に表示するメインメニュー。テーマの為の関数funtions.phpと連動。

32～39
表示中のページがサイトのどの位置かを示すパンくずリスト。

41～47
固定ページの編集画面に入力された記事を表示。41行目のid名は任意。

49～51
フッター部。

※　２３，２５行目の画像のＵＲＬは、画像をimageフォルダに入れたた場合、表示のようになります。

（１）テーマヘッダー（header.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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>">
<meta name="viewport" content="width=device-width,maximum-scale=1">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>

<div id="container">
<div id="site_title">
<p class="top_line">
<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="7" fill="#00f" />
</svg>
</p>
<span>WordPress　固定ページの設計・スマホ対応</span>
</div>

<?php if(is_home() || is_front_page()): ?>
<img id="header_img" src="<?php bloginfo('template_url'); ?>/image/header.jpg" title="*****" alt="*****">
<?php else: ?>
<img src="<?php bloginfo('template_url'); ?>/image/header_sub.jpg" alt="*****">
<?php endif; ?>

<div id="nav">
<?php wp_nav_menu(array('menu' => 'global_menu')); ?>
</div>

<div id="pan_list">
<a href="<?php echo get_option('home'); ?>">ホーム</a>
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a>
<?php } ?>
<?php the_title(''); ?>
</div>

（２）テーマフッター（footer.php）の作成

管理画面 → 外観 → テーマの編集 → テーマフッターをクリックし、編集画面に（４）インデックステンプレート４８行目から５４行目をコピーして貼り付け、下段のファイルを更新をクリック。

1
2
3
4
5
6
7

（１）テーマのための関数（functions.php）

管理画面 → 外観 → テーマの編集 → テーマの為の関数をクリックし、編集画面に以下のphp文を記述し、下段のファイルを更新をクリック。

1
2
3
4
5
6

<?php
//カスタムメニュー
register_nav_menus(array('global_menu' => 'ナビゲーションバー'));
add_filter( 'show_admin_bar', '__return_false' );
register_sidebar();
?>

３～４行目：外観 → メニューで設定したメニューをリスト形式で出力する関数です。

５行目：外観 → ウィジェットを呼び出す

（２）旅行プランのサイドメニュー（menu_plan.php）作成

管理画面 → 外観 → テーマの編集 → menu_plan 固定ページテンプレートをクリックし、５行目までは（４）で出来ているので、６行目以降を編集画面に以下のphp文を記述し、下段のファイルを更新をクリック。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
/*
Template Name: menu_plan
*/
?>
<div id="sumaho_menu">
<div id="sumaho_menu_open" onclick="display_yes()">Menu Open</div>
<div id="sumaho_menu_close" onclick="display_close()">Menu close</div>
</div>
<div id="side_menu_box">
<ul class="side_menu_all">
<li class="side_menu_shosai"><a href="<?php echo get_permalink(0); ?>">旅行プラン</a></li>
<li class="side_menu_shosai"><a href="<?php echo get_permalink(0); ?>">フランス</a></li>
<li class="side_menu_shosai"><a href="<?php echo get_permalink(0); ?>">イギリス</a></li>
<li class="side_menu_shosai"><a href="<?php echo get_permalink(0); ?>">イタリア</a></li>
</ul>
</div>

※　ＷＰでは外観のメニューで作成出来ますが、この例ではパーツテンプレートとして作成しています。

行番
説　明

6～9
パソコン以外の画面は小さいので、サイドメニューを一時的に非表示にしたり、再表示のコントロールボタン

7
Menu Openをクリックした時、サイドメニューを上部に表示（JavaScript）

8
Menu Closeをクリックした時、サイドメニューを非表示（JavaScript

12～15
permalink()の括弧内の数値は、そのページを表示する｢?page_id=00｣の数値。