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

워드프레스의 <설정> 항목은 워드프레스로 만들어진 홈페이지의 운영 관리를 위한 기능을 가지고 있습니다.

일반 설정

사이트 제목 : 홈페이지의 제목으로 브라우저 상단에 나타납니다.

태그라인 : 홈페이지에 대한 간단한 설명을 넣습니다.

특히 이 두 부분은 SEO(검색엔진최적화)와도 관련이 있기 때문에 신중하게 작성하는 것이 좋습니다.

워드프레스 주소(URL) : 웹서버에 설치된 워드프레스의 경로입니다. 절대 수정해서는 안됩니다.

사이트 주소(URL) : 워드프레스가 운영되고 있는 홈페이지의 루트(Root:최상위) 경로입니다. 이곳을 수정하기 위해서는 별도의 작업 과정이 필요합니다.

이메일 주소 : 홈페이지에 어떤 변동이 있을 때에 알림 메일이 발송합니다.

멤버쉽 : 홈페이지에서 회원 가입을 받기 위해서는 체크합니다.

새 사용자를 위한 기본 규칙 : 회원 가입을 한 사용자의 기본 권한을 정합니다.

시간대 : 홈페이지에서 사용할 시간을 정합니다.

날짜 표시 형식 : 글, 댓글 생성 날짜 등을 표시할 때 사용할 표시 형식입니다.

시작 요일 : 한 주의 첫 번째 요일을 정합니다.

사이트 언어 : 홈페이지에서 사용할 기본 언어를 정합니다.

쓰기 설정

표시방식 : 설명 그대로 이며, 두 항목 모두 체크하지 않는 편이 좋습니다.

기본 글 카테고리 : 새로운 글이 등록되는 기본 카테고리를 설정합니다.

기본 글 형식 : 글에 형식(종류)이 별도로 분류되어 있는 경우, 새로운 글의 기본 형식을 설정합니다.

이메일을 이용한 글 작성 : 특정 이메일 계정을 등록하여, 등록한 계정으로 오는 메일을 포스팅하는 기능입니다. 설정 방법이 어렵기 때문에 일반적으로는 별도의 플러그인을 사용하는 경우가 대부분입니다.

업데이트 서비스 : 일기 항목의 '검색 엔진 접근 여부'가 체크되어 있지 않아야 항목이 활성화 됩니다. 홈페이지가 업데이트 된 것을 업데이트 서비스 사이트에 알려줍니다.

읽기 설정

전면 페이지 표시 : 전면 페이지는 홈페이지의 첫 페이지를 말합니다.

- 최근 글 : 첫 페이지가 새로운 글이 업데이트 될 때마다 동적으로 변합니다. 등록 시간의 내림차순으로 글들을 보여줍니다.

- 정적인 페이지(아래에서 선택)

-- 전면 페이지 : 미리 제목과 내용이 모두 있는 별도의 페이지를 만들어 놓고 이를 첫 페이지로 설정합니다.

-- 글 페이지 : 미리 제목만 있고 내용은 없는 별도의 페이지를 만들어 놓고 이를 선택합니다. 최근 글 형식으로 보여집니다.

페이지당 보여줄 글의 수 : 최근 글에서 한 페이지에 출력되는 글의 갯수를 설정합니다.

보여줄 가장 최근의 신디케이션 : 글이 새롭게 등록된 것을 요청하는 사람에게 보내줄 수 있는데(RSS Feed) 그 갯수를 설정합니다.

피드 글의 보기 옵션 : 신디케이션을 통해 보내지는 글의 내용을 모두 보여주게 하거나 일부만 보여주게 할 수 있습니다.

검색 엔진 접근 여부 : 체크를 하면 검색 엔진이 홈페이지의 정보를 입수하지 못하게 합니다. 보통 홈페이지를 만들고 있을 때는 체크해 놓고, 모두 완성이 된 후 체크를 풀어 검색 엔진에 알리는 용도로 사용합니다.

미디어 설정

이미지 크기 : 워드프레스는 이미지가 업로드되면 원본 이외에 3개 크기의 이미지를 자동으로 생성합니다.

작은 사진(썸네일) : 미리보기(프리뷰)로 사용되는 이미지의 크기를 설정합니다.

- 썸네일을 정확한 크기로 잘라냅니다 : 체크하면 원본 비례와 관계없이 설정된 크기대로 썸네일을 만듭니다.

중간크기 : 자유롭게 설정

최대크기 : 자유롭게 설정

(이 외에도 플러그인을 사용하거나 functions.php에 별도의 템플릿 코드를 추가하여 사용자가 정의한 크기의 새로운 이름을 가진 이미지를 만들어 낼 수도 있습니다)

파일 업로드

- 내가 올린 파일들을 년/월별로 분류하기 : 체크를 추천하며, 체크를 풀게 되면 파일명 순서대로 하나의 폴더(wp-content/uploads)에 모두 생성됩니다.

고유주소 설정

