はじめる!WordPress入門

固定ページの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
固定ページを表示するための固定ページテンプレートを作成します。
講師:
07:09

字幕

このレッスンでは、固定ページの 作成方法について学習します。 エディタを開いて、固定ページの テンプレートを作成しましょう。 エディタに移動します。 固定ページのテンプレートは、 page.php です。 page.php を作成して ファイルを編集していきます。 get_header から書いていきます。 固定ページも、メッセージループを使って ページの情報を取得することができます。 投稿ページを表示するときと まったく同じように、 メッセージループを そのまま使うことができます。 固定ページでも、 get_template_part を使って 本文部分の表示を 外部ファイル化しておきましょう。 ここではネームとスラッグを 使いたいと思います。 メッセージループを閉じます。 最後に get_sidebar と get_footer を 記述します。 書けたら保存します。 それでは外部ファイルを作成しましょう。 固定ページ用の外部ファイルは、 post という名前の page というスラッグのファイルになります。 名前とスラッグをハイフンで繋ぎます。 post-page.php を作成したら、 ファイルを開いて編集します。 post.php を作ったときと同じように、 固定ページの本文を表示する テンプレートタグを記述していきます。 固定ページと投稿ページでは、 ほとんど同じタグを使うことができます。 タイトルは the_title で 表示することができます。 固定ページでは、ページの左部分に アイキャッチ画像を 表示するようにしてみましょう。 the_post_thumbnail タグを使います。 表示するサイズは full を指定すれば、 アップした画像のそのままのサイズを 表示することができます。 body クラスの中に本文を表示します。 本文を表示するのは the_content タグです。 最後に投稿日を表示するようにしましょう。 the_date タグを使います。 書けたら保存をしてアップします。 それでは画面で表示してみましょう。 固定ページを開きます。 画面が表示されました。 アイキャッチ画像も ちゃんと表示されています。 それでは CSS を編集して、 固定ページを完成させましょう。 エディタに移動します。 style.css を開いて、一番最後の行に CSS を追加していきます。 固定ページの post クラスは、 page というクラスを出力しますので、 この page というクラスを足掛かりにして CSS を記述していきます。 固定ページでは、 日付は薄いグレーにして右寄せにします。 タイトルは h2 タグで表示されます。 本文は body クラスの中に 表示されます。 固定ページでも、本文欄に記述した 一行空きのテキストは、 自動的に p タグを使って 表示されますので、 p タグに行間を指定しておきます。 本文欄に中サイズの画像が入った場合の 表記も追加しておきます。 記述ができたら保存をして、 サイトでの表示を確認してみましょう。 リロードします。 スタイルシートが適用され、 デザインが完成しました。 このレッスンでは、 固定ページの作成方法について学習しました。

はじめる!WordPress入門

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

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

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

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

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