시차 배경에 사용 된 이미지가 style.css의 wordpress url 대신 http localhost에서 가져옵니다.

Question

내가 만든 WordPress 사이트에 대해 시차 효과를 만들었습니다.

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을 사용하고있는 WordPress 사이트의 미디어 갤러리에서 가져온 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; 
     } 

사람이 되거 수 있을까? 처음에는 캐시 문제라고 생각했지만 Chrome에서 시크릿 모드로 사이트를로드했으며 동일한 효과와 오류가 발생했습니다.

나는 CSS가 아닌 html로 이미지를 삽입하는 등 wordpress로해야 할 필요가있는 느낌이 들지만 아직 구체적인 것을 찾지 못했습니다.

미리 도움을 주셔서 감사합니다.

Answer 1

최근 라이브 사이트에 로컬 디바이스에서이 사이트를 이동 한 경우 logos_164

, 당신이 설정에서 당신의 WP-관리자에서 확인하는 것이 좋습니다 수 있습니다 >> 일반 어떤 워드 프레스 주소를 보면 (URL @) 및 사이트 주소 (URL)가로 설정됩니다.

(때때로 사람들은 자신의 로컬 dev에 SQL 워드 프레스 데이터베이스를 내보내고/A 발견 할 사이트 URL을 교체하고 모든 설정이 로컬 호스트 인 또는 끝낼 것을 잊지합니다 * .dev)

만약 그 중 어느 하나 주소가 localhost이면 문제가되지 않습니다. 비록 내가 SQL 내보내기를 할 것이고 localhost에 대한 어떤 참조를 위해 파일을 검색 할 것입니다. 다만 localhost와 관련이있는 설정/필드가있는 경우에 대비해서 말이죠.

최근에 로컬 개발자에서 라이브 사이트로 이동 한 경우 .htaccess 파일을 다시 설정하기 위해 영구 링크 설정을 다시 실행합니다.

마지막 수단은 ftp를 통해 이미지를 호스팅 환경의 폴더로 업로드하고 wordpress 미디어 업로드 폴더를 사용하는 대신 style.css에서 해당 위치를 참조하는 것입니다.

Answer 2

이 경우 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을 에코합니다.

이

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

하거나, 찾는 후 sylesheet path이 같은 CSS에 image에 대한 relative path을 작성할 수 있습니다 :

background-image: url('./../uploads/2017/12/image.png'); 
// explanation: /. means current folder, ../ means one folder back (up)