워드프레스 최적화 – 플러그인 WP Super Cache과 Autoptimize로 속도 개선

워드프레스(WordPress)를 운영한다는 것은 최적화와 속도의 싸움인 것 같습니다. 개인적으로 플러그인에 의존하는 것을 좋아하지는 않습니다. 하지만 플러그인을 설치함으로써 얻는 게 더 많다면 기꺼이 설치할 의향이 있습니다.

워드프레스의 속도가 확실하게 빨라지는 최적화 플러그인 WP Super Cache와 Autoptimize를 설치 및 설정해보겠습니다.


WP Super Cache

플러그인 추가하기에서 WP Super Cache를 검색 후 설치 및 활성화를 해주세요.

 

플러그인 리스트에서 WP Super Cache 아래의 Settings를 클릭하여 설정 화면으로 이동합니다. 좌측 메뉴의 설정 > WP Super Cache를 클릭하셔도 됩니다.

 

Caching에서 Caching On (Recommended)를 선택하시고 아래의 [Update Status]를 클릭해서 상태를 업데이트해 주세요. 그리고 Advanced 탭으로 이동합니다.

Advanced 탭에서 많은 항목을 볼 수 있는데요. 뒤에 (Recommended)가 붙어 있는 항목에 모두 체크를 해줍니다. 저는 아래 리스트에 모두 체크했습니다.

Disable caching for logged in visitors. (Recommended)
Compress pages so they’re served more quickly to visitors. (Recommended)
Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated. (Recommended)
304 Not Modified browser caching. Indicate when a page has not been modified since it was last requested. (Recommended)
Extra homepage checks. (Very occasionally stops homepage caching) (Recommended)

 

그리고 제일 아래에 [Update Status] 버튼을 클릭해서 상태를 업데이트해 줍니다. WP Super Cache 설정은 간단하게 끝났습니다.

 


Autoptimize

플러그인 추가하기에서 Autoptimize를 검색 후 설치 및 활성화를 해주세요.

 

플러그인 리스트에서 WP Super Cache 아래의 설정을 클릭하여 설정 화면으로 이동합니다. 좌측 메뉴의 설정 > Autoptimize를 클릭하셔도 됩니다.

 

JS, CSS & HTML 탭에서 JavaScript Options, CSS Options, HTML Options를 볼 수 있는데요. 각각 Options 아래 첫 항목에 있는 Optimize JavaScript Code? / Optimize CSS Code? / Optimize HTML Code? 를 체크해 줍니다.

 

그리고 [Save Changes and Empty Cache]를 클릭합니다.

 

Autoptimize 플러그인을 설치하고 나면 관리자로 로그인 시 상단에서 Autoptimize 메뉴가 추가된 것을 볼 수 있습니다. 마우스 커서 오버 시 위 사진과 같이 캐시 정보를 확인할 수 있습니다. Delete Cache를 클릭해서 쌓여있는 캐시를 삭제할 수도 있습니다.

 


워드프레스 속도 측정

위 두 가지 플러그인 설정이 모두 끝났으니 실제 속도가 얼마나 빨라졌는지 확인해 보겠습니다. 먼저 구글 페이지 스피드 인사이트(PageSpeed Insights)에서 측정했습니다.

플러그인 적용 전 속도 측정 화면입니다. 모바일 36점, 데스크톱 73점입니다.

 

플러그인 적용 후 속도 측정 화면입니다. 모바일 58점, 데스크톱 95점입니다. 엄청나게 좋아진 것을 수치로 확인할 수 있습니다.

 

GTmetrix에서 측정해보았습니다.

플러그인 적용 전 모습입니다. 페이지 스피드 스코어가 C로 79%입니다. 모든 페이지를 불러오는 데 걸린 시간은 4.2초입니다.

 

플러그인 적용 후 모습입니다. B로 80%입니다. 1% 올랐습니다. 페이지 로딩 시간은 3.3초로 0.9초가 빨라졌습니다. 페이지 사이즈도 줄어든 모습을 볼 수 있습니다.

 

Pingdom에서 측정한 결과입니다.

 

플러그인 적용 전입니다. 71점에 1.51초입니다.

 

플러그인 적용 후입니다. 78점에 0.94초입니다. 리퀘스트 값이 73에서 46까지 줄어든 모습을 볼 수 있습니다.

워드프레스 .htaccess 최적화

