워드프레스로 만든 웹사이트에서 컨택폼에 정크이메일이 계속 들어오거나 스팸 댓글이 많을때 해결 방법 – 구글 reCAPTCHA 설치

워드프레스로 홈페이지를 만들고나서 컨택폼을 추가하거나 사이트에 코멘트 기능을 활성화하게되면 언젠가는 스팸 댓글이 쏟아지거나 컨택폼을 통한 스팸 이메일이 넘쳐나게 된다.

힘들게 만든 사이트를 스팸으로부터 보호하고자하는 방법중 가장 손쉬운 것은 구글에서 제공하는 reCAPTCHA 를 설치하는 일일것이다.

구글 reCAPTCHA 를 설치하는 방법은 아래와 같다.

1. https://www.google.com/recaptcha 사이트로 간다.

2. 상단 메뉴에서 v3 Admin Console 을 클릭한다.

3. “+” (Create) 를 클릭한다.

4. 스팸보호를 하고 하는 사이트의 주소를 추가한다.

위의 작업을 끝나치고 나면 해당 사이트에서 Advanced Google reCAPTCHA 플러그인을 추가한다.

그리고 구글 reCAPTCHA 설치시 받은 Site Key 와 Secret Key 를 복사해서 붙여넣으면 된다.

워드프레스 관리자 페이지 화면이 정상적으로 보이지 않을때

워드프레스 버젼을 업그레이드 하면서, 혹은 설치된 플러그인의 업데이트, 사용중인 Theme 의 업데이트가 있고나서는 매번 새로운 문제가 발생하는 경우가 많다.

업데이트 이후에는 해당 사이트의 페이지들을 한번씩 체크해주는게 좋다.

플러그인의 경우 새로운 워드프레스 버젼과 호환이 안되는 경우에는 서둘러 같은 기능의 다른 플러그인을 찾는 것이 좋다.

플러그인을 찾을때에도 해당 플러그인이 최근 언제 업데이트가 되었는지를 확인해야한다. 제작자가 버젼을 꾸준히 업데이트 해주는지 체크해야한다.

최근 워드프레스 버젼과 플러그인의 업데이트를 하면서 관리중인 사이트중 몇개의 사이트가 관리자 페이지 화면이 아래와 같이 정상적으로 보이지 않는것을 확인하였다.

정상적으로 작동되는 사이트와 비교를 해봐도 도무지 원인을 찾을수가 없었는데 결국엔 검색을 통해서 아래 코드를 추가하므로써 문제가 해결되었다.

해결 방법은 아래와 같다.

아래 파일로 들어가 해당 코드를 추가해서 문제를 해결하였다.

1. 컨트롤 패널에서 File Manager 로 들어가 해당 사이트 디렉토리로 들어간다.

2. wp-config.php 파일을 오픈하고


define( ‘WP_DEBUG’, false );

/* That’s all, stop editing! Happy publishing. */


위의 코드 아래로 아래 코드를 추가한다.

define(‘CONCATENATE_SCRIPTS’, false);


:: [홈페이지 만들기 기초] css로 칼럼 만들기 <div class=row>과 <div class=column></div> 넣기

div 를 이용해서 두개의 칼럼을 만드는 코드이다. 그리고 css 에도 아래와 같이 코드를 넣어주면 완성이 된다.


<div class=”row”>
<div class=”column”></div>
<div class=”column”></div>
</div>

css 코드에는 아래와 같이 넣는다.

정확히 두개의 칼럼이 50% 되려면 아래와 같다.
.column {float: left; width: 50%;}
.row:after {content: “”; display: table; clear: both;}

양쪽의 칼럼 사이즈를 다르게 하려면 아래와 같이 넣어보자.
.column {float: left;}
.left {width: 25%;}
.right {width: 75%;}

모바일에서의 사이즈를 조정하려면 아래의 코드를 넣는다. (create a responsive two column layout)
@media screen and (max-width: 600px) {
.column {width: 100%;}
}


3개의 칼럼을 만드는 방법은 아래와 같다.

<div class=”row”>
<div class=”column”></div>
<div class=”column”></div>
<div class=”column”></div>
</div>

css 코드이다. 3개 칼럼이 모두 같은 사이즈로 보이려면 아래와 같이 넣는다.
.column {float: left; width: 33.33%;}
.row:after {content: “”; display: table; clear: both;}

3개의 칼럼이 다른 사이즈로 하는 방법은 아래와 같다.
.column {float: left;}
.left, .right {width: 25%;}
.middle {width: 50%;}

:: [홈페이지 만들기 기초] css 에서 테이블 꾸미기 <table>과 <tr>, <td> 넣기

홈페이지 제작시 도표를 정리할때 테이블을 많이 사용하는데 <div> 태그외에 <table> 을 여전히 많이 사용하게 된다.

css 에서 테이블을 꾸미는 방법을 올려보았다.

아래 코드는 <head> 와 </head> 사이에 넣거나 style.css 에 넣으면 된다.

<style>
table{border-style: solid; border-width: 3px; border-color: #000000;}
tr, th {font-size: 24px; color: #ffffff; font-weight: bold; background-color: #111111; padding: 6px;}
td {font-size: 16px; color: #336699; padding: 6px; border-style:dashed;}
</style>

[홈페이지 만들기 기초] Go Back 버튼의 여러가지 코드 – 크롬 브라우져에서 안될때 사용가능한 방법

현재 페이지에서 한페이지 뒤로 가려할때 흔히 사용하는 코드는 아래와 같다.

<button onclick=”history.go(-1)”>Go Back</button>

<input type= ‘button’ onclick=’javascript:history.go(-1);return false;’ value=’Back’>

하지만 위의 코드는 크롬 브라우져에서 안되는 경우도 있다. 그럴때는 아래의 코드를 사용하여 해결할 수 있다.

<a href=”<?php echo $_SERVER[‘HTTP_REFERER’] ?>”>Go Back</a>

<a href=”<?php echo $_SERVER[‘HTTP_REFERER’] ?>” class=”btn btn-primary”>< Go Back</a>

<button onclick=”location.href='<?php echo $_SERVER[‘HTTP_REFERER’] ?>'” type=”button”>Go Back</button>

<input type=”button” onclick=”location.href='<?php echo $_SERVER[‘HTTP_REFERER’] ?>’;” value=”Back” />

error: Content is protected !!