ステップアップ!WordPress中級

フッターのカスタマイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フッターに新しいサイドバーを登録してウィジェットを追加できるようにする方法を解説します。
講師:
10:56

字幕

このレッスンでは 子テーマを使った フッターのカスタマイズにつして?習します 今 このサイトは TwentyTwelve を親に持つ 子テーマで表示しています TwentyTwelve には 最初から 一つのサイドバーが用意されています このサイトのフッター部分に 三つのサイトバーを追加して フッターにもサイドバーが 表示できるようにしてみましょう エディターに移動します サイドバーの追加は functions.php で行います 子テーマの中に fuctions.php を用意します 作成ができたら編集を行います サイドバーの追加は まず fuction_exists を使って register_sidebar が ちゃんと実行できることを確認してから register_sidebar 関数を使用します register_sidebar には 様々な パラメータを指定することができますが ここではサイドバーの名称と 後で呼び出す時に使用する id を 指定しておきます 今回は三つ サイドバーを追加します それぞれ フッター1 フッター2 フッター3 としておきます 最後のフッターを作成します はい できました できたら保存をして 管理画面に 正しく追加されているか 確認してみましょう 管理画面のウィジェット画面に移動します 新しく今作成した フッター1 2 3 という サイドバーが追加されました 下にある三つが TwentyTwelve テーマが 作成している三つのサイドバーです 今サイトに表示されてるのは このサイドバーですね このように親テーマの fuctions.php と 子テーマの中にある fuctions.php は 両方ともサイト内で実行されます なので追加して 何か機能を書きたいという場合には 子テーマの方の funtions.php に 書いていけば このように両方とも問題なく動作します それでは適当に それぞれのフッターに ウィジェットを追加しておきます できました それでは footer.php を編集して これらのウィジェットを 正しく表示するようにしてみたいと思います 子テーマの中にある footer.php を開きます コピー表記の上に フッターを表示したいと思います 三つのサイドバーを 横に並べて表示したいと思います 最初のものを menu1 とします サイドバーウィジェットは必ず list タグで表示されますので ul タグで囲むようにしておきます そして ダイナミックウィジェットを 使用する場合の サイドバーの呼び方は dynamic_sidebar― というテンプレートタグを使って パラメータとして さきほど register_sidebar で作成した サイドバーの id を指定しておきます 一つ 二つ目も 同じように記述していきます 最後に三つ目を記述します こんな感じですね これで三つのサイドバーができました それでは一度この状態で 画面を確認してみます ページの一番下に はい 三つのサイドバーが 表示されました まだ CSS が 適用されていませんので 表示は 横に並んでいませんが 正しく menu1 に一つ目のサイドバー menu2 に二つ目のサイドバー そして menu3 に 三つ目のサイドバーが表示されています 一つのサイドバーを開くと 最初に ul タグが表示されて その中に ウィジェットは list タグで表示されています それではこの 今追加したウィジェットのデザインを 設定していきたいと思います エディターに移動して style.css を開きます style.css に追加していきます まずフッター全体を 背景色を付けたいと思います !important 属性を付けて CSS を記述していきます サイドバー部分 全体を囲むフッターメニューに margin-bottom を指定しておきます 続いて一つ一つのメニューへすべて menu という クラスを付けていますので このクラスに対して 幅と float それから margin-right を指定します このように 三つすべてに同じクラス名を付けておけば 一回のスタイル指定だけで すべてのサイドバーに設定ができます そして個別の設定をしたい場合には このように そのサイドバーにだけ付けてる名前を 指定すればいいと思います 一番右の列には margin-right を付けたくないので margin-right を打ち消すようにしておきます それからウィジェットのタイトル部分― を少し スタイルを変更しておきます フォントサイズも大きくします それからコピー表記の部分の 文字揃えを中央部分に しておきます はい このようになります さきほど書いたこの部分に対しての スタイルを 今書きました ここちょっと div が一つ多かったですね 消しておきます はい そしてその下にある コピーライト表記の site-info に対しても さきほどスタイルを書きました それではこれで 画面の表示を確認してみましょう はい このようにフッターの部分に 背景色がついて 三つの サイドバーが横に並んで表示されました そして コピーライト表記が 中央に揃っています このようにして親のテーマの fuctions.php で 作られている機能というものに 子テーマの fuctions.php から 新しく機能を追加したり サイドバーを追加していったりということが できるようになっています このレッスンでは フッターの カスタマイズ方法について学習しました

ステップアップ!WordPress中級

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

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

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

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

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