워드프레스 4.7 버전과 Twenty Seventeen 테마

올해 12월 6일에 워드프레스 4.7이 출시될 예정입니다. 현재 WordPress 4.7 Beta 3까지 릴리스되었습니다. 워드프레스 4.7에 새롭게 선보이는 기능은 다음 글에서 확인해볼 수 있습니다.

워드프레스 4.7에는 Twenty Seventeen 테마가 새롭게 추가될 예정입니다. 특히 헤더 부분에 비디오를 추가할 수 있는 기능이 지원됩니다.

테스트로 워드프레스 4.7 베타 버전을 설치해보았습니다. Enfold 테마가 설치된 상태에서 베타 버전을 올렸는데, 우려와는 달리 별 이상 없이 사이트가 표시되는 것을 확인할 수 있었습니다.

설치하면 다음과 같은 Welcome 화면이 표시됩니다.

워드프레스 4.7

위에서 아래 부분의 화면(동영상)은 4.6에 관한 것이네요. (아직 4.7에 대한 내용은 확정되지 않았나 봅니다.)

외모 > 테마로 이동해보니 새롭게 선보이는 Twenty Seventeen 테마가 목록에 표시되어 있습니다.

Twenty Seventeen 테마

Twenty Seventeen 테마를 활성화해보니 헤더 부분이 미리 지정된 이미지로 표시되네요. 헤더 부분의 이미지는 Parallax(패럴랙스) 스크롤 방식으로 구동됩니다(참고).

워드프레스 4.7 베타

외모 > 사용자 정의하기 > Header Visuals에서 헤더 부분의 비주얼을 설정할 수 있습니다. 아래 그림과 같이 헤더 이미지나 동영상을 지정할 수 있는 옵션이 제공됩니다.

Twenty Seventeen 테마

워드프레스 4.7 베타 버전을 설치해도 별 문제가 발생하지 않았지만, 아직 불안정한 버전이므로 테스트 목적 이외에는 업그레이드하지 않는 것이 좋습니다.


9개 댓글

  1. twenty seventeen 테마인데요.
    갑자기 모바일 화면에서 오른쪽에 여백이 생기면서 화면이 좌우로 움직이는 현상이 생겼는데 바로 잡을 수는 없을까요? 전혀 작업이 없었는데 이런 현상이 생겼네요.

    1. 안녕하세요?

      갑자기 그런 현상이 나타났다고 한다면 문제를 야기한 어떤 이벤트가 발생했을 것입니다.

      가령 새로운 플러그인을 설치했거나, 업데이트했거나 등등

      말씀하신 증상으로서는 그런 부분이 있었는지 확인해보는 것이 우선일 것 같습니다. 잘 안 되면 Twenty Seventeen 테마의 Support 페이지에서 지원을 요청해보시기 바랍니다.

  2. twentyseventeen 테마 사용중인데.. 모바일에서 반응형으로 잘 보이다가 뭐를 건드렸는지 모르지만 모바일에서 pc형으로 보이는데 어떻게 원래대로 복구시키는 방법이 없을까요?

    1. 안녕하세요? 블로그를 방문해주셔서 감사합니다.

      Twenty seventeen 테마의 헤더 이미지가 *작은 화면에서* 반응형이 아니라고 하네요. 하지만 제가 확인해보지 않아서 확실하지는 않습니다.

      1. 그렇군요. 반응형으로 잘 보였는데..갑자기 그러네요. 젯팩이 수상하긴한데.. 답변감사합니다.

    2. 다음 코드를 CSS 스타일시트 파일에 추가한 후에 테스트해보시겠어요?

      @media screen and (max-width: 480px) {
      .has-header-image.twentyseventeen-front-page .site-branding,
      .has-header-video.twentyseventeen-front-page .site-branding,
      .has-header-image.home.blog .site-branding,
      .has-header-video.home.blog .site-branding,
      .has-header-image.twentyseventeen-front-page .custom-header,
      .has-header-video.twentyseventeen-front-page .custom-header,
      .has-header-image.home.blog .custom-header,
      .has-header-video.home.blog .custom-header { height: auto;
      left: 0;
      max-width: 100%;
      min-height: 0;
      -o-object-fit: unset;
      object-fit: unset;
      position: relative;
      -ms-transform: none;
      -moz-transform: none;
      -webkit-transform: none;
      transform: none;
      }

      .has-header-image.twentyseventeen-front-page .site-branding,
      .has-header-video.twentyseventeen-front-page .site-branding,
      .has-header-image.home.blog .site-branding,
      .has-header-video.home.blog .site-branding,
      .custom-header-media,
      .has-header-image .custom-header-media img,
      .has-header-video .custom-header-media video,
      .has-header-video .custom-header-media iframe {
      position: static;
      }

      .custom-header-media:before {
      background: none;
      }

      body.has-header-image .site-description,
      body.has-header-video .site-description {
      color: #222;
      opacity: 1;
      }

      .site-branding .wrap {
      padding: 0 1em;
      }
      }

      위의 코드를 적용하면 Twenty Seventeen의 헤더 이미지가 반응형으로 작동하지 않을까 생각됩니다. 결과를 알려주시면 감사하겠습니다.

      1. 아무런 변화가 없군요.
        잘 되다가 갑자기 그렇거든요.
        건드린게 젯팩안에 있는 것들 몇개 활성하 하고 비활성화하고, 헤드파일에 몇개 손보고.. 싱글파일 몇개 건드린건데..테마쪽하곤 크게 관련이 없지 싶은데 원인을 못찾고 있네요. 감사합니다.

      2. 플러그인 문제가 의심된다면 모든 플러그인을 비활성화한 후에 같은 증상이 나타나는지 여부를 통해 확인해볼 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.