2016-07-15 6 views
3

ブートストラップテーマをWordPressテーマに変換しようとしていますが、WordPressは画像を表示しません。ブートストラップのテーマを左に、ワードプレスのテーマを右に示すスクリーンショットをいくつか作った。WordPressへのブートストラップは画像を正しく表示しません

Bootstrap to WordPress

そして、これは私が、私はすべてを試してみましたし、何も動作間違ってやっているのか分からないのWordPressで画像コンテナのための私のコードです。

私は class="img-responsive.visible-xs"class="img-responsive visible-xs"を変更しようとしていると私はこれを取得
<div class="container-fluid"> 
    <div class="row" data-fluid=".fluidHeigt" data-float="true"> 
    <div class="col-sm-5 imageCol"> 
     <div class="image fluidHeigt" style="background-image:url(<?php echo get_template_directory_uri();?>/img/img-our_impact.jpg)"> 
     <img src="<?php echo get_template_directory_uri();?>/img/img-our_impact.jpg" alt="" class="img-responsive visible-xs" /> 
      </div> 
      </div> 

second image

スタイルはブートストラップとワードプレスの両方に同じですので、私はの原因としてスタイルのコードを除外しています問題は、また私は、Bootstrapのテーマが自動的にこのコードをタグのスタイルmin-height:799px;の後に生成することに気付きました。一方、WordPressのテーマはそれを生成しません。

あなたがこれを解決するためにさらなる情報が必要な場合は、私に助けてください、私に感謝してください。

答えて

0

.visible-xsは、超小型デバイスでのみイメージを表示します。これを入れてみてください:

<img src="<?php echo get_template_directory_uri();?>/img/img-our_impact.jpg" alt="" class="img-responsive" /> 
+0

私はこれを試して、サイズを正しく変更しましたが、その幅は今のところ小さくなっていますそれは799pxでなければならないと私は577pxを得る、私は自動的にブートストラップのテーマのように799pxを生成するためにワードプレスが必要です – Ivor92

+0

おそらく高さを生成しているJSの何かはありますか?もしそうなら、それは再構成する必要があるかもしれません。 Wordpressにはいくつかのjsファイルが追加されているので、JSが正しい順序でロードされていないと、特定のものが動作しない/実行されません。 –

+0

あなたは正しい順序が何であるか教えていただけますか? – Ivor92

0

あなたのWordPressテーマがjQueryをロードしていることを確認します。表示されていない場合は、これをfunction.phpファイルに入れて読み込みます。

+0

これはうまく動作しませんでしたが、これは私のfunctions.php関数内で私のjqueryをどのように呼び出すかです。function function b2w_theme_js { wp_enqueue_script( 'bootstrapmin_js'、get_template_directory_uri()。 'js/bootstrap.min.js'、array( 'jquery')、 ''、真);wp_enqueue_script( 'bootstrap_js'、get_template_directory_uri()。 'js/bootstrap.js'、array( 'jquery')、 ''、true);wp_enqueue_script( 'main_js'、get_template_directory_uri()。 'js/main.js'、array( 'jquery')、 ''、true); } add_action( 'wp_enqueue_scripts'、 'b2w_theme_js'); – Ivor92

+0

jsファイルを追加するのは正しいですが、その前にjqueryを呼び出す必要があります。私が提供したスニペットは最新バージョンを引き出すか、https://jquery.com/downloadにアクセスしてダウンロードし、エンキュースクリプトに追加することができます。 (PS、これは問題ではないかもしれませんが、これは私があなたのシナリオでチェックする最初のものです - 私のjsが機能しているかどうか) –

関連する問題