시놀로지 나스에서 워드프레스를 구동하면서 최적화에 대한 검색은 102번 정도 한 것 같습니다. 워드프레스를 최적화하는 방법에는 여러 가지가 있겠지만, 아주 중요한 파일인 .htaccess 에 몇 가지 코드를 추가하여 최적화 해보겠습니다.

이유는 잘 모르겠지만 나스에서 패키지로 설치한 워드프레스는 주기적으로 .htaccess 파일이 변조되면서 500 에러를 토해내는 현상을 볼 수 있었는데요. 아직 이유는 찾지 못하고 있습니다. 가끔 500 에러 뜨면 반사적으로 DSM에 접속해서 .htaccess 파일을 원래대로 돌려놓습니다. 그때 기본적으로 설정되어 있던 .htaccess 내용으로 치환하기 때문에 오늘 정리 내용은 제가 꾸준히 보려고 작성하는 것입니다. 참고만 하세요.

 


텍스트, HTML, 자바스크립트, CSS, XML 등을 압축

# compress text, html, javascript, css, xml:
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
AddType x-font/otf .otf AddType x-font/ttf .ttf
AddType x-font/eot .eot AddType x-font/woff .woff
AddType image/x-icon .ico

 


이미지, 자바스크립트, CSS 등에 브라우저 캐시 적용

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/xhtml+xml "access 1 year"
</ifModule>
 
# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

 


HTML, 자바스크립트 등을 GZIP으로 압축

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</ifmodule>
# END GZIP

 


특정 폴더에 index.php가 없는 경우 전체 디렉토리 목록화 방지

# directory browsing
Options All -Indexes

 


워드프레스 주요 파일 수정 금지

※ 참고로 이 설정은 나스에서 패키지로 설치한 워프의 경우 500 에러가 출몰하여 설정하지 않았습니다.

# WPhtC: Protect WP-config.php
<files wp-config.php>
order allow,deny
deny from all
</files>
 
# WPhtC: Protect .htaccess file
<files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
</files>

 

워드프레스 수동 업데이트

워드프레스의 알림 창에 업데이트 내용이 뜨지 않을 때 수동으로 워드프레스를 업데이트 할 수 있는 방법을 정리했습니다.


사건의 발단

이 블로그는 시놀로지 나스(Synology NAS)에 설치형 워드프레스(WordPress)를 설치하여 운영하는 블로그입니다.  워드프레스의 경우 업데이트가 자주 있는 편인데, 제가 이 블로그를 개설한 뒤 얼마 지나지 않아서 5.x 버전이 출시되었습니다. 워드프레스 5에서는 구텐베르크라는 편집기를 사용하는데, 이게 너무 적응이 안 되더라고요. 그래서 다운그레이드를 진행했고, 제가 운영하는 모든 블로그는 4.9.9 버전으로 사용 중이었습니다.

하지만 얼마 전부터 Yoast SEO 플러그인에서 아래와 같은 문제가 있다는 알림이 뜨기 시작했습니다.

번역(by. 구글 번역기 형님)

귀하의 사이트의 검색 엔진 최적화에 영향을 미치는 다음과 같은 문제점을 발견했습니다.

WordPress를 최신 버전으로 업그레이드하십시오.
최근 WordPress 버전을 사용하지 않으므로 곧 문제가 발생할 수 있습니다. Yoast (보안 및 안정성의 이유로)는 WordPress의 현재 및 이전 버전 만 지원합니다. WordPress의 다음 버전이 나오면 WordPress 5.2 및 5.3을 지원할 것입니다. 즉, WordPress를 업데이트할 때까지 Yoast SEO에 대한 업데이트를 받지 않으므로 곧 최신 WordPress 버전으로 업그레이드하십시오!

새로운 구텐베르크 편집기로 인해 5.0 이상으로 업데이트하는 것을 보류했다면 클래식 편집기 플러그인을 설치하십시오. 그것은 당신에게 당신이 지금 가지고 있는 것과 같은 편집 경험을 줄 뿐만 아니라 새로운 버전의 WordPress와 Yoast SEO의 보안을 제공할 것입니다.

우리가 이전 버전을 지원하지 않는 이유에 대한 자세한 내용은이 게시물을 읽으십시오.

 

