Evolve テーマのカルーセル スライダーには、いくつかのサンプル画像があります。
それらを新しい写真に変更し、画像をクリックすると記事が開く href を追加するにはどうすればよいですか?
質問する
7761 次
1 に答える
1
スライダーの正しい寸法でメディア ライブラリに写真をアップロードします。画像の編集を選択すると、フルサイズのバージョンが得られます。
Firefoxでは画像を右クリックして「画像の場所」をコピーするように依頼し、Chromeブラウザでは「画像のURLをコピー」すると、クリップボード内の画像へのURLが次のようになります
http://www.####.###/wp-content/uploads/2013/06/image.jpg
次に、ウィジェットに移動します
「T4P Carousel Slider」を Header1 領域に追加する必要があります。テーマは、テーマを宣伝するための独自のカスタム ウィジェットを自動的に読み込みます。ウィジェットを追加すると、デフォルトでコードが含まれるコード ボックスが表示されます。
そのコードを独自のものに置き換えることは難しくありませんが、ドラッグ アンド ドロップ オプションではないことは確かです。
カルーセル スライダーをヘッダーにドラッグすると、コードが表示されます。
次のような 4 つのセクションが表示されます。
<img src='http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
<div class='carousel-caption'>
<h4>Built-in Bootstrap Elements let you do amazing things with your website</h4>
コードのこの部分を cntl-v を使用してライブラリからの画像への URL に置き換え、必要に応じて alt タグを追加します http://www.####.###/wp-content/themes/ の前にevolve/library/media/images/slide/slider_img_01.jpg' alt='' />
http://wp.fofc.org/wp-content/uploads/2013/06/baby.jpg' alt='Baby' /> の後
次に、キャプションを画像の上に追加できます 組み込みの Bootstrap 要素を使用して Web サイトで驚くべきことを行う前に
After これは本当にクールなイメージです
コード ボックスの下部に、追加のコードが表示されます。これは、ナビゲーション用の長方形のウィンドウにドットがいくつあるかを制御します。ドットごとに 1 行です。画像が 3 つしかない場合は、data-to='4' の行を完全に削除します。または、一番下に別の行を追加することもできます: 5
<div id='carousel-nav'>
<a href='#myCarousel' data-to='1' class='active'>1</a>
<a href='#myCarousel' data-to='2'>2</a>
<a href='#myCarousel' data-to='3'>3</a>
<a href='#myCarousel' data-to='4'>4</a>
-- add or remove lines above this line
</div>
これは、スライダーの中央下部にあるナビゲーション ボックスを制御します。ただし、スライドが自動的に変更されるため、ドットは移動していないように見えます。ドットは、クリックしたときにのみ移動します。
必要に応じて、コードから div 全体を削除すると、ナビゲーション ボックスが削除されます。
お役に立てれば。
于 2013-06-28T16:28:51.213 に答える