Класс виджетов Wordpress включает Jquery - PullRequest
Новая
       1

Класс виджетов Wordpress включает Jquery

0 голосов
/ 25 сентября 2019

У меня есть эта проблема. Я пишу этот скрипт на Jquery, который хочу интегрировать с Wordpress.Я уже сделал тест на localhost без WP, и все в порядке.

Вы можете найти здесь https://www.noirsolutions.net/esempi/php/test-jquery/prova2.php.

Я пишу только часть интересного.

Для плагинов код 

class My_Custom_Widget extends WP_Widget {

    // Main constructor
    public function __construct() {
        parent::__construct(
            'my_custom_widget',
            __( 'My Custom Widget', 'text_domain' ),
            array(
                'customize_selective_refresh' => true,
            )
        );

         add_action('wp_enqueue_scripts' , array( $this , 'register_plugin_styles') );
         add_action('wp_enqueue_scripts' , array( $this , 'register_plugin_jquery') );


    }





        public function register_plugin_styles() {
        wp_register_style( 'prova-widget-6', plugins_url( 'prova-widget-6/stile.css' ) );
        wp_enqueue_style( 'prova-widget-6' );




    }

    public function register_plugin_jquery() {

        wp_register_script('wpb-jquery',plugins_url( 'prova-widget-6/filejquery.js' ) , __FILE__ );
        wp_enqueue_script('wpb-jquery');


    }

файл js 

     <script> 
jQuery(document).ready(function($){
  jQuery("button").click(function($){
    var para1 = jQuery("#para1");
    para1.animate({width: '100%', opacity: '0.9'}, "slow");
     var para2 = jQuery("#para2");
    para2.animate({width: '90%', opacity: '0.9'}, "slow");

    var para3 = jQuery("#para3");
    para3.animate({width: '80%', opacity: '0.9'}, "slow");

    var para4 = jQuery("#para4");
    para4.animate({width: '70%', opacity: '0.9'}, "slow");

    var para5 = jQuery("#para5");
    para5.animate({width: '60%', opacity: '0.9'}, "slow");

    var para6 = jQuery("#para6");
    para6.animate({width: '50%', opacity: '0.9'}, "slow");

       var para7 = jQuery("#para7");
    para7.animate({width: '40%', opacity: '0.9'}, "slow");

       var para8 = jQuery("#para8");
    para8.animate({width: '30%', opacity: '0.9'}, "slow");

       var para9 = jQuery("#para9");
    para9.animate({width: '20', opacity: '0.9'}, "slow");

       var para10 = jQuery("#para10");
    para10.animate({width: '10%', opacity: '0.9'}, "slow");





  });
});




jQuery(document).ready(function($){
  jQuery("#flip1").click(function($){
    jQuery("#panel1").slideToggle("slow");
  });
});



jQuery(document).ready(function($){
  jQuery("#flip2").click(function($){
    jQuery("#panel2").slideToggle("slow");
  });
});



jQuery(document).ready(function($){
  jQuery("#flip3").click(function($){
    jQuery("#panel3").slideToggle("slow");
  });
});


jQuery(document).ready(function($){
  jQuery("#flip4").click(function($){
    jQuery("#panel4").slideToggle("slow");
  });
});



jQuery(document).ready(function($){
  jQuery("#flip5").click(function($){
    jQuery("#panel5").slideToggle("slow");
  });
});



jQuery(document).ready(function($){
  jQuery("#flip6").click(function($){
    jQuery("#panel6").slideToggle("slow");
  });
});



jQuery(document).ready(function($){
  jQuery("#flip7").click(function($){
    jQuery("#panel7").slideToggle("slow");
  });
});


jQuery(document).ready(function($){
  jQuery("#flip8").click(function($){
    jQuery("#panel8").slideToggle("slow");
  });
});


jQuery(document).ready(function($){
  jQuery("#flip9").click(function($){
    jQuery("#panel9").slideToggle("slow");
  });
});


jQuery(document).ready(function($){
  jQuery("#flip10").click(function($){
    jQuery("#panel10").slideToggle("slow");
  });
});


</script>

и css 

#para1 { 
  background:#98bf90;
  height:5%;
  width:1%;
  position:relative;
  border: 3px solid;
  text-align: center;
 color: black;
}

#para2 {
 padding :0.5 em;
  background:#98bf80;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
 color: black;
}

#para3 {
  padding :0.5 em;
  background:#98bf70;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para3 {
  padding :0.5 em;
  background:#98bf70;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para4 {
  padding :0.5 em;
  background:#98bf60;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}
#para5 {
  padding :0.5 em;
  background:#98bf50;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para6 {
  padding :0.5 em;
  background:#98bf40;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para7 {
  padding :0.5 em;
  background:#98bf45;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para8 {
  padding :0.5 em;
  background:#98bf40;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}
#para9 {
  padding :0.5 em;
  background:#98bf35;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}

#para10 {
  padding :0.5 em;
  background:#98bf30;
  border: 3px solid;
  height:5%;
  width:1%;
  position:relative;
  text-align: center;
  color: black;
}




