কাস্টম উইজেটের মধ্যে থেকে পূর্বের উইজেটে ক্লাস যুক্ত করুন


10

আমার কাছে একটি সাধারণ কাস্টম উইজেট রয়েছে যা এর প্রস্থের জন্য জিজ্ঞাসা করে (এটি পরবর্তী প্রান্তে পরে ব্যবহৃত হয়)। প্রস্থ ক্ষেত্রটি একটি নির্বাচন ড্রপডাউন, সুতরাং কোনও ব্যবহারকারীর পূর্বনির্ধারিত বিকল্প রয়েছে।

আমার উইজেটের অনেকগুলি উদাহরণ থাকবে, প্রত্যেকের নিজস্ব প্রস্থের সেটআপ থাকবে।

এখন, আমার উইজেট কোডে আমার কাছে নিম্নলিখিত কোড রয়েছে:

echo $before_widget;

যার ফলাফল:

<div class="widget my" id="my-widget-1"></div>

আমি যা করতে চাই তা হ'ল $before_widgetআমার নিজস্ব ক্লাসটি যুক্ত করা (নির্বাচিত ড্রপডাউন থেকে নির্দিষ্ট প্রস্থ)। সুতরাং, আমি নিম্নলিখিত মার্কআপ চাই:

<div class="widget my col480" id="my-widget-3"></div>

এবং যদি কোনও শ্রেণি নির্দিষ্ট না করে থাকে তবে আমি যুক্ত করতে চাই class="col480"

আমি কীভাবে এটি অর্জন করব?

সাহায্যের জন্য ধন্যবাদ! Dasha

উত্তর:


14

আহা, তাই $before_widgetপরিবর্তনশীল একটি স্ট্রিং div উপাদান প্রতিনিধিত্বমূলক হল: <div class="widget my" id="my-widget-1">। সুতরাং আমি $before_widget"শ্রেণি" সাব-স্ট্রিংয়ের জন্য পরীক্ষা করেছিলাম এবং এতে আমার $widget_widthমান যুক্ত করেছি ।

কোডটি আমার কাস্টম উইজেট ফাইলের থেকে:

function widget( $args, $instance ) {
  extract( $args );
  ... //other code

  $widget_width = !empty($instance['widget_width']) ? $instance['widget_width'] : "col300";
  /* Add the width from $widget_width to the class from the $before widget */
  // no 'class' attribute - add one with the value of width
  if( strpos($before_widget, 'class') === false ) {
    // include closing tag in replace string
    $before_widget = str_replace('>', 'class="'. $widget_width . '">', $before_widget);
  }
  // there is 'class' attribute - append width value to it
  else {
    $before_widget = str_replace('class="', 'class="'. $widget_width . ' ', $before_widget);
  }
  /* Before widget */
  echo $before_widget;

  ... //other code
}

আমি $widget_widthআমার নিজের উইজেট কোডের মধ্যে উইজেট ডিভ উপাদানটিতে আমার পরিবর্তনশীল যুক্ত করতে চেয়েছিলাম (যখন আমার $widget_widthভেরিয়েবলটিতে সহজেই অ্যাক্সেস ছিল )।

আশা করি এটি উপলব্ধি করে এবং কাউকে সহায়তা করবে।

ধন্যবাদ, দশা


সুন্দর কাজ - একটি উইজেট ইস্যুতে আমাকে সাহায্য করেছে - ধন্যবাদ :)
কিউ স্টুডিও

10

আপনি dynamic_sidebar_paramsআপনার উইজেটটি সন্ধান করতে এবং এতে আপনার ক্লাস যুক্ত করতে ফিল্টার হুক ব্যবহার করতে পারেন :

add_filter('dynamic_sidebar_params', 'add_classes_to__widget'); 
function add_classes_to__widget($params){
    if ($params[0]['widget_id'] == "my-widget-1"){ //make sure its your widget id here
        // its your widget so you add  your classes
        $classe_to_add = 'col480 whatever bla bla '; // make sure you leave a space at the end
        $classe_to_add = 'class=" '.$classe_to_add;
        $params[0]['before_widget'] = str_replace('class="',$classe_to_add,$params[0]['before_widget']);
    }
    return $params;
} 

জবাবের জন্য ধন্যবাদ. আমার নিজের কাস্টম উইজেটের প্রচুর উদাহরণ থাকবে যার প্রত্যেকটির নিজস্ব নির্দিষ্ট প্রস্থ রয়েছে। এজন্য আমি ফিল্টারের পরিবর্তে উইজেট কোডের মধ্যেই অতিরিক্ত ক্লাস যুক্ত করতে চেয়েছিলাম। আশা করি বুঝেছি?
দশালুন

উদাহরণস্বরূপ অপশনগুলি টেবিলের মধ্যে সংরক্ষণ করা হয় যাতে আপনি উইজেট আইডি ব্যবহার করে একবার এটি সেখান থেকে পেতে পারেনget_option('widget-name')
বেনারনেট

1
আপনার সাহায্যের জন্য অসংখ্য ধন্যবাদ! আমি দুঃখিত আমি সত্যিই বুঝতে পারছি না আপনার সমাধান আছি :( আমি, আমার নিজস্ব উইজেট ফাইল মধ্যে হতে যখন আমি সহজে প্রস্থ পরিবর্তনশীল অ্যাক্সেস করতে পারেন সমস্ত কোড চেয়েছিলেন। আমি হ্যাকিং শেষ পর্যন্ত $before_widgetপংক্তি। আপনার উত্তর আমাকে পেয়েছিলাম ডান ট্র্যাকটি আবিষ্কার করছে $before_widgetএটি একটি স্ট্রিং again আবার ধন্যবাদ :)
দশালুন

