0

このサイトに出会いました: http://www.jfletcherdesign.com .

ホームページが彼のすべての投稿の注目の画像を表示する方法と、画像をクリックすると特定の投稿にドリルダウンする方法を再現したいと思います。また、カテゴリ内の対応する投稿に、画像を使用して次へと進む方法を再現したいと考えています。

誰かがこの機能を設定するための正しい方向に私を向けることができますか?

彼のカテゴリ ページでロールオーバー効果に使用されている jQuery プラグインを教えていただければボーナス ポイントです。

ありがとう！

4

1 に答える 1

1

このサイトは、WPShowerのImbalanceテーマに基づいています。これは無料のテーマなので、ダウンロードしてすべてのソース コードを確認できます。それはあなたの最初の質問に答えるはずです。

前の投稿と次の投稿のページネーションとして機能する画像を取得するには、get_adjacent_post 関数を使用するだけです。以下のコードのようなものを使用して、画像をリンクするように設定できます。single.php の一番下、またはページネーションを表示したい場所に貼り付けます。

<?php
    $prev_post = get_adjacent_post(true, '', true);
    $next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
    <a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
    <a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>

jQuery のロールオーバーについては、非常に簡単です。

$(document).ready(function() {
    $('.article').mouseenter(function() {
        $(this).find('.article-over').show();
    });
    $('.article').mouseleave(function() {
        $(this).find('.article-over').hide();
    });
    $('.article').hover(
        function() {
            $(this).find('.preview a img').stop().fadeTo(1000, 0.3);
        },
        function() {
            $(this).find('.preview a img').stop().fadeTo(1000, 1);
        }
    );
});

テーマによって生成された次の HTML マークアップに作用します。

<li class="article li_col1" id="post-1234">

    <div class="preview">
        <a href="http://www.site.com/2013/01/post/"><img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post"></a>
    </div>

    <div class="article-over">
        <h2><a href="http://www.site.com/2013/01/post/" title="Cool Post">Cool Post</a></h2>
        <div class="the-excerpt">
            <p>Blah blah blah this is a post excerpt...</p>
        </div>
    </div>

</li>

基本的に、最初にサイトにアクセスしたとき、最初の項目を除くすべての項目について.preview、カテゴリ画像を保持する div だけが表示されます。.article-overdiv は絶対に div の上に配置されますが、見えないように.previewのスタイルになっています。display:none

mouseenter イベントが発生すると、.article-overを介して div が表示されshow()、内部の画像.previewが 0.3 の不透明度までフェードアウトし、.previewその背後にある div の黒い背景を見ることができます。マウスが離れると、.article-overが非表示になり、.previewイメージがフェードバックして完全に不透明になります。

それでも問題が解決しない場合はお知らせください。詳しく説明します。

于 2013-01-29T21:32:24.483 に答える