고유주소(Permalink)는 각 콘텐츠(페이지, 글)에 부여되는 링크 주소라고 할 수 있습니다.

기본 : ? (물음표)로 시작하는 ID 넘버를 사용하여 고유주소를 만듭니다.

날짜와 이름 : 글이 등록된 날짜(년,월,일)와 슬러그(slug)를 사용하여 고유주소를 만듭니다.

월과 이름 : 글이 등록된 월과 슬러그(slug)를 사용하여 고유주소를 만듭니다.

숫자 : 콘텐츠의 종류와 ID 넘버를 사용하여 고유주소를 만듭니다.

글 이름 : 글의 슬러그(slug)를 사용하여 고유주소를 만듭니다.

사용자 정의 구조 : 주소 구조를 출력하는 태그를 사용하여 사용자가 원하는 형식을 만들어 고유주소를 만듭니다

보통 '기본', '숫자', '글 이름' 등을 주로 사용하고, 그 중에서도 '글 이름'을 사용하는 경우가 많습니다. 또한 특정 테마의 경우는 고유주소가 반드시 '글 이름'이어야 제대로 동작하는 경우도 있습니다.

옵션

고유주소에 나타나는 카테고리와 태그 디렉토리 이름을 다른 이름으로 바꿀 수 있습니다.

http://www.example.com/category/graphic  →  http://www.example.com/program/graphic

http://www.example.com/tag/web-design  →  http://www.example.com/keyword/web-design

https://ko.wordpress.com/ 에서 제공하는 유/무료 테마에 대한 분석, 추천 및 커스터마이징(자식 테마)을 제공하는 서비스인, “테마-딱” 홈페이지 제작을 컨설팅하였습니다.

홈페이지 제작은 설치형 워드프레스와 플러그인을 사용하면서 이를 홈페이지 설계 시안에 맞춰서 커스터마이징하는 방식으로 제작되는 것을 목표로 하였고, 이를 위한 플러그인들을 분석 및 추천하고 이를 커스터마이징하는 방법에 대한 제안을 기본으로 하였으며 플러그인 만으로는 구현하기 힘든 부분에 대한 PHP 프로그래밍 부분도 서포트하였습니다.

현재 테마-딱 홈페이지는 베타테스팅 중입니다.

테마-딱 홈페이지 바로가기 : http://themettack.org/

테마-딱 홈페이지 전면 페이지

테마-딱 홈페이지 소개 페이지

테마-딱 홈페이지 포럼 1

테마-딱 홈페이지 포럼 2

2016년 10월 22일(토) ~ 10월 28일(금)에 광명동굴에서 열리는 '광명동굴 국제 판타지 페스티벌' 홈페이지를 워드프레스로 제작하였습니다.

광명동굴 국제 판타지 페스티벌 - 전면 페이지

부트스트랩3 기반의 테마를 커스터마이징하였으며 특이사항으로는 qTranslate X 플러그인을 통해 다국어 지원을 구현하였습니다. 현재 한국어, 영어, 중국어 콘텐츠가 제공되고 있으며 콘텐츠 번역작업이 계속되고 있습니다.

다국어 플러그인 - qTranslate X

워드프레스 qTranslate X 소개 페이지

서브 페이지는 모두 워드프레스의 '페이지'로 작업이 되었으며, 페이지 구조를 리스트로 출력하는 코드를 사용하여 페이지 우측에 서브 메뉴로 출력하였습니다.

광명동굴 국제 판타지 페스티벌 - 서브 페이지

광명동굴 국제 판타지 페스티벌 홈페이지 바로 가기

광명동굴 국제 판타지 페스티벌 페이스북 페이지

테마 혹은 플러그인의 스타일을 수정하기 위해서는 해당 테마나 플러그인 폴더에 있는 스타일 시트 파일(예: style.css 등)을 직접 수정하는 방법을 많이 사용합니다.

하지만 이 방법의 단점은 테마나 플러그인이 업데이트 되는 경우 따로 백업을 하지 않아 놓았다면 지금껏 수정한 내용이 날아가 버린다는 것입니다. 물론 테마의 경우는 '자식 테마'를 사용하여 이런 문제를 피할 수도 있지만 플러그인은 그렇지 못하죠. 자식 플러그인은 (제가 알기로는)없기 때문입니다.

그렇기 때문에 테마, 플러그인의 업데이트에 영향을 받지 않는 스타일 기능을 구현하면 매우 편리하게 사용할 수 있으리라 보여지며 당연히도 이런 스타일만을 추가해 수정할 수 있는 플러그인이 존재하고 있습니다.

워드프레스 스타일 커스터마이징 플러그인은 여러 종류가 있는데 제가 주로 사용하는 플러그인은 'Simple Custom CSS'입니다.

아래의 링크에서 다운로드 받을 수 있으며, 워드프레스 테마 추가 기능을 통해서도 쉽게 검색하여 바로 설치할 수 있습니다.

