mytory

안녕하세요. 좋은 질문 감사합니다. 😊결론부터 말씀드리면 현시점에도 원활히 수업 진행을 하실 수 있습니다. 제 수업은 워드프레스 PHP 개발 수업입니다. 강의의 핵심이 되는 백엔드 API는 수업을 촬영한 이후에 거의 변하지 않았습니다. 수업에서 워드프레스의 근간이 되는 핵심 API들을 다루고 있기 때문에 현 워드프레스 버전뿐 아니라 향후 나오는 워드프레스 버전에도 활용하실 수 있을 것입니다.감사합니다.

강의가 오래됐는데 현시점에 원활한 진행이 가능할까요?

안녕하세요. 질문 감사드립니다 ☺제가 당장 자세히 살펴볼 시간은 되지 않아서 우선 한 가지 요청을 먼저 드릴 게요. 아파치의 에러 로그를 좀 공유해 주시겠어요? 그래야 원인 파악이 수월할 것 같습니다.사소한 에러라 사용에 문제는 없겠지만 이런 걸 탐구하는 과정에서 실력이 늘 수 있기 때문에 시간만 허락한다면 살펴 보는 것을 권해 드립니다. (실무에서는 시간 때문에 불가피하게 포기해야 하는 경우도 있겠지만 연습에서는 그러지 않아도 되니까요.)감사합니다 😊

XML 불러오기 불가 (이미지만)

