워드프레스 블로그 초기 설정

워드프레스 코어를 설치하고, 대시 보드를 설정하고, PHP 파일을 수정해야 하는 초기 설정들을 빠짐없이 기록해두기 위해서 토미집 워드프레스 블로그 초기 설정을 작성했다.

주의사항
1. 모든 정보는 사이트 그라운드 호스팅을 사용하는 토미집 블로그를 기준으로 작성했다.
2. 서버 및 호스팅 전문지식이 없기 때문에 기재된 내용 외의 정보는 모른다.
3. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

1. 사이트 그라운드 사이트 툴 설정
2. 토미집 워드프레스 코어 설치
3. 토미집 워드프레스 블로그 대시보드 설정
4. FTP 사용하기
5. .htaccess 파일 수정하기
6. 워드프레스 wp-config.php 파일 수정하기
7. 워드프레스 테마 functions.php 파일 수정하기

사이트 그라운드 사이트 툴 설정

1. 서브 도메인 만들기

하나의 도메인으로 여러 개의 사이트를 운영하려면 서브 도메인을 만들어야 한다. 호스팅 업체 및 서비스 플랜에 따라 서브 도메인 지원 유무가 다르기 때문에 서브 도메인을 사용할 예정이라면 지원 유무를 살펴봐야 한다. 만약에 사용자가 원하는 플랜에서 서브 도메인을 지원하지 않는다면 워드프레스 멀티 사이트를 구축해서 임의의 서브 도메인을 생성해야 한다. 토미집은 SiteGround – Websites – SITE TOOLS – DOMAIN – Subdomains에 접속해서 서브 도메인을 만들었다.

2. 도메인에 SSL 적용하기

SSL(Secure Sockets Layer)는 네트워크에 통신 보안을 제공하기 위한 암호 규약으로 지금은 TLS(Transport Layer Security)로 전부 대체되었지만 SSL이라는 말이 보편화되어 아직까지 SSL이라고 부르는 경우가 많다. SSL은 기본적으로 도메인 하나에 적용되며 서브 도메인에 적용하려면 도메인 각각에 SSL을 따로 적용해야 하지만, 인증기관에서 와일드카드 인증서를 지원할 경우 서브 도메인 전체에 대해 간단하게 인증서를 발급할 수 있다.

예를 들어 *.tommyzip.co.kr에 대해 인증서를 발급해서 *에 어떤 서브 도메인이 들어가든 인증서가 적용된다. 단 1차 서브 도메인에만 적용되기 때문에 만약에 https://www.blog.tommyzip.co.kr처럼 www가 2차 서브 도메인에 위치하게 되면 보안 인증 오류로 사이트 접속이 되지 않으므로 www.blog.tommyzip.co.kr에 대한 단독 인증서를 추가로 발급받아야 한다. SSL 인증서는 Let’s Encrypt 인증 기관을 제외하면 전부 유료이며 주기적으로 비용을 지불하고 재발급을 해야 한다. Let’s Encrypt에서 발급하는 SSL 인증서 무료이지만, 사용자가 직접 발급 절차를 진행해야 하고 주기적으로 수동으로 재발급을 받아야 하고 사용자에 따라 그 과정이 굉장히 어렵게 느껴질 수 있다. 사이트 그라운드에서는 Let’s Encrypt 인증기관의 단독 인증서 및 와일드 카드 인증서 자동 설치를 지원하며, 갱신 기간이 되면 자동으로 재발급을 해준다. 만약 작업 중 어려움이 있다면 365일 24시간 운영되는 채팅 상담을 통해 문제를 해결할 수 있다. 토미집은 SiteGround – Websites – SITE TOOLS – SECURITY – SSL Manager에서 간편하게 SSL 인증서를 발급했다.

3. HTTPS 리다이렉트 설정하기

http로 접속을 시도해도 https로 접속이 되도록 서버 내 .htaccess 파일에 리다이렉트 코드를 추가해야 한다. 사이트 그라운드에서는 마우스 클릭 한 번으로 HPPTS 리다이렉트 설정이 가능하다. 토미집은 SiteGround – Websites – SITE TOOLS – SECURITY – HTTPS Enforce에서 각 도메인에 대한 HTTPS Enforce 설정을 활성화했다.

4. PHP 버전 확인하기

워드프레스는 PHP로 구현된 CMS(Content Management System)로 PHP 버전에 따라 사이트 로딩 속도 및 보안 기술에 큰 영향을 받는다. 사용자는 반드시 워드프레스에서 권장하는 PHP 버전을 설정해야 하는데, 호스팅 서비스를 이용하면 기본적으로 각 호스팅 업체에서 권장하는 PHP 버전이 설정되어 있다. 2021년 9월 1일 기준 사이트 그라운드에서 지원하는 권장 PHP 버전은 PHP 7.4.20이고, 사용자가 수동으로 선택할 수 있는 최신 버전은 PHP 8.0.7 버전이고, 워드프레스가 권장하는 PHP 버전은 PHP 7.4 버전이어서 사이트 그라운드 PHP 버전 설정에서 PHP 7.4.20 버전을 선택했다. 참고로 워드프레스에서 권장하지 않는 PHP 최신 버전을 선택하면 PHP 최신 버전과 워드프레스 코어, 테마, 플러그인이 호환되지 않아서 많은 문제가 발생할 수 있는데, 이 경우 PHP 버전을 권장 버전으로 낮추면 수시간 뒤에 해결된다.

토미집 워드프레스 코어 설치

