워드프레스 5 완성 예제 빠르게 구성하기

워드프레스 5의 완성 예제를 빠르게 구성하는 방법을 안내합니다. 완성 후 읽어보며 구성의 과정을 이해하는 것도 도움이 될 수 있습니다. 그래도 권장하는 것은 시간이 조금 걸리더라도 직접 모든 과정을 처리하는 것입니다. 과정에서 얻는 경험이 중요합니다.

30분 정도의 시간으로 완성 예제를 구성할 수 있고, 다음에 안내하는 내용은 책의 가상 예제 기준에 따른 웹사이트를 완성하는 내용이므로 실제 워드프레스 사용과 다른 요소가 있다는 것을 기억하세요. 어려움이 있는 분들을 위해 풀어서 안내하며, 책을 참고하는 부분에서는 따라하는 과정(✔)만 진행하면 됩니다.

호스팅 환경, 도메인

먼저 호스팅 환경과 도메인을 준비합니다. PHP 버전은 최소 5.4 이상을 기준으로 정하고, 설치나 워드프레스 사용에서 권한 관련 과정이 발생하지 않는 호스팅 서비스를 구성 또는 선택하는 것이 좋습니다.

파일 다운로드

로컬 컴퓨터에 ‘워드프레스5’와 같은 구분한 이름으로 적절한 위치에 폴더 하나 생성한 후 다음 파일을 생성한 폴더에 다운로드 하세요. 예제파일 다운로드 경로는 책을 참고하고, 워드프레스 4.4.1은 공식 사이트의 파일을 다운로드 받으세요.

다운로드 후 모든 파일의 압축을 해제합니다. 해제 후 혼란스럽지 않도록 압축 파일은 모두 지우세요. 다음처럼 4개의 폴더를 확인하세요.

  • favorites
  • wordpress
  • WordPress5
  • wordpress-importer

압축해제 후 워드프레스 설치 전

‘favorites’, ‘wordpress-importer’ 폴더 2개를 그대로 잘라내기(ctrl+x) 후 wordpress > wp-content > plugins 경로에 붙여 넣으세요. (ctrl+c)

wordpress > wp-content > plugins 폴더에 있는 ‘akismet’, ‘hello.php’ 폴더와 파일은 삭제합니다.

이어서 wordpress > wp-content > themes 폴더에 있는 ‘twentyfifteen’, ‘twentyfourteen’ 폴더(테마)를 삭제합니다.

다시 ‘WordPress5’ 예제파일 폴더에서 15_thanks 폴더 안에 있는 ‘mu-plugins’, ‘plugins’, ‘themes’ 3개의 폴더를 그대로 복사(ctrl+c) 후 워드프레스 파일 wordpress > wp-content 경로에 붙여 넣습니다. (ctrl+c) 중복 파일에 대한 안내가 나오면 ‘덮어쓰기’ 하세요.

이제 워드프레스 파일 ‘wordpress’ 폴더 안의 ‘wp-config-sample.php’ 파일을 찾아 편집기로 엽니다. (편집기에 관한 경험이 없다면 ‘여기‘를 클릭하고 페이지에 접속한 후 다운로드, 설치 과정을 진행합니다.)

다음 코드를 찾으세요. 80번 줄에 있습니다.

define('WP_DEBUG', false);

/* That's all, stop editing! Happy blogging. */

다음 내용으로 변경(추가), 저장, 편집기 종료 과정으로 진행합니다. 2, 3, 4번 째 코드를 추가한 것입니다.

define('WP_DEBUG', false);
define('EMPTY_TRASH_DAYS', 0 ); // 휴지통
define( 'WP_POST_REVISIONS', false ); // 리비전
define( 'ALLOW_UNFILTERED_UPLOADS', true );
/* That's all, stop editing! Happy blogging. */

워드프레스 설치, 설정

