はじめる!WordPress入門

メニューとページ情報タグ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイトのメニューとページに関する情報を表示するためのタグについて解説します。
講師:
09:25

字幕

このレッスンではサイトのメニューと ページに関する情報を表示するための タグについて学習します。 最初にメニューを表示するタグを紹介します。 wp nav menu というタグになります。 このタグは管理画面で作成した メニューを表示することができるタグです。 様々なパラメータが用意されていますが メニューのリンクテキストの前後に 表示するパラメータや 複数メニューを作成した場合に 表示したいメニューを指定する パラメータなどがよく使われます。 それでは実際に このテンプレートタグを使って メニューを表示してみましょう。 最初に管理画面に移動して 「外観」メニューから 「メニュー」画面を表示します。 メニューが作成されている事を 確認してください 複数メニューを作成している場合には このメニューの名前欄に入力した 名前を指定して 表示するメニューを決定します。 それではエディターに移動します。 最初に header.php と footer.php を編集します。 header.php には html タグや head タグを記述しておきます。 title タグの中には bloginfo ('name') と 記述しておけば、自動的にタイトル欄に サイト名が表示されます。 footer.php には body タグと html タグの 終了タグを記述しておきます。 home.php に記述している h1 タグと h2 タグを header.php に移動させます。 このようにしておけば header.php を読み込む 全てのテンプレートで自動的にサイト名と キャッチフレーズが表示されます。 その下に wp_nav_menu を 記述します。 書けたら保存してアップロードします。 サイトで実際の表示を確認してみましょう。 サイト名 キャッチフレーズの下に メニューが表示されました。 このメニューの部分の HTML を表示すると 自動的に li タグを使って メニューが表示されていることが分かります。 このように WordPress の テンプレートタグは 必要な HTML も 自動的に出力してくれます。 デザインを変更したい場合には 出力された HTML を確認して CSS クラスを付けていきます。 次に ページタイトルを表示する wp_title タグを紹介します。 wp_title タグは今表示されている 画面に最適なタイトルを 自動的に表示してくれる便利なタグです。 実際にエディターを使って 表示を確認してみましょう。 エディターに移動します。 title タグの中に wp_title を追加します。 書けたら保存をしてアップロードします。 次に index.php を開きます。 index.php にも header.php と footer.php を読み込むように 変更します。 書けたら保存をしてアップロードします。 テーマフォルダの中に category.php や single.php などがある場合には 削除して home.php と index.php のみにします。 そのようにすれば投稿ページや カテゴリページなど 全てのページが index.php を使って 表示されるようになる筈です。 では実際の表示を確認してみましょう。 サイトを表示して最初に「夢日記」という カテゴリをクリックします。 index.php の内容で ページが表示されました。 サイトのタイトル部分を見ると 自動的に「夢日記」というタイトルが 追加して表示されています。 他のカテゴリをクリックすれば タイトルも変更されます。 投稿ページをクリックすれば その投稿のタイトルが表示されます。 次にそのページに関する CSS クラスを出力してくれる body クラスタグを紹介します。 body クラスタグは 今表示しているページに 最適な CSS クラスを自動的に 表示してくれる便利なタグです。 実際に表示を確認してみましょう。 エディターを開きます。 header.php を開いて body タグの中に body_class タグを記述します。 書けたら保存してアップロードします。 このように php は HTML の タグの中に記述することもできます。 実際に画面で表示を確認してみましょう。 ページをリロードします。 ページのソースを表示すると body タグの中に自動的に クラスが出力されているのが分かります。 この画面は投稿画面なので 投稿画面であることを表す single や post の ID 投稿フォーマットなどが表示されています。 他のページを表示すれば 自動的に出力されるクラス名も変わります。 ページを CSS でデザインする時に とても便利なタグです。 最後に プラグインを使うときに必要な wp_head タグと wp_footer タグについて紹介します。 wp_head タグは HTML の head タグ内に記述します。 パラメーターは必要ありません。 wp_footer タグは HTML 内の body タグの終了直前に記述します。 このタグもパラメーターは必要ありません。 プラグインを使う場合には プラグインが HTML の head タグ内や footer の辺りに プラグインに必要な HTML を 出力する必要があります。 この2つのタグは その為のフックとなるタグです。 では実際に記述して 画面で確認してみましょう。 エディターを開きます。 header タグの終了の直前に wp_head タグを記述します。 footer.php の body タグの終了直前に wp_footer タグを記述します。 書けたら保存してアップロードします。 画面を開いて表示を確認します。 リロードします。 wp_head と wp_footer タグを 記述したことによって WordPress の管理画面の メニューバーが表示されるようになりました。 この2つのタグはプラグインを使用する際は 必ず必要になるタグですので 必ず記述するようにしましょう。 このレッスンではサイトのメニューと ページに関する情報を表示するための タグについて学習しました。

はじめる!WordPress入門

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

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

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

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

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