티스토리 썸네일에 유튜브 썸네일 불러오기

티스토리 썸네일에 유튜브 썸네일 불러오기

위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다. 대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요. HTML <a href="[##_article_rep_link_##]" class="indexArticle">     <div class="index_thumbnail">         <img src="<s_article_rep_thumbnail>https://i1.daumcdn.net/thumb/R700x0/?fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" class="index_img" alt="[##_article_rep_title_##]">     </div>     <div class="tit_post">[##_article_rep_title_##]</div>     <div class="detail">         <div class="category">[##_article_rep_category_##]</div>         <div class="cnt-wrap"><img class="heart" src="./images/heart.svg">             <s_rp_count><span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count>         </div>     </div>     <div class="date hidden">[##_article_rep_date_##]</div> </a> 임의로...
190906 블로그 제작일지

190906 블로그 제작일지

드로워 사진으로 찍긴 좀 애매한데…두 가지 변화가 있습니다. 드로워를 여닫을 때 효과음을 추가했습니다. 뽁뽁거리는 소리가 나름 듣기 좋더라고요. 다음으로 드로워를 열고 스크롤을 내려도, 다음에 드로워를 열 땐 스크롤 위치가 초기화되도록 해뒀습니다. 홈 화면 예전부터 홈 화면을 갈아엎으려고 생각은 하고 있는데, 딱히 생각나는 디자인이 없네요. 그냥 제일 처음 표시되는 사진이라도 다른 거로 바꿔볼까 싶어 이 포스트에...
[티스토리] 태그로 글 가져오기

[티스토리] 태그로 글 가져오기

위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. getPostsByTag = (tag, target, elem) => {   const ajax = new XMLHttpRequest;   let parser, e;   document.querySelector(target) === null || (     ajax.open("GET", `/tag/${encodeURI(tag)}`),     ajax.send(null),     ajax.onreadystatechange = () => {       (4 === ajax.readyState) && (         parser = new DOMParser().parseFromString(ajax.responseText, "text/html"),         e = parser.querySelectorAll(elem),         e.length === 0         ? target.innerText = "해당 태그의 글을 찾을 수 없습니다."         : (           Array.from(e).forEach(a => {             document.querySelector(target).append(a)           })         )       )     }   ) } 위 스크립트를 추가하신 다음 getPostsByTag("태그 이름", "컨테이너 선택자", "포스트 선택자") 위와 같이 함수를 호출하시면 됩니다. 컨테이너 선택자, 포스트 선택자 모두 CSS...
썸네일 생성기 제작 중

썸네일 생성기 제작 중

위 사진에 나온 글처럼 딱히 썸네일로 쓸만한 사진이 없는 포스트를 쓸 때, 지금까진 코드를 캡처하는 등 꽤 무성의한 방식으로 썸네일을 만들어왔습니다. 그래도 포스트를 대표하는 이미진데 조금 더 정성 들여 만들어야 하지 않을까 하는 생각이 문득 들더라고요. 그렇다고 매번 포토샵 키긴 귀찮고, 모바일이랑 PC 모두에서 이용할 수도 없으니, HTML5의 Canvas를 이용해 간단한 썸네일 제작 앱을 만들어보는...
190826 블로그 제작 일지

190826 블로그 제작 일지

홈 화면 슬라이더를 제거하고 이미지가 하나만 랜덤으로 나오도록 했습니다.같은 이미지만 계속 나오는데, 굳이 그 슬라이드를 보고 있을 이유가 없을 것 같더라고요. 저도 딱히 오래 보진 않고. 서버에서 랜덤 이미지를 뿌려주는데, PHP의 랜덤도 딱히 마음에 들진 않네요.JS보다 더 심하게 랜덤이 아닌 느낌이 듭니다. 태그 클라우드 추가 태그 클라우드용 페이지도 추가했습니다. 티스토리에선 정렬 방식도 마음대로 못 정해서...
190821 블로그 제작 일지

190821 블로그 제작 일지

얼마 전에 아침에 두꺼비집이 내려가 있어서 서버가 꺼진 적이 있습니다.찾아보니, 전기가 차단돼도 배터리로 일정 시간 전기를 공급해줄 수 있는 장치가 있던데, 과한 투자 같아 일단 참는 중입니다. ㅋㅋㅋ 컴퓨터를 24시간 켜두기만 하니 애가 힘들어하는 것 같아 요즘은 일주일에 한두 번 5분 정도씩 껐다 켜는 중입니다.귀찮은 동시에 뭔가 진짜 서버 관리하는 느낌도 나서 나쁘진 않네요. 물론...
워드프레스 포스트 조회수 확인하기

워드프레스 포스트 조회수 확인하기

들어가며 참고한 글 개인적으로 플러그인 사용을 선호하지 않아서, 플러그인 없이 개별 포스트에 카운터를 달 수 있게 작업했습니다. 위 글에 나온 소스를 적용하면, F5 누르면 누를 때마다 조회수가 올라가는 불상사가 벌어지기에, 그 부분만 수정했습니다. functions.php 수정 function getPostViews($postID) { $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if ($count == '') { delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key,...
인터넷 익스플로러가 싫어요

인터넷 익스플로러가 싫어요

뭐 사실 인터넷을 제대로 쓰기 시작하면서 단 한 번도 좋아한 적은 없는 브라우저입니다만, 웹을 배우면서는 싫어하는 브라우저가 된 이젠 언급하기도 지치는 익스플로러입니다. 티스토리 스킨 만들던 초창기엔 인터넷 익스플로러는 지원하지 않는다는 문구를 친절히 넣어뒀지만, 어느샌가 그것도 귀찮아 그냥 되건 말건 신경도 안 쓰고 살았습니다. 그래도 티스토리 쓰던 시절엔 jQuery로 짠 소스가 많아서 페이지를 볼 순 있었는데,...
[티스토리] 인기글인지 확인하기

[티스토리] 인기글인지 확인하기

위 사진처럼 카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다. 응용하시면 본문에서도 활용 가능합니다. <s_sidebar_element> <!-- 이 블로그 인기글 --> <div class="popularPost"> <h3>이 블로그 인기글 </h3> <ul> <s_rctps_popular_rep> <li> <a href="[##_rctps_rep_link_##]" class="ImSoHot">[##_rctps_rep_title_##]</a> <span class="cnt">[##_rctps_rep_rp_cnt_##]</span> <s_rctps_rep_thumbnail> <img src="[##_rctps_rep_thumbnail_##]"/> </s_rctps_rep_thumbnail> <a href="[##_rctps_rep_category_link_##]">[##_rctps_rep_category_##]</a> </li> </s_rctps_popular_rep> </ul>...