워드프레스 코어는 워드프레스를 구성하는 핵심 소프트웨어이다. 사용자가 직접 설치할 경우 wordpress.org에서 워드프레스 코어 파일을 다운로드한 후 압축을 해제하고 FTP 소프트웨어로 www 폴더 또는 public_html 폴더 내에 워드프레스 코어 폴더와 파일을 업로드하고 wp-config.php 파일의 일부 항목을 사용자 정보에 알맞게 수정해야 한다.

호스팅 업체에서 워드프레스 코어 자동 설치를 지원하면 간편하게 설치를 진행할 수 있지만, 일부 호스팅 업체에서 자동 설치를 진행할 경우 호스팅 업체와 관련된 플러그인이 함께 설치될 수 있기 때문에 코어 설치 후 특이사항이 있는지 살펴보고 향후 사이트 운영에 문제가 없도록 해야 한다. 사이트 그라운드는 워드프레스 자동 설치를 지원하며, 자동 설치 후에 사이트 그라운드에서 개발한 SG Optimizer 플러그인이 함께 설치된다. 토미집은 워드프레스 자동 설치를 진행했다.

토미집 워드프레스 블로그 대시보드 설정

1. 검색 엔진 접근 차단

워드프레스 대시보드 – 설정 – 읽기 항목에 접속해서 검색 엔진 접근 여부에 체크하면 사이트의 <header> 태그에 안에 <meta name=”robots” content=”noindex,nofollow”> 코드가 추가되고 검색 엔진이 사이트 URL 주소를 인식하고 방문할 때 이 사이트는 검색엔진에 노출하지 마세요라고 알려준다. 사이트를 정식으로 오픈하기 전까지 검색 엔진에 사이트를 노출하고 싶지 않다면 검색 엔진 접근 차단 설정을 가장 먼저 해야 한다.

2. 워드프레스 언어 변경 및 시간 설정

워드프레스 대시보드 – 설정 – 일반 탭에서 사이트 언어를 English에서 한국어로 변경하고, 시간대를 UTC+9로 변경하고고, 사이트에 표기되는 날짜, 시간, 요일에 대한 표시 형식을 선택해야 한다. UTC는 협정 세계시로 1972년 1월 1일부터 국제적인 표준 시간의 기준으로 사용 중이고 서버 컴퓨터도 UTC를 기반으로 전 세계의 시간을 계산한다. 한국의 시간대는 UTC 기준 9시간을 더해야 한다.

3. 스팸 댓글 차단

‘댓글 차단 목록’을 작성하면 특정 단어가 작성 내용, 작성자 이름, URL, 이메일 주소, IP 주소에 포함될 경우 자동으로 휴지통에 옮겨진다. 사용자 사이트에 스팸 댓글이 달리면 해당 문자를 차단 목록에 더하는 식으로 운영하면 되는데, 오랜 기간 동안 ‘댓글 차단 목록’을 작성해온 사람들이 공개한 ‘댓글 차단 목록’을 사용해도 된다. Grant Hutchinson라는 사용자는 2011년부터 지금까지 자신의 사이트에서 검출된 스팸을 기반으로 2-3개월에 한 번씩 자신의 깃허브에 댓글 차단 목록을 업데이트하고 있다. 2021년 5월 12일 기준 43,000개의 스팸 목록이 업데이트되어 있다. Grant Hutchinson의 깃허브에 접속해서 blacklist.txt를 선택하면 블랙리스트가 보여지는데, 마우스 우클릭 – 다른 이름 저장하기로 텍스트 파일로 저장한 다음 Ctrl + A를 눌려서 내용 전체를 복사하고, 워드프레스 대시보드 – 설정 – 토론 항목의 Comment Blocklist에 붙여넣은 후 변경 사항을 저장하면 된다. 주기적으로 수동 업데이트를 하기가 번거로우면 제작자 깃허브에 소개되어 있는 관련 플러그인을 설치하면 되지만, 플러그인의 설치 개수가 늘어날수록 사이트 속도가 느려질 수 있으므로 반드시 사이트 작동에 필요한 플러그인이 아니라면 설치를 하지 않는 편이 좋다. 토미집은 ‘댓글 차단 목록’을 수동으로 업데이트하고 있다.

4. 고유 주소 설정

구글 검색 엔진은 콘텐츠의 내용과 관련된 “의미 있는 단어”를 포함한 URL을 가장 선호한다. 사용자가 구글에서 콘텐츠를 검색하면 구글 검색 엔진은 URL을 기반으로 페이지를 크롤링하고 페이지의 콘텐츠를 사용해서 검색 결과를 보여준다. 예를 들어 https://blog.tommyzip.co.kr/issue/covid19-mask-recommendations/ 처럼 하나의 디렉터리와 페이지의 주제를 알려주는 단어로 구성된 URL 구조가 좋은 예시라고 명시하고 있다. URL 작성할 때 단어 사이에 띄어쓰기, 밑줄, 쉼표, 특수문자를 사용해도 되지만, 가능하다면 대시(dashe)를 권장하고 영어권 사이트가 아니라면 URL에 영어가 아닌 다른 언어를 사용해도 된다.

단 단어 사이에 불필요한 구문을 남발하거나 포스트 id를 추가해서 URL의 길이가 길어지거나 post=1처럼 아무런 의미가 없는 평범한 페이지 이름을 사용하거나 baseball-cards-baseball-cards-baseballcards처럼 중복된 키워드를 남용하거나 issue1/issue2/issue3처럼 하위 디렉토리가 깊에 중첩되거나 내용과 전혀 관련이 없는 디렉토리 이름을 사용하는 등 구글 검색 엔진의 인식을 어지럽히는 행위를 해서는 안 된다. 그리고 도메인과 서브 도메인이 같은 페이지를 가리키는 경우 구글 검색 엔진이 중복 페이지로 인식하기 때문에 두 가지 URL 중 하나만 사용하도록 고쳐야 하고 부득이하게 두 가지 URL을 사용해야 한다면 반드시 기준이 되는 URL을 정하고 차순위 URL을 기준 URL로 301 리다이렉트 설정을 해야 한다.