안녕하세요 wlalsl_0813님. 질문 감사합니다. ☺Woody code snippets 플러그인으로 파일 수정 없이 PHP 코드를 입력하려고 하신 것으로 보입니다. 그리고 ajax action을 걸었는데, 뜻대로 안 된 것으로 보이고요.흥미로운 주제였어요.결론부터 말하면 해법은 간단합니다. 폼(HTML, JS)과 PHP 액션 코드를 분리해 보세요. PHP <code>add_action</code> 관련 코드는 아래처럼 "코드 실행처(Where to execute the code?)"를 Run Everywhere로 설정하세요. 그리고 폼은 원래대로 숏코드로 노출하시면 됩니다.<img src="https://cdn.inflearn.com/public/files/posts/5f0d7614-53ea-4520-94c7-f5a684709e1e/runeverywhere.png" alt="image" title="image">왜 이렇게 해야 하는 걸까요?PHP는 모든 요청/응답 세트가 독립적입니다. 모든 요청/응답 세트가 독립적인 것은 웹의 특성이기도 한데요. 웹의 특성과는 별개로 서버측 언어로서 JAVA 등과는 다른 PHP 고유의 특성이기도 합니다(더 자세한 내용은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://mytory.net/archives/13147">https://mytory.net/archives/13147</a> 를 참고하세요). 좀더 자세히 설명하자면요. 위 코드 스니펫을 숏코드로 입력한 페이지(이하 "폼 페이지"라고 부르겠습니다)와 <code>admin-ajax.php</code>는 별개의 프로세스에 놓인다는 것입니다. 즉, <code>admin-ajax.php</code>가 호출될 때는 wlalsl_0813님이 넣으신 <code>add_action</code>이 실행되지 않는다는 것입니다. 다시 정리하면 아래와 같습니다.1. 폼 페이지를 호출할 때는 <code>add_action</code>이 실행됩니다.2. 폼 페이지에서 <code>admin-ajax.php</code>를 호출할 때는 <code>add_action</code>이 실행되지 않습니다. 폼 페이지를 로드한 것이 아니니까 당연하지요. 그래서 요청한 ajax 관련 응답할 액션이 없어 400 에러가 발생합니다.그래서 해법은 폼 페이지에서 ajax 응답을 할 수 있게 만들거나, <code>add_action</code>이 <code>admin-ajax.php</code> 호출시에도 실행되게 하거나 둘 중 하나입니다.폼 페이지에서 ajax 응답을 하도록 하는 것이 더 복잡하기 때문에 <code>add_action</code>을 어디서나 실행될 수 있게 만드는 것이 낫습니다.그리고 Woody code snippets 플러그인은 어디서나 실행되는 PHP 코드를 입력하도록 제공을 해주네요. 그것이 위에서 말한 해법입니다.신선한 질문 주셔서 감사합니다 😊

POST http://localhost/wordpress/wp-admin/admin-ajax.php 400 (Bad Request)

안녕하세요. 좋은 질문 감사합니다.사실 플러그인과 테마 개발에 사용되는 기술은 거의 동일해서 제 수업을 듣고 나면 플러그인 개발도 얼마든 하실 수 있습니다. 플러그인이라는 게 추가적인 동작(Action)을 제공하거나, 내용을 변경(Filter)하는 것이니까요.테마가 index.php와 style.css로 시작하는 것처럼 플러그인은 규칙대로 폴더를 만들고 임의의 php 파일에 주석을 달아 워드프레스에 인식을 시킨 후 활성화해 주면 동작합니다.테마는 사이트의 외관 개발에 적합하고 하나의 테마만 활성화할 수 있다는 말씀은 맞습니다. 플러그인으로 외관에 관여할 수 있지만 한계가 있죠. 그래서 플러그인은 내부적인 동작 개발에 적합하고 여러 플러그인을 활성화할 수 있다는 말씀도 맞습니다.그러나 너무 도식적으로 생각하실 필요는 없습니다. 테마에도 내부적인 동작이 들어갑니다. 대신 이 동작은 하나의 테마에 적합하게 만들면 되기 때문에 좀더 간편한 것이죠. 플러그인도 외관에 얼마든지 관여할 수 있습니다. 테마로 구현할 때보다 좀 귀찮긴 하지만요. 그러나 플러그인으로 외관에 관여해야 하는 경우도 없지 않을 겁니다.제 생각에는 테마로 만들 것이냐 플러그인으로 만들 것이냐는 기술적인 차이도 조금 있기는 하지만, 그보다는 사용 목적이 더 중요한 기준이 되는 것 같습니다. 혼자 사용할 거라면 테마 기능의 일부로 넣으면 되는 것이고, 여러 사이트에서 사용하게 할 것이라면 플러그인으로 만드는 것이죠.예컨대, SNS 공유 버튼을 다는 기능을 제공하는 플러그인들이 많이 있습니다. 그러나 저는 특정 사이트를 위한 테마를 개발할 때 그걸 플러그인으로 구현하기보다는 테마 코드의 일부로 집어넣습니다. 그편이 디자인과 어우러지도록 깔끔하게 만들기 좋거든요. 굳이 범용성을 추구할 필요도 없고요.그러나 만약 제가 모든 사이트를 위해서 깔끔한 SNS 공유 버튼을 다는 기능을 제공하고자 한다면 플러그인으로 구현해야겠죠. 그만큼 코드도 작성하기 까다로울 겁니다.다른 많은 기능도 마찬가지입니다. 모든 플러그인 기능은 테마에 코딩해 그 기능을 제공할 수 있습니다. 코드가 거의 같으니까요. 그러나 범용적으로 다른 모든 사이트에도 그 기능을 제공하고자 한다면 플러그인으로 개발하면 되는 것입니다.혹시 추가적인 질문 있으면 남겨 주세요.감사합니다 :)

플러그인 개발에 대해서 궁금합니다

