Submit Search
Upload
メニューは管理画面で設定できるようにしよう
•
0 likes
•
12,422 views
Mayuko Moriyama
Follow
WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 で発表したスライドです。 https://wbtokyo.doorkeeper.jp/
Read less
Read more
Technology
Report
Share
Report
Share
1 of 57
Download now
Download to read offline
Recommended
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
WordBench京都9月号
WordBench京都9月号
Koji Asaga
Recommended
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
WordBench京都9月号
WordBench京都9月号
Koji Asaga
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
Seto Takahiro
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
Mignon Style
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
2013年3月16日のWordBench大阪
2013年3月16日のWordBench大阪
Shinichi Nishikawa
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
Shigeki Takai
Yat-wbnara201602
Yat-wbnara201602
YAT blog
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
Mignon Style
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
Mignon Style
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
Mignon Style
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意
Mori Kazue
雑食系エンジニアの作りかた
雑食系エンジニアの作りかた
Hiroshi Maekawa
More Related Content
What's hot
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
Seto Takahiro
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
Mignon Style
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
2013年3月16日のWordBench大阪
2013年3月16日のWordBench大阪
Shinichi Nishikawa
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
Shigeki Takai
Yat-wbnara201602
Yat-wbnara201602
YAT blog
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
Mignon Style
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
Mignon Style
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
Mignon Style
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
What's hot
(20)
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
WordPressってブログじゃないの?
WordPressってブログじゃないの?
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
2013年3月16日のWordBench大阪
2013年3月16日のWordBench大阪
WordPress プラグイン Advance Custum Fieldsを学ぶ
WordPress プラグイン Advance Custum Fieldsを学ぶ
Yat-wbnara201602
Yat-wbnara201602
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Similar to メニューは管理画面で設定できるようにしよう
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意
Mori Kazue
雑食系エンジニアの作りかた
雑食系エンジニアの作りかた
Hiroshi Maekawa
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
Akira Maruyama
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
Yusuke Wada
MT DDC Tokyo テーマ編 - 森和恵
MT DDC Tokyo テーマ編 - 森和恵
Mori Kazue
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
Hiroyuki Mori
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
Katz Ueno
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
Markdownでドキュメント作成
Markdownでドキュメント作成
Yasuyuki Fujikawa
Word bench神戸の紹介
Word bench神戸の紹介
BREN
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
書籍制作フローを変える「ReVIEW」という解
書籍制作フローを変える「ReVIEW」という解
Kenshi Muto
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Ryo Iinuma
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
Similar to メニューは管理画面で設定できるようにしよう
(20)
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意
雑食系エンジニアの作りかた
雑食系エンジニアの作りかた
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Dreamweaver コードヒントHowTo
Dreamweaver コードヒントHowTo
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
MT DDC Tokyo テーマ編 - 森和恵
MT DDC Tokyo テーマ編 - 森和恵
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
Markdownでドキュメント作成
Markdownでドキュメント作成
Word bench神戸の紹介
Word bench神戸の紹介
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
書籍制作フローを変える「ReVIEW」という解
書籍制作フローを変える「ReVIEW」という解
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Recently uploaded
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(12)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
メニューは管理画面で設定できるようにしよう
1.
メニューやSNSアイコンは 管理画面で設定できるように しよう WordBench東京2月勉強会 森山真祐子
2.
自己紹介 • 森山真祐子です! • 旅行が好き •
WordBench 東京の雑用担当 • WordCamp Central のボランティア • 好きなスターターテーマは「_s」 • 最近、カスタムメニューのバグを発見。
3.
カスタムメニューの 話をします!
4.
セッションの目的 • プログラミングが苦手な Web
デザイナーさん &コーダーさんにもカスタムメニューを使って もらう • WordPress テーマ内にハードコーディング されたメニューを撲滅する
5.
もくじ • カスタムメニューとは • いろいろなカスタマイズ •
新機能!投稿タイプアーカイブ
6.
カスタムメニューとは
7.
ナビゲーションのコーディング 大変ですよね?
8.
<ul> <li> <a href="http://local.dev/"> いっこめ </a> </li> <li> <a href="http://local.dev/"> にこめ </a> </li> <li> <a
href="http://local.dev/"> さんこめ </a> </li> <li> <a href="http://local.dev/"> よんこめ </a> </li> <li> <a href="http://local.dev/"> ごこめ </a> </li> <li> <a href="http://local.dev/"> ろっこめ </a> </li> </ul> リストタグって 長くなるし あんまり美しく ないし
9.
<ul> <li> <a href="http://local.dev/"> いっこめ </a> </li> <li> <a href="http://local.dev/"> にこめ </a> </li> <li> <a
href="http://local.dev/"> さんこめ </a> <ul> <li> <a href="http://local.dev/"> さんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子にこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子さんこめ </a> </li> </ul> </li> <li> <a href="http://local.dev/"> よんこめ </a> <ul> <li> <a href="http://local.dev/"> よんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> よんこめの子にこめ </a> </li> <li> <a href="http://local.dev/"> よんこめの子さんこめ </a> </li> </ul> </li> <li> <a href="http://local.dev/"> ごこめ </a> </li> <li> <a href="http://local.dev/"> ろっこめ </a> </li> </ul> 入れ子になったら もういやだ
10.
あと、変更も多いし
11.
\(^o^)/
12.
wp_nav_menu(); \そこで!/
13.
管理画面 から 設定 できるよう に なる
14.
<ul> <li> <a href="http://local.dev/"> いっこめ </a> </li> <li> <a href="http://local.dev/"> にこめ </a> </li> <li> <a
href="http://local.dev/"> さんこめ </a> <ul> <li> <a href="http://local.dev/"> さんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子にこめ </a> </li> <li> <a href="http://local.dev/"> さんこめの子さんこめ </a> </li> </ul> </li> <li> <a href="http://local.dev/"> よんこめ </a> <ul> <li> <a href="http://local.dev/"> よんこめの子いっこめ </a> </li> <li> <a href="http://local.dev/"> よんこめの子にこめ add_action( 'after_setup_theme', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) ); } wp_nav_menu(); header.php functions.phpheader.php \設定は簡単/ これで、管理画面での設定に基づいて リストタグを生成してくれます!
15.
でも.... 自動で生成してくれるってことは、 HTML を自由に書けないってことだよね? (๑•﹏•)
16.
\そんなことないよ/
17.
\コピペでいこう/ いろいろなカスタマイズ
18.
いろいろなカスタマイズ 1. クラスや ID
を指定しよう 2. 項目ごとに異なるアイコンをつけよう 3. 入れ子がないメニューをつくろう 4. 複数のメニューを登録しよう 5. 日英表記してみよう 6. ぜんぶカスタマイズしよう \どんどんいくぞ/
19.
1. クラスや ID
を指定しよう
20.
こんなときに便利 • 使いたい CSS
フレームワークや、JavaScript のライブラリなど で、すでにつけたい ID やクラスが決まっている。 • clearfix を追加したい
21.
<?php wp_nav_menu( array( ‘キー' =>
‘バリュー’, )); ?> <?php wp_nav_menu(); ?> wp_nav_menu への設定は連想配列で渡します。 全パラメーターは Codex を参照。 設定のキホン
22.
<?php wp_nav_menu( array( 'menu_class' =>
‘', // ulタグのクラスを追加 'menu_id' => ‘{slug}-1’, // ulタグの id を変更 'container' => ‘div‘, // 変更すると、div タグを nav タグや無しに変更できる 'container_class' => ‘menu-{menu slug}-container‘, // div タグのクラスを変更 'container_id' => ‘', // div タグの id を追加 ) ); ?> <?php wp_nav_menu(); ?> これで、まわりの div タグや ul タグのクラスが指定できます クラスや id の追加
23.
2. 項目ごとに異なるアイコンを つけよう
24.
参考: Font Awesome
の使用例のページ
25.
li タグにも \クラスを追加するよ/
26.
27.
28.
29.
あとは CSS を \ 工夫してね /
30.
\ちなみに/ 自動で追加されるクラス • Codex でチェックしよう •
実際に WordPress で生成さ れたメニューの HTML を読ん でみよう 参考: メニュー項目の CSS クラス
31.
3. 入れ子がないメニューを つくろう
32.
ありがちなフッター こういうメニュー、 サブメニュー設定されたら 崩れそうですね?
33.
wp_nav_menu( array( 'depth'
=> '1' )); <?php wp_nav_menu(); ?>
34.
<?php wp_nav_menu( array( 'menu_class' =>
‘menu', // ulタグのクラスを追加 'menu_id' => ‘{slug}-1’, // ulタグの id を変更 'container' => ‘div‘, // 変更すると、div タグを nav タグや無しに変更できる 'container_class' => ‘menu-{menu slug}-container‘, // div タグのクラスを変更 'container_id' => ‘', // div タグの id を追加 'depth' => ‘1', ) ); ?> さきほどのメニューに 追加する場合
35.
4. 複数のメニューを登録しよう
36.
add_action( 'after_setup_theme', 'register_my_menu'
); function register_my_menu() { register_nav_menus( array( 'primary' => __( 'Primary Menu', 'theme-slug' ), 'secondary' => __( 'Secondary Menu', 'theme-slug' ), ) ); } functions.phpheader.php register_nav_menus で配列を設定 add_action( 'after_setup_theme', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) ); } functions.php
37.
<?php wp_nav_menu( array( 'theme_location' =>
‘primary’, ) ); ?> header.phpheader.php theme_location に明示的に指定 <?php wp_nav_menu(); ?> header.php <?php wp_nav_menu( array( 'theme_location' => ‘secondary’, ) ); ?> footer.php
38.
5. 日英表記してみよう
39.
「説明」を使います
40.
標準では出力されないので…. (;́Д`)
41.
`walker_nav_menu_start_el` \というフィルターにフックするのが簡単/
42.
Chocolat で \ デモします /
43.
44.
• カスタマイズしたソースの場所 https://github.com/mayukojpn/chocolat/tree/wbtokyo- demo01
45.
6. ぜんぶカスタマイズしよう
46.
Codex にこんなコードも 参考: 関数リファレンス/wp
get nav menu items
47.
Walker Class という方法も <?php wp_nav_menu(
array( 'walker' => new Custom_Walker_Nav_Menu(), ) ); ?> <?php class Custom_Walker_Nav_Menu extends Walker { (ここにかわりの動きをかく) } ?> header.php functions.php
48.
_s でやるなら...
49.
(๑•﹏•) 今日の説明のどれでも 対応できないという方は.....
50.
たぶんそのコーディング 見直したほうがいい! ※異論は懇親会でどうぞ! (;^ω^)
51.
\最後に/ WordPress 4.4 から 投稿タイプアーカイブが 追加されました!
52.
53.
バグ発見…
54.
バグ報告しました \テストしてくれる方募集!/
55.
修正プラグインもあるよ コアが修正されるまでの間使ってくださいね。 高橋くんとろゆにさんありがとう!
56.
• Trac のチケット https://core.trac.wordpress.org/ticket/35324 •
修正プラグイン https://gist.github.com/mayukojpn/ 6ef62c39dcf48c17ed96
57.
\ご清聴ありがとうございました/
Download now