워드프레스는 사용자가 URL 구조 형식을 임의로 지정할 수 있다. 구글 웹마스터 가이드라인이 권장하는 형식으로 고유 주소를 설정하려면 워드프레스 대시보드 – 설정 – 고유 주소 항목에 접속해서 사용자 정의 구조를 선택하고 /%category%/%postname%/를 입력해야 한다. %category%는 카테고리를 의미하고, %postname%는 포스트 네임을 의미한다. URL을 작성하는 언어는 한국인을 대상으로 하는 경우 한국어로 작성하면 되고, 영어권 사람들이나 다국어 사이트를 운영한다면 영어로 작성하면 된다. 토미집은 향후 다국어 사이트를 운영할 수도 있어서 영어 URL을 사용했다.

5. 미디어 설정

워드프레스의 미디어에 관리자가 이미지를 업로드하면 워드프레스가 사이트에 접속한 사용자의 웹 경험을 향상시키기 위해 업로드된 이미지를 인식하고 워드프레스가 규정한 해상도보다 이미지의 해상도가 크다면 업로드한 이미지를 손실 압축하고 리사이즈를 해서 원본 이미지를 대체한다. 워드프레스가 자동으로 생성하는 이미지의 해상도 기준은 워드프레스 대시보드 – 설정 – 미디어에서 변경할 수 있는데, 2560px를 초과하는 이미지를 업로드하려면 function.php에 워드프레스가 제공하는 코드를 추가해야 한다. 토미집은 768px를 기준으로 이미지를 제작할 예정이서 최대폭을 768px로 설정했고 최대 높이는 2560px로 설정했다.

FTP 사용하기

○ FTP(File Transfer Protocol, 파일 전송 프로토콜) 정의

FTP는 TCP/IP를 기반으로 네트워크로 연결된 컴퓨터들 간에 파일을 전송한다. IP(Internet Protocol)는 네트워크를 구성하는 각 노드에 중복되지 않는 유일한 주소를 부여하고, 데이터에서 분할된 패킷을 한 지점에서 다른 지점으로 전송할 때 ‘노드 간의 경로를 배정해 주는 라우터’를 통해 전송한다. 전송되는 패킷은 순서가 뒤바뀌거나 손실될 수 있기 때문에 TCP(Transmission Control Protocol)가 목적지에 도착한 패킷을 데이터로 재조립하면서 패킷을 순서대로 배치하고 손실된 패킷을 다시 요청한다. 즉 IP는 목적지까지 가지 위한 경로를 설정하고 TCP는 데이터의 흐름을 제어한다.

FTP는 사용자 컴퓨터와 서버 컴퓨터 사이를 두 가지 포트로 연결하는데, 21번 포트는 FTP로 데이터를 제어하는 신호를 주고받을 때 사용하고 20번 포트는 FTP로 실제 데이터를 전송할 때 사용한다. 포트는 IANA(Internet Assigned Numbers Authority, 인터넷 할당 번호 관리기관)에서 할당한 TCP 넘버로 데이터의 목적지를 식별하는 역할을 한다.

SFTP(Secure File Transfer Protocol / SSH File Transfer Protocol)는 FTP에서 보안이 강화된 버전으로 SSH(Secure Shell) 통신 규약을 통해서 TCP 보안 채널을 형성해서 사용자 정보를 암호화 인증하고, 패킷을 네트워크로 전송하기 전에 암호화해서 네트워크에서 패킷에 대한 침입을 방지한다. SFTP는 22번 포트로 데이터의 신호를 제어하고 데이터를 전송한다. SFTP를 사용하려면 FTP 소프트웨어와 서버에서 모두 SFTP를 지원해야 한다.

○ File Manager 사용하기

사이트 그라운드의 호스팅 서비스 사용자는 SiteGround – Websites – SITE TOOLS – SITE – File Manager에서 파일 및 폴더의 생성, 삭제, 업로드, 다운로드를 할 수 있다. 토미집은 사이트 그라운드 사이트에 2차 인증 방식으로 로그인을 하고 SITE TOOL에 접속하는 과정이 다소 번거로워서 SFTP를 사용하고 있다.

○ SFTP 사용하기

1. PuTTY 형식의 ppk 파일 만들기

사이트 그라운드는 SSH Keys Manager를 제공한다. SiteGround – Websites – SITE TOOLS – DEVS – SSH Keys Manager에서 SSH 키를 생성하고 Hostname, User name, SSH key password, Port를 확인한다. 사이트 그라운드가 제공하는 Private Key는 사용자 컴퓨터에 존재해야 하기 때문에 키 정보를 사용자 컴퓨터에 저장해야 한다.

