반응형
메타박스에서 WordPress 링크 삽입 대화 상자를 사용하시겠습니까?
저는 커스텀 메타박스를 자주 사용합니다.메타박스에 링크 필드가 있는 경우가 많습니다.간단한 텍스트 입력 필드만 사용했는데 WordPress 콘텐츠 편집기가 사용하는 것과 동일한 "링크 삽입" 대화 상자를 호출하는 버튼을 입력하는 방법을 찾고 있습니다.그게 가능한가요?
링크 박스를 호출하려면 먼저 필요한 js를 큐잉한 후 wp-link js 파일 메서드와 상호 작용합니다.
wp-link가 큐잉되어 있는지 확인합니다.
1 /wp_enqueue_script( 'wp-link' );
2 / UI를 설정합니다.보통 링크 다이얼로그를 호출하는 버튼과 링크 URL을 처리하는 텍스트 필드를 사용합니다.
3 / 링크 다이얼로그를 기동하다
$('body').on('click', '.link-btn', function(event) {
wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance
wpLink.open(); //open the link popup
return false;
});
4 / 링크 저장 처리
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();//the links attributes (href, target) are stored in an object, which can be access via wpLink.getAttrs()
$('your_url_textfield').val(linkAtts.href);//get the href attribute and add to a textfield, or use as you see fit
wpLink.textarea = $('body'); //to close the link dialogue, it is again expecting an wp_editor instance, so you need to give it something to set focus back to. In this case, I'm using body, but the textfield with the URL would be fine
wpLink.close();//close the dialogue
//trap any events
event.preventDefault ? event.preventDefault() : event.returnValue = false;
event.stopPropagation();
return false;
});
5 / 핸들링크가 취소됨
$('body').on('click', '#wp-link-cancel, #wp-link-close', function(event) {
wpLink.textarea = $('body');
wpLink.close();
event.preventDefault ? event.preventDefault() : event.returnValue = false;
event.stopPropagation();
return false;
});
그래야 할 것 같아요.저는 메타박스 수업에서도 같은 방법을 사용하지만, 잘 작동하는 것 같습니다.링크 다이얼로그의 html 요소에 대한 참조를 하드코딩하고 있기 때문에 해킹의 근원이 되고 있습니다.대화에는 외부 API가 필요합니다.아마 WP에 추가하는 것은 그렇게 어렵지 않을 것이다.
언급URL : https://stackoverflow.com/questions/11812929/use-wordpress-link-insert-dialog-in-metabox
반응형
'programing' 카테고리의 다른 글
| AssertionError: .accepted_renderer가 django 및 ajax의 응답으로 설정되지 않음 (0) | 2023.03.26 |
|---|---|
| AngularJS에서 HTTPS를 사용하려면 어떻게 해야 하나요? (0) | 2023.03.26 |
| TypeScript에서 문자열을 숫자로 변환하는 방법 (0) | 2023.03.26 |
| json에서 대괄호를 사용하는 목적은 무엇입니까? (0) | 2023.03.26 |
| Karma 및 Jasmine을 사용한 각도 서비스에서의 '프라이빗' 기능 테스트 방법 (0) | 2023.03.26 |