지금 과정까지의 워드프레스 파일 ‘wordpress’ 폴더 안에 있는 파일과 폴더를 호스팅 계정으로 올립니다. FTP 클라이언트 소프트웨어 사용 또는 윈도즈 탐색기(폴더)로 파일을 올릴 수 있지만, 설명은 생략합니다.

브라우저(크롬 브라우저를 권장합니다.)에서 주소 필드에 자신의 도메인을 입력하여 설치 화면을 출력합니다.

책의 3장 설치, 설정 > 01 설치를 참고하여 진행합니다. 아주 간단한 내용이며, 반드시 이 과정을 직접 처리해야 합니다. 처리 후 로그인하여 관리페이지에 접속합니다.

책의 3장 설치, 설정 > 02 설정에서 처음 나오는 ‘2개의 플러그인 삭제’는 앞의 과정에서 처리했으므로 생략하고 나머지 과정을 진행합니다.

  • 관리페이지 Posts 메뉴를 클릭하여 기본 포스트(post)를 완전히 삭제합니다.
  • 관리페이지 Pages 메뉴를 클릭하여 기본 포스트(page)를 삭제합니다.
  • 관리페이지 Appearance 메뉴를 클릭하고, Global House 테마를 활성화합니다. Twenty Sixteen 테마는 삭제합니다.
  • 관리페이지 Plugins 메뉴를 클릭하면 4개의 플러그인이 비활성화 상태로 나타납니다. ‘Add Capabilities’ 플러그인을 활성화(Activate)하고, 다시 바로 비활성화(Deactivate) 합니다. (비활성화 후 관리페이지 메뉴에 ‘매물 관리’ 메뉴가 나타납니다.)

예제 데이터 임포트

이어서 WordPress Importer 플러그인을 활성화(Activate)한 후 Tools > Import 메뉴를 클릭합니다. 접근 페이지 화면에서 Tumblr 아래의 WordPress를 클릭합니다.

  • 책의 7장 Import > 02 임포트를 참고하여 진행합니다. 책의 안내와 같이 완료 메시지가 나올 때까지 기다립니다.
  • 책의 7장 Import > 03 임포트 후를 참고하여 진행합니다. 간단한 내용이므로 직접 처리하세요.

Favorites 플러그인 설정

관리페이지 Plugins 메뉴를 클릭하고, Favorites 플러그인을 활성화합니다.

책의 8장 템플릿, 태그, 루프 > 01 보조메뉴 내용을 참고하여 조금 전 활성화한 Favorites 플러그인 설정을 진행합니다. 플러그인 설치, 활성화는 이미 처리했으므로 생략하세요.

<span class="glyphicon glyphicon-heart"></span>

위의 코드 입력 과정이 나오면 복사해서 사용하세요. 편의를 위해 추가했습니다.

메타데이터 업데이트

책의 8장 템플릿, 태그, 루프 > 04 The Loop > 메타데이터 업데이트에 있는 내용인데, 책 내용 대신 다음 안내에 따라 처리하세요.

  • 관리페이지 Settings > Reading 메뉴를 클릭합니다.
  • Blog pages show at most 필드에 ‘100’을 입력하고 저장합니다.
  • FTP 프로그램을 사용하여 워드프레스를 설치한 호스팅 계정(원격)에 접속하여 wp-content/themes/house/ 폴더 안으로 접근합니다.
  • 로컬 컴퓨터에서 ‘WordPress5’ 예제파일 폴더의 09_template > meta 폴더 안에 있는 ‘archive-house.php’ 파일을 편집기로 엽니다.
  • 26번 줄에 다음 첫 번째 줄 코드가 있습니다. 맨 앞의 ‘//’를 제거(두 번째 줄처럼)하고 저장합니다.
