22강 요약문

안녕하세요.기존의 포스트 3개는 요약글이 표시되는데, 추가한 8개 포스트에서는 요약글이 표시되지 않는다고 하셨는데... 이렇게 선택적으로 요약글이 표시되고 또 선택적으로 표시되지 않을 수가 없는데요.혹시 체크사항...포스트 편집 화면에서 본문에 글 작성은 하셨는지??글이 공개유무에서 임시글로 되어 있지 않은지??확인해 주시고, 다시 문의 주세요~감사합니다.

bootstrap_5_wp_nav_menu_walker()드랍다운 방식을 메가메뉴로 설정할 수 있나요?

안녕하세요. bs navwalker 플러그인은 부트스트랩5의 네브바를 워드프레스에서 활용할 수 있게 변환한 코드입니다.그래서 이걸로는 메가메뉴를 만들 수 없습니다.메가메뉴는 별도의 코딩으로 만들어야 합니다. 지금 5번쨰 프로젝트 정리를 마쳤고, 이번 주부터 영상 녹화에 들어갈 예정인데요,이 프로젝트에서 메가메뉴에 대해서도 코딩할 예정입니다.사전 준비된 강좌수가 약 80개 강좌 정도라, 영상 녹화하고 편집해서 런칭하려면아마도 올 연말이나 내년 1월 초 쯤 되지 싶습니다. 그 때까지 좀 기다려주시겠어여요???

single 포스트글에서 페이지의 Top-Banner이미지 불러오는 법

안녕하세요.블로그 템플릿 즉, home.php에서의 loop는 포스트들을 게시하는 기능입니다.그러니 블로그라는 이름의 페이지(그리고 이게 "글 페이지")에서 특성이미지는 가장 최근 포스트의 이미지가 오게 되는 거죠. 그래서 블로그의 특성이미지를 가져오려면 변수에 $thumbnail_id가 블로그의 아이디로 들어와야 해요. // variables.php global $post; $blogPage = get_page_by_path('blog'); $thumbnail_id = is_home() ? get_post_thumbnail_id($blogPage->ID) : get_post_thumbnail_id($post->ID); // ...rest 그리고 포스트의 특성이미지를 샘플페이지 특성이미지로 불러 오고 싶으면 번거롭지만 샘플페이지 또는 이벤트 페이지의 특성이미지를 에디터에서 이용하시면 되지 않을까요?굳이 코드에서 condition을 복잡하게 짤 필요까지야...

single 포스트글에서도 페이지의 $theParent를 가져오는 법

안녕하세요.single.php에서 샘플페이지의 페이지 리스트를 가져오려면변수 $theParent의 아이디를 조정하셔야 할 것 같은데요.// variables.php $theParent = wp_get_post_parent_id(get_the_ID()); 이 변수가 담긴 파일을 single.php에 include 하셨으니, get_the_ID는 페이지(샘플페이지1, 2,3)의 아이디가 아니라 포스트의 아이디가 오게 됩니다. 그래서 single.php에서는 조금 수정을 해주셔야 할 것 같아요. theParent를 블로그로 잡으면 될 것 같아요. ID); ?> NULL, 'link_before' => '', 'link_after' => '', 'sort_column' => 'menu_order', 'child_of' => $theBlog->ID, )); ?> 테스트는 못 해봤는데, 한번 해 보시고 이슈가 또 생기면 말씀해주세요~

강의 프로젝트 연습용 세컨드 프로젝트 만드는 법

안녕하세요~워드프레스로 만든 사이트에서 다른 사이트로 복제하려면(이름은 다르게 하더라도) DB와 데이터베이스를 모두 옮겨야 똑같이 복제됩니다.가장 간단한 방법은 all-in-one-wp-migration 플러그인을 이용하는 방법입니다. 프로젝트3에서 설명드렸습니다.그렇지 않으면 DB를 따로따로 옮기거나 아니면 DB만 옮겨주는 플러그인을 이용하시면 됩니다. 대표적으로 wp migrate db 플러그인입니다.https://wordpress.org/plugins/wp-migrate-db/ var_dump 에 줄간이 가독성있게 보이는 방법에 대해서...이 부분은 저도 잘 모르겠는데요, 한 가지 방법이 있다면, 코드로 이렇게 한 번 해보시지요~

16강 브라우저에서 출력되는 var_dump() 데이터 자동정렬 툴

