반응형
워드프레스:'더 읽기 태그 삽입'은 어떻게 작동합니까?
나는 새로운 포스트 페이지의 작은 MCE 에디터에 버튼을 추가하고 싶습니다.이것으로 버튼을 완벽하게 작동시켰지만, 제가 이해하지 못한 부분이 있습니다."More" 태그를 삽입하면 이미지가 HTML에 적절한 'background-image'와 함께 추가됩니다.아래 스크린샷 참조:
그러나 'Text' 모드로 전환하면 다음과 같은 html 주석이 나타납니다.<!--more-->
.
html에 이미지를 추가할 수는 있지만 'Text' 모드에서는 이미지를 추가할 수 있습니다.img
꼬리표를 매다
나는 이런 것을 갖고 싶습니다.<!--my-custom-tag-->
워드프레스는 어떻게 이것을 할 수 있습니까?아니면 작은 MCE 편집기에 사용자 지정 태그를 추가하려면 어떻게 해야 합니까?
답을 찾았습니다.추가할 필요가 있습니다.BeforeSetContent
그리고.PostProcess
편집기 개체에 대한 이벤트(앞에서 언급했듯이, 먼저 버튼을 추가하려면 이 항목을 수행하십시오):
tinymce.create('tinymce.plugins.MyPlugin', {
init: function(editor, url) {
// Code to add the button...
// Replace tag with image
editor.on( 'BeforeSetContent', function( e ) {
if ( e.content ) {
if ( e.content.indexOf( '<!--my-custom-tag-->' ) !== -1 ) {
e.content = e.content.replace( '<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />');
}
}
});
// Replace image with tag
editor.on( 'PostProcess', function( e ) {
if ( e.content ) {
if ( e.content.indexOf( '<!--my-custom-tag-->' ) !== -1 ) {
e.content = e.content.replace( '<!--my-custom-tag-->', '<img src="' + tinymce.Env.transparentSrc + '" ' + 'class="wp-my-custom-tag mce-wp-my-custom-tag" title="My Tag..." data-mce-resize="false" data-mce-placeholder="1" />';
}
}
});
}
});
아니면 쇼트코드를 만들 수도 있습니다.나는 항상 그것을 사용합니다. 당신이 이해할 수 있도록 당신 자신의 코드를 쓸 수 있습니다.tinymce에서 jQuery로 적은 글이 없습니다!
예
function oex_toggle_ul($atts, $content = null){
extract(shortcode_atts(array(
),$atts));
return '<ul>'.do_shortcode( $content ).'</ul>';
}
function oex_toggle($atts, $content = null){
extract(shortcode_atts(array(
'titel' => '',
'open' => 'closed'
),$atts));
return '<li class="'.$open.'"><a href="#">'.$titel.'<span></span></a><ul class="'.$open.'">'.do_shortcode( $content ).'</ul></li>';
}
https://codex.wordpress.org/Function_Reference/add_shortcode
언급URL : https://stackoverflow.com/questions/23456337/wordpress-how-does-insert-read-more-tag-works
반응형
'source' 카테고리의 다른 글
Link-XML 하위 요소와 요소의 차이점 (0) | 2023.10.11 |
---|---|
반응형 이미지 정렬 센터 부트스트랩 3 (0) | 2023.10.11 |
CSS를 동적으로 로드하는 중 (0) | 2023.10.11 |
워드프레스의 궁극 멤버 플러그인으로 사용자 지정 탭 만들기 (0) | 2023.10.11 |
jquery에서 배열을 만들려면 어떻게 해야 합니까? (0) | 2023.10.11 |