Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

워드프레스 포스트 이미지 첨부파일 링크에 class 추가하기

2013-10-06 by 편리

워드프레스 포스트 내용 중 이미지 첨부파일의 링크에 class를 추가하는 방법이다. 이 방법이 필요한 이유는 새로운 워드프레스 블로그를 하나 준비하면서 테마 수정 중에 테마관련 문서를 보니 jQuery prettyPhoto 플러그인을 기본 적용되어 있다고 하는데 기존에 올려진 이미지에 이 플러그인 적용시키려면 포스트 내용을 모두 수정해야하는 만만치 않은 일이 생겨서 php코드를 이용해 이 문제를 해결하기 위함이다.

add_filter('the_content', 'add_lighthbox_class');
function add_lighthbox_class($content)
{
    preg_match_all('/(<a[^>]+href=['"]?([^>'"]+[^>'"]+)['"]?[^>]*>).*<img alt="">]+>.*</a>/i', $content, $matchs);
    $count = count($matchs[2]);

    for($i=0; $i<$count; $i++) {
        if(strpos( $matchs[1][$i], 'prettyPhoto' )) continue;

        $a = preg_replace('/>$/i', ' class="prettyPhoto">', $matchs[1][$i]);

        $content = str_replace($matchs[1][$i], $a, $content);
    }

    return $content;
}

위 코드를 테마의 functions.php 파일에 추가한다. jQuery prettyPhoto플러그인을 적용하기 위해서는 a 태그에 class=”prettyPhoto”가 추가되어 있어야 하는데 이것을 본문 내영 중에서 이미지링크 부분을 정규식을 추출해서 class를 추가하는 코드이다. 사진과 관련하여 lightbox 플러그인을 적용하기 위해서 rel=”lightbox” 를 추가하는 경우가 있는데 이런 경우에도 위의 코드를 수정해서 적용할 수 있을 것이다. 플러그인의 확인은 http://realsnap.kr/ 에서 할 수 있다.

Post navigation

Previous Post:

[JS] 자바스크립트를 이용하여 특정 엘리먼트로 스크롤 이동하기

Next Post:

KCP 결제모듈의 init_pay_button 함수 수정

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • php 배열 연산에서 + 와 array_merge 의 차이
  • pcntl_fork 를 이용한 다중 프로세스 실행
  • 아이폰 단축어를 이용하여 주중 공휴일엔 알람 울리지 않게 하기
  • 구글 캘린더 전체일정 재동기화
  • OpenLiteSpeed 웹서버에 HTTP 인증 적용
  • OpenLiteSpeed 웹어드민 도메인 연결
  • WireGuard를 이용한 VPN 환경 구축
  • Ubuntu 22.04 서버에 OpenLiteSpeed 웹서버 세팅
  • 맥 vim 세팅
  • 우분투 시스템 터미널쉘 zsh 로 변경

Recent Comments

  • 편리 on 업무관리용 그누보드 게시판 스킨
  • 임종섭 on 업무관리용 그누보드 게시판 스킨
  • 캐논 5D 펌웨어 | Dslr 펌웨어 업그레이드 방법 82 개의 베스트 답변 on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • Top 5 캐논 5D 펌웨어 Top 89 Best Answers on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 임팀장 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on Notepad++ NppFTP 플러그인 수동 설치
  • paul-j on Notepad++ NppFTP 플러그인 수동 설치
  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2025 CHICPRO | Built using WordPress and SuperbThemes