'분류 전체보기'에 해당되는 글 98건

워드프레스의 <도구> 항목은 워드프레스를 보다 편리하게 운영하기 위한 간단한 기능들을 제공하며, 주로 글을 가져오거나 내보내는 용도로 사용되는 경우가 많습니다.

끌어오기

<도구> - <사용가능한 도구>의 끌어오기는 설명에도 써 있듯이 [끌어오기] 버튼을 즐겨찾기 표시줄(오페라 브라우저) 등에 추가하여다른 홈페이지나 블로그의 글을 퍼오는 기능이라고 보면 됩니다.

오페라 브라우저의 경우 좌측상단의 오페라 아이콘을 클릭하면 메뉴가 나타납니다. 메뉴의 <즐겨찾기> - <즐겨찾기 표시줄 표시>를 클릭합니다.

- 인터넷 익스플로러 : 즐겨찾기 모음

- 크롬 : 북마크바 표시

- 파이어폭스 : 북마크 모음

- 사파리 : 책갈피 막대 보기

오페라 브라우저 - 즐겨찾기 표시줄 표시

[끌어오기] 버튼을 드래그&드롭으로  즐겨찾기 표시줄에 떨어뜨립니다.

끌어오기 버튼 즐겨찾기 표시줄에 드래그&드롭

다른 홈페이지나 블로그의 글 중에서 마음에 드는 것이 있으면 [끌어오기] 버튼을 클릭합니다.

끌어오기 버튼 클릭

자동으로 끌어올 글의 제목과 링크 등이 입력되어 있는 상태로 글쓰기를 위한 팝업창이 생성됩니다. 적당한 카테고리, 태그 등을 설정하고 [공개하기]를 클릭하여 글을 등록합니다.

끌어오기 글쓰기 창에 내용 추가

새로운 글이 등록된 것을 확인할 수 있습니다.

끌어오기로 글쓰기 완료

가져오기

<가져오기> 항목은 다른 CMS 및 SNS 등의 글, 댓글, 사용자 리스트 등을 워드프레스로 이전할 때 사용합니다. 각각 별도의 플러그인을 설치하여 각 플랫폼에서 내보내기로 만들어진 데이터를 불러와서 워드프레스로 가져오는 것입니다.

(일반적으로 많이 사용되는 기능은 아닙니다.)

여러 플랫폼에서 데이터를 가져올 수 있습니다.

가져오기(데이터 이전) 종류

구글의 블로거의 데이터를 가져오는 플러그인입니다.

구글 블로거 가져오기 플러그인

워드프레스의 데이터를 가져오는 플러그인입니다.

워드프레스 데이터 가져오기 플러그인

워드프레스 가져오기를 통해 다른 워드프레스 홈페이지에서 내보내기로 만들어진 XML의 데이터를 불러올 수 있습니다.

워드프레스 가져오기 항목 - XML 데이터 불러오기

각 플랫폼마다 사용법과 가져오기 형식이 다를 수 있기 때문에 주의해야 합니다.

내보내기

내보내기는 현재 운영중인 워드프레스 홈페이지의 내용을 XML 데이터로 저장하는 것입니다. 저장된 XML 데이터는 워드프레스 가져오기를 통해 다른 워드프레스 홈페이지에 이전시킬 수 있습니다.

[내보내기 파일 다운로드] 버튼을 클릭하면 XML 파일이 컴퓨터로 다운로드 됩니다.

워드프레스 데이터 내보내기

XML 데이터 생성 및 컴퓨터에 다운로드

컴퓨터의 다운로드 폴더에 XML 형식의 데이터가 다운로드되었습니다.

다운로드 된 워드프레스 XML 데이터

다운로드 된 XML 파일은 글, 페이지 내용, 미디어(이미지) 정보 등이 포함되어 있으나 자료 자체가 포함되어 있는 것은 아닙니다.

차후 불러오기를 통해 데이터를 불러오면 XML 내용을 참조하여 데이터를 이전합니다.

워드프레스 XML 데이터 내용

주의할 점은 데이터 불러오기에서 미디어(이미지)의 경우 업로드가 잘 안되는 경우가 발생하기도 합니다. FTP 권한 문제라고 하는 경우도 있고, 웹서버 자체의 세팅 문제라고 하는 경우도 있습니다만 아직 그 원인을 확실히 알지 못하고 있기 때문에 불러오기로 데이터를 이전한 경우 불러온 내용들을 살펴보고 이미지 경로 등을 면밀히 살펴볼 필요가 있습니다.

워드프레스에서의 사용자 항목은 설정 항목에서 <설정> - <일반> 항목에서 '멤버쉽'에 체크를 하고, 회원가입을 받는 경우에 의미를 가집니다. 방문자가 회원가입을 하게 되면 '새 사용자를 위한 기본 규칙'에서 세팅한 것에 따라 '구독자', '기여자', '글쓴이', '편집자', '관리자' 중의 하나의 권한을 가지게 됩니다.

설정 - 일반 - 멤버쉽 체크

또는 관리자 계정으로 로그인한 사용자가 직접 다른 사용자를 추가할 수도 있습니다.

<사용자 추가>하기를 통해서 'testman' 이라는 이름으로 사용자를 추가해봅니다.

모든 사용자 목록

기본적인 권한인 '구독자'로 설정을 하고 하단의 [새로운 사용자 추가] 버튼을 클릭합니다.

구독자 역할 새 사용자 추가