다른 알림들은 무시할 수 있는 정도였고, 어떻게 해결이나 극복이 가능한 문제였지만 이번 알림은 상당히 신경이 쓰이기 시작했습니다. 알림에 있는 내용 그대로 ‘구텐베르크 편집기로 인해 5.0 이상으로 업데이트 하는 것을 보류’하고 있던게 사실이기 때문에 뜨끔하기도 했죠. 사실 Yoast SEO의 말이 맞습니다. 클래식 편집기를 설치하면 간단하게 해결되는 문제였거든요. 그래서 ‘그래, 내가 졌다.’라고 생각하며 워드프레스를 업데이트하려고 했습니다. 근데 뭔가 꼬였는지, ‘알림판 > 업데이트’에서 버전 업데이트하기 등의 버튼이 보이지가 않습니다. 수동으로 업데이트를 해야 할 타이밍인 것 같습니다.

 


워드프레스 수동 업데이트

워드프레스 수동 업데이트의 순서를 정리해 봅니다.

  1. 운영 중인 워드프레스의 플러그인을 모두 비활성화합니다.
  2. 운영 중인 워드프레스 설치 폴더 중 wp-admin과 wp-includes 폴더를 삭제합니다.
  3. 새로운 버전의 워드프레스 폴더 중 wp-admin과 wp-includes 폴더를 업로드합니다.
  4. 새로운 버전의 워드프레스 폴더 중 wp-content 폴더를 덮어쓰기로 업로드합니다. wp-content 폴더는 절대 삭제하시면 안 됩니다!!

통상적으로 검색해 보면 위와 같이 나옵니다. 실제로 이 정도만 해도 업데이트가 되는 것 같습니다. 이렇게 한 뒤, 관리자로 접속을 하면 아래와 같은 화면을 볼 수 있습니다.

[워드프레스 데이터베이스 업데이트] 버튼을 눌러서 업데이트해 주면 워드프레스 버전 업이 완료됩니다.

 

…… 뭔가 잘못된 것 같습니다. 새로 고침 후 다시 시도해 봐도 계속, 이 화면이 나옵니다.

 

혹시 몰라서 새로운 버전의 워드프레스의 루트에 있는 파일을 모두 덮어쓰기 업로드를 해봤습니다. (wp-config-sample.php는 빼고 올렸습니다)

 

 

그랬더니 정상적으로 업데이트가 완료되었습니다.

 

관리자 페이지로 접근하자마자 고전 편집기를 설치했습니다.

 


워드프레스 버전 확인

간단하게 내 블로그 페이지에서 ‘마우스 오른쪽 클릭 > 소스보기’로 들어가셔서 검색해 보시면 위와 같은 부분을 확인할 수 있습니다. 제 블로그는 4.9.9버전에서 5.2.1버전으로 업데이트가 완료되었습니다.

워드프레스 코드 문법 하이라이트 플러그인 – Crayon Syntax Highlighter

※ 해당 플러그인은 워드프레스 버전 5.1.x까지만 지원되는 것을 확인했습니다. 이후 버전에서는 Prismatic을 추천 드립니다.

 

워드프레스에 글 작성을 하다 보면, HTML 문법이나 소스코드 문법을 작성해야 할 때가 있습니다. <pre>나 인용의 방법으로 코드를 표시해도 되지만 색상 구분이 안 되어서 보기 어렵습니다. 저도 플러그인 설치 없이 표현할 방법이 없는지 고민을 많이 하다가 결국 플러그인을 설치하게 되었습니다. 제가 설치한 플러그인은 Crayon Syntax Highlighter입니다.

 

 


워드프레스 코드 하이라이트 플러그인

플러그인에서 ‘Crayon Syntax Highlighter’를 검색하면 찾을 수 있습니다. 최근 업데이트가 3년 전에 되었지만, 활성 설치 수가 가장 많은 플러그인입니다. 최근까지도 활발히 업데이트되는 플러그인도 있지만, 활성 설치가 가장 많은 플러그인을 선택했습니다.

 

Crayon Syntax Highlighter 플러그인을 설치하면 편집기에서 위와 같은 코드 괄호 아이콘이 생깁니다. TinyMCE Advanced 플러그인을 사용하시는 분들은 비슷한 아이콘이 있으니 헷갈리지 않길 바랍니다.

 

편집기에서 아이콘을 클릭하면 위와 같은 팝업이 보이며, 여기에서 코드를 입력하시면 됩니다. 테마, 글꼴, 크기, 툴바 등의 설정을 할 수 있습니다.

 

편집기에서 글 작성 시 Crayon Syntax Highlighter를 통해서 작성한 모습입니다. <pre>를 사용한 것과 비슷하게 보입니다.

 

