Blog

|
Sunday, July 7th, 2024

WordPress theme customizer images

カスタマイザーを使用してテーマへ反映する機能を実装します。

ご自由にご利用ください。

Customizer

WordPress Version 3.4 で導入されたテーマカスタマイズ API で、テーマをカスタマイズすることができます。

カスタマイザーを使用すると、変更を公開する前にプレビューできます。

テーマの外観や設定を変更し更新することにより保存することができます。

カスタマイザーに新たな項目を追加しテーマへ反映する自由度の高いテーマを実現します。

Previews

Theme Customizermizer

Introduced in WordPress Version 3.4, Theme Customizer allows you to change the appearance and settings of various themes without exposing your changes to the world. Realize themes with a high degree of freedom.

How to start the customizer

カスタマイザーを開始するには、次のいずれかの手順を実行します。

WordPress 管理画面「外観」→「カスタマイズ」

ツールバーから「カスタマイズ」

New addition

カスタマイザーに項目を追加するには「functions.php」または任意のファイルにコードを記述します。

画像とテキストを表示する機能を追加します。

Examples functions

/**
 * Theme customization API.
 * 
 */

function mytheme_customize_register( $wp_customize ) {

	/* - section settings - */

	// add sections（セクションの追加）
	$wp_customize->add_section( 'section_image', array(
		'title' => __( 'Images', 'themes' ),
		'priority' => 220,
		'description' => __( 'Section settings', 'themes' ),
	) );

	/* - image settings - */

	// add theme settings（テーマ設定の追加）
	$wp_customize->add_setting( 'mytheme_options[image_checkbox]', array(
		'default' => false,
		'type' => 'option',
		'transport' => 'postMessage',
		'sanitize_callback' => 'theme_sanitize_checkbox',
	) );

	// add controls（コントロールの追加）
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'mytheme_options[image_checkbox]', array(
		'label' => __( 'checkbox', 'themes' ),
		'section' => 'section_image',
		'settings' => 'mytheme_options[image_checkbox]',
		'type' => 'checkbox',
		'description' => __( '画像を表示するにはチェックボックスをオンにしてください。画像を非表示にするにはチェックボックスをオフにしてください。', 'themes' ),
	) ) );

	// add theme settings（テーマ設定の追加）
	$wp_customize->add_setting( 'mytheme_options[image]', array(
		'default' => '',
		'type' => 'option',
		'transport' => 'postMessage',
		'sanitize_callback' => 'theme_sanitize_file',
	) );

	// add controls（コントロールの追加）
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'mytheme_options[image]', array(
		'label' => __( 'Images', 'themes' ),
		'section' => 'section_image',
		'settings' => 'mytheme_options[image]',
		'description' => __( '画像を指定するには「画像を選択」から任意の画像を選択し「公開」をクリックしてください。画像を変更するには「画像を変更」から任意の画像を選択し「公開」をクリックしてください。画像を削除するには「削除」をクリックし「公開」をクリックしてください。', 'themes' ),
	) ) );

	/* - heading settings - */

	// add theme settings（テーマ設定の追加）
	$wp_customize->add_setting( 'mytheme_options[image_heading_checkbox]', array(
		'default' => false,
		'type' => 'option',
		'transport' => 'postMessage',
		'sanitize_callback' => 'theme_sanitize_checkbox',
	) );

	// add controls（コントロールの追加）
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'mytheme_options[image_heading_checkbox]', array(
		'label' => __( 'checkbox', 'themes' ),
		'section' => 'section_image',
		'settings' => 'mytheme_options[image_heading_checkbox]',
		'type' => 'checkbox',
		'description' => __( 'テキストを表示するにはチェックボックスをオンにしてください。テキストを非表示にするにはチェックボックスをオフにしてください。', 'themes' ),
	) ) );

	// add theme settings（テーマ設定の追加）
	$wp_customize->add_setting( 'mytheme_options[image_heading]', array(
		'default' => '',
		'type' => 'option',
		'transport' => 'postMessage',
		'sanitize_callback' => 'sanitize_text_field',
	) );

	// add controls（コントロールの追加）
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'mytheme_options[image_heading]', array(
		'label' => __( 'Headings', 'themes' ),
		'section' => 'section_image',
		'settings' => 'mytheme_options[image_heading]',
		'type' => 'text',
		'description' => __( '任意のテキストを入力し「公開」をクリックしてください。', 'themes' ),
	) ) );

	/* - description settings - */

	// add theme settings（テーマ設定の追加）
	$wp_customize->add_setting( 'mytheme_options[image_description_checkbox]', array(
		'default' => false,
		'type' => 'option',
		'transport' => 'postMessage',
		'sanitize_callback' => 'theme_sanitize_checkbox',
	) );

	// add controls（コントロールの追加）
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'mytheme_options[image_description_checkbox]', array(
		'label' => __( 'checkbox', 'themes' ),
		'section' => 'section_image',
		'settings' => 'mytheme_options[image_description_checkbox]',
		'type' => 'checkbox',
		'description' => __( 'テキストを表示するにはチェックボックスをオンにしてください。テキストを非表示にするにはチェックボックスをオフにしてください。', 'themes' ),
	) ) );

	// add theme settings（テーマ設定の追加）
	$wp_customize->add_setting( 'mytheme_options[image_description]', array(
		'default' => '',
		'type' => 'option',
		'transport' => 'postMessage',
		'sanitize_callback' => 'sanitize_text_field',
	) );

	// add controls（コントロールの追加）
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'mytheme_options[image_description]', array(
		'label' => __( 'Descriptions', 'themes' ),
		'section' => 'section_image',
		'settings' => 'mytheme_options[image_description]',
		'type' => 'textarea',
		'description' => __( '任意のテキストを入力し「公開」をクリックしてください。', 'themes' ),
	) ) );

}
add_action( 'customize_register', 'mytheme_customize_register' );

