본문 바로가기
wordpress/wordpress기초

워드프레스 - 테마 만들기 - 표지 입력

dhsdb1541@naver.com 2020. 10. 27.

wp_enqueue_media()

미디어 파일 준비함수, 편집페이지에서는 이미 로딩되어있다. 

wp_enqueue_scripts액션태그에서 걸어서 사용하면된다

 

functions.php

<?php
include 'functions-post-type.php';
include 'functions-setup.php';
include 'functions-taxonomy.php';
include 'functions-meta-box.php';
include 'functions-save.php';
include 'functions-enqueue-scripts.php';

 

 

 

wp_enqueue_script( $handle:string, $src:string, $deps:array, $ver:string|boolean|null, $in_footer:boolean )

 

 

var_dump로 현재 스크린을 파악한 뒤에

 

책 수정란에서만 해당 scripts가 동작하게 만든다 

functions-enqueue-scripts.php

<?php
add_action('admin_enqueue_scripts', function(){
    
    $screen = get_current_screen();

    if($screen->id === 'book'){
        wp_enqueue_script('mbs_media', get_template_directory_uri().'/js/book-edit-media.js', [], '2020-10-27',true);
        
    }

});

 

/js/book-edit-media.js

alert("hello");

 

media 창 열기

var media_object = wp.media();

media_object.open({});

창 열기 옵션

title 창제목

button.text  버튼 레이블

library.type = mimetype

 

 

book-edia.media.js

console.log(wp.media().open());

wp의 media를 콘솔로 찍으면 에러가 발생한다. ( 호출 순서에 따른 문제 발생)

 

따라서 

 

<?php
add_action('admin_enqueue_scripts', function(){
    
    $screen = get_current_screen();

    if($screen->id === 'book'){
        wp_enqueue_script('mbs_media', get_template_directory_uri().'/js/book-edit-media.js', ['media-views'], '2020-10-27',true);
        
    }

});

media-views라는 의존성을 추가해줘야 정상적으로 동작한다. 

 

 

 

 

 

 

functions-meta-box.php

<?php
add_action('add_meta_boxes_book', function () {
    add_meta_box('book-detail', '책 상세 정보', function () {
        include 'meta-box/book-detail.php';
    }, 'book');

    add_meta_box('book-cover', '책 표지', function () {
        include 'meta-box/book-cover.php';
    }, 'book');
});

add_action('edit_form_advanced', function () {
    if (get_current_screen()->post_type === 'book') {
        include 'meta-box/book-toc.php';
        include 'meta-box/book-author-intro.php';
        include 'meta-box/book-translator-intro.php';
    }
});

add_meta_box  book-cover.php  

 

book-cover.php

<button type="button" class="js-open-book-cover-media button">표지 넣기</button>

 

book-edia-media.js

document.querySelector(".js-open-book-cover-media").addEventListener('click', function(){
    var media = wp.media();
    media.open();
})

다만 이미지파일 외에 파일들이 업로드되지 않게 업로드 방지를 해줘야한다. 

 

book-edit-media.js

document.querySelector(".js-open-book-cover-media").addEventListener('click', function(){
    let media = wp.media({
        title:"표지를 선택해 주세요",
        library:{
            type:'image'
        },
        button:{
            'text' : '넣기'
        }
    });
    media.open();
})

표지 저장하기

 

book-edit-media.js

(function () {
  let media = wp.media({
    title: "표지를 선택해 주세요",
    library: {
      type: "image",
    },
    button: {
      text: "넣기",
    },
  });
  document
    .querySelector(".js-open-book-cover-media")
    .addEventListener("click", function () {
      media.open();
    });

  media.on("select", function () {
    let attachment = media.state().get("selection").first().toJSON();
    console.log(attachment);
  });
})();

변경후 업로드를 진행하면

 

아래와 같이 console창이 나오게 된다 

 

 

 

 

이제 해당 부분에서 

attachment 부분의 중간 사이즈 이미지를 div 태그에 넣어준다. 

 

book-cover.php

<div style="text-align: center;">
    <p>
        <button type="button" class="js-open-book-cover-media button">표지 넣기</button>
    </p>
    <div class="js-open-book-cover-thumbnail">
    </div>
    <!-- 값을 저장하기위해 cover_id 의 값을 넣어준다  -->
    <input type="hidden" name="meta[cover_id]"
    value="<?= esc_attr(get_post_meta(get_the_ID(), 'cover_id', true)) ?>">
</div>

 

업로드시 생성된 attachment를 통해 생성된 해당 URL을 

input type hidden인 부분에 넣어준다

book-edit-media.php

(function () {
  let media = wp.media({
    title: "표지를 선택해 주세요",
    library: {
      type: "image",
    },
    button: {
      text: "넣기",
    },
  });
  document
    .querySelector(".js-open-book-cover-media")
    .addEventListener("click", function () {
      media.open();
    });

  media.on("select", function () {
    let attachment = media.state().get("selection").first().toJSON();
    // console.log(attachment.size.medium.url);
    let imgEl = `<img src="${attachment.sizes.medium.url}"/>`;
    document.querySelector(".js-open-book-cover-thumbnail").innerHTML = imgEl;

    // 이미지의 id를 기억하기위해 attachment.id를 넣어준다 
    document.querySelector('[name="meta[cover_id]"').value = attachment.id;
  });
})();

 

 

