지속가능티끌/웹,워드프레스 ( 122 ) 워드프레스 레볼루션 슬라이더 웹에 표현하기.-Revolution Slider 개요 워드프레스에서 "레볼루션 슬라이더" 로 만들어진 슬라이더를 웹사이트에 보이게 하는 방법 정리. 3가지 방법이 가능하다. 1. 숏코드 삽입방식. 2. 위젯을 사이드바에 배치하는 방식. 3. Visual Composer 이용하는 방법. 관련정보.레볼루션 슬라이더 만드는 방법 -> http://igotit.tistory.com/194 1. 숏코드 삽입방식. 레볼루션 슬라이더 리스트를 보면 숏코드가 자동으로 만들어져 있다. 이것을 포스트나 페이지에 기록하면 웹페이지에서 보일때는 슬라이더가 보이게 된다. 포스트나 페이지 편집기 툴바 아이콘중에서 레볼루션 슬라이더 선택할 수 있는 콤보박스 이용하여 간단히 삽입가능하다. 해당 페이지가 웹에서 보이는 모습. 2. 위젯을 사이드바에 배치하는 방식. 레볼루션 슬라이더.. 2014. 11. 11. 워드프레스 레볼루션 슬라이더 만들기.-Revolution Slider 개요. 워드프레스에서 "레볼루션 슬라이더" 를 이용하여 새 슬라이더를 만드는 과정 정리. 용어. 슬라이더(Slider)와 슬라이드(Slide) : 여러 개의 슬라이드 의 모음이 슬라이더. 슬라이더를 새로 생성하고 그 속에 슬라이드를 만드는 것임. 새 슬라이더 만드는 과정. 1. 새 슬라이더 만들기. - 워프관리자 좌측메뉴의 Revolution Slider 클릭하여 새 "Create New Slider" 버튼 클릭한다. (아래 그림) 슬라이더 설정창이 뜬다. (아래그림)- Slider Title : 제목을 영문으로 기록한다. 기존 만든 슬라이더와 중복되지 않게 이름정한다. 예.rslider1- Slider Alias : Slider Title 과 동일이름으로 한다.그외 나머지 것들은 지금단계에서 설정하지 .. 2014. 11. 11. 워드프레스 테마 ROYAL footer 설정방법. 개요 워드프레스 테마 중 ROYAL 의 footer 부분 표현 방법 정리. 관련사전정보.ROYAL테마 설치 및 기본설정 -> http://igotit.tistory.com/189 ROYAL 테마의 footer 설정법. 개념 :로얄테마에서는 푸터영역에 표현되는 컬럼 1개에 사이드바(Custom Sidebar) 1개를 표현하며, 여기서 컬럼이란 Visual Composer 로 만들어진 row 내부에 사용자가 생성한 컬럼이며, 임의로 개수 지정가능함. ROYAL 테마의 footer 설정 전체 흐름. 1. 위젯에서 "Custom Sidebar" 를 임의 이름(예: Product List)으로 새로 생성한다. - Custom Sidebar 는 로얄테마에서 제공하는 기능임. 푸터영역의 1개 컬럼에 사이드바 1개 표.. 2014. 11. 10. 우커머스 설정 - 계정 부분. - WooCommerce Settings Accounts. 개요 우커머스의 설정(Settings) 중 계정(Accounts) 설정법 정리. 1. 계정페이지와 계정최종점.(My Account Page, My Account Endpoints) 2. 회원가입 옵션. (Registration Options) 우커머스 계정 설정 워드프레스 관리자 좌측메뉴의 우커머스 -> 설정 클릭하여 "계정"탭을 클릭. 이곳에서 계정관련 설정을 할 수 있다. 아래그림. 1. 계정페이지와 계정최종점.(My Account Page, My Account Endpoints)아래 그림에서 붉은색 박스에 있는 것은 회원관련 페이지와 주소창의 접근주소를 보이고 있는 것이다. "나의 계정페이지" 기능 : 계정관련으로 처리하는 기능의 페이지를 우커머스에게 지정하는 것이다. 기본 설정은 우커머스 설치시 .. 2014. 11. 8. 워드프레스 테마 ROYAL 설치 및 초기 설정. 개요 워드프레스 테마 ROYAL 의 설치와 ROYAL의 자식테마 만들기, 기본 설정 정리함. 테마 ROYAL 조사 정보 -> http://igotit.tistory.com/187 에서 조사된 4종의 테마중 가장 유용해 보임. ROYAL 테마의 주요특징 : WooCommerce, WPML 호환. 숍 및 상품 표현이 다른 테마 대비 풍부함. 테마정보및 구매처 : http://themeforest.net/item/royal-multipurpose-wordpress-theme/8611976 1. ROYAL 테마 설치 및 자식테마 만들기. 1. 테마파일준비. 구매한 파일을 다운로드 받아서 압축풀면 royal_v1.4.zip 파일이 있다. 2. 테마 설치. 워프 관리자 사이트에서 1에서 준비된 파일을 업로드 시켜서.. 2014. 11. 5. 워드프레스 자식테마 만들기. 활용법 - child theme 개요 워드프레스의 테마를 차일드 테마로 만드는 방법과 자식테마 활용법 정리. 차일드테마 필요성. - 테마의 원본을 수정(예: functions.php 에 코드 추가등)하여 사용 중인데, 테마의 업데이트가 이뤄지면 덮어쓰기 하게되어 수정사항을 모두 잃어버림. - 테마에 수정한 것은 없다고 해도, 테마의 업데이트가 오히려 기존 정상작동하였던 기능에 하자가 발생할 위험성 차단. 어쨌든, 테마파일을 수정하여 사용하려는 경우 무조건 차일드 테마를 만들어서 사이트에 적용시키고 수정이 요구되는 모든 것은 차일드테마의 파일을 수정하도록 함. 본 글에서 다루는 자식테마 설정은 codex에서 제공하는 정보 기반함. -> http://codex.wordpress.org/Child_Themes 자식 테마 만드는 전체적인 흐름.. 2014. 11. 5. 워드프레스 테마 조사. 상품,제품 표현 기능이 풍부한 것 위주-우커머스, 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. 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. 이전 1 2 3 4 5 6 7 다음
