'테마'에 해당되는 글 6건

워드프레스 테마 파일 기능별 분류

테마 계층 구조에서는 홈페이지의 컨텐츠가 출력되는 일련의 흐름을 기준으로 설명했고, 이번에는 기능별로 파일들을 묶어서 살펴봅니다. 최하단에 있는 "계층 필터" 항목은 PHP 프로그래밍에 사용되는 것이므로 프로그래밍 지식이 없으신 분은 우선은 무시하셔도 됩니다.

참고 : 설명에 있는 "템플릿 파일"은 테마를 구성하는 "PHP 파일"과 같은 뜻이라고 생각하면 됩니다.

홈페이지 표시

사이트 전면 페이지 혹은 정적 페이지를 통해 출력되는 블로그 글 인덱스 페이지 표시에 사용되는 템플릿 파일입니다. 주의점으로는 사이트 전면 페이지의 경우 전면페이지 템플릿이 블로그 인덱스 페이지(home) 템플릿보다 우선한다는 것입니다.

  1. home.php : 읽기 설정 - 전면 페이지 - 블로그에 설정된 페이지에 연동되어서 출력
  2. index.php : 필수 테마 파일

전면 페이지 표시

정적 페이지나 블로그 글 인덱스가 출력되는 전면 페이지를 통해 사이트 전면 페이지 표시에 사용되는 템플릿 파일입니다.

  1. front-page.php : 읽기 설정과 관계 없이 사용가능
  2. 정적 페이지 표시 규칙 : 읽기 설정 - 정적인 페이지 - 전면 페이지가 설정되어 있는 경우
  3. 홈 페이지 표시 규칙 : 읽기 설정 - 정적인 페이지 - 글 페이지가 설정되어 있는 경우

개별 글 표시

개별 글 표시에 사용되는 템플릿 파일입니다.

  1. single-$posttype.php : 글 유형에 따라 해당 글 표시(single-product.php)
  2. single.php
  3. index.php

페이지 표시

정적 페이지 표시에 사용되는 템플릿 파일입니다.

  1. 사용자 템플릿 파일 : 페이지 템플릿 정의가 되어 있는 PHP파일
  2. page-$slug.php : 페이지의 슬러그명을 통해 해당 페이지 표시(page-recent-news.php)
  3. page-$id.php : 페이지의 ID를 통해 해당 페이지 표시(page-6.php)
  4. page.php
  5. index.php

카테고리 표시

카테고리 아카이브 표시에 사용되는 템플릿 파일입니다.

  1. category-$slug.php : 카테고리의 슬러그명을 통해 해당 카테고리 아카이브 표시(category-news.php)
  2. category-$id.php : 카테고리의 ID를 통해 해당 카테고리 아카이브 표시(category-6.php)
  3. category.php
  4. archive.php
  5. index.php

태그 표시

태그 아카이브 표시에 사용되는 템플릿 파일입니다.

  1. tag-$slug.php : 태그의 슬러그명을 통해 해당 태그 아카이브 표시(tag-sometag.php)
  2. tag-$id.php : 태그의 ID를 통해 해당 태그 아카이브 표시(tag-6.php)
  3. tag.php
  4. archive.php
  5. index.php

사용자 분류 표시

사용자 분류 아카이브 표시에 사용되는 템플릿 파일입니다.

  1. taxonomy-$taxonomy-$term.php : 사용자 분류명과 소분류명(항)을 통해 해당 아카이브 표시(texonomy-post_format-post-format-link.php)
  2. taxonomy-$taxonomy.php : 사용자 분류명을 통해 해당 아카이브 표시(taxonomy-sometax.php)
  3. taxonomy.php : 사용자 분류를 통해 아카이브 표시
  4. archive.php
  5. index.php

사용자 글 유형(Custom Post Type) 아카이브 표시

사용자 글 유형 아카이브 표시에 사용되는 템플릿 파일입니다.

  1. archive-$posttype.php : 사용자 글 유형 아카이브 표시(archive-product.php)
  2. archive.php
  3. index.php