미리 보기나 글 공개 후 확인해 보시면 위와 같이 코드가 이쁘게 들어가 있는 것을 볼 수 있습니다. 이제 속이 좀 시원하네요. 기존에 <pre>로 작성된 코드는 &lt;, &gt; 같이 깨져있을 텐데요. 글 편집 후 바로 발행하시면 정상적으로 수정되는 것을 확인할 수 있습니다.

 

Crayon Syntax Highlighter의 자세한 성정은 워드프레스 관리자의 ‘설정 > Crayon’에서 설정할 수 있습니다.

워드프레스 초기화(리셋)하기 – Reset WP

워드프레스 초기화(리셋)하기입니다. 워드프레스(wordpress)로 사이트를 운영하다 보면 테마로 인해서 코드가 꼬이거나, 특히 플러그인을 이것저것 많이 설치하다 보면 뭔가 기능이 제대로 작동하지 않고 사이트가 정상적으로 뜨지 않을 때가 있습니다. 이 때 워드프레스 관련 파일들과 DB를 삭제하고 다시 설치하지 않고, 워드프레스를 초기 상태로 되돌리는 방법입니다. Reset WP 플러그인을 통해서 초기화하는 방법을 정리했습니다.

 

플러그인 추가에서 ‘reset wp‘ 로 검색하면 위와 같은 플러그인을 볼 수 있습니다. [설치하기]를 눌러서 설치를 해 줍니다. 설치가 완료 된 후에는 [활성화]를 해 주세요.

 

플러그인을 활성화 해 주면 자동으로 플러그인 리스트 페이지로 이동하게 되는데, 위와 같은 빨간색의 문구가 상단에 생긴 것을 확인할 수 있습니다. 여기서 [Upgrade & swich to WP Reset now]를 눌러주시거나

 

플러그인 리스트에서 Reset WP 바로 아래에 보이는 ‘Reset WordPress‘를 누르시거나

도구 > Reset WP‘ 를 눌러서 (모두 같은 페이지로 이동됩니다.) Reset WP 설정 페이지로 들어갑니다.

 

Reset WP의 이런 화면을 볼 수 있는데요. 하단에 보이는 [Switch to WP Reset] 버튼을 클릭합니다. 테마나 플러그인 업데이트 할 때처럼 뭔가 설치가 되는 화면이 잠깐 나왔다가 사라지면서 아래와 같은 화면으로 바뀝니다.

 

여기서 아래 Input Box 안에 ‘reset’ 을 입력하고 [Reset WordPress] 버튼을 눌러주면 리셋이 진행됩니다. Reset을 누르기 전에 초기화 작업을 되돌릴 수 없으니 다시 한 번 확인하고 초기화를 진행하시기 바랍니다.

위에 설명되어 있는 장문의 글을 보면 삭제되는 것과 삭제되지 않는 것에 대한 설명이 되어 있습니다.

삭제되는 항목

  • 모든 게시물, 페이지, 사용자 정의 게시물 유형, 설명, 미디어 항목, 사용자
  • 모든 기본 WP 데이터베이스 테이블
  • 이 설치에서 기본 테이블과 동일한 접두사가있는 모든 사용자 지정 데이터베이스 테이블

삭제되지 않는 항목

  • 미디어 파일 – wp-uploads 폴더에 남아 있지만 미디어 아래에 더 이상 표시되지 않습니다.
  • 건드리지 않는 항목: 플러그인, 테마, 업로드 – 모든 것이 유지됩니다.
  • 사이트 제목, WordPress 주소, 사이트 주소, 사이트 언어 및 검색 엔진 공개 설정
  • 로그인 한 사용자 계정정보가 현재 비밀번호로 복원됩니다.

 

워드프레스 편집기에서 p태그가 보이지 않을 때

워드프레스 편집기에서 <p> 태그가 보이지 않을 때가 있습니다. 이제 막 워드프레스를 처음 설치했을 경우 기존에 사용하던 편집기 생각에 html 편집하려고 텍스트 탭으로 들어갔는데, <p> 태그가 보이지 않을 경우에 웬만한 워드프레스 유저라면 기본적으로 설치하는 플러그인 TinyMCE Advanced 를 통해서 <p> 태그를 보이게 할 수 있는 방법입니다.

 


워드프레스 편집기 텍스트 모드에서 <p> 태그 보이게 하는 방법