안녕하세요, YOU&ME 님. 질문 감사합니다.댓글에 비밀번호를 넣고, 그걸 이용해서 수정과 삭제를 할 수 있게 만들려고 하시는군요.워드프레스는 기본적으로 쿠키를 기반으로 댓글 입력을 기억합니다. 계정에 로그인해 댓글을 입력한 것이 아니라면 댓글을 입력한 컴퓨터에서만 댓글을 수정할 수 있죠.제가 관련 작업을 해 본 것은 아닙니다. 알려주신 <a target="_blank" rel="noopener noreferrer nofollow" href="http://moonhak.co.kr/%E3%80%8A%EB%B0%98%EC%97%B0%EA%B0%84-%EB%AC%B8%ED%95%99%EC%88%98%EC%B2%A9%E3%80%8B-2024%EB%85%84-%EC%83%81%EB%B0%98%EA%B8%B0%ED%98%B8-%EC%B6%9C%EA%B0%84-%EA%B8%B0%EB%85%90-%EB%A7%A4%EA%B1%B0%EC%A7%84/">《반연간 문학수첩》 2024년 상반기호 출간 기념 매거진 토크</a>는 biscuitpress라는 업체에서 커스텀 작업을 한 것으로 보입니다. 따라서 소스에 접근하기는 힘들 것 같습니다. (다만, 질문에서도 언급하신 블로그를 운영중이신 것 같으니 직접 물어 보셔도 좋을 것 같습니다. 원리를 알려 달라고 하면 대략의 방법은 알려주실 지도 모르니까요.)관련 플러그인은 없는지 찾아 봤는데 쉽게 나오지는 않는군요. 어쩌면 그런 플러그인이 없을지도 모르겠습니다.코딩 개요제가 관련 작업을 해 본 것은 아니지만, 아래처럼 기본적인 설계를 해볼 수 있을 것 같습니다.만약 비밀번호를 기반으로 댓글을 수정할 수 있게 하시려면 댓글 출력 쪽에 필드를 추가로 만드시고, 댓글이 신규 저장되는 시점에 훅을 걸어서 코멘트 메타 정보로 비밀번호를 저장하셔야 할 것 같습니다.디비 테이블을 보시면 <code>wp_commentmeta</code>라는 테이블이 있어요. 포스트메타가 포스트에 관한 여러 정보를 저장하는 테이블이라면 코멘트메타는 코멘트에 관한 여러 정보를 저장하는 테이블입니다.사용법은 포스트메타와 거의 비슷합니다. <code>update_comment_meta</code> 함수를 이용해서 저장하면 됩니다.댓글이 신규 저장되는 시점의 훅은 <code>comment_post</code>입니다. 따라서 여기에 코멘트메타를 저장하는 로직을 넣으시면 되겠죠.댓글을 수정하는 로직을 또 만드셔야 하겠죠. 일단 모든 댓글에 수정 버튼이 있어야 할 것 같습니다. 수정 버튼을 누르면 수정 UI가 나와야겠죠. 이 때 비밀번호도 같이 입력할 수 있도록 나와야 할 겁니다.여기서 댓글을 수정하는 경우 비밀번호가 맞는지 비교를 해 봐야겠죠. 이 비교를 수행하는 타이밍은 <code>wp_update_comment_data</code> 훅이 좋을 것 같습니다. <code>wp-includes/comment.php</code>의 2565라인을 보시면 관련 코드가 있는데요. 아래와 같이 필터를 거친 다음에 <code>WP_Error</code> 객체인지를 검사합니다. 즉, 비밀번호가 맞지 않으면 <code>WP_Error</code> 객체의 인스턴스를 리턴해 주면 되는 거죠.<pre class="hljs"><code>$data = apply_filters( 'wp_update_comment_data', $data, $comment, $commentarr );

// Do not carry on on failure.
if ( is_wp_error( $data ) ) {
 if ( $wp_error ) {
 return $data;
 } else {
 return false;
 }
}</code></pre>댓글 삭제도 마찬가지 로직을 따르면 될 것 같습니다. <code>trash_comment</code> 훅을 사용하시면 될 것 같고요.생각만 한 거라 실제로 할 때는 시행착오가 있을 것이고 제가 말씀드린대로 바로 되지는 않을 겁니다. 그러니 시작 단계의 아이디어로 참고해 주세요.그럼 도움이 되었으면 좋겠습니다.좋은 질문해 주셔서 감사합니다.(블로그에 남겨 주신 문의도 확인했습니다. 고민을 좀 하고 플러그인도 찾아 보는 사이에 인프런에 질문을 남겨 주셔서 여기에서 답을 드립니다 ☺)

워드프레스 댓글 수정 삭제