사용자 글 유형의 개별 페이지를 표시는 "개별 글 표시"를 참조합니다.

글쓴이 표시

글쓴이 아카이브 표시에 사용되는 템플릿 파일입니다.

  1. author-$nicename.php : 글쓴이의 nicename을 통해 해당 글쓴이 아카이브 표시(author-rami.php)
  2. author-$id.php : 글쓴이의 ID를 통해 해당 글쓴이 아카이브 표시(author-6.php)
  3. author.php
  4. archive.php
  5. index.php

날짜별 표시

날짜별 아카이브 표시에 사용되는 템플릿 파일입니다.

  1. date.php
  2. archive.php
  3. index.php

검색 결과 표시

검색 결과 아카이브 표시에 사용되는 템플릿 파일입니다.

  1. search.php
  2. index.php

404(결과 없음) 표시

서버 404 에러 표시에 사용되는 템플릿 파일입니다.

  1. 404.php
  2. index.php

첨부 파일 표시

개별 첨부 파일 페이지 표시에 사용되는 템플릿 파일입니다.

  1. $mimetype.php : 첨부 파일의 종류에 해당하는 페이지 표시(image.php, video.php, application.php). 예 : text/plain 의 경우 다음의 순서로 참조.
    1. text.php
    2. plain.php
    3. textplain.php
  2. $subtype.php : 첨부 파일의 확장자에 해당하는 페이지 표시(jpg.php, mp4.php)
  3. $mimetype-$subtype.php : 첨부파일의 종류 및 확장자에 해당하는 페이지 표시(image-jpg.php, video-mp4.php)
  4. attachment.php
  5. single.php
  6. index.php

계층 필터

워드프레스의 템플릿 시스템은 계층적으로 필터를 적용할 수 있습니다. 필터링을 위한 필터 이름은 "{$type}_template"를 사용합니다. PHP 프로그래밍에 사용할 수 있습니다.

    필터 리스트
  • index_template
  • 404_template
  • archive_template
  • author_template
  • category_template
  • tag_template
  • taxonomy_template
  • date_template
  • home_template
  • front_page_template
  • page_template
  • paged_template
  • search_template
  • single_template
  • text_template, plain_template, text_plain_template (all mime types)
  • attachment_template
  • comments_popup
블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

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

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

 

 

 

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

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

 

 

 

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

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

 

 

 

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

 

 

 

 

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

 

 

 

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

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

 

 

 

'워드프레스 > 기초 블로그 제작' 카테고리의 다른 글

WP기초 - 외모 - 메뉴  (1) 2015.04.05
WP기초 - 외모 - 위젯  (0) 2015.04.03
WP기초 - 외모 - 테마  (0) 2014.09.29
WP기초 - 댓글  (0) 2014.05.17
WP기초 - 페이지  (0) 2014.05.14
블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

홈페이지 제작

기타 2014. 7. 29. 01:48

의뢰를 받아 워드프레스를 사용한 홈페이지를 제작했습니다.


클라이언트의 취향 및 요청이 90% 이상 반영된 홈페이지로, 워드프레스, 부트스트랩, 언더스코어스 로 제작되었습니다.

메뉴부분은 그냥 간단한 jQuery 소스를 찾아서 만들었는데, 약간 움직임이 끊기는 느낌...




 

URL

http://leehochul.org/


 



블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,


전영학 아카데미 메인 전영학 아카데미 서브

전영학 아카데미 글쓰기 전영학 아카데미 내용


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

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


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

- 특정 카테고리 필터링

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

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

- 아바타 업로드 기능

등이 추가 되었다.


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

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


장점

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

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


단점

- 발견 못함


강추하는 테마.

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

'워드프레스 > 테마 & 플러그인' 카테고리의 다른 글

TW Pagination (한글화 파일 추가)  (0) 2014.05.07
Meta Slider  (0) 2014.05.05
Easy Fancybox (한글 언어 파일 추가)  (0) 2014.04.15
Auto Excerpt everywhere (한글화 파일 추가)  (0) 2014.04.11
Lens  (0) 2014.04.11
블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

