0

投稿のタイトルと投稿のサムネイルを表示するポップアップ ウィンドウを作成しようとしています。

このポップアップ コードをカテゴリ ページ テンプレートに追加しました。

基本的に、投稿のタイトルをクリックすると、ポップアップ ウィンドウに投稿のサムネイルと投稿のタイトルが表示されますが、各ポップアップ ウィンドウには同じ投稿の詳細が表示されます。

各ポップアップウィンドウに対応する投稿の詳細が表示されるように、どのような変更を加える必要がありますか

例。投稿 A、投稿 B、投稿 C というタイトルの 3 つの投稿がありますが、ライトボックスではすべての投稿のタイトルに「投稿 A」と表示されます。

任意の提案をいただければ幸いです

これが私が使用しているコードです........

<div id="maincontainer" style="width:700px; height:auto; display:block;"><!-- Begin  Main Container -->

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<span id="magblock"> <!-- Begin Post Block -->

<div class="magazinethumbs">

<?php 
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>

<!-- This opens the Lightbox -->
<a class="lbp-inline-link-1 cboxElement" href="#">

<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>

</span> <!-- End Post Block-->


<div style="display: none;"> <!-- Lightbox Popup -->
<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">

<!-- Here is the bug, the lightbox is loading the same post details -->

<div class="magazinethumbs">

<?php 
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>

<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>

</div>
</div> <!-- End Lightbox Popup -->

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_query();?>

</div><!-- End Main container -->

「Lightbox Plus For Wordpress」プラグイン http://www.endocreative.com/how-to-insert-content-in-a-popup-using-lightbox-plus-for-wordpress/を使用しています

修正したコードを試してみましたが、うまくいきませんでした... カテゴリ ページ全体をライトボックス内にロードするだけです...

ここに変更されたコードがあります

<a class="lbp-inline-link-<?php the_ID(); ?> cboxElement" href="#"> 
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>


<div style="display: none;"> <!-- begin popup -->
<div id="lbp-inline-href-<?php the_ID(); ?>" style="padding:10px; background: #fff;">

<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>

</div>
</div> <!-- End popup -->

ありがとう

4

1 に答える 1

0

あなたが私のコメントに答えているとき、私は寝ているかもしれません。

そのチュートリアルのステップ 2 を実行する必要があります。インライン ライトボックスの個別設定が表示されます。

それはあなたに連続したクラスを与えるでしょう

lbp-inline-link-1のためlbp-inline-href-1に、

lbp-inline-link-2などのためlbp-inline-href-2に..

前

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

入れる：

<?php 
$i = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

の場所で：

<a class="lbp-inline-link-1 cboxElement" href="#">

置く

<a class="lbp-inline-link-<?php echo $i;?>" href="#">

以下についても同じことを行います。

<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">

置く

<div id="lbp-inline-href-<?php echo $i; ?>" style="padding:10px; background: #fff;">

そして最後に置く前に

<?php 
$i++;
endwhile; else: ?>

OBS: 「インライン ライトボックスの数::」と同じ数の投稿が表示されるように設定する必要があります。

例: 投稿リストにページあたり 10 件の投稿が表示される場合、ステップ 2 の「インライン ライトボックスの数::」で 10 に設定する必要があります。

于 2013-11-07T04:23:24.563 に答える