(1) 키 정보를 복사하고 메모장을 열어서 키 정보를 붙여넣고 사용자가 임의로 example.ppk처럼 ppk 확장자를 붙여서 파일을 저장한다. 메모장에서 저장한 ppk 파일은 PuTTY 형식의 포맷이 아니기 때문에 PuTTY 소프트웨어를 사용해서 PuTTY 형식의 포맷으로 변경해야 한다.
(2) PuTTYgen 사이트에서 소프트웨어를 다운로드 받고 설치한다.
(3) PuTTYgen을 실행한 후 File – Load priave key에서 example.ppk를 선택하고 불러오면 비밀번호 입력창이 뜨고 SSH Keys Manager에서 SSH key를 생성할 때 입력했던 비밀번호를 입력하면 SSH-2 priave key 정보가 나타난다.
(4) 사용자는 SFTP를 사용할 때마다 SSH를 사용하기 위한 Key passphrase를 입력할지 아니면 자동 로그인을 할지 선택할 수 있는데, FTP로 SSH를 사용할 때마다 Key passphrase를 입력하려면 Action 항목의 Save private Key를 선택해서 PuTTY 형식의 ppk 파일을 생성해야 하고 FTP로 자동 로그인 설정을 하려면 Key passphrase와 Confirm passphrase를 공란으로 만들고 Action 항목의 Save private Key를 선택해서 PuTTY 형식의 ppk 파일을 생성해야 한다. Key passphrase를 해제할 경우 “너 정말로 암호를 지정하지 않을 거야?”라고 물어보는데 “어 그렇게 할 거다”를 선택하면 된다. 토미집은 집에 있는 메인 컴퓨터로 SFTP를 사용할 때는 자동 로그인이 가능한 ppk 파일로 접속하고, 외부에서 노트북으로 SFTP를 사용할 때는 비밀번호를 입력해야 하는 ppk 파일로 접속하고 있다.

2. 파일질라(Filezilla) 소프트웨어

파일질라는 FTP 소프트웨어로 SFTP를 지원한다.
(1) 파일질라 사이트에서 소프트웨어를 다운로드하고 설치한다.
(2) 파일질라를 실행 – 파일 – 사이트 관리자 – New Site를 누른다.
(3) 일반 탭 – 프로토콜 – SFTP – SSH File Transfer Protocol을 선택하고, 로그온 유형은 키 파일로 선택한다.
(4) 호스트, 포트, 사용자 정보는 SiteGround – Websites – SITE TOOLS – DEVS – SSH Keys Manager – SSH Credentials에 표시된 정보를 입력한다. 키 파일은 사용자가 PuTTY 형식으로 저장한 ppk 파일을 선택한다. 이때 최초 메모장으로 저장한 ppk 파일을 불러오면 정상적인 형식이 아니라면서 형식을 바꾸겠냐는 팝업창이 뜨고 바꾸겠다 버튼을 클릭하면 그 즉시 PuTTY 형식의 ppk 파일을 저장할 수 있지만, 이 경우 Key passphrase 정보를 수정할 수 없기 때문에 FTP로 SSH를 사용할 때마다 Key passphrase를 입력해야 한다.
(5) 연결 버튼을 누르면 SFTP가 SSH로 서버 컴퓨터에 접속한다. Key passphrase가 설정된 경우 SSH Keys Manager에서 SSH key를 생성할 때 입력했던 비밀번호를 입력해야 한다.

.htaccess 파일 수정하기

hypertext access는 Apache 서버에 접속한 사용자 별로 특정 디렉터리에 대한 연결을 제한하기 위한 목적으로 만들어진 파일로 사이트의 루트 폴더인 www 또는 public_html에 위치해서 하위 디렉터리에 영향을 준다. 사이트 그라운드 호스팅 서비스는 Nginx 서버를 사용하지만 .htaccess 파일을 사용할 수 있도록 설정되어 있다.

.htaccess 파일에 적용되는 코드 문법은 Apache 서버 2.2 버전과 2.4 버전에 따라서 다른데, 사이트 그라운드의 Nginx 서버는 2.2 버전의 문법을 따르는 것으로 추정된다. 아래 모든 문법은 사이트 그라운드의 보안 가이드라인에서 제공하는 권장사항을 참고했다.

사이트 그라운드는 로컬 컴퓨터의 보안을 강화하기 위해 Norton Internet Security 또는 Kaspersky Internet Security를 사용하고, Perl 스크립트를 사용하지 않는 경우 ” CGI, Perl, Python에 대한 접근 차단 ” 코드를 .htaccess 파일에 추가하길 권장한다.

1. CGI, Perl, Python에 대한 접근 차단

##Deny access to all CGI, Perl, Python files
<FilesMatch ".(cgi|pl|py)$">
Deny from all
</FilesMatch>

사이트 그라운드는 많은 Exploit(취약점 공격)과 Backdoors(백도어 공격)이 Perl 언어를 통해 이루어진다고 했다. .htaccess 파일 최하단에 위 코드를 추가하면 모든 CGI, Perl, Python에 대한 접근을 거부한다. CGI는 웹 서버와 외부 프로그램 사이에 정보를 주고받는 규약이고, Perl과 python은 프로그램 언어이다. cgi|pl|py|txt라고 입력할 경우 텍스트 파일에 대한 접근도 거부하지만, 이 경우 검색 엔진이 인식하는 robots.txt에도 접근이 거부되기 때문에 robots.txt를 사용한다면 규칙에서 txt를 제거해야 한다. robots.txt은 검색 엔진 로봇이 사이트의 특정 경로에 대한 접근이나 차단을 제어하는 규약을 담고 있다.

2. 악성 봇 접근 차단

악성 봇은 사이트에 대한 표적 공격, 무차별 접근 시도를 하며 호스팅 계정의 서버 자원을 상당히 소모한다. 사이트 그라운드는 웹 서버 수준에서 대규모 보안 규칙을 구현하지만, 악성 봇으로 발생하는 문제를 최대한 차단하기 위해서는 보안 플러그인을 추가하거나 .htaccess 파일에 악의적인 접근을 차단하는 규칙을 추가해야 한다. 사이트 그라운드가 추천하는 보안 플러그인은 Wordfence에서 개발한 Wordfence Security 플러그인과 SiteGround에서 개발한 jHackGuard 플러그인이다. .htaccess 파일에 추가하는 규칙은 Perishablepress 사이트에 접속한 후 7G Firewall 항목의 코드를 .htaccess 파일 최하단에 추가하면 된다.

