웹,워드프레스2019. 12. 31. 01:59

WordPress 활용 정보 정리.

 

 

워드프레스를 이용하여 사이트 구축할 때 필요한 실전활용정보 체계적 정리 글.

 

본 블로그내에서 신규 정보가 새롭게 등록될 때마다 본 페이지에서도 해당정보를 찾아가기 쉽도록 추가 정리되므로 블로그 여기저기 검색할 필요 없이 본 페이지만 보면 워드프레스 관련된 모든 정보를 일목요연하게 볼 수 있음.  

 

 

 

 

 

 

설치, 설정 순서

본 내용은 워드프레스를 초기에 설치한 직후에 다른 여러가지 플러그인, 테마, 등등 을 설치하기전에 먼저 설정해둬야 할 사항들 모음이다. 설정 순서가 중요한 경우들이 있다. 아래 번호순서로 하면 무난함. 아래 설치되는 것들 중 특히 멀티사이트,멀티도메인, WPML(다국어플러그인) 은 워드프레스 셋팅 초기에 이뤄지는 것이 타당하다. 즉, 시스템/구조적인 부분은 먼저 설치 해두는 것이 타당하다. 멀티사이트, WPML 을 구축하지 않는 경우엔 설치하는 순서가 크게 중요치않다. 멀티사이트, WPML 셋팅 이후 테마 셋팅하고,그외 시스템적이지 않은 단편적인 기능의 플러그인들은 설치 순서가 중요치 않다. 

 

1.도메인 주소로 워드프레스홈페이지 보이게 하기.   

http://도메인명  으로 접속했을때 워드프레스 홈페이지 보이게 하기.  

보기 -> http://igotit.tistory.com/108   

2.고유주소(Permalinks) 설정하기.   

- 워드프레스 사이트 정식운영하기 전에 필수 셋팅해둬야함.  단, 아래 4번 멀티사이트를 구축하는 경우에는 멀티사이트 구축후에 고유주소체계 셋팅해도 됨. 사유: 멀티사이트 설정하면 고유주소가 초기화 되어버려서다시 설정해야함.

보기 -> http://igotit.tistory.com/109  

3.관리자 이메일 설정하기.    

- 실제 사용할 관리자 이메일 설정해두기.  

보기 -> http://igotit.tistory.com/110  

4. 워드프레스 사이트 멀티사이트 구축하기.

- 워드프레스로 멀티사이트를 구축하기로 한 경우 이 시점에 해둔다. 멀티사이트 필요없는 경우는 생략함.

보기 -> http://igotit.tistory.com/88

- 앞 에서 설정된 멀티사이트를 접속하는 주소를 독립 도메인으로 하고 싶다면, 바로 도메인맵핑 플러그인 설치한다.

보기 -> http://igotit.tistory.com/100 <- 이 설명 내용 중에 도메인 연결은 지금 하지 않고 나중에 해도됨. 맵핑 플러그인 만 설치. 

5. 다국어지원 WPML 설치.

- 워드프레스로 다국어구축하기 위하여 WPML을 설치하기로 한 경우, 이 단계에서 설치한다.필요없는 경우 생략.

보기 -> http://igotit.tistory.com/113 

6. 쇼핑몰 플러그인 WooCommerce 설치.

- 워드프레스에서 우커머스를 설치하기로 한 경우 이 단계에서 설치한다.필요없는 경우 생략.

보기 -> http://igotit.tistory.com/118 

7. WooCommerce Multilingual 설치.

- 워드프레스에서 WPML을 설치하여 다국어 구축하는 환경에서 우커머스의 다국어 설정 섬세하게 하기위한 플러그인 설치한다. WPML사용하지 않는 경우  생략. 우커머스 다국어 표현위한 필수는 아님.

보기 -> http://igotit.tistory.com/119 

8.  Jetpack 설치. (플러그인 패키지)

- Jetpack의 통계기능 등을 이용하기 위하여 설치한다면, 이 단계에서 설치한다.필요없는 경우 생략.

참고: 워드프레스 설치부터 8번까지 모두 설치 했을 때,  서버의 HDD용량 : 57M byte.

보기 -> http://igotit.tistory.com/92







  

기본이해

워드프레스를 활용하기 위해서는  기본적으로 이해해야 할 사항들이 있다. 먼저 기록된 것이 쉬운것 뒤로 갈수록 조금씩 난이도가 있는 순으로 정리하였음.

 

워드프레스의 사이드바, 위젯개요,활용예,개발정보.  

- 워드프레스에서 편하게 사용할 수 있는 위젯과 사이드바 개요,활용예를 소개한다. 

보기 -> http://igotit.tistory.com/138