এটি একটি পছন্দসই বিকল্প হবে কারণ এটি থিম ফাইলগুলি সম্পাদনা করার চেয়ে ওয়ার্ডপ্রেস ফিল্টার ব্যবহার করে
rhysclay

6

অন্য কোনো উপায় আমি একটি কাস্টম 'ব্যবহার হয় উইজেটের একটি বর্গ যোগ করার জন্য পাওয়া classname মত আপনার কনস্ট্রাক্ট ফাংশনের' কী:

class My_Widget_Class extends WP_Widget {
// Prior PHP5 use the children class name for the constructor…
// function My_Widget_Class()
       function __construct() {
            $widget_ops = array(
                'classname' => 'my-class-name',
                'description' => __("Widget for the sake of Mankind",'themedomain'),
            );
            $control_ops = array(
                'id_base' => 'my-widget-class-widget'
            );
   //some more code after...

   // Call parent constructor you may substitute the 1st argument by $control_ops['id_base'] and remove the 4th.
            parent::__construct(@func_get_arg(0),@func_get_arg(1),$widget_ops,$control_ops);
        }
}

এবং আপনার থিমের ডিফল্ট ' বিফারড উইজেট ' ব্যবহার করতে ভুলবেন না যদি আপনি ফাংশন.এফপি ব্যবহার register_sidebar()করেন তবে এটি এটি করুন:

//This is just an example.
register_sidebar(array(
          'name'=> 'Sidebar',
            'id' => 'sidebar-default',
            'class' => '',//I never found where this is used...
            'description' => 'A sidebar for Mankind',
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',//This is the important code!!
            'after_widget' => '</aside>',
            'before_title' => '<h3>',
            'after_title' => '</h3>',
        ));

তারপরে আপনার উইজেটের প্রতিটি ক্ষেত্রে আপনার ক্লাসটি 'উইজেট মাই-ক্লাস-নাম' এর মতো হবে:

<aside class="widget my-class-name" id="my-widget-class-widget-N"><!-- where N is a number -->
  <h3>WIDGET TITLE</h3>
  <p>WIDGET CONTENT</p>
</aside>

আপনি প্রথমে অভিভাবক কনস্ট্রাক্টরকে কল করতে পারেন এবং তারপরে আপনি যে শ্রেণীর নাম চান তা যুক্ত করতে পারেন:

class My_Widget_Class extends WP_Widget {
    // Better defining the parent argument list …
    function __construct($id_base, $name, $widget_options = array(), $control_options = array())
    {    parent::__construct($id_base, $name, $widget_options, $control_options);
         // Change the class name after
         $this->widget_options['classname'].= ' some-extra';
    }
}

1

প্রথমে কনস্ট্রাক্টরে একটি কাস্টম প্লেসোল্ডার শ্রেণি যুক্ত করুন

<?php
public function __construct() {
   $widget_ops  = array(
      'classname'                   =>; 'widget_text eaa __eaa__', //__eaa__ is my placeholder css class
      'description'                 =>; __( 'AdSense ads, arbitrary text, HTML or JS.','eaa' ),
      'customize_selective_refresh' =>; true,
   );
   $control_ops = array( 'width' =>; 400, 'height' =>; 350 );
   parent::__construct( 'eaa', __( 'Easy AdSense Ads &amp; Scripts', 'eaa' ), $widget_ops, $control_ops );
}
?>

তারপরে এ জাতীয় উইজেট বিকল্পগুলির উপর ভিত্তি করে আপনার পছন্দের শ্রেণি / এস সহ এটি প্রতিস্থাপন করুন

<?php
if ( $instance['no_padding'] ) {
   $args['before_widget'] = str_replace( '__eaa__', 'eaa-clean', $args['before_widget'] );
}
?>

আপনি উদাহরণ সহ বিশদটি http://satishgandham.com/2017/03/adding-dynamic-class-custom-wordpress-widgets/ এ খুঁজে পেতে পারেন


0

আপনি এই ফিল্টারটি চেষ্টা করতে পারেন:

/**
 * This function loops through all widgets in sidebar 
 * and adds a admin form value to the widget as a class name  
 *  
 * @param array $params Array of widgets in sidebar
 * @return array
*/

add_filter( 'dynamic_sidebar_params', 'nen_lib_add_class_to_widget' );
function nen_lib_add_class_to_widget( $params )
{
    foreach( $params as $key => $widget )
    {
        if( !isset($widget['widget_id']) ) continue;

        // my custom function to get widget data from admin form (object)
        $widget_data = nen_get_widget_data($widget['widget_id']) ;

        // check if field excists and has value
        if( isset($widget_data->wm_name) && $widget_data->wm_name )
        {
            // convert and put value in array
            $classes = array( sanitize_title( $widget_data->wm_name ) );

            // add filter, to be able to add more
            $classes = apply_filters( 'nen_lib_add_class_to_widget' , $classes , $widget['widget_id'] , $widget , $widget_data  );

            // get 'before_widget' element, set find and replace
            $string     = $params[$key]['before_widget'];
            $find       = '"widget ';
            $replace    = '"widget '.implode( ' ' , $classes ).' ';

            // new value
            $new_before = str_replace( $find , $replace , $string ) ;

            // set new value
            $params[$key]['before_widget'] = $new_before;
        }
    }
    return $params;
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.