매번 수동으로 방화벽 코드를 업데이트하기 번거롭다면 해당 개발자가 출시한 BBQ: Block Bad Queries 플러그인을 설치하면 된다. BBQ 방화벽은 무료 버전과 유료 버전이 있고, 두 가지 버전 모두 악성 봇의 접근을 차단한다. 토미집은 혜택을 받는 만큼 대가를 지불해야 한다고 생각하기 때문에 유료 버전을 구매했다.

3. wp-config.php 접근 차단

## Hide wp-config.php
<Files wp-config.php>
order allow,deny
deny from all
</Files>

wp-config.php는 워드프레스 설정 파일로 데이터베이스에 접속하기 위한 유저 이름과 유저 비밀번호 등 다양한 개인 정보가 저장되어 있다. .htaccess 파일 최하단에 위 코드를 추가하면 wp-config.php에 대한 접근이 차단된다.

4. XML-RPC 접근 차단

<Files xmlrpc.php>
order allow,deny
deny from all
</Files>

워드프레스 3.5버전에서 추가된 기능으로 타사 소프트웨어를 사용해서 원격으로 워드프레스에 글을 개시할 수 있다. 보안에 큰 위협이 되는 것은 아니지만 알려지지 않은 취약점이 발견될 경우 문제의 소지가 될 가능성이 있기 때문에 해당 기능을 사용하지 않는다면 .htaccess 파일 최하단에 위 문구를 추가해서 xml-rpc.php 파일에 대한 접근을 차단할 수 있다.

5. 이미지 무단 링크 차단

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} \.(gif|jpeg|jpg|png)$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://([^.]+\.)?사용자도메인\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteCond %{HTTP_REFERER} !search\.naver\.com [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
RewriteCond %{HTTP_REFERER} !feedburner\. [NC]
RewriteRule \.(gif|jpeg|jpg|png)$ 대체이미지주소 [NC,R,L]
</IfModule>

사이트에 이미지를 업로드한다면 HotLink Protection(이미지 무단 링크 차단) 설정을 해야 한다. 예를 들어 내 사이트에 업로드한 이미지의 URL 주소를 누군가가 가져가서 특정 웹페이지에 개시하면 이미지를 무단으로 게시한 페이지에 접속자가 늘수록 내 사이트의 트래픽이 증가해서 심한 경우 내 사이트의 로딩 속도가 저하되거나 접속이 차단되는 등 심각한 상황에 처할 수 있다. .htaccess 파일의 최상단에 위 코드를 추가하면, 누군가가 gif, jpeg, jpg, png 이미지 파일의 URL 주소를 가져가서 다른 곳에 개시하더라도 퍼간 이미지가 아닌 사용자가 별도로 지정한 대체 이미지가 출력된다.

https://blog.tommyzip.co.kr의 경우 사용자 도메인에 ‘도메인에 해당되는 tommyzip’만 입력하면 되고, 대체 이미지 주소는 https://blog.domain.co.kr/wp-content/uploads/example.jpg처럼 ‘대체 이미지의 URL 주소 전체’를 입력해야 한다. 대체 이미지 업로드 장소는 구글 드라이브를 권장한다. 워드프레스의 미디어에 대체 이미지를 업로드하면 서버 환경 및 사용자 환경에 따라서 대체 이미지 대신 엑박이 출력될 수 있으므로 구글 드라이브에 대체 이미지를 올려두고 사용하는 게 최선이다. 구글 드라이브에 접속해서 “인터넷의 모든 사용자가 찾고 볼 수 있는 공유 폴더”를 만들고 그 폴더 안에 대체 이미지를 넣고 대체 이미지에서 마우스 우클릭을 하고 “공유 가능한 링크 가져오기”를 클릭하고https://drive.google.com/open?id=의 뒷 부분의 ID 영역을 복사해서 http://drive.google.com/uc?export=view&id= 뒤에 붙여 넣은 주소를 대체 이미지 주소에 입력하면 된다. https://drive.google.com/open?id= 형식은 iFrame 형태로 이미지가 노출되기 때문에 http://drive.google.com/uc?export=view&id=로 URL 변경 작업을 해야 한다.

위 코드의 7열부터 11열까지는 해외 포털 사이트 검색 결과, 네이버 검색 결과, 구글, 야후, 피드버너에 대해서는 이미지 무단 링크를 허용한다는 의미이다. 예를 들어 구글 이미지 검색에 사이트의 이미지를 노출하면 접속자 유입에 큰 도움이 된다. 다음, 네이트 등 다른 포털 사이트에 대해서도 이미지 검색을 허용하려면 관련 코드를 찾아서 추가해야 한다. 그리고 12열의 gif|jpeg|jpg|png에 다른 확장자를 덧붙이면 해당 확장자도 URL 무단 첨부가 차단된다.

참고로 이미지 무단 링크 차단 코드를 적용할 때는 호스팅 서비스에서 제공하는 캐시 기능 및 워드프레스 플러그인에서 지원하는 캐시 기능을 모두 비활성화하고 작업 브라우저의 브라우저 캐시도 초기화한 후 위 코드를 추가하는 작업을 진행해야 한다. 사이트 그라운드의 호스팅 서비스를 사용한다면 반드시 SiteGround – Websites – SITE TOOLS – SPEED – CACHE에서 NGINX DIRECT DELIVERY를 비활성화해야 한다. 이 기능을 활성화하면 이미지 무단 링크 차단이 작동하지 않는다. 이외 Memcached 설정, SG Optimizer 캐시 설정도 비활성화해야 한다. 크롬 브라우저에서 작업을 진행했다면 익스플로러 등 다른 브라우저를 켜고 브라우저 캐시를 모두 삭제하고 Hotlink Protection Test 사이트에 접속해서 메모장에 적어둔 URL을 입력하고 대체 이미지가 정상적으로 출력되는지 확인해야 한다. 테스트 시 대체 이미지가 뜨지 않거나 엑박이 뜰 경우 호스팅 서버 캐시, 브라우저의 캐시, 워드프레스 캐시, 코드 오류, 코드 위치, 대체 이미지 공유 설정 중 어딘가에 문제가 있는 것이다. 이미지 무단 링크 차단과 관련된 자세한 사항은 Hotlink Code Reference에서 확인할 수 있다.

