はじめる!WordPress入門

サイドバーテンプレート

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイドバーを表示するためのサイドバーテンプレートの仕組みについて解説します。
講師:
04:21

字幕

このレッスンでは、サイドバーテンプレート の仕組みについて学習します。 サイドバーテンプレートは サイトのサイドバーなどを 表示するためのテンプレートです。 このテンプレートは単体で 1つのページを表示するのではなく サイドバーを表示したい他のテンプレートに get_sidebar と記述して 読み込んで表示します。 サイドバーテンプレートに使用できる ファイル名は sidebar.php ですが sidebar-name.php とすれば name の部分に 好きな名前を付けて 複数のサイドバーを作ることができます。 その場合には get_sidebar の 括弧の中に ファイル名に付けた名前を 「'」で区切って入力します。 それでは実際にサイドバーテンプレートを 作って、画面に表示してみましょう。 最初に sidebar.php を 作成します。 sidebar.php の 中身を編集します。 入力ができたら保存します。 このサイドバーを home.php から 読み込むようにしてみましょう。 home.php を開いて get_sidebar と入力します。 できたら保存して サイトで表示を確認します。 リロードします。 get_sidebar を書いた部分に sidebar.php に記述した 内容が表示されました。 次に複数のサイドバーを使う 方法を確認してみましょう。 もう一度エディターに戻ります。 新しく sidebar-2nd という テンプレートを作成します。 「-」で区切って 名前を付けます。 ファイルを開いて編集します。 出来たら保存します。 同じく home.php から 読み込んでみましょう。 get_sidebar と記述して 括弧の中にサイドバーの名前を 「'」で区切って入力します。 できたら保存して、もう一度 サイトで表示を確認してみます。 リロードします。 2つ目のサイドバーの内容が 表示されました。 このように複数のサイドバーを用意することで 例えば 右ナビゲーションと左ナビゲーション というふうに分けて作成することもできますし トップページで表示するサイドバー 記事の詳細画面で表示するサイドバーを 分けて用意することもできます。 また、サイドバーという名前になっていますが 特にサイドバーとして 使用する必要はありません。 サイトの中で共通するパーツを サイドバーテンプレートとして 自由に纏めておくことができます。 サイドバーに表示する内容は サイドバーテンプレート内に 自由に html で記述することができますが ウィジェットを使った ダイナミックサイドバー というのも利用することができます。 次にウィジェットを使った ダイナミックサイドバーの 使用方法を学習してみましょう。 ウィジェットを使った ダイナミックサイドバーを利用するためには まず、そのテーマで ダイナミックサイドバーを使用する という宣言をしておく必要があります。 このようなサイトの機能を 宣言しておくためのテンプレートファイルが functions.php です。 それではエディターに移動します。 テーマフォルダ内に functions.php というテンプレートファイルを 作成して下さい。 作成ができたら ファイルを開いて編集します。 ダイナミックサイドバーを利用するための ソースコードを入力します。 regidter_sidebar が、このテーマで ダイナミックサイドバーを使用するための コードになります。 その上に書いてある if から始まる記述は 条件分岐の記述といって ある条件を満たしているかどうかを 調べるための コードになります。 function_exists は 括弧内に記述した関数が 存在するかどうかを 調べるための関数です。 この場合は register_sidebar というコードが 使用できるかどうか を調べています。 if は括弧内が正しければ 波括弧「{}」の中を実行する という条件分岐です。 ですので、このコードを翻訳すると register_sidebar という関数が 使用できれば register_sidebar という関数を 実行しなさい というコードになります。 このように functions.php には そのテーマで使用したい 機能やプログラム等を 記述しておくことができます。 編集ができたら、保存をして 管理画面を確認してみましょう。 WordPress の管理画面に 移動します。 「外観」>「テーマ」に移動します。 テーマ情報の中に 「ウィジェット」という機能が追加されました。 これで、このテーマでウィジェットを 使用することができるようになります。 早速ウィジェットを追加してみましょう。 ウィジェットを追加したら ホームテンプレートを編集して ダイナミックサイドバーを 表示してみましょう。 home.php を開きます。 ダイナミックサイドバーを使用するための テンプレートタグは dinamic_sidebar です。 入力ができたら保存をして 画面で表示を確認してみましょう。 サイトに移動します。 エラーが表示されてしまいました。 php では、入力したコードに 誤りがあると 画面が表示されなくなってしまいます。 その場合は、慌てずに 画面に表示されている エラー内容を確認してみましょう。 ここでは dinamic_sidebar という関数が 定義されていない というエラーが表示されています。 また、どのファイルの何行目に そのエラーがあるかを教えてくれています。 もう一度エディターに戻ります。 home.php の2行目に エラーがあることがわかります。 ここでは dynamic_sidebar の 綴りを間違っていたようです。 もう一度正しく記入して 保存をして画面を確認してみましょう。 リロードします。 正しく表示されました。 このようにダイナミックサイドバーを使えば ウィジェットを使った サイドバーの管理ができるようになります。 ダイナミックサイドバーを使用した場合でも 複数のサイドバーを 用意しておくことができます。 では、ダイナミックサイドバーを使って 複数のサイドバーを 用意する方法を学習してみましょう。 エディターに戻ります。 functions.php を開いて 新しいコードを記述します。 if 文の記述は先程と同じです。 register_sidebar の括弧内に name と id を入力することで 複数のサイドバーを作成することができます。 name は管理画面上に表示される名前です。 id はダイナミックサイドバーを読み込む際に テンプレート内に記述する名前です。 このように name と id を振って 複数のサイドバーを作成することができます。 それでは保存をして 実際に管理画面で 表示を確認してみましょう。 管理画面に移動します。 「外観」>「ウィジェット」を クリックします。 ヘッダーバーとフッターバーという 2つのサイドバーが用意されました。 実際にサイドバーにウィジェットを追加して 表示を確認してみましょう。 最初に home.php を編集します。 ダイナミックサイドバーの括弧内に 読み込みたいサイドバーの id を入力します。 入力ができたら保存をして サイトで確認します。 ヘッダーバーと フッターバーが それぞれ読み込んだ場所に 表示されました。 このレッスンでは サイドバーテンプレートの作成方法と ダイナミックサイドバーの 作成方法について学習しました。

はじめる!WordPress入門

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

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

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

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

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