Intereting Posts
Как отключить поля в быстром редактировании продукта woocommerce? каналы для пользовательских страниц типа сообщения Как скрыть виджет, если в текущей категории нет должностей, назначенных ему? Любимый дизайн выбирает Admin только как авторов. Как сделать подписчиков авторами своих представлений? Неопределенная переменная: строка? get_template_directory () vs bloginfo ('template_directory') против TEMPLATEPATH добавить кнопку выхода из меню администратора Ajax Pagination для функции related_posts? С WordPress Importer, почему я не могу импортировать метатеги post, содержащие многомерный массив, в котором значения (-ы) этого массива содержат разрывы строк? Начало работы с Subversion, Git или аналогичной системой контроля версий, чтобы сохранить историю моих файлов? Как добавить пробелы к изображениям WooCommerce, чтобы они отображались с одинаковой высотой? Обновить дату публикации страницы, когда посетитель получит доступ к этой странице? Почему этот код приводит к исчезновению панели администратора? Создание новой страницы / вкладки в группе не работает! Как создать объект Quora или Stack Exchange без использования специализированной темы?

Одностраничный сайт + pushState?

У меня есть сайт с одной страницей с сообщениями, которые загружаются через Ajax на одной странице с помощью слайдов вниз. Когда сообщение «активировано», я хочу, чтобы это состояние было настроено так, что, когда я сразу посещаю URL-адрес, он переходит к тому определенному сообщению, которое уже отображается в div.

Мой вопрос:

Создать записи в файле single.php и вызвать их минус верхний и нижний колонтитулы? Или я могу создать шаблон как часть функции Ajax? Имейте в виду, что моей следующей задачей будет выяснение того, как реализовать history.js поэтому состояния задаются в url, стек истории и т. Д.

