[WP개발] 크롬에서 접속한 워드프레스 사이트가 갑자기 스타일 및 파일이 깨져보일때

내 맥 크롬에서 플젝연관된 특정 사이트가 갑자기 스타일이 깨진채로 보여서(이미지 포함) 확인해보았더니 이미지 경로나 다른 파일 참조 경로가 https로 자동으로 바뀌어있더라. 보안서버 설치도 안되어있는데.
그런데 재밌는건 사파리에선 잘된다는거...
다른사람 컴도 잘되고 모바일에서도 잘 나오고
공유기문젠가 하여 다른 와이파이로 접속해도 증상은 여전하고
바이러스 애드웨어 하나도 안잡히고
크롬 지웠다 깔아도 똑같고
시스템 clean같은거 해도 여전하고
그래서 chrome forum을 가서 봤더니


Site broken in Chrome (SSL issue) 
https://wordpress.org/support/topic/site-broken-in-chrome-ssl-issue/page/2

크롬업뎃이 되면서 wordpress에서 woocommerce계열은 다 https로 연결시켜버림.
여기는 우커머스를 설치하긴 했지만 결제모듈이 나중에 들어갈거라서 보안서버는 설치가 안되어있었던거고.

그래서 해당테마의 functions.php를 열어 아래와 같은 코드를 추가해주면 된다.
(강제로 https 비활성화)

$_SERVER['HTTPS'] = false;

이것때메 왜인가 하고 다 삭제하고 검사하고 쌩난리를 쳣네 ㅋㅋ 몇시간을 소비한것인가,,,

[PHP] web page redirect script : 특정 사이트로 이동하게 하는 코드

Sample code

<?
header("Location: http://examplesite.test.com/");
die();
?>

[CSS Tip] vertical alignment of div

1. center center align

.child-element {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: orange;
}

2. right center align

.child-element {
  position: relative;
  top: 50%;
  right:0;
  transform: translate(0%,-50%);
  background: orange;
}



+
-webkit-
-ms- prefixes

ref from http://joshbroton.com/absolute-positioning-and-horizontal-vertical-centering/

메르스 전파경로 시각화 - from KBS

HTML5 캔버스로 개발했네..

http://dj.kbs.co.kr/resources/2015-06-04/

뜯어봐봐야지.

그나저나 지역사회 전파는 오래지않아 일어날것 같네.

푸터등의 패밀리사이트 표기시, 셀렉박스 리스트 만드는방법

일반 기업 사이트 등에서 패밀리 사이트/연관 사이트 select해서 보여줄때 아래와 같이 처리한다. (일반 select태그를 써서 했더니 구글 크롬등에서는 팝업으로 인식해서 차단하더라;;;)

div로 영역잡고 li로 리스트 만들어서 마우스 클릭시 토글로 보이게/안보이게 처리한다.

예시 코드 (데모보기)

1. HTML선언

<div class="">
      <div class="">
            <div onclick="toggleItem();" style="cursor: pointer;" class="family_btn_wrap">
                <div class="family_btn">
                    계열사 바로가기
                </div>
            </div>
            <div class="family_list_wrap" id="families" style="display:none">
                <ul style="border:0; border-bottom:1px solid #808080; border-right:1px solid #808080; border-left:1px solid #808080;">
                    <li>
                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="http://www.google.com">사이트1(새창이동)</a></div>
                        <div style="padding:5px 12px; margin:0;"><a target="" href="http://www.cafe24.com">사이트2(같은창이동)</a></div>

                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="#">사이트3</a></div>
                        <div style="padding:5px 12px; margin:0;"><a target="_blank" href="#">사이트4</a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

2. javascript 함수 추가 (toggleItem)

function toggleItem() {
    if (document.getElementById("families").style.display == "" ) { document.getElementById("families").style.display="none";
   } else {
document.getElementById("families").style.display="";
   }
}

[CSS 팁] 테이블에서 2n번째 부분만 회색백그라운드 처리 (격자)

table tr:nth-child(2n) td {
  background: rgba(0,0,0,0.01);
}

