워드프레스(블로그, 홈페이지)에서 Redirection & Embed iFrame 사용하기

스마트폰시간활용백서

하루를 27시간으로 만드는 시간 관리의 기술

1. 도  서  명 :  순식간에 한 달이 사라지는 당신을 위한 스마트폰 시간 활용 백서
2. 저        자 :  이동현
3. 출        간 : 2019년 03월 20일
4. 출  판  사 :  정보문화사
5. 도서구매 : 예스24(Yes24 .com)
6. 도서가격 : 15,000원(예스24구매 13,500원)

워드프레스(블로그, 홈페이지)에서 Redirection & Embed iFrame 사용하기

 

    원하는 웹주소로 이동하여 나타나게 하려면 리디렉트(redirect)시키면 되고, 원하는   페이지상에 나타나게 하려면 임베트 아이프레임(embed iframe)시키면 된다. 워드프레스에서는 플러그인을 사용하면 된다.

1.리디렉션(Redirection:웹페이지 자동전환)

    PC의 웹페이지를 모바일웹으로 자동이동 시켜주려면 리디렉트(redirect) 기능을 사용하면 된다. 리디렉트(redirect)란 다른주소로 다시 보내다 라는 뜻으로 웹페이지 전환시 사용된다. 예를들어 abc.com이란 주소를 클릭하였을때 m.abc.com으로 자동전환시키려면 다음 코드를 웹페이지 상단 (head)에 스크립트(script)넣으면 된다. (* [ ]는 < >로 실제 표기하여야한다.)

[SCRIPT language="JavaScript"] [!--
window.location="http://m.abc.com";
//--] [/SCRIPT]

또는 다음 코드를 사용해도 된다.

[frameset rows="*,0" border=0] [frame src="http://m.abc.com" frameborder=0 scrolling=auto] [/frameset]

상세한 응용코드는 다음 출처를 참고하면 된다.
출처 : http://www.pageresource.com/jscript/jredir.htm

 
2.워드프레스 redirect 플러그인

    워드프레스의 경우 리디렉트 플러그인이 있는데 이를 활용하면 페이지가 모바일웹(wptouch)에서는 드롭인다운메뉴로 표시할수 있는데 이때 사용하면 된다.
리디렉트 플러그인 다운로드 주소는 다음과 같다.
http://wordpress.org/extend/plugins/quick-pagepost-redirect-plugin/

설치순서는 다음과 같다.

1.플러그인 설치후 활성화
2.페이지 또는 포스트 하단에 Quick Page/Post Redirect의 Make Redirect Active 체크
3.맨하단에 Redirect URL: 삽입(http://abc.com) ->완료
페이지 작성후 wptouch에 페이지명을 체크하면 모바일웹의 드롭다운메뉴에 나타나고 드롭다운메뉴를 클릭하면 Redirect URL로 연결되어 나타난다.

 
3.모바일웹 자동인식 리디렉션

    PC웹주소로 접속하면 PC웹으로 아이팟,아이폰,아이패드,안드로이드폰으로 접속하면 모바일웹으로 나타나게 하려면 다음 코드를 상단(head)에 넣으면 된다.

[script language="JavaScript"] if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)
|| (navigator.userAgent.indexOf(‘iPad’) != -1)
|| (navigator.userAgent.indexOf(‘Android’) != -1)) {
document.location = “리디렉션할 주소”;
}
[/script]

* xe로 만든 홈페이지를 리디렉션 할 경우에는 관리자페이지 – 제어판 – 사이트설정 -레이아웃 -레이아웃설정 – 헤드스크립트에 위코드를 복사하여 붙이면 된다.
* index.php를 index.htm화일로 리디렉션하기

    XE소스로 홈페이지를 만들 경우 index.php에 모바일웹 자동변환을 위한 코드를 삽입하기가 어려우므로 index.htm화일을 만들어 서버루트에 함께 넣으면 PC웹으로 볼때와 모바일웹으로 볼때를 다르게 나타낼수가 있다.
index.htm화일의 상단에 다음 코드를 삽입한다.

[script language="JavaScript"] if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)
|| (navigator.userAgent.indexOf(‘Android’) != -1)) {
document.location = “모바일웹으로 리디렉트할 주소(http://m.abc.com)”;
}
[/script] index.htm화일의 헤드(head)안에 다음 코드를 삽입한다.
[meta http-equiv="refresh" content="1;url=PC웹으로 리디렉트할 주소(http://abc.com/index.php)"]

* [ ] 표기는 실제시 < >로 한다.

*출처 – http://css-tricks.com/377-how-to-redirect-indexhtml-to-indexphp/

 
4.호스팅업체의 리디렉션(cname추가)

    호스팅업체의 DNS관리에서 cname추가를 이용하면 원하는 주소로 리디렉션할수가 있다. 일부 막아놓은 서버도 있지만 그렇지 않은 도메인제공 서버 호스팅업체가 많다
    예를들면 NAS의 경우 DDNS서비스로 받은 주소를 리디렉션할수 있다. 구글앱스의 URL변경하기도 일종의 리디렉션이라고 할수가 있다.
예)카페24 호스팅업체의 CNAME 추가(4개)
    호스팅업체->로그인->나의서비스관리->도메인 연결관리->메일서버(MX)관리->도메인선택후 DNS관리->별칭(CNAME)관리->CNAME추가->도메인별칭:calendar,mail,docs,sites.URL->실제도메인명:ghs.google.com->확인

 
5.아이프레임(iframe)

    웹페이지에 임의의 웹주소를 나타나게 하려면 다음 코드를 본문에 삽입하면 된다.(실제표기: { } -> < >)
{iframe name=”ifrm1″ src=”http://URL” frameborder=”0″ width=”” height=””}{/iframe}
예) {iframe name=”ifrm1″ src=”http://ignitemission.kr/xe/” frameborder=”0″ width=”1150″ height=”574″}{/iframe}

 
6.워드프레스 Embed iframe 플러그인 사용

   워드프레스 플러그인을 다운로드받아 설치후 활성화 시킨다음 해당페이지에 다음 코드를 삽입하면 된다.(실제표기: { } -> [ ])
{iframe url width height}

다운로드 주소 – http://wordpress.org/extend/plugins/embed-iframe/installation/

예){iframe http://kwma.kr/zb/zboard.php?id=admin02 997 621}
 

 

 

이동현 원장

구글오프라인 사용자 모임 대표, (사)교회정보기술연구원 원장, (사)한국교회 언론회 정보통신 전문위원, (사)한국교회연합회 SNS위원장, [저서] 구글완전정복1(이론편), 구글완전정복2(실전편), 구글완전정복3(교사편), 트위터와 페이북의 선교적활용, 스마트전도법