안녕하세요. 질문 감사합니다.VSCode의 Live Server는 사용해 본 적이 없습니다만, 저는 일반적으로 웹 개발을 새로고침해 주는 BrowserSync를 사용합니다.<code>npm install -g browser-sync</code>로 브라우저 싱크를 글로벌로 설치한 뒤 아래 명령으로 서버를 돌리면 <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:3000">localhost:3000</a>으로 접속할 수 있습니다.<pre class="hljs"><code>browser-sync start --proxy "bookstore.localhost" --files 'wp-content/themes/bookstore/**/*.php, wp-content/themes/bookstore/**/*.css, wp-content/themes/bookstore/**/*.js, !wp-content/themes/bookstore/vendor/**/*'</code></pre>보면 아시겠지만 <code>--proxy</code>에 로컬 접속 도메인을 적어 줍니다.<code>--files</code>에는 변경을 감지할 파일의 경로를 적어 줍니다. <code>/**/</code>은 0개 이상의 폴더를 뜻합니다. 또한 !를 적으면 해당 경로는 제외하라는 뜻입니다.더 자세한 내용은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://browsersync.io/">BrowserSync 웹사이트</a>에서 문서를 참고해 보시면 됩니다. 윈도우를 사용중이시라면 문서를 좀 참고해 보시긴 해야 할 겁니다.감사합니다.(AI 인턴의 답에서 <code>spring-boot-devtools</code>는 자바 스프링부트에 사용하는 툴이니 참고하지 않으시는 게 좋습니다.)

phpstorm에서 LIve server 기능을 사용하는 방법이 궁금합니다.

안녕하세요. Su Yeoun Lee 님. 질문 주셔서 감사합니다 🙂&nbsp;(1)블록 테마는 제 강의에서 다루는 분야가 아니다 보니 답이 좀 늦었습니다. 어쩌면 실제로 해 보면서 이미 답을 상당히 얻으셨을 지도 모르겠습니다.우선 기존에 작성된 글들은 큰 문제 없습니다. 과거에 작성한 글들은 블록 편집기에서는 클래식 에디터로 수정하게 돼 있습니다. 클래식 편집기 자체가 하나의 블록으로 처리돼요.<a target="_blank" rel="noopener noreferrer nofollow" href="https://mytory.net">제 블로그</a>가 클래식 워드프레스에서 블록 테마로 넘어온 것인데요. 과거 글들도 잘 보입니다. HTML 태그도 똑같습니다.물론 큰 부분들이 그렇다는 것이지, 자잘한 것까지 완전히 문제가 없을지는 사이트별로 따져 봐야 할 겁니다.&nbsp;(2)블록 편집기에도 강의중에 배운 postmeta를 추가할 수 있는지 물어 보셨는데요. 가능하긴 합니다.<code>functions.php</code>에 아래처럼 코드를 넣으면 블록 편집기에도 메타 박스가 나타납니다.<pre class="hljs"><code>add_action('add_meta_boxes', function () {

 add_meta_box('my_test_meta', '나의 테스트 메타', function () {

 ?>

 <label>

 값

 <input type="text" name="meta['my_test_meta']" value="">

 </label>

 <?php

 });

});</code></pre>아래 이미지처럼 나타나는데요. 썩 예쁘진 않습니다.<img src="https://cdn.inflearn.com/public/files/posts/e9aeebd7-f91c-41f6-a02f-85d74669f567/붙여넣은_이미지_2024__5__22__오후_11_18.png" alt="image" title="image">그래서 일단 가능하긴 하지만, 블록 편집기에 맞는 코드를 따로 공부해서 블록 편집기에 맞게 넣는 게 좋다고 생각합니다.&nbsp;(3)가능합니다.&nbsp;(4)이건 어떤 플러그인인지, 위젯인지에 따라 다른 것으로 알고 있습니다. 일일이 테스트해 보셔야 합니다.특히 위젯은 블록 테마가 되면서는 거의 의미를 상실하게 됐을 텐데요. 위젯으로 구현하던 것들이 대부분 블록으로 구현할 수 있게 됐기 때문입니다. 그래서 블록 테마에서는 블록으로 위젯을 대체하는 방향으로 하시는 게 좋지 않을까 생각합니다.&nbsp;(5)블록 테마는 블록 테마 그 자신의 논리로 접근을 해야 합니다. 코드를 거의 사용하지 않고도 사이트를 만들 수 있도록 구성한 것이 블록 테마이기 때문에, 자유롭게 개발을 하던 클래식 테마와는 접근 방법이 매우 상이할 거예요.지금 <a target="_blank" rel="noopener noreferrer nofollow" href="https://mytory.net">제 블로그</a>가 블록 테마로 돼 있는데요. 코드는 CSS를 몇 줄 쓴 게 전부입니다.개발이 들어설 영역이 있다면 블록을 개발하는 것인데요. 그건 리액트를 이용하게 돼 있어서 클래식 테마 개발과는 완전히 다릅니다.&nbsp;블록 테마 개발 강의도 찍어야 하나 싶네요 :)그럼, 흥미로운 질문 감사합니다.

