G3 Pro Unit のキャンペーンテキストの表示内容をカスタマイズする

このレッスンの前に

このレッスンは以下のレッスンを理解している事を前提としています。

書き換えるフィルターフック

キャンペーンテキスト部分には vk_campaign_text_options というフィルターフックがあるので、このフィルターを利用してカスタマイズすることができます。

add_filter(
	'vk_campaign_text_options',
	function( $option ) {
		// キャンペーンテキストを改変する条件を指定
		if ( is_page( 'service' ) ) { 
			// キャンペーンテキストの内容を全部書き換える場合
			$option = array(
				'display'                       => 'show_in_full_page',
				'display_position'              => 'header_prepend',
				'icon'                          => '',
				'main_text'                     => 'キャンペーンテキスト',
				'main_text_color'               => '#fff',
				'main_background_color'         => '#f00',
				'main_background_pattern'       => 'fill',
				'button_text'                   => '詳しくはこちら',
				'button_text_color'             => '#4c4c4c',
				'button_background_color'       => '#fff',
				'button_text_hover_color'       => '#dd3333',
				'button_background_hover_color' => '#fff',
				'button_url'                    => 'https://www.vektor-inc.co.jp',
				'link_target'                   => true,
			);
		}
		return $option;
	}
);

記事の編集画面から書き換えられるようにする

この方法だとコードでしか書き換えられないので、管理画面からノーコードでメンテナンスする場合は、それぞれの値をカスタムフィールドを作成しておき、以下のようなコードで書き換えることができます。

add_filter(
	'vk_campaign_text_options',
	function( $option ) {
		// キャンペーンテキストを改変する条件を指定
		if ( is_singular()() ) { 
			// 予めプラグインなどで用意したカスタムフィールドの配列
			$custom_fields = array(
				'display',
				'display_position',
				'icon',
				'main_text',
				'main_text_color',
				'main_background_color',
				'main_background_pattern',
				'button_text',
				'button_text_color',
				'button_background_color',
				'button_text_hover_color',
				'button_background_hover_color',
				'button_url',
				'link_target',
			);
			global $post;
			foreach( $custom_fields as $custom_field ){
				// カスタムフィールドの値を取得
				$value = get_post_meta( $post->ID, $custom_field, true );
				$option[$custom_field] = wp_kses_post( $value );
			}
		}
		return $option;
	}
);

アクションフックを利用して自分で追加する

Lightning にはアクションフックが多数用意されています。

G3 Pro Unit をご利用なら、外観 > カスタマイズ > Lightning 機能設定 パネルの中の 開発ツール > アクションフックの場所を表示 で、アクションの場所が確認することができます。

できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦! – 株式会社ベクトル

WordPressの拡張性を高める機能にアクションフックとフィルターフックがあり、これがあったから世界中で使われる事になったと言っても過言ではない重要な特徴の一つです。…

例えば以下のように書けばヘッダー上部に任意のコードを挿入できます。
add_action(
	'lightning_site_header_before',
	function() {
		?>
	 <p>追加したい内容</p>
		<?php
	}
);

余談

各記事毎に変更の場合運用としては面倒になってしまうので、

  1. キャンペーンテキスト書き換え用の投稿タイプを作る
  2. その投稿タイプに上書き用のカスタムフィールドを登録する
  3. 各記事では、どの書き換え情報を使うかのプルダウンだけ用意する

というのが無難ではないかなと思いますが、このあたりの処理もフルサイト編集ならコードを書かなくてもできるようになるので、ここであえて細かいコードを紹介する記事に時間をかけるよりもフルサイト編集の開発を進めたい思います。

Lightningなら

ビジネスサイトも





ブログも簡単に作れます

有効インストール数9万件以上!Lightning は WordPress公式ディレクトリに登録されているテーマです。いかに最短でサイト制作が出来るかという事に重点を置いて開発しています。デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。