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

글 메뉴는 어려울 것도 없이 바로 '글쓰기' 즉, '포스팅'을 말합니다.

요즘에는 블로그의 확산으로 인해 개념 자체를 이해하기 쉽지만, 옛날로 따지자면 게시판에 글 쓰는 것과 비슷하다고 할 수 있겠군요. 하지만 가장 큰 차이점이 있는데 그것은 바로 체계화 된 글쓰기를 통한 "공유"의 개념입니다.

워드프레스의 장점으로 내세우는 SEO (검색엔진최적화)를 위해서 글을 쓸 때 그냥 작성하는 것이 아니라 분류를 나누고 (카테고리), 키워드를 정하고(태그), 타이틀과 요약글을 지정하고 글에 걸맞는 이미지까지 추가하여 글을 써야 한다는 것으로, 마치 신문이나 잡지의 기사를 쓰듯이 체계적으로 써야 한다는 것이고, 워드프레스 글쓰기는 그를 위한 글쓰기 도구를 제공하는 것입니다.

"모든 글"을 선택하면 현재 작성되어 있는 글을을 모두 볼 수 있습니다. 

일괄작업을 통해 편집, 삭제(휴지통으로 이동. 다시 복원 가능)를 할 수 있고 날짜, 카테고리로 필터링(원하는 것만 노출시키는 것)을 할 수 있습니다.

각 글 제목으로 마우스 커서를 이동하면 임시 편집할 수 있는 메뉴가 나타나고 이를 통해 내용을 제외한 몇 가지 글의 정보를 수정할 수 있습니다.

글쓰기 또는 편집창의 모습입니다. 화면 우측 상단의 "화면옵션"에서 노출할 메타박스(각자의 기능을 하는 사각형 패널)를 선택할 수 있습니다. 일반적인 글쓰기라면 "카테고리, 태그, 특성이미지, 슬러그" 부분은 필수적이라고 할 수 있습니다.

특히 슬러그 부분은 되도록이면 영문으로 작성하시기를 바랍니다.

공개하기 항목에서 현재 작성한 글을 "공개"할 것인지, "임시글"로 저장만 해 놓을 것인지 선택할 수 있으며, 가시성 항목에서 고정글로도 만들어 포스트 상단에 항상 노출되게 할 수도 있습니다. 

그리고 포스트의 출력 순서는 날짜별 내림차순 (최근 게시물이 가장 위에 노출)으로 정렬되는 것이 기본 설정이므로 혹시 글의 순서를 바꿀 일이 있다면 공개 날짜를 수정하는 방법으로 가능합니다.

모든 글들은 되도록 카테고리로 분류되어야 합니다. 

카테고리의 등록은 "글 - 카테고리"를 통해 할 수 있고, 하위 카테고리에서 "상위 카테고리를 지정"하는 방법으로 카테고리 계층구조를 만들 수 있습니다. 일반적으로 2단계~3단계 정도로 설계하는 편입니다.

아래쪽 그림에서 "-"가 붙은 카테고리가 2단계 하부 카테고리 입니다. "--" 처럼 2개가 붙으면 3단계 하부 카테고리가 됩니다.

카테고리 역시 슬러그는 영문으로 해야 합니다.

그리고 이미 만들어진 카테고리의 계층구조를 수정하기 위해서는 반드시 해당 카테고리의 편집모드로 들어가야 합니다.

태그는 해당 게시물을 대표할 수 있는 키워드(keyword) 라고 보면 됩니다. 카테고리를 큰 형태의 분류라고 본다면 태그는 작은 형태의 분류라고 보면 됩니다. 태그는 계층구조가 없고, 해당 글 속에서 여러번 사용된 단어 또는 중요한 단어를 사용하는 것이 일반적입니다. 슬러그는 이름 그대로 출력되게 하는 편입니다. 

<Image URL - http://wpsmackdown.com/>

우연히 발견한 것이라 정확한 것은 아닙니다만 자식테마를 사용해서 테마를 커스터마이징하고 포스팅을 하는 경우에 페이지, 포스트의 본문에 삽입되는 "이미지 슬라이더"가 동작하지 않는 것을 알게 되었습니다.

주로 사용하는 Plugin인 "Meta Slider"도 동작을 하지 않았고, "Shortcode Ultimate"에서 제공하는 슬라이더도 동작을 하지 않고 등록된 이미지와 제목만 쭈욱 나열되는 현상이 있었습니다. 그런테 설정 창에서의 미리보기는 잘 되었습니다.

