如何使用簡單天氣 JS 的 Redux 框架文本字段選項

Question

您好目前我在我的 wordpress 主題中使用簡單天氣 JS ( http://simpleweatherjs.com/ ) 來顯示實時天氣以及我正在使用 Z7490FE17CAEC373F2299D65B6E20E88 框架的選項我為“您的城市名稱”創建了一個文本字段，我的選項唯一 ID 是 >“cpv-hm-cat-op-8”。 我的 Redux 框架選項的預覽如下。

array(
'id'       => 'cpv-hm-cat-op-8',
'type'     => 'text',
'title'    => __( 'Name of your city', 'redux' ),
'desc'    => __( 'Write your city which you want to show in weather', 'redux' ),
'default'  => 'New York',
), 

現在我想在我的簡單天氣 JS 文件中使用該選項，我想要我的 output，當我輸入我的城市名稱時，它會在該城市的天氣中顯示。 簡單的天氣 js 選項看起來像 =>

  $.simpleWeather({
    location: 'New Jersey',
    woeid: '',
    unit: 'c',
    success: function(weather) {
      html = '<h2><i class="symbol-weather  icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+'</li>';  
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });

在這里“位置”我想添加我的 redux 插件選項。 但它不工作。

  $.simpleWeather({
    location: '<?php global $cpv; echo $cpv['cpv-hm-cat-op-8'];?>',

請幫助我如何添加我的 redux 框架選項。

Answer 1

我找到了一個解決方案，它對我有用，但我不知道它是否是理想的解決方案。

我的解決方案是將值添加到頁面頭部，以便進一步掛鈎。 確保在需要此代碼的代碼之前加載此代碼（將所有其他內容加載到它曾經所在的頁腳）

在 function.php 添加

add_action ( 'wp_head', 'yourjs' );
function yourjs(){ global $cpv; //your global redux Var ?>
  <script type="text/javascript"> 
    var weatherinfo = <?php echo json_encode( array( 
         'city' => $cpv['cpv-hm-cat-op-8'],
         'zip' => $cpv['cpv-hm-cat-op-7'], // just an example for another value in the array
       ) ); ?>
  </script><?php
}

這將放在頁面上的 header 中，例如：

<script type="text/javascript"> 
    var weatherinfo = {"city":"Austin","zip":"12345"}  </script>

所以現在你有一個可以在代碼中訪問的值數組 - 只需調用 var.

希望這對您有所幫助。