//update_post_meta( $post->ID, 'house_site', $term_site_id ); // 아래처럼
update_post_meta( $post->ID, 'house_site', $term_site_id );
  • 저장한 파일을 호스팅 계정(원격)의 접근한 경로(wp-content/themes/house/)에 올립니다. 덮어 쓰세요.
  • 브라우저에서 http://자신의도메인/house를 입력하여 접근합니다. (레이아웃이 어긋난 것은 무시하고, 숫자와 지역 이름 데이터가 나오면 됩니다.)
  • F5 키를 두 번 눌러 업데이트를 진행합니다. (파란색과 빨간색의 숫자가 같다면 성공입니다.)
  • 로컬 컴퓨터에서 ‘WordPress5’ 예제파일 폴더 15_thanks > themes > house 안에 ‘archive-house.php’ 파일을 찾습니다.
  • FTP로 호스팅 계정(원격)의 접근한 경로(wp-content/themes/house/)에 올립니다. 덮어 쓰세요.

페이지(page), 템플릿

책의 8장 템플릿, 태그, 루프 > 03 Page Templates > Default Template 내용을 참고하여 4개의 페이지(page) 포스트를 생성합니다.

이때 ‘메인’, ‘찜’, ‘판’ 페이지는 생성할 때 편집 화면 오른쪽 아래의 Page Attributes 메타박스의 Template 필드에서 각각 ‘Front House’, ‘Favorite House – 찜’, ‘House Board -판’을 선택한 후 저장합니다.

페이지 생성이 끝나면, 관리페이지 Settings > Readings 메뉴를 클릭합니다. 다음 안내에 따르세요.

  • Front Page displays 섹션에서 ‘A static page’ 선택
  • Front Page : 메인, Posts Page : 도움, 각각 선택
  • Blog pages show at most : 10 입력
  • 저장(Save Changes)

메뉴 생성

  • 관리페이지 Appearance > Menus 메뉴를 클릭합니다.
  • Menu Name에 ‘위’를 입력하고 Create Menu를 클릭합니다.
  • Custom Links 섹션을 펼치고, URL은 ‘/house’, Link Text는 ‘매물’을 입력하고 Add to Menu 버튼을 클릭합니다.
  • Pages 섹션을 펼치고, ‘판’, ‘도움’ 선택 후 Add to Menu 버튼을 클릭합니다.
  • Menu Settings 섹션의 Theme locations 항목의 ‘위 메뉴’를 선택하고 Save Menu 버튼을 클릭합니다.

옵션 페이지에 로그인 로고 경로 설정

관리페이지 Settings > House Options 메뉴를 클릭하고, 맨 위의 ‘로그인 페이지 로고 URL’ 필드에 다음의 정보를 입력합니다.

http://자신의도메인/wp-content/themes/house/img/house-logo.png

Transient 캐시 데이터 재생성

워드프레스 5 예제 사이트의 일부 요소는 만료 기한이 정해진 데이터를 출력하도록 구성되어 있습니다. 앞의 과정에서 혹시 프런트 엔드로 접근하여 매물 관련 페이지에 접근했다면 접근 당시의 데이터(완전하지 않은 데이터)가 계속 출력될 수 있습니다. 다음 안내에 따라 진행하세요.

  • 관리페이지에서 매물 관리 메뉴를 클릭합니다.
  • 매물 목록에서 아무 매물 하나를 선택하고 편집화면으로 접속합니다.
  • 단지 업데이트 버튼만 클릭합니다.
  • 관리페이지 메뉴를 클릭합니다.
  • 글 목록에서 아무 글 하나를 선택하고 편집화면으로 접속합니다.
  • 단지 업데이트 버튼만 클릭합니다.
  • 관리페이지 외모 > 메뉴 메뉴를 클릭합니다.
  • 단지 메뉴 저장 버튼만 클릭합니다.

매물(house), 글(post), 메뉴(nav) 3가지에 대한 transient 데이터를 재생성한 것으로 예제에서 정의한 것만 처리한 것입니다. 테마 house의 inc/house-query.php 파일 74번에서 111번 줄의 내용을 참고할 수 있습니다.

확인

