숏코드 적용이 이상하게 되는데 이유를 알 수 없습니다.
테스트삼하 간단한 레이아웃만 만들어보고 숏코드를 넣었는데
당췌 제대로 적용이 안되네요
같은 숏코드로 보스톤테마에 넣어을땐 정상 동작을 하는데
제가 만든 테마에서는 비정상 동작을 합니다.
로딩된 소스를 보면 보스톤테마에 적용한것과 같은 코딩이 로딩이 되긴 하는데
화면에 출력된 화면은 아무것도 안나옵니다.
테스트 페이지는 여기입니다.
http://nemostory.co.kr/wordpress/
화면상 test 라는 글씨 부분에 이미지 슬라이더가 나와야 합니다.
크롬 디버그 화면에서 보면 이미지가 1*1 이라고 보이고
원래 이미지가 가로배치가 되야하는데
레이아웃상으로 세로배치가 되어있습니다.
메일로 별도로 보내주신 테마 파일을 보니, 숏코드의 구현부가 없습니다.
말씀하신 보스톤 테마에서는 정상 동작을 한다고 하시니, 해당 테마에서 구현되어 있는게 아닌가 싶네요.
아니면, 보스톤 테마에서 적용 시, 활성화 되어있던 플러그인을 확인해 보시기 바랍니다.
그리고, 스타일 시트를 링크해주기 위해 wp_enqueue_style 호출은 functions.php에서 바로 해주면 안됩니다.
아래와 같이 적절한 액션에 태워서 수행되도록 수정하시기 바랍니다.
function ns2_enqueue_scripts() {
wp_enqueue_style( ‘style’, get_stylesheet_uri() );
}
add_action( ‘wp_enqueue_scripts’, ‘ns2_enqueue_scripts’ );
감사합니다.
숏코드 구현부라는게 뭔가요 책에 수록이 되어있는건가요?
일단 책의 샘풀테마를 다운받아서 샘플테마로 슬라이더를 적용해보니
잘 되더라구요
그럼 책에서 만든 샘플테마도 숏코드 구현부가 들어가 있는건가요?
저희 책에서는 숏코드의 구현에 대해서는 설명하고 있지 않습니다.
저희 책의 내용을 따라하신 것이라면, 테마에서는 숏코드를 호출하는 기능만 있고,
실제 그 구현은 추가로 설치한 슬라이더 플러그인에서 구현되어 있습니다.
아래는 codex에서 제공하는 숏코드에대한 설명입니다.
https://codex.wordpress.org/Shortcode_API
저의 질의를 잘 이해하지 못하신것 같은데요
당연히 구현부는 플러그인에 있겠죠
근데 책에서 제공된 완성소스 theme-itssue-chap_09 테마를 깔어서 숏코드를 넣어도 정상적으로 나온다는겁니다.
마찬가지로 다른테마인 boston 테마에서도 정상적으로 나오고요
저기숏코드는 제가만든 플러그인이 아니고 media slider 플러그인 이구요
그래서 제가만든 테마에 숏코드를 넣으면 정상적으로 호출이 되어서 크롬에서 소스보기를 해보면 숏코드위치에 풀코드가 로딩이 되어있음을 확인할 수 있습니다. 문제는 코드는 정상적으로 로딩이 되는데 해당 플러그인의 지정된 스타일시트가 로딩이 안되서 레이아웃이 다 깨진다는거에요
정상이라면 이미지슬라이더가 나와야죠 다른테마는 다 나오는데 제가 만든 테마에서만 안나온다는 말입니다.
정리해보면 제가 간단한 테마를 만들어 이미지 슬라이더를 넣으려합니다.
그래서 Media Slider 플러그인을 설치하고 셋팅을 했습니다.
제가 만든 테마에 숏코드를 적용했는데 안나옵니다.
같은 숏코드를 boston 테마와 책에 나와있는 테마등 다른 테마에서는 정상적으로 나옵니다.
크롬에서 소스보기를 해보면 숏코드 위치에 다른테마(boston, 책)에서 처럼 정상적으로 코드가 로딩됨을 확인했습니다.
크롬 디버깅모드로 보니 제가만든 테마에서는 스타일시트가 전혀 로딩이 안되어 있습니다.
결국 html 코드는 로딩이 되었는데 스타일시트가 로딩이 안되서 레이아웃이 깨진거였습니다.
혹시나 해서 다른 이미지 슬라이더 플러그인을 설치해서 숏코드를 적용해보니 이번엔 다른방향으로 플러그인이 깨지더군요
스타일이 로딩이 안된 것이 아니라, 스크립트 오류로인해 수행되지 않은 것입니다.
브라우저의 콘솔을 보면 jQuery가 정의되지 않아 오류가 발생하는 것을 볼 수 있습니다.
미디어 슬라이더가 기본적인 오타로인한 오류 부터 숏코드가 수행될때 마다 별도의 스크립트를 뿌리는 등 좀 불안하게 제작되어 있네요.
다음 두 가지를 추가하신 다면 정상동작하는 모습을 보실 수 있습니다.
1. 제작하신 푸터파일에서 wp_footer()를 추가합니다.
미디어 슬라이더는 숏코드가 수행되는 시점에서 스타일 시트 및 스크립트를 추가하는데, 그 시점이 이미 wp_head()를 지난 시점이라 파일들이 추가 되지 않습니다.
2. 제가 먼저 알려드린 wp_enquque_scripts 액션에서 jQuery를 추가해 주시기 바랍니다.
wp_enqueue_script( ‘jquery’ );
사실 위 2번이 없어도 실제 로드된 html을 보면 jQuery를 불러오는 부분이 있습니다.(미디어 슬라이더가 enqueue 합니다.)
그러나, 미디어 슬라이더가 자신의 구동 스크립트를 html상에서 직접 출력해주고 있어서, 그 스크립트가 수행되는 시점에서 아직 enqueue 되지도 않은 jQuery를 호출함으로 해서 오류가 발생합니다.
그러면, 거론하신 보스톤테마나 저희 예제테마에서는 왜 정상동작하느냐?
저희 테마나 말씀하신 보스톤테마는 jQuery를 기본으로 사용하고 있고, 기본 테마 구조에 맞게 푸터 부분에서 wp_footer()호출이 이루어지고 있을 것입니다.
그리고 wp_enqueue_style 호출을 바로하면 안되는 이유가 뭔가요?
wp_enqueue_script 나 wp_enqueue_style 함수는 그 이름처럼 스크립트나 스타일시트를 html 문서에 첨부하는 역할을 하는 함수가 아닙니다.
실제로는 내부데이터로 목록을 유지하고 있다가 wp_head, wp_footer에서 html상에 나타나게 됩니다.
functions.php에서 바로 수행하면, 이러한 데이터 구조가 준비도 되지 않았는데, 호출되어 오류가 발생합니다.
자세한 설명은 도서 62페이지를 참조하시기 바랍니다.
실제로 적용해보면 아무 오류가 안나옵니다.
그리고 다른 인터넷 강좌에서도 functions.php 에 직접넣으면 스타일시트가 적용된다고 나와있더군요
그리고 지금 찾아보니
https://developer.wordpress.org/themes/basics/including-css-javascript/
여길 보시면 직접 넣으면 안된다는말은 안보입니다.
말씀하신대로 wp_enqueue_style 함수는 대기열에 스타일시트의 목록을 불러오는 기능이기때문에 복잡하게 함수를 만들것이 아니라 이 코드 하나면 스타일시트 위치를 파악하고 준비하고있다가 wp_head 로 구현이 되는거겠지요
알려주신 링크를 보면 각각 함수의 사용 방법을 설명하고, 하단에 종합하여 wp_enqueue_scripts 액션에서 추가해 주라고 안내하고 있습니다.
https://developer.wordpress.org/themes/basics/including-css-javascript/#combining-enqueue-functions
오류가 안난다. => config 파일에서 debug 모드를 활성화 한 후 확인해 보시기 바랍니다.
인터넷 강좌에서 … => 해당 강좌의 제작자에게 잘못된 방법이라고 알려주시기 바랍니다.
제가 방금 제시한 링크의 코드에서 액션으로 감싼 부분을 걷어내고, 바로 수행되게 수정했다고 가정해보겠습니다.
오류메시지가 나오지만 디버그모드 끄면 그만이고…
하지만, 수행시점에 워드프레스가 요청을 처리하기 전이기 때문에 is_singular()나 comments_open()등의 함수는 항상 false를 반환합니다.
이처럼 워드프레스는 주의해야 할 수행순서나 앞으로 사장될 함수 안내 등을 위해 디버그모드에서 여러가지 메시지를 출력합니다.
이 때문에 저희 책 초반에 개발 시에는 디버그모드를 활성화 후 작업하라고 강조한 것이고요.
워드프레스를 사용하면서 내가 만든 테마만, 내가 만든 플러그인만 쓰지는 않을 것입니다.
여러 출처에서 개발된 코드가 서로 유기적으로 잘 구동되기위해 워드프레스가 제안하는 가이드라인 정도로 받아들이시고 지켜서 코드를 작성하시기를 권해드립니다.
복잡하게 함수를 만드는 것이 아니라 견고하게 만드는 것입니다.
자세한 설명 감사합니다.
정말 배워야 할것이 많군요 ;;
근데 워드프레스 교육 사업같은건 안하시나요?
교육사업… 저희 바램입니다.
근데, 그 전에 저희 인원들이 먼저 분신술을 배워야 할 것 같아요.
바빠서 아직은 시도도 못하고 있네요. ㅡ.ㅡ;