2017-12-29 13 views
2

私は作成したワードプレスサイトに対して視差スクロールエフェクトを作成しました。私はページに移動し、画像が表示されません視差の背景に使用される画像は、style.cssのwordpress urlの代わりにhttp localhostから引き出されています。

HTML

<div class="container-above"></div> 

<!-- Parallax Container element --> 
<div class="parallax"></div> 

<div class="container-below"></div> 

CSS

.parallax { 
     /* The image used */ 
     background-image: url("https://mywebsite.com/wp-content/uploads/2017/12/image.png"); 

     /* Set a specific height */ 
     height: 500px; 

     /* Create the parallax scrolling effect */ 
     background-attachment: fixed; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: contain; 
    } 

:以下のHTMLとCSSを使用します。

(index):1 Mixed Content: The page at ' https://mywebsite.com/ ' was loaded over HTTPS, but requested an insecure image ' http://localhost/wpthemes/wordpress/wp-content/uploads/2017/12/image.png '. This content should also be served over HTTPS. img.png Failed to load resource: net::ERR_CONNECTION_REFUSED

基本的に画像がURLの下およびhttpsではありませんので、技術的にそれはありませんので、クロムはそれを表示しないことを意味します。私は、「検査」と、次のエラーを取得するために行きます安全です。それはあまり意味がない、私はイメージのために使用しているURLは私がそれを使用しているワードプレスサイトのメディアギャラリーから引っ張ったhttpsです。

私は "view page source"に行きました。確かに、style.cssファイルでは、wordpressのイメージリンクではなく、ローカルホストのリンク 'http://localhost/wpthemes/wordpress/wp-content/uploads/2017/12/image.png'を引き出しています。

だから私は戻ってFTPでのstyle.cssシートに戻りますが、CSSはまだ同じです:

.parallax { 
      /* The image used */ 
      background-image: url("https://mywebsite.com/wp-content/uploads/2017/12/image.png"); 

      /* Set a specific height */ 
      height: 500px; 

      /* Create the parallax scrolling effect */ 
      background-attachment: fixed; 
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: contain; 
     } 

誰もがこの上でいくつかの光を当てることはできますか?最初はキャッシュの問題だと思っていましたが、クロムのシークレットモードでサイトを読み込んで同じ効果とエラーが発生しました。

私はWordPressでやっている必要があります、おそらくHTMLのCSSの代わりに画像を挿入する必要がありますが、私はまだ特定の何かに出くわしていない感じを得る。

ご協力いただきありがとうございます。

答えて

0

あなたは最近、ライブサイトに地元デベロッパーよりこのサイトを移動した場合logos_164

、私はあなたが設定の下、あなたのwp-adminに確認することをお勧めかもしれ>>一般、何WordPressのアドレスを見て(URL @ )とサイトアドレス(URL)がに設定されています。

(時々、人々は彼らの地元のdevのSQL WordPressのデータベースをエクスポートして、/検索を行うサイトのURLに置き換えると、すべての設定がローカルホストである、またはで終わることを忘れます* .dev)

もしこれらのどちらも1アドレスはlocalhostです。それは問題ではありません。私はSQLのエクスポートを行い、localhostに関連する設定/フィールドがある場合に備えて、ファイルを検索してlocalhostへの参照を探します。

最近ローカルのデベロッパーからライブサイトに移動した場合、.htaccessファイルをリセットするためにパーマリンクの設定をやり直しています。

最後の手段として、ftp経由でホスト環境のフォルダに画像をアップロードし、wordpress media uploadフォルダを使用する代わりにstyle.css内の場所を参照することがあります。

+0

を私はあなたが示唆したように、サイトとWordpressの両方のURLがlocalhostではなくサーバードメインに設定されています。私はあなたの2番目の提案に興味を持っていますが、これを行う方法(SQLのエクスポートとファイルの検索)がわからない場合は、これについてどうやっていくべきかに関するいくつかのドキュメントにリンクできますか?あなたの提案をありがとう –

+0

phpMyAdminにアクセスできる場合は、あなたのwordpressデータベースをクリックしてから、エクスポートタブをクリックして、sqlファイルをテキストファイルにエクスポートすることができます。このテキストファイルをテキストエディタまたはIDE(私はメモ帳++を示唆)で開き、 'localhost'を検索し、テーブルに 'localhost'というエントリがあるかどうかを確認します。 – mmonroe

+0

ありがとうございました、はい、私はローカルホストで3つのエントリがあります。詳細を調べた後、私はローカルのWordPressの開発サイトからサーバーの補佐官にサイトを移動するときに何か間違ったことがあったと思います –

0

これには、PHP関数get_stylesheet_directory_uri()を使用して相対パスを設定することができます。

get_stylesheet_directory_uri(): Retrieves stylesheet directory URI for the current theme/child theme. Checks for SSL.

あなたHTML内のこのPHPを置く:

<?php echo get_stylesheet_directory_uri(); ?> 

それはあなたの現在のstylesheet directoryをエコーし​​ます。その後

image pathstylesheet pathを比較し、このような何か:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/aternus.png" alt="" width="" height="" /> 

や、sylesheet pathを発見した後、あなたがこのようCSSimageためrelative path書くことができます。

background-image: url('./../uploads/2017/12/image.png'); 
// explanation: /. means current folder, ../ means one folder back (up) 
関連する問題