관리페이지 Settings > General 메뉴를 클릭하고, 맨 아래의 Site Language 필드에서 ‘한국어’를 선택하고 저장합니다.

로그아웃 후 로그인 로고 변경을 확인합니다.

브라우저에서 사이트를 둘러 보고, 로그인과 로그아웃을 번갈아 변화를 확인하거나 일반 사용자 계정으로 로그인하여 관리페이지의 다른 사항을 확인하세요.

수고하셨습니다.

  1. ssojumania 댓글:

    문의 드립니다
    완성본에서 첫화면을 로그인페이지가 나오게 할수없나요?
    로그인하지 않으면 매물정보를 보지못하게 하기위함입니다
    또 매물정보를 누르면 새창이나 새탭으로 열리는데 현재 페이지에서 열리게 할수있을까요?

    1. veteran 댓글:

      반갑습니다.

      [회원제 사이트]

      사이트 전체 콘텐츠, 쉽게 회원제 사이트로 구성하는 방법은 직접 코드로 정의하거나 관련 플러그인을 사용하는 방법이 있습니다.

      코드

      다음 코드를 테마의 functions.php 파일 맨 위 또는 (워드프레스 5를 참고하여) MU 플러그인으로 만들어 추가해 보세요.

      function entire_site_membership() {
      
          if ( ! is_user_logged_in() ) {
              auth_redirect();
              exit;
          }
      }
      add_action( 'template_redirect', 'entire_site_membership', 0 );
      

      위 코드는 단순하게 사이트 접근 자체를 로그인 후 가능하게 한 것인데 편리하고 유용한 경우가 많습니다.

      플러그인

      책에서도 안내한 바 있는 Members 플러그인이 좋습니다.

      플러그인 설치 후 설정 > Members 페이지로 접근 후 아래 그림처럼 설정해 보세요. 그림의 설정은 워드프레스 5 예제를 고려해 설정한 것인데, 예제에서는 Role, Caps를 직접 정의했으므로 이 플러그인이 제공하는 Role, Caps는 사용하지 않는 것으로 설정한 것입니다. 물론 예제에서 코드로 정의한 것을 이 플러그인에서 설정해도 됩니다. (일부는 파일에 직접 정의 필요)

      플러그인 Members

      코드보다는 상대적으로 검증, 안정된 플러그인 사용을 권장합니다. 사이트 전체를 회원제로 구성하는 것은 콘텐츠 노출 제어와 관련한 문제이므로 브라우저를 통해 사이트에 접속하는 문제 뿐 아니라 다른 접속 방식(예, Feed)으로 사이트 콘텐츠를 열람하는 경우도 고려해야 하므로 이와 같은 경우를 고려한 플러그인을 사용하는 것이 좋을 것으로 생각합니다.

      [현재 창]

      워드프레스 5 예제에서 새 창(탭)으로 열리는 경우는 다음과 같습니다.

      • 매물 목록의 지도와 매물 리스트
      • 지역 목록의 지도와 매물 리스트
      • 등록자별 매물 목록 페이지
      • 판, 찜 페이지에서 하나의 매물 링크

      테마 house에서 다음 4개의 파일을 열어 보세요.

      • template-parts/house-list.php (1)
      • template-parts/house-map.php (1)
      • template-parts/house-thumb.php (2)
      • template-parts/house-table.php (1)

      위의 목록에서 괄호 안의 수는 아래 코드의 개수입니다. 각 파일에서 아래 코드를 찾아 지우세요.

      target="_blank"
      

      현실에서 매물 정보를 열람할 때 현재 창에서 열리는 것이 불편하여 새 창으로 페이지가 열리도록 나름의 바람으로 지정한 것인데 마음에 드시지 않나 보네요.^^ 무엇이든 상관없습니다.

      감사합니다.

      가능하다면 새로운 글 작성을 통해 질문을 주시면 다른 독자분들과 공유할 수 있어 즐거울 것 같습니다.

댓글 입력 기간이 지났습니다.