この記事にはプロモーションが含まれています。

【SWELL】「目次広告」の内容をカテゴリーごとに変更する方法

2024-06-112024-06-24

ケケンタ

こんにちは！　ケケンタです。

今回は

SWELLで「目次広告」の内容を
カテゴリーごとに変更する方法

をご紹介します。

SWELLの「目次広告」を使用すると簡単に目次の前後に任意の広告を表示できて便利なのですが、

ケケンタ

このカテゴリーでは別の広告を表示したいんだよな……

ということがあります。

今回ご紹介するのはそのようなお悩みを解決できる方法です。

この記事でわかること

SWELLの目次広告をカテゴリーごとに変更する方法
親カテゴリーを基準に目次広告を変更する方法
祖先カテゴリーを基準に目次広告を変更する方法

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

【作業の流れ】カテゴリーごとに目次広告を変更する方法

実は「目次広告」を設定する項目欄ではHTMLタグを使用することが可能です。

ケケンタ

そちらを踏まえた上で、まずは簡単に今回使用する方法の作業の流れをご説明します。

カテゴリーごとに目次広告を変更する作業の流れ

使用したい広告を「広告タグ」もしくは「ブログパーツ」に登録しておく
「SWELL設定」→「広告コード」→「目次広告」に使用したい広告のショートコードをすべて入力する
②で入力したショートコードそれぞれを、任意のCSSクラス名を付けたdiv要素で囲う
「カスタマイズ」→「追加CSS」に③で設定した各div要素を非表示にするCSSを記述する
functinos.phpにカテゴリー別制御用の処理を記述する

ケケンタ

手順が少々複雑になる箇所もありますが、以降より画像も使用してできるだけ丁寧に解説していきます！

① 使用したい広告を「広告タグ」もしくは「ブログパーツ」に登録しておく

まずは使用したい広告（コンテンツ）を「広告タグ」もしくは「ブログパーツ」に登録します。

以下はブログパーツ登録後の画面

ブログパーツにコンテンツを登録した後の一覧画面の様子 — コンテンツを登録した後のブログパーツ一覧画面（一部抜粋）

ケケンタ

画像の右側に写っている

の部分がショートコードです。

② 「目次広告」に使用したい広告のショートコードをすべて入力する

手順③を完了するまでの間はすべての「目次広告」が表示されてしまうため、この手順②を行う前に手順③の作業内容もご確認いただくことを推奨します。

①で用意したショートコードを

「SWELL設定」→「広告コード」→「目次広告」

にすべて入力します。

③ ②で入力したショートコードを任意のCSSクラス名を付けたdiv要素で囲う

この作業が「目次広告をカテゴリーごとに制御する」上で最も重要です。

②で入力したショートコードを任意のCSSクラス名を付与したdiv要素で囲います。

例えば、以下の画像では次のような形でクラス名を付与しています。

デフォルトで全体に表示したい目次広告……display-general-cat
特定のカテゴリー（例では「WordPress」カテゴリー）で表示したい目次広告……display-only-wp-cat

ケケンタ

１行目には特定のカテゴリーに依存せず表示したい目次広告のショートコード
２行目には「WordPress」カテゴリーにだけ表示したい目次広告のショートコードを入力した状態です。

④ 「追加CSS」に③で設定した各div要素を非表示にするCSSを記述する

次に、③でショートコードに設定した各div要素を非表示にするためのCSSを

「外観」→「カスタマイズ」→「追加CSS」

に記述していきます。

すべてのdiv要素を非表示にするのではなく、特定のカテゴリーでだけ表示したい目次広告のdiv要素だけを非表示にします。

ケケンタ

「追加CSS」を開いたら以下のように、「特定のカテゴリーでだけ表示したい目次広告」に設定したCSSクラス名に対してCSSを記述します。

（例）「WordPress」カテゴリーでだけ表示したい目次広告の
CSSクラス（display-only-wp-cat）にCSSを記述

.display-only-wp-cat {
  display: none;
}

対象のショートコードが複数ある場合は以下のように行を追加
※最後の行以外は「,」で区切ってあることに注意

.display-only-wp-cat,
.display-only-sample01-cat,
.display-only-sample02-cat {
  display: none;
}

ここまでの作業で、いったんすべての目次に「デフォルトで全体に表示したい目次広告」だけが表示されている状態になりました。

ケケンタ

このあとご紹介するソースコードをfunctions.phpに追加することで、カテゴリーごとに表示する目次広告を変更することが可能です。

⑤ functinos.phpにカテゴリー別制御用の処理を記述する

functions.phpを編集する際には必ずバックアップをお取りいただき、自己責任のもとで作業を行ってください。

functions.phpの最後に以下のソースコードを追加します。

/**
 * 現在のカテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
     * カテゴリー「サンプル」を判定
     */ 
	if( $cat->slug == 'sample' ){
		$headinputtag = <<<EOM

		<style>
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample-cat {
			display: block !important;
		}
		</style>

		EOM;
		echo $headinputtag;
	}
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ハイライトされている11行目と19行目の「sample」、「.display-only-sample-cat」がご自身の設定内容に合わせて変更していただく箇所です。

