رفتن به مطلب

مشکل در ساخت بخش سفارشی سازی تغییر رنگ و تصویر هدر


پست های پیشنهاد شده

سلام دوستان گرامی.

میخوام برای هدر قالبم یه بخش تو تنظیمات سفارشی سازی بسازم که بشه براحتی از اون طریق بصورت داینامیک تصویر و یا رنگ زمینه هدر رو تغییر داد.

برای انتخاب تصویر یا تغییرش تو هدر کد هایی هست که براحتی انجام میشه.

ولی برای تغییر رنگ بکگراند مورد مناسبی پیدا نکردم. فقط یه مورد پیدا کردم که هم انتخاب تصویر و هم رنگ رو باهم داره. مشکل اینه که وقتی تو بخش سفارشی سازی رنگ یا تصویر انتخاب میکنم بصورت پرویو یا همون نمایش زنده تغییری اعمال نمیشه. بعد ذخیره و انتشار هم همینطور.

کدی که تو فانکشن میذارم اینه:

function sk_sanitize_hex_color( $hex_color, $setting ) {
    // Sanitize $input as a hex value without the hash prefix.
    $hex_color = sanitize_hex_color( $hex_color );

    // If $input is a valid hex value, return it; otherwise, return the default.
    return ( ! null( $hex_color ) ? $hex_color : $setting->default );
}


/**
 * Image sanitization callback example.
 *
 * Checks the image's file extension and mime type against a whitelist. If they're allowed,
 * send back the filename, otherwise, return the setting default.
 *
 * - Sanitization: image file extension
 * - Control: text, WP_Customize_Image_Control
 *
 * @see wp_check_filetype() https://developer.wordpress.org/reference/functions/wp_check_filetype/
 *
 * @param string               $image   Image filename.
 * @param WP_Customize_Setting $setting Setting instance.
 * @return string The image filename if the extension is allowed; otherwise, the setting default.
 */
function sk_sanitize_image( $image, $setting ) {

    /*
     * Array of valid image file types.
     *
     * The array includes image mime types that are included in wp_get_mime_types()
     */
    $mimes = array(
        'jpg|jpeg|jpe' => 'image/jpeg',
        'gif'          => 'image/gif',
        'png'          => 'image/png',
        'bmp'          => 'image/bmp',
        'tif|tiff'     => 'image/tiff',
        'ico'          => 'image/x-icon'
    );

    // Return an array with file extension and mime_type.
    $file = wp_check_filetype( $image, $mimes );

    // If $image has a valid mime_type, return it; otherwise, return the default.
    return ( $file['ext'] ? $image : $setting->default );
}


/**
 * Customizer: Add Sections
 *
 * This file demonstrates how to add Sections to the Customizer
 *
 * @package   code-examples
 * @copyright Copyright (c) 2015, WordPress Theme Review Team
 * @license   http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU General Public License, v2 (or newer)
 */


/**
 * Theme Options Customizer Implementation.
 *
 * Implement the Theme Customizer for Theme Settings.
 *
 * @link http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
 *
 * @param WP_Customize_Manager $wp_customize Object that holds the customizer data.
 */
