レスポンシブ化WordPressで固定ページ中心のサイトを設計する簡易版。リニューアルされました。このサイトの目的ホームページ・サイトのスタイルデザイン(大枠)に沿ったページを作成することだけを目的としている。コンテンツ(記事または内容)に記述する方法は触れていないので「WPの各種解説書」で学んで頂きたい。記事データは殆ど無いが、レスポンシブ化に対応するテスト記事として、「旅行プラン」ページに画像とテキストを入れている。テーマについて、WordPressにはインストール時の標準テーマ及び無料・有料の超多数のテーマが存在します。このサイトでは、オリジナルのテーマを作成する方法で説明しています。個人的な感想ですが、探す手間・カスタマイズの手間を考えると自分で作成した方が早いし、何と言ってもオリジナルという点は自己満足かも知れませんが。WordPressとテンプレートWordPressは、phpというWEBアプリ開発用の言語を利用しており、phpはHTML文書中に記述されたスクリプトを実行し、結果をHTMLデータとしてWebブラウザに出力する仕組みになっている。HTML文の1つのまとまった部分(例:ヘッダー)を1つのテンプレートとすることが出来、複数のテンプレートを構成して、1つのページ全体を構成することが出来る。部分的なまとまりを「パーツテンプレート」と呼び、ページ全部を表示させるものを「ページテンプレート」と呼ぶ。各テンプレートは、個々のファイルとして管理され、管理画面から編集してサイトを構築していく。ページテンプレートサイト構成図のデザインを見ると、ページテンプレートとして、3種となる。上記3つのページテンプレートに、ヘッダー部、グローバルメニュー、記事(コンテンツ)表示、フッター部を記述すれば各ページは完成する。一方で各ページの内容を見ると、同一部分があることが解る。以上のことから、ヘッダーとフッターは「パーツテンプレート」とすることが出来る。パーツテンプレートの良い点は、例えば、ヘッダー画像を変えたいとき、パーツテンプレートの1カ所を変えるだけで全てのページに反映される。旅行プランの「メニュー」は、WordPressの外観→メニューで自動生成されるパーツテンプレートで、このサイト作成では記述していない。自分でメニューを作成する場合は、1つのパーツテンプレートとなる。当サイトの作成手順のサイドメニューは、パーツテンプレートとして独自に作成している。サイト作成にあたって対象者WPの初心者で多少は理解できるが、固定ページ中心のサイトを作成するには、どう手を付けるか、と言う方。「WordPress3.X」以降のインストールを完了し、基本設定項目を入力して下さい。標準で用意された「固定ページ、投稿記事、カテゴリやリンク等」は削除して下さい。ヘッダー用画像2種(当サイトの画像をダウンロードし使用して結構です。この記事について、私も大いに共感できる。Editer」を利用することを薦めます。以降で作成するphpファイルはutf-8形式である必要があるため、TeraPad(フリーソフト)などのエディターをご利用下さい。中味は何も記述しない。作成者3)screenshot.jpg管理画面テーマに表示する画像(320X225px)を用意し、「original」フォルダに入れる。次に、2つのファイルindex.phpとstyle.cssファイルの属性(パーミション)をFTPソフトで書き込み可に設定する。管理画面の「外観」→「テーマ編集」でアップロードした「メインインデックスのテンプレート(index.php)」と「スタイルシート(style.css)」が表示され、編集出来ることを確認する。入力し、公開をクリック。「ホームページの表示」で「固定ページ」にチェック、「ホーム」を選択し、「変更を保存」ボタンをクリックする。「順序」は、固定ページ一覧の並び順、必須入力では無い。13この段階では「親」や「テンプレート」は、そのままで後のステップで設定します。各固定ページは、ページテンプレートが無いので表示出来ません。メニューの作成1.「functions.php」の作成メニューを簡単に作成するできる「外観→メニュー」を利用できる機能「functions.php」の設定を行う。1)「functions.php」ファイルの作成ファイル名は「functions.php」、中味は何も記述せず既定のフォルダにアップロード。説明1)右「メニューの名前」に「gloval_menu」と入力し、「メニューの作成」をクリック2)左メニュー一覧の上「すべて表示」をクリック。プラン」にチェックを入れ4)「メニューに追加」をクリック5)右メニューが追加される。メニューの順序は、ドラッグして上下を入れ替える6)右「メニューを保存」をクリック3.サイドメニュー(旅行プラン)の作成1)グローバルメニューと同じ要領で、「ヨーロッパ、「フランス」、「イタリア」作成する。「メニューの名前」は「plan_menu」にする。管理画面の「外観」→「テーマ編集」から「index.php」に以下のように記述します。ページを表示するための基本的なhtml構文です。このインデックステンプレートを元にパーツテンプレートを作成します。レスポンシブル対応用の表示領域の設定8記事のhtml編集時、サイト内リンクurlの入力文字数を減らす、WordPressをインストールしたフォルダを指定13サイトの内容を表示する開始タグ15-19ヘッダー画像をphpの条件分岐でトップ頁とその他ページを切り分けて読み込む。is_front_page())→トップページ21-25「ホーム」などメインメニューを表示。23行目がメニューを読み込むWPテンプレートで「2章」で作成した「gloval_menu」と記述。27-36タイトルと記事を表示する領域。管理画面の「外観」→「テーマ編集」→「スタイルシート」を開き、以下を記述します。アクセス」を表示するものですので、ご自身で独自のサイトにされる場合は、それに見合ったCSSを記述して下さい。スタイルシートへ追加」で記述しています。パーツテンプレートの作成1.ヘッダーテンプレートheader.phpの作成1)ファイル名「header.php」として、中味は何も記述せず既定のフォルダにアップロードする。2)インデックステンプレートの全ページ共通のヘッダー部分は、1から25行目迄なので、この部分をコピーし、管理画面の「外観」→「テーマ編集」でヘッダーheader.phpにコピーする。header.phpは以下のようになる。?></div></div>2.フッターテンプレートfooter.phpの作成1)ファイル名「footer.php」として、中味は何も記述せず既定のフォルダにアップロードする。2)インデックステンプレートの全ページ共通のフッター部分は、37行目以降(最後まで)なので、この部分をコピーし、管理画面の「外観」→「テーマ編集」でフッターfooter.phpにコピーする。footer.phpは以下のようになる。アクセス」ページ用のテンプレートで、ファイル名をpage.phpとすることで、固定ページのデフォルトテンプレートになる。管理画面の「外観」→「テーマ編集」→「page.php」に以下のように記述する。page_plan.php「旅行プラン」とリンク先の「ヨーロッパ」他2つのページ用のテンプレート。page_phpとの違いは、左にサイドメニューが入り、その右に横サイズが異なるコンテンツが表示される。page_planのネーミングは任意に決められる。管理画面の「外観」→「テーマ編集」→「page_plan.php」に以下のように記述する。page_plan」で、テンプレート名を決めている。5行とも省略出来ない。7-11コンテンツの前にページタイトルを表示。「page_plan.php」を使う「旅行プラン」、「ヨーロッパ」他2ページ用のスタイルシート。5章で作成したスタイルシート「style.css」に、以下のCSS文を追加記述する。変更が必要な固定ページは、「旅行プラン」とリンク先の「ヨーロッパ」、「フランス」、「イタリア」のページ。他のページは、page_phpというデフォルトテンプレートにしているので変更は不要。旅行プラン管理画面の「外観」→「固定ページ」→「固定ページ一覧」から「旅行プラン」をクリックし、以下のように変更する。「ページ属性」の最初の状態は、テンプレート欄が「デフォルトテンプレート」になっている。これを下矢印で「page_plan」にして「更新」。他2つ1)同様の方法で、「ヨーロッパ」、「フランス」、「イタリア」のページ属性を「page_plan」に変更する。2)「親」の部分を3つ共に、「旅行プラン」に変更する。以上でサイトの作成は、終了です。