簡體   English   中英

WordPress的自定義主題:混合PHP和JavaScript?

[英]Wordpress Custom Theme: mixing php and javaScript?

我正在建立一個自定義的wordpress主題,並且試圖添加一些JavaScript函數。 我要添加的主要功能是一個div,它會隨着時間變化顏色。 它更改為的顏色由“自定義”寄存器中的主題顏色設置定義。 我已經通過我的functions.php添加了這些顏色設置框,如下所示:

 $wp_customize->add_setting('color1', array('default' => '#000000', 'transport'=>'refresh',));    
 $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'color1_CNTL', array(
        'label'     => __('Color 1', 'myTheme'), 
        'section'   => 'colors', 
        'settings'  => 'color1',)));

所有這些都可以正常工作,我可以在管理頁面的“自定義”注冊中使用它。 現在,我唯一想知道的是,如何在javaScript代碼中使用color 1的值? 我知道如果我想在CSS中使用它,我只需要使用

<?php echo get_theme_mod('color1'); ?>

但這在JavaScript中不起作用。 有任何想法嗎?

“ WordPress方式”將是本地化腳本。

利用wp_localize_script

概述:

  1. 在主題中注冊一個腳本(通常在functions.php文件中)。 看到這里: wp_enqueue_script
  2. 本地化腳本
  3. 然后,通過您的JavaScript訪問該值。

最小的完整示例(從WP docs編譯):

PHP:

add_action('wp_enqueue_scripts', 'my_theme_scripts');

function my_theme_scripts() {
    // Register the script first.
    wp_register_script( 'some_handle', 'path/to/myscript.js' );

    // Now we can localize the script with our data.
    $color_array = array( 'color1' => get_theme_mod('color1'), 'color2' => '#000099' );
    wp_localize_script( 'some_handle', 'object_name', $color_array );

    // The script can be enqueued now or later.
    wp_enqueue_script( 'some_handle' );
}

Javascript(在“​​ myscript.js”文件中);

// Access the color via the object name defined in localize_script
var color = object_name.color1;

概率

var myvariable='<?php echo get_theme_mod("color1");?>';  //note the surrounding ''!

如果您在訪問變量時遇到問題,請將其聲明為全局變量。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM