TAG : メニュー

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

2014年6月3日

WordPress で作成した個々のカスタム投稿タイプの一覧ページ作成に関するメモ。 個々のカスタム投稿タイプの一覧ページを作成する場合、以下のような方法がある。 固定ページを作成して表示 アーカイブページを作成して表示 カスタム分類のページを作成して表示 以下はそれぞれの方法を使って一覧ページを表示する場合の例(概要。詳細は省略) 目次 カスタム投稿タイプの作成 このサンプルでは以下のようなカスタム投稿タイプを作成 投稿タイプ名:events カテゴリー:events_cat タグ:events_tag functions.php(抜粋) 固定ページを…

続きを読む

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

2013年5月19日

それぞれの親カテゴリー(メニュー)の下の子カテゴリー(メニュー)は最初は非表示にしておいて、親カテゴリーをクリックすると、子カテゴリーが表示されるようなメニューを wp_nav_menu の出力を使って作成。 wp_nav_menu を使って出力すると、以下のようなクラスが自動的に付加されるので、子カテゴリー(メニュー)のページにアクセスした際に、その子カテゴリー(メニュー)を自動的に表示(開いた状態に)したり、そのリンクの色を変更して表示することが比較的簡単にできる。 親の ul 要素には「menu」の class が付く 子の ul 要素には「sub…

続きを読む

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

2013年5月19日

カスタムメニューを使うと複数の投稿タイプを組み合わせたり、表示する順番を変更したり、階層関係をつけたりと、柔軟にメニューが作成できる。 カスタムメニューを利用する方法 カスタムメニューの機能を有効にするには以下の3つの方法がある。 register_nav_menus() でカスタムメニューの機能を有効にし、メニューを表示するロケーションを作成する方法。functions.php に以下を記述。 パラメータのキー:半角英数字のロケーション名 (カスタムメニューの識別名) パラメータの値:管理画面に表示するロケーション名(日本語可)→カスタムメニューの設定…

続きを読む

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

2013年5月18日

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

続きを読む

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

2013年5月18日

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

続きを読む

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

2013年5月17日

親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。 ul 要素を入れ子にして、ツリー構造を記述 例:親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。 「+」「-」「■」の3つの画像を用意。 親メニュー(div.parentmenu)にマウスオーバーすると「+」印が表示され、選択(クリック)すると「-」印に変わり、サブメニュー(ul.submenu li)が表示される。 サブメニューが表示されている場合は、親メニューにマウス…

続きを読む