6. 브라우저 캐싱 설정

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType text/html "access plus 14 days"
ExpiresByType image/ico "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType application/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
</IfModule>

.htaccess 파일의 최하단에 위 코드를 추가하면 사이트에 최초 접속할 때 HTML, CSS, JavaScript, 이미지, 기타 멀티미디어 등 대부분의 정적인 파일을 사용자 컴퓨터에 임시저장해서 웹사이트 재 방문 시 사이트의 로딩 속도를 대폭 높일 수 있다. 사이트의 브라우저 캐싱 작동 여부를 확인하려면 구글에서 browser caching check를 검색하고 관련 사이트에 도메인을 입력하고 테스트를 진행하면 된다. 테스트 결과의 각 항목 우측에 푸른색으로 캐시 저장 기간이 노출되면 브라우저 캐싱이 정상적으로 작동 중이라는 뜻이다.

사이트 그라운드의 NGINX Direct Delivery 기능을 활성화해도 브라우저 캐시가 자동으로 작동하지만, 토미집은 “이미지 무단 링크 차단” 설정을 했기 때문에 사이트 그라운드의 사이트 툴에서 NGINX Direct Delivery 기능을 비활성화하고 .htaccess 파일 최하단에 위 코드를 추가해서 브라우저 캐싱을 활성화했다.

7. gzip 설정

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

.htaccess 파일의 최하단에 위 코드를 추가하면 사용자가 웹페이지를 요청할 때 서버에 저장된 정적인 페이지를 gzip로 압축해서 네트워크로 전송하므로 서버와 사용자 사이의 물리적인 거리가 멀수록 페이지 로딩 속도의 개선 효과가 크다. 사이트의 gzip 작동 여부를 확인하려면 구글에서 gzip check를 검색해서 도메인을 입력하고 테스트를 진행하면 된다. 사이트 그라운드의 호스팅 서비스는 기본적으로 qzip를 지원하므로 토미집은 위 코드를 추가하지 않았다.

워드프레스 wp-config.php 파일 수정하기

wp-config.php는 워드프레스 환경 설정 파일로 루트 폴더인 www 또는 public_html에 위치해서 워드프레스에 영향을 준다.

1. 리버전 개수 제한하기

define( 'WP_POST_REVISIONS', 3 );

워드프레스는 블로그에서 글을 작성하고 저장하거나 글을 수정할 때마다 리버전이 저장되며 글을 수정할 때 리버전 기능을 사용하면 현재 글과 이전 글을 직접 비교하면서 현재 글의 일부를 수정하거나 예전에 작성했떤 글 전체를 복원할 수 있다.

가입형 워드프레스는 리버전 저장 개수가 글 당 25개로 제한되어 있지만, 설치형 워드프레스는 리버전 저장 개수에 제한이 없다. 리버전은 사용자에 따라 분명 큰 도움이 되지만, 리버전이 너무 많이 생성되면 데이터베이스에 불필요한 공간을 차지해서 향후 성능에 부정적인 영향을 줄 수 있기 때문에 리버전의 개수를 제한해야 한다.

글 당 리버전 개수를 제한하려면 위 코드를 wp-config.php 파일의 내용 중 “ABSPATH” 항목 위에 작성해야 한다. 숫자 3은 글 당 리버전을 3개까지 제한한다는 뜻으로 숫자 -1은 기본값이고, 숫자 0은 리버전을 생성하지 말라는 뜻이다. 참고로 리버전 개수를 3개로 제한하는 코드를 추가할 때 이미 리버전 개수가 3개를 초과했다면 해당되는 리버전은 삭제되지 않기 때문에 별도의 플러그인을 설치해서 해당되는 리버전을 삭제해야 한다.

2. 테마 편집기 및 플러그인 편집기 비활성화

define( 'DISALLOW_FILE_EDIT', true );

워드프레스는 ‘테마 디자인 – 테마 편집기’ 또는 ‘플러그인 – 플러그인 편집기’에서 테마 및 플러그인의 코드를 사용자가 임의로 수정할 수 있는데 테마와 플러그인 코드를 직접 수정할 일이 없다면 wp-config.php 파일의 최하단에 위 문구를 추가해서 워드프레스 관리자 페이지에서 편집기 항목을 숨길 수 있다. 단 워드프레스 관리자 페이지를 통해서 테마의 코드를 수정하는 플러그인을 사용하면서 위 코드를 적용하면 해당 플러그인이 오작동 할 수 있다.

3. PHP 메모리 제한

define('WP_MEMORY_LIMIT', '256M');

다수의 플러그인을 설치하고 운영하다 보면 플러그인이 서버에 설정된 PHP Memory Limit 설정값보다 더 큰 메모리를 요구해서 “Fatal error: Allowed memory size of XXX bytes exhausted”와 같은 오류 문구가 나타날 수 있다. 이 문제를 해결하려면 가장 먼저 호스팅 서비스 고객센터에서 FAQ를 찾아보거나 문의 글을 남겨야 하는데, 현재 사이트의 PHP Memory Limit는 워드프레스 관리자 페이지 – 도구 – 사이트 상태 – 정보 – 서버 – PHP 메모리 제한 항목에서 확인할 수 있다. 호스팅 업체에서 메모리 용량을 어느 정도까지 늘려도 되는지에 대한 답변이 오면 권장사항에 맞춰 wp-config.php 파일 최하단에 위 문구를 추가해서 메모리 제한을 풀어줘야 한다. 256M은 메모리 한계를 256M까지 늘린다는 의미이다. 만약에 메모리 용량을 더 해제할 수 없는데 위 에러 문구가 뜬다면 사용 중인 플러그인의 기능을 일부 제한하거나 플러그인의 개수를 줄이거나 교체해야 한다.

