4

このサイトにWooCommerceをインストールしました。これで、ホームページにいくつかの製品があることがわかります。特集ゲームのセクションにある製品のサイズは (100X140) で、クリックすると製品の詳細ページにリダイレクトされます。そこまでは大丈夫です。現在、ホームには、下の画像サイズとはサイズが異なる「すべての製品」セクションの下にいくつかの製品があります。

ここで、一番上のセクション (すべての製品) を完全にクリック可能にして、画像をクリックすると、一番下のおすすめの製品と同じように、対応する製品の詳細ページにリダイレクトされるようにします。また、このセクションを管理者から完全に管理できるようにしたいと考えています。それで、誰かが親切にこれを行う方法を教えてもらえますか？どんな助けや提案も本当に価値があります。ありがとう...

4

2 に答える 2

3

簡単に言えば、画像のアンカータグはありません。これがあなたがする必要があることです：

現在のコード

すべての製品のHTMLコードは次のようになります。

<div class="best-seller-wrap">
    <div class="second-img">
        <div class="disount-text">
            30% OFF
        </div>
        <div class="price-text-wrap">
            <h3>$34.99</h3>
            <p>
                <a href="http://modulesoft.info/projects/gamesite/?product=dishonered">Buy Now..</a>
            </p>
        </div>
    </div>
</div>

そしてこのようなCSS：

#main .best-seller-wrap .second-img {
    background-image: url('images/best-seller-images/img-2.png');
    position: relative;
}

新しいコード

すべての製品のHTML：

<div class="best-seller-wrap">
    <div style="position: relative">
        <a class="second-img" href="http://modulesoft.info/projects/gamesite/?product=dishonered"></a>
        <div class="disount-text">
            30% OFF
        </div>
        <div class="price-text-wrap">
            <h3>$34.99</h3>
            <p>
                <a href="http://modulesoft.info/projects/gamesite/?product=dishonered">Buy Now..</a>
            </p>
        </div>
    </div>
</div>

CSS：

#main .best-seller-wrap .second-img {
    background-image: url('images/best-seller-images/img-2.png');
    position: relative;
    display: block;
}

.second-imgクラスをアンカータグに適用し、クラスに追加していることに気付くでしょうdisplay: block。

<a class="second-img" href="http://modulesoft.info/projects/gamesite/?product=dishonered"></a>

position: relativeまた、私が周囲に追加していることに注意してくださいdiv

<div style="position: relative">

これで、画像全体がリンクとして機能するはずです。

于 2013-02-15T16:42:45.470 に答える
1

サイトを見ただけでwooコマースはよくわからないのですが、2つのセクションのデザインが全然違います。注目の製品のリンクは次のとおりです。

<a href="http://modulesoft.biz/projects/gamesite/?product=demo-product">
<span class="onsale">Sale!</span>
<img width="100" height="140" src="http://modulesoft.biz/projects/gamesite/wp-content/uploads/2013/01/hitman-absolution-275x275-imadfwj4t6zqb3ja-100x140.jpeg" class="attachment-shop_catalog wp-post-image" alt="hitman-absolution-275x275-imadfwj4t6zqb3ja">
<h3>demo product</h3>
<span class="price"><span class="strike-through"><span class="striked-text">    <span class="amount">23€&lt;/span></span></span> <ins><span class="amount">21€&lt;/span></ins></span>
</a>

したがって、セクション全体が a タグにあり、

他のセクションには次のものがあります。

<div class="first-img">
<div class="disount-text">20% OFF</div>
<div class="price-text-wrap">
<h3>$31.99</h3>
<p><a href="http://modulesoft.info/projects/gamesite/?product=lorem-ipsum-game">Buy Now..</a></p></div>
</div>

クラス 'first-img' がスタイル シートにリンクされている場所:

#main .best-seller-wrap .first-img {
  background-image: url('images/best-seller-images/img-1.png');
  position: relative;
}

これは推測にすぎませんが、コードの最初の部分を a タグで囲んでいるコードを見つけた場合は、他の部分のコードでそれを行う方法を理解できるはずです。

基本的な woo コマース プラグインのコードを見たところ、デフォルトではレイアウトがないように見えます。コードですが、うまくいきません。上に投稿してください。

于 2013-02-15T14:46:41.150 に答える