TinyMCE Advanced 를 설치하고 나서 별다른 설정 없이 워드프레스 편집기의 텍스트 탭으로 들어가서 확인해 보면 기본적으로 있어야 할 <p>, </p> 태그가 보이지 않습니다. 문단마다 당연히 붙어 있는 <p> 태그가 생략된 것이니 간단하게 설정을 해 주시면 볼 수 있습니다.

 

워드프레스 관리자 좌측 메뉴에서 ‘설정 > TinyMCE Advanced‘ 로 들어갑니다.

 

TinyMCE Advanced 설정 화면에서 스크롤을 밑으로 쭉 내리시면 위와 같이 ‘Keep paragraph tags‘ 옵션을 볼 수 있습니다. 기본으로 체크가 해제되어 있는데, 여기에 체크를 해 줍니다.

 

그리고 다시 워드프레스 편집기의 텍스트 모드로 들어가서 확인해 보시면 <p>와 </p> 태그가 보이는 것을 확인할 수 있습니다.

 

워드프레스에서 플래시 파일(.swf) 재생 방법

워드프레스에서 플래시 파일(.swf) 재생 방법 검색을 해 봤는데, 최근에 올라온 글은 찾을 수 없었습니다. 오래된 포스팅만 뒤적거렸는데, 워드프레스에서 플래시 파일 재생 방법에 대해서 정확하게 나와 있는 곳이 없었습니다. 워드프레스에서 플래시 파일을 재생하기 위해서 플러그인을 설치하고, 복잡한 소스 코드를 넣고.. 다 따라 해 봤지만, 되는 게 없어서 아주 예전 기억을 더듬어서 간단하게 해결했습니다.


워드프레스에서 플래시 파일(swf) 재생 방법

이거 너무 간단해서 스크린샷이나 이미지를 첨부할 것도 없는데, 그래도 간단하게 소스 이미지 첨부합니다. 동영상 플레이할 때처럼 ‘embed‘ 를 사용하여 간단하게 해결했습니다. 내 기억 속에 있었음에도 멀리 돌아왔네요.

<embed src="my flash" width="550" height="400">

아주 간단하죠? ‘myflash’에는 플래시 파일이 있는 경로를 넣어주시면 됩니다. 물론 플래시 파일은 어딘가에 업로드되어 있어야겠죠? 이 방법으로 플래시 게임이든 플래시 동영상이든 재생할 수 있습니다. 워드프레스에서 플래시 파일 재생 방법, 어렵게 돌아가지 마세요. 쉽게 생각하세요.

워드프레스 robots.txt 만들기 및 최적화

워드프레스 robots.txt 만들기 및 최적화 작업을 이제야 했습니다. 홈페이지 제작에 눈을 뜨고 처음 배웠던 것이 포털 사이트에서 검색 노출이 되기 위해서는 ‘robots.txt’를 작성해서 함께 업로드를 해 놓아야 검색 로봇이 내 홈페이지를 알아보고 내용을 수집해 간다라는 것을 아주 오래전에 배웠음에도 불구하고 현재 워드프레스를 운영하면서 가장 기본 중의 기본을 잊고 robots.txt 를 만들지를 않았다는 것을 깨달았습니다. 워드프레스에서는 robots.txt 만들기를 하지 않아도 된다는 얘기도 있지만, 그래도 웹에 있어서 아주 기본적인 부분이기 때문에 robots.txt를 만들어서 업로드 해 놓는 게 좋을 것 같습니다. 작업도 아주 간단하고요.

 


네이버 웹마스터도구에서 robots.txt 확인

제가 robots.txt를 간과하게 된 이유가 여기에 있습니다. 네이버 웹마스터도구에서 검증 > robots.txt에서 [수집요청]을 눌렀을 때 위와 같이 뭔가 나왔습니다.

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

이렇게 나오는데요. ‘User-agent’는 어떤 사이트의 검색 로봇이 접근할 수 있게 허용하느냐를 설정하는 부분인데요. *로 설정 시 모든 검색 로봇이 접근할 수 있게 하는 것입니다. ‘Disallow’는 수집을 원하지 않는 경로를 작성해 주는 부분입니다. wp-admin의 경우 관리자 관련 폴더라서 워드프레스를 사용할 경우 설정 해 주시는게 좋고요. 근데 문제는 ‘Allow’ 부분입니다. 검색 수집을 원하는 폴더를 지정해 주는 곳인데, 이상하게 설정이 되어 있습니다. ‘/wp-admin/admin-ajax.php’ 가 왜 설정되어 있는지 모르겠습니다. 

 