클랙식 테마를 운영 중 블럭 테마로 개편할 때

안녕하세요. 질문 감사합니다.그런데 제가 답변이 너무 늦었네요. 죄송합니다 🙏답을 드리지 않은 사이에 이미 수업에서 관련 내용을 들으셨을 것 같습니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.inflearn.com/course/lecture?courseSlug=%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%87%BC%ED%95%91%EB%AA%B0-%ED%8C%8C%ED%8A%B82&unitId=73966&tab=curriculum">"61강 템플릿 우선순위"</a>가 정확히 질문하신 내용을 자세히 다루고 있으니까요.아니면 아래 "인프런 AI 인턴"의 답변도 잘 돼 있어서, 그것만으로 금세 이해를 하셨을 수도 있을 것 같고요.이미 질문이 해결되신 듯해 제가 답을 반복할 필요는 없을 것 같습니다.그러나 죄송한 마음을 담아 조금 다른 설명을 드리겠습니다.&nbsp;URL에 따라 <code>single.php</code>나 <code>single-book.php</code>와 같은 템플릿을 불러오는 코드는 <code>wp-includes/template-loader.php</code>에 있습니다. 이 파일의 69번째 줄을 보면 이게 싱글이라면(`is_single()`이 참이면) <code>get_singular_template()</code> 함수를 써서 템플릿이 뭔지 알아내라 하고 정의가 돼 있습니다.<pre class="hljs"><code>'is_single' => 'get_single_template',</code></pre>사실 위와 같이 배열로 돼 있는데, 배열 아래쪽의 79~91라인을 보면 결국 <code>call_user_function()</code>으로 <code>is_single</code>과 <code>get_single_template</code>을 호출하고 있는 것을 볼 수 있습니다.&nbsp;<code>get_single_template()</code> 함수는 <code>wp-includes/template.php</code> 파일의 549번째 줄에 정의돼 있는데요. <code>$templates</code>라는 배열에 single용 템플릿이 될 수 있는 파일명을 우선순위별로 쭉 담습니다.<code>single-book.php</code>의 경우 <code>get_single_template()</code> 함수 안에서 그 모습을 찾아 볼 수 있습니다. 함수가 있는 파일에서 566번째 줄을 보면 템플릿 우선순위를 담는 <code>$templates</code> 배열에 <code>single-{$object->post_type}.php</code>를 담고 있거든요.&nbsp;이후 <code>$templates</code>의 내용을 참고해서 최종 템플릿 파일을 고르는데요.<code>get_single_template()</code> → <code>get_query_template()</code> → <code>locate_template()</code> 순서로 들어가면서 실행이 됩니다.이중 실제로 템플릿 후보가 될 파일이 있는지 검사하고 있으면 해당 경로를 리턴해 주는 역할을 하는 게 <code>locate_template()</code> 함수입니다.<code>locate_template()</code> 함수는 <code>wp-includes/template.php</code> 파일의 718라인에 정의돼 있는데요. 732라인을 보면 아래처럼 파일이 있는지 검사하는 코드를 볼 수 있습니다.<pre class="hljs"><code>if ( file_exists( $wp_stylesheet_path . '/' . ＄template_name ) ) {</code></pre>&nbsp;제 답변이 조금이나마 도움이 되셨으면 좋겠습니다.감사합니다.

single-book.php 파일은 워드프레스 기본 제공 파일인가요?

