TAG : メニュー
カスタム投稿タイプの一覧ページの作成
2014年6月3日
WordPress で作成した個々のカスタム投稿タイプの一覧ページ作成に関するメモ。 個々のカスタム投稿タイプの一覧ページを作成する場合、以下のような方法がある。 固定ページを作成して表示 アーカイブページを作成して表示 カスタム分類のページを作成して表示 以下はそれぞれの方法を使って一覧ページを表示する場合の例（概要。詳細は省略） 目次 カスタム投稿タイプ…
wp_nav_menu の出力を縦にスライドするメニューで表示
2013年5月19日
それぞれの親カテゴリー（メニュー）の下の子カテゴリー（メニュー）は最初は非表示にしておいて、親カテゴリーをクリックすると、子カテゴリーが表示されるようなメニューを wp_nav_menu の出力を使って作成。 wp_nav_menu を使って出力すると、以下のようなクラスが自動的に付加されるので、子カテゴリー（メニュー）のページにアクセスした際に、その子カテ…
WordPress でのカスタムメニューの利用
2013年5月19日
★最新の情報は以下のページをご覧ください。 WordPress ナビゲーションメニュー（カスタムメニュー） 2019年3月31日 カスタムメニューを使うと複数の投稿タイプを組み合わせたり、表示する順番を変更したり、階層関係をつけたりと、柔軟にメニューが作成できる。 カスタムメニューを利用する方法 カスタムメニューの機能を有効にするには以下の３つの方法がある。…
wp_nav_menu の出力をドロップダウンメニューで表示
2013年5月18日
wp_nav_menu 関数は、デフォルトでは以下のように ul 要素（ li 要素）を使ってメニューの各項目を出力する。 親の ul 要素には「menu」の class が付く 子の ul 要素には「sub-menu」の class が付く 全ての li 要素には「menu-item」の class が付く 現在表示されているページの li 要素には「cu…
基本的なドロップダウンメニュー
2013年5月18日
CSS による基本的な記述 メニューの幅や背景、テキストの位置などの指定は様々な方法が考えられるが、ここでは単純に幅はメニューの文字数に合わせ、右側にパディング（20px）を設け、背景は背景色で指定する。 HTML は ul 要素を入れ子にしてマークアップする。 CSS や jQuery で指定しやすいように id 「header-nav」を指定した div…
jQuery を使った縦にスライドするメニュー
2013年5月17日
親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。 ul 要素を入れ子にして、ツリー構造を記述 例：親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。 「+」「-」「■」の3つの画像を用意。 親メニュー（div.parentme…