뭐지? 라고 생각하면서 해당 사이트의 root 폴더를 살펴 봤습니다. 분명 robots.txt 파일이 보이지 않습니다. 워드프레스의 경우에 SEO 관련 플러그인을 설치했을 경우에 robots.txt 부분을 자동으로 세팅한다고 하는데, 해당 워드프레스의 경우에 SEO 관련 플러그인 설치가 되어 있지 않았습니다. 제 예상이 맞는다면 WP Statistics 플러그인에서 자동으로 생성한 것 같은데.. 제대로 된 robots.txt 를 만들어야겠습니다.

 


robots.txt 만들기 및 최적화

robots.txt 를 만드는 방법은 간단합니다. 메모장을 여시고, 위와 같이 입력해 줍니다. 아래 텍스트를 복사하세요.

Allow: /wp-content/uploads/
Disallow: /wp-admin/
Disallow: /readme.html

Sitemap: https://워드프레스 주소/sitemap.xml

검색을 좀 해 봤더니 워드프레스는 이렇게 robots.txt 를 설정하더라고요. Disallow는 wp-admin 과 readme.html 을 제외하는 건 이해하겠는데, Allow 에서 /가 아닌 ‘/wp-content/uploads/’ 로 설정하는 이유는 저도 정확하게는 모르겠습니다. 다들 이렇게 하니까 저도 이렇게 세팅해 봅니다. 그리고 제일 아래쪽에는 Sitemap 경로를 적어 줍니다. 사이트맵 경로는 위와 다를 수 있습니다. 본인 워드프레스 사이트맵 경로로 작성해 주세요.

 

그리고 해당 워드프레스 root 폴더에 robot.txt 파일을 업로드 해 주시면 됩니다. 간단하쥬? robots.txt 를 생성해주는 플러그인이 많지만, 플러그인이 많을수록 워드프레스는 무거워지니까 간단하게 메모장으로 작성하도록 합시다.

 

그리고 다시 네이버 웹마스터도구로 가서 [수집요청]을 눌러보니 제가 작성한 대로 로봇룰이 적용된 것을 확인할 수 있습니다. 제가 워드프레스로 글 작성 후 네이버 노출을 위해서 웹마스터도구에서 일일이 수집요청을 하고 있었는데, 로봇룰이 제대로 안 되어 있어서 그런가 싶은 생각도 듭니다. 로봇룰을 제대로 잡아 놨으니, 네이버에서 자동으로 수집해 가는지는 좀 더 지켜볼 일입니다.

시놀로지 나스(NAS)에서 워드프레스 수동으로 설치: 완결판

시놀로지 나스(NAS)에서 워드프레스 앱이 있긴합니다. 클릭 몇 번으로 설치가 아주 간편하게 이루어집니다. 하지만 나스에서 워드프레스를 2개 이상 운영하고 싶을 때는? 수동으로 설치를 해야 합니다. 제가 최근에 워드프레스로 구성된 홈페이지 몇 개를 운영을 하려고 나스에 수동 설치를 진행했는데, 호스팅을 받아서 할 때와는 다른 점이 몇 가지 있어서 며칠동안 삽질을 했습니다.

여기저기 블로그, 사이트 다 뒤져봐도 이게 한방에 깔끔하게 정리되어 있는 곳이 없더라고요. 설정 몇 개 빼 놓고 너무도 당연히 잘 되는 것처럼 설명을 해 놓아서 더 힘들었습니다. 화도 많이 났고요. 제가 시놀로지 나스에 워드프레스 수동으로 설치하는 방법 총 정리해서 완결판으로 올립니다. 아무쪼록 많은 분께 도움이 되었으면 하네요.

도메인이 있다는 가정하에 그 도메인과 연결까지 해서 설치하는 방법을 알려드립니다.

나스에 워드프레스 설치 과정을 진행하기 전에 ‘시놀로지 나스 가상 호스트 설정과 인증서(Let’s Encrypt) 적용‘을 먼저 보고 오시면 도움이 됩니다.


데이터베이스(DB) 생성

phpMyAdmin으로 가셔서 새 데이터베이스를 만들어 줍니다. 데이터베이스 TAB에서 새 데이터베이스 만들기 아래 ‘데이터베이스명’ 란에 생성하실 데이터베이스 이름을 입력하시고 [만들기]를 클릭 해 주면 DB가 생성됩니다. 간단하쥬?

 


도메인 DNS 레코드 추가

