The Events Calendar (素晴らしいプラグイン) と呼ばれるプラグインである wordpress を使用しており、小さなナビゲーション要素を含む小さなウィジェットを作成しようとしています。ナビゲーションには、前月、当月、翌月が表示されます。たとえば、今日のナビゲーションには「4 月 5 月 6 月」と表示されます。
「6 月」をクリックすると、6 月に発生するイベントが読み込まれます。これらをjquery/ajaxマジックを介して指定されたdivにロードしたい。
私はちょっと動いていますが、バグがあり、それを修正する方法がわかりません。最初に表示されている月のいずれかをクリックすると、機能します。しかし、別の月をクリックすると、jquery 関数が失われます (おそらく、ページが完全にリロードされないためです)。
それで、ナビゲーションを再初期化してクリック数を増やす方法があるかどうか疑問に思っています。
コードで:
私の sidebar.php ファイルには、次のコードが含まれています。
一部の HTML
<div id="upcoming-events-box">
<div class="upcoming-events-block-inner">
<div class="upcoming-events-content">
<div id="EventLoader">
<?php get_template_part( 'content', 'the-events' ); ?>
</div>
</div>
</div>
</div>
そしていくつかのJquery:
<script type="text/javascript">
jQuery(function() {
jQuery('#upcoming-events-months li a').click(function() {
var toLoad = jQuery(this).attr('href')+' #EventLoader';
jQuery('#EventLoader').hide('fast',loadContent);
jQuery('#load').remove();
jQuery('.upcoming-events-content').append('<span id="load">LOADING...</span>');
jQuery('#load').fadeIn('normal');
function loadContent() {
jQuery('#EventLoader').load(toLoad,'',showNewContent);
}
function showNewContent() {
jQuery('#EventLoader').show('normal',hideLoader);
}
function hideLoader() {
jQuery('#load').fadeOut('normal');
}
return false;
});
});
</script>
サイドバーに呼び出される content-the-events.php には、次のコードが含まれています。
<div id="upcoming-events-months">
// Some php
global $post;
$current_page_URL = $_SERVER["SERVER_NAME"];
if (isset($_GET['setmonth'])) {
$current_month = $_GET['setmonth'];
} else {
$current_month = date('M'); // This gets the current month
}
$next_month = date('M', strtotime('+1 month', strtotime($current_month)));
$prev_month = date('M', strtotime('-1 month', strtotime($current_month)));
echo "<ul>";
echo "<li><a href='http://".$current_page_URL."?setmonth=".$prev_month."'
id='".$prev_month."'>".$prev_month."</a></li>";
echo "<li>".$current_month."</li>";
echo "<li><a href='http://".$current_page_URL."?setmonth=".$next_month."'
id='".$next_month."'>".$next_month."</a></li>";
echo "</ul>";
</div>
<div id="content"></div>
<div class="upcoming-event-scroller">
<?php
$all_events = tribe_get_events(array(
'eventDisplay'=>'all',
'posts_per_page'=>-1,
'start_date'=>'01 '.$current_month.' 2012',
'end_date'=>'31 '.$current_month.' 2012'
));
foreach($all_events as $post) {
setup_postdata($post);
?>
<div class="row <?php echo (++$j % 2 == 0) ? 'even' : 'odd'; ?>">
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<p class="event-date"><a href="<?php the_permalink(); ?>"><?php echo tribe_get_start_date($post->ID, true, 'M j, Y'); ?> - <?php echo tribe_get_end_date($post->ID, true, 'M j, Y'); ?></a></p>
</div>
<?php } //endforeach ?>
<?php wp_reset_query(); ?>
</div>
たぶん、私はこれを理解しようとして本当に混乱しただけです. ハハ。どんな助けでも大歓迎です。