目次広告 – ケケンタの独学ITブログ

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

ケケンタ — Tue, 11 Jun 2024 06:08:14 +0000

この記事では

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

をご紹介します。

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

ケケンタ

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

ということがあります。

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

この記事でわかること

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

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点

【SWELL】タイトルとアイキャッチ画像の表示を上下逆にする方法

【SWELL】誰でも簡単！フッターのコピーライトをリンクにする方法

無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】

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

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

ケケンタ

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

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

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

ケケンタ

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

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

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

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

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

ケケンタ

画像の右側に写っている

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

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

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

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

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

にすべて入力します。

目次広告にショートコードを設定

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

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

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

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

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

目次広告に設定したショートコードをdiv要素で囲う

ケケンタ

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

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

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

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

に記述していきます。

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

「カスタマイズ」の位置

「追加CSS」の位置

ケケンタ

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

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

「追加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 = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample-cat {
			display: block !important;
		}
		

		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 = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-wp-cat {
			display: block !important;
		}
		

		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 = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample01-cat {
			display: block !important;
		}
		

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

		$headinputtag = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-sample02-cat {
			display: block !important;
		}
		

		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 = <<
		.display-general-cat {
			display: none !important;
		}

		.display-only-wp-cat {
			display: block !important;
		}
		

		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 = <<
    .display-general-cat {
      display: none !important;
    }

    .display-only-wp-cat {
      display: block !important;
    }
    

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

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

まとめ

ケケンタ

以上が目次広告をカテゴリー別に出しわける方法でした！

いかがだったでしょうか。

SWELLの目次広告は非常に便利なのですが、カテゴリー別に目次広告を出しわけるためにはひと手間必要になります。

今回ご紹介した方法で各カテゴリーに適した目次広告を表示すれば、お財布の中身もうるおう……かもしれません。

ケケンタ

この記事が少しでもお役に立ったなら何よりです！

この記事ではWordPressやWeb制作に関する情報を発信していますので、ご興味のある方は他の記事もご覧いただけると嬉しいです。

それでは、最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

SWELL記事一覧

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>

【SWELL】特定のページで目次広告を非表示にする方法

ケケンタ — Mon, 10 Jun 2024 07:22:20 +0000

SWELLの目次広告、便利なのですが収益化メインのページでは表示したくないなあというのが正直なところです。

ケケンタ

特定のページでは目次広告を非表示にする方法って無いのかな……

と色々調べていたところ、その方法を見つけることができたため、今回はそちらをご紹介します。

この記事を読むと分かること

SWELLの目次広告を特定のページで非表示にする方法

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

【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点

【SWELL】タイトルとアイキャッチ画像の表示を上下逆にする方法

【SWELL】誰でも簡単！フッターのコピーライトをリンクにする方法

無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】

目次広告を特定のページで非表示にするソースコード

ケケンタ

早速ですが、以下がベースとなるソースコードです。
ご状況に合わせて、以下のソースコードの一部を修正してご利用いただく形になります。

ベースとなるソースコード

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( ページ判定の条件分岐 ) {
        return false; // 目次広告を非表示
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

ハイライト行（２行目）の「ページ判定の条件分岐」の部分にはご状況に応じた条件をご入力下さい。

以下より利用頻度が高そうな条件の具体例をご紹介します。
ご自身の状況に合わせて、適当なソースコードをfunctions.phpの最後に追加して下さい。

※SWELLで子テーマのfunctoins.phpにソースコードを追加する手順はこちら

特定の「投稿ページ」で目次広告を非表示にする

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_single('投稿ページのスラッグ') ) { // 投稿ページ「スラッグ」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

具体例

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_single('sample_slug') ) { // 投稿ページ「sample_slug」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

特定の「個別ページ」で目次広告を非表示にする

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_page('固定ページのスラッグ') ) { // 固定ページ「スラッグ」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

具体例

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    if ( is_page('sample_slug') ) { // 固定ページ「sample_slug」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

特定の「カスタム投稿ページ」で目次広告を非表示にする

ケケンタ

カスタム投稿ページだけ少し条件の指定までの流れが異なります。

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    // カスタム投稿タイプのスラッグを取得
    global $post;
    $slug = $post->post_name;

    if ( $slug === 'カスタム投稿タイプのスラッグ' ) { // カスタム投稿タイプ「スラッグ」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

具体例

add_filter( 'swell_is_show_toc_ad', function( $is_show ) {
    // カスタム投稿タイプのスラッグを取得
    global $post;
    $slug = $post->post_name;

    if ( $slug === 'sample_slug' ) { // カスタム投稿タイプ「sample_slug」では目次広告を非表示
        return false; 
    }
    return $is_show; // それ以外のページはデフォルトの設定に従う
} );

【WordPress】カスタム投稿タイプの特定ページを判定する方法

SWELLの子テーマのfunctions.phpにソースコードを追加する方法

まずは管理画面の「外観」→「テーマファイルエディタ」をクリックします。

「テーマファイルエディタ」の場所

すると以下のような画面が表示されるので、右側にある「Theme Functions（functions.php）」をクリックします。

functions.phpの場所

このとき、念のため右上の「編集するテーマを選択」が「SWELL CHILD」になっていることをご確認下さい。
※もしなっていなければ、「SWELL CHILD」を選び、「選択」ボタンをクリックして下さい。

続いて、エディタの末尾にソースコードを追加します。

functions.phpの編集内容

ケケンタ

ソースコードを追加したら、最後に画面左下の「ファイルを更新」をクリックして完了です。

目次広告は適切なページにだけ表示しよう

ケケンタ

以上が目次広告を特定のページで非表示にする方法でした！

目次広告は一度設定すればすべてのページに自動反映されて便利なのですが、収益化ページではかえって邪魔になってしまうケースもあります。

そのようなときに今回ご紹介した方法がお役に立てば幸いです。

それでは、最後までご覧いただきありがとうございました！

SWELLのその他の記事はこちら

SWELL記事一覧

今回ご紹介した内容のテーマ

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>