참고로 PHP Memory Limit에 대한 기본 설정값은 호스팅 서비스 업체, 서비스 플랜에 따라 다른데 공유 호스팅의 경우 PHP Memory Limit을 늘릴 경우 서버에 부담이 커질 수 있어서 업체에 따라 PHP Memory Limit의 변경이 안 될 수도 있다.

워드프레스 테마 functions.php 파일 수정하기

○ functions.php 파일을 수정하는 방법

functions.php는 워드프레스 테마의 고유한 기능을 담고 있는 파일로 루트 폴더인 www 또는 public_html 폴더 – wp-content 폴더 – themes 폴더 – 사용자 테마 폴더 내에 위치한다. 모든 플러그인이 로딩된 후 활성화된 테마의 functions.php 파일이 로딩되며 플러그인처럼 작동해서 워드프레스 사이트에 기능을 추가한다.

워드프레스 테마가 업데이트되면 테마의 기능을 담고 있는 functions.php도 업데이트된 파일로 대체되므로 사용자가 임의로 functions.php를 수정한 경우 테마를 업데이트할 때마다 functions.php 파일에 기존에 사용한 코드를 새로 추가해야 한다. 단 워드프레스 테마를 업데이트하고 나서 functions.php 파일을 수정하는 사이에 사이트 접속자가 급증할 경우 사용자에게 온전치 못한 사이트응 보여주게 될 수 있으므로 일반적으로 functions.php를 직접 수정하지 않고 코드 스니펫 플러그인을 설치해서 테마의 PHP 코드를 추가하거나 ‘자식 테마’를 설치해서 ‘자식 테마’의 functions.php를 수정한다.

1. 코드 스니펫 플러그인

플러그인을 설치하고 워드프레스에서 제공하는 add_filter와 add_action을 사용해서 functinos.php 파일을 직접 수정하지 않고 기능을 변경하거나 추가할 수 있다. 플러그인은 테마에 영향을 받지 않기 때문에 테마를 업데이트해도 사용자가 임의로 추가한 기능이 유지된다. 사용자가 functinos.php 파일의 일부 기능 및 CSS 파일 정도를 수정하는 수준이라면 각각의 플러그인을 사용하는 게 가장 간편한 방법이지만, functinos.php 파일 및 다른 PHP 파일의 코드를 직접 수정해야 한다면 ‘자식 테마’를 사용해야 한다.

2. 자식 테마 만들기

‘자식 테마’는 ‘부모 테마’의 주요 기능을 상속한 테마로 ‘자식 테마’를 설치하면 ‘부모 테마’에서 수정이 필요한 파일을 ‘자식 테마’에 생성한 후 ‘자식 테마’ 내에서 수정하고 이용할 수 있다. 예를 들어 자식 테마를 생성하고 자식 테마의 functions.php 파일에 새로운 코드를 추가한 경우 브라우저가 코드를 읽을 때 부모 테마의 functions.php를 읽고 자식 테마의 functions.php를 읽기 때문에 최종적으로 자식 테마에서 수정/추가한 코드가 적용된다. 테마가 업데이트될 때는 부모 테마의 파일만 업데이트되기 때문에 자식 테마를 통해 추가한 기능은 정상적으로 유지된다.

자식 테마를 만들 때는 현재 사용 중인 테마의 공식 사이트에서 자식 테마에 대한 정보를 검색해보고 각 테마가 권장하는 방법대로 자식 테마를 만들어야 한다. 만약에 사용하는 테마의 공식 사이트에 자식 테마를 만드는 방법에 대한 정보가 없다면, 설치형 워드프레스 공식 사이트의 wordpress.org 자식 테마 만들기를 보고 자식 테마를 만들어야 한다.

토미집이 사용하는 GeneratePress 테마는 공식 사이트에서 자식 테마 압축 파일을 제공한다. 압축 파일을 다운로드하고 워드프레스 관리자 페이지 – 테마 디자인 – 테마 – Add New – 테마 업로드를 통해 압축 파일을 업로드하고 자식 테마를 활성화하면 즉시 사용할 수 있다. GeneratePress 테마와 GeneratePress 자식 테마는 대부분의 기능을 공유하지만 사이트 로고, 메뉴, 레이아웃이 다르게 보일 수 있다. 이 문제를 해결 하려면 테마 디자인 – 메뉴에 접속해서 각 메뉴 세부설정을 부모 테마와 동일하게 변경해야 하고, 테마 디자인 – GeneratePress – All Options에 접속해서 “사이트 아이덴티티” 항목의 로고를 다시 지정하고 “추가 CSS” 항목에 부모 테그의 “추가 CSS”를 그대로 복사해서 붙여 넣어야 한다.

3. 코드 스니펫 플러그인과 자식 테마 만들기 비교

코드 스니펫 플러그인을 사용하면 워드프레스 관리자 페이지에서 코드를 즉시 추가, 변경, 삭제할 수 있고 각 스니펫을 용도별로 생성해둔 경우 상황에 따라 특정 스니펫을 비활성화할 수도 있고, 자식 테마를 사용하면 플러그인으로 변경, 추가할 수 없는 코드를 직접 수정할 수 있고 사이트 관리자가 여러 명일 경우 플러그인을 잘못 건드려서 발생할 수 있는 사고를 미연에 방지할 수 있다.

