Customize live preview パネルに新しい種類のコントロールを追加する方法を探しています。 add_action( 'customize_register'...
を使ってパネルに新しいセクションを追加する方法を見ました。
私が実装したいコントロールは、異なる種類のカラーピッカーです。 前回の投稿 では、ウィジェットを追加するためにコアクラスを拡張する方法を見てきましたが、ここで欠けているのは、自分のオブジェクトをスコープに入れることができるフック - WP_Customize_Palette_Controlです。で
あなたは ここでコードの始まりを見ることができます 。このコードは私のテーマのfunctions.php
ファイルにあります。
助けてくれてありがとう。ロブ
コードを更新しました。これで、クラスを取り込むためのrequire_once
ができました。そのため、PHPエラーは発生していませんが、新しいコントロールHTMLは表示されません。
<?php
require_once( ABSPATH . WPINC . '/class-wp-customize-setting.php' );
require_once( ABSPATH . WPINC . '/class-wp-customize-section.php' );
require_once( ABSPATH . WPINC . '/class-wp-customize-control.php' );
class WP_Customize_Palette_Control extends WP_Customize_Image_Control {
public $type = 'palette';
public $removed = '';
public $context;
public function enqueue() {
//wp_enqueue_script( 'wp-plupload' );
}
public function to_json() {
parent::to_json();
$this->json['removed'] = $this->removed;
if ( $this->context )
$this->json['context'] = $this->context;
}
public function render_content() {
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<div>
<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
</div>
</label>
<?php
}
}
//new WP_Customize_Palette_Control();
//add_action('customize_controls_init', 'WP_Customize_Palette_Control');
// add an option to the customize panel
function sci_customize_controls_init($wp_customize) {
$wp_customize->add_section( 'themename_color_scheme', array(
'title' => __( 'Color Scheme', 'themename' ),
'priority' => 35,
) );
$wp_customize->add_setting( 'themename_theme_options[color_scheme]', array(
'default' => 'some-default-value',
'type' => 'option',
'capability' => 'edit_theme_options',
) );
$wp_customize->add_control( 'themename_color_scheme', array(
'label' => __( 'Color Scheme', 'themename' ),
'section' => 'themename_color_scheme',
'settings' => 'themename_theme_options[color_scheme]',
'type' => 'palette',
'choices' => array(
'value1' => 'Choice 1',
'value2' => 'Choice 2',
'value3' => 'Choice 3',
),
) );
}
add_action( 'customize_register', 'sci_customize_controls_init' );
私の現在のテーマで、これをどのように使用できるかを見ることができます。クラスを使用することもできます。これを参照してください class Githubで functions.php
をチェックしてこれを含めてください。
customize_register
フックを使用して、テーマカスタマイザーのカスタム設定を登録できます。
add_action( 'customize_register', 'themedemo_customize' );
function themedemo_customize($wp_customize) {
$wp_customize->add_section( 'themedemo_demo_settings', array(
'title' => 'Demonstration Stuff',
'priority' => 35,
) );
$wp_customize->add_setting( 'some_setting', array(
'default' => 'default_value',
) );
$wp_customize->add_control( 'some_setting', array(
'label' => 'Text Setting',
'section' => 'themedemo_demo_settings',
'type' => 'text',
) );
$wp_customize->add_setting( 'some_other_setting', array(
'default' => '#000000',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'some_other_setting', array(
'label' => 'Color Setting',
'section' => 'themedemo_demo_settings',
'settings' => 'some_other_setting',
) ) );
}
以下の例のように使用します↓:
echo 'some_setting => ' .get_theme_mod( 'some_setting', 'default_value' )."\n";
echo 'some_other_setting => ' .get_theme_mod( 'some_other_setting', '#000000' )."\n";
echo 'non_existent_setting => '.get_theme_mod( 'non_existent_setting', 'default_value' )."\n";
コントロールを変更することもできます:
$wp_customize->add_control( 'themename_color_scheme', array(
'label' => __( 'Color Scheme', 'themename' ),
'section' => 'themename_color_scheme',
'settings' => 'themename_theme_options[color_scheme]',
'type' => 'radio',
'choices' => array(
'value1' => 'Choice 1',
'value2' => 'Choice 2',
'value3' => 'Choice 3',
),
) );
デフォルトの制御タイプはtext
です。テキストボックスコントロールを作成します。別の制御タイプはdropdown-pages
で、WordPressページのドロップダウンリストを作成します。
しかし、それだけではありません。実際にはさらにいくつかありますが、それらは非常にカスタマイズされているため、宣言が異なります。
これはOOPを利用します:
$wp_customize->add_control(
new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
'label' => __( 'Link Color', 'themename' ),
'section' => 'themename_color_scheme',
'settings' => 'themename_theme_options[link_color]',
) )
);
WP_Customize_Upload_Control
–ファイルのアップロードボックスを提供します。ただし、おそらくこれを直接使用することはないので、他の目的に拡張することをお勧めします。WP_Customize_Image_Control
–これにより、画像ピッカーとアップローダーボックスが提供されます。アップロードコントローラーを拡張します。カスタムバックグラウンドピースで実際に見ることができます。ユーザーは、新しいファイルをアップロードしてバックグラウンドイメージにすることができます。WP_Customize_Header_Image_Control
–ヘッダーピースのサイズ変更アクションのため、少し特別な処理と表示が必要なので、WP_Customize_Header_Image_Control
はWP_Customize_Image_Control
はその機能を追加します。カスタムヘッダーピースで実際に動作を確認できます。ユーザーはヘッダーファイルとして新しいファイルをアップロードできます。「テーマカスタマイザー」の詳細については、 ottos blog をご覧ください。
2012年11月6日更新
読み取りの可能性およびその他の例については、ライブサンプルを参照してください。ソースとドキュメントの open repo を参照してください。
2013年1月15日更新
カスタムクラスのgithub にレポジトリを作成し、それを簡単に使用できるようにします。たぶん、あなたはそれを使うか、あなたのアイデアと解決策で前進することができます。
わかりました、これをする方法はここにあります。コントロールクラスを1つ以上の新しいファイルに分けます。
Customize_registerに関数またはメソッドがフックされていますね。その関数や方法では、カスタムコントロールを追加する直前に新しいファイルを1回必要とします。それでPHPはクラスを再定義することについて不平を言いません。
注:これはそのままでは機能しませんが、トリックを示しています。
add_action('customize_register', array('myAddControl', 'customize_register') );
class myAddControl{
public function customize_register()
{
global $wp_customize;
//This will do the trick
require_once(dirname(__FILE__).'/class-gctfw-theme-control.php');
$wp_customize->add_section( 'gctfw_switch_theme' , array(
'title' => 'Switch theme',
'priority' => 25,
) );
$wp_customize->add_setting( 'gctfw_select_theme' , array(
'default' => $wp_customize->theme()->get('Name'),
'transport' => 'refresh',
'capabilities' => 'manage_options'
) );
$myControl = new gctfw_Theme_Control( $wp_customize, 'gctfw_select_theme', array(
'label' => __( 'Select theme', 'mytheme' ),
'section' => 'gctfw_switch_theme',
'settings' => 'gctfw_select_theme',
) ) ;
$wp_customize->add_control( $myControl );
}
}//class
あなたはあなたのクラスを使ったことはありません。クラスの新しいインスタンスをadd_controlメソッドに渡してみます。
$control_args = array(
// your args here
);
$my_control = new WP_Customize_Palette_Control(
$wp_customize, 'themename_color_scheme', $control_args);
$wp_customize->add_control($my_control);
また、WPはあなたの設定のオプション名が配列の一部であることを知っているとは思いません。たぶんそれはthemename_theme_options_color_scheme
の代わりにthemename_theme_options[color_scheme]
を持つほうが良いです。
あなたの拡張するクラスは画像アップロードコントロールに属します。カラーピッカーを作成している場合は、おそらく WP_Customize_Control クラスを拡張する必要があります。
完全を期すために:テーマカスタマイザに数値フィールドを追加する方法の例。
class Customize_Number_Control extends WP_Customize_Control
{
public $type = 'number';
public function render_content()
{
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<input type="number" size="2" step="1" min="0" value="<?php echo esc_attr( $this->value() ); ?>" />
</label>
<?php
}
}
WP_Customizeの前にバックスラッシュを追加する必要があると思います。だから、それはなります
class WP_Customize_Palette_Control extends \WP_Customize_Image_Control
なぜなら、 バックスラッシュ は、WP_Customize_Image_Controlが same からではないと想定しているからです。
それが助けになったかどうか私に知らせて