web-dev-qa-db-ja.com

テーマのカスタマイズを使用して回転するヘッダー/画像スライダーを作成する

それで私はWPを学んでいて、 Theme Customization API を使ってヘッダ用の回転イメージスライダーを作成したいと思います（ このように ）。しかし、私はどのように、そしてどのように 設定 私が画像を撮ってそれを後のアニメーションのためにHTML/JSで保存するために使うべきかを理解することができません。助けて？

imagesthemescustomization
1
laggingreflex

私たちはそれができる！最初に、すべての画像アップロードを含むカスタムカスタマイザにカスタムセクションを追加する必要があります（この例では3を使用します）。

add_action( 'customize_register', 'themename_customize_register' );
function themename_customize_register($wp_customize) {  

$wp_customize->add_section( 'slides', array(
    'title'          => 'Slides',
    'priority'       => 25,
) );

$wp_customize->add_setting( 'first_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'first_slide', array(
    'label'   => 'First Slide',
    'section' => 'slides',
    'settings'   => 'first_slide',
) ) );

$wp_customize->add_setting( 'second_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'second_slide', array(
    'label'   => 'Second Slide',
    'section' => 'slides',
    'settings'   => 'second_slide',
) ) );

$wp_customize->add_setting( 'third_slide', array(
    'default'        => '',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'third_slide', array(
    'label'   => 'Third Slide',
    'section' => 'slides',
    'settings'   => 'third_slide',
) ) );
}

そのコードを使用すると、3つのファイルのアップロードを含む新しいセクションが追加されます。今のところ、私たちはただ画像を使っています。後で、説明、ターゲットURLなどを追加して追加できます。3枚のスライドをアップロードしたら、あとはテンプレートでそれらを呼び出すだけです。

テーマオプションの呼び出しは、 get_theme_mod（） 関数を使用して、非常に簡単です。たとえば、最初のスライドを呼び出すには、次のようにします。

echo get_theme_mod('first_slide')

たとえば、ホームページにスライダーを追加したい場合は、index.phpを開いて次のようなマークアップを追加します。

<ul class="slider">
    <li><img src="<?php echo get_theme_mod('first_slide') ?>" height="" width=""></li>
    <li><img src="<?php echo get_theme_mod('second_slide') ?>" height="" width=""></li>
    <li><img src="<?php echo get_theme_mod('third_slide') ?>" height="" width=""></li>
</ul>

もちろん、実際のスライダーを作成するには、まだCSSとJSの健康的な量が必要ですが、それがテーマカスタマイザでの画像のアップロード、保存、呼び出しの基本です。

あなたがまだ少し漠然としているならば、Ottoは残りの機能性についての完全な紹介を書きました： http://ottopress.com/2012/how-to-leverage-the-theme - 自分のテーマに合わせたカスタマイザ/

4
clark