• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Genesis WP Fan

Genesis Framework とWordPressカスタマイズの情報サイト

  • ホームHome
  • 日本人向けGenesis子テーマ「Muromachi」Genesis Child Theme “Muromachi”
  • Genesis とは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • お問い合わせ
HomeGenesis Framework カスタマイズGenesisサイトにBody Classを追加する方法
  • Genesis Framework カスタマイズ

GenesisサイトにBody Classを追加する方法

Genesisフレームワーク を使っていると、『Body Class』というフレーズをよく見かけると思います。

名前の通りbodyタグに書かれたクラスのことなんですが、このBody Class、同じグループ同士の見た目を統一したり、そのグループ専用のスクリプトを呼び出したりと、Genesisサイトを効率よくカスタマイズできるようになります。

目次

  • 管理画面から特定の投稿にBody Classを追加
  • functions.phpからbody classを追加
    • 1 全てのページにBody Classを追加
    • 2 特定のスラッグを持つ固定ページにBody Classを追加
    • 3 特定のIDを持つ固定ページにBody Classを追加
    • 4 特定のカテゴリに属するページにBody Classを追加(スラッグ)
    • 5 特定のカテゴリに属するページにBody Classを追加(ID)
    • 6 特定のタグに属するページにBody Classを追加(スラッグ)
    • 7 特定のタグに属するページにBody Classを追加(ID)

管理画面から特定の投稿にBody Classを追加

まずは管理画面からBody Classを追加してみましょう。

Body ClassもPost Classと同じように、それぞれの投稿の編集画面からオリジナルのクラスを追加することができます。

投稿の編集画面の『Layout Settings』というパネルの中に、『Custom Body Class』という入力フォームがあるので、この中に追加したいクラス名を書き込みます。

genesis-body-class-1

ここでは試しにcustom-classというクラス名を入力してみます。

設定を保存すると、<body>タグにcustom-classというクラスが追加されました。

genesis-body-class-2

functions.phpからbody classを追加

今度はfunctions.phpファイルから特定のページにBody Classを追加してみましょう。

1 全てのページにBody Classを追加

全てのページにBody Classを追加するには、functions.phpに以下のコードを追加します。

// 全てのページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    $classes[] = 'custom-class';
    return $classes;

}

※ 追加するBody Classのクラス名はお好みで変更して下さい。

2 特定のスラッグを持つ固定ページにBody Classを追加

特定のスラッグを持つ固定ページBody Classを追加するには、上と同じようにfunctions.phpに以下のコードを追加します。

// sample-pageというスラッグを持つ固定ページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
    if ( is_page( 'sample-page' ) ) 
        $classes[] = 'custom-class';
        return $classes;
}

※ スラッグは、下の画像のような固定ページ編集画面で設定できる『パーマリンク』の一部となる文字列です。

genesis-body-class-3

3 特定のIDを持つ固定ページにBody Classを追加

特定のIDを持つページにBody Classを追加する場合は、以下のようなコードになります。これもfunctions.phpに追加して下さい。

参考)
投稿やカテゴリのIDを管理画面から確認する方法

// IDが1の固定ページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
    if ( is_page( '1' ) )
        $classes[] = 'custom-class';
        return $classes;
}

4 特定のカテゴリに属するページにBody Classを追加(スラッグ)

次は特定のカテゴリに属するページにBody Classを追加する方法です。

指定したカテゴリスラッグを含むページ全てが対象になるので、特定のカテゴリだけ見た目を変更する場合にとても便利です。

// sample-categoryというカテゴリスラッグを持つページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    if ( is_category( 'sample-category' ) )
        $classes[] = 'custom-class';
        return $classes;

}

5 特定のカテゴリに属するページにBody Classを追加(ID)

こちらも特定のカテゴリに属するページにBody Classを追加しますが、ここではカテゴリIDで指定します。

// カテゴリIDが1のページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    if ( is_category( '1' ) )
        $classes[] = 'custom-class';
        return $classes;
}

6 特定のタグに属するページにBody Classを追加(スラッグ)

④で書いた『特定のカテゴリに属するページにBody Classを追加(スラッグ)』のタグ版です。

こちらもfunctions.phpに追加して下さい。

// sample-tagというタグスラッグを持つページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
    if ( is_tag( 'sample-tag' ) )
        $classes[] = 'custom-class';
        return $classes;

}

7 特定のタグに属するページにBody Classを追加(ID)

最後は特定のタグIDを持つページにBody Classを追加する方法です。

