WordPressでよく使うウィジェット実装のケース(1)
最終更新日: Update!!
WordPressにはサイト内のにある色々なコンテンツを管理画面上で編集できるウィジェットという機能があります。WordPressなどのCMSの導入にはユーザー自身でウェブサイトを更新していきたいという目的があるため、クライアントワークでも求められることが多いですね。
そこで、WordPress制作においてウィジェットを使ったよくあるケースを備忘録として残しておきたいと思います。
これ以外にも、WordPressのウィジェット実装でよく使うものもたくさんあるので、また別記事でまとめていきたいと思います!
カスタムメニューを使ったナビメニュー
グローバルナビやメガメニューなど、ページリンクが多いナビゲーションの時によく使います。基本的には以下のように実装できます。 1. functions.phpに下記コードを追記してカスタムメニューを定義します<?php register_nav_menus( array( 'gnav' => 'グローバルナビ', 'sitemap' => 'サイトマップ' ) ); ?>2. 管理画面内の「外観」→「メニュー」にてメニューを新規作成し、メニューの内容を登録する。その後、先ほど登録したカスタムメニューを紐づけます。 3. テンプレートファイル内の該当箇所に下記コードで定義したカスタムメニューを出力します。
<?php // グローバルナビのカスタムメニューを出力する場合 wp_nav_menu( array( 'theme_location' => 'gnav' ) ); ?>
複数の画像を並列に表示させる画像リスト
イメージ画像ギャラリーや、バナーエリアなどで使える、複数の画像を表示させたい時のウィジェット実装です。 1. functions.phpに下記コードを追記してウィジェットを定義します。function widg_img_list() { register_sidebar ( array ( 'name' => '画像リスト', 'id' => 'img_list', 'before_widget' => '<li>', 'after_widget' => '</li>', 'before_title' => '', 'after_title' => '' ) ); } add_action( 'widgets_init', 'widg_img_list' );2. 管理画面内の「外観」→「ウィジェット」を選択、登録されている「画像リスト」ウィジェット内に画像ウィジェットを登録していきます。 3. テンプレートファイル内の該当箇所に下記コードで定義したウィジェットを出力します。
<ul> <?php dynamic_sidebar( 'img_list' ); ?> </ul>
これ以外にも、WordPressのウィジェット実装でよく使うものもたくさんあるので、また別記事でまとめていきたいと思います!
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories