지속가능티끌 ( 988 ) 워드프레스 회원관리 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. 윈도우 로그인 없애기. 윈도우 부팅할 때마다 나오는 로그인창 없이 윈도우로 진입하게 하는 방법. 1. 시작 -> 실행... 클릭하여 뜬 실행창에 control userpassword2 를 기록하고, 확인 클릭. 윈도우 시작에 "실행..". 이 안보이면 키보드에서 " 윈도우키 + R " 동시 클릭하면됨. 2. 사용자 계정 창에서 아래그림의 붉은박스 부분처럼 체크해제하고 적용버튼 클릭. 설정끝. 이후 부터는 컴퓨터 부팅시 로그인창 나오지 않고 바로 윈도우로 진입한다. 기타. 다시 로그인 창 나오게 하려면? 위 체크박스를 다시 체크해주면 됨. 본 글 포함된 상위 정리글 오토 트레이딩 http://igotit.tistory.com/840 ///170. 2014. 10. 29. CSS 파일 만들기. 개요. 본 글에서 CSS 파일만들기 및 주석과 구문 작성 기본 사항 정리한다. 설명. 확장자 css 인 파일을 별도로 준비해두고, html 내 에서는 이 파일을 링크 걸어 사용하는 방식을 주로 이용한다. 별도로 만들어져 있는 css파일이름이 style.css라고 하자. html 의 사이에 아래처럼 기록되면 된다. css 파일이 있는 곳은 웹서버와 동일서버/ 외부 서버 모두 가능하다. 아래 내용에서는 css 파일 만들기 관련으로 고려사항 설명한다. 1. CSS 파일 만들기 CSS 파일 만들기. 1. 텍스트 편집가능한 프로그램으로 확장자를 css 로 해서 임의의 파일명으로 만든다. 2. 문서인코딩은 UTF-8 ( BOM 없는) 로 저장한다. 사용할만한 툴 : Notepad++. 설치 보기 -> http://.. 2014. 10. 29. CSS 선택자 활용정보 요약. CSS 의 Selector (선택자) 활용 정보 요약. 선택자 대표 적인것. 타입 선택자 (Type Selector) 아이디 선택자 (ID Selector) 클래스 선택자 (Class Selector) 전체 선택자 (Univeral Selector) 위 선택자외 모든 선택자 보기 -> http://igotit.tistory.com/167 3종의 선택자 각각을 살펴본다. 타입 선택자 html 요소를 CCS 구문의 선택자로 기록한다. 예: html 에 가 있고, 이를 CSS에서 이 부분을 설정하고 싶다면, P{color : red;} 아이디 선택자 html에서 타이틀: 잘먹고 잘사는법 처럼 id="" 으로 지정된 것을 CSS 구문의 선택자로 기록한다. 아이디 선택자기록시 #을 앞에 부착한다. 즉, #id1{.. 2014. 10. 29. CSS Property(속성) 전체 리스트. Property 전체 리스트 W3C 에서 제공하는 Property 정리 테이블 -> http://www.w3.org/TR/css-2010/#properties 복사해옴. Name 에 있는 것이 속성이며 클릭하면 상세정보를 볼 수 있다. Name Values Initial value Applies to Media background-attachment scroll | fixed | inherit scroll visual background-color | inherit transparent visual background-image | none | inherit none visual background-position [ [ | | left | center | right ] [ | | top | center.. 2014. 10. 29. CSS Selector(선택자) 전체 리스트. W3C 제공 CSS3 Selector 상세설명 -> http://www.w3.org/TR/css-2010/#selectors 에서 제공하는 Selector 전체 리스트 복사해옴. 아래 링크를 클릭하면 해당 Selector 의 상세설명 볼 수 있음. The following table summarizes the Selector syntax: Pattern Meaning Described in section First defined in level * any element Universal selector 2 E an element of type E Type selector 1 E[foo] an E element with a "foo" attribute Attribute selectors 2 E[foo="b.. 2014. 10. 29. css (cascading style sheets) 요점 정리 및 활용시 필요한 상세정보 있는 곳. 개요 본 글은 웹에 표현되는 html에서 css 를 활용하기 위한 CSS 개념정리 글. css 구문의 세세한 속성 설정법 등은 본 글에서 설명되지 않는다. 본글에서 CSS의 명확한 개념정리가 되면, 그 다음 할일은 css 구문의 속성별 상세한 성질, 구문에서 selector 설정법을 알아야 함을 알게되며 이들 정보를 어디서 구할 수 있는지 정리한다. 1. CSS (Cascading Style Sheet) 가 무엇? CSS : Cascading Style Sheet 의 약어. CSS 기능 : 웹페이지에 정보를 표현하는 규격인 html 과 연동되어 웹에서 html(xhtml, xml 포함 일반적으로는 마크업언어) 이 웹브라우저에서 "표현"되는 방식(웹페이지 레이아웃 및 글자의 폰트, 색상 등)을 지정한다. .. 2014. 10. 29. 워드프레스 테마 만들기 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. 이전 1 ··· 49 50 51 52 53 54 55 다음