쇼트코드를 넣었다가 뺐다가 하면서 몇시간을 구글과 씨름을 했지만 원인을 못 찾았는데, 혹시나 싶어서 자식테마에 있던 "single.php"를 삭제하니 제대로 동작을 하더군요...이런;;;

(인터넷을 좀 더 찾아보니까 이런 문제 때문인지 워드프레스 사용자 사이에서 자식테마의 사용 여부에 대해서 말이 좀 있었습니다.)

그래서 앞으로는 테마를 그냥 통채로 복사해서 테마명 뒤에 -custom 이라고 추가만 하고 셋팅해서 작업을 할 생각입니다. 이번의 슬라이더 문제 말고도 다른 문제들이 곳곳에 숨어있을 것 같아서요. 커스텀포스트 타잎 이라던가 텍소노미 출력 부분에서도 왠지 문제가 생길 것 같은 예감이...

알림판 - 홈

알림판(대시보드)는 현재 사용중인 워드프레스의 버전, 업데이트 정보, 글, 댓들 등의 등록 현황, 새로운 뉴스, 빠른 글 쓰기 등을 보여주는 관리자용 종합게시판입니다. 사이트 유입 현황 확인 등의 플러그인을 추가하는 경우 등에도 알림판에 해당 내용을 출력하는 메타박스(관리 패널)가 생기는 경우가 많습니다. 아래에서는 KBoard를 설치했기 때문에 "코스모스팜 대시보드"라는 패널이 생성된 것을 볼 수 있습니다.

참고로 저의 경우는 "빠른 임시글"을 많이 사용하지 않기 때문에 비활성화하고, "활동", "환영합니다"도 비활성화 합니다.

사이트 현황과 워드프레스 뉴스만 활성화 해놓는 편이죠.

 

 

알림판 - 업데이트

 

워드프레스의 테마, 플러그인 등의 업데이트 현황과 함께 일괄(또는 부분) 업데이트 기능을 제공합니다.

중요한 것은 워드프레스가 업데이트가 되었다고 바로 하는 것 보다는 약간 두고 보면서 새 버전에 대한 정보를 살펴보고 천천히 업데이트 하는 것이 좋기 때문입니다. 특히 유료 테마를 사용하고 있거나 특정 플러그인을 사용하고 있는 경우, 테마나 플러그인 제작사의 홈페이지를 꼭 들어가서 새로운 워드프레스 업데이트 버전에서 어떤 문제가 발생하지는 않는가에 대해 알아본 후 업데이트를 하는 편이 좋습니다.

 

 

또한 테마가 업데이트 되는 경우, 사용자가 기존 테마를 고쳐서 사용하고 있었다면(커스터마이징) 해당 테마를 덮어씌워서 기존의 설정이 다 날아가 버리게 될 수도 있기 때문에 주의해야 합니다.

물론 이런 경우를 대비하는 방법이 바로 "자식테마"입니다. 자식 테마는 테마를 설명할 때 다룰 것입니다.

 

워드프레스에 접속해서 관리자 화면을 보면 우측 상단에 도움말 항목이 있습니다.

테마 또는 플러그인 설치로 인해 새롭게 추가된 메뉴들이 아닌 워드프레스 기본 메뉴들이라면 각 메뉴에 대한 설명히 자세하게 나와 있기 때문에 한 번씩 꼭 읽어보시는 것을 추천합니다.

추가 정보를 통해 글 관리 문서로 이동하여 자세한 사항들도 볼 수도 있고, 지원 포럼을 통해 문제에 대한 해결책 및 기능 구현 등에 관한 다양한 정보를 얻을 수 있습니다.

물론 전부 영어라는 것은 함정이겠죠.

하지만 워드프레스로 홈페이지를 만들고 싶다면 어쩔 수 없이 친해져야 합니다.

워드프레스 공부의 가장 좋은 방법은 바로 워드프레스 그 자체 입니다.

책은 그것을 보조할 뿐이고요...

스타일을 수정해서 사이드바의 텍스트를 좀 정리합니다.

구글 크롬의 요소 검사를 통해 클래스명을 살펴보니 <h1> 요소에 "widget-title"로 정의되어 있습니다.

