'워드프레스'에 해당되는 글 60건

<알림판> - <외모>의 나머지 하위 항목들 중 '헤더', '배경'의 경우는 '사용자 정의하기' 항목에서 다루었습니다.

워드프레스 테마편집기는 워드프레스의 테마를 구성하고 있는 소스 파일들을 수정할 수 있는 기능을 가지고 있습니다.

CSS 파일과 PHP 파일을 수정할 수 있으며, 우측 상단의 선택 메뉴를 통해서 편집할 테마를 선택할 수 있습니다.

좌측이 불러온 소스 코드 편집창이고, 우측이 테마를 구성하고 있는 소스 파일들입니다.

기본 테마편집기

기본 테마편집기의 경우 특별한 기능이 없고, 테마 파일 구조를 보는 것도 편하지 않기 때문에 일반적으로는 '플러그인'을 설치하여 기능을 보완하는 경우가 많습니다.

<플러그인 추가하기>를 통해 플러그인을 검색하여 'WP Editor'를 찾습니다.

플러그인 WP Editor 검색

플러그인을 설치하고 활성화 한 후 <외모> - <Theme Editor>를 클릭합니다. 이전에 있던 '테마편집기'를 플러그인이 대체했습니다.

편집란 위쪽으로 여러 '되돌리기', '검색' 등의 기능을 하는 버튼들이 추가되었고, 우측의 테마 파일 구조란 위쪽으로 '파일 업로드' 기능도 추가되어 FTP 접속없이 파일을 올릴 수 있습니다(단지 삭제, 이동 등의 기능은 지원되지 않습니다).

또한 파일과 디렉토리(폴더)가 일목요연하게 보여지고 있기 때문에 테마 파일의 구조를 좀 더 쉽게 이해할 수 있습니다.

WP Editor

워드프레스를 설치하고 자유롭게 수정하기 위해서는 이 테마편집기(WP Editor)와 매우 친해져야 합니다. 그리고 테마 파일을 수정하는 것은 점하나 잘못 넣거나 빼도 홈페이지가 먹통이 될 수도 있는 매우 조심스러운 작업이기 때문에 매우 주의해야 합니다. 되도록이면 웹에서 직접 작업하는 것보다는 소스를 복사해서 컴퓨터에 설치한 텍스트에디터를 통해 작업하고 테마편집기에 붙여넣어 적용하는 등의 혹시 모를 오류에 항상 대비하는 자세가 필요합니다.

워드프레스에서 메뉴를 생성하는 방법은 한 가지가 아닙니다. 제가 알고 있는 방법은 아래와 같이

1. 테마의 php파일을 수정하지 않은 상태에서 정적인 메뉴, 동적인 메뉴를 각각 페이지와 글의 카테고리로 생성하는 방법.
2. 모든 메뉴를 페이지로 구성하고, 동적인 글은 블로그 항목으로 모두 집중시키는 방법.
3. 1번과 2번의 방법을 혼합하여 모든 메뉴를 페이지로 구성하고 동적인 글을 따로 템플릿 페이지를 통해 페이지에서 출력하는 방법.

입니다. 이 외에도 베리에이션이 좀 더 있을 것 같군요.

기초 단계에서는 첫 번째 방법을 가장 많이 사용합니다. 우선 메뉴 생성에 관한 가장 기초적인 개념을 잡을 수도 있고, 특별한 코딩이 필요없는 점이 가장 큰 장점입니다.

알림판 - 외모 - 메뉴 항목으로 들어가보면 페이지 상단에 메뉴 편집하기, 위치 관리하기 가 있으며 아직 메뉴가 하나도 없는 경우라면 '새로운 메뉴를 생성하세요.'라고 써 있는 링크를 클릭하여 새 메뉴를 만들 수 있습니다. 사용하는 테마는 Twenty Thirteen 입니다.

새 메뉴 생성

메뉴 관리 페이지의 좌측은 메뉴로 만들 수 있는 개체들이고 우측은 현재 선택되어 있는 메뉴 구조입니다. 좌측의 개체를 체크하고 [메뉴에 추가]를 클릭하여 우측의 메뉴 구조로 보내는 방법으로 메뉴를 작성할 수 있습니다.

페이지를 메뉴에 추가

페이지가 메뉴 구조에 등록된 모습

메뉴 설정 항목을 살펴보면

• 페이지 자동 추가 : 체크하면 페이지에서 만들어진 새로운 페이지가 자동으로 메뉴구조에 추가됩니다.
• 테마 위치 : 현재 사용중인 테마에 현재 메뉴가 어디에 위치하게 할 것인지 정합니다. 다중 체크 가능합니다.

