2015-11-18 68 views
-1

這是一個相當簡單的小部件,進入頭部/導航欄。它只是一個顯示器。你可以通過wordpress的後端改變字符串。如何將wordpress小部件引入bootstrap?

我的問題是如何可能的話我挽救了代碼,並使用它bootstrap3? 小部件的代碼位於.php和.css中,我需要它位於自舉站點的導航欄標題的右側。

我顯然沒有足夠的經驗,甚至不知道從哪裏開始,但如果有人能在正確的方向指向我,這將不勝感激!

這是小部件本身,它配備了一堆的CSS代碼。

/********************************************************/ 
/* FUNCTIONS 
********************************************************/ 
function earthuru_money_widget() 
{ 
    register_widget('EarthuruMoneyWidget'); 
} 

class EarthuruMoneyWidget extends WP_Widget 
{ 
    function EarthuruMoneyWidget() 
    { 
     $widget_ops = array('classname' => 'EarthuruMoney', 'description' => __('Unity Pot', 'EarthuruMoney')); 
     $control_ops = array('width' => 120, 'height' => 150, 'id_base' => 'earthuru_money'); 

     $this->WP_Widget('earthuru_money', __('Unity Pot', 'EarthuruMoney'), $widget_ops, $control_ops); 
    } 

    function widget($args, $instance) 
    { 
     extract($args); 

     //Our variables from the widget settings. 
     if (empty($instance['earthuru_money_euro']) || empty($instance['earthuru_money_usd'])) return; 

     echo $before_widget . '<div id="earthuru_money"><div class="logo"><p>Unity Pot:</p></div><div class="values"><span class="currency euro">' . $instance['earthuru_money_euro'] . '</span><span class="euro">&euro;</span><span class="currency usd">' . $instance['earthuru_money_usd'] . '</span><span class="usd">&euro;</span> <span class="savings">Savings</span></div></div>' . $after_widget; 
    } 

    //Update the widget 
    function update($new_instance, $old_instance) 
    { 
     $instance = $old_instance; 

     $instance['earthuru_money_euro'] = strip_tags($new_instance['earthuru_money_euro']); 
     $instance['earthuru_money_usd'] = strip_tags($new_instance['earthuru_money_usd']); 

     return $instance; 
    } 

    function form($instance) 
    { 
     //Set up some default widget settings. 
     $defaults = array('Key' => __('null', 'EarthuruMoney')); 
     $instance = wp_parse_args((array)$instance, $defaults); 
     ?> 
     <p> 
      <label 
       for="<?php echo $this->get_field_id('earthuru_money_euro'); ?>"><?php _e('Euro:', 'EarthuruMoney'); ?></label> 
      <input id="<?php echo $this->get_field_id('earthuru_money_euro'); ?>" 
        name="<?php echo $this->get_field_name('earthuru_money_euro'); ?>" 
        value="<?php echo $instance['earthuru_money_euro']; ?>" style="width:100%;"/> 
     </p> 
     <p> 
      <label 
       for="<?php echo $this->get_field_id('earthuru_money_usd'); ?>"><?php _e('USD:', 'EarthuruMoney'); ?></label> 
      <input id="<?php echo $this->get_field_id('earthuru_money_usd'); ?>" 
        name="<?php echo $this->get_field_name('earthuru_money_usd'); ?>" 
        value="<?php echo $instance['earthuru_money_usd']; ?>" style="width:100%;"/> 
     </p> 
    <?php 
    } 
} 

function earthuru_money_css() 
{ 
    wp_enqueue_style('earthuru_money', plugins_url('/css/style.css', __FILE__)); 
} 

// PLUGIN NOTIFICATION 
add_action('widgets_init', 'earthuru_money_widget'); 
add_action('wp_enqueue_scripts', 'earthuru_money_css'); 

回答

0

這不是一個有效的問題。

引導是響應前端框架。您可以使用Bootstrap作爲基礎框架構建主題。然而,如何「挽救代碼並在bootstrap3上使用它」沒有任何意義。