#panel1, #flip1 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel1 {
  padding: 50px;
  display: none;
}

#panel2, #flip2 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel2 {
  padding: 50px;
  display: none;
}

#panel3, #flip3 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel3 {
  padding: 50px;
  display: none;
}

#panel4, #flip4 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel4 {
  padding: 50px;
  display: none;
}

#panel5, #flip5 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel5 {
  padding: 50px;
  display: none;
}

#panel6, #flip6 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel6 {
  padding: 50px;
  display: none;
}


#panel7, #flip7 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel7 {
  padding: 50px;
  display: none;
}


#panel8, #flip8 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel8 {
  padding: 50px;
  display: none;
}

#panel9, #flip9 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel9 {
  padding: 50px;
  display: none;
}

#panel10, #flip10 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel10 {
  padding: 50px;
  display: none;
}




#panel1, #flip1 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel1 {
  padding: 50px;
  display: none;
}

#panel2, #flip2 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel2 {
  padding: 50px;
  display: none;
}

#panel3, #flip3 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel3 {
  padding: 50px;
  display: none;
}

#panel4, #flip4 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel4 {
  padding: 50px;
  display: none;
}

#panel5, #flip5 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel5 {
  padding: 50px;
  display: none;
}

#panel6, #flip6 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel6 {
  padding: 50px;
  display: none;
}


#panel7, #flip7 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel7 {
  padding: 50px;
  display: none;
}


#panel8, #flip8 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel8 {
  padding: 50px;
  display: none;
}

#panel9, #flip9 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel9 {
  padding: 50px;
  display: none;
}

#panel10, #flip10 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel10 {
  padding: 50px;
  display: none;
}

</style>

В то время как на виджете публичной функции плагинов у меня есть 

  public function widget( $args, $instance ) {

            extract( $args );

            // Check the widget options
            $title    = isset( $instance['title'] ) ? apply_filters( 'widget_title', $instance['title'] ) : '';
            $text     = isset( $instance['text'] ) ? $instance['text'] : '';
            $textarea = isset( $instance['textarea'] ) ?$instance['textarea'] : '';
            $select   = isset( $instance['select'] ) ? $instance['select'] : '';
            $checkbox = ! empty( $instance['checkbox'] ) ? $instance['checkbox'] : false;

            // WordPress core before_widget hook (always include )
            echo $before_widget;

            // Display the widget
            echo '<div class="widget-text wp_widget_plugin_box">';

                // Display widget title if defined
                if ( $title ) {
                    echo $before_title . $title . $after_title;
                }

                // Display text field
                if ( $text ) {
                    echo '<p>' . $text . '</p>';
                }

                // Display textarea field
                if ( $textarea ) {
                    echo '<p>' . $textarea . '</p>';
                }

                // Display select field
                if ( $select ) {
                    echo '<p>' . $select . '</p>';
                }

                // Display something if checkbox is true
                if ( $checkbox ) {
                    echo '<p>Something awesome</p>';
                }

            echo '</div>';

            ?>



         <?php   
        $value[1]=90;
      $value[2]=70;  
      $value[3]=65;
      $value[4]=55;
      $value[5]=35;
      $value[6]=25;
      $value[7]=15;
      $value[8]=10;
      $value[9]=5;
      $value[10]=2;

      ?>


            <p><label> PROVA LABEL PROVA PROVA PROVA PROVAccuia</p>

              <button><?php  echo "Click for Start Animation"; ?></button>
        <p>By default, all HTML elements have a static position, and cannot be
          moved. To manipulate the position, remember to first set the CSS position
          property of the element to relative, fixed, or absolute!</p>

    <?php


    $val[1]="Valore 1";
    $val[2]="Valore 2";
    $val[3]="Valore 3";
    $val[4]="Valore 4";
    $val[5]="Valore 5";
    $val[6]="Valore 6";
    $val[7]="Valore 7";
    $val[8]="Valore 8";
    $val[9]="Valore 9";
    $val[10]="Valore 10";



        for ($i = 1; $i <= 10; $i++) {


        echo '<div id="flip'.$i.'" align="left"> '.$val[$i].' <p id="para'.$i.'"> '.$value[$i].'</p></div>';
        echo '<div id ="panel'.$i.'"> Hello World!</div>';
        }

    ?>
            <?php 

            // WordPress core after_widget hook (always include )
            echo $after_widget;

        }



            public function register_plugin_styles() {
            wp_register_style( 'prova-widget-6', plugins_url( 'prova-widget-6/stile.css' ) );
            wp_enqueue_style( 'prova-widget-6' );




        }

        public function register_plugin_jquery() {

            wp_register_script('wpb-jquery',plugins_url( 'prova-widget-6/filejquery.js' ) , __FILE__ );
            wp_enqueue_script('wpb-jquery');


        }








    }

IЯ не эксперт, если у кого-то есть идея, некоторые предлагают мне дать.Thx.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...