のCSSナビゲーション編

2014年1月17日 第25回WordBench大阪額賀順子

初心者でも大丈夫！

自己紹介額賀 順子 | ヌカガジュンコ

フリーランスのWEBディレクター／デザイナー。つまり１人で大概の事はやっちゃう人。

Twitter 　＠nukaga

写真を撮ってる人と思われていることが多いかも。WEB制作やWEBの色彩設計を生業としています。

本日のアジェンダ

✤ WordPressのCSSってどうなってるの？

✤カスタムメニューって？

✤ wp nav menuって？

✤メニュー1つにスタイルをあてたい

WordPressのCSSってどうなってるの？

WordPressのCSSってどうなってるの？

WordPressのテーマフォルダの中に

Style.css

WordPressのCSSってどうなってるの？

遠っ！

と思わないで

WordPressのCSSってどうなってるの？

Style.cssでは@importも

使えますが

WordPressのCSSってどうなってるの？

初心者と思うのならばCSSはstyle.cssひとつにまとめておいた方が無難（子テーマ時は親テーマのCSS@importもあり。　子テーマって何？はまた今度）

WordPressのCSSってどうなってるの？

管理者権限で外観→テーマ編集

WordPressのCSSってどうなってるの？

WordPressのCSSってどうなってるの？

できれば管理画面からは触らずにFTP等でアクセスする方がおすすめ

WordPressのCSSってどうなってるの？

Jetpackプラグインを使うと

WordPressのCSSってどうなってるの？

カスタムメニューって？

カスタムメニューって？

外観→メニュー

WordPressテーマで表示できるナビゲーションメニュー

カスタムメニューって？

便利！

カスタムメニューって？

自分でテーマを作る時にはどうやって入れたら良いの？

カスタムメニューって？

テンプレートタグ

wp nav menuを使う

wp nav menuって？

wp nav menuって？

wp nav menuって？

Codexの見方がわからん！デザイナーあるある…

wp nav menuって？

基本的にはメニューを入れたいところに<?php wp_nav_menu(); ?>

wp nav menuって？

<?php wp_nav_menu($args); ?>

$argsって何？

引数ひきすう【 argument 】args / アーギュメント

wp nav menuって？

<?php wp_nav_menu($args); ?> argsのところにはパラメーターが使える

wp nav menuって？

使い方例

wp nav menuって？

$theme_location（文字列） （オプション） テーマの中で使われる位置。ユーザーが選択できるように register_nav_menu() で登録されている必要がある。

wp nav menuって？

例えば

wp nav menuって？

Primary Menu

Social Links Menu

Front Menu

wp nav menuって？

Primary Menu

Social Links MenuFront Menu

wp nav menuって？

functions.phpへregister_nav_menu('front', 'Front Menu');ロケーション名 説明

wp nav menuって？

<?php wp_nav_menu( array(            'theme_location'=>'front'));    ?>

ロケーション名

wp nav menuって？

<?php wp_nav_menu( array('theme_location'=>'front''container'=> 'nav'));    ?> ナビゲーションを囲うタグ

例えば

wp nav menuって？

「今いるページのメニューは色を変えたい」

wp nav menuを使うと

今いるページのメニューliタグのクラスに.current-menu-itemが自動で付与されます

便利！

メニュー1つにスタイルをあてたい

メニュー１つにスタイルをあてたい

ここ！

「表示オプションにCSSクラスが！

メニュー１つにスタイルをあてたい

記入するとクラスが追加される

追加したクラスへのCSSをstyle.cssへ書けばOK!教えてくれた@bren_bossさん @tkc49さんありがとう

ご清聴ありがとうございました！良きWordPressライフを！

というわけで実践へ