필요한 element 붙여넣기

§

[바로 얼마전 정반대 작업에 대한 글을 작성했는데… Christopher 님께서 워드프렛 튜토리얼을 통해 테마를 제작하시던 중, 질문을 해오셔서.. ㅋㅋㅋㅋ]

개발자분들에게만 알려드리면 되는 내용이니 간략하게 설명드립니다.

header 아래와 footer 위에 배너가 들어가는 테마를 제작하고 싶은데, 배너를 바꿔달때마다 index.php/single.php/header.php 등을 변경해야 하는게 조금 웃긴것 같다. 이 부분을 어떻게 처리하는게 좋은가?

대략 이런 질문을 하셨습니다.

php 중심적인 코딩을 한다면,

1. 배너 shortcode 를 만들고,

function shortcode_function() { 
$i = '<p>배너1 입니다</p>';
return $i;
} 
add_shortcode('banner1-shortcode', 'shortcode_function');

//이 필터는 shortcode 가 text widget 에서 작동하기 위해 필요한 부분입니다.
add_filter('widget_text','do_shortcode');

2. index.php/page.php/single.php 등에 윗부분과 아랫부분을 widgetize 하셔서 만들어진 shortcode 를 넣어주는 방식을 사용하시면 됩니다.

위 shortcode 는 물론 [banner1-shortcode] 으로 출력되겠죠.

widgetize 란, 튜토리얼 1주때 배포해드린 테마 sidebar.php 예제를 index.php 나 page.php 등에 동일한 방식으로 적용하시면 되는 것 입니다.

자스 (javascript) 중심적 코딩을 한다면,

1. jQuery 의 after, before, insertbefore, append… 등등을 사용

http://api.jquery.com/after/
http://api.jquery.com/before/
https://api.jquery.com/insertbefore/
http://api.jquery.com/insertafter/
http://api.jquery.com/prepend/
http://api.jquery.com/append/

테마의 마크업에 따라 사용하시기 편한 메소드 를 쓰시면 됩니다. 각 페이지에 예제 나와 있으니 참조하시구요.

그런데 튜토리얼때 보여드렸지만, jQuery 는 엄청나게 느리죠.

안좋은 의미로 미친속도가 나옵니다.

출처: https://jsperf.com/native-appendchild-vs-jquery-append/20

2. 쌩자스 (javascript) 로 element 끼워넣기

그래서 jQuery 보다는 쌩자스로 작업하시는게 로딩속도에 상당히 유리합니다.

쌩자스로는 insertBefore, appendChild, 등을 사용할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

두가지 메소드를 다 보여드리겠습니다.

예제:

주황색 배너 두개가 두개의 방식으로 끼워넣은 element 입니다. 테마 마크업에 따라서 편하신쪽을 사용하시면 됩니다.

소스코드: https://hackya.com/tutorial/javascript/insert_element_using_js.html

쉽게 이해하실 수 있도록 예제 달아놓았으니 다운로드 하셔서 예제 살펴보시구요.


* php 와 js 중 어느쪽이 더 유지보수가 편한가? 상황에 따라 다릅니다. 사이트를 원 개발자가 아닌 사이트 소유주가 관리해야 한다면 아무래도 php 방식이 사이트 소유주에게 더 편하게 느껴질거라 생각됩니다. (shortcode 를 잔뜩 만들어 놓고, “필요한거 그때 그때 바꿔쓰세요” 라고 하면 되니까요.)

js 방식은 사이트 동접자가 많아질때 로딩속도에서 유리해집니다. 덜 복잡하고 + 더 versatile 하구요. js 파일 하나만 마음데로 수정하면 되는거라.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , ,

카테고리: ,

Ω

1 Comment

  • Christopher Park says:

    웹페이지 성격상 수시로 바뀌는 베너를 달아야 해서 고민을 많이 했는데… 이걸로 문제를 해결할 수 있겠네요! 감사합니다! ㅎㅎ

Leave a Reply

Your email address will not be published. Required fields are marked *