TAG : メニュー

wordpress カスタム投稿タイプの一覧ページの作成

2014年6月3日

WordPress で作成した個々のカスタム投稿タイプの一覧ページ作成に関するメモ。 個々のカスタム投稿タイプの一覧ページを作成する場合、以下のような方法がある。 固定ページを作成して表示 アーカイブページを作成して表示 カスタム分類のページを作成して表示 以下はそれぞれの方法を使って一覧ページを表示する場合の例(概要。詳細は省略) 目次 カスタム投稿タイプ…

続きを読む

wordpress wp_nav_menu の出力を縦にスライドするメニューで表示

2013年5月19日

それぞれの親カテゴリー(メニュー)の下の子カテゴリー(メニュー)は最初は非表示にしておいて、親カテゴリーをクリックすると、子カテゴリーが表示されるようなメニューを wp_nav_menu の出力を使って作成。 wp_nav_menu を使って出力すると、以下のようなクラスが自動的に付加されるので、子カテゴリー(メニュー)のページにアクセスした際に、その子カテ…

続きを読む

wordpress WordPress でのカスタムメニューの利用

2013年5月19日

カスタムメニューを使うと複数の投稿タイプを組み合わせたり、表示する順番を変更したり、階層関係をつけたりと、柔軟にメニューが作成できる。 カスタムメニューを利用する方法 カスタムメニューの機能を有効にするには以下の3つの方法がある。 register_nav_menus() でカスタムメニューの機能を有効にし、メニューを表示するロケーションを作成する方法。fu…

続きを読む

wordpress wp_nav_menu の出力をドロップダウンメニューで表示

2013年5月18日

wp_nav_menu 関数は、デフォルトでは以下のように ul 要素( li 要素)を使ってメニューの各項目を出力する。 親の ul 要素には「menu」の class が付く 子の ul 要素には「sub-menu」の class が付く 全ての li 要素には「menu-item」の class が付く 現在表示されているページの li 要素には「cu…

続きを読む

jquery 基本的なドロップダウンメニュー

2013年5月18日

CSS による基本的な記述 メニューの幅や背景、テキストの位置などの指定は様々な方法が考えられるが、ここでは単純に幅はメニューの文字数に合わせ、右側にパディング(20px)を設け、背景は背景色で指定する。 HTML は ul 要素を入れ子にしてマークアップする。 CSS や jQuery で指定しやすいように id 「header-nav」を指定した div…

続きを読む

jquery jQuery を使った縦にスライドするメニュー

2013年5月17日

親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。 ul 要素を入れ子にして、ツリー構造を記述 例:親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。 「+」「-」「■」の3つの画像を用意。 親メニュー(div.parentme…

続きを読む