はじめる!WordPress入門

サイトのフレームの用意

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
個別のページの作成に入る前に、共通パーツ部分を作って、サイト全体のレイアウト構造を作成します。
講師:
12:44

字幕

このレッスンでは WordPress で サイトのフレームを作成する 方法について学習します。 フレームとはサイトの基本的な レイアウト構造のことです。 WordPress で個別のページの 作成に入っていく前に まずは全体のレイアウトの基本となる ページのフレームを作成していきましょう。 フレームの作成に入っていく前に 幾つか投稿や固定ページを用意しておきます。 カテゴリーやタグも作成しておきます。 それではフレームの 作成に入ります。 エディターに移動します。 初めにヘッダーやフッターを 用意します。 最初に header.php を 作成します。 ファイルを作成したら 開いて編集します。 通常の HTML を作成するのと 同じように ヘッダー情報を書いていきます。 HTML タグに必要な言語情報は language_attribute という テンプレートタグから 取得することができます。 head タグを書いていきます。 言語コードは bloginfo の charset パラメータ―から 取得することができます。 他にも必要なメタ情報などがあれば 通常の HTML 制作と同じように 記述していきます。 title タグでは wp_title タグを使って そのページのタイトルを 表示するようにします。 続けて bloginfo に name パラメーターを与えて サイト名を表示します。 is_home を使って 表示しているページが トップページかどうかを判断して トップページであれば サイトのキャッチフレーズを 表示するようにしてみましょう。 サイトのキャッチフレーズは bloginfo に description というパラメーターを 与えれば取得できます。 これで title タグができました。 次に style.css を読み込みます。 スタイルシートの URL は bloginfo に stylesheet_url という パラメーターを設定すれば 取得することができます。 style.css 以外のCSS を 個別に読み込みたい場合には ここに続けて通常の HTML 制作と 同じように link タグを 追加していきましょう。 head タグの最後には wp_head タグを入れます。 wp_head タグは プラグインなどで使用するタグなので 必ず入れるように しておきましょう。 続けて body タグも記述していきます。 body タグには body_class という テンプレートタグを追加しておけば 自動的に、今表示しているページに 最適なクラス名を入れてくれます。 続けてサイトのフレームとなる ID を付けていきます。 ページの全体を screen という ID で 囲っておきます。 サイトのヘッダー部分には header という ID を付けておきます。 ヘッダーには h1 タグで サイトの名前を表示しましょう。 また サイトのトップページを表示するための リンクを入れておきます。 サイトのトップページを 表示するためのリンクは home_url で取得できます。 home_url は、それだけでは 画面に何も出力しないので echo 関数を使って表示するようにします。 サイト名は bloginfo('name')で 表示することができます。 ヘッダーには他に、メニュー機能を使った ナビゲーションを表示します。 メニュー機能のメニューを表示するためには wp_nav_menu を使用します。 これでヘッダーの記述が終わりました。 続けてメインのコンテンツとなる部分の ID を振っていきます。 コンテンツ部分の ID は そのまま contents としておきます。 これで header.php の 記述が終わりました。 どのページを表示する場合にも このヘッダー部分が 共通で読み込まれて表示されます。 保存をしてアップロードしておきます。 次にフッターを用意しましょう。 footer.php を作成します。 同じように開いて編集します。 フッターには先程 header.php で作った contents という ID の付けた div タグを閉じる所から スタートします。 フッターは ID を footer とします。 フッターには copyright 表記だけを 行っておきます。 copyright で表記する年数は php の date という関数を使えば 自動的に、今表示している年を 表示するようになります。 copyright を記述していきます。 フッターはこれだけです。 最後にヘッダーで記述した screen という ID の div を閉じて wp_footer という テンプレートタグを実行します。 wp_footer は プラグインなどが使用するためのタグですので 必ず記述しておくようにします。 body と HTML タグを閉じて footer.php の完成です。 保存をしてサーバーにアップロードをします。 次にサイトの横ナビゲーションとなる sidebar.php 作成します。 ファイルを作成したら 開いて編集します。 サイドバーの ID は side とします。 ダイナミックウィジェットはリスト形式で 表示されるので 最初に ul タグを書いておきます。 ダイナミックウィジェットを使用するための ダイナミックサイドバーを記述します。 サイドバーに必要な記述は これだけです。 保存をしてアップロードしておきます。 最後に index.php を編集して 今までに作ったパーツを繋げてみましょう。 index.php を編集します。 ヘッダーは get_header で取得します。 get_header の最後には contents という ID の付いた div タグがありますので contents という ID の中に ページのメインコンテンツを表示する main という ID の div を作成します。 まだ中身は空にしておきます。 続けてコンテンツの中に side という ID を付けた サイドバーを読み込みます。 サイドバーは get_sidebar で 読み込むことができます。 最後に get_footer を使って footer.php を読み込むようにします。 これで完成です。 保存をして FTP でアップロードします。 それでは実際に サイトで表示を確認してみましょう。 サイトに移動します。 まだ CSS が用意できていないので デザインはめちゃくちゃです。 ページのソースを確認してみましょう。 ソースを見ると パーツが連結され きちんとした HTML が 出力されていることがわかります。 wp_head や wp_footer を書いた場所に 自動的にソースコードが 追加されているのがわかります。 サイトのフレームを確認してみましょう。 body タグには body クラスで指定した そのページに合った CSS が 自動的に出力されています。 screen という ID の中に ヘッダーやコンテンツ フッターがあることがわかります。 また、コンテンツの中には main という ID の div と side という ID の div が 追加されているのがわかります。 そして最後には footer という ID のdiv が追加され スクリーン全体を閉じています。 これでサイト全体の骨格となる フレームが用意できましたので CSS を使って、ページの レイアウトを作成していくことができます。 このレッスンではサイトの フレームの作成について学習しました。

はじめる!WordPress入門

ブログ作成ツールやCMSとしてもっともポピュラーなWordPressを使えば、ブログだけでなく一般的なサイトでも簡単に無料で作ることができます。このコースでは初めての方を対象にWordPressをインストールから実際のサイト構築まで丁寧に解説していきます。

7時間01分 (89 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 3,990
発売日:2014年01月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。