WordPressテーマの自作 <body>タグのクラス
WordPressでテーマを自作するような場合には、body_class関数を使うと便利です。というか使う必要があります。
通常、header.php内で、<body>タグは宣言されますので、スタイルシート(css)のメンテナンス性を考えると、ページ構成にあわせて<body>タグのクラス属性の内容が変更された方が良いです。
そのため、Wordpressでは、body_class関数が準備されています。
body_class関数の使い方
1 | <body <?php body_class($body_class); ?>> |
<body>タグ内に、上記のような形で記載するだけです。class属性を自動で追加してくれます。$body_classパラメータを利用する事で、個別にクラスも追加することができます。
自動で追加するクラスの一例
| トップページ | home |
| 固定ページ | page |
| page-template-(スラッグ) | |
| page-id-(ID) | |
| 投稿一覧ページ | archive |
| post-type-archive | |
| post-type-archive-(投稿タイプ名) | |
| 投稿詳細ページ | single |
| single-post | |
| single-template-default | |
| single-format-standard |
body_class関数から追加されるclass名一覧
body_classでは、次の値の1つ以上がbodyのクラス名として書き出されます。
- rtl
- home
- blog
- archive
- date
- search
- paged
- attachment
- error404
- single postid-(ID)
- single-(post type name)
- single-template-default
- single-template-(template file name)
- single-format-standard
- attachmentid-(ID)
- attachment-(mime-type)
- author
- author-(user_nicename)
- category
- category-(slug)
- archive post-type-archive post-type-archive-(post type name)
- tag
- tag-(slug)
- page page-id-(ID)
- page-parent
- page-child parent-pageid-(id)
- page-template-default
- page-template page-template-(template file name)
- search-results
- search-no-results
- logged-in
- paged-(page number)
- single-paged-(page number)
- page-paged-(page number)
- category-paged-(page number)
- tag-paged-(page number)
- date-paged-(page number)
- author-paged-(page number)
- search-paged-(page number)
ページ構成によって、さらにクラスを付与したい場合
$body_classパラメータに、クラス名を入れて渡すだけです。
複数のクラス名を渡す場合には、半角スペースで区切ります。
例えば、直前の処理に以下を追加すれば、そのクラスが追加されます。
1 2 3 4 5 6 7 8 9 10 | if(is_post_type_archive()){ $taxonomy = get_queried_object()->taxonomy; $slug = get_taxonomy( $taxonomy )->object_type[0]; $body_class = "archive-" . $slug; } if(is_single()){ $slug = get_post_type(get_the_ID()); $body_class = "single-" . $slug; } <body id="theme-rishun-body" <?php body_class($body_class); ?>> |
archiveページの場合には、archive-(カスタム投稿名)
singleページの場合には、single-(投稿スラッグ)
が追加で書き出されます。
実行した例
例)カスタム投稿タイプ”works”の一覧画面を表示した場合
1 | <body class="archive post-type-archive post-type-archive-works archive-works"> |
もし、Wordpressでテーマを始めて作る方はご参考ください。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