function sk_register_theme_customizer( $wp_customize ) {

    /*
     * Failsafe is safe
     */
    if ( ! isset( $wp_customize ) ) {
        return;
    }


    /**
     * Add Header Section for General Options.
     *
     * @uses $wp_customize->add_section() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_section/
     * @link $wp_customize->add_section() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
     */
    $wp_customize->add_section(
        // $id
        'sk_section_header',
        // $args
        array(
            'title'         => __( 'Header Background', 'theme-slug' ),
            'description'   => __( 'Set background color and/or background image for the header', 'theme-slug' ),
            // 'panel'          => 'sk_panel_general'
        )
    );


    /**
     * Header Background Color setting.
     *
     * - Setting: Header Background Color
     * - Control: WP_Customize_Color_Control
     * - Sanitization: hex_color
     *
     * Uses a color wheel to configure the Header Background Color setting.
     *
     * @uses $wp_customize->add_setting() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_setting/
     * @link $wp_customize->add_setting() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
     */
    $wp_customize->add_setting(
        // $id
        'header_background_color',
        // $args
        array(
            'default'           => '',
            'type'              => 'theme_mod',
            'capability'        => 'edit_theme_options',
            'sanitize_callback' => 'sk_sanitize_hex_color',
            'transport'         => 'postMessage'
        )
    );


    /**
     * Header Background Image setting.
     *
     * - Setting: Header Background Image
     * - Control: WP_Customize_Image_Control
     * - Sanitization: image
     *
     * Uses the media manager to upload and select an image to be used as the header background image.
     *
     * @uses $wp_customize->add_setting() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_setting/
     * @link $wp_customize->add_setting() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
     */
    $wp_customize->add_setting(
        // $id
        'header_background_image',
        // $args
        array(
            'default'           => '',
            'type'              => 'theme_mod',
            'capability'        => 'edit_theme_options',
            'sanitize_callback' => 'sk_sanitize_image',
            'transport'         => 'postMessage'
        )
    );

    /**
     * Core Color control.
     *
     * - Control: Color
     * - Setting: Header Background Color
     * - Sanitization: hex_color
     *
     * Register "WP_Customize_Color_Control" to be used to configure the Header Background Color setting.
     *
     * @uses $wp_customize->add_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_control/
     * @link $wp_customize->add_control() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
     *
     * @uses WP_Customize_Color_Control() https://developer.wordpress.org/reference/classes/wp_customize_color_control/
     * @link WP_Customize_Color_Control() https://codex.wordpress.org/Class_Reference/WP_Customize_Color_Control
     */
    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            // $wp_customize object
            $wp_customize,
            // $id
            'header_background_color',
            // $args
            array(
                'settings'      => 'header_background_color',
                'section'       => 'sk_section_header',
                'label'         => __( 'Header Background Color', 'theme-slug' ),
                'description'   => __( 'Select the background color for header.', 'theme-slug' )
            )
        )
    );


    /**
     * Image Upload control.
     *
     * Control: Image Upload
     * Setting: Header Background Image
     * Sanitization: image
     *
     * Register "WP_Customize_Image_Control" to be used to configure the Header Background Image setting.
     *
     * @uses $wp_customize->add_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_control/
     * @link $wp_customize->add_control() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
     *
     * @uses WP_Customize_Image_Control() https://developer.wordpress.org/reference/classes/wp_customize_image_control/
     * @link WP_Customize_Image_Control() https://codex.wordpress.org/Class_Reference/WP_Customize_Image_Control
     */
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            // $wp_customize object
            $wp_customize,
            // $id
            'header_background_image',
            // $args
            array(
                'settings'      => 'header_background_image',
                'section'       => 'sk_section_header',
                'label'         => __( 'Header Background Image', 'theme-slug' ),
                'description'   => __( 'Select the background image for header.', 'theme-slug' )
            )
        )
    );


}

// Settings API options initilization and validation.
add_action( 'customize_register', 'sk_register_theme_customizer' );


/**
 * Registers the Theme Customizer Preview with WordPress.
 *
 * @package    sk
 * @since      0.3.0
 * @version    0.3.0
 */
function sk_customizer_live_preview() {
    wp_enqueue_script(
        'sk-theme-customizer',
        get_stylesheet_directory_uri() . '/js/theme-customizer.js',
        array( 'customize-preview' ),
        '0.1.0',
        true
    );
} // end sk_customizer_live_preview
add_action( 'customize_preview_init', 'sk_customizer_live_preview' );


/**
 * Writes the Header Background Color and/or Image out to the 'head' element of the document
 * by reading the value(s) from the theme mod value in the options table.
 */
function sk_customizer_css() {
?>
     <style type="text/css">
        .site-header {
            background-color: <?php echo get_theme_mod( 'header_background_color' ); ?>;
        }

        <?php if ( 0 < count( strlen( ( $header_background_image_url = get_theme_mod( 'header_background_image' ) ) ) ) ) { ?>
            .site-header {
                background-image: url( <?php echo $header_background_image_url; ?> );
            }
        <?php } // end if ?>
     </style>
<?php
} // end sk_customizer_css

add_action( 'wp_head', 'sk_customizer_css');

 

و این هم کد فایل جی اس:

 

