Wordpressプラグインから生成されたCSSをカスタマイズする

Question

こんにちは私はthie zibbraプラグインをプロジェクトから使用しています。プラグインはうまく動作します。私の問題は、ロードされたプラグインから生成されたクラスにカスタマイズを追加する方法です。 HERESに私はこの1つの

<div class="container"> 
    <div class="row"> 

     <div class="col-md-4" > 
      <div class="col-md-4"> 

      </div> 
      <div class="col-md-8" > 

      </div> 
     </div> 

    </div> 
</div> 

どれヘルプに基づいて、CSSをカスタマイズし、変更したい

<div id="zibbra-category"> 
<div class="row"> 
<div class="col-xs-12 col-md-2"> 
<div id="zibbra-product-14215" class="thumbnail"> 
<a href="http://doorbraakboeken.be/zibbra/product/14215-dorpstraat---wetstraat/"> 
<img src="https://cdn.zibbra.com/p/14215/1474534650.jpg?width=160&height=160" alt="Dorpstraat - Wetstraat"> 
</a> 
<div class="caption text-center"> 
<h3 class="name">Dorpstraat - Wetstraat</h3> 
<p class="description">In Dorpstraat - Wetstraat gaat Peter Reekmans dieper in op twee politieke niveaus en vooral de invloed van de Wetstraat op de Dorpstraat.</p> 
<p class="price">€ 22,95</p> 
<a class="btn btn-primary" href="http://doorbraakboeken.be/zibbra/product/14215-dorpstraat---wetstraat/" role="button">View product</a> 
</div> 
</div> 
</div> 
</div> 
</div> 

以下の私のhtmlコードはmuchly appreciated.TIA

Answer 1

これはjQueryとDOMを使用して行うことができることです私は思う。各要素に関連付けられたIDを持つHTMLが読み込まれているので、そこから有用な情報を簡単に取得できます。以下は参照です：

var prodUrl = $('#zibbra-category').find('.thumbnail a').attr('href'); 
var prodimgSrc = $('#zibbra-category').find('.thumbnail img').attr('src'); 

あなただけのHTML文字列を作成し、それが正しい場所にあることを確認するために、既存のdiv「＃のzibbra-カテゴリ」周りのことをラップ移入するために必要な情報を取得したら。

その後、「＃zibbra-category」divを非表示にするか、それを置き換えます。あなたのHTML文字列をコンテナに追加します。

jQueryを使用しているときに、wordpressは時折 '$'で動作しません。使用中の他のライブラリとの競合を引き付けないので、jQueryを使用する方が良いです。

これが役立つかどうか教えてください。乾杯！

は/ ***ここでは以下のコードであるコード*/

です。これを試して。

jQuery.(document).ready(function($){ 


    var prodUrl = $('#zibbra-category').find('.thumbnail a').attr('href'); 
    var prodimgSrc = $('#zibbra-category').find('.thumbnail img').attr('src'); 
    var prodDetails = $('.caption ').html(); 
    $("#zibbra-category").wrap("<div class='container'></div>"); 
    var modifiedHtmlStr = '<div class="row"><div class="col-md-4" ><div class="col-md-4"><a href="'+prodUrl +'"><img src="'+prodimgSrc +'"/></a></div><div class="col-md-8" >'+prodDetails +'</div></div></div>'; 
    $("#zibbra-category").parent().html(modifiedHtmlStr); 
    })