以下のコードを追加すると、<body>タグにcustom-classというクラスが追加されます。

// タグIDが1のページにBody Classを追加
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

    if ( is_tag( '1' ) )
        $classes[] = 'custom-class';
        return $classes;

}

関連記事

  • 2016年3月17日

    Genesisサイトの検索フォームを日本語化する方法

  • genesis-simple-edits-3
    2017年9月8日

    Genesisサイトのコピーライトを編集する方法

  • 2016年3月20日

    Genesisサイトのカスタマイズをもっと便利にするショートコードの使い方

  • genesis-custom-thumbnail-size-2
    2016年3月22日

    Genesisサイトに新規サムネイルサイズを追加する方法

  • site-layout-content-sidebar
    2017年9月9日

    たった1行のコードでGenesisサイトのレイアウトを変更する方法

  • Genesis Framework カスタマイズ
  • カテゴリアーカイブ
  • タグアーカイブ
  • 固定ページ
  • 投稿

日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。 Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

詳しく見る
← 前の記事
GenesisサイトにBody Classを追加する方法
Genesisサイトの404ページを日本語化する方法
次の記事 →
GenesisサイトにBody Classを追加する方法
Genesisサイトのページナビゲーションを日本語化する方法

Reader Interactions

トラックバック

  1. GenesisにBodyClassを追加する より:
    2018年11月5日 8:39 PM

    […] こちらのページを参照する […]

    返信

最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

Genesisが好きすぎてGenesisフレームワークの情報サイトGenesis WP Fanを運営しています。日本人のためのGenesisフレームワーク専用WordPressテーマ『Muromachi』を開発しました。

Follow

サイト内検索

カテゴリー

タグ

FontAwesome Genesisの設定 Meta Muromachi ウィジェット カテゴリアーカイブ サムネイル ショートコード タグアーカイブ ツール パンくずリスト フッター プラグイン ヘッダー レイアウト 固定ページ 投稿 日本語化 検索関連 管理画面 記事一覧

PVランキング

  • 1genesis-featured-posts-widget-11

    Genesis Featured Postsウィジェットの使い方

  • 2genesis-child-themes

    Genesisフレームワークでブログを作るのに鉄板のGenesis子テーマ12選

  • 3genesis-seo-settings-4

    Genesis SEO Settings の設定方法

  • 4

    競合サイトに差をつけるGenesisサイト運営のためのプラグイン27選

  • 5genesis-logo

    Genesis Frameworkをインストールする方法

  • 6genesis

    【まずはここから】GenesisとGenesis子テーマをダウンロードする方法

  • 7

    GenesisフレームワークとGenesis子テーマを日本語化する方法

  • 8

    ここ最近人気のGenesis子テーマ10選を紹介してみる

  • 9

    【100種類目前!】変幻自在のGenesis子テーマとは?

  • 10metro-pro-settings-thumbnail

    Genesisサイトの設定方法【MetroPro】

最近の投稿

  • 店舗サイトにオススメなGenesisフレームワーク専用子テーマ6選【WordPress】

  • 調べたいサイトを丸裸にするサイト内検索とページ内検索の使い方【簡単絞り込み検索】

  • WWWって何?意外と知らないウェブについてやさしく解説【World Wide Web】

  • 仕事をするときに気をつけたいGenesisフレームワークのライセンスについて整理してみた

  • 日本人向けGenesisフレームワーク専用のWordPressテーマ「Muromachi」販売のお知らせ

  • 404ページも魅力的に簡単カスタマイズ!Genesis専用プラグインで404ページをカスタマイズする方法

  • Genesis専用子テーマ『Academy Pro』の特徴

  • ここ最近人気のGenesis子テーマ10選を紹介してみる

  • Genesisサイトの投稿にPost Classを追加する方法

  • Genesis専用プラグインでレイアウト機能を簡単に拡張する方法【Genesis Layout Extras】

目次

  • 管理画面から特定の投稿にBody Classを追加
  • functions.phpからbody classを追加
    • 1 全てのページにBody Classを追加
    • 2 特定のスラッグを持つ固定ページにBody Classを追加
    • 3 特定のIDを持つ固定ページにBody Classを追加
    • 4 特定のカテゴリに属するページにBody Classを追加(スラッグ)
    • 5 特定のカテゴリに属するページにBody Classを追加(ID)
    • 6 特定のタグに属するページにBody Classを追加(スラッグ)
    • 7 特定のタグに属するページにBody Classを追加(ID)
ページトップへ

Copyright © 2023 Genesis WP Fan All Rights Reserved.