Вставьте Гридстер в шаблон WordPress

У меня проблема с плагином WordPress, я хочу вставить Gridster в плагин, но он не работает.

Здесь я загружаю файлы, которые правильно находятся в папке.

function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/bootstrap.css', __FILE__ ), false );
    wp_enqueue_style("gridster-style", plugins_url( '/css/jquery.gridster.min.css', __FILE__ ), false );
}
add_action('admin_print_styles', 'add_my_stylesheet');



function add_my_scripts()
{
    //I tried wp_register_script as well as wp_enqueue_script
    wp_register_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) );
    wp_register_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__  ) );
    wp_register_script( "gridster-script-extra",  plugins_url(      '/js/jquery.  gridster.with-extras.min.js', __FILE__ ) );

}
add_action( 'wp_register_scripts', 'add_my_scripts' );

И это пример кода ожидаемого вывода, который, конечно, тоже не работает.

echo'

<section class="demo">
        <div class="gridster">
            <ul>
                <li class="bg-blue" data-row="1" data-col="1" data-sizex="1" data-sizey="1">Box1</li>
                <li class="bg-pink" data-row="1" data-col="2" data-sizex="1" data-sizey="1">Box2</li>
                <li class="bg-pink" data-row="1" data-col="3" data-sizex="1" data-sizey="2">Box3</li>
            </ul>
        </div>
    </section>

    <script type="text/javascript">
  var gridster;

  $(function() {
      gridtster = $(".gridster > ul").gridster({
          widget_margins: [10, 10],
          widget_base_dimensions: [140, 140],
          min_cols: 6
      }).data("gridster");
  });
</script>';

Я попытался включить его в заголовочный файл шаблона, а также в плагин, но он только показывает мне текст, и я не могу перетаскивать их.

Источник

1 ответ

Решение

Майкл - опять хороший вопрос!

WordPress великолепен, но есть некоторые хитрости / нюансы, как он работает.

Во-первых, регистрация скрипта полезна (если, например, вы хотите локализовать его или в тех случаях, когда вы можете (или не можете) вывести его в нижний колонтитул (с отдельными print_scripts), НО, он не выводит скрипты на разметку.

Кроме того, в зависимости от того, где вы их зарегистрировали (в wp_register_script крюк), вы можете изменить это.

Если все, что вам нужно, чтобы ваши сценарии выводились на разметку страницы, измените код следующим образом:

function add_my_scripts()
{
    // proper way to include jQuery that is packaged with WordPress
    wp_enqueue_script('jquery');
    // Do not EVER include your own jquery.  This will cause all sorts of problems for the users of your plugin!
    // wp_enqueue_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) );
    // you need enqueue here.  ALSO note the use of the $dependencies parameter - this plugin relies on jquery, so be sure to include that as a dependency!
    wp_enqueue_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__  ), array('jquery') );
    wp_enqueue_script( "gridster-script-extra",  plugins_url(      '/js/jquery.  gridster.with-extras.min.js', __FILE__ ), array('gridster-script') );

}
// and you need to hook the enqueue action here...
add_action( 'wp_enqueue_scripts', 'add_my_scripts' );

обратите внимание, что если это не работает для вас, следующим шагом будет просмотреть отрендеренный источник и посмотреть, что происходит. Если вы обнаружите, что это не работает, пожалуйста, сообщите:

  1. Вы пытаетесь сделать это на интерфейсной панели, панели администратора или оба?
  2. Что такое точный HTML, который отображается внутри <head> тег?
  3. Если URL-адрес выводится, но он не является правильным, тогда у нас другая проблема - поэтому советуйте, если это правильно. Обратите внимание, что когда вы "просматриваете исходный код", обычно ссылки (ы) на сценарий (и) становятся кликабельными в представлении "просмотр источника", и вы можете сразу увидеть, загружается ли файл сценария (потому что, когда вы нажимаете на ссылку, вы увидите код скрипта) или нет (потому что вы увидите разметку для страницы с ошибкой 404).
  4. Наконец, вы можете попробовать удалить зависимости. У меня иногда возникали интересные проблемы с их использованием, и с этим я бы возился.
Источник
Другие вопросы по тегам