/* - function to get setting value（設定値を取得する関数） - */

function mytheme_customize_register_url() {

	// images
	return esc_url( get_theme_mod( 'mytheme_options[image_checkbox]', true ) );
	return esc_url( get_theme_mod( 'mytheme_options[image]' ) );

	// headings
	return esc_url( get_theme_mod( 'mytheme_options[image_heading_checkbox]', true ) );
	return esc_url( get_theme_mod( 'mytheme_options[image_heading]' ) );

	// descriptions
	return esc_url( get_theme_mod( 'mytheme_options[image_description_checkbox]', true ) );
	return esc_url( get_theme_mod( 'mytheme_options[image_description]' ) );

}

/* - sanitizing checkbox - */ 
 
function theme_sanitize_checkbox( $checked ) {
	return ( ( isset( $checked ) && true == $checked ) ? true : false );
}

/* - sanitizing files - */

function theme_sanitize_file( $input, $setting ) {
	$mimes = array(
		'jpg|jpeg|jpe' => 'image/jpeg',
		'gif' => 'image/gif',
		'png' => 'image/png',
		'svg' => 'image/svg+xml',
		'bmp' => 'image/bmp',
		'tif|tiff' => 'image/tiff',
		'ico' => 'image/x-icon',
	);
	$file = wp_check_filetype( $input, $mimes );
	return ($file['ext'] ? $input : $setting->default );
}

Actions

/* - アクションを追加するには「customize_register」を定義します。 - */

function mytheme_customize_register( $wp_customize ) {

}
add_action( 'customize_register', 'mytheme_customize_register' );

Add sections

/* - セクションを追加するには「$wp_customize->add_section()」メソッドを定義します。 - */

$wp_customize->add_section( $id, $args );

Priorities

カスタマイザーの基本項目です。参考にしてください。（テーマによって異なる場合があります。）

基本項目（Title／ID／Priority）

サイト基本情報（Site Title & Tagline）／title_tagline／20

色（Colors）／colors／40

ヘッダーメディア（Header Image）／header_image／60

背景画像（Background Image）／background_image／80

メニュー（Menus（Panel））／nav_menus／100

ウィジェット（Widgets（Panel））／widgets／110

ホームページ設定（Static Front Page）／static_front_page／120

追加 CSS（Additional CSS）／custom_css／200

Add settings

/* - 設定を追加するには「$wp_customize->add_setting()」メソッドを定義します。 - */

$wp_customize->add_setting( $id, $args );

Add controls

/* - コントロールを追加するには「$wp_customize->add_control()」メソッドを定義します。 - */

$wp_customize->add_control( $id, $args );

Get setting values

/* - 設定した値を取得するには「get_theme_mod()」関数を定義します。 - */

get_theme_mod( $name, $default );

Examples html

<!-- example -->

<div class="example">

	<figure class="figure" style="background-image: url( <?php $options = get_option( 'mytheme_options' ); if ( $options['image_checkbox'] ) : ?><?php echo esc_html( $options['image'] ); ?><?php endif; ?> );">

		<figcaption class="figcaption">

			<?php $options = get_option( 'mytheme_options' ); if ( $options['image_heading_checkbox'] ) : ?>
				<h2 class="heading">
					<a href="<?php echo esc_url( home_url() ); ?>" rel="home">
						<?php echo esc_html( $options['image_heading'] ); ?>
					</a>
				</h2>
			<?php endif; ?>

			<?php $options = get_option( 'mytheme_options' ); if ( $options['image_description_checkbox'] ) : ?>
				<p class="description">
					<?php echo esc_html( $options['image_description'] ); ?>
				</p>
			<?php endif; ?>

		</figcaption>

	</figure>

</div>

<!-- /example -->

Examples css

/* - example - */

.example {
	width: 100%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
}

figure.figure {
	display: block;
	width: 100%;
	min-height: 50vh;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

figcaption.figcaption {
	width: 100%;
	min-height: 50vh;
	margin: 0px 0px 0px 0px;
	padding: 25px 25px 25px 25px;
	background-color: rgba(0, 0, 0, 0.0);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

h2.heading {
	width: 100%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
}

h2.heading {
	font-family: sans-serif;
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	color: rgba(0, 0, 0, 0.8);
}

h2.heading a {
	font-family: sans-serif;
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	color: rgba(0, 0, 0, 0.8);
	transition: all .5s;
}

h2.heading a:hover {
	color: rgba(0, 0, 0, 0.4);
}

h2.heading a:active {
	color: rgba(0, 0, 0, 0.8);
}

p.description {
	width: 100%;
	height: auto;
	margin: 25px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
}

p.description {
	font-family: sans-serif;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	color: rgba(0, 0, 0, 0.8);
}

/* - /example - */

Summary

最後までご高覧いただきましてありがとうございました。

カスタマイザーを使用してテーマへ反映する機能をご紹介させていただきました。

必要に応じて各コードを変更してご自由にご利用ください。

現場からは以上でした。
Vol.15

Related Posts