업로드시에 해당 id가 잘 들어가있는것을 확인 할 수 있다. 

 

 

따라서 해당 id를 기반으로 img url을 가져오면된다 

 

wp.media.attchment 속성을 통해 값을 가져올수 있다.

 

표지 조회하기 

 

(function () {

    function renderCover(attachment){
        let imgEl = `<img src="${attachment.sizes.medium.url}"/>`;
        document.querySelector(".js-open-book-cover-thumbnail").innerHTML = imgEl;
    }

  let media = wp.media({
    title: "표지를 선택해 주세요",
    library: {
      type: "image",
    },
    button: {
      text: "넣기",
    },
  });
  document
    .querySelector(".js-open-book-cover-media")
    .addEventListener("click", function () {
      media.open();
    });

  media.on("select", function () {
    let attachment = media.state().get("selection").first().toJSON();
    // console.log(attachment.size.medium.url);
    renderCover(attachment);

    // 이미지의 id를 기억하기위해 attachment.id를 넣어준다 
    document.querySelector('[name="meta[cover_id]"').value = attachment.id;
  });

  if(document.querySelector('[name="meta[cover_id]"').value){
    wp.media.attachment(document.querySelector('[name="meta[cover_id]"').value)
    .fetch()
    .then(renderCover);
}
})();

 

 

표지 제거하기 

 

book-cover.php

<style>
    .button-like-text {
        border: 0;
        padding: 0;
        background-color: transparent;
    }

    .color-danger {
        color: #a00;
    }

    .color-danger:hover {
        color: #dc3232;
    }
</style>

<div style="text-align: center;">
    <p>
        <button type="button" class="js-open-book-cover-media button">표지 넣기</button>
    </p>
    <p class="js-open-book-cover-thumbnail">
    </p>
    <button type="button" class="button-like-text color-danger js-remove-book-cover" style="display: none;">표지 제거</button>
    <!-- 값을 저장하기위해 cover_id 의 값을 넣어준다  -->
    <input type="hidden" name="meta[cover_id]" value="<?= esc_attr(get_post_meta(get_the_ID(), 'cover_id', true)) ?>">
</div>

 

삭제하는 버튼을 만들어 주되 표지가 있을때만 보일수 있도록 평소에는 display none으로 가려놓기로한다

 

 

book-edit-media.php

 

 

 

(function () {
  function renderCoverAndShowRemoveButton(attachment) {
    let imgEl = `<img src="${attachment.sizes.medium.url}"/>`;
    document.querySelector(".js-open-book-cover-thumbnail").innerHTML = imgEl;
    document.querySelector('.js-remove-book-cover').style.display = "inline-block";
  }

  let media = wp.media({
    title: "표지를 선택해 주세요",
    library: {
      type: "image",
    },
    button: {
      text: "넣기",
    },
  });
  document
    .querySelector(".js-open-book-cover-media")
    .addEventListener("click", function () {
      media.open();
    });

  media.on("select", function () {
    let attachment = media.state().get("selection").first().toJSON();
    // console.log(attachment.size.medium.url);
    renderCoverAndShowRemoveButton(attachment);

    // 이미지의 id를 기억하기위해 attachment.id를 넣어준다
    document.querySelector('[name="meta[cover_id]"').value = attachment.id;
  });

  if (document.querySelector('[name="meta[cover_id]"').value) {
    wp.media
      .attachment(document.querySelector('[name="meta[cover_id]"').value)
      .fetch()
      .then(renderCoverAndShowRemoveButton);
  }
document.querySelector('.js-remove-book-cover').addEventListener('click', function(){
    document.querySelector('[name="meta[cover_id]"').value = '';
    document.querySelector(".js-open-book-cover-thumbnail").innerHTML = '';
    this.style.display = 'none';
});

})();

 

 

 

표지 제거를 눌렀을때 썸네일과 book-cover을 가리는 처리를 진행한다.

 

또한 renderCover 부분도 리팩토링을 진행해서 

이미지가 등록되었을때에는 표지 제거 버튼이 활성화 되게 하였다 .

 

 

 

마지막으로 book-edit-media.js를 리팩토링해준다

 

book-edit-media.js

 