php를 사용 하여 특정 html 페이지를 긁어올때 방법.

* php를 사용 하여 특정 html 페이지를 긁어올때 아래의 세가지 케이스가 있다.

1. file_get_contents 함수 이용

아래의 코드를 삽입하여 확인 (특정 사이트의소스를 그대로 다 가져옴)

<? echo file_get_contents(http://www.google.com); ?>

이게 안되면.. 2번으로 (서버에 따라 막혀있을수 있음)

2. curl함수 이용 (fsocketopen을 이용하는 방법도 있다고 함.)

<?php
$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, 'http://www.google.com');
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$file_contents = curl_exec($ch);
echo $file_contents;
?> 

3. snoopy 라이브러리 사용

공개된 스누피 오픈소스를 이용하는 방법이다.
아래의 링크로 이동하여 다운받아 설치하여 사용한다.

http://sourceforge.net/projects/snoopy/?source=directory



* 참고 사이트 : http://phpinside.tistory.com/?page=4

[WP 팁/플러그인] Contact form 7 을 사용하여 메일 송수신이 잘 되지않을때

워드프레스의 Contact From 7을 사용중에
간혹 메일이 전송/수신이 되지 않는경우가 있다.

지금까지 찾아본 정리 팁은 다음과 같다.

1. Gmail  계정으로 연결한다.
구글 앱스 또는 쥐메일 계정으로 등록시켜 놓으면 좀 더 안정적인 메일전송을 기대해볼 수 있다.

다만 나의 경험상 메일 주소를 그대로 등록해놓았을때 배달이 안될 때가 있었는데
그때에는 환경설정에 들어가 미러링 처럼 정의된 또 다른 메일주소를 입력하니 정상적으로 동작하기도 하였었다.

그밖에 쥐메일/보안 관련 메일 전송시 Configure SMTP 플러그인을 사용하는 방법도 추천.

2. Gravity Forms, Ninja Forms 등의 플러그인도 유명하다고 한다.
나는 직접 설치해서 써보지 않아 자세한 설명은 생략.
- Ninja Forms : 바로가기 / 그나저나 내가 좋아하는 레드컬러에 반쯤 삐져나온 닌자 캐릭 귀엽...;
- Gravity Forms : 바로가기
- 두 플러그인에 대한 비교 페이지


3. 자신의 서버 호스팅의 환경/세팅과 연관되어있을수도 있으니 체크.

4. 그밖에 Contact From DB 플러그인 이용하여 사용자의 전송정보를 DB로 함께 보관할수도 있다.

브라우저 크기에 따라 이미지 리사이징

모바일, 웹의 브라우저의 크기에 따라 유동적으로 삽입된 이미지가 함께 리사이징 되는 효과.

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>  
<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div> 

여기서 58.536585%는 알아서. 나는 가로사이즈가 꽉 차있어야 하는 상황이었기때문에 100%으로 변경했다.


출처 : http://stackoverflow.com/questions/4572621/auto-image-resize-based-on-browser-window-dimensions

APM에서 웹페이지 상에 한글이 깨져보일때

한글 깨짐 문제

/etc/mysql/my.cnf 중 [client], [mysqld]에 default-character-set 값을 추가해줌

예를들어 데이터베이스의 인코딩으로 UTF-8을 쓴다고 하면 my.cnf 파일을 아래와 같이 수정해 준다.

[client]
default-character-set=utf8
[mysqld]
default-character-set=utf8

&

메모장에서 파일 저장시 반드시 uft-8 인코딩 으로 지정해주고 저장.


http://opentutorials.org/course/195/1361

.htaccess 파일을 이용하여 특정아이피만 접근허용 또는 접근 불허

서버상에서 루트 path에 .htaccess파일을 생성하여
아래와 같이 추가한다.

1. 특정 아이피/관리자만 볼수있도록 홈페이지 접근 제한
 - 특히 홈페이지를 잠시 닫아놓거나 오픈 이전에 특정몇명만 접근이 가능하도록 설정한다.

<Limit GET POST>
deny from all
allow from 아이피주소
allow from 아이피주소
:
</Limit>