코드 스니펫 플러그인과 자식 테마 모두 같은 작업을 수행하기 때문에 사이트 성능 면에서는 차이가 없다. 토미집은 자식 테마를 사용하는 초기에는 Code Snippets 플러그인 및 Simple Custom CSS and JS 플러그인을 함께 사용해서 사이트를 제작하고, 사이트의 기본 틀을 완성하면 Code Snippets 플러그인과 Simple Custom CSS and JS 플러그인에 추가한 코드를 자식 테마의 functions.php와 style.css로 옮기고 플러그인들을 삭제할 예정이다.

○ functions.php 파일 수정하기

1. 복사한 텍스트에 블로그 링크 주소 붙이기

function add_copyright_text() {
    if (is_single()) { ?>
<script type='text/javascript'>
function addLink() {
    if (
window.getSelection().containsNode(
document.getElementsByClassName('entry-content')[0], true)) {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var oldselection = selection
    var pagelink = "<br /><br /> [촬영 사진/제작 이미지 무단도용 및 불펌 금지] [퍼가기 링크를 이용하세요] <?php the_title(); ?> <a href='<?php echo wp_get_shortlink(get_the_ID()); ?>'><?php echo wp_get_shortlink(get_the_ID()); ?></a>";
    var copy_text = selection + pagelink;
    var new_div = document.createElement('div');
    new_div.style.left='-99999px';
    new_div.style.position='absolute';
    body_element.appendChild(new_div );
    new_div.innerHTML = copy_text ;
    selection.selectAllChildren(new_div );
    window.setTimeout(function() {
        body_element.removeChild(new_div );
    },0);
}
}
document.oncopy = addLink;
</script>
<?php
}
}
add_action( 'wp_head', 'add_copyright_text');

코드 스니펫 플러그인 또는 functions.php 파일의 최하단에 위 코드를 추가하면, 블로그 글을 복사해서 붙여 넣을 때마다 사용자가 임의로 지정한 문구와 해당 글 링크 주소가 첨부된다. 자세한 내용은 WPBeginner 사이트에서 확인할 수 있다. 위 코드에서 “[촬영 사진/제작 이미지 무단도용 및 불펌 금지] [퍼가기 링크를 이용하세요]” 부분만 원하는 문구로 교체하면 된다.

2. Breadcrumbs 노출하기

add_action( 'generate_after_entry_title', function() {
	if ( is_single() ) : 
		if ( function_exists('rank_math_the_breadcrumbs') ) {
			rank_math_the_breadcrumbs();
		}
	endif;
} );

Breadcrumbs은 사이트에 접속했을 때 “토미집 > 정보 > 토미집 워드프레스 블로그 초기 설정”처럼 사이트 상단에 노출되는 카테고리 목록이다. GeneratePress 테마를 사용하고 Rank Math SEO 플러그인의 Breadcrumbs 기능을 활성화한 경우 코드 스니펫 플러그인 또는 functions.php 파일의 최하단에 위 코드를 추가해서 블로그 포스트의 글 제목 아래에 Breadcrumbs를 노출할 수 있다.

3. 워드프레스 이미지 사이즈 최적화 끄기

add_filter( 'big_image_size_threshold', '__return_false' );

코드 스니펫 플러그인 또는 functions.php 파일의 최하단에 위 코드를 추가하면 워드프레스 미디어에 이미지를 업로드할 때 이미지 사이즈 최적화가 작동하지 않는다. 업로드할 이미지 해상도가 2560px를 초과하면 위 코드를 적용해서 이미지 사이즈 최적화 기능을 꺼야 한다.

4. 포스트 최종 업데이트 날짜 표시하기

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    $updated_time = get_the_modified_time( 'U' );
    $published_time = get_the_time( 'U' ) + 86400;
    if ( $updated_time > $published_time ) {
        $time_string = '최종 업데이트: <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
    }
    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
    );
    return sprintf( '<span class="posted-on">%s</span> ',
        $time_string
    );
}, 10, 2 );

코드 스니펫 플러그인 또는 functions.php 파일의 최하단에 위 코드를 추가하면 워드프레스 포스트 게시 날짜가 포스트 수정 날짜로 대체된다. 구글은 포스트의 날짜 정보가 사용자에게 유용하다고 판단되면 검색결과에 날짜 정보를 표시한다. 포스트를 주기적으로 업데이트하는 경우 최종 업데이트 날짜를 표시하는 게 좋다. 그리고 구글 알고리즘이 날짜를 보다 쉽게 인식할 수 있도록 포스트의 게시 날짜와 최종 업데이트 날짜 둘 중 하나만 표시하고 포스트 내 다른 날짜 관련 내용은 작성하지 않는 게 좋다.

5. RSS 피드에 썸네일 이미지 추가하기

function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<div>' . get_the_post_thumbnail($post->ID) .
'</div>' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

코드 스니펫 플러그인 또는 functions.php 파일의 최하단에 위 코드를 추가하면, 워드프레스 설정 – 읽기에서 피드에서 각 글에 포함할 내용을 ‘요약글’로 선택하더라도 썸네일 이미지를 노출할 수 있다.

출처

• 스팸 댓글 차단 목록
• 구글 SEO 가이드
• Perishable Press Firewall
• SiteGround Server Related Questions
• wordpress.org developer resources
• WPBeginner functions.php tip
• Hotlink Code Reference
• Hotlink Protection Test

관련 글

• 워드프레스 블로그 개설 준비
• 워드프레스 블로그 테마 및 플러그인