Вот моя функция Ajax:

 function my_load_ajax_content () { $args = array( 'p' => $_POST['post_id'], 'post_type' => 'projects' ); $post_query = new WP_Query( $args ); while( $post_query->have_posts() ) : $post_query->the_post(); ?> <div class="post-container"> <div id="project-left-content"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php the_content(); ?> <!-- If there is a URL --> <?php if( get_field('url') ): ?> <a href="http://<?php the_field('url'); ?>" target="_blank"><?php the_field('url'); ?></a> <?php endif; ?> </div> <div id="project-right-content"> <?php if( have_rows('slides') ): ?> <div id="slider"> <!-- Slider Setup --> <?php if( have_rows('slides') ): $slideNumber = 0; while ( have_rows('slides') ) : the_row(); $slideNumber++; ?> <input type="radio" name="slider" id="slide<?php echo $slideNumber; ?>"> <?php endwhile;endif; ?> <!-- Slide --> <?php if( have_rows('slides') ): ?> <div id="slides"> <div id="overflow"> <div class="inner"> <?php if( have_rows('slides') ): while ( have_rows('slides') ) : the_row(); $slideImage = get_sub_field('slide_image'); ?> <article> <img src="<?php echo $slideImage; ?>" alt="<?php the_title(); ?>"> </article> <?php endwhile;endif; ?> </div><!-- #inner --> </div><!-- #overflow --> </div><!-- #slides --> <?php endif; ?> <!-- Controls --> <?php if( have_rows('slides') ): $slideNumber = 0; ?> <div id="active"> <?php while ( have_rows('slides') ) : the_row(); $slideNumber++; ?> <label for="slide<?php echo $slideNumber; ?>"></label> <?php endwhile; ?> </div><!-- #active --> <?php endif; ?> </div><!-- #slider --> <?php endif; ?> </div><!-- #project-right-content --> </div><!-- .post-container --> <?php endwhile; wp_die(); } add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' ); add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' ); 

Вот упрощенная версия моего вызова Ajax:

 $('.post-link').on('click', function(e) { e.preventDefault(); var post_id = $(this).data('id'), projectTitle = $(this).data('title'), ajaxURL = site.ajaxurl; $.ajax({ type: 'POST', url: ajaxURL, context: this, data: {'action': 'load-content', post_id: post_id }, success: function(response) { $('#project-container').html(response); // response return false; } }); }); 

Вот мой HTML:

 <div id="project-container"></div> <div id="projects-list"> <!-- Start the loop --> <?php $home_query = new WP_Query('post_type=projects'); while($home_query->have_posts()) : $home_query->the_post(); ?> <article class="project"> <?php the_post_thumbnail( 'home-thumb' ); ?> <div class="overlay"> <a class="post-link" href="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>">+</a> </div> </article> <?php endwhile; ?> <?php wp_reset_postdata(); // reset the query ?> </div><!-- #projects-list --> 

Если кто-то может показать мне дорогу, я бы очень признателен. Кажется, я не могу найти много информации на страницах одной страницы WordPress и истории HTML5.

Изменить: Обновлена ​​функция Ajax до полной версии (ранее была упрощена).

Я сделал что-то подобное на einsteinworld.com .

То, как я это делал, это использовать функцию в functions.php для получения и отображения содержимого, затем я назвал ту же функцию из single.php или через ajax в зависимости от сценария.

Подобно этому вы можете либо использовать глобальную $ post для прямой навигации по странице, либо просто передать идентификатор сообщения через ajax и запрос для $ post. Не забудьте wp_localize_script и добавьте свою функцию для использования с ajax

Используйте History.pushState, чтобы нажать постоянную ссылку сообщения при вызове через ajax.

Вот код скелета

 /* In $(document).ready... */ History.pushState(null, [next-page-title], [next-page-url]); $().update_content({ post_id : [next-page-id] }); /* js function */ $.fn.update_content = function(args){ var data = { action : 'my_function',// in functions.php post_id : args['post_id'] }; $.post( MyAjax.ajaxurl, data, function(response) { if( response != 0 ){ // put the returned content in the DOM }else{ // Do something else } }); }; /* in functions.php */ function my_function(){ if( isset( $_POST['post_id'] ) ){ $post = get_post( $_POST['post_id'] ); $ajax = true; }else{ $ajax = false; } echo [html-to-display-the-post-content] // if this is ajax'd stop the output if( $ajax ) die(); } 

Обновление Сайт, на который ссылается выше, больше не живет, но ответ по-прежнему работает 🙂

Я бы сказал, что это зависит в основном от сложности загружаемых вами сообщений.

Если они такие же простые, как …

 <div class="post-container"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php the_content(); ?> </div><!-- .post-container --> 

… Я бы просто поместил это в обработчик AJAX и покончил с этим.

Если сообщения более сложны, вы можете просто хотеть голые голые данные как JSON через AJAX и строить HTML с него на стороне клиента, возможно, даже используя некоторую инфраструктуру frontend.

history.js должен быть легко реализован (и, вероятно, также будет лучше как отдельный вопрос). Так или иначе:

 History.pushState({post_id:1} History.Adapter.bind(window,'statechange',function(){ var State = History.getState(); // {"post_id":1} //AJAX Call }); 

… должен принести вам большую часть пути.

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

Два довольно простых способа, о которых я могу думать:

  1. Используйте вывод своей функции my_load_ajax_content чтобы нарисовать <div id="project-container"></div> при первом отображении страницы
  2. Когда страница загружается, нажмите кнопку клика.
 $(window).on('load', function(){ $('.post-link').first().trigger('click'); }); 

Пока загружается jQuery, и вы показываете самые последние сообщения в верхней части, вышеприведенный должен автоматически запускать ваш код при первом посещении страницы.

Если вам не нужна последняя запись в div и в верхней части страницы, вы можете настроить шаблон своей страницы, чтобы просто не нарисовать самую последнюю запись (например, первую в списке), пропустив ее, используя фильтр pre-get-posts и т. д.