WordPressで固定ページ中心のサイトを設計する簡易版。
リニューアルされました。
（WordPressインストールから記述した筆者サイト → 固定ページ中心の設計・詳細版）
序章１ このサイトの目的
ホームページ・サイトのスタイルデザイン（大枠）に沿ったページを作成することだけを目的としている。コンテンツ（記事または内容）に記述する方法は触れていないので｢ＷＰの各種解説書｣で学んで頂きたい。
記事データは殆ど無いが、レスポンシブ化に対応するテスト記事として、「旅行プラン」ページに画像とテキストを入れている。
テーマについて、WordPressにはインストール時の標準テーマ及び無料・有料の超多数のテーマが存在します。このサイトでは、オリジナルのテーマを作成する方法で説明しています。個人的な感想ですが、探す手間・カスタマイズの手間を考えると自分で作成した方が早いし、何と言ってもオリジナルという点は自己満足かも知れませんが。
是非挑戦してみて下さい、 とても簡単に作成出来ます。
序章２ WordPressとテンプレート
WordPressは、phpというWEBアプリ開発用の言語を利用しており、phpはHTML文書中に記述されたスクリプトを実行し、結果をHTMLデータとしてWebブラウザに出力する仕組みになっている。
HTML文の1つのまとまった部分（例：ヘッダー）を1つのテンプレートとすることが出来、複数のテンプレートを構成して、1つのページ全体を構成することが出来る。
部分的なまとまりを｢パーツテンプレート｣と呼び、ページ全部を表示させるものを｢ページテンプレート｣と呼ぶ。各テンプレートは、個々のファイルとして管理され、管理画面から編集してサイトを構築していく。
このサンプルサイトのテンプレートで説明すると
序章３ 当サイトのテンプレート
☆ ページテンプレート
サイト構成図のデザインを見ると、ページテンプレートとして、3種となる。
- １）
- 各ページテンプレートの元：index.php
テンプレートに分割する原点となるｈｔｍｌソース
- ２）
- 「ホーム」、｢会社案内｣、｢アクセス｣：page.php
固定ページテンプレート ｢page.php｣ とすると デフォルトテンプレート
- ３）
- ｢旅行プラン｣、｢ヨーロッパ｣ほか：page_plan.php
固定ページテンプレート ファイル名は、任意の名前
☆ パーツテンプレートの設計
上記3つのページテンプレートに、ヘッダー部、グローバルメニュー、記事（コンテンツ）表示、フッター部を記述すれば各ページは完成する。一方で各ページの内容を見ると、同一部分があることが解る。
- １）
- 「header.php」：ヘッダー画像とグローバルメニュー
トップページとその他ページで画像は異なるものの他は全頁共通
- ２）
- 「footer.php」：フッター
フッターは全頁共通
以上のことから、ヘッダーとフッターは「パーツテンプレート」とすることが出来る。パーツテンプレートの良い点は、例えば、ヘッダー画像を変えたいとき、パーツテンプレートの１カ所を変えるだけで全てのページに反映される。
旅行プランの「メニュー」は、WordPressの外観→メニューで自動生成されるパーツテンプレートで、このサイト作成では記述していない。自分でメニューを作成する場合は、１つのパーツテンプレートとなる。当サイトの作成手順のサイドメニューは、パーツテンプレートとして独自に作成している。
序章４ サイト作成にあたって
対象者
- WPの初心者で多少は理解できるが、固定ページ中心のサイトを作成するには、どう手を付けるか、と言う方。（これから記述する手順は、「WordPressレッスンブック3.x対応」を一通り修了し、同書をお持ちの方）
- HTML及びCSSについては、それなりの知識のある方
事前準備
- ☆ 「WordPress3.X」以降のインストールを完了し、基本設定項目を入力して下さい。
- ☆ 標準で用意された「固定ページ、投稿記事、カテゴリやリンク等」は削除して下さい。
- ☆ ヘッダー用画像２種（当サイトの画像をダウンロードし使用して結構です。）
-
- ・ トップ頁用ヘッダー画像：横サイズ→980px ファイル名：header.jpg
- ・ その他頁用ヘッダー画像：横サイズ→980px ファイル名：header_sub.jpg
WP V4.9以降の注意点
テーマの編集画面でエラーになる問題、この対応策が記述されたサイトの紹介
NOMADIC WOOD この記事について、私も大いに共感できる。
尚、どうにもテンプレート編集が出来ない場合、プラグインの「WP Editer」を利用することを薦めます。
１章 Theme（テーマ）の作成
以降で作成するphpファイルはutf-8形式である必要があるため、TeraPad（フリーソフト）などのエディターをご利用下さい。
１．サイト用フォルダの作成
左図のフォルダをローカルのパソコンに作成し、準備したヘッダー画像の２つのファイルをimagesフォルダに入れる
２．originalフォルダに以下に3つのファイルを作成
３．ローカルのoriginalフォルダをアップロード
WordPressをインストールしたフォルダのwp-content/themes
この後アップロードするファイルは、全てwp-content/themes/original → 以下「既定のフォルダ」と呼称
次に、２つのファイルindex.phpとstyle.cssファイルの属性（パーミション）をFTPソフトで書き込み可に設定する。
４．テーマを選択
管理画面の「外観」→「テーマ」で「利用可能なテーマ」から「ORIGINAL」を選択する
５．テーマ作成の確認
管理画面の「外観」→「テーマ編集」でアップロードした「メインインデックスのテンプレート（index.php）」と「スタイルシート（style.css）」が表示され、編集出来ることを確認する。
２章 固定ページの作成
１．サイトの入り口「ホーム」作成
管理画面の「固定ページ」→「新規追加」をクリック
１）設定項目の入力
(1)タイトル欄に「ホーム」と入力し、編集画面に「ホーム（トップページのコンテンツが入る」（任意のテキスト）と入力
(2)「順序」に、 1 を入力し、公開をクリック。
(3)トップページの設定
「管理画面」→｢設定｣→「表示設定」画面の「ホームページの表示」で「固定ページ」にチェック、「ホーム」を選択し、「変更を保存」ボタンをクリックする。
２．残りの全固定ページを作成
１）「会社案内」→順序 2 「アクセス」→順序 3、「旅行プラン」→ 4
２）「ヨーロッパ」→順序 11、「フランス」→順序 12、「イタリア」→順序 13
この段階では「親」や「テンプレート」は、そのままで後のステップで設定します。
各固定ページは、ページテンプレートが無いので表示出来ません。
３章 メニューの作成
１．「functions.php」の作成
メニューを簡単に作成するできる「外観→メニュー」を利用できる機能「functions.php」の設定を行う。
１）「functions.php」ファイルの作成
ファイル名は「functions.php」、中味は何も記述せず既定のフォルダにアップロード。
２）「functions.php」の編集
管理画面の「外観」→「テーマ編集」から「テーマのための関数（functions.php）」に以下のように記述
|
|
<?php //カスタムメニュー register_nav_menus(array('navbar' => 'ナビゲーションバー')); ?> |
３行目は、WordPressが用意しているメニューを呼び出すテンプレート
２．グローバルメニューの作成
管理画面→「外観」→「メニュー」より作成（下図）
上図は、以下の２）～５）まで終了した状態
- １）
- 右「メニューの名前」に「gloval_menu」と入力し、｢メニューの作成｣をクリック
- ２）
- 左メニュー一覧の上「すべて表示」をクリック。「ホーム」も表示される
- ３）
- 「ホーム」、「アクセス」、「会社案内」、「旅行プラン」にチェックを入れ
- ５）
- 右メニューが追加される。メニューの順序は、ドラッグして上下を入れ替える
３．サイドメニュー（旅行プラン）の作成
１)グローバルメニューと同じ要領で、「ヨーロッパ、「フランス」、「イタリア」作成する。
但し、「メニューの名前」は「plan_menu」にする。
４章 インデックステンプレートの作成
管理画面の「外観」→「テーマ編集」から「index.php」に以下のように記述します。ページを表示するための基本的な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 |
<!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"> <base href="https://-------/"> <?php wp_head(); ?> </head> <body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <?php if(is_home() || is_front_page()): ?> <img src="<?php bloginfo('template_url'); ?>/images/header.jpg" alt="*"> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/header_sub.jpg" alt="*"> <?php endif; ?> <!-- ナビゲーションバー --> <div id="nav"> <div style="text-align:center;"> <?php wp_nav_menu(array('menu' => 'gloval_menu')); ?> </div> </div> <!-- コンテンツ --> <div id="content"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="title"> <p><?php the_title(); ?></p> </div> <div class="post"> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> <!-- フッター --> <div id="foot"> Copyright © サイトタイトル名 For -----, All Rights reseved. </div> </div> <!-- container end --> </body> </html> |
- 5
- viewport レスポンシブル対応用の表示領域の設定
- 8
- 記事のhtml編集時、サイト内リンクurlの入力文字数を減らす、WordPressをインストールしたフォルダを指定
- 15-19
- ヘッダー画像をphpの条件分岐でトップ頁とその他ページを切り分けて読み込む。if(is_home() || is_front_page())→トップページ
- 21-25
- 「ホーム」などメインメニューを表示。23行目がメニューを読み込むＷＰテンプレートで「２章」で作成した「gloval_menu」と記述。
- 27-36
- タイトルと記事を表示する領域。30行目：タイトル、33行目：記事、それぞれを読み込むＷＰテンプレート
５章 スタイルシートの作成
管理画面の「外観」→「テーマ編集」→「スタイルシート」を開き、以下を記述します。ＣＳＳは、当サンプルサイトの「ホーム」・「会社案内」・「アクセス」を表示するものですので、ご自身で独自のサイトにされる場合は、それに見合ったＣＳＳを記述して下さい。
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 |
html,body{ margin:0; padding:0;} body{background-color: #999; width:100%;} #container {margin: 0px auto; max-width:980px; /* For Responsize Web */ padding: 5px 5px 5px 5px; background-color: #ffffff;} img {width:100%; /* For Responsize Web */ max-width: 100%; /* For Responsize Web */ display:block;} ul, li {list-style-type: none; margin: 0; padding: 0;} p {margin:0px; padding:0px;} input {outline: none;} input {border: none;} .font_bold {font-weight:bold;} .indent_1 {text-indent:1em;} .link_btn {width:180px; text-align:center; font-size:0.875em; border:solid 1px #000; background-color:#cfc;} .link_btn a {display:block;} .step_no {background-color:#cff; margin:0px 5px;} a:link {text-decoration: none;} a:hover {background-color:#6f6;} #nav {width:100%; text-align:center; margin-top: 10px; } #nav li {display:inline-block; border-right: solid 1px #000000; text-align:center;} #nav li:first-child{ border-left: solid 1px #000000;} #nav li a {display:block;} #title {background-color: #a3d2f2; text-align: center; height: 25px; margin:5px 0px; } #content { max-width: 980px; /* For Responsize Web */ margin-top: 5px; margin: 0px auto;} #content .post {border: solid 1px #0c8bcd; margin-top: 10px; padding-left:5px;} #foot {text-align: center; font-size: 0.875em; background-color: #a3d2f2; margin-top: 23px; } |
デザインの異なる旅行プラン｢page_plan.php｣用のスタイルシートは、後述の｢８章 スタイルシートへ追加｣で記述しています。
６章 パーツテンプレートの作成
１．ヘッダーテンプレートheader.phpの作成
１）ファイル名「header.php」として、中味は何も記述せず既定のフォルダにアップロードする。
２）インデックステンプレートの全ページ共通のヘッダー部分は、１から２５行目迄なので、この部分をコピーし、管理画面の「外観」→「テーマ編集」でヘッダーheader.phpにコピーする。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 |
<!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"> <base href="https://-------/"> <?php wp_head(); ?> </head> <body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <?php if(is_home() || is_front_page()): ?> <img src="<?php bloginfo('template_url'); ?>/images/header.jpg" alt="*"> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/header_sub.jpg" alt="*"> <?php endif; ?> <!-- ナビゲーションバー --> <div id="nav"> <div style="text-align:center;"> <?php wp_nav_menu(array('menu' => 'gloval_menu')); ?> </div> </div> |
２．フッターテンプレートfooter.phpの作成
１）ファイル名「footer.php」として、中味は何も記述せず既定のフォルダにアップロードする。
２）インデックステンプレートの全ページ共通のフッター部分は、３７行目以降（最後まで）なので、この部分をコピーし、管理画面の「外観」→「テーマ編集」でフッターfooter.phpにコピーする。footer.phpは以下のようになる。
|
|
<!-- フッター --> <div id="foot"> Copyright © 固定ページ中心の設計 For K.Nagai, All Rights reseved. </div> </div> <!-- コンテナ ＥＮＤ --> </body> </html> |
７章 固定ページテンプレートの作成
１．固定ページテンプレート page.php
「ホーム」・「会社案内」・「アクセス」ページ用のテンプレートで、ファイル名をpage.phpとすることで、固定ページのデフォルトテンプレートになる。管理画面の「外観」→「テーマ編集」→「page.php」に以下のように記述する。
|
|
<?php get_header(); ?> <div id="content"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="title"> <p><?php the_title(); ?></p> </div> <div class="post"> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> <?php get_footer(); ?> |
２．固定ページテンプレート page_plan.php
「旅行プラン」とリンク先の「ヨーロッパ」他２つのページ用のテンプレート。page_phpとの違いは、左にサイドメニューが入り、その右に横サイズが異なるコンテンツが表示される。
page_planのネーミングは任意に決められる。管理画面の「外観」→「テーマ編集」→「page_plan.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 |
<?php /* Template Name: page_plan */ ?> <?php get_header(); ?> <div id="plan_title"> <!-- ページタイトル --> <?php if(have_posts()): while(have_posts()): the_post(); ?> <p><?php the_title(); ?></p> <?php endwhile; endif; ?> </div> <div id="box"> <!-- サイドメニューとコンテンツのまとめ用ボックス --> <div id="plan_menu"> <!-- サイドメニュー --> <?php wp_nav_menu(array('menu' => 'plan_menu')); ?> </div> <div id="plan_content"> <!-- コンテンツ --> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="post"> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> <div style="clear: both;"></div> </div> <!-- まとめボックス ＥＮＤ --> <?php get_footer(); ?> |
- 1-5
- 必須の固定ページテンプレート定義：「Template Name: page_plan」で、テンプレート名を決めている。５行とも省略出来ない。
- 23
- スタイルシートで左右にサイドメニューとコンテンツを配置するので、この後のページ表示のため配置を解除
｢page_plan.php｣を使う｢旅行プラン｣、｢ヨーロッパ｣他2ページ用のスタイルシート。５章で作成したスタイルシート｢style.css｣に、以下のCSS文を追加記述する。
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 |
/* ---------- page_plan用--------- */ #box { max-width:980px; /* For Responsize Web */ margin-top:10px; } #plan_menu {border: solid 1px #0c8bcd; max-width:120px; /* For Responsize Web */ width:14%; /* For Responsize Web */ font-size:0.875em; float: left; } #plan_content { width:83%; /* For Responsize Web */ margin-left:15px; margin-bottom: 10px; float: left; } #plan_content .post {border: solid 1px #0c8bcd; } #plan_menu ul {margin: 0px; padding: 5px; text-align:center; } #plan_menu li {line-height: 1.5em; } #plan_menu ul a {display:block;} #plan_menu ul a:hover {background-color:#6f6;} .photo {padding:0px 10px; max-width:45%; /* For Responsize Web */ float:left;} .comment {padding-right: 10px;} |
９章 使用ページテンプレートの変更
変更が必要な固定ページは、「旅行プラン」とリンク先の「ヨーロッパ」、「フランス」、「イタリア」のページ。他のページは、page_phpというデフォルトテンプレートにしているので変更は不要。
旅行プラン
管理画面の「外観」→「固定ページ」→「固定ページ一覧」から「旅行プラン」をクリックし、以下のように変更する。
「ページ属性」の最初の状態は、テンプレート欄が「デフォルトテンプレート」になっている。これを下矢印で「page_plan」にして「更新」。
ヨーロッパ 他２つ
１）同様の方法で、「ヨーロッパ」、「フランス」、「イタリア」のページ属性を「page_plan」に変更する。
２）「親」の部分を３つ共に、「旅行プラン」に変更する。
３）順序は、２章の設定で11～13としています、このままでＯＫですが、気になる方は、1から3 にして下さい。
以上でサイトの作成は、終了です。お疲れさまでした。