링크는 직접 URL을 입력하여 메뉴로 등록할 수 있습니다. 링크 텍스트는 메뉴로 만들어졌을 때의 이름이며 클릭할 경우 현재 창에서 해당 URL로 이동하게 됩니다.

링크로 URL을 입력하여 메뉴 추가

메뉴 구조에 링크 URL이 등록

카테고리도 페이지와 마찬가지 방법으로 메뉴 구조에 추가할 수 있습니다. 체크를 하고 [메뉴에 추가]를 클릭합니다. 미분류는 체크하지 않습니다.

카테고리를 선택하여 메뉴에 추가

메뉴에 추가된 카테고리

메뉴 구조 안에서 각 메뉴들은 마우스 드래그&드롭으로 위치를 이동시킬 수 있습니다.

드래그&드롭으로 메뉴 위치 이동

드래그&드롭으로 메뉴의 위치를 조정을 마친 후 메뉴 설정 항목의 테마 위치에서 '주 메뉴'를 체크합니다. 이제 Main menu는 주 메뉴에 출력될 것입니다.

위치 조정 후 주 메뉴에 체크

[메뉴 저장]을 클릭하고 홈페이지를 확인해 봅니다.

등록된 주 메뉴 확인

Twenty Thirteen 테마는 주 메뉴 외에도 소셜 링크 메뉴도 따로 가지고 있습니다. '링크' 항목을 통해서 메뉴를 만들고 소셜 링크 메뉴에 등록해봅니다.

링크 항목으로 소셜 링크 메뉴 작성

홈페이지에 소셜 메뉴 등록 확인

참고로 워드프레스 중급 단계 이상에서는 글 첫 머리에 언급한 메뉴 제작 방법 중 2번 방법을, 고급 단계에서는 3번 방법을 사용하는 경우가 많습니다. 또한 대부분의 유료 테마의 경우는 3번 방법을 사용합니다.

위젯(widget)은 간단한 기능을 구현하는 작은 장치로서 홈페이지 곳곳에 마치 포스트잇(post-it)처럼 붙일 수 있습니다.

일반적으로 위젯이 위치하는 곳은 사이드바(sidebar)이지만, 이 외에도 테마 함수 및 소스에서의 프로그래밍에 의해 위젯이 들어갈 위치를 별도로 추가할 수도 있습니다.

알림판 - 외모 - 위젯 항목을 클릭하면 위젯 관리 화면을 볼 수 있습니다.

좌측은 각각의 기능을 가진 위젯들이 모여 있으며, 우측에는 현재 테마 및 플러그인에서 설정되어 있는 위젯이 들어가는 위젯 영역입니다.

위젯 설정 화면

좌측의 위젯을 우측의 위젯 영역으로 드래그&드롭(drag&drop)으로 이동시키면 곧바로 위젯이 등록됩니다. 자동 저장이 되므로 따로 저장할 필요는 없습니다만 등록된 위젯의 개별 속성을 변경하는 경우에는 저장하기 버튼을 클릭해야 합니다.

위젯 드래그&드롭

등록된 위젯의 옵션 수정 및 저장

홈페이지 사이드바에 위치한 위젯 영역에 새롭게 등록한 텍스트 위젯이 출력된 것을 볼 수 있습니다.

등록된 위젯의 동작 확인

각각의 위젯을 등록해보고 그 기능들을 먼저 알아보는 것은 워드프레스 활용에 있어서 매우 중요하기 때문에 플러그인을 새롭게 설치하거나 테마를 바꾸는 경우 위젯 항목을 꼭 확인하는 것이 좋습니다.

워드프레스로 만들어진 일반적인 개인 블로그나 소규모 홈페이지의 경우는 회원가입 기능을 사용하지 않는 경우가 많습니다만, 여러 가지 이유로 인해 회원가입(위치 : 알림판-설정-일반-멤버쉽 체크) 기능을 사용하는 경우도 있습니다.

버디 프레스나 비비프레스를 설치해서 커뮤니티 포럼 사이트를 구현해서 사용하는 경우 혹은 K보드를 설치하고 글쓰기 등의 권한에 제한을 두는 경우 등이 그러하죠. 아니면 그냥 특정 카테고리, 글을 로그인 사용자에게만 노출시키고 싶을 경우에도 멤버쉽 기능을 활성화 합니다.

하지만 워드프레스 홈페이지에서의 회원을 탈퇴하려면 어떻게 해야 할까요?