例えば以下のような内容で設定をしていた場合には、次のようなソースコードになります。

「WordPress」カテゴリーでのみ表示したい
「WordPress」カテゴリーでのみ表示した目次広告のショートコードのCSSクラス名は「display-only-wp-cat」に設定してある。

（例）「WordPress」カテゴリーでのみ表示したい目次広告を有効にする

/**
 * 現在のカテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
     * カテゴリー「WordPress」を判定
     */ 
	if( $cat->slug == 'wordpress' ){
		$headinputtag = <<<EOM

		<style>
		.display-general-cat {
			display: none !important;
		}

		.display-only-wp-cat {
			display: block !important;
		}
		</style>

		EOM;
		echo $headinputtag;
	}
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ケケンタ

以上でカテゴリーごとに表示する目次広告を変更することが可能です！

複数のカテゴリーを制御したい場合のソースコード

ここまでのご説明では「WordPress」カテゴリーひとつに限った内容になっていましたが、実際には複数のカテゴリーで目次広告を出しわけたいという方も多いかと思います。

その場合はelse if文を使用してソースコードを記述します。

複数のカテゴリーを制御したい場合のソースコード

/**
 * 現在のカテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
     * カテゴリー「サンプル０１」を判定
     */ 
	if( $cat->slug == 'sample01' ){
		$headinputtag = <<<EOM

		<style>
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample01-cat {
			display: block !important;
		}
		</style>

		EOM;
		echo $headinputtag;
	
    /**
     * カテゴリー「サンプル０２」を判定
     */ 
	} else if( $cat->slug == 'sample02' ) {

		$headinputtag = <<<EOM

		<style>
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample02-cat {
			display: block !important;
		}
		</style>

		EOM;
		echo $headinputtag;
    /**
     * カテゴリー「サンプル０３」を判定
     */ 
	} else if( $cat->slug == 'sample03' ) {
               
                 ～　省略　～
    }
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

「親カテゴリー」を基準に目次広告を出しわけたい場合

人によってはカテゴリーに階層を設定しており、「子カテゴリーではなく親カテゴリー」で目次広告を出しわけしたいという場合も多いのではないかと思います。

その場合は以下のソースコードをお使いください。

親カテゴリーで目次広告を出しわけたい場合

/**
 * 親カテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {

	/**
	 * 現在のカテゴリー情報を取得
	 */
	$cats = get_the_category(); 
	$cat = $cats[0];

	/**
	 * 親カテゴリーがあれば親カテゴリーを取得する
	 */
	if( $cat->parent ){ //親カテゴリの場合
		$parent = get_category( $cat->parent );
		$cat_slug = $parent->slug;
	} else { //子カテゴリの場合
		$cat_slug =  $cat->slug;
	}

	/**
     * カテゴリー「WordPress」を判定
     */ 
	if( $cat_slug == 'wordpress' ){
		$headinputtag = <<<EOM

		<style>
		.display-general-cat {
			display: none !important;
		}

		.display-only-wp-cat {
			display: block !important;
		}
		</style>

		EOM;
		echo $headinputtag;
	}
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ハイライト行（12～20行目）が増え、ここで親カテゴリーかどうかの判定を行っています。

「祖先カテゴリー」を基準に目次広告を出しわけたい場合

もしかしたらカテゴリー階層を３階層にしている方もいらっしゃるかもしれません。

そのようなとき、親カテゴリーではなく「祖先カテゴリー」で目次広告を出しわけしたいという方は以下のソースコードをお使いください。

祖先カテゴリーで目次広告を出しわけたい場合

/**
 * 祖先カテゴリーごとに目次広告を切り替える
 */
function my_headinput_toc_ctrl_css() {

  /**
   * 現在のカテゴリーを取得
   */
  $cats = get_the_category(); 
  $cat = $cats[0];

  /**
   * 祖先カテゴリーがあれば祖先カテゴリーを取得する
   */
  if( !$cat->parent ){ //現在のページが最上位のカテゴリーなら
    $cat_slug = $cat->slug; // 現在のカテゴリーのスラッグ
  } else { //祖先カテゴリーを表示するなら
    $ancestor = array_pop(get_ancestors( $cat->cat_ID, 'category' )); //一番上のカテゴリーIDを取得
    $cat_slug = get_category($ancestor)->slug; // 祖先カテゴリーのスラッグ
  }

  // カテゴリー「sosen」を判定
  if( $cat_slug == 'sosen' ){
    $headinputtag = <<<EOM

    <style>
    .display-general-cat {
      display: none !important;
    }

    .display-only-wp-cat {
      display: block !important;
    }
    </style>

    EOM;
    echo $headinputtag;
  }
}
add_action( 'wp_head', 'my_headinput_toc_ctrl_css', 99);

ハイライト行（12～20行目）が増え、ここで親カテゴリーかどうかの判定を行っています。