web-dev-qa-db-ja.com

ワードプレスと同位体フィルタリング

私のWordpressの投稿をフィルタリングするためにIsotope（ http://isotope.metafizzy.co/ /）を使用しようとしているIm、 http://i44.tinypic.com/fco55k.jpg これが私のサイトの外観です私は各投稿にクラス名を追加してから同位体を使ってそれをフィルタリングする必要があるので、私は投稿カテゴリに応じて投稿をフィルタリングしたいと思います

  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".design">design</a></li>
  <li><a href="#" data-filter=".typo">typography</a></li>

これらは私のカテゴリの名前です、そして私は彼がいるカテゴリに応じて投稿のクラス名を追加したいと思います。

<div id="main">
          <?php
          $args = array('orderby' => 'Rand' );
          $random = new WP_Query($args); ?>
          <?php if(have_posts()) : ?><?php while($random->have_posts()) : $random->the_post(); ?>
         <a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); 
                echo $category[0]->cat_name; ?>">
            <?php 
                the_post_thumbnail();?>

            <h1><?php the_title(); ?></h1>
</div></a>

とJavaScriptのimを使用して

    <script type="text/javascript">
jQuery(window).load(function(){
jQuery('#main').isotope({
  masonry: {
    columnWidth: 20
  },

});
$('#filters a').click(function(event){
  var selector = $(this).attr('data-filter');
  $('#main').isotope({ filter: selector });
  return false;
});
});

</script>
categoriesjquery
4
dinosauuur

同位体とフィルタがまだ機能しているかどうかわかりませんか。

あなたが逃したと思う2つのことがあります

  1. 次のように、フィルタをクラスにラップする必要があります（リンクをクリックすることでjqueryを実行できるようにするため）。

    <ul id="options">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".web">web</a></li>
<li><a href="#" data-filter=".mobile">mobile</a></li>
</ul>

注意：データフィルタはCaSeに敏感です（したがって、それらはあなたのWordPressカテゴリまたはあなたが使用するものが何とも一致しなければそれらは機能しません）.

  1. 同位体jqueryは、WordPressで安全にする必要があります - 競合しないモードで実行するには

これがIsotopeのドキュメントの元のコードです。

// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});

これがWordPress用に変更されたコードです。

// filter items when filter link is clicked
jQuery('#options a').click(function(){
var selector = jQuery(this).attr('data-filter');
mycontainer.isotope({ filter: selector });
return false;
});

NBは同位体スクリプトの残りの部分の後にこれを入れて、＃optionsがHTMLのあなたのフィルタリストからのクラスであることに注意してください:)

damien.co/isotope で動作しているのがわかります。

お役に立てば幸いですか。

2
Damien

あなたはこの機能を使いたいと思うかもしれません：

あなたのfunctions.phpにこれを置きなさい

function isotope_categories() {

        $categories = get_categories();

        $html = '<ul class="filters option-set" data-option-key="filter">';
        $html .= '<li><a href="#filter" data-option-value="*" class="selected">All items</a></li>';

        foreach ($categories as $category) {

            $html .= "<li><a href='#filter' data-option-value='.category-{$category->category_nicename}'>{$category->cat_name}</a></li>";   
        }

        $html .= '</ul>';

        echo $html;
    }

そして同位体コンテナがあるファイルでこの関数を呼び出します。

好きです：

<nav class="options">                       
    <?php isotope_categories() ?>
</nav>

同位体の正しいマークアップを出力します

そのため、Wordpressのバックエンドで新しい投稿を作成し、それらにカテゴリをリンクすると、それらが表示されてフィルタ処理可能になります。

4
Beau

私もこの話題に出くわしたときにjQuery IsotopeプラグインをWPと統合しようとしています。それでも手助けが必要な場合は、これがどのように機能するかです。カスタム分類法であるprojects_categoriesでフィルタリングしたいカスタム投稿タイプのプロジェクトを作成したので、私の方法は少し異なりました。

ページテンプレートでは、＃projects-filterリストと#projects divを生成するために次のphpが必要です。

<?php
$terms = get_terms('project_categories');
$count = count($terms);
if ( $count > 0 ){
echo '<ul id="projects-filter">';
echo '<li><a href="#" data-filter="*">All</a></li>';
foreach ( $terms as $term ) {
    $termname = strtolower($term->name);  
    $termname = str_replace(' ', '-', $termname);  
    echo '<li><a href="#" data-filter="' . '.' . $termname . '">' . $term->name . '</a></li>';
}
echo '</ul>';
}
?>

<?php 
    $loop = new WP_Query(array('post_type' => 'projects', 'posts_per_page' => -1));
    $count =0;
?>

<div id="project-wrapper">
    <div id="projects">

    <?php if ( $loop ) : 

        while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $terms = get_the_terms( $post->ID, 'project_categories' );

            if ( $terms && ! is_wp_error( $terms ) ) : 
                $links = array();

                foreach ( $terms as $term ) 
                {
                    $links[] = $term->name;
                }
                $links = str_replace(' ', '-', $links); 
                $tax = join( " ", $links );     
            else :  
                $tax = '';  
            endif;
            ?>

            <?php $infos = get_post_custom_values('wpcf-proj_url'); ?>

            <div class="project-item <?php echo strtolower($tax); ?>">
                <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'projects-thumb' ); ?></a></div>
                <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
                <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Sorry, no portfolio entries for while.</div>

    <?php endif; ?>


    </div>

    <div class="clearboth"></div>

</div> <!-- end #project-wrapper-->

そして、これが魔法をかけるJavaScriptです。

jQuery(document).ready(function(){
    var mycontainer = jQuery('#projects');
    mycontainer.isotope({ 
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'liniar',
            queue: false,
        }
    }); 

    jQuery('#projects-filter a').click(function(){ 
        var selector = jQuery(this).attr('data-filter'); 
        mycontainer.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'liniar',
                queue: false,
            } 
        }); 
      return false; 
    });
});
3
Curtis Flick

まず、投稿の出力を<div>で囲み、その<div>に <?php post_class(); ?> templateタグを追加します。

だから、これを変更します。

<a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); echo $category[0]->cat_name; ?>">
    <?php the_post_thumbnail();?>

    <h1><?php the_title(); ?></h1>
</div></a>

....これに：

<div <?php post_class(); ?>
    <a href="<?php the_permalink() ?>"> <div id="img">
        <?php the_post_thumbnail();?>

        <h1><?php the_title(); ?></h1>
    </div></a>
</div>

さて、post_class() Codexエントリ（上記のリンク）を読むと、他のクラスの中でも、このテンプレートタグはcategory-{slug}クラスを適用することがわかります。 （カテゴリの例では、post_class()はcategory-designまたはcategory-typoを追加します。

それでは、同位体フィルターを実装するためにはcategory-{slug}をターゲットにするだけでいいのです。

3
Chip Bennett

AnimationEngnine： 'jquery'を追加すると、アニメーションが滑らかになります。

var mycontainer = jQuery('#projects');
mycontainer.isotope({ 
    filter: '*',
    animationEngine: 'jquery',
    animationOptions: {
    duration: 350,
    easing: 'linear',
    queue: true
    }
}); 

jQuery('#projects-filter a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    mycontainer.isotope({ 
        filter: selector,
        animationOptions: {
            duration: 350,
            easing: 'linear',
            queue: true,
        } 
    }); 
  return false; 
});
0
Justin Young