워드프레스 기본 상태에서는 가입자가 직접 탈퇴할 수 있는 방법은 없고, 관리자에게 메일을 보내서 회원에서 탈퇴 시켜달라고(유저 목록에서 삭제) 요구하는 방법밖에 없습니다. 꽤나 번거롭죠.

이를 위한 심플한 워드프레스 회원탈퇴 플러그인이 있습니다. 바로 Never Let Me Go 입니다.

(팝송 가사에 많이 나오는 문장이군요. 나를 떠나 보내지 말아요~)

회원 탈퇴 플러그인 Never Let Me Go

별표는...제로...로군요. 그래도 꾿꾿히 깔아 봅니다. 그리고 활성화 합니다.

설정 항목에 Resign Setting 을 통해서 세팅을 할 수 있습니다.

Never Let Me Go 세팅 화면

사용방법은 우선 새로운 페이지를 만듭니다. 페이지 이름은 회원탈퇴 정도로 하고 저장합니다.

회원탈퇴 페이지 제작

플러그인 세팅 항목 하단에 있는 내용을 클립보드로 복사합니다.

페이지 내용에 넣을 소스 복사

세팅 항목 상단에 있는 Allow user to self delete 에서 Enable 를 체크하고, Resign Page 로 새로 만든 회원탈퇴 페이지를 선택한 후 [변경 사항 저장] 버튼을 클릭합니다.

Never Let Me Go 설정 예

회원탈퇴 페이지로 돌아가서 클립보드에 복사해 놓은 내용을 붙여 넣고 적당히 문구를 수정합니다.

중요한 것은 <!-- nextpage --> 를 통해서 페이지 사이 이동이 되므로 빠뜨려서는 안됩니다.

회원탈퇴 페이지에 내용 넣기

플러그인 동작 테스트를 위해 현재 회원 중에서 구독자 홍길동으로 로그인합니다.

현재 회원 목록

구독자로 로그인

회원탈퇴 페이지로 이동합니다. [Delete Account] 버튼을 클릭합니다.

회원탈퇴 페이지 이동

정말로 삭제할 것입니까? 라고 묻는 확인창이 뜹니다. [확인] 버튼을 클릭합니다.

탈퇴 확인 메시지

회원탈퇴 성공 메시지 페이지로 이동하고 탈퇴가 완료됩니다.

회원탈퇴 완료

로그인을 하려고 해도 로그인이 불가능합니다.

로그인 불가능 에러 출력

간단한 설정 및 페이지에 적용하는 것만으로 회원탈퇴 기능을 구현할 수 있습니다.

단지 꼭 주의해야 할 부분은 바로 모든 사용자를 대상으로 회원탈퇴 기능이 동작하기 때문에 관리자로 로그인 한 상태에서도 회원탈퇴가 된다는 것입니다. 큰일 날 수 있으니 사이트 관리자는 절대 회원탈퇴 버튼을 클릭하지 마시기를 바랍니다.

(에이 설마 하고 눌렀다가... 테스트 계정 다시 만들고 백업본 다시 복구하느라 시간 날린 1人입니다.)

현재 보고 있는 웹문서가 홈페이지에서 어디에 위치하고 있는지 알려주는 플러그인입니다.

홈페이지를 만들면서 그냥 로케이션(Location), 페이지네이션(Pagination) 등등 여러 명칭으로 불렀던 것 같은데요.

해외에서는 Breadcrumb(빵조각)이라고 합니다. 아래의 홈페이지에서는 테마 자체에 breadcrumb 기능이 포함되어 있는 경우 입니다.

이처럼 상당수의 테마들이 이 Breadcrumb 기능을 지원하고 있는데 가끔은 그렇지 않은 테마들도 있습니다. 이런 경우 설치해서 사용할 수 있는 플러그인 중에 많은 사용자를 가지고 있는 것이 바로 Breadcrumb NavXT 입니다.

사용방법은 플러그인 설명 페이지에 있는 Installation 항목에서 볼 수 있으며, 플러그인을 설치 및 활성화하고 설명에 있는 코드 클립보드에 복사하여 워드프레스 테마 PHP 소스에 넣으면 됩니다.

예를 들어 전체적으로 모든 페이지에 넣고 싶다면 header.php에 넣으면 되고, 페이지와 포스트에만 넣고 싶다면 각각 page.php와 single.php에 넣으면 됩니다. header.php에 넣는 경우 전면페이지에서 출력 여부를 잘 생각해서 설정해야 합니다.