인터뷰코리아 홈페이지 인터뷰코리아 홈페이지 서브

워드프레스로 홈페이지를 만들 때 제일 먼저 할 일이 테마 선정인데, 보통은 클라이언트에게 원하는 홈페이지의 디자인(스타일) 및 기능 등에 대한 이야기를 듣고 몇개의 테마를 추천한 후 그 중에서 선택하게 하거나, 원하는 테마를 직접 테마포레스트에서 선택하게 합니다. 물론 테마 포레스트에 대한 사용 설명이 좀 필요하고...

INTV - interviewkorea.com 제작에서는 이미 워드프레스에 대한 설명을 들었던 상태로 직접 테마를 선택한 경우로 특히 대표가 소규모 간이 스튜디오를 직접 꾸밀 정도로 사진촬영에 관심이 많았기 때문에 직접 선택을 하게 하는 것이 서로간에 만족도가 높으리라고 생각 했습니다.

Lens 테마는 '좌측 네비게이션' 방식의 "포트폴리오형 테마"로 어두운 회색톤을 기본으로 하나의 메인컬러를 지정하여 포인트를 주는 형태의 디자인을 취하고 있으며, 이 메인컬러는 마우스 롤오버 색, 타이틀 배경색 등에 사용됩니다.
기본 디자인은 전면에 사진을 2~4열로 연속적으로 나열하고 있기 때문에 무엇보다 사진의 퀄리티에 의해 디자인 퀄리티가 좌우됩니다(1280*1024에서 3열).

메인페이지에서 마우스 롤오버를 하게 되면, 해당 포스트의 타이틀, 요약글, 카테고리 등이 나타나서 내용을 살짝 옅볼 수 있게 해 놓았으며, 컨텐츠는 상단 이미지 슬라이어(동영상 지원)와 하단 2단 레이아웃 구성의 내용으로 출력됩니다.

제작시 큰 문제가 없었지만, 단지 테마포레스트에서 받은 버전을 설치하니 업데이트 버전으로 설치하라는 메시지가 떠서 업데이트 했더니 메인페이지 사진 배열에 문제가 발생하고 클릭시 링크된 컨텐츠을 찾지 못하는 경우가 있었습니다. 알고 보니 고유주소 문제였고... 그냥 워드프레스 기본값으로 설정하니 문제가 해결되었습니다. 그래도 사진 배열 문제는 없어지지 않아 다시 원래 버전으로 돌아올 수 밖에 없었습니다.

장점
- 차분하고 정돈된 디자인 & 레이아웃.
- 동영상 지원 이미지 슬라이더 포함.
- 커스텀 포스트 타입으로 Project와 Gallery 2개 제공.
- 이미지 노출방식 수정으로 디자인 스타일 변경 가능.
- 테마 옵션에서 다양한 설정 가능 - 요약글(excerpt) 기능, 구글맵
- 샘플 데이터 제공.

단점
- 신버전 업데이트시 이미지 배열상 약간의 문제 발생.
- 이미지 슬라이더가 좀 무거움.
- 페이지기능 (pagination) 미지원(?).

제작홈페이지
http://www.interviewkorea.com/

Lens 테마
http://themeforest.net/item/lens-an-enjoyable-photography-wordpress-theme/5713452?WT.ac=search_thumb&WT.seg_1=search_thumb&WT.z_author=pixelgrade




'워드프레스 > 테마 & 플러그인' 카테고리의 다른 글

Meta Slider  (0) 2014.05.05
Inovado  (0) 2014.05.05
Easy Fancybox (한글 언어 파일 추가)  (0) 2014.04.15
Auto Excerpt everywhere (한글화 파일 추가)  (0) 2014.04.11
Egofolio  (0) 2014.04.03
블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

김내혜 홈페이지 메인 김내혜 홈페이지 서브

