ステップアップ!WordPress中級

固定ページを使って重要なお知らせを表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
簡単にサイトに重要なお知らせを掲載する方法について解説します。
講師:
12:06

字幕

このレッスンでは 固定ページを使って サイトの重要なお知らせを 表示する方法について学習します 投稿ページの ページの先頭に 固定表示する― という機能を使えば 重要なお知らせを 一覧の常に一番上に 表示しておくことが出来るんですが 例えば 投稿ページを そういったお知らせ以外に 使用している場合とかには 重要なお知らせを 投稿ページには 入れておくことができません また 投稿の 一覧が表示されるところだけではなくて 色んなページに そのお知らせを常に表示しておきたい という場合もあると思います そういった場合に使えるのが 固定ページを テンプレートとして使って 重要なお知らせを 表示する方法です それでは 固定ページを新規作成します 固定ページのタイトルは なんでも構いません 自分のわかりやすい名前を 付けておいてください そして 本文欄には その重要なお知らせを入力します 入力ができたら ページスラッグを指定します 表示オプションから スラッグにチェックを入れれば スラッグパネルが 表示されます スラッグには何でも構いませんので 覚えやすい名前を付けといてください 出来たら公開ボタンを押します この 今作成した重要なお知らせ用 ペンプレと固定ページなんですが このページ自体をですね 表示するのではなく このページの中の この本文だけを サイトの色んな場所に 表示するようにしたいと思います なので タイトルは なんでも構いません 今 デフォルトの twentytwelve という テーマを使っていると この お知らせページ― ペンプレートが メニューに出てきてしまいますので これを出ないようにしたいと思います 管理画面のメニューに移動して 新しいメニューを作成します headermenu という メニューを作成して テーマの場所から headermenu を選択します 選択ができたら 作成したページ以外の ページを追加して メニューを保存します これで先ほど作成した テンプレートファイルは メニューには出てこなくなりました それではですね 実際にテンプレートファイルを編集して このヘッダーに一番下ですね ページの上部に常にお知らせの本文が 表示されるようにしたいと思います この時に 使用するのが query_posts というテンプレートタグです query_posts は自分で 好きな条件をつけてその条件に合う― 投稿ページや固定ページを表示する ことができるテンプレートタグです 様々な引数を指定することができますが 今は固定ページですので この― 投稿固定ページ引数という ところを見てみましょう まず 固定ページのスラッグを使って 指定したいので この pagename というのを使います それから― 今回は 固定ページを指定しますので post type の page というものを 指定すれば良さそうです それではエディターから 編集してみます header.php を開きます 最初にですね ページのどの位置に表示したいかを インスペクターを使って 確認しておくといいでしょう そうですね この div id="main" というところの すぐ下に表示すれば良さそうです この primary というのが 今 おすすめ投稿となっているところですので このメインのすぐ下に 表示したいなと思います header.php の一番下に行くとですね この 今見た― main という ID の div タグがありましたので この下に記述していきます まず 最初に query_posts を書きます pagename は 固定ページの スラッグを指定します and で繋げて 次に post_type これは page ですね 指定して そしてそのまま 通常通りメッセージループを 記述していきます はい メッセージループがかけました 最初に― この重要なお知らせの 全体を表す― area を div タグで 作っておきます そして 表示したい内容は 固定ページの本文だけですので the_content タグを記述します div タグを閉じて メッセージループも終了します そして query_posts を使ったら 必ず wp_reset_query を 実行するようにしてください wp_reset_query は この query_posts で作った 検索条件をリセットするための タグですので 必ず記述します 書けたら保存をして アップロードして 画面での表示を確認してみます はい ヘッダーの下 すぐ一番上に 重要なお知らせのテンプレに書いた 本文が表示されました 他のページに移動しても ちゃんと 同じ場所に表示されています カテゴリーページにも 表示されています アーカイブページにも 表示されています それだけだと なんかあんまり 重要なお知らせ感がないので デザインを変更してみましょう デザインは― スタイルシートで変更できますので style.css を開きます 一番下に style を追加していきます 先ほど作った notice_area という div タグを― 目印にして style をつけていきます padding や margin を付けていきます 書けたら保存をして サイトで表示を確認してみましょう リロードします はい アラートっぽい 重要なお知らせっぽい表示になりました この本文を変更したい場合には 固定ページから本文の 文字列を変更すればいいですし この重要なお知らせを 非表示にしたい場合には 下書きにすれば 非公開になりそうですね はい 画面を表示してみましょう おかしいですね 表示にならないです 下書きにしてもなぜか― 出てきてしまう どうしてでしょうか もう一度テンプレートタグの query_posts を確認してみます post_type の下にですね post_status というパラメータがあります ここではですね 公開状態で― 投稿を絞り込むことが できるんですが どうも pagename や スラッグを指定してるためか post_status が publishな つまり公開状態で 取得するようになっていないようです ですので ここは post_status="publish" を― 明示的に書いてあげれば いいのではないかと思います header.php を開いて query_posts に― post_status をいうパラメータを追加して 条件に publish を入れます はい これで確認してみましょう はい 表示になりました もう一度表示にしてみます 公開済みにして 画面を表示すれば はい また表示されました こういった固定ページの表示をですね header.php に入れておけば 簡単な 重要なお知らせを サイト全体に表示したり あるいは下書きにするだけで 非表示にすることができます このレッスンでは 固定ページを使った― 重要なお知らせの 表示方法について学習しました

ステップアップ!WordPress中級

このコースではWordPressのマルチサイトという機能を使って、通常では作るのが難しい本格的なウェブサイトの構築方法を解説します。 同機能を有効にする手順から実際にマルチサイトを使ってサイトを構築する方法、また本格的なウェブサイトを作るうえで役に立つ実践的なWordPressのカスタマイズ方法までを丁寧に説明します。

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

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

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

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