아래의 이미지에서는 홈페이지의 우측 상단에 위치하고 있습니다.

<알림판> - <설정> 항목을 통해 플러그인 세팅을 할 수 있습니다.

각 단계 사이에 들어갈 아이콘이나 문자 등은 Breadcrumb Separator 에서 설정할 수 있으며, 첫 페이지(홈), 블로그 등의 특정 단계의 출력및 링크 등을 뺄 수도 있습니다.

사용하는 테마에 구글 웹폰트를 적용하기 위해서는 style.css 를 수정하는 방법이 가장 널리 알려진 방법입니다.

하지만 이 방법의 단점은 테마가 바뀌면 다시 해당 코드를 바뀐 테마의 스타일시트에 적용해야 한다는 것인데, 이게 귀찮다면 또 귀찮은 작업입니다.

이렇게 테마 디자인을 자주 바꿀 경우에는 구글 폰트 플러그인을 사용하면 반복작업 필요없이 한 번만으로 기본 폰트를 구글 웹폰트로 적용해 놓을 수 있습니다.

이 중 가장 인기있는 플러그인이 바로 "WP Google Fonts" 입니다.

https://wordpress.org/plugins/wp-google-fonts/

임의의 글꼴을 선택하고 Custom CSS 에 웹폰트를 불러오는 코드를 넣으면 바로 동작합니다.

링크 : 워드프레스 테마에 구글 웹폰트 '나눔고딕' 적용하기 - 3

사용자 정의 항목은 현재 활성화 된 테마의 기본 설정을 할 수 있는 부분입니다.

테마마다 지원하는 항목의 차이가 있으며, 여기서는 Twenty Twelve 테마를 기준으로 설명합니다.

사이트 제목과 태그라인 항목은 홈페이지의 좌측상단의 홈페이지 제목과 홈페이지를 설명하는 부분의 내용을 말합니다.

(위치는 테마에 따라 조금씩 다를 수도 있습니다.)

내용을 입력하고 체크박스를 체크하면 항목이 표시됩니다.

다른 플러그인을 깔지 않는다면 운영하는 홈페이지의 제목 및 요약설명 부분을 나타내기 때문에 홈페이지의 성격을 잘 고려해서 내요을 입력합니다.

헤드 글 색상은 말 그대로 홈페이지 제목 부분의 색상을 변경할 수 있고,

배경 색상의 경우 홈페이지의 배경색을 지정할 수 있습니다.

헤더 이미지는 홈페이지 상단에 표시되는 디자인을 위한 이미지 정도로 이해할 수 있습니다.

이미지 편집 프로그램을 통해 만들어진 이미지를 넣어 홈페이지를 좀 더 멋지게 꾸밀 수 있습니다. 

이미지 업로더를 통해 적당한 크기의 이미지를 업로드 합니다.

탐색기에서 적당한 크기의 이미지를 선택합니다. 설명을 참고하여 미리 만들어진 960x250 pixel 의 이미지를 불러옵니다.

불러온 이미지는 "선택&자르기"를 통해 출력될 이미지의 크기를 수정할 수도 있습니다.

전체를 모두 사용할 것이기 때문에 "자르기 생략"을 클릭합니다.

네비게이션과 콘텐츠 사이에 이미지가 로딩되었습니다.

같은 방법을 통해 여래개의 이미지를 업로드 합니다.

업로드 된 이미지들이 섬네일의 형태로 나열된 것을 볼 수 있습니다.

업로드 된 이미지 하단의 "업로드 된 헤더 랜덤화"를 선택하면 각 페이지에 로딩되는 이미지가 랜덤으로 선택됩니다.

배경이미지의 경우 상단의 배경색상 부분 처럼 홈페이지 배경에 이미지를 불러옵니다.

"파일 선택하기"를 통해 이미지를 미디어 라이브러리에 업로드합니다.

탐색기에서 패턴이미지를 선택합니다.

불러온 패턴 이미지가 배경에 타일 처럼 깔린 것을 확인할 수 있습니다.

배경 반복, 포지션 등을 통해 배경 이미지가 반복되는 방식을 조정할 수 있습니다.

메인 사이드바 항목에는 우측 사이드바에 들어가는 "위젯"을 추가하거나 제거할 수 있습니다.

정적인 전면 페이지의 경우 홈페이지의 페이지 출력 방식을 선택하는 것으로 "최근 글"은 포스팅 된 글들이 블로그처럼 출력하는 것이고, "정적인 페이지"의 경우 만들어진 페이지 하나를 선택해서 홈페이지(첫번째 페이지)로 출력하는 것입니다.