https://wordpress.org/plugins/simple-custom-css/

simple custom css 플러그인

이 플러그인은 설치 & 활성화 하는 것만으로 특별한 설정없이 사용자가 직접 입력한 스타일을 워드프레스 홈페이지에 적용시킬 수 있습니다.

아래는 임시로 제작한 '커피와 홈카페 정보'를 제공하는 컨셉의 워드프레스 홈페이지 입니다.

임시 제작 워드프레스 홈페이지

알림판 - 외모 항목에 'Custom CSS'를 클릭하면 커스텀 스타일 입력란이 있습니다. 처음에는 당연히 비어 있습니다.

커스텀 스타일 입력창

커스텀 스타일을 넣어 봅니다.

홈페이지의 폰트를 '나눔고딕' 웹폰트로 바꾸고, 배경 이미지의 크기 속성을 'cover'로 설정합니다. 또한 블록 요소의 float 속성을 초기화 하는 클래스 'clearfix'도 작성합니다.

@import  'http://fonts.googleapis.com/earlyaccess/nanumgothic.css';
body {
  font-family: 'Nanum Gothic';
}

body {
  background-size: cover;
}

.clearfix {
  clear: both;
}

커스텀 스타일 작성

스타일을 추가한 후 하단 혹은 우측의 [Update Custom CSS] 버튼을 클릭하여 적용합니다.

적용된 모습을 웹브라우저에서 확인해 봅니다.

수정된 스타일이 반영된 홈페이지

개발자 모드(F12)를 통해 'body' 요소를 검토해 보면 아래와 같이 배경 크기 속성과 폰트 속성이 수정된 것을 확인할 수 있습니다.

개발자 모드에서 확인

이처럼 'Simple Custom CSS' 등의 플러그인을 사용하여 워드프레스 홈페이지를 자식 테마를 사용하지 않고도 커스터마이징을 간단히 할 수 있습니다.

http://underscores.me/ 에서 언더스코어스 테마(워드프레스 스타터 테마)를 다운로드 합니다. 텍스트 입력 폼에 생성할 테마의 이름을 정해 입력을 하고 GENERATE 버튼을 클릭하면 됩니다.

언더스코어스 홈페이지

다운로드된 압축파일을 풉니다.

언더스코어스 테마 파일

http://getbootstrap.com/getting-started/#download 에서 부트스트랩 프레임워크를 다운로드 합니다.

Download Bootstrap

다운로드 된 파일의 압축을 풉니다. 압축이 풀어진 폴더를 클립보드에 복사(ctrl+c)한 후 언더스코어스 테마 폴더(직접 설정한 테마명)에 붙여넣고, 폴더명을 'bootstrap'으로 수정합니다(예: bootstrap-3.3.6-dist를 bootstrap으로 수정).

부트스트랩 압축 파일 풀기

언더스코어스 테마에 부트스트랩 폴더 붙여넣기

테마 파일 폴더에 있는 미리보기 이미지 'screenshot.png' 파일을 포토샵, 김프 등의 이미지 편집기를 사용하여 편집하고 저장합니다.

그래픽 프로그램에서 screenshot.png 파일 편집

screenshot.png 편집 완료

언더스코어스 테마 폴더에 있는 PHP 파일 중에서 functions.php 파일을 텍스트 에디터에서 엽니다.

functions.php 파일

functions.php 파일의 코드 가장 아래에 다음의 소스 코드를 붙여 넣습니다.

/**
 * Add Bootstrap3 style and script
 */
function bootstrap_styles() {
wp_enqueue_style('bootstrap-stylesheet', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.css');
wp_enqueue_script('bootstrap-script', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'bootstrap_styles');

부트스트랩 추가 소스 코드

"스텝 바이 스텝 워드프레스 테마 쉽게 만들기"를 전자책으로 발매하였습니다.

부트스트랩3와 언더스코어스 테마를 가지고 직접 디자인한 홈페이지를 만드는 방법을 다루었으며, 텍소노미, 커스텀 포스트 타입 등으로 콘텐츠를 분류하여 포스팅하고 이를 출력하는 것을 배울 수 있습니다. 구글 북스에서는 20%정도 미리보기가 가능합니다.

워드프레스 테마 쉽게 만들기

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

끌어오기

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

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

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

- 크롬 : 북마크바 표시

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

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

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

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

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

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

끌어오기 버튼 클릭

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

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

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

끌어오기로 글쓰기 완료

가져오기

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

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

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

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

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

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

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

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

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

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

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

내보내기

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

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

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

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

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

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

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

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

워드프레스 XML 데이터 내용

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

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

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

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

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

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

새 메뉴 생성

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

페이지를 메뉴에 추가

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

메뉴 설정 항목을 살펴보면

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

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

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

메뉴 구조에 링크 URL이 등록

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

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

메뉴에 추가된 카테고리

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

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

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

위치 조정 후 주 메뉴에 체크

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

등록된 주 메뉴 확인

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

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

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

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