워드프레스의 포스트, 페이지 차이점, 한계.  

- 워드프레스를 활용하여 글을 작성하고 사이트에 정보를 표현하기 위한 가장 기본적인 이해사항이다. 워드프레스 기본 내장된 포스트와 페이지가 무엇이며 그 한계상황을 명확히 이해하고, 포스트와 페이지 를 어떻게 활용해야하는지 명확히 이해한다. 

보기 -> http://igotit.tistory.com/62

사용자 정의 포스트, 템플릿, 카테고리, 태그 직접 만드는 방법

- 워드프레스 기본 내장된 포스트만으로는 정보표현의 한계가 발생한다. 사용자 정의 포스트로 이 문제를 해결할 수 있으며, 본 글에서는 사용자 정의 포스트 만드는 방법중 직접 코드를 작성하여 달성하는 방법을 설명한다. 또한, 사용자 정의 포스트 전용의 템플릿, 카테고리, 태그 생성방법도 설명한다.  

보기 -> http://igotit.tistory.com/75

포스트와 페이지에서 사용가능한 사용자 정의 필드(Custom Field) 개념잡기 기본 활용법

- 사용자 정의 필드를 사용하면 포스트(페이지)와 관련된 추가의 명시적 정보 표현이 가능하다. 

보기 -> http://igotit.tistory.com/70

사용자 정의 필드 편하게 사용가능한 플러그인 조사자료

 - 기본 플러그인에서는 text만 값으로 지정가능하나, 플러그인을 이용하면 시간, 이미지, 파일 다양한 타입을 등록가능하다.

보기 -> http://igotit.tistory.com/71

워드프레스 기반 구조화된 정보 정의 가능성(포스트들 사이의 관계 만들기)

- 관계형 데이터베이스의 테이블과 관계 정의하는 것처럼 워드프레스의 커스텀 포스트, 커스텀필드를 이용하여 웹에서 표현할 데이터요소들의 데이터 모델링이 가능하다.  

보기 -> http://igotit.tistory.com/82

워드프레스가 테마를 보이는 과정.

- 워드프레스는 어떤 과정을 거쳐 우리의 테마의 템플릿(php 파일을 의미함)을 이용하여 웹에 보이게 하는지를 그 절차를 간략히 살펴봄.

보기 -> http://igotit.tistory.com/121

워드프레스 웹페이지 구조와 테마의 템플릿 파일들.

- 워드프레스를 이용한 정보표현시 사용되는 미리 지정된 템플릿파일(php) 이해하기.

보기 -> http://igotit.tistory.com/123

워드프레스 루프(Loop) 이해하기. 웹페이지에 정보표현하는 코드부.

- 템플릿파일(php) 내에서 실제 웹페이지에 정보를 표현하는 것은 Loop 코드부에서 이뤄진다.

보기 -> http://igotit.tistory.com/124 

워드프레스 테마의 functions.php 기능이해, 코딩방법개념잡기.

- 테마 파일중 functions.php 의 역할이 무엇이며, 이곳에 코딩을 어떻게 해야하는가?

보기 -> http://igotit.tistory.com/130 

CSS 개념이해 및 활용시 필요한 상세정보 구하기.

- 워드프레스에서도 CSS를 이용하여 웹에 표현하는 시각적인 처리가 이뤄지므로 CSS 에 대한 이해는 기본이다.

보기 -> http://igotit.tistory.com/146

CSS 선택자 활용정보 요약.

- CSS의 선택자 간략 요약.

보기 -> http://igotit.tistory.com/166

CSS 파일만들기.

- CSS 파일만들기 고려사항.

보기 -> http://igotit.tistory.com/169



테마 만들기

1. 테마 직접 만들기 1편. 시작점.

- 워드프레스는 단 2개의 파일(style.css, index.php)만 준비되면 테마로 설치가능하다. 이 과정을 상세하게 설명하고 있다. 

보기 -> http://igotit.tistory.com/85

2. 테마 직접 만들기 2편. index.php 수정하고 템플릿 추가하기.

- 1편에서 만든 index,php 를 워드프레스의 형식으로 수정하고, 동시에 2개의 템플릿파일(header.php, footer.php) 추가하기.

보기 -> http://igotit.tistory.com/122

3. 테마 직접 만들기 3편. index.php 에 Loop 구현하기.

- 2편에서 만든 상태에서, index.php 의 content 영역에 루프를 구현한다. 루프란 워드프레스에서 웹에 정보표현하는 가장 중요한 처리과정.

보기 -> http://igotit.tistory.com/125

4. 테마 직접 만들기 4편. single.php 추가하여 포스트 표현하기.