사용자 정의하기에서 설정한 것들이 적용된 홈페이지 입니다.

 

외모항목은 워드프레스로 만들어진 블로그 혹은 홈페이지의 보여지는 모양을 정하는 곳입니다.
테마에서 전체적인 디자인을 결정하고 사용자 정의를 통해 세부적인 설정을 할 수 있으며,
위젯을 통해 사이드바 혹은 푸터 등에 여러 콘텐츠로의 링크 메뉴 및 여러 기능을 넣고,

메뉴를 통해 홈페이지의 네비게이션 메뉴를 설정하고,
배경을 통해 홈페이지 배경색 또는 배경 이미지 등을 넣을 수 있습니다.
편집기에서는 HTML5, CSS3 를 사용한 테마 파일들을 직접 수정할 수도 있습니다.

 

 

- 테마
워드프레스의 가장 큰 장점으로 알려져 있는 기능으로 홈페이지의 전체적인 디자인을 바꿀 수 있습니다.
포털사이트의 블로그, 카페 등에서 디자인을 바꿀 때 사용하는 '스킨'과 비슷한 개념이라고 보면 됩니다.

 

 

2014년, 2013년, 2012년 기본 워드프레스 테마 

 

 

 

바꾸고자 하는 테마의 위로 마우스 커서를 위치시키고 '활성화'를 클릭하면 해당 테마의 디자인이 홈페이지에 적용됩니다.

 

 

 

2014년(Twenty Fourteen) 테마가 적용된 모습입니다.

 

 

2013년(Twenty Thirteen) 테마가 적용된 모습입니다.

 

 

 

2012년(Twenty Twelve) 테마가 적용된 모습입니다.

 

 

 

전체적으로 2012년(Twenty Twelve) 테마가 기본 테마로서 많이 사용되고 있는 것으로 보이고, 

저 개인적으로도 워드프레스 테마를 공부하기에도 좋다고 생각하기 때문에 기초 포스팅에는 Twenty Twelve를 사용할 것입니다.

 

새로운 테마를 추가하려면 하단의 '새 테마 추가하기'를 클릭합니다.

 

 

 

워드프레스에 등록된 여러 무료 테마들을 볼 수 있습니다.

테마는 완전 무료테마, 부분 무료테마(기능제한), 유료 테마 로 나뉘어지는데 이곳에서 볼 수 있는 테마들은 완전무료 혹은 부분무료테마들 입니다.

 

테마를 적용하려면 '설치'를, 테마를 설치하지 않고 디자인만 확인하려면 '미리보기'를 클릭합니다.

 

 

 

미리보기 창을 통해 어떤 디자인의 테마인지 확인할 수 있습니다.

 

 

 

미리 설정되어 있는 메뉴를 통해 페이지 디자인 및 레이아웃도 확인할 수 있습니다.

 

 

 

 

 

특히 '특성 필터'는 원하는 항목에 체크하여 해당하는 테마를 검색할 수 있도록 합니다.

 

 

 

예를 들어 아래와 같이 체크를 하고 '필터적용'을 클릭하면

 

 

 

체크한 항목에 해당하는 테마들을 볼 수 있고 테마를 적용하거나 미리보기를 통해 디자인을 확인할 수 있습니다.

 

 

 

테마 추가 옆에 있는 '테마 업로드'를 통해서는 가지고 있는 테마파일을 직접 업로드하여 설치할 수 있습니다.

 

 

 

'파일 선택'을 클릭하여 윈도우 탐색기를 통해 테마파일(압축파일 zip 형식)을 불러올 수 있습니다.

 

 

 

테마파일을 선택하고 '열기'를 클릭합니다.

 

 

 

'지금 설치하기'를 클릭하여 테마를 설치합니다.

 

 

 

테마 항목에서 새롭게 추가된 테마를 확인할 수 있습니다.

 

 

 

 

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.

 

댓글 항목에서는 글에 달린 댓글들을 관리할 수 있습니다.

각각의 글을 따로 찾아 들어가는 번거로움이 없기 때문에 매우 편리하죠. 어떤 글에 달린 댓글인지는 가장 우측 항목에서 확인이 가능합니다.

마우스 롤오버로 나타나는 빠른 메뉴로 "승인하기, 응답, 빠른 편집, 편집, 스팸, 휴지통"가 있는데,

