ウィジェットIDの調べ方【ワードプレス】

ウィジェットIDの調べ方【ワードプレス】
2018年8月27日2019年1月16日

ワードプレスでウィジェット操作をする時、ウィジェットのIDを知りたくなる事があります。ウィジェットの管理画面でサクッと確認できればよいのですが、ウィジェットの名前は書いてあってもウィジェットIDはどこにも書いてありません。

という事で、今回はウィジェットIDの調べ方です。

ウィジェットIDの形式

ワードプレスのIDというと投稿IDのような数字を思い浮かべますが、実際には「ウィジェット名 – 数字」のような形式になっています。数字は同じウィジェットを複数使えるように、使い始めた段階で勝手に割り振られます。

以下は、このブログのウィジェットIDの一覧です。

固定ページ:pages-1
カレンダー:calendar-2
アーカイブ:archives-1
音声:media_audio-1
画像:media_image-1
ギャラリー:media_gallery-1
動画:media_video-1
メタ情報:meta-1
検索:search-2
テキスト:text-1
カテゴリー:categories-4
最近の投稿:recent-posts-1
最近のコメント:recent-comments-1
RSS:rss-1
RSS:rss-3
タグクラウド:tag_cloud-1
ナビゲーションメニュー:nav_menu-2
ナビゲーションメニュー:nav_menu-3
ナビゲーションメニュー:nav_menu-4
カスタム HTML:custom_html-2
カスタム HTML:custom_html-6
カスタム HTML:custom_html-7
カスタム HTML:custom_html-8
カスタム HTML:custom_html-9
カスタム HTML:custom_html-10
Slimstat:slimstat_widget-1
目次:ezw_tco-1
Recent Posts with Thumbnail:di-blog-widget-recent-posts-thumb-1
Di Blog Social Profile:di_blog_social_widget-3
Ajax Search Lite:ajaxsearchlitewidget-1

WordPressのデフォルトウィジェットは、アンダースコアとハイフンが統一した形で使用されています。インストールした追加ウィジェットや、テーマで用意されているウィジェットは、すべてハイフンを使用していたりする場合もあります。

ウィジェットIDの確認方法

ウィジェットのIDの確認方法としては、F12キーなどでウィジェットが表示されているページのHTMLソースを見るのがカンタンです。基本的にカスタマイズして自作したウィジェットエリアでなければ、そのウィジェットエリア内のウィジェットを囲うボックスには、ウィジェットのIDが振られています。

divだったりasideだったり、囲みボックスは様々ですが、上に掲載したリストのような形式でIDが付けられていますのでこれを確認しましょう。

ウィジェットの囲みボックスにIDが見当たらない場合

あまり無いケースですが、ウィジェットの設置エリアを登録した時の設定によって、そのウィジェットエリアに設置したウィジェットの囲みボックスにIDが振られていない場合があります。この場合はHTMLソースを見てもウィジェットIDがわかりません。その場合はいったん、ドラッグ&ドロップで、テーマに最初からあったウィジェット設置エリアにウィジェットを移してみましょう。囲みボックスにIDが振られるはずです。

登録されているウィジェットのID一覧を表示するショートコード

この記事の上の方で、このブログのウィジェットのID一覧を掲載しましたが、どうしてもわからない場合、このリストから探すと楽かもしれません。下のコードは同じものを出力するショートコードです。

下のコードをコピーして、使用中のテーマのfunctions.phpに貼り付けます。最終行に?>と記述された行がある場合は、その行を消さないように注意して、それより前に貼り付けます。

ショートコードの使い方

下書きなどで作った空のページの記事本文中に下のコードを記述します。プレビュー画面などで確認すれば、ウィジェットのリストが表示されます。

最後に

WordPressって、なんちゃらIDを調べる時に結構面倒ですよね。投稿やらカテゴリーIDやらも、でっかく管理画面に表示してくれればいいのにって思います。

ショートコードについては、ざっくりと作ったものですみません。ちょっと確認用という事でお許しを。

関連のある記事

特定のウィジェットを非表示にするコード【ワードプレス】

特定のウィジェットを非表示にするコード【ワードプレス】

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages