테마 ( 22 ) 워드프레스 테마 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. 워드프레스 테마 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. 워드프레스 테마 만들기 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. 워드프레스 테마 만들기 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편(http://igotit.tistory.com.. 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. 워드프레스 루프(Loop) 이해하기. - 웹페이지에 정보 표현 하는 코드부 개요 본 글은 워드프레스에서 가장 중요한(혹은 워드프레스의 특징적인) 처리방식인 Loop 에 대한 이해를 위한 목표로 하여 간략히 정리된다. 본 글의 내용은 아래 codex에서 제공하는 정보를 기반으로 한다. 1. The Loop in Action 보기 -> http://codex.wordpress.org/The_Loop_in_Action 2. The Loop 보기 -> http://codex.wordpress.org/The_Loop 1.워드프레스에서 Loop의 기능 1. 워드프레스의 Loop 은 템플릿 파일(index.php , single.php,... 같은 php파일들을 의미함)내에 구현되어 "웹페이지에 정보를 보이게 하는 처리"를 수행한다. 2.1의 글에서 "정보"란 워드프레스에서 작성된 post.. 2014. 10. 21. 워드프레스 테마 만들기 2편. index.php 수정하고 템플릿 추가하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 2편이며, 1편에 연결된 내용임. 1편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 1편. 시작점 style.css, index.php 보기 -> http://igotit.tistory.com/85 개요. 본 글은 이전 "워드프레스 테마만들기 시작점" 에서 만들어 뒀던 index.php 파일의 내용을 html 형식에 맞게 온전한 html 문서로 수정해서 html 형식으로 표현된것 맛보기를 하고, index.php 파일을 워드프레스 형식대로 변경하는 작업까지 정리 한다. 이 과정에서 추가의 템플릿 파일 2개 (header.php, footer.php) 가 테마에 추가된다. 1편 글에서는 워드프레스에서 테마로 인식되는 최소한의 파일인 style.css, in.. 2014. 10. 21. 이전 1 2 다음