(function () {
  function renderCoverAndShowRemoveButton(attachment) {
    let imgEl = `<img src="${attachment.sizes.medium.url}"/>`;
    document.querySelector(".js-open-book-cover-thumbnail").innerHTML = imgEl;
    document.querySelector(".js-remove-book-cover").style.display =
      "inline-block";
  }
  function initMediaObject() {
    return wp.media({
      title: "표지를 선택해 주세요",
      library: {
        type: "image",
      },
      button: {
        text: "넣기",
      },
    });
  }

  function bindOpeningMedialLibrary() {
    document
      .querySelector(".js-open-book-cover-media")
      .addEventListener("click", function () {
        media.open();
      });
  }

  function bindSelectCover() {
    media.on("select", function () {
      let attachment = media.state().get("selection").first().toJSON();
      // console.log(attachment.size.medium.url);
      renderCoverAndShowRemoveButton(attachment);

      // 이미지의 id를 기억하기위해 attachment.id를 넣어준다
      document.querySelector('[name="meta[cover_id]"').value = attachment.id;
    });
  }
  function renderCoverAlreadyHas() {
    if (document.querySelector('[name="meta[cover_id]"').value) {
      wp.media
        .attachment(document.querySelector('[name="meta[cover_id]"').value)
        .fetch()
        .then(renderCoverAndShowRemoveButton);
    }
  }

  function bindRemoveCover() {
    document
      .querySelector(".js-remove-book-cover")
      .addEventListener("click", function () {
        document.querySelector('[name="meta[cover_id]"').value = "";
        document.querySelector(".js-open-book-cover-thumbnail").innerHTML = "";
        this.style.display = "none";
      });
  }

  let media = initMediaObject();

  bindOpeningMedialLibrary();
  bindSelectCover();
  bindRemoveCover();
  renderCoverAlreadyHas();
})();

 

 

미디어 창의 옵션들

frame:select, post

 

multiple: 여러개 선택 가능 여부 (frame === select)

  • false : 불가능
  • true : shift, ctrl로 다중선택
  • add:: 무조건 다중선택, -눌러야 제거
  • toggle: 무조건 다중선택, 이미지 누르면 제거 

 

다중 선택하기 

 

 

muliple 옵션값에 따라 다중선택이 가능해진다 .

 

className 

프레임에 부여할 클래스이름을 부여할 수 있다 .

 

class가 추가되어있다 

 

frame 을 post 방식으로 변경하기

frame의 기본값은 select이다 

post 옵션에서는 다중선택은 지원되지 않는다. 

 

또한 기존의 bindSelectCover에서 media.on("select")를 insert로 변경한다

book-edit-media.js
(function () {
  function renderCoverAndShowRemoveButton(attachment) {
    let imgEl = `<img src="${attachment.sizes.medium.url}"/>`;
    document.querySelector(".js-open-book-cover-thumbnail").innerHTML = imgEl;
    document.querySelector(".js-remove-book-cover").style.display =
      "inline-block";
  }
  function initMediaObject() {
    return wp.media({
      frame:'post',
      title: "표지를 선택해 주세요",
      library: {
        type: "image",
      },
      button: {
        text: "넣기",
      },
      // multiple:true,
      className: 'media-frame book-media-library'
    });
  }

  function bindOpeningMedialLibrary() {
    document
      .querySelector(".js-open-book-cover-media")
      .addEventListener("click", function () {
        media.open();
      });
  }

  function bindSelectCover() {
    media.on("insert", function () {
      let attachment = media.state().get("selection").first().toJSON();
      // console.log(attachment.size.medium.url);
      renderCoverAndShowRemoveButton(attachment);

      // 이미지의 id를 기억하기위해 attachment.id를 넣어준다
      document.querySelector('[name="meta[cover_id]"').value = attachment.id;
    });
  }
  function renderCoverAlreadyHas() {
    if (document.querySelector('[name="meta[cover_id]"').value) {
      wp.media
        .attachment(document.querySelector('[name="meta[cover_id]"').value)
        .fetch()
        .then(renderCoverAndShowRemoveButton);
    }
  }

  function bindRemoveCover() {
    document
      .querySelector(".js-remove-book-cover")
      .addEventListener("click", function () {
        document.querySelector('[name="meta[cover_id]"').value = "";
        document.querySelector(".js-open-book-cover-thumbnail").innerHTML = "";
        this.style.display = "none";
      });
  }

  let media = initMediaObject();

  bindOpeningMedialLibrary();
  bindSelectCover();
  bindRemoveCover();
  renderCoverAlreadyHas();
})();

 

 

post의 frame은 갤러리, 오디오, 비디오등 여러가지를 지원해주는데 이를 state로 관리한다(기본값: insert)

state

  • insert : 미디어추가
  • gallery: 갤러리 생성
  • gallery-edit: 갤러리 편집(업로드)
  • gallery-library: 갤러리에 추가
  • playlist: 오디오 재생목록 생성
  • vicdeo-playlist: 비디오 재생목록 생성 
  • embed: URL 에서 삽입하기

 

저작자표시

'wordpress > wordpress기초' 카테고리의 다른 글

워드프레스 - 테마 만들기 - 카카오 API로 책 가져오기 1  (0) 2020.10.28
워드프레스 - 테마 만들기 - 책목록에 표지 넣기  (0) 2020.10.28
워드프레스 - 테마 만들기 - 책 정보 저장  (3) 2020.10.26
워드프레스 - 테마 만들기 - meta box  (0) 2020.10.26
워드프레스 - 테마 만들기 - custom taxonomy  (1) 2020.10.23

'wordpress/wordpress기초' 관련글

티스토리툴바