본인이 구매한 도메인 사이트에 가시면 DNS 레코드를 추가할 수 있는 기능을 제공합니다. 저는 가비아 사용중이고요. 위와같이 타입에는 CNAME로 해서 호스트 www와 @ 각각 DNS 레코드를 추가 해 줍니다. 값에는 본인의 나스 주소를 적으시면 됩니다. TTL은 아무거나 해도 크게 상관없는 것 같아요. 혹시 서브도메인을 따로 지정하고 싶으시면 따로 추가 해 주시면 됩니다. aaa.도메인.com 이런식으로 지정이 가능합니다.

이제 사전 준비는 끝났습니다. 워드프레스를 다운로드 받고 본격 진행 해 보도록 하겠습니다.


 

워드프레스 다운로드

다운로드

위 링크를 클릭하시고, 워드프레스를 다운받아 주세요. 압축을 풀고, 나스의 WEB 폴더로 넣어 주십니다. 여기까진 문제없습니다. 아주 쉽거든요.


 

워드프레스 폴더 권한

첫 번째로 제가 삽질했던 부분입니다. WEB 폴더로 업로드 한 wordpress 폴더에 권한을 수정해줘야 정상적으로 설치가 됩니다. 이걸 하지 않으면 설치부터 안됩니다.

wordpress 폴더를 우클릭 하신 후 ‘속성’으로 들어갑니다. ‘일반TAB’에서 소유자를 아이콘에 2명의 사람이 있는 http를 선택하신 후, ‘이 폴더, 하위 폴더 및 파일에 적용’에 체크 한 후 [확인]을 클릭합니다. 소유자는 수정이 되었고요.

 

다시 한 번 wordpress 폴더를 우클릭 하신 후 ‘속성’으로 들어갑니다. 이제 ‘권한 TAB’으로 이동하여 위 이미지처럼 되게 해 주세요. 나머지는 모두 삭제 하시면 됩니다. 그리고 하단에 ‘이 폴더, 하위 폴더 및 파일에 적용’에 체크한 후 [확인] 클릭 해 주시면 아주 짧은 시간에 권한 수정이 완료 됩니다.


 

Web Station 가상 호스트 설정

(내용 추가) 가상 호스트 설정 전에 확인해야 할 사항이 있습니다.

 

Web Station > PHP 설정으로 갑니다. 사용할 PHP 버전을 더블 클릭하면 고급 설정을 할 수 있습니다. 혹시 PHP 추가에 대한 내용을 보시려면 ‘시놀로지 나스 PHP 7.2 업데이트‘를 확인하시면 됩니다.

 

세팅하려는 PHP의 고급 설정에서 위와 같이 체크가 되어 있는지 확인 꼭 하시기 바랍니다. PHP 캐시 활성화 체크하시고 아래 확장 부분에 있는 리스트는 모두 체크 해줍니다. 모두 체크되었다면 [확인] 버튼을 클릭합니다.

 

이제 가상호스트 메뉴로 이동하면 위와 같은 화면을 볼 수 있는데요. 호스트 이름에는 위에서 DNS 레코드에 등록한 서브 도메인을 포함한 도메인명을 다 적어 줍니다. 문서 루트에서 [찾아보기] 클릭하시고, web 폴더 하위에 있는 아까 복사 해 준 wordpress 폴더를 선택 해 주세요. HTTP 백엔드 서버는 아파치 2.4와 PHP 7.0으로 했습니다.

어떤 블로그에서 HTTP 백엔드 서버를 Nginx로 선택하라고 설명 해 놨던데, Nginx를 선택하게 되면 안되는 기능이 생깁니다. 본인이 직접 Nginx 설정을 손댈 수 있으면 지금 이걸 안 보고 있겠죠. 우리 아파치로 쉽게 갑시다.

 

설치를 위한 준비까지 끝났습니다. 이제 설치를 진행하게 됩니다.


 

워드프레스 설치

브라우저를 실행 후 주소창에 아래와 같이 입력 해 줍니다.

나스 주소/워드프레스 폴더 주소

이 화면까지는 위와 같은 설정을 하지 않아도 볼 수 있습니다. 권한 부분을 해결하지 않으면 다음으로 진행이 절대 안됩니다. 하지만 우리는 모든 설정을 하고 왔으니 아래에 있는 Let’s go! 버튼을 힘차게 눌러줍시다.

 

이런 화면이 나옵니다. 뭔가 적어야 될 칸이 많은데, 당황하지 않으셔도 됩니다.