새로운 사용자가 목록에 나타나는 것을 볼 수 있습니다.

사용자 추가 확인

새로운 사용자 'testman'으로 로그인을 합니다.

testman 로그인

<구독자>는 '글을 읽을 수만 있는 권한'을 가지고 있습니다. 좌측 메뉴에 아무런 쓰기 관련 항목이 없습니다.

구독자 권한 - 읽기

개인 설정에서 관리자 색상을 변경하면 좌측 메뉴와 툴바의 배경색상 등이 바뀝니다.

개인 설정에서 색상 변경

공개적으로 표시할 이름도 바꿀 수 있습니다. 닉네임, 이름, 성, 이름 성, 성 이름 의 종류 중 고를 수 있습니다.

공개 이름 수정 가능

관리자로 다시 로그인하여 'testman'의 권한을 '편집자'로 바꾸고 저장합니다.

편집자 권한 부여

<편집자>는 글, 페이지, 댓들 등을 자유롭게 작성하고 편집할 수 있습니다. 단지 사이트 설정 항목 및 몇몇 도구에는 접근을 할 수 없습니다.

편집자 메뉴 - 글쓰기 역할

이번에는 '기여자'로 권한을 바꾸고 저장해봅니다.

기여자로 권한 변경

<기여자>는 글을 쓸 수가 있지만 우측 버튼을 보면 알 수 있듯이 '리뷰를 하기 위한 등록'이라고 일반적인 글쓰기와는 다릅니다.

기여자 글쓰기 - 리뷰

'기여자'의 글쓰기는 미디어 라이브러리(이미지, 특성이미지)를 사용할 수 없으며, 글을 등록하더라도 관리자의 승인이 있어야 합니다.

등록 대기 중인 기여자의 글

<글쓴이>의 경우는 자신이 작성한 글만을 편집, 공개할 수 있습니다.

글쓴이 권한 부여

'글쓴이'로서 작성한 글이 없는 경우에는 글 목록만 보입니다.

글쓴이의 글이 없는 경우 글 목록

만일 새 글을 작성하면 그 때부터는 자신이 작성한 글만 나타납니다.

'기여자'로서 쓴 글과는 다르게 따로 승인이 없어도 글이 등록되는 것을 볼 수 있습니다.

글쓴이로서 작성한 글 목록

전체적으로 정리해보면

관리자 > 편집자 > 글쓴이 > 기여자 > 구독자의 순서로 권한의 크기가 정해지며, 이 외에 다중 홈페이지 (멀티 사이트)를 운영하는 경우에는 '최고관리자'라는 역할이 나타납니다.

플러그인은 워드프레스에 기본 기능을 보완하고 확장시키거나 새로운 기능을 추가합니다.

플러그인은 '플러그인 추가하기'를 통해서 원하는 것을 검색하여 바로 설치할 수 있으며, '플러그인 업로드'를 통해 플러그인 압축파일(zip)을 올리는 방식으로도 설치할 수 있습니다. 또한 FTP 접속을 통해 워드프레스 설치 디렉토리 중에서 플러그인 디렉토리 속에 플러그인을 구성하는 파일(폴더)를 업로드하는 방식으로도 설치할 수 있습니다.

설치된 플러그인 목록

주요 플러그인 검색

플러그인 압축파일(zip) 업로드

FTP로 플러그인 디렉토리에 직접 설치

'편집기'는 '테마편집기'와 같은 기능으로 플러그인을 구성하는 소스 파일을 찾아 수정할 수 있는 기능을 가지고 있습니다. 여기서는 플러그인 WP Editor를 설치했기 때문에 'Plugin Editor'로 기능이 대체되었습니다.

플러그인 에디터

플러그인은 워드프레스 기본 상태에서는 지원하지 않는 수많은 기능을 확장, 추가하여 워드프레스로 하여금 무한한 가능성을 가지게 하지만 반면으로는 워드프레스로 만들어진 홈페이지를 느리게도 할 수 있습니다. 그렇기 때문에 꼭 필요한 플러그인을 엄선하여 사용해야 하며 같은 기능을 하는 여러 플러그인을 동시에 설치하는 것은 피해야 합니다. 또한 플러그인 사이에서의 충돌현상이 일어날 수도 있기 때문에 여러개의 플러그인을 동시에 활성화 하는 것 보다는 하나하나 설치, 활성화하면서 홈페이지의 정상 동작 여부를 반드시 체크해야 합니다.

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

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

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 에서 설정할 수 있으며, 첫 페이지(홈), 블로그 등의 특정 단계의 출력및 링크 등을 뺄 수도 있습니다.

그동안 티스토리의 기본 스킨을 사용하여 블로그를 운영(후 방치)하고 있었는데, 다른 분들 블로그이 반응형 레이아웃을 적용하여 아주 멋지게 바뀐 것들이 많더군요. 그래서 이번에 워드프레스로 운영중인 홈페이지도 부트스트랩 기반 무료 테마로 바꾸면서 동시에 블로그 스킨에 부트스트랩3를 적용하여 새로 만들었습니다.

따로 디자인 작업 없이 스킨 제작 메뉴얼을 기초로 부트스트랩의 기본 CSS를 적용하고, Font Awesome을 적용시키는 정도에 우선 만족했습니다. 아직 이곳저곳 손 볼 곳도 많고 반응형만 구현했지 뭔가 디자인적인 면은 부족하다고 여겨지지만 조금씩 업데이트해 나가려고 합니다.

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

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

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

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

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

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

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