web-dev-qa-db-ja.com

HTMLと画像のための最高のWordpressのスライダープラグイン

私はたくさんのプラグインで遊んだことがあるウェブサイトのホームページに簡単に使えるスライダーが欲しいのですが、本当に自分のニーズに合ったものや対処しやすいものは何もありませんでした。私は自分のものを作るために時間をかけたくない。

これが私が必要とする要件です。

  1. 異なる画像サイズ（背景画像に合わせたサイズ）で複数のスライダを使用可能
  2. 投稿にリンクできるように、HTMLと画像を処理できる必要があります。

基本的に、私は特定のカテゴリでマークされたすべての投稿を「おすすめ」と言ってスライドに表示させてから、ホームページにタイトルとおすすめの画像を表示させます。

助言がありますか。私はすでに必要としている情報をquery関数を通して得ることができます。

自分でビルドしなければならない場合は、これがコードの形式になります。

<div id="feat-slider">
 <ul >
   <li id="feat-slide-id">
     <a href="permalink"><span class="feat-title">Title</span></a>
     <span class="feat-image">Featured Image</span>
   </li>
   ......
   ......
 </ul>
 <ul class="feat-nav">
   <li id="feat-slide-id">1</li>
   .......
 </ul>
 </div>

このようなものの複数のバージョンを作ることができるプラグインがないのであれば、これからスライダーを作成するための何らかのJavaScriptを提供することができます。

ありがとうございました

plugin-recommendationjqueryslideshow
1
BillPull

誰かがそれをコピーしたい場合に備えて、これが私がしたことです。

あなたの選択のカテゴリーを設定してください、そして、特集されたイメージはそのタイトルのためのスライドが表示されるでしょう、そして全部が固定リンクされます

これを生成するためのHTML/PHPはここにあります

  <div id="slider">
          <ul id="featslider">
            <?php 
                $portquery = new WP_Query();
                $portquery->query(array('cat'=> 3, 'posts_per_page' => 4));

                while ($portquery->have_posts()) : $portquery->the_post(); 
                    echo "<li class='featslide' id='feat-".$slidecount."'>";
                    echo " <a href='".get_permalink($post->ID)."'>";

                    echo '<span class="slide-title sosmed">&nbsp;&nbsp;'.the_title('','',false).'&nbsp;&nbsp;&nbsp;&nbsp;</span>';
            ?>
                    <?php if (has_post_thumbnail( $post->ID ) ): ?>
                        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                        <?php 
                            echo "<img src='".$image[0]."' />"; 
                        ?>
                    <?php endif; 

                    echo "</a></li>";
                    ?>

            <?php endwhile; ?>
          </ul>
        </div>
        <div id="featslide-nav" class="slidenav">

        </div>
    </div>

CSSあなたはおそらくあなたのサイズに合わせてこれを変更する必要があるでしょう

  #slider{
    height:348px;
    width:800px;
    overflow:scroll;
    overflow-x:hidden;
    position:relative;z-index:5
  }
  #featslider{
list-style-type:none;
margin:0;
z-index:0;
  }
  .featslide{margin-top:-22px;}
  #featslide-nav{
z-index:100;
position:absolute;
margin-top:-24px;margin-left:700px;
 }
  .slide-title{
z-index:10;
color:#000;
padding:6px;
min-width:250px;
text-align:center;
background:#fff;
position:relative;top:30px;
font-size:22px;
 }
 .slidenav a{
text-decoration:none;
color:#fff;
background:#000;
padding:5px;
margin:2px;
cursor:pointer;
   }

それからjQuery

   //SLIDER CONTROLS
     $("#slider").css("overflow", "hidden");
     $("ul#featslider").cycle({
       fx: 'fade',
       speed:    3000, 
       timeout:  6000,
       pager:"#featslide-nav"
   });

jquery cycle からHTMLスライドを作成することについてのこのブログ記事に基づいていますhttp://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

1
BillPull