관리자 메뉴의 "외모 - WP Editor"를 통해서 custom.css 를 열고, 위젯 제목 텍스트 크기를 줄이기 위해 아래의 스타일을 추가합니다.

.widget-title { font-size: 1.6em; }

리스트의 점을 없애고 좌측 마진을 좀 줄이기 위해 아래의 스타일을 추가합니다.

.widget ul li { list-style: none; }

.widget ul { margin-left: 10px; }

<수정 전>

<수정 후>

추가로 클래스 widget-title을 아래와 같이 수정하여 위젯 제목과 리스트 사이에 가로선을 넣어서 구분을 짓도록 하겠습니다.

.widget-title { font-size: 1.6em; border-bottom: 1px solid #eee; }

이제 위젯 구성을 좀 바꾸보겠습니다.

검색창, 최근 글, 카테고리만 남기고 나머지는 모두 삭제하고 최신 글의 제목을 "최신 상품"으로, 카테고리 제목을 "제품 카테고리"로 수정한 후 [저장하기]를 클릭하여 적용합니다.

사이드바 가장 아래에 베너이미지를 추가하도록 하겠습니다.

플러그인 검색을 통해 "image widget"을 검색하고, 설치 후 활성화 합니다.

Image Widget

https://wordpress.org/plugins/image-widget/

관리자 메뉴의 "외모 - 위젯"을 선택하고 <Image Widget>을 사이드바 영역으로 넣습니다(드래그 & 드롭).

[Select an Image] 버튼을 클릭하고 이미지 라이브러리(로컬 파일 업로드 가능)의 이미지를 불러옵니다.

Title에 적당한 이름을 넣은 후 Link 에 연결될 인터넷 주소를 넣고 아래쪽 풀다운 메뉴에서 Open New Window 를 선택합니다.

또 Size는 Custom 으로 설정하고 Width, Height 모두 0으로 입력합니다. Align은 center로 설정합니다.

(가로, 세로 사이즈를 넣지 않아야 브라우저의 가로 사이즈가 줄었을 때 자동으로 사이즈가 줄어듭니다)

[저장하기]를 클릭하고 홈페이지의 변경된 모습을 확인합니다.

브라우저 크기가 줄어도 이미지의 크기가 자동으로 조절됩니다(Responsive).

<1024*768>

<800*600>

글의 내용이 늘어나면 그 사이를 이동하는 것도 만만치 않은 일입니다. 그래서 일반적으로 페이지 번호를 달아서 이를 해결하는 데 _S 로 만든 테마는 그런 기능이 없이 그냥 이전글, 다음글로만 이동할 수 있게 되어 있습니다.

그래서 플러그인을 통해 페이지 번호를 달아보겠습니다.

플러그인 검색에서 pagination 으로 검색을 해보면 TW Pagination 이라는 플러그인이 검색됩니다. 업데이트 된 지도 오래되었고 버전도 1.0 으로 끝인데, 별이 다섯개. 그리고 검색 최상단에 위치하고 있네요.

http://wordpress.org/plugins/tw-pagination/

플러그인을 설치하고 활성화 한 후 설정페이지로 갑니다. 관리자 메뉴의 "설정 - TW Pagination"입니다.

다른 것은 건들지 않고, Pagination Label 부분은 빈 칸으로 만듭니다. 굳이 라벨까지 달 필요는 없으니...

Previous Page(이전 페이지), Next Page(다음 페이지) 부분은 << 와 >>로 되어 있는데 ◀ 와 ▶ 로 바꿉니다. 눈에 확 띄게요.

특수문자 입력은 검색엔진에서 검색하셔도 되고 한글의 초성 (ㄱ,ㄴ,ㄷ,ㄹ,ㅁ,...)만 누르고 "한자"키를 누르면 각 초성마다 지정된 특수문자를 선택할 수 있습니다.

Advanced Settings 에서 Before Markup 부분은 페이지 번호 부분을 감싸는 요소 사용자가 지정할 수 있는데, 

기본값인 <div class="navigation">을 <div class="page-navi">로 고칩니다.

아래로 스크롤 하면 플러그인의 사용방법이 나옵니다.

쉽게 말하면 페이지 번호가 들어가 부분인 포스트(글)과 코멘트(댓글) 부분에 각각 

<?php if(function_exists('tw_pagination')) tw_pagination(); ?> 와

<?php if(function_exists('tw_pagination_comments')) tw_pagination_comments(); ?> 를 넣으면 된다는 뜻입니다.

관리자 메뉴에서 "외모 - WP Editor"를 선택하고, home.php를 엽니다.

<?php aca_paging_nav(); ?> 를 지우거나 주석으로 처리하고(사용자마다 함수명은 다를 것입니다), 

<?php if(function_exists('tw_pagination')) 

tw_pagination();

?>

를 넣고 저장합니다. 이제 홈페이지에 페이지 번호가 들어간 것을 확인합니다.

만들어진 페이지 번호를 중앙정렬 하기 위해 custom.css를 열고 스타일을 추가합니다.

/* 페이지 번호 */

.page-navi { text-align: center; }

.page-navi .tw-pagination { display: inline-block; }

코멘트 부분에도 페이지 번호를 넣기 위해 comments.php 파일을 엽니다. 코드를 살펴보면 코멘트 네비게이션 부분이 두 곳이 있습니다. 두 곳을 지우고 대신 

<?php if(function_exists('tw_pagination_comments')) tw_pagination_comments(); ?>

를 넣고 저장합니다(혹시 모르니 원래의 코드들은 따로 복사해서 저장해 놓으세요).

코멘트에도 페이지 번호가 들어간 것을 확인할 수 있습니다. 위 아래 두 군데에 넣는 것은 댓들이 길어져서 스크롤하기 어려울 때를 대비한 것으로 보입니다.

회사소개 마지막에 있는 오시는길 페이지에 구글지도를 넣겠습니다. 비록 동해를 일본해라고 표기하는 괘씸한 부분은 있지만 (국내한정 '동해' 표기로 알고 있는데 맞는지...) 이 외에 쓸만한 서비스가 보이지 않는지라 어쩔 수 없습니다.

국내 돈 많이 벌고 있는 주요 포털 사이트는 뭐하고 있는지...

주소 : 서울특별시 마포구 공일동 123-45

전화 : 02-123-4567

핸드폰 : 101-123-4567

대충 입력해 봤습니다. 주소 부분 아래쪽에 구글에서 지도를 가져와 넣을 것입니다.

구글지도에 접속해서 주소를 입력한 후 위치를 찾습니다.

우측 하단의 "톱니바퀴 모양"의 아이콘을 클릭하고, "지도 공유 및 삽입"을 선택합니다.

"지도 삽입"탭을 클릭하고 지도 크기 항목을 "크게(800*600)"로 설정하면 그에 맞춘 미리보기를 출력해줍니다.

iframe 소스 코드를 클릭해서 클립보드로 복사합니다(ctrl+c).

오시는 길 페이지 편집에서 "텍스트" 모드를 선택하고 주소 내용 하단에 붙여넣습니다(ctrl+v).

저장 후 페이지 보기로 확인합니다.

회사소개 부분의 두 개의 서브메뉴(페이지)에 각 페이지 성격에 맞는 내용을 생각해서 작성합니다.

일반적인 글쓰기로 넣어도 상관은 없지만 부트스트랩의 몇가지 기능을 사용하면 더 좋습니다. 이와 관련된 내용들은 부트스트랩 2.3.2 사이트에 가면 포스팅을 위해 사용할 만한 CSS, Componets, JavaScript 등이 예제로 잘 나와 있습니다.

http://getbootstrap.com/2.3.2/

인사말 부분은 "비주얼" 모드에서 아래의 내용을 넣었습니다. 생각대로 나오지는 않을 것입니다만 그냥 입력하고 이후 수정합니다.

사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. “냐옹(NyaOng)” 홈페이지를 방문해주셔서 감사합니다.

“냐옹”은  2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.

“냐옹”은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.

“냐옹”의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.

항상 집사님의 건강, 애묘의 건강을 위해 노력하는 “냐옹”이 되겠습니다. 감사합니다.

냐옹 대표 아무개

<브라우저>

<HTML 소스>

<p>사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. "냐옹(NyaOng)" 홈페이지를 방문해주셔서 감사합니다.<⁄p>
<p><blockquote>"냐옹"은  2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.<⁄blockquote><⁄p>
<p>항상 집사님의 건강, 애묘의 건강을 위해 노력하는 "냐옹"이 되겠습니다. 감사합니다.<⁄p>
<p>냐옹 대표 아무개<⁄p>

blockquote 들여쓰기 부분이 위에 처럼 세로선으로 표시되는 것은 부트스트랩 스타일 때문입니다. 주의할 점은 "비주얼" 상태에서 blockquote 를 넣게 되면 세 부분으로 나뉘어 나오지 않고, 하나로 묶여 나오기 때문에 내용을 입력한 후 '텍스트' 모드로 들어가서 소스를 수정해 줘야 한다는 것입니다. 
비주얼 모드와 텍스트 모드에서 서로 차이가 발생하는 것은 워드프레스 포스팅에서 자주 일어나는 일이기때문에 포스팅할 때는 항상 생각대로 출력되는지 확인을 꼭 해보는 습관이 필요합니다.

연혁 페이지의 내용들은 "탭(tab)" 방식으로 넣을 것입니다. 부트스트랩에서 기본적으로 제공하고 있으며 보다 쉬운 포스팅을 위한 "부트스트랩 쇼트코드 플러그인"들도 많지만 우선은 기본적인 하드코딩 방식으로 넣을 것입니다.

부트스트랩 홈페이지에서 Component 부분에 보면 Navs 라는 항목이 있습니다. 그곳에서 아래쪽으로 좀 더 스크롤하면 
"Tabbable nav"라는 항목이 있습니다. 이 부분의 소스를 복사합니다.

연혁 페이지로 돌아와서 "텍스트"모드에서 복사한 소스를 [ctrl+v]로 붙여넣습니다. 그 후 내용을 수정합니다.

소스를 잘 보면 위쪽에 제목, 아래쪽에 내용이 들어가는 것을 알 수 있습니다. 그래서 위쪽에 년도, 아래쪽에 사업 활동내용을 넣었습니다. 2012년 입력을 위해 요소를 하나씩 더 추가한 것도 보입니다.

사실상 이것만으로는 매우 썰렁한 페이지입니다만 페이지 타이틀과 내용 사이에 대표이미지를 넣거나 하는 방법을 통해 좀 더 보기 좋은 페이지로 업그레이드 할 수도 있을 것입니다.

Meta Slider

http://wordpress.org/plugins/ml-slider/

메타슬라이더. 무료버전이지만 내부에 4가지 종류의 슬라이더를 제공하고 있습니다.

4개 중에서 개인적으로는 Nivo Slider 를 주로 사용하는데 가로, 세로 풀사이즈를 잘 지원해서라고나 할까요?

테마 포레스트에서 판매되고 있는 워드프레스 테마중에서도 (대략)순위권에 있는 테마로, 다양한 5가지의 헤더 및 3가지 레이아웃은 물론 포스팅을 위한 쇼트코드 역시 지원하고 있다.

레볼루션 슬라이더(유료)를 제공하여 메인화면의 이미지를 멋지게 만들 수도 있고, 메가푸터의 행도 1~4행까지 자유롭게 설정할 수 있고 이 모든 것을 옵션에서 모두 조정할 수 있다.

사이트는 기본 디자인은 손 대지 않고, 약간의 커뮤니티 기능을 추가하는 방향으로 커스터마이징 되었는데

- 특정 카테고리 필터링

- 특정 메뉴 필터링 (로그인한 사용자만 보이는 메뉴)

- 글쓰기, 쓴 글 관리, 프로필 관리 등이 가능한 프론트엔드(Front End) 기능

- 아바타 업로드 기능

등이 추가 되었다.

다른 것들은 어느 정도 해결이 되었는데 아바타 업로드 기능의 경우 프론트엔드 에서 '전혀' 동작하지 않고 반드시 관리자 화면에서만 업로드가 가능했기 때문에 어쩔 수 없이 아바타 부분은 관리자가 직접 업로드 하는 방향으로 정했다.

그 외에 설치 및 사용, 커스터마이징에 있어서 특별한 버그도 없었고 기능도 만족스러웠다.

장점

- 깔끔한 디자인, 다양한 옵션과 기능

- 레볼루션 슬라이더 기본 제공 (레이어를 이용한 애니메이션 가능 - 기능이 많다)

단점

- 발견 못함

강추하는 테마.

멋진 홈 화면을 만들기 위한 슬라이더 애니메이션을 위해서는 할 일이 좀 많은 것은 장점 아닌 장점.