[워드프레스] 하위 카테고리를 포함한 카테고리의 포스트 개수 구하기

[워드프레스] 하위 카테고리를 포함한 카테고리의 포스트 개수 구하기

워드프레스에서 카테고리의 포스트 개수를 표현하고 싶을 때 $category->count 혹은 $category->category_count 를 사용하면 해당 카테고리의 포스트 개수가 출력됩니다. 하지만, 위와 같은 코드는 하위 카테고리의 포스트는 세지 않고, 순수하게 해당 카테고리의 포스트 개수만 출력합니다. function postCount($id) { $count = get_category($id)->count; foreach (get_categories(array('child_of' => $id)) as $category) { $count += $category->count; } return $count; } function.php에 위 함수를...
[워드프레스] 플러그인 없이 Infinite Scroll 사용하기

[워드프레스] 플러그인 없이 Infinite Scroll 사용하기

Infinite Scroll(무한 스크롤)이란 페이지의 이동 없이 스크롤을 내리는 것만으로 다음 페이지의 내용을 불러오는 것을 의미합니다. 제 블로그의 프론트엔드 카테고리 등에 가보시면 라이브 데모를 확인해보실 수 있습니다. 테마 수정하기 PHP <?php get_header(); ?> <main id="main" class="postList<?php echo postListStyle() ?>"> <div class="gutter-sizer"></div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <a class="link_post<?php...
블로그에 투 두 리스트 추가하기

블로그에 투 두 리스트 추가하기

블로그 등의 html, css가 수정 가능한 웹 사이트에 할 일 목록을 추가하는 방법입니다.블로그에선 포스트 수정이라는 좋은 수단이 이미 존재하니, html과 css만 작업했습니다. HTML <div class="m_todo"> <h1>할 일 목록</h1> <ul> <li> <span>장보기</span> <div class="checkbox"></div> </li> <li done> <span>호텔 델루나 시청</span> <div class="checkbox"></div> </li> </ul> </div> CSS .m_todo { margin: 0 auto; background: #4DD0E1; padding: 10px; border-radius:...
[자바스크립트] 자동으로 글자 적고 지우기

[자바스크립트] 자동으로 글자 적고 지우기

How to code 위 예시처럼 글자들을 자동으로 타이핑하고 지우는 스크립트입니다. let i = 0, j = 0; const textArray = ["HTML", "CSS", "Javascript"], speed = 100, target = document.getElementById("type"); function txtnum() { j == textArray.length - 1 ? j = 0 : j++ } function type() { i < textArray[j].length ? (target.innerHTML += textArray[j].charAt(i), i++,...
바닐라에서 jQuery slideToggle 구현하기

바닐라에서 jQuery slideToggle 구현하기

눌러보세요! Hi! jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다. function toggleSlide(element) { let a; 0 === element.offsetHeight ? ( element.style.height = "auto", a = element.offsetHeight, element.style.height = 0, void element.offsetHeight, element.style.height = `${a}px` ) : element.style.height = 0 } 함수를...
CSS filter blur 렉 해결하기

CSS filter blur 렉 해결하기

css의 filter blur의 렉이 생각보다 심하더라고요.평상시엔 렉이 전혀 없는데, 이미지를 불러오는 등 특정 작업을 하고 있을 땐 꽤 심하게 버벅댑니다. #element { transform: translateZ(0); will-change: transform; backface-visibility: hidden; transition: .5s } #element:hover { filter: blur(5px) } 위 코드를 사용해 어느 정도 해결했습니다. 항상 생기는 렉도 아니고, 테스트 중인 GPU도 1660TI로 그리 나쁜 제품은 또 아니라서,...
[자바스크립트] 기기 방향 감지하기

[자바스크립트] 기기 방향 감지하기

기기를 회전해 테스트해보세요! 이런 정보도 가져올 수 있을지 몰랐는데, 자이로 센서를 이용해 기기의 방향도 가져올 수 있더라고요. const box = document.getElementById("testBox"); function handleOrientation(event) { const alpha = event.alpha, beta = event.beta, gamma = event.gamma; if (!beta) { addMouseEvent() } document.getElementById("alpha").innerText = alpha, document.getElementById("beta").innerText = beta, document.getElementById("gamma").innerText = gamma, box.style.transform = `rotateX(${-beta}deg) rotateY(${gamma}deg)` } function handleMouseMove(event)...