Egofolio 테마로 친분이 있는 작가분 홈페이지를 제작. 4월 7일 오픈.

처음에는 기본틀에서 큰 변화없이 컨텐츠만 채우는 것으로 생각했는데, 작가분 마음이 살짝 바뀌어서 회원기능을 넣기와 중간 메뉴를 넣어 년도별 포트폴리오를 설명할 브릿지 페이지를 원함. 둘 다 테마 자체에서는 지원하지 않는 기능.

회원기능 넣기의 경우 Members 플러그인을 사용해서 구현은 했지만 Portfolio 부분의 이미지슬라이드 부분은 멤버기능에서 벗어난 상태로 무조건 노출됨. 이것을 바꾸려면 테마 코어 파일을 뜯어 고쳐야 함.
작가분께 말을 하고 회원기능 포기 또는 슬라이드 기능을 포기하고 게시물 내용에 그냥 이미지 삽입으로 대체 중 택1을 종용. 결국 회원기능을 포기하고 슬라이더 사용 & 컨텐츠 100% 오픈으로 결정.

브릿지 페이지의 경우도 테마 자체가 ajax를 사용해서 원페이지 로딩으로 페이지를 불러오고, 서브메뉴 기능이 없기 때문에 일이 커진다는 것을 다시 한번 강조. 처음 컨셉 "심플 & 오픈(공개)"를 다시 한 번 상기.

결국 맨 처음 기획대로 진행하기로 함...

Egofolio 테마에 관한 평가.

장점
- 심플하고 멋진 디자인 & 깔끔한 원페이지 애니메이션.
- 간단한 사용방법.
- 포트폴리오용 이미지 슬라이더 기본제공.
- 부트스트랩 기반 레이아웃 및 몇개의 쇼트코드 제공.

단점
- 서브메뉴 미지원.
- 샘플 데이터 미제공.
- 포트폴리오 페이지네이션(pagenation) 미지원 = 내용이 늘어날 수록 스크롤이 계속 길어짐;;;
- 메인페이지 부분의 이미지 슬라이더 부분에서의 이미지 정렬 문제 미해결.
   제작사에 문의하여 CSS 수정으로 맞추긴 했지만 브라우저 가로크기가 좁아졌을 때 이미지 중앙 정렬이 자동으로 안 됨.
   아이폰 오페라브라우저에서도 슬라이더 이미지의 중앙정렬이 자동으로 안됨.
- IE9 이하에서 메인페이지 슬라이더의 이미지가 왜곡됨. HTML5 호환성문제로 보임.
- Content 부분에서 이미지 원본보기 링크 시 문제 있음. 원페이지 로딩을 위한 ajax 애니메이션 기능과 충돌발생.
   Blog 부분에서는 정상 작동.
- 초기셋팅이 고유주소를 postname으로 하는데 IE에서 404에러 발생함. slug를 '영문'으로 적용하여 해결.
- 초기셋팅이 .htaccess를 건드려서 500 내부서버오류 발생함.
   테마의 function.php에서 .htaccess 변경 부분을 주석처리해서 해결.

후기
- 슬라이더 이미지 중앙정렬 부분의 해결이 필요하다. 그런데 테마포레스트의 샘플페이지는 잘 나오는 것은 함정.
- 역시 삽질은 필요하다.
- 재구매는 안 할 것 같다.

제작 홈페이지
http://www.kimnaehye.com/

Egofolio 테마
http://themeforest.net/item/egofolio-history-ajaxed-reponsive-wordpress-theme/2772200?WT.ac=solid_search_item&WT.seg_1=solid_search_item&WT.z_author=undsgn

 

'워드프레스 > 테마 & 플러그인' 카테고리의 다른 글

Meta Slider  (0) 2014.05.05
Inovado  (0) 2014.05.05
Easy Fancybox (한글 언어 파일 추가)  (0) 2014.04.15
Auto Excerpt everywhere (한글화 파일 추가)  (0) 2014.04.11
Lens  (0) 2014.04.11
블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,