[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;

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

[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

.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 접근권한 없음 페이지가 보인다.

커맨드 창에서 파일 내용 찾기

예를들어 C:\ 내에 있는 파일 내용을 찾고싶다면

cmd 하고,

findstr /s "문자열" C:\ 

입력 한다.

[WP 팁] 워드프레스 주소/설치 폴더명을 바꾸는 방법

워드프레스를 서버에 설치시, cafe24등에서 자동셋업하면 wp이름으로 된 폴더내에 설치가 되곤 한다.
사실 그거 말고도 워드프레스 설치할때 보통 일반적으로 wp 또는 wordpress등의 이름으로 사용하는데 이럴경우 쫌...보안적으로 위험할 수 있다.
(임의로 주소를 쳐서 돌려버리니까...많이 쓰는 비번들 뚫는것처럼 주소도 마찬가지)

이미 설치가 되어있는경우 워드프레스 폴더명을 다른이름으로 바꿀수 있는 방법을 소개한다.

1. 관리자 화면접속 > 설정 > 일반 이동

2. 바꾸고자 하는 주소를 폴더명까지 기재.

워드프레스 주소 : http://주소명/바꾸고자하는폴더명
사이트 주소 : http://주소명

3. FTP등으로 접속하여 현재 설치된 폴더명을 바꾸고자하는폴더명으로 변경

4. index.php파일을 루트폴더로 복사해서 붙여넣고 파일을 에디터로 연다

5. 아래와 같이 주소를 변경한다.

/** Loads the WordPress Environment and Template */require( dirname( __FILE__ ) . ‘/바꾸고자 하는 폴더명/wp-blog-header.php’ );

6. .htaccess 파일도 마찬가지로 루트폴더에 복붙한다. 만일 파일이 보이지 않으면 숨겨진파일보기를 통해서 찾는다.

7. 고유주소를 세팅한 적이 있다면 업데이트 해야한다고 한다.(이건 나도 안해봐서 모르겠으나 참고...로)


* 사이트 : http://hellodol.ly/2014/01/17/wordpress-cafe24-wp-folder-name/ 내용을 참고
* 참고 : http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

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

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

[WP 팁] 워드프레스 특정 포스트ID를 통해 카테고리 값 얻는 방법

워드프레스에서 특정 포스트에 해당하는 카테고리 정보를 얻는 방법.

<?php
$category = get_the_category( $custompost );
echo $category[0]->cat_name;
?>

카테고리 ID를 얻고싶다면

$category[0]->cat_ID; 으로 지정한다.


* 참고 https://wordpress.org/support/topic/get-category-name-by-post-id

[WP 팁] 워드프레스 루트 도메인 연결

만일 wp라는 폴더에 워드프레스 설치를 하였으나,
실제 워드프레스 사이트 도메인을 wp제외 루트 접속으로 변경하고 싶다면

1. 루트 위치에 index.php를 생성하고 아래과 같이 설정한다.

<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */
/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

      ?>

2. 워드프레스 관리자 페이지 > 설정 > 사이트주소(URL)에

wp 폴더 제외 원하는 도메인을 써준다.

참고 : 워드프레스 codex 설명 - http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

[WP 팁] 워드프레스 해당 포스트 페이지 에서 지정된 카테고리 가운데 가장 최상위 카테고리 추출

바로 상단의 카테고리는 category_parent로 가져올수 있으나,

가장 최상단의 카테고리는 아래와 같은 코드를 이용하여 추출한다.

$parentscategory ="";
foreach((get_the_category()) as $category) {
if ($category->category_parent == 0) {
$parentscategory .= $category->cat_ID .' , ';
}
}
$rootcategory_id = substr($parentscategory,0,-2);

참고 : http://www.wpbeginner.com/wp-themes/how-to-display-only-parent-category-in-your-wordpress-post-loop/

를 이용하여 재가공.

[WP 팁] 워드프레스 포스트 페이지의 해당 피쳐드 이미지 / 썸네일 주소만 추출하는 방법

get_the_post_thumbnail 함수는 썸네일 이미지 태그까지 먹힌걸로 가져오는데

여기서 이미지 경로만 추출하는 방법.



*워드프레스 포스트 피쳐드 이미지의 썸네일 주소만 추출하는 방법

$image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id(포스트id), 이미지사이즈);
$lcp_thumbnail = $image_attributes[0];

출처 : https://wordpress.org/support/topic/get_the_post_thumbnail-i-only-want-the-url

에서 참고 하여 약간 가공.