- 3편에서 만든 상태에서, 포스트 1개를 표현하기 위한 single.php 를 테마에 추가한다.

보기 -> http://igotit.tistory.com/126

5. 테마 직접 만들기 5편. header.php정리,메뉴추가,functions.php, page,php 테마에 추가하기.

- 4편에서 만든 상태에서, header.php를 워드프레스의 요구사항대로 정리하고, 테마에 functions.php 추가하면서 메뉴생성시키고, page.php 추가하여 페이지 내용도 웹에 보이게 한다. 

보기 -> http://igotit.tistory.com/129

6. 테마 직접 만들기 6편. 사이드바,위젯추가, sidebar.php 템플릿파일 추가하기.

- 5편에서 만든 상태에서, 테마의 functions.php 에 코드추가하여 테마의 사이드바와 위젯을 활성화하고, 사이드바를 표현하기 위한 sidebar.php 를 테마에 추가함.  

보기 -> http://igotit.tistory.com/135

7. 테마 직접 만들기 7편. archive.php, 404.php, search.php 추가하기.

- 6편에서 만든 상태에서, 카테고리와 태그에 속한 포스트 출력위한 archive.php, 없는 페이지 접속한 경우 보이는 404.php, 검색결과 보이게 하는 search.php 를 테마에 추가한다.   

보기 -> http://igotit.tistory.com/141  

8. 테마 직접 만들기 8편. searchform.php 추가하기.

- 7편에서 만든 상태에서, 검색창을 보이게 하는 searchform.php 를 테마에 추가한다.   

보기 -> http://igotit.tistory.com/163

9. 테마 직접 만들기 9편. css 이용하여 레이아웃 만들기.

- 8편에서 만든 상태에서, CSS 이용하여 웹페이지의 레이아웃 설정하는 방법을 다룬다.   

보기 -> http://igotit.tistory.com/173

10. 테마 직접 만들기 10편. css 이용하여 박스 그리드 만들기.

- 9편에서 만든 상태에서, CSS 이용하여 포스트 리스트가 보일때 박스 그리드로 표현해본다.   

보기 -> http://igotit.tistory.com/175

11. 테마 직접 만들기 11편. css 이용하여 메뉴 만들기.

- 10편에서 만든 상태에서, CSS 이용하여 메뉴를 시각적으로 메뉴처럼 보이게 만든다. .   

보기 -> http://igotit.tistory.com/174

12. 테마 직접 만들기 12편. css에 구글폰트 적용,스크린샷추가. 테마1~12까지 1차 정리 백업.

- 11편에서 만든 상태에서, CSS 에 구글폰트 적용하고 워프관리자화면에서 보이는 테마 이미지 추가하고, 테마설치가능한 igotitskeleton.zip 파일로 1차 정리 백업함.   

보기 -> http://igotit.tistory.com/179

 



플러그인 만들기

1. 플러그인 직접 만들기 시작점.

- 워드프레스 플러그인으로 설치되기 위해서는 단 1개의 php 파일만 준비되어도 설치가능하다. 이 과정을 상세하게 설명하고 있다. 

보기 -> http://igotit.tistory.com/87

 

 

워드프레스 글 작성 

 

1. 소스코드 하이라이팅.

 

워드프레스로 글 작성할 때 소스코드를 표현할 일이 있는 경우,

 

1. 소스코드 하이라이트 방법중 비설치형 4종 비교 검토 -> http://igotit.tistory.com/52

 

2. 상기 1번 에서 조사된 것들로는 워드프레스에서는 정상적인 소스코드 하이라이팅이 안된다. 워드프레스인 경우에는 플러그인이 최고의 품질을 만들어준다. Crayon Syntax Highlighter 플러그인 설치 및 기본 활용법 -> http://igotit.tistory.com/53 이 정리되었다.

 

2. 문서에 차례 넣기.

 

2-1. 문서목차

작성된 글이 h1, h2 같은 헤딩으로 소제목들이 있으면서, 장문의 글이 정리되어야 하는 경우 차례를 제시하면 훨씬 이해도를 높이는 문서가 된다.

플러그인 TOC+를 설치하여 목차 구현한다.  -> http://igotit.tistory.com/57

 

 

2-2. 스크롤 따라다니는 목차

한편, 상기 2-1처럼 목차를 문서의 상단에만 고정배치하면 화면 스크롤다운 한 경우 차례는 보이지 않는다. 차례 볼려면 다시 상단으로 올라와야 한다. 이 문제를 해결하기 위하여 사용자가 화면 스크롤 해도 따라다니는 목차를 구현하자.