안녕하세요 🙂 질문 감사합니다.워드프레스 미디어 업로더는 파일이 업로드되면 리사이즈를 수행합니다. 리사이즈가 느리면 업로드가 느리다고 느낄 수 있을 것입니다.리사이즈는 서버 성능을 많이 탑니다. 가격이 낮으면 성능이 그만큼 떨어지고, 이미지 리사이즈는 성능을 타는 작업이기 때문에 느려집니다. 예컨대 오라클 클라우드의 무료 티어를 사용한다면 리사이즈는 상당히 느릴 겁니다. 또, 리사이즈용 플러그인이 설치돼 있다면 느릴 수 있습니다. 예컨대 이미지를 WebP로 변환하는 플러그인이나, 원본까지 리사이즈하는 플러그인, 리사이즈 개수를 늘리는 플러그인이 있을 수 있습니다.그러나 느려도 정상적인 과정입니다. 물론 서버를 업그레이드하거나 플러그인을 비활성화하는 방법으로 해결할 수 있습니다.&nbsp;미디어 업로드 기능을 디버깅해 보시려면 업로드한 파일이 어디로 전송되는지 찾아 보시면 됩니다. 우선 실마리는 미디어 업로더 페이지에 있습니다. 개발자 도구로 검사해 보시면 form의 action이 <code>/wp-admin/media-new.php</code>를 가리키고 있는 것을 확인할 수 있습니다. 일단 이 파일을 살펴 보는 것도 도움이 될 것입니다.<img src="https://cdn.inflearn.com/public/files/posts/0df840d8-966e-488a-b23a-c2275b06fc40/image.png" alt="image" title="image">업로드를 해 보면 ajax 업로드 경로는 또 다른 걸 알 수 있습니다.<img src="https://cdn.inflearn.com/public/files/posts/ac220e70-8f10-446c-b955-64d187d6720f/스크린샷_2024-03-09_오후_1_39_41.jpg" alt="image" title="image"><code>/wp-admin/async-upload.php</code>인데요. 파일은 하나 올렸는데 두 번 요청이 간 것이 재밌네요. 첫 번째 요청에서는 파일을 <code>multipart/form-data</code>로 전송한 것을 볼 수 있습니다. 응답으로 <code>attachment_id</code>를 받습니다.<img src="https://cdn.inflearn.com/public/files/posts/4911f9a9-24aa-462c-9011-2c16d7364b67/스크린샷2024-03-09오후1.46.11.jpg" alt="image" title="image">두 번째 요청에서는 방금 받은 <code>attachment_id</code>와 <code>fetch</code>란 파라미터에 <code>3</code>을 담아서 보내는데요. 응답은 HTML이 옵니다.<img src="https://cdn.inflearn.com/public/files/posts/58a5e3f5-51da-4096-9bc4-e6e21eb06f7c/스크린샷_2024-03-09_오후_1_49_22.jpg" alt="image" title="image"><img src="https://cdn.inflearn.com/public/files/posts/33898af5-dd52-436b-a2ac-949271539337/스크린샷_2024-03-09_오후_1_49_18.jpg" alt="image" title="image">응답받은 HTML은 업로드 결과를 표시하기 위한 것임을 알 수 있죠.&nbsp;설명하다 보니 옆길로 좀 샜는데요. 이렇게 개발자 도구를 통해서 진입점을 찾으시고 디버깅하시면 되겠습니다. (참, 저는 파이어폭스에서 개발자 도구를 사용한 것인데요, 크롬에서는 표시가 조금 다릅니다. 그러나 기능은 같아서 금방 찾으실 수 있을 겁니다.)&nbsp;즐거운 코딩 되시길 바랄 게요~!감사합니다.

미디어에서 이미지 추가시 시간이 좀 느려서...

안녕하세요 김승범 님, 날카로운 질문 감사드립니다.말씀하신대로 <code>functions-setup.php</code>에 있던 코드를 <code>functions-enqueue-scripts.php</code> 파일로 옮기는 과정이 영상에서 누락돼 있습니다. 저도 말씀을 듣고 강의 영상을 확인해 보고 나서야 알았습니다. 영상을 보니 9분 35초의 Git 커밋 과정에 코드가 옮겨진 것이 명확히 표현되고 있네요.감사합니다.&nbsp;

mytory

Posts