jQueryプラグインなどを使わずに、CSSのみでメガメニューを実装する方法をご紹介いたします。 以下デモページのようなメガメニューを作成します。デモページでは、”メニュー1″にマウスホバーすると…
CSSのみでメガメニューを実装する方法
クリックでサブメニューを切り替えるナビゲーションを実装する方法
メインメニューとそれぞれのメニューに対応したサブメニューがあって、メインメニューをクリックすると対応するサブメニューが表示されるナビゲーションを実装する方法をご紹介いたします。 実際の挙動については、以下デモページをご参…
WordPressのカスタムメニューに付与されるIDやクラスを削除する方法
WordPressでテーマ内にカスタムメニューを設置すると、以下のようにリストに対して自動的にIDやクラスが付与されます。 今回は、カスタムメニューに自動付与されるIDやクラスを削除して、コードをスッキリさせる方法をご紹…
WordPressのカスタムメニューで開いているページのみ装飾を変更する方法(カレント表示)
WordPressのカスタムメニューで、開いているページのナビゲーションだけ装飾を変更する方法をご紹介いたします。いわゆる”カレント表示”というやつです。 当ブログでいうと、例えばトップページを開…
マウスホバーで開くアコーディオンメニューをCSSのみで実装する方法
jQueryを使わずにCSSのみでアコーディオンメニューを作る方法をご紹介いたします。メニューはマウスホバーで開閉します。 以下にデモを用意したので、動きについてはデモページをご確認いただければと思います。 デモページを…
WordPressのカスタムメニューで出力されるulやliに任意のクラスを追加する方法
WordPressでテーマ内にカスタムメニューを出力したい時は、wp_nav_menu関数を使用します。wp_nav_menu()を記述した場所には、以下のような感じのメニューが出力されます。 ul要素にはmenu、li…
WordPressでカスタムメニューのリストに連番のクラスを追加する方法
WordPressのテーマ内に[外観] – [メニュー]で作成したメニューを追加するには、以下のようなコードを追加します。 まずは、functions.phpでカスタムメニューを有効化し、header.php…
カスタムタクソノミーのリストをウィジェットとして表示できるようになるWordPressプラグイン「Custom Taxonomy Widget」
Custom Taxonomy Widgetは、カスタムタクソノミーのリストをカテゴリーリストのように、ウィジェットで表示することができるWordPressプラグインです。 シンプルですが、カスタムタクソノミーを作成して…
参照している記事と同じタクソノミーに属する最新記事をサムネイル付きで一覧表示する方法
以前、見ている記事と同じカテゴリーの最新記事一覧を表示する方法という記事を書きましたが、この方法はカテゴリーにしか対応していません。 カスタムタクソノミーを使っていて、同じタクソノミーに属する最新記事を出力したい場合もあ…
カスタムタクソノミーを投稿数付きでリスト表示させるためのテーマカスタマイズ
カスタムタクソノミーを追加するには Custom Post Type UI が便利です。タクソノミーを追加したら、リストをサイドバーなどに表示させたくなると思います。 デフォルトの状態だと、ウィジェットにはカテゴリーしか…