(function( $ ) {
	"use strict";

	// Header Background Color - Color Control
	wp.customize( 'header_background_color_setting', function( value ) {
		value.bind( function( to ) {
			$( '.site-header' ).css( 'backgroundColor', to );
		} );
	});

	// Header Background Image - Image Control
	wp.customize( 'header_background_image_setting', function( value ) {
		value.bind( function( to ) {
			$( '.site-header' ).css( 'background-image', 'url( ' + to + ')' );
		} );
	});

	// Header Background Image Repeat - Checkbox
	wp.customize( 'header_background_image_repeat_setting', function( value ) {
		value.bind( function( to ) {
			$( '.site-header' ).css( 'background-repeat', true === to ? 'repeat' : 'no-repeat' );
		} );
	} );

	// Header Background Image Size - Checkbox
	wp.customize( 'header_background_image_size_setting', function( value ) {
		value.bind( function( to ) {
			$( '.site-header' ).css( 'background-size', true === to ? 'cover' : 'auto auto' );
		} );
	} );

})( jQuery );

 

اگه راه ساده تری برای انجام اینکار دارید ممنون میشم کمکم کنید. تو کدکس های وردپرس هم خیلی گشتم ولی در مورد تغییر رنگ زمینه هدر چیزی پیدا نکردم.

ممنونم

لینک به ارسال

سلام دوست عزیز 

پیشنهاد می کنم چرخ رو دوباره اختراع نکنید

تا جایی که می تونید از موارد آماده استفاده کنید

مثلاً فریم ورک یونیسون گزینه ی خوبیه برای اینکار 

http://unyson.io

نمونه برای تنظیمات بخش کاستومایزر

http://manual.unyson.io/en/latest/options/customizer.html

 

لینک به ارسال
در 5 ساعت قبل، resanehwp گفته است :

 

سلام. ممنونم.

ولی فکر نمیکنم این مورد شباهتی به اختراع دوباره چرخ داشته باشه.درسته. موارد آماده زیادی هست که بشه استفاده کرد.

ولی فکر کنید اگه همه اینکارو بکنند دیگه کسی چیزی یاد نمیگیره.

قصد من برای انجام اینکار اولا یادگیریه که این انجمن هم شاید هدف اصلیش همین باشه و ثانیا روشی ساده تر برای یک کار ساده هست که تا جایی که دیدم همه جا این کار ساده رو دور سرشون چرخوندن.

در صورتی که فکر میکنم راه سادتری برای انجامش وجود داشته باشه.

مثل زمانی که میشه خیلی ساده مواردی رو در وردپرس کد نویسی کرد ولی معمولا از افزونه ها استفاده میشه. که اولین ضررش افزایش درخواست های سایت و کاهش سرعته.

در هر صورت ممنونم از پاسختون

ویرایش شده توسط maraljoon
لینک به ارسال
در 4 ساعت قبل، maraljoon گفته است :

سلام. ممنونم.

ولی فکر نمیکنم این مورد شباهتی به اختراع دوباره چرخ داشته باشه.درسته. موارد آماده زیادی هست که بشه استفاده کرد.

ولی فکر کنید اگه همه اینکارو بکنند دیگه کسی چیزی یاد نمیگیره.

قصد من برای انجام اینکار اولا یادگیریه که این انجمن هم شاید هدف اصلیش همین باشه و ثانیا روشی ساده تر برای یک کار ساده هست که تا جایی که دیدم همه جا این کار ساده رو دور سرشون چرخوندن.

در صورتی که فکر میکنم راه سادتری برای انجامش وجود داشته باشه.

مثل زمانی که میشه خیلی ساده مواردی رو در وردپرس کد نویسی کرد ولی معمولا از افزونه ها استفاده میشه. که اولین ضررش افزایش درخواست های سایت و کاهش سرعته.

در هر صورت ممنونم از پاسختون

نظرتون محترم هست

من این مورد رو بر اساس اینکه می خوایین کلی تنظیم برای بخش کاستومایزر وردپرس ایجاد کنید در نظر گرفتم

اگر فقط چند مورد هست بهتره کدنویسی بشه

مثلاً ما یک قالب فروشگاهی بنام کانی شاپ در تیم کانی تمز توسعه دادیم ، می تونستیم تمام تنظیمات و کاستوم فیلدها رو خودمون با کدنویسی بزنیم ، ولی به خاطر افزایش سرعت در توسعه ، ترجیح دادیم که از افزونه Advanced Custom Fields استفاده کنیم

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...