"승인하기"의 경우 따로 "설정-토론" 항목에서 관련 항목(댓글이 승인되기 전에 - 댓글은 수동으로 승인돼야 합니다)이 체크되어 있는 경우에 가능하며 기본값은 꺼져 있기 때문에 보통은 댓글 입력과 동시에 승인이 됩니다.

(자동으로 댓글이 달리지 않는다면 항목에서 "댓글을 쓴 사람이 예전에 댓글이 승인된 적이 있어야 합니다"의 체크를 풀면 됩니다.)

"응답"은 현재 댓글 리스트를 유지한 상태로 댓글의 댓글을 추가할 수 있는 기능입니다.

"빠른 편집"은 작성된 댓글을 페이지 변경 없이 수정할 수 있게 합니다.

"편집"은 해당 댓글에 관한 모든 관리를 할 수 있는 항목입니다. 심지어 등록된 날짜까지도 변경이 가능...;;;

(본격 콘텐츠 조작 가능 CMS...)

그리고 나머지 "스팸"과 "휴지통"은 댓글을 스팸처리하거나 삭제하는 기능입니다.

댓글에 대한 관리 항목은 "설정 - 토론"에 있습니다. 중요한 것은 아무래도 "댓글 검토", "댓글 블랙리스트" 항목으로 댓글에 부적절한 단어가 있는 경우 검토항목(승인여부)에 넣거나 등록되지 않도록(스팸) 합니다.

아바타의 경우 사용자가 직접 이미지를 등록할 수 없고, "그라바타"라고 하는 인터넷 아바타 서비스를 사용합니다. 그라바타에 회원가입을 하고 이메일 계정을 등록한 후 아바타로 사용할 이미지를 설정하면 댓글을 달 때 입력하는 이메일 계정을 통해 그라바타에서 아바타 이미지를 가져오는 방식입니다.

물론 사용자의 컴퓨터에 있는 이미지를 업로드해서 아바타로 만드는 플러그인도 있습니다.

(...지만 특정 상황에서 동작하지 않는 경우가 있어서 특별한 요청이 있을 때만 사용합니다)

그라바타 바로가기

http://ko.gravatar.com/

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.

 

페이지는 정적인 콘텐츠를 표현하기에 좋습니다. 과거(?)의 HTML 페이지라고 생각하면 되겠군요.

한 번 작성 후 그 페이지가 큰 변화없이 그대로 유지되는 것을 전제로 하고 제작되는 경우가 많습니다(...만 수정 사항은 항상 발생하죠).

"페이지 - 모든 페이지"를 통해 현재 작성되어 있는 페이지들의 목록을 볼 수 있고, 글(포스트)에서의 카테고리 처럼 페이지를 작성할 때 상위 페이지를 지정하는 방법으로 계층 구조를 만들 수도 있습니다.

그리고 페이지의 순서 정렬이 가능합니다.

기본 정렬은 알파벳(또는 가나다, 숫자 등) 내림차순으로 정렬이 되는데 A~Z, ㄱ~ㅎ, 0~9 의 순서로 나열되지만 페이지 작성 때 또는 편집할 때 "순서" 항목에 숫자를 넣어서 순서를 정할 수 있습니다.

이 기능은 페이지를 "메뉴화"해서 네비게이션을 만들 때 필수적이므로 되도록이면 순서를 맞추는 편이 좋습니다.

참고로 카테고리의 경우는 순서 정렬이 안되기 때문에 만일 사이드 바에서 카테고리 리스트를 출력할 때 순서를 바꾸려면 따로 프로그래밍을 하거나 관련 플러그인을 사용해야 합니다.

페이지의 작성은 글을 작성하는 방법과 다르지 않으며 슬러그를 되도록이면 "영문"으로 하는 편이 좋은 것도 같습니다. 단지 페이지의 콘텐츠는 홈페이지 방문자에게 '일방적'으로 보여주는 것인 경우가 많으므로 "토론" 관련 기능인 댓글, 트랙백, 핑백은 허용하지 않을 수도 있습니다.

여기까지만 하면 페이지가 그냥 작성만 해서 보여주기만 하면 되는 매우 간단한 것이라고 생각할 수 있겠네요.

하지만 페이지에는 다른 용도가 있는데 그것은... 나중에 다루겠습니다. 워드프레스 기초의 범위를 넘어서니까요.

 

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.

 

푸터(Footer)는 홈페이지나 웹사이트 하단부에 위치하면서 저작권 정보 및 연락처 등이 표기되는 공간입니다. 과거에는 단지 앞에서 적은 것 정도만 출력하는 경우가 많았지만 요즘은 이 외에 여러 컨텐츠를 넣고 있는 추세이고 이런 콘텐츠가 노출되는 푸터를 메가푸터(Mega Footer)라고 합니다. 아래는 Avada 테마의 메가푸터 입니다.

