워드프레스를 시작한 지 한 달 반이 지나고 있다. 긴 시간은 아니지만 어느 정도 익숙해진 것 같아 그동안 필요했던 설정을 정리해 보았다. 아래의 내용은 모두 실제 적용해 보았거나 현재 적용 중인 내용이다. 나중에 필요하게 되면 다시 참고할 용도로 정리했다.
설정할 당시 참고했던 포스트에 대한 링크를 달아두었으며, 구체적인 내용이 필요한 경우 링크를 확인하자. 링크가 없는 항목의 경우 스스로 해결한 부분.
본 내용은 클라우드웨이즈에 설치한 워드프레스 GeneratePress 테마(무료)에 적용해 본 것이며, 이와 다른 환경에서는 설정 방법이 달라질 수 있으니 참고하자.
- 호스팅 : 클라우드웨이즈
- 워드프레스 테마 : GeneratePress (무료 버전)
.htaccess, wp-config.php
sftp 프로그램(FileZilla 등)을 이용해 워드프레스가 깔린 루트 디렉토리(예: public_html)에 접근. 파일을 다운 받아 수정한 후 업로드.
functions.php
워드프레스 메뉴 > 외모 > 테마 파일 편집기 > Theme Functions (functions.php)
CSS
워드프레스 메뉴 > 외모 > 사용자 정의하기 > 추가 CSS
(또는) 워드프레스 메뉴 > 외모 > 테마 파일 편집기 > Stylesheet (style.css)
1. 자식(차일드) 테마 만들기
워드프레스를 사용하다 보면 사용자 입맛에 맞게 설정을 많이 변경하게 된다. 특히 파일 수정도 하게 되는데 문제는 테마가 업데이트되면 기존 설정들이 모두 날아간다는 것.
자식 테마를 만들면 부모 테마를 그대로 사용하면서 차일드 테마 폴더 안에 넣어둔 파일이 우선 적용된다. 업데이트에서 자유로워지고, 실수로 원본 파일을 망칠 일도 줄어든다. 워드프레스를 하게 된다면 언젠가 결국 차일드 테마를 만들게 될 확률이 크니 일단 만들자.
더불어 앞으로 나열되는 항목 중에 functions.php를 수정하는 내용이 포함되어 있는데, 자식 테마에서 수정하는 것을 권한다.
FileZilla 등의 프로그램을 이용 sftp로 접속해 themes 하위에 generatepress-child 라는 폴더를 생성하고, 메모장으로 style.css, functions.php을 만들어 아래 내용을 저장해 업로드하면 된다. screenshot.png 파일은 테마 선택 화면에 보여질 스크린 샷. (참고 : devlog.jwgo.kr)
style.css
/*
Theme Name: GeneratePress Child Theme
Template: generatepress
*/
functions.php
<?php
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
screenshot.png
'외모 > 테마'에 나타날 썸네일 이미지이다. generatepress 폴더 안에 있는 파일을 그대로 가져와도 된다. 개인적으로는 원본 스크린샷 이미지에 Child라는 문구를 넣었다.
2. php 메모리 설정
처음 기본값(64M?)을 까먹었는데 256M 정도로 설정하는 것이 적정하다고 한다. 3군데 작업이 필요하다.
① wp-config.php 파일 내에 아래 항목을 넣어준다. 파일 내용 중 /* That's all, stop editing! Happy blogging. */ 위에 넣는다. (참고 : serverpilot.io)
define('WP_MEMORY_LIMIT','256M');
② 클라우드웨이즈(platform.cloudways.com) 서버(Server) 항목에서,
Server Management > Settings & Packages > BASIC > MEMORY LIMIT > 256 MB
③ 클라우드웨이즈 앱(Application) 항목에서는 php 메모리에 대한 항목 맨 앞 ';'를 지우고 용량을 256으로 바꾼다. Application Management > Application Settings > PHP FPM SETTINGS
php_admin_value[memory_limit]=256M
3. 임시 글(post revisions) 저장 설정 변경
글 작성 시 임시 글이 끝없이 저장된다. 임시 글 저장 기능을 꺼도 주기별 자동 저장 기능은 끌 수 없는 것 같다. 그렇다고는 해도, 제한을 걸어두면 임시 글 누적 수가 현저히 줄어든다. 어떻게든 저장 된 임시 글은 플러그인을 통해 주기적으로 삭제해 주자.
아래 내용을 필요에 맞게 수정하여 wp-config.php 파일 내에 넣되 'ABSPATH’ 항목보다 앞에 위치하도록 저장하자. (참고 : woorkup.com)
첫 줄은 자동 저장 설정 부분. 300은 초 단위이며 5분을 의미함.
둘째 줄은 임시 글 설정 부분. false는 임시 글 저장을 하지 않음을 의미. false 대신 숫자 3을 넣으면 3개까지 임시 글을 저장하게 된다.
define('AUTOSAVE_INTERVAL', 300);
define('WP_POST_REVISIONS', false);파일 편집이 익숙하지 않다면 Disable Post Revision 등과 같은 플러그인을 활용할 수 있다.
4. 큰 따옴표, 작은 따옴표 자동변환 문제
편집모드에서는 상관없는데, 글을 발행하면 큰따옴표와 작은따옴표가 비슷한 다른 문자로 대체되어 표시되는 문제가 있다. 그냥 보기만 하면 상관없는데, 예시로 적어 둔 코드를 복사 붙여넣기 하게 되면 원래 따옴표가 아니기 때문에 오류가 발생한다(당시 무척 당황함). 따라서 있는 그대로 표시해 주도록 설정해 줄 필요가 있다. (참고 : comeinsidebox.com)
functions.php 파일 내에 아래 내용을 넣어준다.
remove_filter('the_content', 'wptexturize');
remove_filter('the_title', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');5. 포스트 글 작성자 숨기기
작성자(사용자) 이름은 로그인 아이디와 연관되는 경우가 많기 때문에 숨겨주는 것이 좋아 보인다(참고 : thewordcracker.com, lazytrees.com). 다만, 이렇게 해도 사용자 정보에 대한 유출을 완벽히 막기는 어려우므로 워드프레스의 사용자 관리에서 글 작성자(Author, Editor)와 관리자(Administrator) 계정을 구분하는 것이 좋아 보인다.
CSS
.single .byline { display: none; }
.home .byline { display: none; }
.archive .byline { display:none; }
.search-results .byline { display: none; }6. 사용자 이름 알아내는 쿼리 막기
워드프레스 주소 뒤에 ?author=1와 같은 쿼리를 붙여 입력하면 사용자 이름을 반환해 준다. 사용자 이름을 알고 있다고 해서 해킹에 바로 노출되는 것은 아니지만 굳이 빌미를 내어줄 필요는 없어 보인다(참고 : wp-tweaks.com, lazytrees.com). 물론 앞의 항목과 마찬가지로 사용자 정보에 대한 유출을 불편하게 만드는 정도로 생각하는 것이 좋으며, 사용자 관리에서 (정보가 쉽게 노출되는) 글 작성자와 (공개적인 활동이 없어서 노출되지 않는) 관리자 계정을 구분하여 관리하도록 하자.
.htaccess 파일의 # END WordPress 하단 정도에 아래 내용을 추가한다.
RewriteEngine On
RewriteCond %{QUERY_STRING} author=\d
RewriteRule ^ /? [L,R=301]7. 포스트 메타 정보 숨기기
7-1. 포스트 내비게이션(이전 글, 다음 글) 숨기기
블로그에서는 이전 글과 다음 글에 대한 링크가 크게 의미 없어 보인다. 지저분해 보인다면 숨겨 버리자. 처음에는 functions.php 수정 방법을 참고해서 사용했었는데, CSS로도 조절이 가능했다. 편한 방법으로 사용하면 되겠다.
CSS 방법 (참고 : 직접 만들어 봄)
.post-navigation { display: none; }
functions.php 방법. (참고 : wordpress.org)
add_filter( 'generate_show_post_navigation', '__return_false' ); 7-2. 포스트 및 검색결과 하단의 태그 정보 숨기기
태그 링크를 눌러 이동해도 딱히 보여 줄 게 없으므로 숨겨버린다. (참고 : 다른 테마의 유사 코드를 변형해 만듦)
CSS
.tags-links { display: none; } 7-3. 포스트 및 검색결과 하단의 카테고리 정보 숨기기
카테고리 링크를 눌러 이동해도 딱히 보여 줄 게 없으므로 숨겨버린다. (참고 : 다른 테마의 유사 코드를 변형해 만듦)
CSS
.cat-links { display: none; } *(7-1. ~ 7-3.) 태그 및 카테고리 링크, 카테고리 페이지 헤더 숨기기를 한 번에 적용하기
앞에서 열거한 코드를 컴마(,)로 연결하면 된다.
CSS
.post-navigation, .tags-links, .cat-links { display: none; } 7-4. 모든 메타 정보 숨기기
앞에서 언급한 포스트 내비게이션 · 태그 · 카테고리 링크, 포스트 작성 날짜 등 다양한 메타 정보를 모두 숨겨 버린다. 왠지 달랑 제목과 본문만 남는 느낌이라 필요한 경우 참고하자. (참고 : wphelp.blog)
CSS
/* 모든 곳에서 숨기기 */
.entry-meta { display: none; }/* 홈에서만 숨기기 */
.home .entry-meta { display: none; }8. 아카이브(카테고리 등) 페이지 헤더 숨기기
카테고리 · 태그 아카이브 등의 주소로 접속했을 때(https://~~~.com/category/ooo/) 나타나는 아카이브 이름 나오는 헤더 숨기기(참고 : generatepress.com/forums/). 숨기지 않고 불필요하게 큰 페이지 헤더 높이만 줄이고 싶다면 이쪽 링크로.
아래 내용에서 .archive로 적용하면 아카이브 페이지 전체(author, date, category, tag)가 적용 받고, 카테고리 아카이브만 적용하려면 .archive를 .category로 대체해 주면 된다.
CSS
.archive .page-header { display: none; }
*(7 - 8.) 포스트 내비게이션 · 태그 · 카테고리 링크, 카테고리 페이지 헤더 숨기기를 한 번에 적용하기
아래와 같이 입력하면, '포스트 내비게이션 · 태그 · 카테고리 링크, 카테고리 페이지 헤더'를 한번에 숨길 수 있다. 상황에 맞게 필요한 부분을 골라 적용하면 되겠다.
.post-navigation, .tags-links, .cat-links, .archive .page-header { display: none; }아래와 같이 입력하면 모든 메타 정보(포스트 내비게이션 · 태그 · 카테고리 링크 · 글 작성 날짜 등)를 숨기고 카테고리 페이지 헤더도 숨긴다.
.entry-meta, .archive .page-header { display: none; }9. 링크 밑줄 없애거나 사용자 정의하기
워드프레스 메뉴에서 쉽게 변경할 수 있다. 옵션으로 사용할 수 있는 내용은 Always(항상 밑줄), On hover(마우스 커서를 올렸을 때만 밑줄), Not on hover(마우스를 올리지 않았을 때만 밑줄, 마우스를 올리면 생략), Never(항상 생략).
외모 > 사용자 정의하기 > General > Underline Links - Always, On hover, Not on hover, Never
CSS로 정의할 수도 있지만, 앞선 방법으로 정의할 수 있기 때문에 굳이 CSS 행을 늘릴 이유는 없어 보인다.
a { text-decoration:none !important; }10. 댓글 입력창 높이 사이즈 줄이기
댓글 입력창이 커도 너무 크다. 적당한 사이즈로 줄여 주자. (참고 : thewordcracker.com)
CSS
.comment-form-comment textarea { height: 100px !important; }
11. 사진 파일(미디어) 필요 없는 사이즈 생성 제한
사진을 업로드하면 원본 full, 큰 사이즈 large(1024px), 중간 사이즈 medium_large(768px), 작은 사이즈 medium(300px), 썸네일 thumbnail(150px) 등이 저장된다. 개인적으로는 원본과 썸네일만 사용하다 보니 나머지 사이즈의 이미지는 용량 낭비다.
워드프레스 > 설정 > 미디어 > 중간 크기, 큰 크기의 최대 넓이와 최대 높이 값을 0으로 설정 (비활성 됨)다만 위의 방법으로는 리사이즈된 모든 이미지의 생성을 막을 수는 없다. Stop Generating Unnecessary Thumbnails 등과 같은 플러그인을 사용하면 좀 더 탄력적이고 완벽한 설정이 가능하다.
12. 정적 페이지를 홈으로 설정했을 때 제목 문제
정적 페이지를 홈으로 설정했을 때에만 발생하는 문제로 검색 노출 시 '페이지 제목 - 사이트명'으로 나타난다. Rank Math SEO 플러그인을 깔아 두면 글 편집 모드에서 검색 노출 시 표시되는 제목을 설정할 수 있다. 홈으로 설정한 페이지를 편집 모드로 들어가 수정하면 해결할 수 있다. (참고 : dobiho.com)
글 편집 모드 > 하단의 Rank Math 검색엔진 최적화 > 일반 > 미리보기 - 스니펫 편집 > 타이틀 > %sitename%
13. 첨부된 사진을 클릭했을 때 팝업 창으로 크게 보이게 하기 (라이트박스)
이 기능을 사용하려면 글 작성(편집) 모드에서 사진을 첨부한 후 아래와 같이 링크 설정을 해 주어야 한다. 그렇지 않으면 이미지 클릭 자체가 되지 않는다. 클릭이 되지 않으면 lightbox 플러그인도 동작을 하지 못하게 되니 참고하도록 하자. (처음에는 라이트박스 플러그인 문제인 줄 알았음)
- 블록 편집기 : 이미지 클릭 > 링크 삽입 > 미디어 파일
- 클래식 편집기 : 이미지 클릭 > 편집 > 보기 설정 > 링크 대상 - 이미지 URL
기타 사항. 고유주소를 post id로 설정한 경우 글 번호 건너뜀 현상
처음에 매우 당황했던 현상 중 하나. 고유 주소를 https://~~~.com/123/ 의 형식으로 설정하여 사용 중인데, 숫자가 차근차근 1, 2, 3 ... 으로 올라가는 게 아니라 1, 2, 5, 8, 16, 17, 20 ... 과 같이 마구 건너뛴다. 내가 뭔가 잘못 설정했나 싶어 워드프레스 리셋을 몇 차례 해 가며 만져봤었는데 해결되지 않아 포기했었다.
지나고 생각해 보니 원인은 첨부 사진과 파일 각각에 대해 고유 주소가 부여되기 때문으로 추정된다. 그래서 Rank Math SEO 등과 같은 플러그인에 첨부 파일 리디렉트 기능이 존재한다고 본다. 무엇을 의도한 시스템인지는 잘 모르겠지만, 포스트 아이디 숫자가 마구 건너 뛰는 현상을 해결할 수 있는 방법은 딱히 없는 것 같으니 그러려니 하고 사용해야겠다.