2. 특정 아이피만 차단
 - 스팸성이 있는 접근을 차단하기 위해 해당 아이피만 접속이 안되도록 설정 할 수있다.

<Limit GET POST>
deny from 아이피주소
deny from 아이피주소
:
</Limit>

위와 같이 설정하면 차단된 아이피로 홈페이지 접근시 HTTP 403 접근권한 없음 페이지가 보인다.

[WP 플러그인] 워드프레스 사이트에서 방문자 통계 확인

직접 서버에 워드프레스를 설치한 경우, 자체적으로 워드프레스에서 방문자 통계 등을 보여주는 기능이 없기 때문에 제공된 추가 플러그인을 깔아 정보를 확인한다.

대표적으로 구글 어날리틱스(Google Analytics) 플러그인을 설치할 수 있지만 디테일한 기능을 가진 만큼 느려지는 단점도 존재한다.

대시보드가 좀 느려진다면 Jetpack이라는 플러그인을 사용 하는 방법이 있다.

워드프레스닷컴 사이트(설치형이 아닌 가입형)의 통계 기능을 연결해서 사용하게끔 한다. 때문에 필요한 사항은 자신의 설치형 워드프레스 계정, Jetpack플러그인, 가입형 워드프레스닷컴의 계정이 되겠다.

통계의 경우 관리자 화면에서 방문자 추이, 일별 접속수치 등과 개별 포스트의 방문자 카운트 등을 확인가능하다.

그밖의 다른 여타 기능을 제공한다.

상세한 정보는 아래의 링크를 통해 확인하자.

* Jetpack 플러그인 다운로드 접속 페이지 : https://wordpress.org/plugins/jetpack/

* 참고한 블로그 글 및 상세 설명확인 : http://codaa.tistory.com/104

[반응형 웹 개발 팁] 화면 사이즈에 따라 이미지가 동일 비율로 사이즈 변경되게 하는 방법

CSS 속성을 다음과 같이 부여한다. (필요에 따라 속성 가감. 볼드체 부분은 필수)

.your_background_class_name {
    width: 100%;    height:auto;    top: 0px;
    left: 0px;
    z-index: -1;
    position: absolute;
}

출처 : http://stackoverflow.com/questions/22556250/make-background-image-responsive

[반응형 웹 개발 팁] Fullscreen backgrounds with centered content

반응형 웹 제작시, 화면사이즈별로 페이지내 삽입된 이미지가 무조건 가운데 정렬되게끔 동작되게 하는 방법이다.

HTML, CSS 및 jQuery 코드의 추가가 필요하다.

(하단의 출처 http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content 링크는 추가로 오버랩되는 텍스트가 있지만 여기서는 텍스트 제외 이미지만 하기로...)

HTML 섹션

<div class="background" style="background-image:url('이미지경로');border:0px;width:100%;height:301px;" data-img-width="1920" data-img-height="301" align="center"></div>

CSS 섹션

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%9 !important;
}

jQuery 섹션 (직접 적용해보았을때는 js에러가 나서 CSS부분만 남겨두었는데 잘 동작하였다. )

/* resize background images */function backgroundResize(){    var windowH = $(window).height();    $(".background-map").each(function(i){        var path = $(this);        // variables        var contW = path.width();        var contH = path.height();        var imgW = path.attr("data-img-width");        var imgH = path.attr("data-img-height");        var ratio = imgW / imgH;        // overflowing difference        var diff = parseFloat(path.attr("data-diff"));        diff = diff ? diff : 0;        // remaining height to have fullscreen image only on parallax        var remainingH = 0;        if(path.hasClass("parallax")){            var maxH = contH > windowH ? contH : windowH;            remainingH = windowH - contH;        }        // set img values depending on cont        imgH = contH + remainingH + diff;        imgW = imgH * ratio;        // fix when too large        if(contW > imgW){            imgW = contW;            imgH = imgW / ratio;        }        //        path.data("resized-imgW", imgW);        path.data("resized-imgH", imgH);        path.css("background-size", imgW + "px " + imgH + "px");    });}backgroundResize();

* 출처 : http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content