대부분의 유료 테마를 보면 푸터 부분에 글 모음(월별), 최근 댓글, 갤러리 썸네일, 로그인 링크 등이 들어가 있는 것을 쉽게 찾을 수 있죠.

_S 테마는 기본적인 저작권 정보(카피라이트)만 들어가 있습니다. 그것도 고치려면 footer.php 를 수정해야 하죠. 이 기본적인 푸터를 메가푸터로 업그레이드 해 보겠습니다. 방법은 푸터 영역에 사이드바 처럼 위젯을 넣을 공간을 만들어 주고 그곳에 위젯을 추가하면 됩니다.

우선 functions.php 에 다음의 코드를 추가합니다.

⁄* 푸터 위젯 영역 추가 함수 *⁄
if ( function_exists('register_sidebar') ) { 
	register_sidebar();
	register_sidebars(3, array('name'=>'Footer %d')	); 
}

푸터 부분에 사이드바 처럼 위젯을 넣을 수 있게 하는 함수입니다. 위의 코드 중 "숫자 3"이 나오는데 공간을 몇 개나 만들 것인가 정하는 부분입니다. 보통 메가푸터는 3~4 개의 단으로 구성되는 경우가 많습니다.

 

 

다음은 footer.php를 열고, 위젯을 넣을 공간을 HTML 태그로 만듭니다.

<footer id="colophon" class="site-footer" role="contentinfo"> 아래 줄에 다음의 코드를 입력합니다.

<div id="megafooter" class="row"><!-- 메가푸터:위젯 -->
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 1') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 2') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 3') ) : ?>
		<?php endif; ?>
	<⁄div>
<⁄div><!-- .row:메가푸터:위젯끝 -->

<DIV> 요소를 사용하여 위젯이 들어갈 공간을 만들었습니다.

 

 

 

 

관리자 메뉴의 "외모 - 위젯"으로 이동하면 Footer1, 2, 3 이라는 이름의 위젯 영역이 생성된 것을 볼 수 있습니다.

 

 

 

좌측의 "사용할 수 있는 위젯"에서 각 푸터 영역으로 위젯들을 드래그&드롭하고 각각 [저장하기]를 클릭한 다음 홈 화면을 확인해봅니다.

 

 

스케쥴, 최근 댓글, 홈페이지 이용안내 라고 하는 3개의 내용이 푸터에 추가된 것을 확인할 수 있습니다.

 

 

이제 스타일을 수정해서 조금 다듬어야 합니다. custom.css 를 열고 아래의 코드를 추가합니다.

상단의 더블라인을 가지고 배경이 밝은 회색으로 채워진 푸터가 만들어진 것을 확인할 수 있습니다.

⁄*------------------------------------------------------------
 푸터 수정
 *------------------------------------------------------------
 *⁄
⁄* 푸터 전체 모양 *⁄
.site-footer {
  margin-top: 4em;
  border-top: 3px double #aaa;
  background-color: #efefef;
}

