워드프레스 ( 76 ) 워드프레스 테마 조사. 상품,제품 표현 기능이 풍부한 것 위주-우커머스, WPML 필수 호환. 개요. 본 글에서는 워드프레스 테마중에서 상품(제품) 페이지 부분이 풍부한 유료테마를 조사한 결과 최종적으로 4종의 테마를 정리한다. 상세 설명. 조사사유 : 워드프레스 테마들이 방대하게 많고 최다 판매실적이 있는 테마라고 해도 기능은 이것저것 많은 것 같으나, 상품이나 제품 페이지에서의 풍부한 기능은 아쉬운 경우가 많았다. 상품 관련 표현이 풍부한 것들을 조사한다. 테마 필수 조건 : 아래 3가지를 동시에 만족하는 것으로 한정함. 1. 우커머스 연동 2. 다국어 플러그인 WPML 연동. 3. 상품 소개 페이지가 풍부할것. - 숍, 상품카테고리, 상품상세페이지. 4. 완전한 반응형. 5. IE8,9,10,11 모두 지원할것. 조사결과 테마 4종이 쓸만함. 1. Total URL : http://theme.. 2014. 11. 4. 워드프레스 회원관리 UserPro. WPML에서 다국어 페이지 설정. 결론 : UserPro 는 WPML에서 완전하게 다국어 표현못함. 개요. 워드프레스 다국어 플러그인 WPML 환경에서 회원관리 플러그인 UserPro 를 사용할 때, UserPro 의 페이지들(로그인폼,회원가입폼등이 모두 페이지로 보임.)을 WPML에서 설정한 다국어로 표현하기 위한 설정 정리. 그러나, 최종적으로 UserPro 는 WPML 다국어 환경에서는 정상적인 언어표현이 안되며, 비정상 언어 표현되는 상황 정리함. 관련정보. 1. 워드프레스 다국어 플러그인 WPML 설치정보 -> http://igotit.tistory.com/113 2. 워드프레스 회원관리 플러그인 UserPro 설치정보 -> http://igotit.tistory.com/181 3. UserPro 에 한글 표현하기 위한 설정 -> http://igotit.tistory.com/184 1. 해결.. 2014. 11. 1. 워드프레스 회원관리 UserPro 에서 한글 보이게 하기 .po파일 편집 .mo파일 만들기. 개요. 워드프레스 회원관리 플러그인 UserPro 에 한글 보이게 하기 위하여 poedit 프로그램 이용하여 영어 문구를 한글로 번역하는 방법을 설명하고 최종적으로 .po 파일, .mo 파일 만들어 플러그인 언어폴더에 넣어서 웹에서 한글이 보이도록 한다. 한글외에 중국어, 일본어 등 타 언어도 동일한 방법으로 다국어 표현이 가능함. 사전준비사항 : poedit 프로그램이 설치되어있어야 함. 설치정보 -> http://igotit.tistory.com/183 1. 한글 .po, mo 파일 만들기. - poedit 이용. 1. 한글 .po 파일 준비 UserPro 의 languages 폴더(wp-content/plugins/userpro/languages) 에 있는 영문 .po 파일(파일명:userpro-e.. 2014. 11. 1. poedit 설치. poedit poedit 란 확장자 .po 인 "cross-platform gettext 카달로그 파일" 편집기. .po파일 저장시 .mo 파일 자동생성. .po 파일 용도 : 응용프로그램에서 언어별 표현. 워드프레스에서도 테마. 플러그인 등에서 타언어 표현시 .po 파일 이용함. poedit 설치 파일 다운로드 경로 : http://poedit.net/ 무료버전 과 유료버전이 있는데, 무료버전 받으면 됨. poedit 설치 과정 : 다운로드 받은 설치파일 실행하고 next 만 눌러주면 됨. 설치 옵션 없음. poedit 실행화면. 활용법 기본. poedit 에서 .po 파일 열어서 편집하여 저장함. 저장시 .mo 파일 자동생성 하려면 poedit 메뉴 파일 -> 기본설정 -> 편집기 탭 (아래그림)에서.. 2014. 11. 1. 워드프레스 회원 관리(가입, 로그인, 회원정보) 플러그인 UserPro 설치, 둘러보기. 개요. 본 글은 회원 관리 플러그인인 UserPro 설치정보/둘러보기/라이센스 처리(구매코드) 방법 정리한다. UserPro 도움말 사이트 -> http://userproplugin.com/ (크롬으로 접속해야 정상적인 모습이 보임.) 참고 : 플러그인 조사 자료 -> http://igotit.tistory.com/116 1. UserPro 설치,둘러보기, 구매코드 등록. UserPro 사이트 : http://codecanyon.net/item/userpro-user-profiles-with-social-login/5958681 구매시 발급되는 구매코드 필요. 구매하고 나면 파일다운로드 가능함과 동시에, 본인 메일로 "구매코드"를 보내준다. 혹은 위 사이트 자신 계정에서 "download" 부분에 구매코.. 2014. 10. 31. 워드프레스 테마 만들기 12편. CSS에 구글 나눔고딕 폰트 지정, 테마 스크린샷, 1~12편까지 백업. 개요. 본 테마 만들기 12편에서는 CSS에 구글 나눔고딕 웹폰트를 지정하고, 테마의 스크린 샷 추가하고, 1편에서 본 12편까지 만들어진 테마 구성파일들을 압축하여 본 글에 첨부한다. 1. CSS에 구글 나눔 고딕 폰트 지정하기. 구글 웹폰트 나눔고딕을 지정하고 웹페이지에서 보이는 모든 글자에 적용시키도록 한다. 아래 style.css코드의 앞부분에 추가된 푸른색 글자 부분이다. 폰트가 설정되는 대상은 전체 선택자 * 로 지정하여 모든 글자에 적용되게 하였다. ... Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: skeleton Tex.. 2014. 10. 31. 워드프레스 테마 만들기 11편. CSS 이용하여 메뉴 만들기. 개요. 본 글에서는 CSS 를 이용하여 메뉴만드는 과정 간략 정리한다. 설명. 현재의 우리 테마의 메뉴 부분을 보면 아래 그림처럼 투박하게 생긴 것이 보인다. 테마에서 메뉴를 보이게 하는 처리는 템플릿파일 중에서 header.php (테마 만들기 5편에서 했었던것) 의 아래 부분의 워드프레스에서 제공하는 메뉴 표현 함수에 의하여 보이고 있는 중이다. header.php 중에서 메뉴를 표현하는 부분. 아래 파란색 부분의 코드에 의하여 위 그림의 메뉴처럼 보이고 있음. ... 워드프레스에서 제공되는 메뉴 표현함수는 그래픽 요소는 표현하지 않으며, 로 메뉴 항목들을 트리구조로 표현하는 기능만 있다. 동시에 메뉴블럭의 클래스 이름과 ul 블럭의 아이디를 할당시키고 있다. 즉, CSS에서 제어할 수 있는 타겟을 .. 2014. 10. 31. 워드프레스 테마 만들기 10편. CSS 이용하여 박스 그리드 표현하기. 개요. 본 글에서는 CSS를 이용하여 박스 그리드 만드는 방법을 보이고 포스트 목록에 적용하여 글들이 박스 그리드로 리스팅되게 한다. 설명. CSS는 html 의 특정 블럭을 웹페이지에서 표현할때 다양화 할 수 있다는 장점이 있다. 박스 그리드 표현에 대해 간단히 예를 통해서 구현방법을 익혀본다. 본 글에서는 포스트 리스트를 박스 그리드로 표현하는 것을 구현해본다. 즉, 웹페이지에서 보이는 아래 붉박의 포스트 리스트를 각각을 박스로 처리해서 그리드로 표현한다. 1. 각 포스트에 클래스 지정하기. 우리는 CSS에서 각 포스트를 선택해야 하므로 index.php 에서 포스트 표현하는 부분에 아래 처럼 기록한다. 모든 포스트는 동일한 클래스 이름 test_box 를 갖게된다. 테마만들기 시험중. 테마명 : i.. 2014. 10. 30. 워드프레스 테마 만들기 9편. CSS 이용하여 레이아웃 만들기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 9편이며, 8편에 연결된 내용임. 워드프레스 테마 만들기 8편. searchform.php추가. 보기 -> http://igotit.tistory.com/163 개요. 본 글에서는 테마의 style.css 에 css 구문 추가하여 웹페이지에서 보이는 레이아웃을 만드는 과정을 설명한다. 본 글에서는 CSS개념같은 기초적인 사항은 별도의 설명없이 진행된다. 최소한 아래 CSS의 개념은 알고있는 상태에서 가능한 작업이다. CSS 요점정리 보기 -> http://igotit.tistory.com/146CSS 선택자 활용정보 요약 -> http://igotit.tistory.com/166CSS 파일 만들기 -> http://igotit.tistory.com/169 설.. 2014. 10. 30. 워드프레스 테마 만들기 8편. 검색창 템플릿 searchform.php 추가하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 8편이며, 7편에 연결된 내용임. 워드프레스 테마 만들기 7편. archive.php, 404,php, search.php추가. 보기 -> http://igotit.tistory.com/141 개요. 본 테마만들기 8편에서는 테마에 검색창 템플릿인 searchform.php 를 추가한다. 이전의 템플릿과 달리 검색창에서는 태그가 필요하다. 1. searchform.php 만들기. searchform.php 는 검색폼 표현하는 용도이다.워드프레스 기본 검색폼은 아래 그림의 검색 : 에디트박스 버튼 으로 구성된 간단한 폼이 제공된다. 참고 : 워드프레스의 기본 검색폼 템플릿은 별도의 템플릿 파일로 되어있지 않고 wp-includes/general-template.. 2014. 10. 30. 워드프레스 테마 만들기 7편. archive.php, 404.php, search.php 추가하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 7편이며, 6편에 연결된 내용. 6편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가하기. 보기 -> http://igotit.tistory.com/135 개요. 6편 에서 만들어진 테마에 아래 3개의 템플릿파일 들을 추가한다. 1. archive.php 2. 404.php 3. search.php 설명. 지난 5편에서 sidebar.php 를 새로 만들어 테마에 추가하였고, 이를 웹사이트에서 보면 아래 그림의 붉은 박스에 표현되고 있다. 위 사이드바에서 category 의 미분류를 클릭해보면 미분류에 속한 글의 리스트가 보여야 하는데 아직 우리 테마에서는 category.php 나 archive.. 2014. 10. 28. 워드프레스 테마에 공백 생기는 오류 해결 - php 파일 인코딩을 UTF-8 BOM없는것으로 해야함. 개요. 본 글은 워드프레스에서 발생하는 흔한 오류중의 하나인 테마의 상단에 공백 생기는 오류를 해결한다. 1. 워드프레스 테마에 공백 오류 증상과 원인을 설명하고, 2. 1의 문제를 해결하기 위하여 php 파일을 BOM 이 부착되지 않은 UTF-8 로 만드는 것으로 해결한다. 3. BOM 없는 UTF-8 인코딩으로 PHP파일을 만들 때 사용하는 프로그램은 Notepad++ 를 이용하는 것으로 한다. 1. 워드프레스 테마 공백 오류 증상 및 원인. 1. 테마의 공백 오류 증상. 워드프레스에 플러그인을 설치하든지 혹은 직접 테마를 만드는 과정에서 간혹 아래 그림과 같이 테마의 상단 (붉은박스부분)에 공백이 끼어드는 경우가 있다. 이와 같은 테마에서의 공백오류는 워드프레스 관리자 페이지에서도 나타난다. 2. .. 2014. 10. 24. 워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가. 본 글은 "워드프레스 테마 만들기" 시리즈 글 6편이며, 5편에 연결된 내용. 5편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 5편. header.php다듬기, 메뉴추가, functions.php, page.php 추가. 보기 -> http://igotit.tistory.com/129 개요. 본 글에서는, 아래 2가지 사항을 상세히 정리한다. 1. 제작중인 테마의 functions.php 에 코드추가하여 "사이드바와 위젯"를 사용가능하게 한다. 이 처리작업으로 워드프레스에서의 메뉴 외모 하위에 "위젯"이 추가된다.(위젯과 사이드바는 같이 관리된다. 즉, functions.php 에서는 sidebar 를 등록하는 함수로 사이드바를 사용가능하게 설정하게 되며 위젯사용하는것을 별도로 처리하지 않아도 워드.. 2014. 10. 23. 워드프레스 사이드바,위젯 개요. 활용예, 개발 정보. 개요 본 글은 워드프레스로 만들어진 사이트에서 흔히 보게되는 사이드바 개요 글이다. 사이드바가 웹페이지에 배치되는 예, 위젯과 사이드바, 위젯과 사이드바를 활용하는예(링크로 소개됨), 마지막으로 사이드바를 구현 해야 하는 개발자에게 필요한 정보(링크로 소개됨) 를 정리한다. 사이드바. 웹사이트에 정보를 표현할 때 사이드바에 표현하기 적합한 정보는 메인에 보이는 컨텐츠와는 다른 류들이 많이 배치된다. 포스트 리스트라든지 광고배너를 넣기도 하고, 네비게이션 용도로 많이 사용한다. 그러나 그 기능이 한정된 것은 아니다. 위젯은 모두 사이드바에 넣어서 표현될 수 있다. 사이드바는 모든 웹페이지에서 항상 보일수도있다. 선택적으로 보일 수도 있다. 회사소개에는 안보이고 제품페이지에서만 보인다든지. 1. 사이드바 의.. 2014. 10. 23. 워드프레스 테마 만들기 5편. header.php 다듬기, 메뉴 추가, functions.php, page.php 추가하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 5편이며, 4편에 연결된 내용임. 워드프레스 테마 만들기 4편. 테마에 single.php 추가하여 포스트 1개 보기 구현하기. 보기 -> http://igotit.tistory.com/126 개요. 본 글에서는, 1. 테마의 header.php 에서의 요구사항을 검토하고, 2. 1의 요구사항대로 header.php 를 코드정리한다.3. functions.php를 테마에 추가하고, 우리의 테마에서 메뉴 편집 가능하게 하고, 4. header.php에서 메뉴를 표현하는 코드 추가하여 웹페이지에서도 메뉴가 보이게 하고, 5. 페이지를 볼 수 있는 page.php 를 테마에 추가한다. 테마만들기 4편.. 2014. 10. 22. 워드프레스 테마의 functions.php 기능 이해, 코딩 방법 개념잡기 개요 본 글은 워드프레스 테마의 구성파일 중 하나인 functons.php 의 기능 및 functions.php에 특정기능을 구현하는 코딩 흐름 간략히 정리한다. 1. 워드프레스 테마파일 중 functons.php 워드프레스의 테마의 구성파일들은 여러 개가 있고, 가장 간단하게 테마파일로써 워드프레스에서 인식되게 할려면 style.css와 index.php 만 있어도 된다. 이는 테마로써의 인식될 때 필요한 최소파일일 뿐 실제 테마로써의 기능을 충실히 수행하기 위해서는 포스트를 표현하는 single.php, 카테고리 표현하는 category.php, 페이지 표현하는 page.php 를 추가해야한다. 대부분이 정보를 웹에 표현하는 류들인데, functions.php는 웹에 표현하는 기능은 하지 않고, 플러.. 2014. 10. 22. 워드프레스 테마 만들기 4편. 포스트 표현용 템플릿 single.php 추가하기 본 글은 "워드프레스 테마 만들기" 시리즈 글 4편이며, 3편에 연결된 내용임. 3편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 3편. index.php에 Loop 구현하기. 보기 -> http://igotit.tistory.com/125 개요 본 글에서는 테마(이름 : Skeleton) 에 포스트 표현용 템플릿 single.php 를 추가하여 웹페이지에서 포스트 1개를 볼 수 있는 기능을 구현한다. 테마만들기 3편(http://igotit.tistory.com/125 ) 의 코드상태에서 추가되는 부분만 정리됨. 1.테마에서 포스트 표현용 템플릿 single.php 워드프레스는 항상 기본포스트와 기본 페이지를 작성할 수 있는 상태로 되어있다. 워드프레스 관리자 메뉴에 보이는 포스트와 페이지 가 그것.. 2014. 10. 22. 워드프레스 테마 만들기 3편. Loop 구현하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 3편이며, 2편에 연결된 내용임. 2편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 2편. index.php수정,템플릿추가. 보기 -> http://igotit.tistory.com/122 개요. 본 글에서는 테마(이름 : Skeleton) 의 index.php 파일에 Loop 코드 영역을 구현하고 작성한 포스트 리스트가 표현되도록 한다. 이전 2편 글 (http://igotit.tistory.com/122 ) 이후부터의 코드 수정사항이 적용되므로 2편을 숙지한 상태에서 본 글을 봐야 함. 본 글에서 다루는 내용은 Loop에 대한 기본 이해를 바탕으로 하므로, 아래 Loop 에 대한 기본 이해사항 숙지하고 있어야 함. 워드프레스 루프(Loop) 이해하기... 2014. 10. 22. 이전 1 2 3 4 5 다음
