Вопрос или проблема
Я пытаюсь, чтобы модальное окно открывалось по умолчанию при его вызове по идентификатору.
Например, если я ввожу URL www.mysite.com#post-28 (#post28 – это идентификатор поста)
Я попадаю на страницу с модальным окном и содержимым поста-28.
Для этого я использовал следующий jQuery (прикрепляю базовую версию кода):
<script>
jQuery(function ($) {
function popModal() {
{ alert("Ваши книги с просроченным сроком возврата.")
};
}
var hash = window.location.hash;
if (hash.substring(1) == 'post-<? the_ID(); ?>') {
popModal();
}
});
</script>
Что не работает, когда я вызываю динамически post-<? the_ID(); ?>
Однако если я использую вместо этого этот код:
<script>
jQuery(function ($) {
function popModal() {
{ alert("Ваши книги с просроченным сроком возврата.")
};
}
var hash = window.location.hash;
if (hash.substring(1) == 'post-17') {
popModal();
}
});
</script>
(post-17 – это идентификатор поста),
Это работает.
Я считаю, что проблема связана с тем, как я вызываю пост с помощью <? the_ID ?>
любая помощь была бы потрясающей!
Спасибо
— РЕДАКТИРОВАНИЕ —
Вот как я подключил свой JS и, похоже, он сломался:
add_action( 'wp_enqueue_scripts', 'themeeo_scripts' );
function themeeo_scripts() {
// Загружаем таблицы стилей
wp_register_style('theme-style', get_template_directory_uri() . '/css/style.css',array('bootstrap'));
wp_register_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_register_style('owl-carousel', get_template_directory_uri() . '/css/owl.carousel.css');
wp_register_style('tether', get_template_directory_uri() . '/css/tether.min.css');
wp_register_style('responsive-styles', get_template_directory_uri() . '/css/responsive.css',array('bootstrap'));
wp_register_style('custom-style', get_template_directory_uri() . '/css/custom.css',array('bootstrap'));
// wp_enqueue_style('tether');
wp_enqueue_style('bootstrap');
wp_enqueue_style('font-awesome');
wp_enqueue_style('style-dynamic');
wp_enqueue_style('responsive-styles');
wp_enqueue_style('theme-style');
wp_enqueue_style('custom-style');
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
// Загружаем скрипты jQuery
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.js', array('jquery'));
wp_register_script('custom', get_template_directory_uri() . '/js/jquery.custom.js', array('jquery'));
wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'));
wp_register_script('owl-carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array('jquery'));
wp_register_script('tether', get_template_directory_uri() . '/js/tether.min.js', array('jquery'));
wp_register_script('velocity', get_template_directory_uri() . '/js/velocity.js', array('jquery'));
wp_register_script('velocityui', get_template_directory_uri() . '/js/velocity.ui.js', array('jquery'));
wp_register_script('helium-parallax-js', get_template_directory_uri() . '/js/helium.parallax.js', array('jquery'));
wp_register_script('urlhash', get_template_directory_uri() . '/js/urlhash.js', array('jquery'));
wp_localize_script( 'custom', 'menuToggleText', array(
'open' => esc_html__( 'Открыть дочернее меню' ),
'close' => esc_html__( 'Закрыть дочернее меню' ),
) );
wp_enqueue_script('helium-parallax-js');
wp_enqueue_script('jquery');
wp_enqueue_script('tether');
wp_enqueue_script('bootstrap', '', '', '', true);
wp_enqueue_script('owl-carousel', '', '', '', true);
wp_enqueue_script('tether', '', '', '', true);
wp_enqueue_script('custom', '', '', '', true);
wp_enqueue_script('skrollr.js', '', '', '', true);
wp_enqueue_script('velocity', '', '', '', true);
wp_enqueue_script('velocityui', '', '', '', true);
wp_enqueue_script( 'urlhash', get_template_directory_uri() . '/js/urlhash.js', array( 'jquery' ) );
if ( is_single() ){
$localization = array(
'post_id' => get_the_ID(),
);
wp_localize_script( 'urlhash', 'localized_object', $localization );
}
}
Это очевидно не сработает, поскольку вы не можете получить идентификатор поста, вызывая PHP в JavaScript. Кстати, короткий PHP-тег никогда не следует использовать из-за конфликтов. Вам следует использовать полный <?php тег.
Теперь о вашей проблеме. То, что вам нужно для передачи идентификатора – это локализация. Включите ваш скрипт в файл js и подключите его с помощью этого кода:
add_action( 'wp_enqueue_scripts', 'some_function' );
function some_function(){
wp_enqueue_script( 'some-handler', 'ПОЛНЫЙ URL ЗДЕСЬ', array( 'jquery' ) );
}
Теперь, чтобы передать идентификатор в скрипт, локализуйте идентификатор поста, расширив ваш код до:
add_action( 'wp_enqueue_scripts', 'some_function' );
function some_function(){
// Подключаем наш JS файл
wp_enqueue_script( 'some-handler', 'ПОЛНЫЙ URL ЗДЕСЬ', array( 'jquery' ) );
// Если мы находимся на отдельном посте, добавляем идентификатор поста
if ( is_single() ){
$localization = array(
'post_id' => get_the_ID(),
);
wp_localize_script( 'some-handler', 'localized_object', $localization );
}
}
Мы наполовину закончили. На этом этапе вы можете получить доступ к идентификатору вашего поста непосредственно в вашем JS файле:
(function($){
function popModal() {
window.alert("Ваши книги с просроченным сроком возврата.");
}
var hash = window.location.hash;
if (hash.substring(1) == 'post-' + localized_object.post_id ) {
popModal();
}
})(jQuery);
Довольно круто, да?
Ответ или решение
Когда вы пытаетесь открыть модальное окно по ID поста, указав его в хеш-части URL, вы сталкиваетесь с проблемой. Давайте разберем эту задачу, проанализируем вашу реализацию и предложим решения для успешного функционирования вашего кода.
Проблема
Вы хотите, чтобы модальное окно открывалось автоматически при загрузке страницы, если URL содержит конкретный ID поста. Используя window.location.hash, вы пытаетесь сравнить его с динамически генерируемым ID поста, однако сталкиваетесь с тем, что код не срабатывает. Основная причина заключается в том, что вы неправильно обрабатываете динамическое значение ID в вашем JavaScript-коде.
Анализ кода
Вот ваш исходный код:
<script>
jQuery(function ($) {
function popModal() {
{ alert("Your book is overdue.") }
};
var hash = window.location.hash;
if (hash.substring(1) == 'post-<?php the_ID(); ?>') {
popModal();
}
});
</script>Здесь вы пытаетесь сравнить hash с результатом PHP-функции the_ID(), что не будет работать, поскольку PHP выполняется на сервере, а JavaScript — на клиенте. В результате значение, возвращаемое the_ID(), не подставляется в ваш код JavaScript.
Решение задачи
Чтобы исправить проблему, вам необходимо передать ID поста из PHP в JavaScript с помощью локализации скрипта. Это позволит вам использовать ID на стороне клиента. Вот как это можно сделать:
- Измените код enqueue для передачи локализованных данных:
add_action('wp_enqueue_scripts', 'themeeo_scripts');
function themeeo_scripts() {
// Ваш код для подключения стилей и других скриптов
// ...
// Локализуйте скрипт, чтобы передать ID поста
if (is_single()) {
$localization = array(
'post_id' => get_the_ID(),
);
wp_localize_script('custom', 'localized_object', $localization);
}
}- Используйте ID поста в JavaScript:
В вашем JavaScript-коде теперь вы можете обращаться к локализованной переменной localized_object.post_id:
<script>
jQuery(function ($) {
function popModal() {
alert("Ваш пост открыт!");
}
var hash = window.location.hash;
if (hash.substring(1) === 'post-' + localized_object.post_id) {
popModal();
}
});
</script>Итог
Теперь, когда пользователь заходит по URL, подобному www.mysite.com#post-28, ваш код JavaScript сможет корректно обнаружить, что это совпадает с ID текущего поста, и откроет модальное окно автоматически.
Заключение
Следуя описанному алгоритму, вы сможете успешно реализовать функционал открытия модального окна при загрузке страницы через хеш в URL. Этот подход также улучшает взаимодействие с пользователем, предоставляя более интуитивный интерфейс. Если у вас есть дополнительные вопросы или нужна помощь с реализацией, не стесняйтесь обращаться.