콘텐츠
- 필요한 지식: 기본 PHP 및 CSS
- 필요: WordPress 설치, 선택한 텍스트 편집기
- 프로젝트 시간: 10 분
.net 잡지의 인쇄판을 구독한다면 (아니면 왜 안 되겠습니까!?) 이번 달 호에 "WordPress를 사용한 반응 형 디자인"에 대한 훌륭한 기사가 실린 것을 보셨을 것입니다.
이 기사에서 저자 Jesse Friedman은 진정으로 효과적인 반응 형 웹 사이트를 생성하기 위해 고유 한 WordPress 기능을 최대한 활용하고 극복하는 데 매우 유용한 기술을 설명합니다. WordPress로 반응 형 사이트를 제작할 생각이라면 반드시 그의 기사 사본을 선택해야합니다. 반드시 읽어야합니다.
최근에 모바일 중심의 반응 형 접근 방식을 사용하여 WordPress에서 개인 블로그를 다시 구축 한 결과이 기사에서 다룬 몇 가지 기술에 익숙했습니다. 하지만 정말 눈에 띄는 항목은 jQuery를 통해 유동적 인 이미지를 구현하는 Jesse의 접근 방식이었습니다.
워드 프레스와“유동적 이미지”의 문제점
모두 알고 계시 겠지만, 최대 너비 : 100 %를 사용하는 '유동적 이미지'는 이미지가 컨테이너의 크기에 맞게 확장 될 수 있도록 고정 된 너비 나 높이가 없어야합니다. 불행히도 WordPress는 미디어 라이브러리에서 생성 된 이미지의 크기를 자동으로 계산하고 해당 너비 및 높이 속성을 img> 태그에 추가합니다.
이것은 페이지 렌더링 속도에 좋지만 거대한 이미지 크기가 더 이상 컨테이너의 크기에 제한되지 않기 때문에 반응 형 레이아웃을 만드는 데있어 스패너가 작동합니다.
그게 문제입니다.
비 jQuery 솔루션
그의 기사에서 Jesse는 페이지가로드되면 페이지의 모든 img> 태그에서 너비 및 높이 속성을 제거하기 위해 jQuery를 사용하도록 제안합니다. 이것은 확실히 작동하지만 내 사이트를 구축 할 때 특히 문제의 페이지에 많은 이미지가있는 경우이를 달성하기 위해 JavaScript에 의존하는 아이디어가 마음에 들지 않았습니다.
이것은 WordPress 필터가 구출 된 곳입니다.
WordPress 코덱은 필터를 다음과 같이 정의합니다.
"... WordPress가 시작하여 다양한 유형의 텍스트를 데이터베이스에 추가하거나 브라우저 화면으로 보내기 전에 수정합니다."
이것이 바로 우리에게 필요한 것입니다. 페이지에 렌더링되기 전에 모든 이미지에서 실행되도록 필터를 설정함으로써 PHP를 사용하여 너비와 높이 속성을 제거하여 JavaScript를 통한 (잠재적으로) 값 비싼 DOM 조작의 필요성을 피할 수 있습니다.
코드
- /**
- * 반응 형 이미지 기능
- */
- add_filter (’post_thumbnail_html’,’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’,’remove_thumbnail_dimensions’, 10);
- function remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (너비
위의 코드에서는 add_filter 함수를 사용하여 두 개의 필터를 추가합니다. 첫 번째 인수는 연결하려는 필터이고 두 번째 인수는 필터가 호출 될 때 실행할 함수를 지정합니다.
코드에서 우리는 두 가지 모호한 함수에 연결합니다.
- post_thumbnail_html –로 검색된 이미지 post_thumbnail ()
- image_send_to_editor – 편집기에 추가 된 이미지
그런 다음 정규식을 사용하여 이미지 태그에서 너비 및 높이 속성을 모두 제거합니다. 이제 이미지가 브라우저로 전송 될 때 Marcotte가 말한 것처럼 완전히 '유동적'일 수 있습니다.
고백
나는 사용의 아이디어를 고백해야 add_filter 속성을 제거하기 위해 평생 동안 연결할 수 없었던 올바른 WordPress 필터를 찾을 수 없었습니다.
많은 검색 끝에 마침내 내가 필요한 두 필터에 대한 정보를 제공하는 Nathaniel Taintor의 Wordpress Stack Exchange에 대한이 매우 유용한 게시물을 발견했습니다.
주의 사항
내가 아는 한이 접근 방식의 유일한 주요 단점은 사이트의 모든 이미지에서 너비 및 높이 속성을 제거하지 않는다는 것입니다. WordPress가 댓글에 사용하는 Gravatar 이미지에 특히 문제가 있음을 알았습니다.
누구든지이 문제에 대한 해결책이 있다면 우리 모두에게 도움이 될 수 있도록 의견을 남겨주세요.
이것이 유용하고 WordPress 웹 사이트에서 "유동적 인 이미지"를 구현하기 위해 JavaScript에 의존하는 대안을 보여줬기를 바랍니다.
작사 : David Smith
Dave Smith는 영국의 아름다운 도시 Bath 근처에 거주하는 프론트 엔드 디자이너입니다. 새롭고 흥미 진진한 웹 프로젝트를 작업하지 않을 때 그는 빅 밴드 재즈 그룹에서 심포니 오케스트라에 이르기까지 모든 분야에서 트럼펫을 연주하는 것을 볼 수 있습니다. Twitter에서 @get_dave로 Dave를 따라 잡을 수 있습니다.
