grid 플러그인 중에 개별적으로 다양한 설정이 가능해서 커스텀하기에 좋은 플러그인이 바로 essential grid 플러그인입니다. 이 플러그인을 사용하면 포트폴리오를 보기 좋게 그리드 형식의 박스로 배열이 가능합니다. 포트폴리오 뿐만 아니라 포스트, 갤러리, 우커머스 상품 등… 여러 이미지와 설명을 깔끔하고 다양하게 배치하기에 좋습니다. 여러 그리드 플러그인을 사용해 본 결과 유료이긴 하지만 이만큼 좋은 플러그인은 없었습니다.
그런데 에센셜 그리드 플러그인을 사용해 이미지들을 배치하고 한번 클릭하면 바로 포스트로 연결되도록 하고 싶었습니다. 그런데 기본적으로 그리드 안에 있는 레이아웃을 link로 연결되게 되어있어서 특정 부분을 누르지 않는 이상 바로 포스트로 연결이 되지 않았습니다.
이 문제를 해결하기 위한 방법이 있었습니다.
바로 아래의 코드만 붙여넣기 하면 그리드 어떤 부분을 클릭해도 바로 포스트로 연결되도록 설정을 할수 있습니다. 이 것을 하기 전에 우선 cover를 누르면 포스트 또는 상품 또는 포트폴리오로 넘어 갈수 있게 설정을 한번 해주셔야 합니다. 그리고 아래의 코드만 붙여 넣으면 그리드 중 어느 부분을 눌러도 포스트로 연결되도록 만들 수 있습니다.
custom css에 를 추가합니다.
.esg-media-cover-wrapper {cursor: pointer;} custom javascript에
jQuery(document).ready(function($) { $(".esg-media-cover-wrapper").click(function() { window.location = $(this).find("a").first().attr("href"); return false; }); });위의 코드를 추가합니다.