⁄*푸터 위젯 제목 및 리스트 크기 *⁄
#megafooter li { list-style: none; }
.widgettitle { font-size: 1.6em; border-bottom: 1px solid #aaa; }

 

 

모양이 좀 많이 별루지만... 메가푸터 맞습니다;;; 스타일 수정을 더 하면 멋지게 나오겠죠.

 

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.

 

관리자 메뉴의 순서를 보면 "글" 다음에 "페이지"가 아니고 "미디어"가 와 있습니다. 

저만의 생각일 수도 있지만 그만큼 미디어가 중요하다는 뜻이 아닐까요? (뭐... 사실 전부 중요하긴 하지만;;;)

워드프레스는 각 글 및 페이지에 "특성이미지(featured image)"라는 항목이 있습니다. 글 및 페이지의 내용을 대표할 수 있는 이미지를 하나 등록하는 것인데 이것은 썸네일(thumbnail)화 되어서 홈 화면이나 글 목록 등 게시물들을 한꺼번에 여러개 보여 줄 때 각 글들을 명확히 구분하기 위한 용도로 주로 사용됩니다. 주로 이 이미지(및 각종 미디어 파일)의 업로드를 "미디어"를 통해서 하는 것이죠.

"파일 올리기"를 통해 컴퓨터에 있는 파일을 워드프레스에 업로드 할 수 있습니다.

업로더(파일을 올리는 툴)는 "다중 파일 업로더"와 "브라우저 업로더"가 있는데 "다중 파일 업로더"는 여러 개의 파일을 한꺼번에 올릴 수 있고 "브라우저 업로더"는 파일을 하나씩 올릴 수 있습니다. 당연히 다중 파일 업로더를 사용하겠죠?

미디어도 글 이나 페이지처럼 해당 항목을 통해 "편집화면"으로 들어갈 수 있습니다.

(위에도 잠깐 썼는데, 주로 이미지를 다루기 때문에 앞으로는 미디어 말고 이미지라고 쓰겠습니다)

편집화면에서 미디어에 정보를 추가할 수 있는데, 바로 "캡션, 대체 텍스트, 설명"입니다.

캡션은 이미지 아래쪽에 노출되는 텍스트 즉, 이미지 제목 정도를 말하고, 

대체 택스트는 어떤 이유로 인해 이미지가 출력되지 않을 때 대신해서 출력되는 텍스트를 말합니다.

그리고 설명은 이미지에 대한 자세한 정보를 적는 곳이라고 생각하면 되겠군요. 예를 들어 사진을 올렸다면 이 사진이 언제, 어디서, 무엇으로 찍었는가 하는 등의 정보라고 하면 될까요?

셋 중 가장 중요한 것은 "대체 텍스트" 입니다.

근래 웹개발 쪽에서 가장 신경써야 할 부분인 "웹 접근성"을 충족하기 위한 최소한의 마지노선이기 때문인데, 이 대체 텍스트가 시각장애인을 위한 화면리더기에서 감지하는 부분이기 때문입니다(저도 그냥 그렇다고만 알고 있습니다).

반드시 넣으시길 바랍니다.

워드프레스는 이미지 편집 기능을 제공하는데 이를 통해 웹 브라우저에서 이미지 자르기, 이미지 회전, 상하/좌우 전환, 이미지 크기 조정을 할 수 있습니다. 

이미지 미리보기 하단의 [이미지 편집]을 클릭하면 아래의 화면을 볼 수 있습니다. 일부러 메타박스를 모두 열어놓았습니다.

이미지 자르기"만 다뤄보겠습니다. 위의 사이드 바에 등록한 베너 이미지의 경우 정사각형이라 사실 잘 어울리는 편이 아닙니다. 글자의 상하 부분을 잘라서 좌우로 긴 이미지로 만들어야 겠습니다.

우선 마우스 커서를 이미지 위로 이동하고 '클릭 & 드래그'해서 원하는 영역을 만듭니다. 

이미지의 크기는 "이미지 자르기" 메타박스를 보면 "선택" 항목에 좌*우 픽셀값이 나타나기 때문에 이를 잘 활용해서 사이즈를 조정할 수 있습니다. 저의 경우 깔끔한 수치를 좋아해서 첫째 자리수를 "0"으로 맞췄습니다.

크기를 설정했으면 아이콘 중에서 "자르기"를 클릭하여, 설정한 것을 이미지에 적용합니다. 그리고 적용된 것을 확인한 후 [저장하기]를 클릭합니다.

이제 이미지를 확인해 보면, 아래와 같이 잘려진 것을 확인할 수 있습니다.

여기서 중요한 것은 원래의 이미지 파일은 변하지 않고 새로운 편집된 이미지 파일이 따로 저장된다는 것입니다.

'연구&개발' 카테고리의 게시물 중 "사이드바 정리와 이미지 베너 추가"를 보면 플러그인을 통해 베너이미지를 삽입하는 내용을 볼 수 있습니다. 이곳의 이미지가 자동으로 변경되면 좋겠지만 그렇게는 되지 않는다는 이야기가 되겠죠.

그래서 플러그인을 사용하여 사이드바에 베너를 다시 추가하였습니다.

사용자가 이미지를 업로드하면 그 이미지 파일 말고도 3개의 파일이 더 생성됩니다.

Thumbnail(썸네일-미리보기 이미지), Medium(중간크기 이미지), Large(큰 이미지), Full(업로드 한 이미지) 로 구분되며 보통은 이미지의 크기가 파일명 뒤에 붙습니다. 이 이미지 크기를 설정하는 곳은 다른 곳에 있는데 바로 "설정 - 미디어"에 있습니다. 

워드프레스의 테마마다 이 미디어 크기 설정이 조금씩 다르며, 필요한 경우 플러그인을 사용하거나 사용자 함수를 추가하여 다른 크기의 이미지들을 따로 생성할 수도 있습니다.

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.