앞의 2-1의 상태에서, 위젯을 고정하는 플러그인인 Q2W3 Fixed Widget 을 설치하면 (설치,기본사용법 -> http://igotit.tistory.com/56)

스크롤 따라다니는 목차가 쉽게 구현된다. -> http://igotit.tistory.com/58

 

3. 문서에 용어 설명 툴팁

 

문서에서 제시하는 내용에서 용어 등이 생소한 경우가 있다. 기술적으로 난이도가 높다든지 혹은 자신과는 다른 분야여서 용어가 생소한 경우도 있다. 이럴 때 문서상의  용어에 마우스를 가져가면 자동으로 툴팁이 뜨면서 용어 설명이 나타난다면 훨씬 이해도를 높일 수 있다.

 

이를 구현하기 위하여 CM ToolTip Clossary 설치, 기본사용법이 정리되었다. -> http://igotit.tistory.com/60

 

 

우커머스

 

1. WooCommerce 설치.

보기 -> http://igotit.tistory.com/118

2. 우커머스 셋팅 - 계정 설정.

우커머스에서 회원가입, 계정수정 관련 기능을 설정하는 법.

보기 -> http://igotit.tistory.com/191

3. 우커머스 상품란에 탭 추가하기  

- 우커머스  활용하여 상품정보 기록 하다보면 기본제공되는 탭이 달랑 1개 뿐이다. 상품란에 탭추가 가능한 플러그인 조사자료.

보기 -> http://igotit.tistory.com/66

4. WooCommerce Multilingual 설치.

- 워드프레스에서 WPML을 설치하여 다국어 구축하는 환경에서 우커머스 에서도  다국어 설정 섬세하게 처리하는 플러그인. WPML사용하지 않는 경우엔 필요없음.

보기 -> http://igotit.tistory.com/119



 

멀티사이트

1개의 워드프레스로 여러 개의 사이트를 만들고 운영할 수 있다. 만들어진 사이트에 접속하는 경로는 서브디렉토리, 서브도메인, 도메인 모두 가능하다.

1. 워드프레스로 멀티사이트 만들기 - 서브디렉토리 방식 

- 멀티사이트 기본개념 간단정리하고, 워드프레스로 만들어진 여러 개의 사이트에 브라우저로 접속할 때 주소형식이 http://도메인명/en  과 같이 도메인 뒤에 서브디렉토리명으로 접속하도록 셋팅하는 법 상세 설명하고 있다.

보기 ->  http://igotit.tistory.com/88

 

2. 워드프레스로 멀티도메인 만들기 -  멀티 사이트 접속시 독립 도메인으로 접속 가능하다.

- 워드프레스로 만들어진 여러 개의 사이트에 브라우저로 접속할 때 별도의 독립 도메인으로 접속가능하다. 이를 달성하는 설정법 정리하였다. 보기 ->  http://igotit.tistory.com/100

 

 

 

서버 관리

 

1.구글드라이브 이용하여 이미지와 파일들 무료 호스팅 처리하기.  

- 워드프레스에서 웹에 표현하는 이미지들이 방대해지고 파일들이 많아진 경우 서버호스팅 비용도 만만치 않다. 무료 사용 가능한 구글 드라이브에 이미지와 파일들을  몰아두고 워드프레스 웹에서는 이를 링크 걸어서 표현하기.  정리잘되어있다.

보기 -> http://igotit.tistory.com/55 

 

2. 워드프레스에서 무료CDN 2종 소개.

- 이미지저장및 트래픽을 외부서버를 이용하는 1번과는 다른 좀 더 편한 방법  

보기 -> http://igotit.tistory.com/93 

 

3. 워드프레스에서 Jetpack 의 Photon 이용하여 무료 이미지 CDN 구축하기.

- 호스팅 이미지 트래픽 줄이기 적합하다. Photon 설정 및 실제 활용예 포함.   

보기 -> http://igotit.tistory.com/95

 

4. 도메인 연결, 도메인 포워딩

- 워드프레스 뿐만 아니라, 일반적으로 웹호스팅 관리하다 보면 여러 개의 도메인관리 할 일이 생기고, 도메인 연결과, 포워딩 할 일이 생긴다. 셋팅방법 정리.

보기 -> http://igotit.tistory.com/98

 

 

 

 

 



첫등록 : 2014년 10월 20일

최종수정 : 2019년 1월 1일


본 글 단축주소 : https://igotit.tistory.com/23





Posted by 리치굿맨

댓글을 달아 주세요

  1. 비밀댓글입니다

    2018.01.11 04:53 [ ADDR : EDIT/ DEL : REPLY ]
  2. 좋은 정보 감사합니다

    2020.10.05 17:01 신고 [ ADDR : EDIT/ DEL : REPLY ]