데이터베이스 이름은 제일 처음에 만들었던 그 데이터베이스 이름을 그대로 입력하시면 됩니다. 사용자명과 암호는 phpMyAdmin에 접속하는 ID와 비밀번호를 입력하시면 됩니다. DB에 접근을 해야 하기 때문에 phpMyAdmin 로그인 정보를 입력 해 줍니다. 그리고 여기서 또 중요한 부분이 하나 있습니다. 일반 호스팅에서 워드프레스를 설치할 때 데이터베이스 호스트란에 localhost라고 입력하면 되는데, 나스에서 설치할 때는 위에 사진과 같이 입력 해 주셔야 합니다.

localhost:/run/mysqld/mysqld10.sock

꼭 이렇게 입력 해 주셔야 합니다. 테이블 접두어는 임의로 적으셔도 됩니다. 보통 영단어_ 이런식으로 구성됩니다. 기존에 있는 값 그대로 두셔도 상관없습니다.

모든게 제대로 입력이 되었다면 하단의 [저장하기] 버튼을 클릭하세요.

 

 

이 화면이 떴다면 정상적으로 설치가 되었다는 뜻입니다. 이 화면을 보기 위해서 저는 얼마나 많은 날을 삽질을 했던가요.. ㅠ 근데 이와중에 버튼 이름이 오타가.. 설지라뇨!!! [설치 실행하기]를 클릭합시다.

 

이제 거의 다 왔습니다. 사이트 제목을 입력하세요. 사이트 제목은 나중에 관리자에서 변경 가능하니 아무거나 넣으셔도 됩니다. 그리고 워드프레스 관리자에 접속할 사용자 ID와 비밀번호를 설정합니다. 이메일 주소도 꼭 넣어주시고요.

비공개로 워드프레스를 운영하실 분들은 검색 엔진 접근 여부에서 검색 차단하기에 체크를 해 주시면 됩니다. [워드프레스 설치하기] 를 클릭해 줍시다. 이제 진짜 설치가 됩니다.

 

이 화면을 보셨다면 고생하셨습니다. 설치가 완료가 되었습니다.

[로그인] 버튼을 클릭하시면 바로 워드프레스 관리자 화면으로 넘어가게 됩니다. 바로 위에서 입력했던 사용자 로그인 정보를 입력하시면 워드프레스 관리 화면을 볼 수 있습니다.

짜란~ 이 얼마나 보고 싶었던 화면입니까!! 고생하셨습니다.

하지만 여기서 끝난게 아니죠. 제가 마지막으로 삽질했던 부분이 남아 있습니다. 권한 설정까지 다 해 줬음에도 불구하고 테마나 플러그인 자동 설치가 안되는 것입니다!!! 정말 미치는 줄 알았죠. 마지막 설정이 남았으니 이 부분까지 잘 설정하시기 바랍니다.


 

자동설치 설정 – 마지막 설정

로그인 한 상태에서 테마나 플러그인에서 [지금 설치]를 클릭하시면 위와 같은 창이 뜹니다. 연결 정보를 입력하라고 하는데, 여기서 FTP 정보를 제대로 입력해도 뭔가 계속 설치 실패로 뜹니다. 간단하게 해결하고 마무리 하겠습니다.

 

web > 워드프레스 폴더에서 wp-config.php 파일을 텍스트 편집기로 열어주세요. 더블 클릭하면 텍스트 편집기가 자동으로 실행되면서 위와 같은 화면을 볼 수 있습니다. 여기서 맨 아래쪽에 아래 소스를 복사해서 붙여 넣기 해 주세요.

define ('FS_METHOD', 'direct');

위 이미지와 같이 추가하셨으면 수정된 내용을 저장하시고 난 뒤에 다시 워드프레스 관리자로 가서 [지금 설치]를 눌러 봅시다.

 

설치가 잘 되고, [활성화]로 바뀐 것을 볼 수 있습니다.

길다면 긴 내용 따라 와 주신다고 고생하셨습니다. 이제 워드프레스를 맘껏 이용하시면 됩니다. 제가 삽질을 너무 많이 했기 때문에 며칠간 맘 고생도 심했어서 누군가는 진짜 한 방에 제대로 설치했으면 하는 마음에 정리를 해 봅니다. 혹시 문의사항 있으시면 댓글 남겨주시고요. 제가 아는 부분은 최대한 알려드리도록 하겠습니다.