안녕하세요~늦게 답변드려 죄송합니다. 저는 크롬 확장 프로그램으로 "JSONVue"를 이용합니다.https://chromewebstore.google.com/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc?pli=1 아마 비슷한 기능의 다른 익스텐션 프로그램을 설치해도 저와 비슷하게 나올 걸로 알고 있습니다.

부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.

늦게 답변드려 죄송합니다~ ㅠㅠ 부트스트랩의 프레임워크만으로도 웹사이트 코딩이 가능합니다만,style.css를 별도로 추가 사용하는 이유는, 부트스트랩의 디자인에서 좀더 내가 원하는 디자인을 커스텀하기 위해서가 가장 큰 이유입니다. 그런데, 질문의 예에서처럼 부트스트랩의 클래스로도 되는 것은 그냥 부트스트랩의 클래스로 처리하셔도 좋습니다. 다만, 제가 처음 html과 css를 배울 때의 습관이 남아 있어서, 부트스트랩 클래스 대신 자동적으로 css 로 처리했을 뿐입니다~

start site

안녕하세요. 에러 메시지의 이미지를 보니까, 윈도우 PC의 계정(username)이나 PC 이름을 한글로 하신 것 같은데, 여기서 에러가 생긴 것 같습니다. PC 설정으로 들어가셔서, PC 계정을 영어로 바꾸신 다음에 다시 해보시죠.다시 하실 때는 LocalWP에서 기존에 만드신 사이트를 삭제하고 새로 사이트 이름을 만들어보세요. 해보시고 잘 안 되면 다시 알려주세요.

프로젝트3의 툴팁에서

네. 안녕하세요.답변이 늦어 죄송합니다.functions.php 파일에 아래 코드를 추가해주세요. // Add type module to scriptadd_filter('script_loader_tag', 'add_type_attribute', 10, 3);function add_type_attribute($tag, $handle, $src) { // if not app-js script, do nothing and return original $tag if ('main-script' !== $handle) { return $tag; } // change the script tag by adding type="module" and return it. $tag = ' . esc_url( $src ) . '">'; return $tag;} 그리고 main.js 파일에import { bsComponents } from './modules/bsComponents.js'라고 import 시켜 준 다음bsComponents()라고 함수를 호출해주세요. 물론 bsComponents.js에는 툴팁을 사용할 수 있는 부트스트랩 함수를 작성해 주셔야 합니다.export function bsComponents() {const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))} 이렇게 하시면 됩니다.(부트스트랩 툴팁 페이지 참조) 감사합니다.

wordpress에서 js파일 모듈작업

안녕하세요~ 요즘 제가 업무가 바빠서... 답변이 늦어 죄송합니다. ㅠㅠ일반적으로 js 파일 스크립트 링크를 걸 때 modules로 잘게 나누어 각 모듈에서 js 코딩을 하면 깔끔하고 또한 협업에 도움이 됩니다. 이 때 html 파일 footer 엘리먼트 위에이렇게 표기해 주고, main.js 파일에는 import {scroll } from './modules/scroll.js'등으로 import 시켜줍니다 그리고 if (document.querySelector('#scrolltoTop')) {scroll()}이런 식으로 scroll.js 내의 함수를 선언해 줍니다. 그런데...wordpress에서는 js 파일의 스크립트 링크를 functioins.php에 연결하기 때문에 wp_enqueue_script('main-script', get_theme_file_uri('assets/js/main.js'), 'NULL', '1.0', true);라고만 해주게 되면, 위의 html 에서처럼 type="module"이라는 속성을 추가해줄 수 없게 됩니다. wp_enqueue_script hook 함수에는 속성을 추가하는 파라미터가 없거든요. 그래서 이 경우에는 다음과 같이 코드 몇 줄을 추가해 줍니다. (add_type_attribute라는 함수 이름은 원하시는대로 하셔도 좋아요)// Add type module to scriptadd_filter('script_loader_tag', 'add_type_attribute', 10, 3);function add_type_attribute($tag, $handle, $src) { if ('main-script' !== $handle) { return $tag; } $tag = ' . esc_url( $src ) . '">'; return $tag;} 그러면 나중 소스 코드를 볼 때 위의 html 코드의 footer 위에 script type="module" 코드처럼 완성되게 됩니다. webpack을 이용해서 할 수도 있는데, 좀 더 복잡하고 버전 관리(버전에 따라 npm run dev 또는 npm start했을 때 잘 되지 않을 수 있습니다)가 귀찮은 부분이 있어서... 이 방법이 초보자에겐 간단한 것 같습니다.